feat(react): polish secret creation UX in header-auth flow

- New-secret form renders as a full-width CardStack row instead of a padded embed, so the inputs stop being squeezed by wrapping padding. - Suggested secret label and ID derive from the source name (e.g. "Axiom Authorization" / "axiom-authorization") so tokens across sources no longer collide on a shared "authorization" id. - Label and ID are now an override-or-derive pair: ID auto-follows the label until the user edits the ID, at which point they decouple. - Secret value input is type="text" with CSS text-security masking so password-manager extensions stop intercepting paste. - "+ New" is promoted into the SecretPicker dropdown itself, replacing the external button next to the picker. Also: OpenAPI specs that declare security schemes only under components (e.g. Sentry) now surface as Authentication presets by falling back to one strategy per scheme. Favicon uses the resolved base URL's apex domain via tldts instead of the spec URL's host.

Rhys Sullivan committed 7 months ago

Commit b5003fd1 parent b88c4909 files · +102 −73Browse files

Unified · Split

9 files

packages/plugins/graphql/src/react/AddGraphqlSource.tsx +1 −0
packages/plugins/graphql/src/react/EditGraphqlSource.tsx +1 −0
packages/plugins/mcp/src/react/AddMcpSource.tsx +1 −0
packages/plugins/openapi/src/react/AddOpenApiSource.tsx +4 −29
packages/plugins/openapi/src/react/EditOpenApiSource.tsx +1 −0
packages/plugins/openapi/src/sdk/preview.ts +7 −1
packages/react/src/plugins/headers-list.tsx +7 −0
packages/react/src/plugins/secret-header-auth.tsx +56 −42
packages/react/src/plugins/secret-picker.tsx +24 −1

packages/plugins/graphql/src/react/AddGraphqlSource.tsx+1−0

@@ -132,6 +132,7 @@ export default function AddGraphqlSource(props: { · 131 unmodified lines
132	headers={headers}	132	headers={headers}
133	onHeadersChange={setHeaders}	133	onHeadersChange={setHeaders}
134	existingSecrets={secretList}	134	existingSecrets={secretList}
		135	sourceName={identity.name}
135	/>	136	/>
136	</section>	137	</section>
137		138

packages/plugins/graphql/src/react/EditGraphqlSource.tsx+1−0

@@ -123,6 +123,7 @@ function EditForm(props: { · 122 unmodified lines
123	headers={headers}	123	headers={headers}
124	onHeadersChange={handleHeadersChange}	124	onHeadersChange={handleHeadersChange}
125	existingSecrets={secretList}	125	existingSecrets={secretList}
		126	sourceName={identity.name}
126	/>	127	/>
127	</section>	128	</section>
128		129

packages/plugins/mcp/src/react/AddMcpSource.tsx+1−0

@@ -758,6 +758,7 @@ export default function AddMcpSource(props: { · 757 unmodified lines
758	onHeadersChange={setRemoteAuthHeaders}	758	onHeadersChange={setRemoteAuthHeaders}
759	existingSecrets={secretList}	759	existingSecrets={secretList}
760	singleHeader	760	singleHeader
		761	sourceName={remoteIdentity.name}
761	/>	762	/>
762	)}	763	)}
763		764

packages/plugins/openapi/src/react/AddOpenApiSource.tsx+4−29

-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 import { useAtomSet } from "@effect-atom/atom-react";
 import { Option } from "effect";
 } from "@executor/react/components/native-select";
 import { Textarea } from "@executor/react/components/textarea";
 import { Checkbox } from "@executor/react/components/checkbox";
+import { SourceFavicon } from "@executor/react/components/source-favicon";
 import { RadioGroup, RadioGroupItem } from "@executor/react/components/radio-group";
 import { Skeleton } from "@executor/react/components/skeleton";
 import { IOSSpinner, Spinner } from "@executor/react/components/spinner";
     return out;
   };
-  // Derive a favicon URL from the spec URL (if the user entered one — raw
-  // JSON/YAML content will fail URL parsing and yield null). Uses Google's
-  // favicon service so we don't depend on the domain serving /favicon.ico.
-  const faviconUrl = useMemo(() => {
-    try {
-      const trimmed = specUrl.trim();
-      if (!trimmed) return null;
-      const u = new URL(trimmed);
-      if (u.protocol !== "http:" && u.protocol !== "https:") return null;
-      return `https://www.google.com/s2/favicons?domain=${u.hostname}&sz=64`;
-    } catch {
-      return null;
-    }
-  }, [specUrl]);
-  const [faviconFailed, setFaviconFailed] = useState(false);
-  useEffect(() => {
-    setFaviconFailed(false);
-  }, [faviconUrl]);
   const allHeaders: Record<string, HeaderValue> = {};
   for (const ch of customHeaders) {
     if (ch.name.trim() && ch.secretId) {
         <CardStack>
           <CardStackContent className="border-t-0">
             <CardStackEntry>
-              {faviconUrl && !faviconFailed && (
+              {resolvedBaseUrl && <SourceFavicon url={resolvedBaseUrl} size={16} />}
-                <img
-                  src={faviconUrl}
-                  alt=""
-                  className="size-4 shrink-0 object-contain"
-                  onError={() => setFaviconFailed(true)}
-                />
-              )}
               <CardStackEntryContent>
                 <CardStackEntryTitle>
                   {Option.getOrElse(preview.title, () => "API")}
                 headers={customHeaders}
                 onHeadersChange={handleHeadersChange}
                 existingSecrets={secretList}
+                sourceName={identity.name}
               />
             )}

packages/plugins/openapi/src/react/EditOpenApiSource.tsx+1−0

@@ -123,6 +123,7 @@ function EditForm(props: { · 122 unmodified lines
123	headers={headers}	123	headers={headers}
124	onHeadersChange={handleHeadersChange}	124	onHeadersChange={handleHeadersChange}
125	existingSecrets={secretList}	125	existingSecrets={secretList}
		126	sourceName={identity.name}
126	/>	127	/>
127	</section>	128	</section>
128		129

packages/plugins/openapi/src/sdk/preview.ts+7−1

   );
   const rawSecurity = (doc.security ?? []) as Array<Record<string, unknown>>;
-  const authStrategies = rawSecurity.map(
+  const declaredStrategies = rawSecurity.map(
     (entry) => new AuthStrategy({ schemes: Object.keys(entry) }),
   );
+  // Fall back to one strategy per scheme when the spec only declares schemes
+  // under components (e.g. Sentry) so the user still sees auth options.
+  const authStrategies =
+    declaredStrategies.length > 0
+      ? declaredStrategies
+      : securitySchemes.map((scheme) => new AuthStrategy({ schemes: [scheme.name] }));
   return new SpecPreview({
     title: result.title,

packages/react/src/plugins/headers-list.tsx+7−0

   readonly singleHeader?: boolean;
   /** Text shown in the empty state. */
   readonly emptyLabel?: ReactNode;
+  /**
+   * Display name of the source that owns these headers (e.g. "Axiom"). Used
+   * to derive unique default secret labels/IDs like `axiom-authorization`.
+   */
+  readonly sourceName?: string;
 }
 export function HeadersList({
   presets = defaultHeaderAuthPresets,
   singleHeader = false,
   emptyLabel = "No headers",
+  sourceName,
 }: HeadersListProps) {
   const [picking, setPicking] = useState(false);
   const canAddMore = !singleHeader || headers.length === 0;
                 onSelectSecret={(secretId) => updateHeader(index, { secretId })}
                 onRemove={singleHeader ? undefined : () => removeHeader(index)}
                 existingSecrets={existingSecrets}
+                sourceName={sourceName}
               />
             ))}
             {canAddMore && <AddHeaderRow onClick={() => setPicking(true)} />}

packages/react/src/plugins/secret-header-auth.tsx+56−42

-import { useId, useState } from "react";
+import { useId, useState, type CSSProperties } from "react";
 import { useAtomSet } from "@effect-atom/atom-react";
 import { setSecret, resolveSecret } from "../api/atoms";
   );
 }
+function slugifyForSecretId(input: string): string {
+  return input
+    .trim()
+    .toLowerCase()
+    .replace(/[^a-z0-9]+/g, "-")
+    .replace(/^-+|-+$/g, "");
+}
 function InlineCreateSecret(props: {
-  headerName: string;
   suggestedId: string;
+  suggestedName: string;
   onCreated: (secretId: string) => void;
   onCancel: () => void;
 }) {
-  const [secretId, setSecretId] = useState(props.suggestedId);
+  const [nameOverride, setNameOverride] = useState<string | null>(null);
-  const [secretName, setSecretName] = useState(props.headerName);
+  const [idOverride, setIdOverride] = useState<string | null>(null);
   const [secretValue, setSecretValue] = useState("");
   const [secretRevealed, setSecretRevealed] = useState(false);
   const [saving, setSaving] = useState(false);
   const secretNameInputId = useId();
   const secretValueInputId = useId();
+  const secretName = nameOverride ?? props.suggestedName;
+  const secretId = idOverride ?? (slugifyForSecretId(secretName) || "custom-header");
   const handleSave = async () => {
     if (!secretId.trim() || !secretValue.trim()) return;
     setSaving(true);
         path: { scopeId },
         payload: {
           id: SecretId.make(secretId.trim()),
-          name: `${secretName.trim() || secretId.trim()} (Auth header: ${props.headerName})`,
+          name: secretName.trim() || secretId.trim(),
           value: secretValue.trim(),
         },
         reactivityKeys: secretWriteKeys,
   };
   return (
-    <div className="rounded-lg border border-primary/20 bg-primary/[0.02] p-3 space-y-3">
+    <div className="bg-primary/[0.03] px-4 py-3 space-y-3">
       <p className="text-[11px] font-semibold text-primary tracking-wide uppercase">New secret</p>
       <FieldGroup className="gap-3">
         <div className="grid grid-cols-2 gap-3">
+          <Field>
+            <FieldLabel htmlFor={secretNameInputId}>Label</FieldLabel>
+            <Input
+              id={secretNameInputId}
+              value={secretName}
+              onChange={(e) => setNameOverride((e.target as HTMLInputElement).value)}
+              placeholder="API Token"
+            />
+          </Field>
           <Field>
             <FieldLabel htmlFor={secretIdInputId}>ID</FieldLabel>
             <Input
               id={secretIdInputId}
               value={secretId}
-              onChange={(e) => setSecretId((e.target as HTMLInputElement).value)}
+              onChange={(e) => setIdOverride((e.target as HTMLInputElement).value)}
               placeholder="my-api-token"
               className="font-mono"
             />
           </Field>
-          <Field>
-            <FieldLabel htmlFor={secretNameInputId}>Label</FieldLabel>
-            <Input
-              id={secretNameInputId}
-              value={secretName}
-              onChange={(e) => setSecretName((e.target as HTMLInputElement).value)}
-              placeholder="API Token"
-            />
-          </Field>
         </div>
         <Field>
           <FieldLabel htmlFor={secretValueInputId}>Value</FieldLabel>
           <div className="relative">
             <Input
               id={secretValueInputId}
-              type={secretRevealed ? "text" : "password"}
+              type="text"
               value={secretValue}
               onChange={(e) => setSecretValue((e.target as HTMLInputElement).value)}
               placeholder="paste your token or key…"
               className="pr-9 font-mono"
+              style={
+                secretRevealed ? undefined : ({ WebkitTextSecurity: "disc" } as CSSProperties)
+              }
             />
             <Button
               type="button"
   onRemove?: () => void;
   removeLabel?: string;
   label?: string;
+  /**
+   * Display name of the source this header belongs to (e.g. "Axiom"). Used
+   * to prefix the suggested secret label and ID so tokens from different
+   * sources don't collide on ids like `authorization`.
+   */
+  sourceName?: string;
 }) {
   const [creating, setCreating] = useState(false);
   const nameInputId = useId();
     onRemove,
     removeLabel = "Remove",
     label = "Header",
+    sourceName,
   } = props;
   const isCustom = presetKey === "custom" || presetKey === undefined;
-  const suggestedId = name.toLowerCase().replace(/[^a-z0-9]+/g, "-") || "custom-header";
+  const headerLabel = name.trim() || "Custom Header";
+  const suggestedName = [sourceName?.trim(), headerLabel].filter(Boolean).join(" ");
+  const suggestedId = slugifyForSecretId(suggestedName) || "custom-header";
   if (creating) {
     return (
-      <div className="px-4 py-3">
+      <InlineCreateSecret
-        <InlineCreateSecret
+        suggestedId={suggestedId}
-          headerName={name || "Custom Header"}
+        suggestedName={suggestedName}
-          suggestedId={suggestedId}
+        onCreated={(id) => {
-          onCreated={(id) => {
+          onSelectSecret(id);
-            onSelectSecret(id);
+          setCreating(false);
-            setCreating(false);
+        }}
-          }}
+        onCancel={() => setCreating(false)}
-          onCancel={() => setCreating(false)}
+      />
-        />
-      </div>
     );
   }
         </Field>
       </FieldGroup>
-      <div className="flex items-center gap-1.5">
+      <SecretPicker
-        <div className="flex-1 min-w-0">
+        value={secretId}
-          <SecretPicker value={secretId} onSelect={onSelectSecret} secrets={existingSecrets} />
+        onSelect={onSelectSecret}
-        </div>
+        secrets={existingSecrets}
-        <Button
+        onCreateNew={() => setCreating(true)}
-          variant="outline"
+      />
-          size="sm"
-          className="shrink-0"
-          onClick={() => setCreating(true)}
-        >
-          + New
-        </Button>
-      </div>
       {secretId && name.trim() && (
         <HeaderValuePreview headerName={name.trim()} secretId={secretId} prefix={prefix} />

packages/react/src/plugins/secret-picker.tsx+24−1

 import { useState, type ChangeEvent, type FocusEvent } from "react";
+import { PlusIcon } from "lucide-react";
 import { Input } from "../components/input";
 import {
   CommandGroup,
   CommandItem,
   CommandList,
+  CommandSeparator,
 } from "../components/command";
 import { Popover, PopoverAnchor, PopoverContent } from "../components/popover";
   readonly onSelect: (secretId: string) => void;
   readonly secrets: readonly SecretPickerSecret[];
   readonly placeholder?: string;
+  /** When provided, renders a "+ New secret" row at the bottom of the dropdown. */
+  readonly onCreateNew?: () => void;
 }) {
-  const { value, onSelect, secrets, placeholder = "Search secrets…" } = props;
+  const { value, onSelect, secrets, placeholder = "Search secrets…", onCreateNew } = props;
   const [open, setOpen] = useState(false);
   const [query, setQuery] = useState("");
                   </CommandGroup>
                 );
               })}
+              {onCreateNew && (
+                <>
+                  {secrets.length > 0 && <CommandSeparator />}
+                  <CommandGroup>
+                    <CommandItem
+                      value="__create_new__"
+                      onSelect={() => {
+                        onCreateNew();
+                        setOpen(false);
+                        setQuery("");
+                      }}
+                      className="text-muted-foreground data-[selected=true]:text-foreground"
+                    >
+                      <PlusIcon aria-hidden className="size-3.5" />
+                      <span>New secret</span>
+                    </CommandItem>
+                  </CommandGroup>
+                </>
+              )}
             </CommandList>
           </Command>
         </PopoverContent>

feat(react): polish secret creation UX in header-auth flow

Keyboard shortcuts

General

Issues and pull requests

Issues, pull requests and Inbox

Repository code