Secrets list as dropdown from existing secrets and frontend warnings for deleted secrets

web/src/components/workflow-editor/edit-panel/action-edit-panel.tsx

@@ -1,14 +1,17 @@
-import { Code, Flex, Text, TextField } from "@radix-ui/themes";
+import { Code, Flex, Text, TextField, Select } from "@radix-ui/themes";
 import ActionIcon from "../action-icon";
 import WorkflowEditorRightPanelBase from "../right-panel-base";
 import { useWorkflowStore } from "@/stores/workflow-store";
+import { useSecretsStore } from "@/stores/secrets-store";
 import { useEditorActionStore } from "@/stores/editor-action-store";
 import { TEditorWorkflowActionNode } from "@/types/react-flow";
 import { produce } from "immer";
 import { ChangeEvent, useEffect } from "react";
 import { useImmer } from "use-immer";
 import { TActionMetadata } from "@/types/editor-actions";
 import CodeEditorWithDialog from "@/components/code-editor-with-dialog/code-editor-with-dialog";
+import useSaveWorkflow from "@/providers/save-workflow";
+import { useRouter } from "next/navigation";
 
 function buildInitialArgs(
 	action: TEditorWorkflowActionNode,
@@ -24,8 +27,17 @@ function buildInitialArgs(
 }
 
 export default function ActionEditPanel() {
-	const { nodes, selectedNodeIdx, updateNodeData } = useWorkflowStore();
+	const router = useRouter();
+	const {
+		nodes,
+		selectedNodeIdx,
+		updateNodeData,
+		hasDeletedSecret,
+		removeDeletedSecretByPlaceholder,
+	} = useWorkflowStore();
 	const { actionsIndex } = useEditorActionStore();
+	const { secrets } = useSecretsStore();
+	const { saveWorkflow } = useSaveWorkflow();
 
 	const [args, updateArgs] = useImmer<string[]>([]);
 
@@ -55,16 +67,30 @@ export default function ActionEditPanel() {
 		);
 	};
 
+	const saveWorkflowAndRedirect = async () => {
+		const saveSuccessful = await saveWorkflow();
+		if (saveSuccessful) {
+			router.push("/settings");
+		}
+	};
+
 	const onChangeSecretsMapping = (
 		secretPlaceholder: string,
-		event: ChangeEvent<HTMLInputElement>,
+		value: string,
 	) => {
+		if (value === "$$$save_and_redirect$$$") {
+			saveWorkflowAndRedirect();
+			return;
+		}
+
 		updateNodeData(
 			selectedNodeIdx,
 			produce(actionData, (draft) => {
-				draft.secretsMapping[secretPlaceholder] = event.target.value;
+				draft.secretsMapping[secretPlaceholder] = value;
 			}),
 		);
+
+		removeDeletedSecretByPlaceholder(action.id, secretPlaceholder);
 	};
 
 	const onChangeActionArgument = (
@@ -134,20 +160,62 @@ export default function ActionEditPanel() {
 									<Flex>
 										<Code>{secretPlaceholder}</Code>
 									</Flex>
-									<TextField.Root
-										variant="surface"
+									<Select.Root
 										value={
 											actionData.secretsMapping[
 												secretPlaceholder
 											]
 										}
-										onChange={(event) =>
+										onValueChange={(value) =>
 											onChangeSecretsMapping(
 												secretPlaceholder,
-												event,
+												value,
 											)
 										}
-									/>
+									>
+										<Select.Trigger />
+										<Select.Content>
+											<Select.Group>
+												<Select.Label>
+													Select a secret
+												</Select.Label>
+												{secrets.map((_, idx) => (
+													<Select.Item
+														key={
+															secrets[idx]
+																.secretId
+														}
+														value={
+															secrets[idx]
+																.secretId
+														}
+													>
+														{secrets[idx].secretId}
+													</Select.Item>
+												))}
+												<Select.Separator />
+												<Select.Item value="$$$save_and_redirect$$$">
+													Save Workflow and Redirect
+													to Secrets
+												</Select.Item>
+											</Select.Group>
+										</Select.Content>
+									</Select.Root>
+									{hasDeletedSecret(
+										action.id,
+										secretPlaceholder,
+									) && (
+										<Flex
+											direction="row"
+											align="center"
+											className="text-red-500 font-medium mt-2"
+										>
+											<Text>
+												The previously selected secret
+												could not be found.
+											</Text>
+										</Flex>
+									)}
 								</Flex>
 							),
 						)}

web/src/components/workflow-editor/workflow-editor.tsx

@@ -1,9 +1,11 @@
 "use client";
 
 import { useGetWorkflowApi } from "@/hooks/use-get-workflow-api";
+import { useListSecretsApi } from "@/hooks/use-list-credentials-api";
 import { useListEditorActionsApi } from "@/hooks/use-list-editor-actions-api";
 import { useEditorActionStore } from "@/stores/editor-action-store";
 import { useWorkflowStore } from "@/stores/workflow-store";
+import { useSecretsStore } from "@/stores/secrets-store";
 import { Box, Flex, Grid, Tabs, Text } from "@radix-ui/themes";
 import Link from "next/link";
 import { useEffect, useState } from "react";
@@ -36,9 +38,11 @@ export default function WorkflowEditor({
 
 	const [view, setView] = useState<View>("workflowBuilder");
 
-	const { isNew, setWorkflow, clearWorkflowStore } = useWorkflowStore();
+	const { isNew, setWorkflow, clearWorkflowStore, addDeletedSecrets } =
+		useWorkflowStore();
 	const { setEditorActions } = useEditorActionStore();
 	const { errorToast } = useToast();
+	const { setSecrets, clear } = useSecretsStore();
 
 	// Loading Actions
 	const {
@@ -56,6 +60,15 @@ export default function WorkflowEditor({
 		}
 	}, [editorActions, setEditorActions, editActionsError]);
 
+	const { data: encryptedSecrets } = useListSecretsApi();
+
+	useEffect(() => {
+		if (encryptedSecrets) {
+			setSecrets(encryptedSecrets);
+			return () => clear();
+		}
+	}, [encryptedSecrets, setSecrets, clear]);
+
 	// Load Workflow
 	// Note: we only load from the DB if the workflow is not newly created
 	const {
@@ -98,6 +111,36 @@ export default function WorkflowEditor({
 		router,
 	]);
 
+	useEffect(() => {
+		if (!workflow || !encryptedSecrets) {
+			return;
+		}
+		const secretIds = new Set(encryptedSecrets.map((s) => s.secretId));
+		const missingSecrets = workflow?.nodes
+			.filter((node) => node.type === "action")
+			.reduce((acc, node) => {
+				const secretsMapping = node.secretsMapping;
+				const secretsForNode = Object.keys(secretsMapping);
+				secretsForNode.forEach((secretPlaceholder) => {
+					if (!secretIds.has(secretsMapping[secretPlaceholder])) {
+						if (!acc.has(node.id)) {
+							acc.set(node.id, new Set());
+						}
+						acc.get(node.id)?.add(secretPlaceholder);
+					}
+				});
+				return acc;
+			}, new Map<string, Set<string>>());
+		if (missingSecrets) {
+			addDeletedSecrets(missingSecrets);
+		}
+		if (missingSecrets && missingSecrets.size > 0) {
+			errorToast(
+				"Some secrets are missing. Please add them before running the workflow.",
+			);
+		}
+	}, [encryptedSecrets, workflow, addDeletedSecrets]);
+
 	// TODO(frontend): nicer loading screen
 	if (isLoadingEditorActions || (!isNew && isLoadingWorkflow)) {
 		return <Box>Loading...</Box>;

web/src/components/workflow-graph/node-base.tsx

@@ -3,7 +3,7 @@ import { NodeToolbar, Position } from "reactflow";
 import * as Toolbar from "@radix-ui/react-toolbar";
 import DuplicateIcon from "../icons/duplicate-icon";
 import { useWorkflowStore } from "@/stores/workflow-store";
-import { TrashIcon } from "@radix-ui/react-icons";
+import { TrashIcon, ExclamationTriangleIcon } from "@radix-ui/react-icons";
 
 export interface NodeBaseProps {
 	nodeId: string;
@@ -20,7 +20,8 @@ export default function NodeBase({
 	name,
 	selected,
 }: NodeBaseProps) {
-	const { nodes, duplicateNodeByIdx, deleteNodeByIdx } = useWorkflowStore();
+	const { nodes, duplicateNodeByIdx, deleteNodeByIdx, hasDeletedSecret } =
+		useWorkflowStore();
 
 	const nodeIdx = nodes.findIndex((node) => node.id === nodeId);
 	if (nodeIdx === -1) {
@@ -62,6 +63,30 @@ export default function NodeBase({
 				</Flex>
 			</Card>
 
+			<NodeToolbar
+				isVisible={hasDeletedSecret(nodeId)}
+				position={Position.Top}
+				offset={8}
+				align="end"
+			>
+				<Tooltip content="Missing secret">
+					<Flex
+						style={{
+							transform: "translate(10px, 24px)",
+						}}
+					>
+						<Flex className="absolute inset-0 bg-[var(--red-9)] rounded-full" />
+						<Flex
+							className="relative rounded-full w-6 h-6"
+							justify="center"
+							align="center"
+						>
+							<ExclamationTriangleIcon className="text-white w-3.5 h-3.5" />
+						</Flex>
+					</Flex>
+				</Tooltip>
+			</NodeToolbar>
+
 			<NodeToolbar
 				isVisible={selected && nodeId !== "start"}
 				position={Position.Right}

web/src/hooks/use-get-workflow-api.ts

@@ -7,6 +7,8 @@ import { withSnakeCaseTransform } from "@/types/utils";
 import { EditorWorkflowGraph } from "@/types/react-flow";
 import { HTTPMethod } from "@/types/api";
 
+const DISABLE_CACHE = 0;
+
 // GET /editor/workflow
 const GetWorkflowRequest = withSnakeCaseTransform(
 	z.object({
@@ -29,5 +31,6 @@ export const useGetWorkflowApi = (workflowId: string, doApiCall: boolean) => {
 		queryKey: ["workflow", workflowId],
 		queryFn: () => getWorkflow({ workflowId }),
 		enabled: doApiCall,
+		gcTime: DISABLE_CACHE,
 	});
 };

web/src/providers/save-workflow.tsx

@@ -20,12 +20,12 @@ class WorkflowValidationError extends Error {
 }
 
 interface SaveWorkflowContextType {
-	saveWorkflow: () => Promise<void>;
+	saveWorkflow: () => Promise<boolean>;
 	isPending: boolean;
 }
 
 const SaveWorkflowContext = createContext<SaveWorkflowContextType>({
-	saveWorkflow: async () => {},
+	saveWorkflow: async () => false,
 	isPending: false,
 });
 
@@ -42,7 +42,7 @@ export function SaveWorkflowProvider({
 
 	const handleSaveWorkflow = async () => {
 		if (isPending) {
-			return;
+			return false;
 		}
 		setIsPending(true);
 
@@ -60,7 +60,6 @@ export function SaveWorkflowProvider({
 			}
 			if (!isValidWorkflowName(workflow.workflowName)) {
 				errorToast(WORKFLOW_NAME_VALIDATION_ERROR_MESSAGE);
-				return;
 			}
 
 			// Make sure that we only save args which are present in the current
@@ -102,6 +101,7 @@ export function SaveWorkflowProvider({
 			if (webhookId && webhookSecret) {
 				updateWebhookIdAndSecret(webhookId, webhookSecret);
 			}
+			return true;
 		} catch (error) {
 			if (
 				error instanceof AxiosError &&
@@ -115,6 +115,7 @@ export function SaveWorkflowProvider({
 			} else {
 				errorToast("Failed to save workflow. Please try again.");
 			}
+			return false;
 		} finally {
 			setIsPending(false);
 		}