Update proposed change overview UI

frontend/app/src/components/conversations/thread.tsx

@@ -29,6 +29,7 @@ import { AddComment } from "./add-comment";
 import { Comment } from "./comment";
 import { StringParam, useQueryParam } from "use-query-params";
 import { QSP } from "@/config/qsp";
+import { Card } from "@/components/ui/card";
 
 type tThread = {
   thread: any;
@@ -197,37 +198,30 @@ export const Thread = (props: tThread) => {
   );
 
   return (
-    <section
-      className={classNames(
-        isResolved ? "bg-gray-200" : "bg-custom-white",
-        "p-4 rounded-lg relative"
-      )}
+    <Card
+      className={classNames("relative", isResolved && "bg-gray-200")}
       data-testid="thread"
       data-cy="thread">
       {displayContext && getThreadTitle(thread)}
 
-      <div>
-        {sortedComments.map((comment: any, index: number) => (
-          <Comment
-            key={index}
-            author={comment?.created_by?.node?.display_label ?? "Anonymous"}
-            createdAt={comment?.created_at?.value}
-            content={comment?.text?.value ?? ""}
-            className={"border border-gray-200"}
-          />
-        ))}
-      </div>
+      {sortedComments.map((comment: any, index: number) => (
+        <Comment
+          key={index}
+          author={comment?.created_by?.node?.display_label ?? "Anonymous"}
+          createdAt={comment?.created_at?.value}
+          content={comment?.text?.value ?? ""}
+          className={"border border-gray-200"}
+        />
+      ))}
 
       {displayAddComment ? (
-        <div className="flex-1">
-          <AddComment
-            onSubmit={handleSubmit}
-            onCancel={() => setDisplayAddComment(false)}
-            additionalButtons={MarkAsResolvedWithTooltip}
-          />
-        </div>
+        <AddComment
+          onSubmit={handleSubmit}
+          onCancel={() => setDisplayAddComment(false)}
+          additionalButtons={MarkAsResolvedWithTooltip}
+        />
       ) : (
-        <div className="flex flex-1 justify-between">
+        <div className="flex justify-between">
           {MarkAsResolved}
 
           <Button onClick={() => setDisplayAddComment(true)} disabled={!auth?.permissions?.write}>
@@ -245,6 +239,6 @@ export const Thread = (props: tThread) => {
         setOpen={() => setConfirmModal(false)}
         isLoading={isLoading}
       />
-    </section>
+    </Card>
   );
 };

frontend/app/src/components/ui/card.tsx

@@ -11,11 +11,11 @@ export const Card = forwardRef<HTMLDivElement, CardProps>(({ className, ...props
   />
 ));
 
-interface CardWithBorderRootProps extends HTMLAttributes<HTMLDivElement> {
+export interface CardWithBorderProps extends HTMLAttributes<HTMLDivElement> {
   contentClassName?: string;
 }
 
-const CardWithBorderRoot = forwardRef<HTMLDivElement, CardWithBorderRootProps>(
+const CardWithBorderRoot = forwardRef<HTMLDivElement, CardWithBorderProps>(
   ({ children, className, contentClassName, ...props }, ref) => {
     return (
       <div

frontend/app/src/graphql/queries/proposed-changes/getProposedChangesDetails.ts

@@ -84,6 +84,7 @@ export const GET_PROPOSED_CHANGE_DETAILS = gql`
           }
           description {
             value
+            updated_at
           }
           source_branch {
             value

frontend/app/src/pages/proposed-changes/details.tsx

@@ -23,7 +23,6 @@ import { StringParam, useQueryParam } from "use-query-params";
 import LoadingScreen from "@/screens/loading-screen/loading-screen";
 import { ProposedChangesChecksTab } from "@/screens/proposed-changes/checks-tab";
 import { ProposedChangeDetails } from "@/screens/proposed-changes/proposed-change-details";
-import { Conversations } from "@/screens/proposed-changes/conversations";
 import { NetworkStatus } from "@apollo/client";
 import { CoreProposedChange } from "@/generated/graphql";
 
@@ -94,13 +93,7 @@ const ProposedChangeDetailsContent = ({ proposedChangeData }: ProposedChangesDet
         </div>
       );
     default: {
-      return (
-        <div className="flex flex-wrap p-2 gap-2 items-start">
-          <ProposedChangeDetails />
-
-          <Conversations />
-        </div>
-      );
+      return <ProposedChangeDetails />;
     }
   }
 };

frontend/app/src/screens/diff/artifact-diff/artifact-content-diff.tsx

@@ -244,8 +244,6 @@ export const ArtifactContentDiff = (props: any) => {
         },
       });
 
-      toast(<Alert type={ALERT_TYPES.SUCCESS} message={"Comment added"} />);
-
       if (refetch) {
         refetch();
       }

frontend/app/src/screens/diff/file-diff/file-content-diff.tsx

@@ -274,8 +274,6 @@ export const FileContentDiff = (props: any) => {
         },
       });
 
-      toast(<Alert type={ALERT_TYPES.SUCCESS} message={"Comment added"} />);
-
       if (refetch) {
         refetch();
       }

frontend/app/src/screens/diff/node-diff/comments.tsx

@@ -1,6 +1,5 @@
 import { AddComment } from "@/components/conversations/add-comment";
 import { Thread } from "@/components/conversations/thread";
-import { ALERT_TYPES, Alert } from "@/components/ui/alert";
 import {
   PROPOSED_CHANGES_OBJECT_THREAD_OBJECT,
   PROPOSED_CHANGES_THREAD_COMMENT_OBJECT,
@@ -22,7 +21,6 @@ import { useAtom } from "jotai";
 import { useAtomValue } from "jotai/index";
 import { useContext } from "react";
 import { useParams } from "react-router-dom";
-import { toast } from "react-toastify";
 import { DiffContext } from ".";
 
 type tDiffComments = {
@@ -153,8 +151,6 @@ export const DiffComments = (props: tDiffComments) => {
         },
       });
 
-      toast(<Alert type={ALERT_TYPES.SUCCESS} message={"Comment added"} />);
-
       handleRefetch();
     } catch (error: any) {
       if (threadId) {

frontend/app/src/screens/proposed-changes/conversations.tsx

@@ -1,6 +1,5 @@
 import { AddComment } from "@/components/conversations/add-comment";
 import { Thread } from "@/components/conversations/thread";
-import { Alert, ALERT_TYPES } from "@/components/ui/alert";
 import {
   ACCOUNT_OBJECT,
   PROPOSED_CHANGES_CHANGE_THREAD_OBJECT,
@@ -23,7 +22,6 @@ import { formatISO } from "date-fns";
 import { useAtomValue } from "jotai/index";
 import { HTMLAttributes, useRef } from "react";
 import { useParams } from "react-router-dom";
-import { toast } from "react-toastify";
 import { FormRef } from "@/components/ui/form";
 import { Card } from "@/components/ui/card";
 import { classNames } from "@/utils/common";
@@ -138,8 +136,6 @@ export const Conversations = ({ className, ...props }: HTMLAttributes<HTMLDivEle
         },
       });
 
-      toast(<Alert type={ALERT_TYPES.SUCCESS} message={"Comment added"} />);
-
       formRef.current?.reset();
       await refetch();
       formRef.current?.reset();
@@ -167,9 +163,7 @@ export const Conversations = ({ className, ...props }: HTMLAttributes<HTMLDivEle
   };
 
   return (
-    <div
-      className={classNames("flex-grow space-y-4 min-w-[350px] max-w-2xl", className)}
-      {...props}>
+    <div className={classNames("flex-grow space-y-4 min-w-[350px]", className)} {...props}>
       {threads.map((item: any, index: number) => (
         <Thread key={index} thread={item} refetch={refetch} displayContext />
       ))}

frontend/app/src/screens/proposed-changes/proposed-change-details.tsx

@@ -6,7 +6,7 @@ import { constructPath } from "@/utils/fetch";
 import { getProposedChangesStateBadgeType } from "@/utils/proposed-changes";
 import { Icon } from "@iconify-icon/react";
 import { useAtom } from "jotai";
-import React from "react";
+import React, { HTMLAttributes } from "react";
 import { useNavigate, useParams } from "react-router-dom";
 import { CardWithBorder } from "@/components/ui/card";
 import { Property, PropertyList } from "@/components/table/property-list";
@@ -15,8 +15,11 @@ import { ProposedChangeEditTrigger } from "@/screens/proposed-changes/proposed-c
 import { PcCloseButton } from "@/screens/proposed-changes/action-button/pc-close-button";
 import { PcMergeButton } from "@/screens/proposed-changes/action-button/pc-merge-button";
 import { PcApproveButton } from "@/screens/proposed-changes/action-button/pc-approve-button";
+import { Conversations } from "@/screens/proposed-changes/conversations";
+import { classNames } from "@/utils/common";
+import { MarkdownViewer } from "@/components/editor/markdown-viewer";
 
-export const ProposedChangeDetails = () => {
+export const ProposedChangeDetails = ({ className, ...props }: HTMLAttributes<HTMLDivElement>) => {
   const { proposedChangeId } = useParams();
   const [proposedChangesDetails] = useAtom(proposedChangedState);
 
@@ -33,14 +36,6 @@ export const ProposedChangeDetails = () => {
       name: "ID",
       value: proposedChangesDetails.id,
     },
-    {
-      name: "Name",
-      value: proposedChangesDetails?.name?.value,
-    },
-    {
-      name: "Description",
-      value: proposedChangesDetails?.description?.value,
-    },
     {
       name: "State",
       value: <Badge variant={getProposedChangesStateBadgeType(state)}>{state}</Badge>,
@@ -112,18 +107,41 @@ export const ProposedChangeDetails = () => {
   ];
 
   return (
-    <CardWithBorder>
-      <CardWithBorder.Title className="flex justify-between items-center">
-        <div
-          onClick={() => navigate(path)}
-          className="text-base font-semibold leading-6 text-gray-900 cursor-pointer hover:underline">
-          Proposed change
-        </div>
+    <div className={classNames("grid grid-cols-3 gap-2 p-2.5 items-start", className)} {...props}>
+      <div className="col-start-1 col-end-3 space-y-4">
+        {proposedChangesDetails?.description?.value && (
+          <CardWithBorder contentClassName="p-4" data-testid="pc-description">
+            <div className="flex items-center gap-2 mb-2">
+              <Avatar name={proposedChangesDetails?.created_by?.node?.display_label} size="sm" />
+
+              {proposedChangesDetails?.created_by?.node?.display_label}
+
+              <DateDisplay
+                date={proposedChangesDetails.description.updated_at}
+                className="ml-auto text-xs font-normal text-gray-600"
+              />
+            </div>
+
+            <MarkdownViewer markdownText={proposedChangesDetails.description.value} />
+          </CardWithBorder>
+        )}
+
+        <Conversations />
+      </div>
+
+      <CardWithBorder className="col-start-3 col-end-4 min-w-[300px]">
+        <CardWithBorder.Title className="flex justify-between items-center">
+          <div
+            onClick={() => navigate(path)}
+            className="text-base font-semibold leading-6 text-gray-900 cursor-pointer hover:underline">
+            Proposed change
+          </div>
 
-        <ProposedChangeEditTrigger proposedChangesDetails={proposedChangesDetails} />
-      </CardWithBorder.Title>
+          <ProposedChangeEditTrigger proposedChangesDetails={proposedChangesDetails} />
+        </CardWithBorder.Title>
 
-      <PropertyList properties={proposedChangeProperties} />
-    </CardWithBorder>
+        <PropertyList properties={proposedChangeProperties} />
+      </CardWithBorder>
+    </div>
   );
 };