Refactor secret storage to use providers

Rhys Sullivan committed 8 months ago

Commit 22e370c1 parent 6e204f010 files · +1066 −263Browse files

Showing the changes to apps (3 of 10 files). Show all

Unified · Split

3 files

apps/web/src/views/add-source.tsx +58 −5
apps/web/src/views/secrets.tsx +68 −7
apps/web/src/views/source-editor.tsx +50 −7

-import { useState, type ReactNode } from "react";
+import { useEffect, useState, type ReactNode } from "react";
 import { Link, useNavigate } from "@tanstack/react-router";
 import {
   type CompleteSourceOAuthResult,
   type ConnectSourcePayload,
   type ConnectSourceResult,
   type DiscoverSourcePayload,
+  type InstanceConfig,
   type Loadable,
   type SecretListItem,
   type Source,
   useConnectSource,
   useCreateSecret,
   useDiscoverSource,
+  useInstanceConfig,
   useRefreshSecrets,
   useSecrets,
   useStartSourceOAuth,
   const navigate = useNavigate();
   const discoverSource = useDiscoverSource();
   const connectSource = useConnectSource();
+  const instanceConfig = useInstanceConfig();
   const secrets = useSecrets();
   const refreshSecrets = useRefreshSecrets();
   const startSourceOAuth = useStartSourceOAuth();
                   {connectForm.authKind === "bearer" && (
                     <Field label="Token" className="sm:col-span-2">
                       <SecretOrTokenInput
+                        instanceConfig={instanceConfig}
                         secrets={secrets}
                         providerId={connectForm.bearerProviderId}
                         handle={connectForm.bearerHandle}
 const INLINE_TOKEN_VALUE = "__inline_token__";
 function SecretOrTokenInput(props: {
+  instanceConfig: Loadable<InstanceConfig>;
   secrets: Loadable<ReadonlyArray<SecretListItem>>;
   providerId: string;
   handle: string;
   onSelectSecret: (providerId: string, handle: string) => void;
   onChangeToken: (token: string) => void;
 }) {
-  const { secrets, providerId, handle, inlineToken, onSelectSecret, onChangeToken } = props;
+  const {
+    instanceConfig,
+    secrets,
+    providerId,
+    handle,
+    inlineToken,
+    onSelectSecret,
+    onChangeToken,
+  } = props;
   const createSecret = useCreateSecret();
   const [showCreate, setShowCreate] = useState(false);
   const [useInline, setUseInline] = useState(false);
   const [newName, setNewName] = useState("");
   const [newValue, setNewValue] = useState("");
+  const [newProviderId, setNewProviderId] = useState("");
   const [createError, setCreateError] = useState<string | null>(null);
+  const storableProviders =
+    instanceConfig.status === "ready"
+      ? instanceConfig.data.secretProviders.filter((provider) => provider.canStore)
+      : [];
+  useEffect(() => {
+    if (newProviderId.length > 0) {
+      return;
+    }
+    if (instanceConfig.status === "ready") {
+      setNewProviderId(instanceConfig.data.defaultSecretStoreProvider);
+    }
+  }, [instanceConfig, newProviderId]);
   const selectedValue = showCreate ? CREATE_NEW_VALUE : useInline ? INLINE_TOKEN_VALUE : (handle || "");
       setUseInline(false);
       setNewName("");
       setNewValue("");
+      setNewProviderId(
+        instanceConfig.status === "ready"
+          ? instanceConfig.data.defaultSecretStoreProvider
+          : "",
+      );
       setCreateError(null);
       return;
     }
     }
     setUseInline(false);
     setShowCreate(false);
-    onSelectSecret("postgres", value);
+    const matchedSecret = secrets.status === "ready"
+      ? secrets.data.find((secret) => secret.id === value)
+      : null;
+    onSelectSecret(matchedSecret?.providerId ?? "local", value);
   };
   const handleCreate = async () => {
     }
     try {
-      const result = await createSecret.mutateAsync({ name: trimmedName, value: newValue });
+      const result = await createSecret.mutateAsync({
+        name: trimmedName,
+        value: newValue,
+        ...(newProviderId ? { providerId: newProviderId } : {}),
+      });
       onSelectSecret(result.providerId, result.id);
       setShowCreate(false);
     } catch (err) {
         <option value="">Select a secret...</option>
         {items.map((secret) => (
           <option key={secret.id} value={secret.id}>
-            {secret.name || secret.id}
+            {secret.name || secret.id} ({secret.providerId})
           </option>
         ))}
         <option value={INLINE_TOKEN_VALUE}>Paste token directly</option>
                 className="h-8 w-full rounded-lg border border-input bg-background px-3 font-mono text-[11px] text-foreground outline-none transition-colors placeholder:text-muted-foreground/35 focus:border-ring focus:ring-1 focus:ring-ring/25"
               />
             </label>
+            <label className="block space-y-1">
+              <span className="text-[11px] font-medium text-muted-foreground">Store in</span>
+              <select
+                value={newProviderId}
+                onChange={(e) => setNewProviderId(e.target.value)}
+                className="h-8 w-full rounded-lg border border-input bg-background px-3 text-[12px] text-foreground outline-none transition-colors focus:border-ring focus:ring-1 focus:ring-ring/25"
+              >
+                {storableProviders.map((provider) => (
+                  <option key={provider.id} value={provider.id}>
+                    {provider.name}
+                  </option>
+                ))}
+              </select>
+            </label>
           </div>
           <div className="flex items-center justify-end gap-2">
             <button

apps/web/src/views/secrets.tsx+68−7

-import { useState, type ReactNode } from "react";
+import { useEffect, useState, type ReactNode } from "react";
 import { Link } from "@tanstack/react-router";
 import {
+  type InstanceConfig,
   type SecretListItem,
   type Loadable,
   useSecrets,
   useCreateSecret,
   useUpdateSecret,
   useDeleteSecret,
-  useRefreshSecrets,
+  useInstanceConfig,
 } from "@executor/react";
 import { LoadableBlock } from "../components/loadable";
 import { Button } from "../components/ui/button";
 // Page
 // ---------------------------------------------------------------------------
+const storableProvidersFromConfig = (config: Loadable<InstanceConfig>) =>
+  config.status === "ready"
+    ? config.data.secretProviders.filter((provider) => provider.canStore)
+    : [];
+const providerLabelForId = (config: Loadable<InstanceConfig>, providerId: string): string =>
+  config.status === "ready"
+    ? config.data.secretProviders.find((provider) => provider.id === providerId)?.name ?? providerId
+    : providerId;
 export function SecretsPage() {
+  const instanceConfig = useInstanceConfig();
   const secrets = useSecrets();
   const [showCreate, setShowCreate] = useState(false);
   const [editingId, setEditingId] = useState<string | null>(null);
+  const storableProviders = storableProvidersFromConfig(instanceConfig);
+  const defaultProviderLabel =
+    instanceConfig.status === "ready"
+      ? providerLabelForId(instanceConfig, instanceConfig.data.defaultSecretStoreProvider)
+      : null;
   return (
     <div className="flex-1 overflow-y-auto">
               Secrets
             </h1>
             <p className="mt-1.5 text-[14px] text-muted-foreground">
-              Tokens and credentials stored in this instance.
+              Tokens and credentials stored by executor.
+              {defaultProviderLabel ? ` New secrets default to ${defaultProviderLabel}.` : ""}
             </p>
           </div>
           <Button size="sm" onClick={() => { setShowCreate(true); setEditingId(null); }}>
           <CreateSecretForm
             onClose={() => setShowCreate(false)}
             className="mb-6"
+            providerOptions={storableProviders}
+            defaultProviderId={
+              instanceConfig.status === "ready"
+                ? instanceConfig.data.defaultSecretStoreProvider
+                : null
+            }
           />
         )}
                   <SecretRow
                     key={secret.id}
                     secret={secret}
+                    providerLabel={providerLabelForId(instanceConfig, secret.providerId)}
                     isEditing={editingId === secret.id}
                     onEdit={() => setEditingId(editingId === secret.id ? null : secret.id)}
                     onCancelEdit={() => setEditingId(null)}
         No secrets stored
       </p>
       <p className="text-[13px] text-muted-foreground/60 mb-5">
-        Secrets let you securely provide tokens for source authentication.
+        Secrets let you securely provide tokens for source authentication without putting them in workspace config.
       </p>
       <Button size="sm" onClick={props.onAdd}>
         <IconPlus className="size-3.5" />
 // Create form
 // ---------------------------------------------------------------------------
-function CreateSecretForm(props: { onClose: () => void; className?: string }) {
+function CreateSecretForm(props: {
+  onClose: () => void;
+  className?: string;
+  providerOptions: ReadonlyArray<{ id: string; name: string }>;
+  defaultProviderId: string | null;
+}) {
   const createSecret = useCreateSecret();
   const [name, setName] = useState("");
   const [value, setValue] = useState("");
+  const [providerId, setProviderId] = useState(props.defaultProviderId ?? "");
   const [error, setError] = useState<string | null>(null);
+  useEffect(() => {
+    if (providerId.length > 0) {
+      return;
+    }
+    if (props.defaultProviderId) {
+      setProviderId(props.defaultProviderId);
+    }
+  }, [props.defaultProviderId, providerId]);
   const handleSubmit = async () => {
     setError(null);
     const trimmedName = name.trim();
     }
     try {
-      await createSecret.mutateAsync({ name: trimmedName, value });
+      await createSecret.mutateAsync({
+        name: trimmedName,
+        value,
+        ...(providerId ? { providerId } : {}),
+      });
       props.onClose();
     } catch (err) {
       setError(err instanceof Error ? err.message : "Failed creating secret.");
               className="h-9 w-full rounded-lg border border-input bg-background px-3 font-mono text-[12px] text-foreground outline-none transition-colors placeholder:text-muted-foreground/35 focus:border-ring focus:ring-1 focus:ring-ring/25"
             />
           </FieldLabel>
+          <FieldLabel label="Store in">
+            <select
+              value={providerId}
+              onChange={(e) => setProviderId(e.target.value)}
+              className="h-9 w-full rounded-lg border border-input bg-background px-3 text-[13px] text-foreground outline-none transition-colors focus:border-ring focus:ring-1 focus:ring-ring/25"
+            >
+              {props.providerOptions.map((provider) => (
+                <option key={provider.id} value={provider.id}>
+                  {provider.name}
+                </option>
+              ))}
+            </select>
+          </FieldLabel>
         </div>
         <div className="flex justify-end">
           <Button
 function SecretRow(props: {
   secret: SecretListItem;
+  providerLabel: string;
   isEditing: boolean;
   onEdit: () => void;
   onCancelEdit: () => void;
 }) {
-  const { secret, isEditing } = props;
+  const { secret, providerLabel, isEditing } = props;
   const deleteSecret = useDeleteSecret();
   const [isDeleting, setIsDeleting] = useState(false);
               <Badge variant="outline" className="text-[9px] shrink-0">
                 {secret.purpose.replace(/_/g, " ")}
               </Badge>
+              <Badge variant="outline" className="text-[9px] shrink-0">
+                {providerLabel}
+              </Badge>
             </div>
             <div className="flex items-center gap-2 mt-0.5">
               <span className="text-[11px] font-mono text-muted-foreground/50 truncate">

apps/web/src/views/source-editor.tsx+50−7

-import { useState, type ReactNode } from "react";
+import { useEffect, useState, type ReactNode } from "react";
 import { Link, useNavigate } from "@tanstack/react-router";
 import {
   type CompleteSourceOAuthResult,
               {formState.authKind === "bearer" && (
                 <Field label="Token" className="sm:col-span-2">
                   <SecretPicker
+                    instanceConfig={instanceConfig}
                     secrets={secrets}
                     providerId={formState.bearerProviderId}
                     handle={formState.bearerHandle}
                 <>
                   <Field label="Access token" className="sm:col-span-2">
                     <SecretPicker
+                      instanceConfig={instanceConfig}
                       secrets={secrets}
                       providerId={formState.oauthAccessProviderId}
                       handle={formState.oauthAccessHandle}
                   </Field>
                   <Field label="Refresh token (optional)" className="sm:col-span-2">
                     <SecretPicker
+                      instanceConfig={instanceConfig}
                       secrets={secrets}
                       providerId={formState.oauthRefreshProviderId}
                       handle={formState.oauthRefreshHandle}
 const CREATE_NEW_VALUE = "__create_new__";
 function SecretPicker(props: {
+  instanceConfig: Loadable<InstanceConfig>;
   secrets: Loadable<ReadonlyArray<SecretListItem>>;
   providerId: string;
   handle: string;
   onSelect: (providerId: string, handle: string) => void;
   allowEmpty?: boolean;
 }) {
-  const { secrets, providerId, handle, onSelect, allowEmpty } = props;
+  const { instanceConfig, secrets, providerId, handle, onSelect, allowEmpty } = props;
   const createSecret = useCreateSecret();
   const [showCreate, setShowCreate] = useState(false);
   const [newName, setNewName] = useState("");
   const [newValue, setNewValue] = useState("");
+  const [newProviderId, setNewProviderId] = useState("");
   const [createError, setCreateError] = useState<string | null>(null);
+  const storableProviders =
+    instanceConfig.status === "ready"
+      ? instanceConfig.data.secretProviders.filter((provider) => provider.canStore)
+      : [];
+  useEffect(() => {
+    if (newProviderId.length > 0) {
+      return;
+    }
+    if (instanceConfig.status === "ready") {
+      setNewProviderId(instanceConfig.data.defaultSecretStoreProvider);
+    }
+  }, [instanceConfig, newProviderId]);
   // Build the selected value key: if handle is set, use it (it's the secret ID)
   const selectedValue = handle || "";
       setShowCreate(true);
       setNewName("");
       setNewValue("");
+      setNewProviderId(
+        instanceConfig.status === "ready"
+          ? instanceConfig.data.defaultSecretStoreProvider
+          : "",
+      );
       setCreateError(null);
       return;
     }
       onSelect("", "");
       return;
     }
-    // Selecting an existing secret: providerId is always "postgres"
+    const matchedSecret = secrets.status === "ready"
-    onSelect("postgres", value);
+      ? secrets.data.find((secret) => secret.id === value)
+      : null;
+    onSelect(matchedSecret?.providerId ?? "local", value);
   };
   const handleCreate = async () => {
     }
     try {
-      const result = await createSecret.mutateAsync({ name: trimmedName, value: newValue });
+      const result = await createSecret.mutateAsync({
+        name: trimmedName,
+        value: newValue,
+        ...(newProviderId ? { providerId: newProviderId } : {}),
+      });
       onSelect(result.providerId, result.id);
       setShowCreate(false);
     } catch (err) {
   // Check if the current handle matches a known secret
   const matchedSecret = items.find((s) => s.id === handle);
-  const isExternalRef = handle && !matchedSecret && providerId !== "postgres";
+  const isExternalRef = handle && !matchedSecret && providerId !== "local";
   return (
     <div className="space-y-2">
         {!allowEmpty && !selectedValue && <option value="">Select a secret…</option>}
         {items.map((secret) => (
           <option key={secret.id} value={secret.id}>
-            {secret.name || secret.id}
+            {secret.name || secret.id} ({secret.providerId})
           </option>
         ))}
         {isExternalRef && (
                 className="h-8 w-full rounded-lg border border-input bg-background px-3 font-mono text-[11px] text-foreground outline-none transition-colors placeholder:text-muted-foreground/35 focus:border-ring focus:ring-1 focus:ring-ring/25"
               />
             </label>
+            <label className="block space-y-1">
+              <span className="text-[11px] font-medium text-muted-foreground">Store in</span>
+              <select
+                value={newProviderId}
+                onChange={(e) => setNewProviderId(e.target.value)}
+                className="h-8 w-full rounded-lg border border-input bg-background px-3 text-[12px] text-foreground outline-none transition-colors focus:border-ring focus:ring-1 focus:ring-ring/25"
+              >
+                {storableProviders.map((provider) => (
+                  <option key={provider.id} value={provider.id}>
+                    {provider.name}
+                  </option>
+                ))}
+              </select>
+            </label>
           </div>
           <div className="flex items-center justify-end gap-2">
             <button