refactor(webui): host-render function row actions

webui/src/features/organizations/OrganizationsPage.tsx

@@ -22,7 +22,6 @@ import {
   type AuthInfo,
   type DataGridColumn,
   type ModuleSubnavGroup,
-  type OrganizationFunctionActionContribution,
   type OrganizationFunctionActionsUiCapability
 } from "@govoplan/core-webui";
 import {
@@ -919,20 +918,25 @@ export default function OrganizationsPage({
     {
       id: "actions",
       header: "i18n:govoplan-organizations.actions.c3cd636a",
-      width: functionActionContributions.length ? 220 : 88,
+      width: 88 + (functionActionContributions.length * 40),
       sticky: "end",
       resizable: false,
       align: "right",
-      render: (row) => (
+      render: (row) => <TableActionGroup actions={[
-        <div className="organizations-row-actions">
+        {
-          <TableActionGroup actions={[{ id: "edit", label: "i18n:govoplan-organizations.edit.7dce1220", icon: <Edit3 size={16} aria-hidden="true" />, disabled: !canWriteFunctions || busy, onClick: () => editFunction(row) }]} />
+          id: "edit",
-          {functionActionContributions.map((contribution) => (
+          label: "i18n:govoplan-organizations.edit.7dce1220",
-            <span className="organizations-contributed-action" key={contribution.id}>
+          icon: <Edit3 size={16} aria-hidden="true" />,
-              {contribution.render({ settings, auth, function: row })}
+          disabled: !canWriteFunctions || busy,
-            </span>
+          onClick: () => editFunction(row)
-          ))}
+        },
-        </div>
+        ...functionActionContributions.map((contribution) => ({
-      )
+          id: contribution.id,
+          label: contribution.label,
+          icon: contribution.icon,
+          onClick: () => contribution.onClick({ settings, auth, function: row })
+        }))
+      ]} />
     }
   ];
 

webui/src/styles/organizations.css

@@ -30,21 +30,6 @@
   flex-wrap: wrap;
 }
 
-.organizations-row-actions {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  flex-wrap: nowrap;
-}
-
-.organizations-row-actions {
-  justify-content: flex-end;
-}
-
-.organizations-contributed-action {
-  display: inline-flex;
-}
-
 .organizations-check-list {
   display: grid;
   gap: 10px;