feat: User Notes on Pipelines

Author: camielvs

src/components/Editor/Context/PipelineDetails.tsx

@@ -13,13 +13,17 @@ import { useFlagValue } from "@/components/shared/Settings/useFlags";
 import { BlockStack } from "@/components/ui/layout";
 import useToastNotification from "@/hooks/useToastNotification";
 import { useComponentSpec } from "@/providers/ComponentSpecProvider";
+import { PIPELINE_NOTES_ANNOTATION } from "@/utils/annotations";
 import { getComponentFileFromList } from "@/utils/componentStore";
 import { USER_PIPELINES_LIST_NAME } from "@/utils/constants";
 
 import PipelineIO from "../../shared/Execution/PipelineIO";
+import { PipelineNotesEditor } from "./PipelineNotesEditor";
 import { PipelineValidationList } from "./PipelineValidationList";
 import RenamePipeline from "./RenamePipeline";
 
+const EXCLUDED_ANNOTATIONS = [PIPELINE_NOTES_ANNOTATION];
+
 const PipelineDetails = () => {
   const notify = useToastNotification();
   const { componentSpec, digest, globalValidationIssues } = useComponentSpec();
@@ -79,12 +83,12 @@ const PipelineDetails = () => {
     },
   ];
 
-  const annotations = Object.entries(
-    componentSpec.metadata?.annotations || {},
-  ).map(([key, value]) => ({
-    label: key,
-    value: String(value),
-  }));
+  const annotations = Object.entries(componentSpec.metadata?.annotations || {})
+    .filter(([key]) => !EXCLUDED_ANNOTATIONS.includes(key))
+    .map(([key, value]) => ({
+      label: key,
+      value: String(value),
+    }));
 
   const actions = [
     <RenamePipeline key="rename-pipeline-action" />,
@@ -136,6 +140,10 @@ const PipelineDetails = () => {
           onIssueSelect={handleIssueClick}
         />
       </ContentBlock>
+
+      <ContentBlock title="Notes">
+        <PipelineNotesEditor />
+      </ContentBlock>
     </BlockStack>
   );
 };

src/components/Editor/Context/PipelineNotesEditor.tsx

@@ -0,0 +1,45 @@
+import { useState } from "react";
+
+import { Textarea } from "@/components/ui/textarea";
+import { useComponentSpec } from "@/providers/ComponentSpecProvider";
+import {
+  getAnnotationValue,
+  PIPELINE_NOTES_ANNOTATION,
+} from "@/utils/annotations";
+
+export const PipelineNotesEditor = () => {
+  const { componentSpec, setComponentSpec } = useComponentSpec();
+
+  const annotations = componentSpec.metadata?.annotations;
+  const notes =
+    getAnnotationValue(annotations, PIPELINE_NOTES_ANNOTATION) ?? "";
+
+  const [value, setValue] = useState(notes);
+
+  const onInputChange = (value: string) => {
+    setValue(value);
+  };
+
+  const onBlur = () => {
+    setComponentSpec({
+      ...componentSpec,
+      metadata: {
+        ...componentSpec.metadata,
+        annotations: {
+          ...annotations,
+          [PIPELINE_NOTES_ANNOTATION]: value,
+        },
+      },
+    });
+  };
+
+  return (
+    <Textarea
+      value={value}
+      onChange={(e) => onInputChange(e.target.value)}
+      onBlur={onBlur}
+      placeholder="Share context about this pipeline..."
+      className="text-xs"
+    />
+  );
+};

src/components/PipelineRun/RunDetails.tsx

@@ -7,16 +7,22 @@ import { InfoBox } from "@/components/shared/InfoBox";
 import { LoadingScreen } from "@/components/shared/LoadingScreen";
 import { StatusBar } from "@/components/shared/Status";
 import { BlockStack, InlineStack } from "@/components/ui/layout";
-import { Text } from "@/components/ui/typography";
+import { Paragraph, Text } from "@/components/ui/typography";
 import { useBackend } from "@/providers/BackendProvider";
 import { useComponentSpec } from "@/providers/ComponentSpecProvider";
 import { useExecutionData } from "@/providers/ExecutionDataProvider";
+import {
+  getAnnotationValue,
+  PIPELINE_NOTES_ANNOTATION,
+} from "@/utils/annotations";
 import {
   flattenExecutionStatusStats,
   getExecutionStatusLabel,
   getOverallExecutionStatusFromStats,
 } from "@/utils/executionStatus";
 
+const EXCLUDED_ANNOTATIONS = [PIPELINE_NOTES_ANNOTATION];
+
 export const RunDetails = () => {
   const { configured } = useBackend();
   const { componentSpec } = useComponentSpec();
@@ -60,7 +66,15 @@ export const RunDetails = () => {
     getOverallExecutionStatusFromStats(executionStatusStats);
   const statusLabel = getExecutionStatusLabel(overallStatus);
 
-  const annotations = componentSpec.metadata?.annotations || {};
+  const pipelineAnnotations = componentSpec.metadata?.annotations || {};
+  const pipelineNotes = getAnnotationValue(
+    pipelineAnnotations,
+    PIPELINE_NOTES_ANNOTATION,
+  );
+
+  const displayedAnnotations = Object.entries(pipelineAnnotations)
+    .filter(([key]) => !EXCLUDED_ANNOTATIONS.includes(key))
+    .map(([key, value]) => ({ label: key, value: String(value) }));
 
   return (
     <BlockStack gap="6" className="p-2 h-full">
@@ -98,17 +112,20 @@ export const RunDetails = () => {
         <StatusBar executionStatusStats={executionStatusStats} />
       </ContentBlock>
 
-      {Object.keys(annotations).length > 0 && (
-        <KeyValueList
-          title="Annotations"
-          items={Object.entries(annotations).map(([key, value]) => ({
-            label: key,
-            value: String(value),
-          }))}
-        />
+      {displayedAnnotations.length > 0 && (
+        <KeyValueList title="Annotations" items={displayedAnnotations} />
       )}
 
       <PipelineIO taskArguments={details.task_spec.arguments} />
+
+      <ContentBlock title="Notes">
+        <BlockStack>
+          <Paragraph size="xs">Pipeline Notes</Paragraph>
+          <Paragraph size="xs" tone="subdued">
+            {pipelineNotes || "No notes available for this pipeline."}
+          </Paragraph>
+        </BlockStack>
+      </ContentBlock>
     </BlockStack>
   );
 };

src/utils/annotations.ts

@@ -52,3 +52,4 @@ function hasAnnotation(
 
 export const DISPLAY_NAME_MAX_LENGTH = 100;
 export const TASK_DISPLAY_NAME_ANNOTATION = "display_name";
+export const PIPELINE_NOTES_ANNOTATION = "notes";