refactor(webui): describe function assignment action

package.json

@@ -19,7 +19,7 @@
     "LICENSE"
   ],
   "peerDependencies": {
-    "@govoplan/core-webui": "^0.1.8",
+    "@govoplan/core-webui": "^0.1.9",
     "@vitejs/plugin-react": "^4.3.4",
     "lucide-react": "^1.23.0",
     "react": "^19.0.0",

webui/package.json

@@ -14,7 +14,7 @@
     "./styles/idm.css": "./src/styles/idm.css"
   },
   "peerDependencies": {
-    "@govoplan/core-webui": "^0.1.8",
+    "@govoplan/core-webui": "^0.1.9",
     "@vitejs/plugin-react": "^4.3.4",
     "lucide-react": "^1.23.0",
     "react": "^19.0.0",

webui/src/features/IdmPage.tsx

@@ -12,6 +12,8 @@ import {
   LoadingFrame,
   PageTitle,
   StatusBadge,
+  TableActionGroup,
+  ToggleSwitch,
   hasScope,
   useUnsavedDraftGuard,
   type ApiSettings,
@@ -559,14 +561,10 @@ export default function IdmPage({ settings, auth }: IdmPageProps) {
     },
     {
       id: "actions",
-      header: "",
-      width: 88,
+      header: "Actions",
+      width: 72,
       sticky: "end",
-      render: (row) => (
-        <div className="idm-row-actions">
-          <AdminIconButton label="i18n:govoplan-idm.edit.a5a0f3cc" icon={<Edit3 size={16} aria-hidden="true" />} disabled={!canManage || busy} onClick={() => editAssignment(row)} />
-        </div>
-      )
+      render: (row) => <TableActionGroup actions={[{ id: "edit", label: "i18n:govoplan-idm.edit.a5a0f3cc", icon: <Edit3 size={16} aria-hidden="true" />, disabled: !canManage || busy, onClick: () => editAssignment(row) }]} />
     }
   ];
 
@@ -592,17 +590,9 @@ export default function IdmPage({ settings, auth }: IdmPageProps) {
         <div className="idm-table-stack">
           {canReadSettings && (
               <Card title="i18n:govoplan-idm.idm_governance.6e4f3251" collapsible collapseKey="idm.governance">
-                <form className="idm-form-grid" onSubmit={(event) => { event.preventDefault(); void submitSettings(); }}>
+                <form className="admin-form-grid two-columns" onSubmit={(event) => { event.preventDefault(); void submitSettings(); }}>
                 <div className="idm-check-list wide">
-                  <label>
-                    <input
-                      type="checkbox"
-                      checked={settingsDraft.require_assignment_change_requests}
-                      disabled={!canManageSettings || busy}
-                      onChange={(event) => setSettingsDraft({ ...settingsDraft, require_assignment_change_requests: event.target.checked })}
-                    />
-                    <span>i18n:govoplan-idm.require_assignment_change_requests.697718a1</span>
-                  </label>
+                  <ToggleSwitch label="i18n:govoplan-idm.require_assignment_change_requests.697718a1" checked={settingsDraft.require_assignment_change_requests} disabled={!canManageSettings || busy} onChange={(require_assignment_change_requests) => setSettingsDraft({ ...settingsDraft, require_assignment_change_requests })} />
                 </div>
                 <FormField label="i18n:govoplan-idm.audit_detail_level.eb2e6fd2">
                   <select
@@ -624,7 +614,7 @@ export default function IdmPage({ settings, auth }: IdmPageProps) {
                     onChange={(event) => setSettingsDraft({ ...settingsDraft, change_retention_days: event.target.value })}
                   />
                 </FormField>
-                <div className="idm-form-actions wide">
+                <div className="button-row compact-actions wide">
                   <Button type="submit" variant="primary" disabled={!canManageSettings || busy || !hasDirtySettingsDraft}>
                     i18n:govoplan-idm.save_settings.4602c430
                   </Button>
@@ -668,7 +658,7 @@ export default function IdmPage({ settings, auth }: IdmPageProps) {
           </>
         )}
       >
-        <form id={formId} className="idm-form-grid" onSubmit={(event) => void submitAssignment(event)}>
+        <form id={formId} className="admin-form-grid two-columns" onSubmit={(event) => void submitAssignment(event)}>
           <FormField label="i18n:govoplan-idm.identity_search.d3460fcf">
             <input
               value={identitySearch}
@@ -731,14 +721,8 @@ export default function IdmPage({ settings, auth }: IdmPageProps) {
             </>
           )}
           <div className="idm-check-list">
-            <label>
-              <input type="checkbox" checked={assignmentDraft.applies_to_subunits} disabled={!canManage || busy} onChange={(event) => setAssignmentDraft({ ...assignmentDraft, applies_to_subunits: event.target.checked })} />
-              <span>i18n:govoplan-idm.applies_to_subunits.2e31b50b</span>
-            </label>
-            <label>
-              <input type="checkbox" checked={assignmentDraft.is_active} disabled={!canManage || busy} onChange={(event) => setAssignmentDraft({ ...assignmentDraft, is_active: event.target.checked })} />
-              <span>i18n:govoplan-idm.active.7bd0e9f8</span>
-            </label>
+            <ToggleSwitch label="i18n:govoplan-idm.applies_to_subunits.2e31b50b" checked={assignmentDraft.applies_to_subunits} disabled={!canManage || busy} onChange={(applies_to_subunits) => setAssignmentDraft({ ...assignmentDraft, applies_to_subunits })} />
+            <ToggleSwitch label="i18n:govoplan-idm.active.7bd0e9f8" checked={assignmentDraft.is_active} disabled={!canManage || busy} onChange={(is_active) => setAssignmentDraft({ ...assignmentDraft, is_active })} />
           </div>
           <div className="wide idm-dialog-change-request">
             <FormField label="i18n:govoplan-idm.change_request_id.b7d816db">

webui/src/module.ts

@@ -1,5 +1,6 @@
 import { createElement, lazy } from "react";
-import { Button, type OrganizationFunctionActionsUiCapability, type PlatformWebModule } from "@govoplan/core-webui";
+import { Users } from "lucide-react";
+import type { OrganizationFunctionActionsUiCapability, PlatformWebModule } from "@govoplan/core-webui";
 import { generatedTranslations } from "./i18n/generatedTranslations";
 import "./styles/idm.css";
 
@@ -20,23 +21,15 @@ const organizationFunctionActions: OrganizationFunctionActionsUiCapability = {
   actions: [
     {
       id: "idm.view-function-assignments",
-      label: "i18n:govoplan-idm.assignments.a0d19ec5",
+      label: "i18n:govoplan-idm.view_assignments.2d40d6a5",
+      icon: createElement(Users, { size: 16 }),
       anyOf: idmReadScopes,
       order: 40,
-      render: ({ function: item }) => createElement(
-        Button,
-        {
-          type: "button",
-          variant: "ghost",
-          title: "i18n:govoplan-idm.view_assignments.2d40d6a5",
-          onClick: () => {
-            if (typeof window !== "undefined") {
-              window.location.href = `/idm?function_id=${encodeURIComponent(item.id)}`;
-            }
-          }
-        },
-        "i18n:govoplan-idm.assignments.a0d19ec5"
-      )
+      onClick: ({ function: item }) => {
+        if (typeof window !== "undefined") {
+          window.location.href = `/idm?function_id=${encodeURIComponent(item.id)}`;
+        }
+      }
     }
   ]
 };

webui/src/styles/idm.css

@@ -27,16 +27,6 @@
   width: 100%;
 }
 
-.idm-form-grid {
-  display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-  gap: 14px;
-}
-
-.idm-form-grid .wide {
-  grid-column: 1 / -1;
-}
-
 .idm-check-list {
   display: grid;
   gap: 10px;
@@ -51,18 +41,6 @@
   font-weight: 600;
 }
 
-.idm-form-actions,
-.idm-row-actions {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  flex-wrap: nowrap;
-}
-
-.idm-row-actions {
-  justify-content: flex-end;
-}
-
 .idm-identity {
   display: grid;
   gap: 2px;
@@ -88,9 +66,3 @@
 .idm-dialog-change-request {
   padding-top: 2px;
 }
-
-@media (max-width: 900px) {
-  .idm-form-grid {
-    grid-template-columns: 1fr;
-  }
-}