chore: Cleanup Task Action Buttons (#1633)

## Description

<!-- Please provide a brief description of the changes made in this pull request. Include any relevant context or reasoning for the changes. -->
Extract Task Actions into individual Button Components and then render them conditionally within `TaskActions`.

Currently the definition of actions on a task is scattered across multiple different files in an ever-growing `actions` array. This change simplifies things greatly: actions are defined as their own button and then rendered via `TaskActions`.

This change separates concerns for all the different task actions and substantially reduces the amount of code lingering about in `TaskNodeCard`, `TaskOverview`, `TaskActions` and `ComponentDetailsDialog`.

Note: this change renders the general Action Framework created in #1470 somewhat obsolete. However, since the framework was initially created to support ReactNodes for backward-compatibility not change is actually needed to the framework. For now it can be left in place and in the future we can choose to use it or remove it.

Next Steps: Pipeline & Run Actions

## Related Issue and Pull requests

<!-- Link to any related issues using the format #<issue-number> -->

Supersedes #1534 

Related to Shopify/oasis-frontend#401

## Type of Change

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

- [x] Cleanup/Refactor

## 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 -->

No change to UI.

## Test Instructions

<!-- Detail steps and prerequisites for testing the changes in this PR -->

Check that every button in the task details panel and component details dialog works as expected.

## Additional Comments

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

Author: camielvs

src/components/shared/Buttons/ActionButton.tsx

@@ -0,0 +1,39 @@
+import { type ReactNode } from "react";
+
+import { Icon, type IconName } from "@/components/ui/icon";
+
+import TooltipButton from "./TooltipButton";
+
+type ActionButtonProps = {
+  label: string;
+  destructive?: boolean;
+  disabled?: boolean;
+  onClick: () => void;
+  className?: string;
+} & (
+  | { icon: IconName; children?: never }
+  | { children: ReactNode; icon?: never }
+);
+
+export const ActionButton = ({
+  label,
+  destructive,
+  disabled,
+  onClick,
+  className,
+  icon,
+  children,
+}: ActionButtonProps) => {
+  return (
+    <TooltipButton
+      data-testid={`action-${label}`}
+      variant={destructive ? "destructive" : "outline"}
+      tooltip={label}
+      onClick={onClick}
+      disabled={disabled}
+      className={className}
+    >
+      {children === undefined && icon ? <Icon name={icon} /> : children}
+    </TooltipButton>
+  );
+};

src/components/shared/Buttons/TooltipButton.tsx

@@ -8,7 +8,7 @@ import {
   TooltipTrigger,
 } from "@/components/ui/tooltip";
 
-export interface TooltipButtonProps extends ButtonProps {
+interface TooltipButtonProps extends ButtonProps {
   tooltip: React.ReactNode;
   tooltipSide?: "top" | "right" | "bottom" | "left";
   tooltipAlign?: "start" | "center" | "end";

src/components/shared/Buttons/ViewYamlButton.tsx

@@ -1,14 +1,13 @@
 import { useState } from "react";
 
-import { Icon } from "@/components/ui/icon";
 import type {
   ComponentSpec,
   HydratedComponentReference,
 } from "@/utils/componentSpec";
 import { getComponentName } from "@/utils/getComponentName";
 
 import TaskImplementation from "../TaskDetails/Implementation";
-import TooltipButton from "./TooltipButton";
+import { ActionButton } from "./ActionButton";
 
 type ViewYamlButtonProps =
   | { componentRef: HydratedComponentReference; componentSpec?: never }
@@ -34,13 +33,11 @@ export const ViewYamlButton = ({
 
   return (
     <>
-      <TooltipButton
-        variant="outline"
-        tooltip="View YAML"
+      <ActionButton
+        label="View YAML"
+        icon="FileCodeCorner"
         onClick={handleClick}
-      >
-        <Icon name="FileCodeCorner" />
-      </TooltipButton>
+      />
 
       {showCodeViewer && (
         <TaskImplementation

src/components/shared/ContextPanel/Blocks/ActionBlock.tsx

@@ -20,8 +20,7 @@ export type Action = {
   | { content: ReactNode; icon?: never }
 );
 
-// Temporary: ReactNode included for backward compatibility with some existing buttons. In the long-term we should strive for only Action types.
-export type ActionOrReactNode = Action | ReactNode;
+type ActionOrReactNode = Action | ReactNode;
 
 interface ActionBlockProps {
   title?: string;

src/components/shared/Dialogs/ComponentDetailsDialog.tsx

@@ -17,8 +17,6 @@ import { useHydrateComponentReference } from "@/hooks/useHydrateComponentReferen
 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";
@@ -32,9 +30,7 @@ interface ComponentDetailsProps {
   component: ComponentReference;
   displayName: string;
   trigger?: ReactNode;
-  actions?: ReactNode[];
   onClose?: () => void;
-  onDelete?: () => void;
 }
 
 const ComponentDetailsDialogContentSkeleton = () => {
@@ -64,12 +60,7 @@ const ComponentDetailsDialogContentSkeleton = () => {
 };
 
 const ComponentDetailsDialogContent = withSuspenseWrapper(
-  ({
-    component,
-    displayName,
-    actions = [],
-    onDelete,
-  }: ComponentDetailsProps) => {
+  ({ component, displayName }: ComponentDetailsProps) => {
     const remoteComponentLibrarySearchEnabled = useBetaFlagValue(
       "remote-component-library-search",
     );
@@ -84,7 +75,7 @@ const ComponentDetailsDialogContent = withSuspenseWrapper(
       );
     }
 
-    const { url, spec: componentSpec, digest: componentDigest } = componentRef;
+    const componentSpec = componentRef.spec;
 
     const hasPublishSection =
       remoteComponentLibrarySearchEnabled && component.owned;
@@ -133,14 +124,7 @@ const ComponentDetailsDialogContent = withSuspenseWrapper(
                   <PublishedComponentDetails component={componentRef} />
                 ) : null}
 
-                <TaskDetails
-                  displayName={displayName}
-                  componentRef={componentRef}
-                  componentDigest={componentDigest}
-                  url={url}
-                  actions={actions}
-                  onDelete={onDelete}
-                />
+                <TaskDetails componentRef={componentRef} />
               </TabsContent>
 
               <TabsContent value="io" className="h-full">
@@ -175,18 +159,11 @@ const ComponentDetails = ({
   component,
   displayName,
   trigger,
-  actions = [],
   onClose,
-  onDelete,
 }: ComponentDetailsProps) => {
-  const hasEnabledInAppEditor = useBetaFlagValue("in-app-component-editor");
-
-  const [isEditDialogOpen, setIsEditDialogOpen] = useState(false);
   const [open, setOpen] = useState(false);
   const dialogTriggerButton = trigger || <InfoIconButton />;
 
-  const componentText = component.text;
-
   const dialogContextValue = useMemo(
     () => ({
       name: "ComponentDetails",
@@ -197,79 +174,42 @@ const ComponentDetails = ({
     [],
   );
 
-  const handleCloseEditDialog = useCallback(() => {
-    setIsEditDialogOpen(false);
-  }, []);
-
   const onOpenChange = useCallback((open: boolean) => {
     setOpen(open);
     if (!open) {
       onClose?.();
     }
   }, []);
 
-  const handleEditComponent = useCallback(() => {
-    setIsEditDialogOpen(true);
-  }, []);
-
-  const actionsWithEdit = useMemo(() => {
-    if (!hasEnabledInAppEditor) return actions;
-
-    const EditButton = (
-      <TooltipButton
-        variant="secondary"
-        onClick={handleEditComponent}
-        tooltip="Edit Component Definition"
-        key={`${displayName}-edit-button`}
-      >
-        <Icon name="FilePenLine" />
-      </TooltipButton>
-    );
-
-    return [...actions, EditButton];
-  }, [actions, hasEnabledInAppEditor, handleEditComponent]);
-
   return (
-    <>
-      <Dialog modal open={open} onOpenChange={onOpenChange}>
-        <DialogTrigger asChild>{dialogTriggerButton}</DialogTrigger>
-
-        <DialogDescription
-          className="hidden"
-          aria-label={`${displayName} component details`}
-        >
-          {`${displayName} component details`}
-        </DialogDescription>
-        <DialogContent
-          className="max-w-2xl min-w-2xl overflow-hidden"
-          aria-label={`${displayName} component details`}
-        >
-          <DialogHeader>
-            <DialogTitle className="flex items-center gap-2 mr-5">
-              <span>{displayName}</span>
-              <ComponentFavoriteToggle component={component} />
-            </DialogTitle>
-          </DialogHeader>
+    <Dialog modal open={open} onOpenChange={onOpenChange}>
+      <DialogTrigger asChild>{dialogTriggerButton}</DialogTrigger>
 
-          <DialogContext.Provider value={dialogContextValue}>
-            <ComponentDetailsDialogContent
-              component={component}
-              displayName={displayName}
-              trigger={dialogTriggerButton}
-              actions={actionsWithEdit}
-              onClose={onClose}
-              onDelete={onDelete}
-            />
-          </DialogContext.Provider>
-        </DialogContent>
-      </Dialog>
-      {isEditDialogOpen && (
-        <ComponentEditorDialog
-          text={componentText}
-          onClose={handleCloseEditDialog}
-        />
-      )}
-    </>
+      <DialogDescription
+        className="hidden"
+        aria-label={`${displayName} component details`}
+      >
+        {`${displayName} component details`}
+      </DialogDescription>
+      <DialogContent
+        className="max-w-2xl min-w-2xl overflow-hidden"
+        aria-label={`${displayName} component details`}
+      >
+        <DialogHeader>
+          <DialogTitle className="flex items-center gap-2 mr-5">
+            <span>{displayName}</span>
+            <ComponentFavoriteToggle component={component} />
+          </DialogTitle>
+        </DialogHeader>
+
+        <DialogContext.Provider value={dialogContextValue}>
+          <ComponentDetailsDialogContent
+            component={component}
+            displayName={displayName}
+          />
+        </DialogContext.Provider>
+      </DialogContent>
+    </Dialog>
   );
 };