feat: User Notes on Runs

Author: camielvs

src/components/PipelineRun/RunDetails.tsx

@@ -7,6 +7,7 @@ import { LoadingScreen } from "@/components/shared/LoadingScreen";
 import { StatusBar } from "@/components/shared/Status";
 import { BlockStack, InlineStack } from "@/components/ui/layout";
 import { Paragraph, Text } from "@/components/ui/typography";
+import { useUserDetails } from "@/hooks/useUserDetails";
 import { useBackend } from "@/providers/BackendProvider";
 import { useComponentSpec } from "@/providers/ComponentSpecProvider";
 import { useExecutionData } from "@/providers/ExecutionDataProvider";
@@ -18,12 +19,14 @@ import {
 } from "@/utils/executionStatus";
 
 import { TextBlock } from "../shared/ContextPanel/Blocks/TextBlock";
+import { RunNotesEditor } from "./RunNotesEditor";
 
 const EXCLUDED_ANNOTATIONS = [PIPELINE_NOTES_ANNOTATION];
 
 export const RunDetails = () => {
   const { configured } = useBackend();
   const { componentSpec } = useComponentSpec();
+  const { data: currentUserDetails } = useUserDetails();
   const {
     rootDetails: details,
     rootState: state,
@@ -73,6 +76,9 @@ export const RunDetails = () => {
     .filter(([key]) => !EXCLUDED_ANNOTATIONS.includes(key))
     .map(([key, value]) => ({ label: key, value: String(value) }));
 
+  const isRunCreator =
+    !!currentUserDetails?.id && metadata?.created_by === currentUserDetails.id;
+
   return (
     <BlockStack gap="6" className="p-2 h-full">
       <CopyText className="text-lg font-semibold">
@@ -121,11 +127,19 @@ export const RunDetails = () => {
       <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 gap="2">
+          <BlockStack>
+            <Paragraph size="xs">Pipeline Notes</Paragraph>
+            <Paragraph size="xs" tone="subdued">
+              {pipelineNotes || "No notes available for this pipeline."}
+            </Paragraph>
+          </BlockStack>
+          {!!metadata?.id && (
+            <BlockStack>
+              <Paragraph size="xs">Run Notes</Paragraph>
+              <RunNotesEditor runId={metadata.id} readOnly={!isRunCreator} />
+            </BlockStack>
+          )}
         </BlockStack>
       </ContentBlock>
     </BlockStack>

src/components/PipelineRun/RunNotesEditor.tsx

@@ -0,0 +1,97 @@
+import { useMutation, useQuery } from "@tanstack/react-query";
+import { useEffect, useState } from "react";
+
+import { Textarea } from "@/components/ui/textarea";
+import { Paragraph } from "@/components/ui/typography";
+import { useBackend } from "@/providers/BackendProvider";
+import {
+  fetchRunAnnotations,
+  updateRunNotes,
+} from "@/services/pipelineRunService";
+import { PIPELINE_RUN_NOTES_ANNOTATION } from "@/utils/annotations";
+import { TWENTY_FOUR_HOURS_IN_MS } from "@/utils/constants";
+
+interface RunNotesEditorProps {
+  runId: string;
+  readOnly?: boolean;
+}
+
+export const RunNotesEditor = ({ runId, readOnly }: RunNotesEditorProps) => {
+  const { backendUrl } = useBackend();
+
+  const {
+    data: annotations,
+    isLoading,
+    refetch,
+  } = useQuery({
+    queryKey: ["pipeline-run-annotations", runId],
+    queryFn: () => fetchRunAnnotations(runId, backendUrl),
+    enabled: !!runId,
+    refetchOnWindowFocus: false,
+    staleTime: TWENTY_FOUR_HOURS_IN_MS,
+  });
+
+  const { mutate, isPending } = useMutation({
+    mutationFn: (runId: string) => updateRunNotes(runId, backendUrl, value),
+    onSuccess: () => {
+      refetch();
+    },
+  });
+
+  const notes = hasNotes(annotations)
+    ? decodeURIComponent(annotations[PIPELINE_RUN_NOTES_ANNOTATION])
+    : "";
+
+  const [value, setValue] = useState(notes);
+
+  const onInputChange = (value: string) => {
+    setValue(value);
+  };
+
+  const onBlur = () => {
+    if (!runId || isLoading || value.trim() === notes.trim()) {
+      return;
+    }
+    mutate(runId);
+  };
+
+  useEffect(() => {
+    setValue(notes);
+  }, [notes]);
+
+  if (readOnly) {
+    return (
+      <Paragraph size="xs" tone="subdued">
+        {notes || "No notes available."}
+      </Paragraph>
+    );
+  }
+
+  return (
+    <Textarea
+      value={value}
+      onChange={(e) => onInputChange(e.target.value)}
+      onBlur={onBlur}
+      placeholder="Share context about this pipeline run..."
+      className="text-xs!"
+      disabled={isPending}
+    />
+  );
+};
+
+const hasNotes = (
+  annotations: Record<string, unknown> | undefined,
+): annotations is Record<string, unknown> & {
+  [PIPELINE_RUN_NOTES_ANNOTATION]: string;
+} => {
+  if (!annotations) {
+    return false;
+  }
+  return (
+    PIPELINE_RUN_NOTES_ANNOTATION in annotations &&
+    typeof annotations[PIPELINE_RUN_NOTES_ANNOTATION] === "string" &&
+    annotations[PIPELINE_RUN_NOTES_ANNOTATION] !== "" &&
+    annotations[PIPELINE_RUN_NOTES_ANNOTATION] !== null &&
+    annotations[PIPELINE_RUN_NOTES_ANNOTATION] !== undefined
+  );
+};

src/components/shared/Submitters/Oasis/OasisSubmitter.tsx

@@ -14,8 +14,12 @@ import useToastNotification from "@/hooks/useToastNotification";
 import { cn } from "@/lib/utils";
 import { useBackend } from "@/providers/BackendProvider";
 import { APP_ROUTES } from "@/routes/router";
+import { updateRunNotes } from "@/services/pipelineRunService";
 import type { PipelineRun } from "@/types/pipelineRun";
-import type { ComponentSpec } from "@/utils/componentSpec";
+import {
+  type ComponentSpec,
+  isGraphImplementation,
+} from "@/utils/componentSpec";
 import { submitPipelineRun } from "@/utils/submitPipeline";
 
 import { isAuthorizationRequired } from "../../Authentication/helpers";
@@ -89,7 +93,7 @@ const OasisSubmitter = ({
   isComponentTreeValid = true,
 }: OasisSubmitterProps) => {
   const { isAuthorized } = useAwaitAuthorization();
-  const { configured, available } = useBackend();
+  const { backendUrl, configured, available } = useBackend();
   const { mutate: submit, isPending: isSubmitting } = useSubmitPipeline();
   const isAutoRedirect = useFlagValue("redirect-on-new-pipeline-run");
 
@@ -99,6 +103,13 @@ const OasisSubmitter = ({
   const notify = useToastNotification();
   const navigate = useNavigate();
 
+  const runNotes = useRef<string>("");
+
+  const { mutate: saveNotes } = useMutation({
+    mutationFn: (runId: string) =>
+      updateRunNotes(runId, backendUrl, runNotes.current),
+  });
+
   const handleError = (message: string) => {
     notify(message, "error");
   };
@@ -130,6 +141,9 @@ const OasisSubmitter = ({
   };
 
   const onSuccess = (response: PipelineRun) => {
+    if (runNotes.current.trim() !== "") {
+      saveNotes(response.id.toString());
+    }
     setSubmitSuccess(true);
     setCooldownTime(3);
     onSubmitComplete?.();
@@ -173,7 +187,11 @@ const OasisSubmitter = ({
     });
   };
 
-  const handleSubmitWithArguments = (args: Record<string, string>) => {
+  const handleSubmitWithArguments = (
+    args: Record<string, string>,
+    notes: string,
+  ) => {
+    runNotes.current = notes;
     setIsArgumentsDialogOpen(false);
     handleSubmit(args);
   };
@@ -197,7 +215,7 @@ const OasisSubmitter = ({
     !isAuthorized ||
     !isComponentTreeValid ||
     cooldownTime > 0 ||
-    ("graph" in componentSpec.implementation &&
+    (isGraphImplementation(componentSpec.implementation) &&
       Object.keys(componentSpec.implementation.graph.tasks).length === 0);
 
   const isArgumentsButtonVisible = hasConfigurableInputs && !isButtonDisabled;
@@ -230,7 +248,7 @@ const OasisSubmitter = ({
             <div
               className={cn(
                 "text-xs font-light -ml-1",
-                configured ? "text-red-700" : "text-yellow-700",
+                configured ? "text-destructive" : "text-warning",
               )}
             >
               (has validation issues)
@@ -240,7 +258,7 @@ const OasisSubmitter = ({
             <div
               className={cn(
                 "text-xs font-light -ml-1",
-                configured ? "text-red-700" : "text-yellow-700",
+                configured ? "text-destructive" : "text-warning",
               )}
             >
               {`(backend ${configured ? "unavailable" : "unconfigured"})`}

src/components/shared/Submitters/Oasis/components/SubmitTaskArgumentsDialog.tsx

@@ -24,6 +24,7 @@ import {
 } from "@/components/ui/popover";
 import { ScrollArea } from "@/components/ui/scroll-area";
 import { Spinner } from "@/components/ui/spinner";
+import { Textarea } from "@/components/ui/textarea";
 import { Paragraph } from "@/components/ui/typography";
 import useToastNotification from "@/hooks/useToastNotification";
 import { cn } from "@/lib/utils";
@@ -41,7 +42,7 @@ type TaskArguments = TaskSpecOutput["arguments"];
 interface SubmitTaskArgumentsDialogProps {
   open: boolean;
   onCancel: () => void;
-  onConfirm: (args: Record<string, string>) => void;
+  onConfirm: (args: Record<string, string>, notes: string) => void;
   componentSpec: ComponentSpec;
 }
 
@@ -54,6 +55,7 @@ export const SubmitTaskArgumentsDialog = ({
   const notify = useToastNotification();
   const initialArgs = getArgumentsFromInputs(componentSpec);
 
+  const [runNotes, setRunNotes] = useState<string>("");
   const [taskArguments, setTaskArguments] =
     useState<Record<string, string>>(initialArgs);
 
@@ -87,10 +89,15 @@ export const SubmitTaskArgumentsDialog = ({
     }));
   };
 
-  const handleConfirm = () => onConfirm(taskArguments);
+  const handleRunNotesChange = (value: string) => {
+    setRunNotes(value);
+  };
+
+  const handleConfirm = () => onConfirm(taskArguments, runNotes);
 
   const handleCancel = () => {
     setTaskArguments(initialArgs);
+    setRunNotes("");
     setHighlightedArgs(new Map());
     onCancel();
   };
@@ -146,6 +153,18 @@ export const SubmitTaskArgumentsDialog = ({
           </ScrollArea>
         )}
 
+        <BlockStack gap="2">
+          <Paragraph tone="subdued" size="sm">
+            Run Notes
+          </Paragraph>
+          <Textarea
+            value={runNotes}
+            onChange={(e) => handleRunNotesChange(e.target.value)}
+            placeholder="Share context about this pipeline run..."
+            className="text-xs!"
+          />
+        </BlockStack>
+
         <DialogFooter>
           <Button variant="outline" onClick={handleCancel}>
             Cancel

src/services/pipelineRunService.ts

@@ -1,8 +1,12 @@
 import localForage from "localforage";
 
-import type { BodyCreateApiPipelineRunsPost } from "@/api/types.gen";
+import type {
+  BodyCreateApiPipelineRunsPost,
+  ListAnnotationsApiPipelineRunsIdAnnotationsGetResponse,
+} from "@/api/types.gen";
 import { APP_ROUTES } from "@/routes/router";
 import type { PipelineRun } from "@/types/pipelineRun";
+import { PIPELINE_RUN_NOTES_ANNOTATION } from "@/utils/annotations";
 import { removeCachingStrategyFromSpec } from "@/utils/cache";
 import {
   type ComponentSpec,
@@ -216,3 +220,26 @@ export const cancelPipelineRun = async (runId: string, backendUrl: string) => {
     },
   );
 };
+
+export const fetchRunAnnotations = async (
+  runId: string,
+  backendUrl: string,
+): Promise<ListAnnotationsApiPipelineRunsIdAnnotationsGetResponse> => {
+  const url = `${backendUrl}/api/pipeline_runs/${runId}/annotations`;
+  return fetchWithErrorHandling(url);
+};
+
+export const updateRunNotes = async (
+  runId: string,
+  backendUrl: string,
+  notes: string,
+) => {
+  await fetchWithErrorHandling(
+    `${backendUrl}/api/pipeline_runs/${runId}/annotations/${PIPELINE_RUN_NOTES_ANNOTATION}?value=${encodeURIComponent(
+      notes,
+    )}`,
+    {
+      method: "PUT",
+    },
+  );
+};

src/utils/annotations.ts

@@ -51,3 +51,5 @@ function hasAnnotation(
 }
 
 export const PIPELINE_NOTES_ANNOTATION = "notes";
+export const PIPELINE_RUN_NOTES_ANNOTATION = "notes";
+export const PIPELINE_CANONICAL_NAME_ANNOTATION = "canonical-pipeline-name";

src/utils/canonicalPipelineName.ts

@@ -1,6 +1,9 @@
 import type { TaskSpecShape } from "@/components/shared/PipelineRunNameTemplate/types";
 
-import { getAnnotationValue } from "./annotations";
+import {
+  getAnnotationValue,
+  PIPELINE_CANONICAL_NAME_ANNOTATION,
+} from "./annotations";
 
 /**
  * Extracts the canonical name from the task spec
@@ -11,7 +14,10 @@ export function extractCanonicalName(
   taskSpec: TaskSpecShape | undefined,
 ): string | undefined {
   return taskSpec
-    ? getAnnotationValue(taskSpec.annotations, CANONICAL_NAME_ANNOTATION)
+    ? getAnnotationValue(
+        taskSpec.annotations,
+        PIPELINE_CANONICAL_NAME_ANNOTATION,
+      )
     : undefined;
 }
 
@@ -28,8 +34,6 @@ export function buildAnnotationsWithCanonicalName(
   }
 
   return {
-    [CANONICAL_NAME_ANNOTATION]: canonicalName,
+    [PIPELINE_CANONICAL_NAME_ANNOTATION]: canonicalName,
   };
 }
-
-const CANONICAL_NAME_ANNOTATION = "canonical-pipeline-name";