Add Info Dialog to Task Details Header (#1210)

## Description

<!-- Please provide a brief description of the changes made in this pull request. Include any relevant context or reasoning for the changes. -->
Adds the "Task Definition" info icon to the task details panel, next to the header. The "delete from component library" trash can has been removed and the functionality can now be accessed from within the dialog (it was confusing to have two trash can icons in the same view).

Also changed the "Delete definition" icon to not be a trash can.

## Related Issue and Pull requests

<!-- Link to any related issues using the format #<issue-number> -->
Closes Shopify/oasis-frontend#265

## Type of Change

<!-- Please delete options that are not relevant -->

- [x] Improvement

## Checklist

<!-- Please ensure the following are completed before submitting the PR -->

- [ ] I have tested this does not break current pipelines / runs functionality
- [ ] I have tested the changes on staging

## Screenshots (if applicable)

<!-- Include any screenshots that might help explain the changes or provide visual context -->

![image.png](https://app.graphite.dev/user-attachments/assets/ebf8c46f-ccca-4bbf-add2-7282b3c78563.png)

![image.png](https://app.graphite.dev/user-attachments/assets/5b1c0ff8-2056-4bdc-9ae4-36292c57c2a5.png)

## Test Instructions

<!-- Detail steps and prerequisites for testing the changes in this PR -->
- Can open info dialog from task details header
- Can remove a component definition from within the info dialog and no longer from the task details pane
- All else works as expected and css/layout is not broken anywhere

## Additional Comments

<!-- Add any additional context or information that reviewers might need to know regarding this PR -->

Author: camielvs

src/components/shared/Dialogs/ComponentDetailsDialog.tsx

@@ -19,6 +19,7 @@ import type { ComponentReference } from "@/utils/componentSpec";
 import InfoIconButton from "../Buttons/InfoIconButton";
 import TooltipButton from "../Buttons/TooltipButton";
 import { ComponentEditorDialog } from "../ComponentEditor/ComponentEditorDialog";
+import { ComponentFavoriteToggle } from "../FavoriteComponentToggle";
 import { InfoBox } from "../InfoBox";
 import { PublishComponent } from "../ManageComponent/PublishComponent";
 import { PublishedComponentDetails } from "../ManageComponent/PublishedComponentDetails";
@@ -184,12 +185,7 @@ const ComponentDetails = ({
   const [open, setOpen] = useState(false);
   const dialogTriggerButton = trigger || <InfoIconButton />;
 
-  const onOpenChange = (open: boolean) => {
-    setOpen(open);
-    if (!open) {
-      onClose?.();
-    }
-  };
+  const componentText = component.text;
 
   const dialogContextValue = useMemo(
     () => ({
@@ -201,6 +197,17 @@ const ComponentDetails = ({
     [],
   );
 
+  const handleCloseEditDialog = useCallback(() => {
+    setIsEditDialogOpen(false);
+  }, []);
+
+  const onOpenChange = useCallback((open: boolean) => {
+    setOpen(open);
+    if (!open) {
+      onClose?.();
+    }
+  }, []);
+
   const handleEditComponent = useCallback(() => {
     setIsEditDialogOpen(true);
   }, []);
@@ -213,6 +220,7 @@ const ComponentDetails = ({
         variant="secondary"
         onClick={handleEditComponent}
         tooltip="Edit Component Definition"
+        key={`${displayName}-edit-button`}
       >
         <Icon name="FilePenLine" />
       </TooltipButton>
@@ -221,12 +229,6 @@ const ComponentDetails = ({
     return [...actions, EditButton];
   }, [actions, hasEnabledInAppEditor, handleEditComponent]);
 
-  const componentText = component.text;
-
-  const handleCloseEditDialog = useCallback(() => {
-    setIsEditDialogOpen(false);
-  }, []);
-
   return (
     <>
       <Dialog modal open={open} onOpenChange={onOpenChange}>
@@ -245,6 +247,7 @@ const ComponentDetails = ({
           <DialogHeader>
             <DialogTitle className="flex items-center gap-2 mr-5">
               <span>{displayName}</span>
+              <ComponentFavoriteToggle component={component} />
             </DialogTitle>
           </DialogHeader>
 

src/components/shared/FavoriteComponentToggle.tsx

@@ -1,25 +1,29 @@
-import { PackagePlus, Star, Trash2 } from "lucide-react";
+import { PackagePlus, Star } from "lucide-react";
 import type { MouseEvent, PropsWithChildren } from "react";
 import { useCallback, useMemo, useState } from "react";
 
 import { ConfirmationDialog } from "@/components/shared/Dialogs";
 import { Button } from "@/components/ui/button";
+import { Icon } from "@/components/ui/icon";
 import { cn } from "@/lib/utils";
 import { useComponentLibrary } from "@/providers/ComponentLibraryProvider";
 import type { ComponentReference } from "@/utils/componentSpec";
 import { getComponentName } from "@/utils/getComponentName";
 
 interface ComponentFavoriteToggleProps {
   component: ComponentReference;
+  hideDelete?: boolean;
 }
 
 interface StateButtonProps {
   active?: boolean;
+  isDanger?: boolean;
   onClick?: () => void;
 }
 
 const IconStateButton = ({
   active,
+  isDanger = false,
   onClick,
   children,
 }: PropsWithChildren<StateButtonProps>) => {
@@ -37,8 +41,12 @@ const IconStateButton = ({
       onClick={handleFavorite}
       data-testid="favorite-star"
       className={cn(
-        "w-fit h-fit p-1 hover:text-yellow-500",
-        active ? "text-yellow-500" : "text-gray-500/50",
+        "w-fit h-fit p-1 hover:text-warning",
+        active ? "text-warning" : "text-gray-500/50",
+        {
+          "hover:text-destructive": isDanger,
+          "text-destructive": isDanger && active,
+        },
       )}
       variant="ghost"
       size="icon"
@@ -69,14 +77,15 @@ const AddToLibraryButton = ({ active, onClick }: StateButtonProps) => {
 
 const DeleteFromLibraryButton = ({ active, onClick }: StateButtonProps) => {
   return (
-    <IconStateButton active={active} onClick={onClick}>
-      <Trash2 className="h-4 w-4" />
+    <IconStateButton active={active} onClick={onClick} isDanger>
+      <Icon name="PackageX" />
     </IconStateButton>
   );
 };
 
 export const ComponentFavoriteToggle = ({
   component,
+  hideDelete = false,
 }: ComponentFavoriteToggleProps) => {
   const {
     addToComponentLibrary,
@@ -140,6 +149,8 @@ export const ComponentFavoriteToggle = ({
     handleDelete();
   }, [component, isInLibrary, addToComponentLibrary, handleDelete]);
 
+  const showDeleteButton = isInLibrary && isUserComponent && !hideDelete;
+
   return (
     <>
       {!isInLibrary && <AddToLibraryButton onClick={openConfirmationDialog} />}
@@ -148,7 +159,7 @@ export const ComponentFavoriteToggle = ({
         <FavoriteStarButton active={isFavorited} onClick={onFavorite} />
       )}
 
-      {isInLibrary && isUserComponent && (
+      {showDeleteButton && (
         <DeleteFromLibraryButton onClick={openConfirmationDialog} />
       )}
 

src/components/shared/ReactFlow/FlowCanvas/TaskNode/TaskOverview/TaskOverview.tsx

@@ -8,13 +8,16 @@ import {
 
 import type { TooltipButtonProps } from "@/components/shared/Buttons/TooltipButton";
 import TooltipButton from "@/components/shared/Buttons/TooltipButton";
+import { ComponentDetailsDialog } from "@/components/shared/Dialogs";
 import { ComponentFavoriteToggle } from "@/components/shared/FavoriteComponentToggle";
 import { StatusIcon } from "@/components/shared/Status";
 import {
   TaskDetails,
   TaskImplementation,
 } from "@/components/shared/TaskDetails";
+import { BlockStack, InlineStack } from "@/components/ui/layout";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { Text } from "@/components/ui/typography";
 import { useExecutionDataOptional } from "@/providers/ExecutionDataProvider";
 import { type TaskNodeContextType } from "@/providers/TaskNodeProvider";
 import { isGraphImplementation } from "@/utils/componentSpec";
@@ -56,13 +59,20 @@ const TaskOverview = ({ taskNode, actions }: TaskOverviewProps) => {
   const executionId = details?.child_task_execution_ids?.[taskId];
 
   return (
-    <div className="flex flex-col h-full" data-context-panel="task-overview">
-      <div className="flex items-center gap-2 px-2 pb-2 font-semibold text-lg">
-        {name} <ComponentFavoriteToggle component={taskSpec.componentRef} />
-        {runStatus && <StatusIcon status={runStatus} tooltip label="task" />}
-      </div>
+    <BlockStack className="h-full" data-context-panel="task-overview">
+      <InlineStack gap="2" blockAlign="center" className="px-2 pb-2">
+        <Text size="lg" weight="semibold">
+          {name}
+        </Text>
+        <ComponentFavoriteToggle component={taskSpec.componentRef} hideDelete />
+        <ComponentDetailsDialog
+          displayName={name}
+          component={taskSpec.componentRef}
+        />
+        {!!runStatus && <StatusIcon status={runStatus} tooltip label="task" />}
+      </InlineStack>
 
-      <div className="flex flex-col px-4 gap-4 overflow-y-auto pb-4 h-full">
+      <div className="px-4 overflow-y-auto pb-4 h-full w-full">
         <Tabs defaultValue="io" className="h-full">
           <TabsList className="mb-2">
             <TabsTrigger value="io" className="flex-1">
@@ -91,7 +101,7 @@ const TaskOverview = ({ taskNode, actions }: TaskOverviewProps) => {
               </TabsTrigger>
             )}
           </TabsList>
-          <TabsContent value="details" className="h-full">
+          <TabsContent value="details">
             <TaskDetails
               displayName={name}
               executionId={executionId}
@@ -123,7 +133,7 @@ const TaskOverview = ({ taskNode, actions }: TaskOverviewProps) => {
               ))}
             />
           </TabsContent>
-          <TabsContent value="io" className="h-full">
+          <TabsContent value="io">
             {!readOnly && (
               <>
                 <ArgumentsSection
@@ -144,7 +154,7 @@ const TaskOverview = ({ taskNode, actions }: TaskOverviewProps) => {
             )}
           </TabsContent>
           {readOnly && !isSubgraph && (
-            <TabsContent value="logs" className="h-full">
+            <TabsContent value="logs">
               {!!executionId && (
                 <div className="flex w-full justify-end pr-4">
                   <OpenLogsInNewWindowLink
@@ -163,7 +173,7 @@ const TaskOverview = ({ taskNode, actions }: TaskOverviewProps) => {
           )}
         </Tabs>
       </div>
-    </div>
+    </BlockStack>
   );
 };