feat_favorites_toggle_ui

react-compiler.config.js

@@ -30,6 +30,7 @@ export const REACT_COMPILER_ENABLED_DIRS = [
   "src/hooks/useEdgeSelectionHighlight.ts",
   "src/hooks/useRunSearchParams.ts",
   "src/hooks/useFavorites.ts",
+  "src/components/shared/FavoriteToggle.tsx",
 
   "src/components/shared/Tags",
   "src/components/shared/Submitters/Oasis/components",

src/components/Editor/Context/PipelineDetails.tsx

@@ -7,6 +7,7 @@ import { ContentBlock } from "@/components/shared/ContextPanel/Blocks/ContentBlo
 import { KeyValueList } from "@/components/shared/ContextPanel/Blocks/KeyValueList";
 import { TextBlock } from "@/components/shared/ContextPanel/Blocks/TextBlock";
 import { CopyText } from "@/components/shared/CopyText/CopyText";
+import { FavoriteToggle } from "@/components/shared/FavoriteToggle";
 import { PipelineDescription } from "@/components/shared/PipelineDescription/PipelineDescription";
 import { PipelineRunNameTemplateEditor } from "@/components/shared/PipelineRunNameTemplate/PipelineRunNameTemplateEditor";
 import { useFlagValue } from "@/components/shared/Settings/useFlags";
@@ -102,6 +103,16 @@ const PipelineDetails = () => {
   const actions = [
     <RenamePipeline key="rename-pipeline-action" />,
     <ViewYamlButton key="view-pipeline-yaml" componentSpec={componentSpec} />,
+    ...(componentSpec.name
+      ? [
+          <FavoriteToggle
+            key="favorite-pipeline"
+            type="pipeline"
+            id={componentSpec.name}
+            name={componentSpec.name}
+          />,
+        ]
+      : []),
   ];
 
   return (

src/components/Home/PipelineSection/PipelineRow.tsx

@@ -2,6 +2,7 @@ import { useNavigate } from "@tanstack/react-router";
 import { type MouseEvent } from "react";
 
 import { ConfirmationDialog } from "@/components/shared/Dialogs";
+import { FavoriteToggle } from "@/components/shared/FavoriteToggle";
 import { HighlightText } from "@/components/shared/HighlightText";
 import { PipelineRunInfoCondensed } from "@/components/shared/PipelineRunDisplay/PipelineRunInfoCondensed";
 import { PipelineRunsList } from "@/components/shared/PipelineRunDisplay/PipelineRunsList";
@@ -161,20 +162,23 @@ const PipelineRow = withSuspenseWrapper(
           {name && <PipelineRunsButton pipelineName={name} />}
         </TableCell>
         <TableCell className="w-0">
-          <ConfirmationDialog
-            trigger={
-              <Button
-                variant="ghost"
-                size="icon"
-                className="opacity-0 group-hover:opacity-100 cursor-pointer text-destructive-foreground hover:text-destructive-foreground"
-              >
-                <Icon name="Trash" />
-              </Button>
-            }
-            title={`Delete pipeline "${name}"?`}
-            description="Are you sure you want to delete this pipeline? Existing pipeline runs will not be impacted. This action cannot be undone."
-            onConfirm={confirmPipelineDelete}
-          />
+          <InlineStack gap="1" blockAlign="center">
+            {name && <FavoriteToggle type="pipeline" id={name} name={name} />}
+            <ConfirmationDialog
+              trigger={
+                <Button
+                  variant="ghost"
+                  size="icon"
+                  className="opacity-0 group-hover:opacity-100 cursor-pointer text-destructive-foreground hover:text-destructive-foreground"
+                >
+                  <Icon name="Trash" />
+                </Button>
+              }
+              title={`Delete pipeline "${name}"?`}
+              description="Are you sure you want to delete this pipeline? Existing pipeline runs will not be impacted. This action cannot be undone."
+              onConfirm={confirmPipelineDelete}
+            />
+          </InlineStack>
         </TableCell>
       </TableRow>
     );

src/components/Home/RunSection/RunRow.tsx

@@ -4,6 +4,7 @@ import { type MouseEvent } from "react";
 
 import type { PipelineRunResponse } from "@/api/types.gen";
 import { CopyText } from "@/components/shared/CopyText/CopyText";
+import { FavoriteToggle } from "@/components/shared/FavoriteToggle";
 import { StatusBar, StatusIcon } from "@/components/shared/Status";
 import { TagList } from "@/components/shared/Tags/TagList";
 import { Button } from "@/components/ui/button";
@@ -127,6 +128,9 @@ const RunRow = ({ run }: { run: PipelineRunResponse }) => {
       <TableCell className="max-w-64">
         {tags && tags.length > 0 && <TagList tags={tags} />}
       </TableCell>
+      <TableCell className="w-0">
+        <FavoriteToggle type="run" id={runId} name={name} />
+      </TableCell>
     </TableRow>
   );
 };

src/components/PipelineRun/RunToolbar.tsx

@@ -1,3 +1,4 @@
+import { FavoriteToggle } from "@/components/shared/FavoriteToggle";
 import { InlineStack } from "@/components/ui/layout";
 import { useCheckComponentSpecFromPath } from "@/hooks/useCheckComponentSpecFromPath";
 import { useUserDetails } from "@/hooks/useUserDetails";
@@ -66,6 +67,9 @@ export const RunToolbar = () => {
         isViewingSubgraph ? "top-23" : "top-14",
       )}
     >
+      {runId && pipelineName && (
+        <FavoriteToggle type="run" id={runId} name={pipelineName} />
+      )}
       <ViewYamlButton componentSpec={componentSpec} displayLabel="View" />
 
       {canAccessEditorSpec && pipelineName && (

src/components/shared/FavoriteToggle.tsx

@@ -0,0 +1,37 @@
+import { Star } from "lucide-react";
+import { type MouseEvent } from "react";
+
+import { Button } from "@/components/ui/button";
+import { type FavoriteType, useFavorites } from "@/hooks/useFavorites";
+import { cn } from "@/lib/utils";
+
+interface FavoriteToggleProps {
+  type: FavoriteType;
+  id: string;
+  name: string;
+}
+
+export const FavoriteToggle = ({ type, id, name }: FavoriteToggleProps) => {
+  const { isFavorite, toggleFavorite } = useFavorites();
+  const active = isFavorite(type, id);
+
+  const handleClick = (e: MouseEvent) => {
+    e.stopPropagation();
+    toggleFavorite({ type, id, name });
+  };
+
+  return (
+    <Button
+      onClick={handleClick}
+      data-testid="favorite-toggle"
+      className={cn(
+        "w-fit h-fit p-1 hover:text-warning",
+        active ? "text-warning" : "text-gray-500/50",
+      )}
+      variant="ghost"
+      size="icon"
+    >
+      <Star className="h-4 w-4" fill={active ? "currentColor" : "none"} />
+    </Button>
+  );
+};