@stigmer/react 3.12.0 → 3.12.2

package/src/oauth-app/OAuthAppDetailPanel.tsx

@@ -1,6 +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 { OAuthApp } from "@stigmer/protos/ai/stigmer/iam/oauthapp/v1/api_pb";
@@ -8,6 +8,7 @@ import { VendorApprovalStatus } from "@stigmer/protos/ai/stigmer/iam/oauthapp/v1
 import { timestampDate, type Timestamp } from "@bufbuild/protobuf/wkt";
 import { useUpdateOAuthApp } from "./useUpdateOAuthApp.js";
 import { useDeleteOAuthApp } from "./useDeleteOAuthApp.js";
+import { SpinnerIcon } from "../internal/SpinnerIcon.js";
 
 // ---------------------------------------------------------------------------
 // Public API
@@ -61,6 +62,7 @@ export function OAuthAppDetailPanel({
   onBack,
   className,
 }: OAuthAppDetailPanelProps) {
+  const baseId = useId();
   const spec = oauthApp.spec;
   const meta = oauthApp.metadata;
 
@@ -265,7 +267,7 @@ export function OAuthAppDetailPanel({
                 "stg:disabled:pointer-events-none stg:disabled:opacity-40",
               )}
             >
-              {isDeleting && <SpinnerIcon />}
+              {isDeleting && <SpinnerIcon size={12} />}
               Delete permanently
             </button>
             <button
@@ -297,7 +299,7 @@ export function OAuthAppDetailPanel({
       ) : (
         <form onSubmit={handleSave} className="stg:space-y-3">
           <FieldInput
-            id="stgm-oauth-edit-provider"
+            id={`${baseId}-provider`}
             label="Provider"
             value={provider}
             onChange={setProvider}
@@ -306,7 +308,7 @@ export function OAuthAppDetailPanel({
             required
           />
           <FieldInput
-            id="stgm-oauth-edit-client-id"
+            id={`${baseId}-client-id`}
             label="Client ID"
             value={clientId}
             onChange={setClientId}
@@ -315,7 +317,7 @@ export function OAuthAppDetailPanel({
             required
           />
           <FieldInput
-            id="stgm-oauth-edit-client-secret"
+            id={`${baseId}-client-secret`}
             label="Client secret"
             value={clientSecret}
             onChange={setClientSecret}
@@ -325,7 +327,7 @@ export function OAuthAppDetailPanel({
             disabled={isUpdating}
           />
           <FieldInput
-            id="stgm-oauth-edit-auth-url"
+            id={`${baseId}-auth-url`}
             label="Authorization URL"
             value={authorizationUrl}
             onChange={setAuthorizationUrl}
@@ -334,7 +336,7 @@ export function OAuthAppDetailPanel({
             required
           />
           <FieldInput
-            id="stgm-oauth-edit-token-url"
+            id={`${baseId}-token-url`}
             label="Token URL"
             value={tokenUrl}
             onChange={setTokenUrl}
@@ -343,7 +345,7 @@ export function OAuthAppDetailPanel({
             required
           />
           <FieldInput
-            id="stgm-oauth-edit-scopes"
+            id={`${baseId}-scopes`}
             label="Scopes"
             value={scopes}
             onChange={setScopes}
@@ -352,7 +354,7 @@ export function OAuthAppDetailPanel({
             disabled={isUpdating}
           />
           <FieldInput
-            id="stgm-oauth-edit-userinfo-url"
+            id={`${baseId}-userinfo-url`}
             label="Userinfo URL"
             value={userinfoUrl}
             onChange={setUserinfoUrl}
@@ -361,7 +363,7 @@ export function OAuthAppDetailPanel({
             disabled={isUpdating}
           />
           <FieldInput
-            id="stgm-oauth-edit-scope-param"
+            id={`${baseId}-scope-param`}
             label="Scope parameter name"
             value={scopeParameterName}
             onChange={setScopeParameterName}
@@ -372,13 +374,13 @@ export function OAuthAppDetailPanel({
 
           <div className="stg:space-y-1">
             <label
-              htmlFor="stgm-oauth-edit-approval-status"
+              htmlFor={`${baseId}-approval-status`}
               className="stg:text-xs stg:font-medium stg:text-foreground"
             >
               Vendor approval status
             </label>
             <select
-              id="stgm-oauth-edit-approval-status"
+              id={`${baseId}-approval-status`}
               value={vendorApprovalStatus}
               onChange={(e) =>
                 setVendorApprovalStatus(
@@ -400,7 +402,7 @@ export function OAuthAppDetailPanel({
           </div>
 
           <FieldInput
-            id="stgm-oauth-edit-approval-docs"
+            id={`${baseId}-approval-docs`}
             label="Vendor approval docs URL"
             value={vendorApprovalDocsUrl}
             onChange={setVendorApprovalDocsUrl}
@@ -425,7 +427,7 @@ export function OAuthAppDetailPanel({
                 "stg:disabled:pointer-events-none stg:disabled:opacity-40",
               )}
             >
-              {isUpdating && <SpinnerIcon />}
+              {isUpdating && <SpinnerIcon size={12} />}
               Save changes
             </button>
             <button
@@ -652,20 +654,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/organization/CreateOrganizationForm.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useCallback, useRef, useState, type FormEvent } from "react";
+import { type FormEvent, useCallback, useId, useRef, useState } from "react";
 import { create as createMessage } from "@bufbuild/protobuf";
 import { cn } from "@stigmer/theme";
 import { getUserMessage } from "@stigmer/sdk";
@@ -9,6 +9,7 @@ import { ApiResourceMetadataSchema } from "@stigmer/protos/ai/stigmer/commons/ap
 import { useCreateOrganization } from "./useCreateOrganization.js";
 import { generateSlug } from "../internal/slug.js";
 import { validateMessage, getFieldError } from "../internal/validate.js";
+import { SpinnerIcon } from "../internal/SpinnerIcon.js";
 
 // ---------------------------------------------------------------------------
 // Public API
@@ -47,6 +48,7 @@ export function CreateOrganizationForm({
   onCancel,
   className,
 }: CreateOrganizationFormProps) {
+  const baseId = useId();
   const { create, isCreating, error, clearError } = useCreateOrganization();
 
   const [name, setName] = useState("");
@@ -120,13 +122,13 @@ export function CreateOrganizationForm({
         {/* ---- Name ---- */}
         <div className="stg:space-y-1">
           <label
-            htmlFor="stgm-new-org-name"
+            htmlFor={`${baseId}-name`}
             className="stg:text-xs stg:font-medium stg:text-foreground"
           >
             Name
           </label>
           <input
-            id="stgm-new-org-name"
+            id={`${baseId}-name`}
             type="text"
             value={name}
             onChange={(e) => handleNameChange(e.target.value)}
@@ -157,13 +159,13 @@ export function CreateOrganizationForm({
         {/* ---- Slug ---- */}
         <div className="stg:space-y-1">
           <label
-            htmlFor="stgm-new-org-slug"
+            htmlFor={`${baseId}-slug`}
             className="stg:text-xs stg:font-medium stg:text-foreground"
           >
             Slug
           </label>
           <input
-            id="stgm-new-org-slug"
+            id={`${baseId}-slug`}
             type="text"
             value={slug}
             onChange={(e) => handleSlugChange(e.target.value)}
@@ -195,14 +197,14 @@ export function CreateOrganizationForm({
         {/* ---- Description ---- */}
         <div className="stg:space-y-1">
           <label
-            htmlFor="stgm-new-org-desc"
+            htmlFor={`${baseId}-desc`}
             className="stg:text-xs stg:font-medium stg:text-muted-foreground"
           >
             Description{" "}
             <span className="stg:text-muted-foreground-subtle">(optional)</span>
           </label>
           <input
-            id="stgm-new-org-desc"
+            id={`${baseId}-desc`}
             type="text"
             value={description}
             onChange={(e) => setDescription(e.target.value)}
@@ -234,7 +236,7 @@ export function CreateOrganizationForm({
             "stg:disabled:pointer-events-none stg:disabled:opacity-40",
           )}
         >
-          {isCreating && <SpinnerIcon />}
+          {isCreating && <SpinnerIcon size={12} />}
           Create organization
         </button>
 
@@ -257,24 +259,3 @@ export function CreateOrganizationForm({
   );
 }
 
-// ---------------------------------------------------------------------------
-// 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/organization/OrgProfilePanel.tsx

@@ -1,12 +1,6 @@
 "use client";
 
-import {
-  useCallback,
-  useEffect,
-  useMemo,
-  useState,
-  type FormEvent,
-} from "react";
+import { type FormEvent, useCallback, useEffect, useId, useMemo, useState } from "react";
 import { cn } from "@stigmer/theme";
 import { getUserMessage } from "@stigmer/sdk";
 import type { Organization } from "@stigmer/protos/ai/stigmer/tenancy/organization/v1/api_pb";
@@ -14,6 +8,8 @@ import { useOrganization } from "./useOrganization.js";
 import { useUpdateOrganization } from "./useUpdateOrganization.js";
 import { useIdentityProviderList } from "../identity-provider/useIdentityProviderList.js";
 import { useResourceAvailable, ApiResourceKind } from "../deployment-mode.js";
+import { SpinnerIcon } from "../internal/SpinnerIcon.js";
+import { useCopyFeedback } from "../internal/useCopyFeedback.js";
 
 // ---------------------------------------------------------------------------
 // Constants
@@ -60,6 +56,7 @@ export function OrgProfilePanel({
   onUpdated,
   className,
 }: OrgProfilePanelProps) {
+  const baseId = useId();
   const {
     organization,
     isLoading: isFetching,
@@ -223,13 +220,13 @@ export function OrgProfilePanel({
         {/* Name */}
         <div className="stg:space-y-1">
           <label
-            htmlFor="stgm-org-profile-name"
+            htmlFor={`${baseId}-name`}
             className="stg:text-xs stg:font-medium stg:text-foreground"
           >
             Name
           </label>
           <input
-            id="stgm-org-profile-name"
+            id={`${baseId}-name`}
             type="text"
             value={name}
             onChange={(e) => setName(e.target.value)}
@@ -250,13 +247,13 @@ export function OrgProfilePanel({
         {/* Description */}
         <div className="stg:space-y-1">
           <label
-            htmlFor="stgm-org-profile-desc"
+            htmlFor={`${baseId}-desc`}
             className="stg:text-xs stg:font-medium stg:text-foreground"
           >
             Description
           </label>
           <textarea
-            id="stgm-org-profile-desc"
+            id={`${baseId}-desc`}
             value={description}
             onChange={(e) => setDescription(e.target.value)}
             maxLength={DESCRIPTION_MAX_LEN}
@@ -278,13 +275,13 @@ export function OrgProfilePanel({
         {/* Logo URL */}
         <div className="stg:space-y-1">
           <label
-            htmlFor="stgm-org-profile-logo"
+            htmlFor={`${baseId}-logo`}
             className="stg:text-xs stg:font-medium stg:text-foreground"
           >
             Logo URL
           </label>
           <input
-            id="stgm-org-profile-logo"
+            id={`${baseId}-logo`}
             type="url"
             value={logoUrl}
             onChange={(e) => setLogoUrl(e.target.value)}
@@ -323,7 +320,7 @@ export function OrgProfilePanel({
             "stg:disabled:pointer-events-none stg:disabled:opacity-40",
           )}
         >
-          {isUpdating && <SpinnerIcon />}
+          {isUpdating && <SpinnerIcon size={12} />}
           Save changes
         </button>
 
@@ -453,14 +450,7 @@ function ReadOnlyField({
   value: string;
   mono?: boolean;
 }) {
-  const [copied, setCopied] = useState(false);
-
-  const handleCopy = useCallback(() => {
-    navigator.clipboard.writeText(value).then(() => {
-      setCopied(true);
-      setTimeout(() => setCopied(false), 1500);
-    });
-  }, [value]);
+  const { copy, copied } = useCopyFeedback();
 
   if (!value) return null;
 
@@ -480,7 +470,7 @@ function ReadOnlyField({
         </span>
         <button
           type="button"
-          onClick={handleCopy}
+          onClick={() => void copy(value)}
           className={cn(
             "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",
@@ -525,24 +515,3 @@ function LogoPreview({ url }: { url: string }) {
   );
 }
 
-// ---------------------------------------------------------------------------
-// SpinnerIcon
-// ---------------------------------------------------------------------------
-
-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/platform-client/CreatePlatformClientForm.tsx

@@ -1,16 +1,12 @@
 "use client";
 
-import {
-  useCallback,
-  useState,
-  type FormEvent,
-  type KeyboardEvent,
-} from "react";
+import { type FormEvent, type KeyboardEvent, useCallback, useId, useState } from "react";
 import { cn } from "@stigmer/theme";
 import { getUserMessage } from "@stigmer/sdk";
 import { IamRole } from "@stigmer/protos/ai/stigmer/iam/v1/enum_pb";
 import type { PlatformClientCreateResponse } from "@stigmer/protos/ai/stigmer/iam/platformclient/v1/io_pb";
 import { useCreatePlatformClient } from "./useCreatePlatformClient.js";
+import { SpinnerIcon } from "../internal/SpinnerIcon.js";
 
 /** Props for {@link CreatePlatformClientForm}. */
 export interface CreatePlatformClientFormProps {
@@ -58,6 +54,7 @@ export function CreatePlatformClientForm({
   onCancel,
   className,
 }: CreatePlatformClientFormProps) {
+  const baseId = useId();
   const { create, isCreating, error, clearError } =
     useCreatePlatformClient();
 
@@ -160,7 +157,7 @@ export function CreatePlatformClientForm({
   return (
     <form onSubmit={handleSubmit} className={cn("stg:space-y-3", className)}>
       <FormField
-        id="stgm-pc-name"
+        id={`${baseId}-name`}
         label="Name"
         value={name}
         onChange={setName}
@@ -183,13 +180,13 @@ export function CreatePlatformClientForm({
         {!neverExpires && (
           <div className="stg:space-y-1">
             <label
-              htmlFor="stgm-pc-expires-at"
+              htmlFor={`${baseId}-expires-at`}
               className="stg:text-xs stg:font-medium stg:text-foreground"
             >
               Expires at
             </label>
             <input
-              id="stgm-pc-expires-at"
+              id={`${baseId}-expires-at`}
               type="datetime-local"
               value={expiresAt}
               onChange={(e) => setExpiresAt(e.target.value)}
@@ -234,13 +231,13 @@ export function CreatePlatformClientForm({
         {autoGrant && (
           <div className="stg:space-y-1">
             <label
-              htmlFor="stgm-pc-grant-role"
+              htmlFor={`${baseId}-grant-role`}
               className="stg:text-xs stg:font-medium stg:text-foreground"
             >
               Auto-grant role
             </label>
             <select
-              id="stgm-pc-grant-role"
+              id={`${baseId}-grant-role`}
               value={String(autoGrantRole)}
               onChange={(e) =>
                 setAutoGrantRole(Number(e.target.value) as IamRole)
@@ -348,7 +345,7 @@ export function CreatePlatformClientForm({
             "stg:disabled:pointer-events-none stg:disabled:opacity-40",
           )}
         >
-          {isCreating && <SpinnerIcon />}
+          {isCreating && <SpinnerIcon size={12} />}
           Create platform client
         </button>
 
@@ -500,20 +497,3 @@ function XIcon() {
   );
 }
 
-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/platform-client/PlatformClientDetailPanel.tsx

@@ -1,11 +1,6 @@
 "use client";
 
-import {
-  useCallback,
-  useState,
-  type FormEvent,
-  type KeyboardEvent,
-} from "react";
+import { type FormEvent, type KeyboardEvent, useCallback, useId, useState } from "react";
 import { cn } from "@stigmer/theme";
 import { getUserMessage } from "@stigmer/sdk";
 import { IamRole } from "@stigmer/protos/ai/stigmer/iam/v1/enum_pb";
@@ -15,6 +10,7 @@ import type { PlatformClientCreateResponse } from "@stigmer/protos/ai/stigmer/ia
 import { useUpdatePlatformClient } from "./useUpdatePlatformClient.js";
 import { useRotatePlatformClientSecret } from "./useRotatePlatformClientSecret.js";
 import { useDeletePlatformClient } from "./useDeletePlatformClient.js";
+import { SpinnerIcon } from "../internal/SpinnerIcon.js";
 
 /** Props for {@link PlatformClientDetailPanel}. */
 export interface PlatformClientDetailPanelProps {
@@ -74,6 +70,7 @@ export function PlatformClientDetailPanel({
   onBack,
   className,
 }: PlatformClientDetailPanelProps) {
+  const baseId = useId();
   const spec = platformClient.spec;
   const meta = platformClient.metadata;
 
@@ -318,13 +315,13 @@ export function PlatformClientDetailPanel({
             {!neverExpires && (
               <div className="stg:space-y-1">
                 <label
-                  htmlFor="stgm-pc-edit-expires-at"
+                  htmlFor={`${baseId}-expires-at`}
                   className="stg:text-xs stg:font-medium stg:text-foreground"
                 >
                   Expires at
                 </label>
                 <input
-                  id="stgm-pc-edit-expires-at"
+                  id={`${baseId}-expires-at`}
                   type="datetime-local"
                   value={expiresAt}
                   onChange={(e) => setExpiresAt(e.target.value)}
@@ -365,13 +362,13 @@ export function PlatformClientDetailPanel({
             {autoGrant && (
               <div className="stg:space-y-1">
                 <label
-                  htmlFor="stgm-pc-edit-grant-role"
+                  htmlFor={`${baseId}-grant-role`}
                   className="stg:text-xs stg:font-medium stg:text-foreground"
                 >
                   Auto-grant role
                 </label>
                 <select
-                  id="stgm-pc-edit-grant-role"
+                  id={`${baseId}-grant-role`}
                   value={String(autoGrantRole)}
                   onChange={(e) =>
                     setAutoGrantRole(
@@ -478,7 +475,7 @@ export function PlatformClientDetailPanel({
                 "stg:disabled:pointer-events-none stg:disabled:opacity-40",
               )}
             >
-              {isUpdating && <SpinnerIcon />}
+              {isUpdating && <SpinnerIcon size={12} />}
               Save changes
             </button>
             <button
@@ -520,7 +517,7 @@ export function PlatformClientDetailPanel({
                     "stg:disabled:pointer-events-none stg:disabled:opacity-50",
                   )}
                 >
-                  {isRotating && <SpinnerIcon />}
+                  {isRotating && <SpinnerIcon size={12} />}
                   Rotate
                 </button>
                 <button
@@ -587,7 +584,7 @@ export function PlatformClientDetailPanel({
                     "stg:disabled:pointer-events-none stg:disabled:opacity-50",
                   )}
                 >
-                  {isDeleting && <SpinnerIcon />}
+                  {isDeleting && <SpinnerIcon size={12} />}
                   Delete
                 </button>
                 <button
@@ -879,20 +876,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/platform-client/PlatformClientListPanel.tsx

@@ -8,6 +8,7 @@ import type { PlatformClient } from "@stigmer/protos/ai/stigmer/iam/platformclie
 import { Tooltip, TooltipContent, TooltipTrigger } from "../internal/tooltip.js";
 import { usePlatformClientList } from "./usePlatformClientList.js";
 import { useDeletePlatformClient } from "./useDeletePlatformClient.js";
+import { SpinnerIcon } from "../internal/SpinnerIcon.js";
 
 /** Props for {@link PlatformClientListPanel}. */
 export interface PlatformClientListPanelProps {
@@ -200,7 +201,7 @@ function PlatformClientRow({
               "stg:disabled:pointer-events-none stg:disabled:opacity-50",
             )}
           >
-            {isDeleting && <SpinnerIcon />}
+            {isDeleting && <SpinnerIcon size={12} />}
             Delete
           </button>
           <button
@@ -411,20 +412,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>
-  );
-}