@stigmer/react 3.12.0 → 3.12.2

package/src/identity-provider/CreateIdentityProviderForm.tsx

@@ -1,11 +1,12 @@
 "use client";
 
-import { useCallback, useState, type FormEvent } from "react";
+import { type FormEvent, useCallback, useId, useState } from "react";
 import { cn } from "@stigmer/theme";
 import { getUserMessage } from "@stigmer/sdk";
 import type { IdentityProvider } from "@stigmer/protos/ai/stigmer/iam/identityprovider/v1/api_pb";
 import { IamRole } from "@stigmer/protos/ai/stigmer/iam/v1/enum_pb";
 import { useCreateIdentityProvider } from "./useCreateIdentityProvider.js";
+import { SpinnerIcon } from "../internal/SpinnerIcon.js";
 
 /** Props for {@link CreateIdentityProviderForm}. */
 export interface CreateIdentityProviderFormProps {
@@ -50,6 +51,7 @@ export function CreateIdentityProviderForm({
   onCancel,
   className,
 }: CreateIdentityProviderFormProps) {
+  const baseId = useId();
   const { create, isCreating, error, clearError } =
     useCreateIdentityProvider();
 
@@ -155,7 +157,7 @@ export function CreateIdentityProviderForm({
     <form onSubmit={handleSubmit} className={cn("stg:space-y-3", className)}>
       <div className="stg:space-y-3">
         <FormField
-          id="stgm-idp-name"
+          id={`${baseId}-name`}
           label="Name"
           value={name}
           onChange={setName}
@@ -165,7 +167,7 @@ export function CreateIdentityProviderForm({
         />
 
         <FormField
-          id="stgm-idp-jwks"
+          id={`${baseId}-jwks`}
           label="JWKS URI"
           value={jwksUri}
           onChange={setJwksUri}
@@ -175,7 +177,7 @@ export function CreateIdentityProviderForm({
         />
 
         <FormField
-          id="stgm-idp-issuers"
+          id={`${baseId}-issuers`}
           label="Allowed issuers"
           value={issuers}
           onChange={setIssuers}
@@ -186,7 +188,7 @@ export function CreateIdentityProviderForm({
         />
 
         <FormField
-          id="stgm-idp-audience"
+          id={`${baseId}-audience`}
           label="Expected audience"
           value={audience}
           onChange={setAudience}
@@ -223,7 +225,7 @@ export function CreateIdentityProviderForm({
 
         {isSso && (
           <FormField
-            id="stgm-idp-client-id"
+            id={`${baseId}-client-id`}
             label="OIDC client ID"
             value={oidcClientId}
             onChange={setOidcClientId}
@@ -265,7 +267,7 @@ export function CreateIdentityProviderForm({
             "stg:disabled:pointer-events-none stg:disabled:opacity-40",
           )}
         >
-          {isCreating && <SpinnerIcon />}
+          {isCreating && <SpinnerIcon size={12} />}
           Create identity provider
         </button>
 
@@ -372,6 +374,7 @@ function JitSection({
   onTenantOrgClaimChange: (v: string) => void;
   disabled: boolean;
 }) {
+  const baseId = useId();
   if (isSso) {
     return (
       <div className="stg:rounded-md stg:border stg:border-border-muted stg:bg-muted-faint stg:px-3 stg:py-2">
@@ -415,13 +418,13 @@ function JitSection({
         <>
           <div className="stg:space-y-1">
             <label
-              htmlFor="stgm-idp-grant-role"
+              htmlFor={`${baseId}-grant-role`}
               className="stg:text-xs stg:font-medium stg:text-foreground"
             >
               Auto-grant role
             </label>
             <select
-              id="stgm-idp-grant-role"
+              id={`${baseId}-grant-role`}
               value={String(autoGrantRole)}
               onChange={(e) => onAutoGrantRoleChange(Number(e.target.value) as IamRole)}
               disabled={disabled}
@@ -443,7 +446,7 @@ function JitSection({
           </div>
 
           <FormField
-            id="stgm-idp-tenant-claim"
+            id={`${baseId}-tenant-claim`}
             label="Tenant org claim"
             value={tenantOrgClaim}
             onChange={onTenantOrgClaimChange}
@@ -505,24 +508,3 @@ function ToggleSwitch({
   );
 }
 
-// ---------------------------------------------------------------------------
-// Icons
-// ---------------------------------------------------------------------------
-
-function SpinnerIcon() {
-  return (
-    <svg
-      width="12"
-      height="12"
-      viewBox="0 0 16 16"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="2"
-      strokeLinecap="round"
-      className="stg:animate-spin"
-      aria-hidden="true"
-    >
-      <path d="M8 2a6 6 0 1 0 6 6" />
-    </svg>
-  );
-}

package/src/identity-provider/IdentityProviderDetailPanel.tsx

@@ -1,12 +1,15 @@
 "use client";
 
-import { useCallback, useState, type FormEvent } from "react";
+import { type FormEvent, useCallback, useId, useRef, useState } from "react";
 import { cn } from "@stigmer/theme";
 import { getUserMessage } from "@stigmer/sdk";
 import type { IdentityProvider } from "@stigmer/protos/ai/stigmer/iam/identityprovider/v1/api_pb";
 import { IamRole } from "@stigmer/protos/ai/stigmer/iam/v1/enum_pb";
 import { timestampDate, type Timestamp } from "@bufbuild/protobuf/wkt";
 import { useUpdateIdentityProvider } from "./useUpdateIdentityProvider.js";
+import { SpinnerIcon } from "../internal/SpinnerIcon.js";
+import { selectElementText } from "../internal/select-element-text.js";
+import { useCopyFeedback } from "../internal/useCopyFeedback.js";
 
 /** Props for {@link IdentityProviderDetailPanel}. */
 export interface IdentityProviderDetailPanelProps {
@@ -55,6 +58,7 @@ export function IdentityProviderDetailPanel({
   ssoLoginUrl,
   className,
 }: IdentityProviderDetailPanelProps) {
+  const baseId = useId();
   const spec = identityProvider.spec;
   const meta = identityProvider.metadata;
 
@@ -230,7 +234,7 @@ export function IdentityProviderDetailPanel({
       ) : (
         <form onSubmit={handleSave} className="stg:space-y-3">
           <FieldInput
-            id="stgm-idp-edit-name"
+            id={`${baseId}-name`}
             label="Display name"
             value={displayName}
             onChange={setDisplayName}
@@ -239,7 +243,7 @@ export function IdentityProviderDetailPanel({
             required
           />
           <FieldInput
-            id="stgm-idp-edit-jwks"
+            id={`${baseId}-jwks`}
             label="JWKS URI"
             value={jwksUri}
             onChange={setJwksUri}
@@ -248,7 +252,7 @@ export function IdentityProviderDetailPanel({
             required
           />
           <FieldInput
-            id="stgm-idp-edit-issuers"
+            id={`${baseId}-issuers`}
             label="Allowed issuers"
             value={issuers}
             onChange={setIssuers}
@@ -258,7 +262,7 @@ export function IdentityProviderDetailPanel({
             required
           />
           <FieldInput
-            id="stgm-idp-edit-audience"
+            id={`${baseId}-audience`}
             label="Expected audience"
             value={audience}
             onChange={setAudience}
@@ -267,7 +271,7 @@ export function IdentityProviderDetailPanel({
             required
           />
           <FieldInput
-            id="stgm-idp-edit-userinfo"
+            id={`${baseId}-userinfo`}
             label="Userinfo endpoint"
             value={userinfoEndpoint}
             onChange={setUserinfoEndpoint}
@@ -304,7 +308,7 @@ export function IdentityProviderDetailPanel({
 
           {isSso && (
             <FieldInput
-              id="stgm-idp-edit-client-id"
+              id={`${baseId}-client-id`}
               label="OIDC client ID"
               value={oidcClientId}
               onChange={setOidcClientId}
@@ -345,7 +349,7 @@ export function IdentityProviderDetailPanel({
                 "stg:disabled:pointer-events-none stg:disabled:opacity-40",
               )}
             >
-              {isUpdating && <SpinnerIcon />}
+              {isUpdating && <SpinnerIcon size={12} />}
               Save changes
             </button>
             <button
@@ -488,8 +492,6 @@ function Field({
 // View mode — copyable field
 // ---------------------------------------------------------------------------
 
-const COPIED_FEEDBACK_MS = 2000;
-
 function CopyableField({
   label,
   value,
@@ -499,25 +501,14 @@ function CopyableField({
   value: string;
   hint?: string;
 }) {
-  const [copied, setCopied] = useState(false);
-  const valueId = "stgm-idp-sso-login-url";
+  const { copy, copied } = useCopyFeedback();
+  const revealRef = useRef<HTMLElement>(null);
 
   const handleCopy = useCallback(async () => {
-    try {
-      await navigator.clipboard.writeText(value);
-      setCopied(true);
-      setTimeout(() => setCopied(false), COPIED_FEEDBACK_MS);
-    } catch {
-      const el = document.getElementById(valueId);
-      if (el) {
-        const selection = window.getSelection();
-        const range = document.createRange();
-        range.selectNodeContents(el);
-        selection?.removeAllRanges();
-        selection?.addRange(range);
-      }
-    }
-  }, [value]);
+    if (await copy(value)) return;
+    // Rejected write: select the revealed value so the user can copy manually.
+    if (revealRef.current) selectElementText(revealRef.current);
+  }, [copy, value]);
 
   return (
     <div>
@@ -527,14 +518,14 @@ function CopyableField({
       <dd className="stg:mt-0.5">
         <div className="stg:flex stg:items-center stg:gap-2">
           <span
-            id={valueId}
+            ref={revealRef}
             className="stg:text-foreground stg:break-all stg:font-mono stg:text-xs stg:select-all"
           >
             {value}
           </span>
           <button
             type="button"
-            onClick={handleCopy}
+            onClick={() => void handleCopy()}
             className={cn(
               "stg:shrink-0 stg:rounded stg:px-1.5 stg:py-0.5 stg:text-[0.6rem]",
               "stg:text-muted-foreground stg:hover:text-foreground stg:hover:bg-accent-hover",
@@ -669,6 +660,7 @@ function JitEditSection({
   onTenantOrgClaimChange: (v: string) => void;
   disabled?: boolean;
 }) {
+  const baseId = useId();
   if (isSso) {
     return (
       <div className="stg:rounded-md stg:border stg:border-border-muted stg:bg-muted-faint stg:px-3 stg:py-2">
@@ -712,13 +704,13 @@ function JitEditSection({
         <>
           <div className="stg:space-y-1">
             <label
-              htmlFor="stgm-idp-edit-grant-role"
+              htmlFor={`${baseId}-grant-role`}
               className="stg:text-xs stg:font-medium stg:text-foreground"
             >
               Auto-grant role
             </label>
             <select
-              id="stgm-idp-edit-grant-role"
+              id={`${baseId}-grant-role`}
               value={String(autoGrantRole)}
               onChange={(e) => onAutoGrantRoleChange(Number(e.target.value) as IamRole)}
               disabled={disabled}
@@ -740,7 +732,7 @@ function JitEditSection({
           </div>
 
           <FieldInput
-            id="stgm-idp-edit-tenant-claim"
+            id={`${baseId}-tenant-claim`}
             label="Tenant org claim"
             value={tenantOrgClaim}
             onChange={onTenantOrgClaimChange}
@@ -846,20 +838,3 @@ function ArrowLeftIcon() {
   );
 }
 
-function SpinnerIcon() {
-  return (
-    <svg
-      width="12"
-      height="12"
-      viewBox="0 0 16 16"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="2"
-      strokeLinecap="round"
-      className="stg:animate-spin"
-      aria-hidden="true"
-    >
-      <path d="M8 2a6 6 0 1 0 6 6" />
-    </svg>
-  );
-}

package/src/identity-provider/IdentityProviderListPanel.tsx

@@ -8,6 +8,7 @@ import type { IdentityProvider } from "@stigmer/protos/ai/stigmer/iam/identitypr
 import { Tooltip, TooltipContent, TooltipTrigger } from "../internal/tooltip.js";
 import { useIdentityProviderList } from "./useIdentityProviderList.js";
 import { useDeleteIdentityProvider } from "./useDeleteIdentityProvider.js";
+import { SpinnerIcon } from "../internal/SpinnerIcon.js";
 
 /** Props for {@link IdentityProviderListPanel}. */
 export interface IdentityProviderListPanelProps {
@@ -197,7 +198,7 @@ function IdpRow({
               "stg:disabled:pointer-events-none stg:disabled:opacity-50",
             )}
           >
-            {isDeleting && <SpinnerIcon />}
+            {isDeleting && <SpinnerIcon size={12} />}
             Delete
           </button>
           <button
@@ -366,20 +367,3 @@ function TrashIcon() {
   );
 }
 
-function SpinnerIcon() {
-  return (
-    <svg
-      width="12"
-      height="12"
-      viewBox="0 0 16 16"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="2"
-      strokeLinecap="round"
-      className="stg:animate-spin"
-      aria-hidden="true"
-    >
-      <path d="M8 2a6 6 0 1 0 6 6" />
-    </svg>
-  );
-}

package/src/identity-provider/IdentityProviderWizard.tsx

@@ -1,10 +1,6 @@
 "use client";
 
-import {
-  useCallback,
-  useState,
-  type FormEvent,
-} from "react";
+import { type FormEvent, useCallback, useId, useState } from "react";
 import { cn } from "@stigmer/theme";
 import { getUserMessage } from "@stigmer/sdk";
 import type { IdentityProvider } from "@stigmer/protos/ai/stigmer/iam/identityprovider/v1/api_pb";
@@ -13,6 +9,7 @@ import { ProviderPicker } from "./ProviderPicker.js";
 import { useCreateIdentityProvider } from "./useCreateIdentityProvider.js";
 import { useOidcDiscovery } from "./useOidcDiscovery.js";
 import type { ProviderPreset, ProviderConfig } from "./presets.js";
+import { SpinnerIcon } from "../internal/SpinnerIcon.js";
 
 /** Props for {@link IdentityProviderWizard}. */
 export interface IdentityProviderWizardProps {
@@ -365,6 +362,7 @@ function ConfigureStep({
   onContinue: () => void;
   onCancel?: () => void;
 }) {
+  const baseId = useId();
   const allVarsFilled = preset.variables.every(
     (v) => (vars[v.key] ?? "").trim() !== "",
   );
@@ -402,7 +400,7 @@ function ConfigureStep({
 
       {/* Common fields */}
       <FieldInput
-        id="stgm-idp-wiz-name"
+        id={`${baseId}-name`}
         label="Display name"
         value={name}
         onChange={onNameChange}
@@ -412,7 +410,7 @@ function ConfigureStep({
       />
 
       <FieldInput
-        id="stgm-idp-wiz-audience"
+        id={`${baseId}-audience`}
         label="Expected audience"
         value={audience}
         onChange={onAudienceChange}
@@ -438,7 +436,7 @@ function ConfigureStep({
             "stg:disabled:pointer-events-none stg:disabled:opacity-40",
           )}
         >
-          {isLoading && <SpinnerIcon />}
+          {isLoading && <SpinnerIcon size={12} />}
           Continue
         </button>
         <TextButton onClick={onBack} disabled={isLoading}>
@@ -507,6 +505,7 @@ function ReviewStep({
   onSubmit: (e: FormEvent) => void;
   onCancel?: () => void;
 }) {
+  const baseId = useId();
   const canSubmit =
     jwksUri.trim() !== "" &&
     issuers.trim() !== "" &&
@@ -530,7 +529,7 @@ function ReviewStep({
       </p>
 
       <FieldInput
-        id="stgm-idp-wiz-jwks"
+        id={`${baseId}-jwks`}
         label="JWKS URI"
         value={jwksUri}
         onChange={onJwksUriChange}
@@ -540,7 +539,7 @@ function ReviewStep({
       />
 
       <FieldInput
-        id="stgm-idp-wiz-issuers"
+        id={`${baseId}-issuers`}
         label="Allowed issuers"
         value={issuers}
         onChange={onIssuersChange}
@@ -551,7 +550,7 @@ function ReviewStep({
       />
 
       <FieldInput
-        id="stgm-idp-wiz-userinfo"
+        id={`${baseId}-userinfo`}
         label="Userinfo endpoint"
         value={userinfoEndpoint}
         onChange={onUserinfoEndpointChange}
@@ -570,7 +569,7 @@ function ReviewStep({
 
       {isSso && (
         <FieldInput
-          id="stgm-idp-wiz-client-id"
+          id={`${baseId}-client-id`}
           label="OIDC client ID"
           value={oidcClientId}
           onChange={onOidcClientIdChange}
@@ -611,7 +610,7 @@ function ReviewStep({
             "stg:disabled:pointer-events-none stg:disabled:opacity-40",
           )}
         >
-          {isCreating && <SpinnerIcon />}
+          {isCreating && <SpinnerIcon size={12} />}
           Create identity provider
         </button>
         <TextButton onClick={onBack} disabled={isCreating}>
@@ -825,6 +824,7 @@ function JitProvisioningSection({
   onTenantOrgClaimChange: (v: string) => void;
   disabled?: boolean;
 }) {
+  const baseId = useId();
   if (isSso) {
     return (
       <div className="stg:rounded-md stg:border stg:border-border-muted stg:bg-muted-faint stg:px-3 stg:py-2">
@@ -867,7 +867,7 @@ function JitProvisioningSection({
       {autoGrant && (
         <>
           <FieldInput
-            id="stgm-idp-wiz-grant-role"
+            id={`${baseId}-grant-role`}
             label="Auto-grant role"
             value={String(autoGrantRole)}
             onChange={(v) => onAutoGrantRoleChange(Number(v) as IamRole)}
@@ -879,7 +879,7 @@ function JitProvisioningSection({
           />
 
           <FieldInput
-            id="stgm-idp-wiz-tenant-claim"
+            id={`${baseId}-tenant-claim`}
             label="Tenant org claim"
             value={tenantOrgClaim}
             onChange={onTenantOrgClaimChange}
@@ -980,20 +980,3 @@ function CancelButton({
   );
 }
 
-function SpinnerIcon() {
-  return (
-    <svg
-      width="12"
-      height="12"
-      viewBox="0 0 16 16"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="2"
-      strokeLinecap="round"
-      className="stg:animate-spin"
-      aria-hidden="true"
-    >
-      <path d="M8 2a6 6 0 1 0 6 6" />
-    </svg>
-  );
-}

package/src/identity-provider/SsoLoginPrompt.tsx

@@ -184,7 +184,8 @@ function resolvePhase(
 // Sub-components
 // ---------------------------------------------------------------------------
 
-import { forwardRef } from "react";
+import { forwardRef, useId } from "react";
+import { SpinnerIcon } from "../internal/SpinnerIcon.js";
 
 interface OrgInputFormProps {
   readonly value: string;
@@ -194,17 +195,18 @@ interface OrgInputFormProps {
 
 const OrgInputForm = forwardRef<HTMLInputElement, OrgInputFormProps>(
   function OrgInputForm({ value, onChange, onSubmit }, ref) {
+    const inputId = useId();
     return (
       <form onSubmit={onSubmit} className="stg:space-y-3">
         <label
-          htmlFor="sso-org-input"
+          htmlFor={inputId}
           className="stg:block stg:text-sm stg:font-medium stg:text-foreground"
         >
           Organization
         </label>
         <input
           ref={ref}
-          id="sso-org-input"
+          id={inputId}
           type="text"
           value={value}
           onChange={(e) => onChange(e.target.value)}
@@ -244,7 +246,7 @@ function LoadingState({ org }: { org: string }) {
       aria-busy="true"
       aria-label={`Looking up SSO provider for ${org}`}
     >
-      <SpinnerIcon />
+      <SpinnerIcon size={20} className="stg:text-muted-foreground" />
       <p className="stg:text-sm stg:text-muted-foreground">
         Looking up <span className="stg:font-medium stg:text-foreground">{org}</span>&hellip;
       </p>
@@ -366,23 +368,6 @@ function ErrorState({
 // Icons
 // ---------------------------------------------------------------------------
 
-function SpinnerIcon() {
-  return (
-    <svg
-      width="20"
-      height="20"
-      viewBox="0 0 16 16"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="2"
-      strokeLinecap="round"
-      className="stg:animate-spin stg:text-muted-foreground"
-      aria-hidden="true"
-    >
-      <path d="M8 2a6 6 0 1 0 6 6" />
-    </svg>
-  );
-}
 
 function SsoShieldIcon() {
   return (