Merge pull request #283 from RhysSullivan/rs/secret-input-ux

Polish secret creation UX in header-auth flow

Rhys Sullivan committed 7 months ago

Commit 96dc18a2 parents 24059d0 b5003fd9 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>

Merge pull request #283 from RhysSullivan/rs/secret-input-ux

Keyboard shortcuts

General

Issues and pull requests

Issues, pull requests and Inbox

Repository code