@flamingo-stack/openframe-frontend-core 0.0.850 → 0.0.851

package/dist/components/features/policy-configuration-panel.js

@@ -1,18 +1,22 @@
 "use client";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { ChevronDown, Shield } from "lucide-react";
 import { useState } from "react";
 import { cn } from "../../utils/cn.js";
 import { useCollapsible } from "../chat/hooks/use-collapsible.js";
+import { Chevron02DownIcon, ShieldIcon } from "../icons-v2-generated/index.js";
 import { TextLineSkeleton } from "../loading/unified-skeleton.js";
 import { ToolIcon } from "../tool-icon.js";
 import { Button } from "../ui/button/index.js";
-import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "../ui/dropdown-menu.js";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger
+} from "../ui/dropdown-menu.js";
 import { loadingItemProps, useLoadingScope } from "../ui/loading-scope.js";
-import { APPROVAL_LEVEL_META, APPROVAL_LEVELS } from "./approval-level.js";
-const approvalLevelOptions = APPROVAL_LEVELS.map((value) => ({ value, label: APPROVAL_LEVEL_META[value].label }));
-const POLICY_LEVEL_WIDTH = "w-[180px]";
-const CATEGORY_LEVEL_WIDTH = "w-[256px]";
+import { APPROVAL_LEVEL_META, APPROVAL_LEVELS, ApprovalLevelView } from "./approval-level.js";
+const CATEGORY_LEVEL_WIDTH = "w-[296px]";
 const POLICY_CONFIGURATION_PANEL_SKELETON_CATEGORIES = 4;
 const CATEGORY_HEADER_CLASS = "flex items-center gap-[var(--spacing-system-m)] border-t border-ods-border bg-ods-card py-[var(--spacing-system-s)] pl-[var(--spacing-system-m)] pr-[var(--spacing-system-xsf)] first:border-t-0";
 const ICON_TILE_SIZE_CLASS = "h-8 w-8 shrink-0 rounded-md";
@@ -22,56 +26,59 @@ const CATEGORY_LEVEL_COLUMN_CLASS = cn(
   "hidden shrink-0 px-[var(--spacing-system-sf)] py-[var(--spacing-system-xsf)] content-md:block",
   CATEGORY_LEVEL_WIDTH
 );
-const CHEVRON_CLASS = "h-6 w-6 text-ods-text-primary transition-transform duration-300";
-const getApprovalLevelLabel = (level) => APPROVAL_LEVEL_META[level]?.label ?? level;
+const CHEVRON_CLASS = "!h-6 !w-6 text-ods-text-primary transition-transform duration-300";
+const LevelOption = ({ level }) => {
+  const { label, Icon, toneClassName } = APPROVAL_LEVEL_META[level];
+  return /* @__PURE__ */ jsxs("span", { className: "inline-flex min-w-0 items-center gap-[var(--spacing-system-xsf)]", children: [
+    /* @__PURE__ */ jsx(Icon, { size: 24, className: cn("shrink-0", toneClassName), "aria-hidden": true }),
+    /* @__PURE__ */ jsx("span", { className: "truncate", children: label })
+  ] });
+};
+const LEVEL_MENU_ITEM_CLASS = "p-[var(--spacing-system-sf)] text-h4 [&_svg]:size-4 md:[&_svg]:size-6";
 const ApprovalLevelDropdown = ({ value, onChange, allowClear = false, triggerClassName, contentClassName, disabled }) => /* @__PURE__ */ jsxs(DropdownMenu, { children: [
   /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, disabled, children: /* @__PURE__ */ jsx(
     Button,
     {
       variant: "outline",
       disabled,
-      rightIcon: /* @__PURE__ */ jsx(ChevronDown, { className: "h-6 w-6 text-ods-text-secondary" }),
+      rightIcon: /* @__PURE__ */ jsx(Chevron02DownIcon, { className: "!h-6 !w-6 text-ods-text-secondary" }),
       className: cn(
-        "flex h-auto items-center justify-between gap-[var(--spacing-system-xsf)] rounded-md border border-ods-border bg-ods-card !px-[var(--spacing-system-xsf)] py-[var(--spacing-system-xsf)] transition-colors !text-h6 hover:bg-ods-bg-hover",
+        "flex h-auto items-center justify-between gap-[var(--spacing-system-xsf)] rounded-md border border-ods-border bg-ods-card !p-[var(--spacing-system-sf)] transition-colors !text-h4 hover:bg-ods-bg-hover",
         value ? "text-ods-text-primary" : "text-ods-text-secondary",
         triggerClassName
       ),
-      children: value ? getApprovalLevelLabel(value) : "Set Global Permission"
+      children: value ? /* @__PURE__ */ jsx(LevelOption, { level: value }) : "Set Global Permission"
     }
   ) }),
   /* @__PURE__ */ jsxs(DropdownMenuContent, { align: "end", className: contentClassName, children: [
-    allowClear && /* @__PURE__ */ jsx(DropdownMenuItem, { onClick: () => onChange(void 0), className: "text-h6", children: "Clear Global Permission" }),
-    approvalLevelOptions.map((option) => /* @__PURE__ */ jsx(DropdownMenuItem, { onClick: () => onChange(option.value), className: "text-h6", children: option.label }, option.value))
+    APPROVAL_LEVELS.map((level) => /* @__PURE__ */ jsx(DropdownMenuItem, { onClick: () => onChange(level), className: LEVEL_MENU_ITEM_CLASS, children: /* @__PURE__ */ jsx(LevelOption, { level }) }, level)),
+    allowClear && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
+      /* @__PURE__ */ jsx(DropdownMenuItem, { onClick: () => onChange(void 0), className: LEVEL_MENU_ITEM_CLASS, children: "Clear Global Permission" })
+    ] })
   ] })
 ] });
 const PolicyRow = ({ policy, categoryId, editMode, onPermissionChange }) => {
-  const handleChange = (level) => {
-    if (level) onPermissionChange(categoryId, policy.id, level);
-  };
+  const nameId = `policy-${categoryId}-${policy.id}`;
+  const level = policy.approvalLevel ? /* @__PURE__ */ jsx(
+    ApprovalLevelView,
+    {
+      value: policy.approvalLevel,
+      editable: editMode,
+      onChange: (next) => onPermissionChange(categoryId, policy.id, next),
+      "aria-labelledby": nameId
+    }
+  ) : null;
   return /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-[var(--spacing-system-m)] border-b border-ods-border bg-ods-bg px-[var(--spacing-system-m)] py-[var(--spacing-system-sf)] last:border-b-0 content-md:items-center", children: [
-    /* @__PURE__ */ jsx("div", { className: ICON_TILE_CLASS, children: /* @__PURE__ */ jsx(ToolIcon, { toolType: policy.toolName, size: 16 }) }),
+    /* @__PURE__ */ jsx("div", { className: cn(ICON_TILE_CLASS, "text-ods-text-secondary", editMode && "hidden content-md:flex"), children: /* @__PURE__ */ jsx(ToolIcon, { toolType: policy.toolName, size: 16 }) }),
     /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 flex-col", children: [
-      /* @__PURE__ */ jsx("p", { className: "truncate text-ods-text-primary text-h4", title: policy.name, children: policy.name }),
-      /* @__PURE__ */ jsx("p", { className: "break-all text-ods-text-secondary text-h6", children: policy.commandPattern }),
-      editMode ? /* @__PURE__ */ jsx("div", { className: "mt-[var(--spacing-system-xsf)] content-md:hidden", children: /* @__PURE__ */ jsx(
-        ApprovalLevelDropdown,
-        {
-          value: policy.approvalLevel,
-          onChange: handleChange,
-          triggerClassName: "w-full",
-          contentClassName: POLICY_LEVEL_WIDTH
-        }
-      ) }) : policy.approvalLevel ? /* @__PURE__ */ jsx("span", { className: "text-ods-text-primary text-h4 content-md:hidden", children: getApprovalLevelLabel(policy.approvalLevel) }) : null
+      /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-center gap-[var(--spacing-system-sf)]", children: [
+        /* @__PURE__ */ jsx("div", { className: "flex min-w-0 flex-1 flex-col", children: /* @__PURE__ */ jsx("p", { id: nameId, className: "truncate text-ods-text-primary text-h4", title: policy.name, children: policy.name }) }),
+        editMode && /* @__PURE__ */ jsx("span", { className: "flex shrink-0 text-ods-text-secondary content-md:hidden", children: /* @__PURE__ */ jsx(ToolIcon, { toolType: policy.toolName, size: 16 }) })
+      ] }),
+      level && /* @__PURE__ */ jsx("div", { className: cn("flex content-md:hidden", editMode && "mt-[var(--spacing-system-sf)]"), children: level })
     ] }),
-    /* @__PURE__ */ jsx("div", { className: "hidden shrink-0 content-md:block", children: editMode ? /* @__PURE__ */ jsx(
-      ApprovalLevelDropdown,
-      {
-        value: policy.approvalLevel,
-        onChange: handleChange,
-        triggerClassName: POLICY_LEVEL_WIDTH,
-        contentClassName: POLICY_LEVEL_WIDTH
-      }
-    ) : /* @__PURE__ */ jsx("div", { className: cn("px-[var(--spacing-system-sf)] py-[var(--spacing-system-xsf)]", POLICY_LEVEL_WIDTH), children: policy.approvalLevel && /* @__PURE__ */ jsx("span", { className: "text-ods-text-primary text-h4", children: getApprovalLevelLabel(policy.approvalLevel) }) }) })
+    level && /* @__PURE__ */ jsx("div", { className: "hidden shrink-0 items-center content-md:flex", children: level })
   ] });
 };
 const LOADING_CATEGORY = { id: "", name: "", policies: [] };
@@ -95,29 +102,22 @@ const CategorySection = ({
       "div",
       {
         ...loadingItemProps(props),
-        className: cn(CATEGORY_HEADER_CLASS, !loading && "cursor-pointer transition-colors hover:bg-ods-bg-hover"),
+        className: cn(
+          CATEGORY_HEADER_CLASS,
+          !loading && "cursor-pointer transition-colors hover:bg-ods-bg-hover [&:has([data-bulk-level]:hover)]:bg-ods-card"
+        ),
         onClick: loading ? void 0 : () => onToggle(category.id),
         children: [
-          /* @__PURE__ */ jsx("div", { className: ICON_TILE_CLASS, children: /* @__PURE__ */ jsx("div", { className: "text-ods-text-secondary", children: category.icon ?? /* @__PURE__ */ jsx(Shield, { className: "h-4 w-4" }) }) }),
+          /* @__PURE__ */ jsx("div", { className: ICON_TILE_CLASS, children: /* @__PURE__ */ jsx("div", { className: "text-ods-text-secondary", children: category.icon ?? /* @__PURE__ */ jsx(ShieldIcon, { size: 16 }) }) }),
           /* @__PURE__ */ jsxs("div", { className: CATEGORY_TEXT_CLASS, children: [
             category.name ? /* @__PURE__ */ jsx("p", { className: "truncate text-ods-text-primary text-h4", title: category.name, children: category.name }) : /* @__PURE__ */ jsx(TextLineSkeleton, { type: "h4", className: "w-40 max-w-full" }),
             loading ? /* @__PURE__ */ jsx(TextLineSkeleton, { type: "h6", className: "w-24" }) : /* @__PURE__ */ jsxs("p", { className: "text-ods-text-secondary text-h6", children: [
               category.policies.length,
-              " Configurations"
-            ] }),
-            editMode && /* @__PURE__ */ jsx("div", { className: "mt-[var(--spacing-system-xsf)] content-md:hidden", onClick: (e) => e.stopPropagation(), children: /* @__PURE__ */ jsx(
-              ApprovalLevelDropdown,
-              {
-                value: bulkLevel,
-                onChange: handleBulkChange,
-                allowClear: true,
-                triggerClassName: "w-full",
-                contentClassName: CATEGORY_LEVEL_WIDTH,
-                disabled: loading
-              }
-            ) })
+              " ",
+              category.policies.length === 1 ? "Configuration" : "Configurations"
+            ] })
           ] }),
-          editMode ? /* @__PURE__ */ jsx("div", { className: "hidden shrink-0 content-md:block", onClick: (e) => e.stopPropagation(), children: /* @__PURE__ */ jsx(
+          editMode ? /* @__PURE__ */ jsx("div", { "data-bulk-level": true, className: "hidden shrink-0 content-md:block", onClick: (e) => e.stopPropagation(), children: /* @__PURE__ */ jsx(
             ApprovalLevelDropdown,
             {
               value: bulkLevel,
@@ -138,8 +138,12 @@ const CategorySection = ({
                 e.stopPropagation();
                 onToggle(category.id);
               },
-              leftIcon: /* @__PURE__ */ jsx(ChevronDown, { className: cn(CHEVRON_CLASS, isExpanded && "rotate-180") }),
-              className: "h-auto w-auto shrink-0 rounded-md",
+              leftIcon: /* @__PURE__ */ jsx(Chevron02DownIcon, { className: cn(CHEVRON_CLASS, isExpanded && "rotate-180") }),
+              className: cn(
+                "h-auto w-auto shrink-0 rounded-md !p-[var(--spacing-system-xsf)] content-md:!p-[var(--spacing-system-sf)]",
+                // The row is the hover; the chevron adds none of its own.
+                "hover:bg-transparent active:bg-transparent"
+              ),
               "aria-label": isExpanded ? "Collapse" : "Expand"
             }
           )
@@ -157,16 +161,23 @@ const CategorySection = ({
           visibility: isExpanded ? "visible" : "hidden"
         },
         className: isExpanded ? "opacity-100" : "opacity-0",
-        children: /* @__PURE__ */ jsx("div", { ref: innerRef, className: "px-[var(--spacing-system-mf)] pb-[var(--spacing-system-mf)] pt-0", children: /* @__PURE__ */ jsx("div", { className: "overflow-hidden rounded-md border border-ods-border", children: (loading ? [] : category.policies).map((policy) => /* @__PURE__ */ jsx(
-          PolicyRow,
+        children: /* @__PURE__ */ jsx(
+          "div",
           {
-            policy,
-            categoryId: category.id,
-            editMode,
-            onPermissionChange: onPolicyPermissionChange
-          },
-          policy.id
-        )) }) })
+            ref: innerRef,
+            className: "border-t border-ods-border px-[var(--spacing-system-mf)] pb-[var(--spacing-system-mf)] pt-[var(--spacing-system-mf)]",
+            children: /* @__PURE__ */ jsx("div", { className: "overflow-hidden rounded-md border border-ods-border", children: (loading ? [] : category.policies).map((policy) => /* @__PURE__ */ jsx(
+              PolicyRow,
+              {
+                policy,
+                categoryId: category.id,
+                editMode,
+                onPermissionChange: onPolicyPermissionChange
+              },
+              policy.id
+            )) })
+          }
+        )
       }
     )
   ] });