Cleanup PipelineDetails

Author: camielvs

src/components/Editor/Context/PipelineDetails.tsx

@@ -0,0 +1,128 @@
+import { useEffect, useState } from "react";
+
+import { useValidationIssueNavigation } from "@/components/Editor/hooks/useValidationIssueNavigation";
+import { ContentBlock } from "@/components/shared/ContextPanel/Blocks/ContentBlock";
+import { ListBlock } from "@/components/shared/ContextPanel/Blocks/ListBlock";
+import { TextBlock } from "@/components/shared/ContextPanel/Blocks/TextBlock";
+import { CopyText } from "@/components/shared/CopyText/CopyText";
+import { TaskImplementation } from "@/components/shared/TaskDetails";
+import { BlockStack, InlineStack } from "@/components/ui/layout";
+import { useComponentSpec } from "@/providers/ComponentSpecProvider";
+import { getComponentFileFromList } from "@/utils/componentStore";
+import { USER_PIPELINES_LIST_NAME } from "@/utils/constants";
+
+import PipelineIO from "../../shared/ArtifactsList/PipelineIO";
+import { PipelineValidationList } from "./PipelineValidationList";
+import RenamePipeline from "./RenamePipeline";
+
+const PipelineDetails = () => {
+  const {
+    componentSpec,
+    digest,
+    isComponentTreeValid,
+    globalValidationIssues,
+  } = useComponentSpec();
+
+  const { handleIssueClick, groupedIssues } = useValidationIssueNavigation(
+    globalValidationIssues,
+  );
+
+  // State for file metadata
+  const [fileMeta, setFileMeta] = useState<{
+    creationTime?: Date;
+    modificationTime?: Date;
+    createdBy?: string;
+  }>({});
+
+  // Fetch file metadata on mount or when componentSpec.name changes
+  useEffect(() => {
+    const fetchMeta = async () => {
+      if (!componentSpec.name) return;
+      const file = await getComponentFileFromList(
+        USER_PIPELINES_LIST_NAME,
+        componentSpec.name,
+      );
+      if (file) {
+        setFileMeta({
+          creationTime: file.creationTime,
+          modificationTime: file.modificationTime,
+          createdBy: file.componentRef.spec.metadata?.annotations?.author,
+        });
+      }
+    };
+    fetchMeta();
+  }, [componentSpec.name]);
+
+  const metadata = [
+    {
+      label: "Created by",
+      value: fileMeta.createdBy,
+    },
+    {
+      label: "Created at",
+      value: fileMeta.creationTime?.toLocaleString(),
+    },
+    {
+      label: "Last updated",
+      value: fileMeta.modificationTime?.toLocaleString(),
+    },
+  ];
+
+  const annotations = Object.entries(
+    componentSpec.metadata?.annotations || {},
+  ).map(([key, value]) => ({ label: key, value: String(value) }));
+
+  return (
+    <BlockStack
+      gap="4"
+      className="h-full px-2"
+      data-context-panel="pipeline-details"
+    >
+      <CopyText className="text-lg font-semibold">
+        {componentSpec.name ?? "Unnamed Pipeline"}
+      </CopyText>
+
+      <InlineStack gap="2">
+        <RenamePipeline />
+        <TaskImplementation
+          displayName={componentSpec.name ?? "Pipeline"}
+          componentSpec={componentSpec}
+          showInlineContent={false}
+        />
+      </InlineStack>
+
+      <ListBlock items={metadata} marker="none" />
+
+      {componentSpec.description && (
+        <TextBlock title="Description" text={componentSpec.description} />
+      )}
+
+      {digest && (
+        <TextBlock
+          title="Digest"
+          text={digest}
+          copyable
+          className="bg-secondary p-2 rounded-md border"
+          mono
+        />
+      )}
+
+      {annotations.length > 0 && (
+        <ListBlock title="Annotations" items={annotations} marker="none" />
+      )}
+
+      <PipelineIO />
+
+      <ContentBlock title="Validations">
+        <PipelineValidationList
+          isComponentTreeValid={isComponentTreeValid}
+          groupedIssues={groupedIssues}
+          totalIssueCount={globalValidationIssues.length}
+          onIssueSelect={handleIssueClick}
+        />
+      </ContentBlock>
+    </BlockStack>
+  );
+};
+
+export default PipelineDetails;

…alidationList/PipelineValidationList.tsx …ditor/Context/PipelineValidationList.tsxsrc/components/Editor/components/PipelineValidationList/PipelineValidationList.tsx renamed to src/components/Editor/Context/PipelineValidationList.tsx src/components/Editor/components/PipelineValidationList/PipelineValidationList.tsx renamed to src/components/Editor/Context/PipelineValidationList.tsx

@@ -20,7 +20,7 @@ import { cn } from "@/lib/utils";
 import { pluralize } from "@/utils/string";
 import type { ComponentValidationIssue } from "@/utils/validations";
 
-import type { ValidationIssueGroup } from "../../hooks/useValidationIssueNavigation";
+import type { ValidationIssueGroup } from "../hooks/useValidationIssueNavigation";
 
 interface PipelineValidationListProps {
   isComponentTreeValid: boolean;
@@ -75,13 +75,13 @@ export const PipelineValidationList = ({
       title={`${totalIssueCount} ${pluralize(totalIssueCount, "issue")} detected`}
     >
       <Paragraph size="sm" className="mb-4">
-        {" "}
         Select an item to jump to its location in the pipeline.
       </Paragraph>
 
       <BlockStack gap="2">
         {groupedIssues.map((group) => {
           const isOpen = openGroups.has(group.pathKey);
+
           return (
             <Collapsible
               key={group.pathKey}

src/components/Editor/RenamePipeline.tsx …onents/Editor/Context/RenamePipeline.tsxsrc/components/Editor/RenamePipeline.tsx renamed to src/components/Editor/Context/RenamePipeline.tsx src/components/Editor/RenamePipeline.tsx renamed to src/components/Editor/Context/RenamePipeline.tsx

@@ -2,14 +2,13 @@ import { useLocation, useNavigate } from "@tanstack/react-router";
 import { Edit3 } from "lucide-react";
 
 import TooltipButton from "@/components/shared/Buttons/TooltipButton";
+import { PipelineNameDialog } from "@/components/shared/Dialogs";
 import useToastNotification from "@/hooks/useToastNotification";
 import { useComponentSpec } from "@/providers/ComponentSpecProvider";
 import { APP_ROUTES } from "@/routes/router";
 import { renameComponentFileInList } from "@/utils/componentStore";
 import { USER_PIPELINES_LIST_NAME } from "@/utils/constants";
 
-import { PipelineNameDialog } from "../shared/Dialogs";
-
 const RenamePipeline = () => {
   const { componentSpec, saveComponentSpec } = useComponentSpec();
   const notify = useToastNotification();