@stigmer/react 3.0.4 → 3.0.6

package/src/skill/SkillDetailView.tsx

@@ -7,12 +7,10 @@ import { timestampDate } from "@bufbuild/protobuf/wkt";
 import type { Skill } from "@stigmer/protos/ai/stigmer/agentic/skill/v1/api_pb";
 import type { GitProvenance } from "@stigmer/protos/ai/stigmer/agentic/skill/v1/status_pb";
 import { SkillState } from "@stigmer/protos/ai/stigmer/agentic/skill/v1/status_pb";
-import { ApiResourceVisibility } from "@stigmer/protos/ai/stigmer/commons/apiresource/enum_pb";
 import { useSkill } from "./useSkill";
 import { SkillFileBrowser } from "./SkillFileBrowser";
 import { ErrorMessage } from "../error/ErrorMessage";
-import { VisibilityToggle } from "../library/VisibilityToggle";
-import { PermissionGate } from "../iam-policy/PermissionGate";
+import { ResourceVisibilityControl } from "../library/ResourceVisibilityControl";
 import { MARKDOWN_COMPONENTS, REMARK_PLUGINS, stripFrontmatter } from "../internal/markdown-components";
 import { ResourceDetailShell } from "../resource-detail/ResourceDetailShell";
 import { Section } from "../resource-detail/Section";
@@ -46,15 +44,6 @@ export interface SkillDetailViewProps {
    * Not called on error or not-found states.
    */
   readonly onResourceLoad?: (meta: { name: string; id: string }) => void;
-  /**
-   * Called when the user toggles visibility via the inline control.
-   * When provided, the header renders an interactive
-   * {@link VisibilityToggle} instead of a read-only badge.
-   * When omitted, visibility is displayed as a static "Public" pill.
-   */
-  readonly onVisibilityChange?: (v: ApiResourceVisibility) => void;
-  /** `true` while a visibility update RPC is in flight. */
-  readonly isVisibilityPending?: boolean;
   /**
    * Primary action rendered as a visible button in the header area.
    */
@@ -153,8 +142,6 @@ export function SkillDetailView({
   slug,
   version,
   onResourceLoad,
-  onVisibilityChange,
-  isVisibilityPending,
   primaryAction,
   actions,
   additionalTabs,
@@ -243,27 +230,15 @@ export function SkillDetailView({
     statusLabel: status ? skillStateLabel(status.state) : undefined,
   };
 
-  const visibilityBadge =
-    meta?.visibility === ApiResourceVisibility.visibility_public ? (
-      <span className="shrink-0 rounded-full bg-muted px-2 py-0.5 text-[10px] font-medium text-muted-foreground">
-        Public
-      </span>
-    ) : undefined;
-
-  const visibilityControl =
-    onVisibilityChange && meta ? (
-      <PermissionGate
-        resource={{ kind: "skill", id: meta.id }}
-        relation="can_edit"
-        fallback={visibilityBadge}
-      >
-        <VisibilityToggle
-          visibility={meta.visibility}
-          onVisibilityChange={onVisibilityChange}
-          isPending={isVisibilityPending}
-        />
-      </PermissionGate>
-    ) : visibilityBadge;
+  const visibilityControl = meta ? (
+    <ResourceVisibilityControl
+      kind="skill"
+      resourceId={meta.id}
+      visibility={meta.visibility}
+      org={meta.org || org}
+      onChanged={refetch}
+    />
+  ) : undefined;
 
   let tabContent: React.ReactNode;
   if (activeAdditionalTab) {

package/src/workflow/WorkflowDetailView.tsx

@@ -5,7 +5,6 @@ import { cn } from "@stigmer/theme";
 import { timestampDate } from "@bufbuild/protobuf/wkt";
 import type { Workflow } from "@stigmer/protos/ai/stigmer/agentic/workflow/v1/api_pb";
 import type { WorkflowInstance } from "@stigmer/protos/ai/stigmer/agentic/workflowinstance/v1/api_pb";
-import { ApiResourceVisibility } from "@stigmer/protos/ai/stigmer/commons/apiresource/enum_pb";
 import { ValidationState } from "@stigmer/protos/ai/stigmer/agentic/workflow/v1/serverless/validation_pb";
 import type { WorkflowInput } from "@stigmer/sdk";
 import { useWorkflow } from "./useWorkflow";
@@ -23,9 +22,8 @@ import { WorkflowInstanceList } from "./instance/WorkflowInstanceList";
 import { WorkflowVersionsTab } from "./WorkflowVersionsTab";
 import { useWorkflowVersions } from "./useWorkflowVersions";
 import { ErrorMessage } from "../error/ErrorMessage";
-import { VisibilityToggle } from "../library/VisibilityToggle";
+import { ResourceVisibilityControl } from "../library/ResourceVisibilityControl";
 import { formatDurationSec } from "./format-utils";
-import { PermissionGate } from "../iam-policy/PermissionGate";
 import { ResourceDetailShell } from "../resource-detail/ResourceDetailShell";
 import { Section } from "../resource-detail/Section";
 import { useDetailTabs } from "../resource-detail/useDetailTabs";
@@ -53,14 +51,6 @@ export interface WorkflowDetailViewProps {
    * Provides the resource display name for breadcrumbs, document titles, etc.
    */
   readonly onResourceLoad?: (meta: { name: string; id: string }) => void;
-  /**
-   * Called when the user toggles visibility via the inline control.
-   * When provided, the header renders an interactive
-   * {@link VisibilityToggle} instead of a read-only badge.
-   */
-  readonly onVisibilityChange?: (v: ApiResourceVisibility) => void;
-  /** `true` while a visibility update RPC is in flight. */
-  readonly isVisibilityPending?: boolean;
   /**
    * Primary action rendered as a visible button in the header area.
    */
@@ -158,8 +148,6 @@ export function WorkflowDetailView({
   org,
   slug,
   onResourceLoad,
-  onVisibilityChange,
-  isVisibilityPending,
   primaryAction,
   actions,
   additionalTabs,
@@ -269,27 +257,15 @@ export function WorkflowDetailView({
     <ValidationIndicator state={validationState} />
   ) : undefined;
 
-  const visibilityBadge =
-    meta?.visibility === ApiResourceVisibility.visibility_public ? (
-      <span className="shrink-0 rounded-full bg-muted px-2 py-0.5 text-[10px] font-medium text-muted-foreground">
-        Public
-      </span>
-    ) : undefined;
-
-  const visibilityControl =
-    onVisibilityChange && meta ? (
-      <PermissionGate
-        resource={{ kind: "workflow", id: meta.id }}
-        relation="can_edit"
-        fallback={visibilityBadge}
-      >
-        <VisibilityToggle
-          visibility={meta.visibility}
-          onVisibilityChange={onVisibilityChange}
-          isPending={isVisibilityPending}
-        />
-      </PermissionGate>
-    ) : visibilityBadge;
+  const visibilityControl = meta ? (
+    <ResourceVisibilityControl
+      kind="workflow"
+      resourceId={meta.id}
+      visibility={meta.visibility}
+      org={meta.org || org}
+      onChanged={refetch}
+    />
+  ) : undefined;
 
   let tabContent: React.ReactNode;
   if (activeAdditionalTab) {

package/src/workflow/instance/WorkflowInstanceDetailPanel.tsx

@@ -12,6 +12,7 @@ import { useUpdateWorkflowInstance } from "./useUpdateWorkflowInstance";
 import { useDeleteWorkflowInstance } from "./useDeleteWorkflowInstance";
 import { useUpdateVisibility } from "../../library/useUpdateVisibility";
 import { InstanceVisibilitySelector } from "../../library/InstanceVisibilitySelector";
+import { visibilityLabel } from "../../library/visibilityLevels";
 import { PermissionGate } from "../../iam-policy/PermissionGate";
 import { SharePanel } from "../../iam-policy/SharePanel";
 import { EnvironmentPicker } from "../../environment/EnvironmentPicker";
@@ -259,7 +260,7 @@ export function WorkflowInstanceDetailPanel({
             relation="can_edit"
             fallback={
               <span className="text-sm text-foreground">
-                {VISIBILITY_LABELS[meta?.visibility ?? 0] ?? "Private"}
+                {visibilityLabel(meta?.visibility ?? ApiResourceVisibility.visibility_private)}
               </span>
             }
           >
@@ -343,12 +344,6 @@ export function WorkflowInstanceDetailPanel({
   );
 }
 
-const VISIBILITY_LABELS: Record<number, string> = {
-  [ApiResourceVisibility.visibility_private]: "Private",
-  [ApiResourceVisibility.visibility_org]: "Organization",
-  [ApiResourceVisibility.visibility_public]: "Public",
-};
-
 function CloseIcon() {
   return (
     <svg width="14" height="14" viewBox="0 0 14 14" fill="none" aria-hidden="true">

package/src/workflow/instance/WorkflowInstanceList.tsx

@@ -8,6 +8,7 @@ import { useWorkflowInstances } from "../useWorkflowInstances";
 import { useEnvironmentList } from "../../environment/useEnvironmentList";
 import { useUpdateVisibility } from "../../library/useUpdateVisibility";
 import { InstanceVisibilitySelector } from "../../library/InstanceVisibilitySelector";
+import { visibilityLabel } from "../../library/visibilityLevels";
 import { PermissionGate } from "../../iam-policy/PermissionGate";
 import { WorkflowInstanceEmptyState } from "./WorkflowInstanceEmptyState";
 
@@ -228,7 +229,7 @@ function InstanceRow({
             relation="can_edit"
             fallback={
               <span className="text-xs text-muted-foreground">
-                {VISIBILITY_LABELS[meta?.visibility ?? 0] ?? "Private"}
+                {visibilityLabel(meta?.visibility ?? ApiResourceVisibility.visibility_private)}
               </span>
             }
           >
@@ -282,12 +283,6 @@ function InstanceRow({
   );
 }
 
-const VISIBILITY_LABELS: Record<number, string> = {
-  [ApiResourceVisibility.visibility_private]: "Private",
-  [ApiResourceVisibility.visibility_org]: "Organization",
-  [ApiResourceVisibility.visibility_public]: "Public",
-};
-
 function LoadingSkeleton() {
   return (
     <div className="space-y-2 py-4">