feat(webui): centralize contextual table actions

2026-07-21 12:22:35 +02:00
parent 249bf63eb8
commit 8e9eb6e1f5
9 changed files with 226 additions and 89 deletions
--- a/webui/src/components/table/DataGrid.tsx
+++ b/webui/src/components/table/DataGrid.tsx
@@ -2,7 +2,7 @@ import { forwardRef, useEffect, useLayoutEffect, useMemo, useRef, useState, type
 import { createPortal } from "react-dom";
 import { ArrowDown, ArrowUp, ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight, ChevronsUpDown, Filter, GripVertical, Plus, Trash2, X } from "lucide-react";
 import StatusBadge from "../StatusBadge";
-import Button from "../Button";
+import TableActionGroup from "./TableActionGroup";
 import { usePlatformLanguage, i18nMessage } from "../../i18n/LanguageContext";

 export type DataGridSortDirection = "asc" | "desc";
@@ -852,58 +852,44 @@ export function DataGridRowActions({
  moveUpLabel = "i18n:govoplan-core.move_row_up.b4715a19",
  moveDownLabel = "i18n:govoplan-core.move_row_down.8e2b5957"
 }: DataGridRowActionsProps) {
-  const { translateText } = usePlatformLanguage();
-  const translatedAddLabel = translateText(addLabel);
-  const translatedRemoveLabel = translateText(removeLabel);
-  const translatedMoveUpLabel = translateText(moveUpLabel);
-  const translatedMoveDownLabel = translateText(moveDownLabel);
  return (
-    <div className="data-grid-row-actions">
-      <Button
-        type="button"
-        variant="primary"
-        className="data-grid-row-action is-add"
-        aria-label={translatedAddLabel}
-        title={translatedAddLabel}
-        disabled={disabled}
-        onClick={onAddBelow}>
-        
-        <Plus size={16} aria-hidden="true" />
-      </Button>
-      <Button
-        type="button"
-        variant="secondary"
-        className="data-grid-row-action is-reorder"
-        aria-label={translatedMoveUpLabel}
-        title={translatedMoveUpLabel}
-        disabled={disabled || !onMoveUp}
-        onClick={() => onMoveUp?.()}>
-        
-        <ArrowUp size={16} aria-hidden="true" />
-      </Button>
-      <Button
-        type="button"
-        variant="secondary"
-        className="data-grid-row-action is-reorder"
-        aria-label={translatedMoveDownLabel}
-        title={translatedMoveDownLabel}
-        disabled={disabled || !onMoveDown}
-        onClick={() => onMoveDown?.()}>
-        
-        <ArrowDown size={16} aria-hidden="true" />
-      </Button>
-      <Button
-        type="button"
-        variant="danger"
-        className="data-grid-row-action is-remove"
-        aria-label={translatedRemoveLabel}
-        title={translatedRemoveLabel}
-        disabled={disabled || removeDisabled}
-        onClick={onRemove}>
-        
-        <Trash2 size={16} aria-hidden="true" />
-      </Button>
-    </div>);
+    <TableActionGroup
+      className="data-grid-row-actions"
+      actions={[
+        {
+          id: "add",
+          label: addLabel,
+          icon: <Plus size={16} aria-hidden="true" />,
+          variant: "primary",
+          disabled,
+          onClick: onAddBelow
+        },
+        {
+          id: "move-up",
+          label: moveUpLabel,
+          icon: <ArrowUp size={16} aria-hidden="true" />,
+          applicable: Boolean(onMoveUp),
+          disabled,
+          onClick: () => onMoveUp?.()
+        },
+        {
+          id: "move-down",
+          label: moveDownLabel,
+          icon: <ArrowDown size={16} aria-hidden="true" />,
+          applicable: Boolean(onMoveDown),
+          disabled,
+          onClick: () => onMoveDown?.()
+        },
+        {
+          id: "remove",
+          label: removeLabel,
+          icon: <Trash2 size={16} aria-hidden="true" />,
+          variant: "danger",
+          disabled: disabled || removeDisabled,
+          onClick: onRemove
+        }
+      ]}
+    />);

 }

@@ -916,22 +902,18 @@ export function DataGridEmptyAction({


 }: {disabled?: boolean;onAdd: () => void;label?: string;}) {
-  const { translateText } = usePlatformLanguage();
-  const translatedLabel = translateText(label);
  return (
-    <div className="data-grid-row-actions data-grid-empty-row-actions">
-      <Button
-        type="button"
-        variant="primary"
-        className="data-grid-row-action is-add"
-        aria-label={translatedLabel}
-        title={translatedLabel}
-        disabled={disabled}
-        onClick={onAdd}>
-        
-        <Plus size={16} aria-hidden="true" />
-      </Button>
-    </div>);
+    <TableActionGroup
+      className="data-grid-row-actions data-grid-empty-row-actions"
+      actions={[{
+        id: "add",
+        label,
+        icon: <Plus size={16} aria-hidden="true" />,
+        variant: "primary",
+        disabled,
+        onClick: onAdd
+      }]}
+    />);

 }

--- a/webui/src/components/table/TableActionGroup.tsx
+++ b/webui/src/components/table/TableActionGroup.tsx
@@ -0,0 +1,80 @@
+import type { MouseEvent, ReactNode } from "react";
+import Button from "../Button";
+import { usePlatformLanguage } from "../../i18n/LanguageContext";
+
+export type TableActionDefinition = {
+  id: string;
+  label: string;
+  icon: ReactNode;
+  onClick: () => void;
+  /** Set to false when the action does not apply to this row. */
+  applicable?: boolean;
+  disabled?: boolean;
+  variant?: "primary" | "secondary" | "ghost" | "danger";
+};
+
+export type TableActionGroupProps = {
+  actions: readonly (TableActionDefinition | false | null | undefined)[];
+  label?: string;
+  className?: string;
+};
+
+function isApplicableAction(
+  action: TableActionDefinition | false | null | undefined
+): action is TableActionDefinition {
+  return Boolean(action && action.applicable !== false);
+}
+
+export function runTableAction(
+  event: Pick<MouseEvent<HTMLButtonElement>, "stopPropagation">,
+  onClick: () => void
+) {
+  event.stopPropagation();
+  onClick();
+}
+
+/**
+ * The standard row-level action surface for tables and DataGrids.
+ *
+ * Callers describe only actions that make sense for the row. An action may be
+ * disabled when it applies but is temporarily unavailable; actions marked as
+ * not applicable are omitted entirely. Labels remain available to assistive
+ * technology and as native tooltips while the visible controls stay icon-only.
+ */
+export default function TableActionGroup({
+  actions,
+  label = "i18n:govoplan-core.actions.c3cd636a",
+  className = ""
+}: TableActionGroupProps) {
+  const { translateText } = usePlatformLanguage();
+  const applicableActions = actions.filter(isApplicableAction);
+  if (applicableActions.length === 0) return null;
+
+  return (
+    <div
+      className={`table-action-group${className ? ` ${className}` : ""}`}
+      role="group"
+      aria-label={translateText(label)}
+    >
+      {applicableActions.map((action) => {
+        const translatedLabel = translateText(action.label);
+        return (
+          <Button
+            key={action.id}
+            type="button"
+            variant={action.variant ?? "secondary"}
+            className="table-action-button"
+            aria-label={translatedLabel}
+            title={translatedLabel}
+            disabled={action.disabled}
+            onClick={(event) => runTableAction(event, action.onClick)}
+          >
+            <span className="table-action-icon" aria-hidden="true">
+              {action.icon}
+            </span>
+          </Button>
+        );
+      })}
+    </div>
+  );
+}
--- a/webui/src/index.ts
+++ b/webui/src/index.ts
@@ -102,6 +102,8 @@ export { default as FieldLabel } from "./components/help/FieldLabel";
 export { default as InlineHelp } from "./components/help/InlineHelp";
 export { default as DataGrid, DataGridEmptyAction, DataGridRowActions } from "./components/table/DataGrid";
 export type { DataGridColumn, DataGridListOption, DataGridPagination, DataGridQueryState, DataGridSortDirection } from "./components/table/DataGrid";
+export { default as TableActionGroup } from "./components/table/TableActionGroup";
+export type { TableActionDefinition, TableActionGroupProps } from "./components/table/TableActionGroup";

 export { default as LoginModal } from "./features/auth/LoginModal";
 export { default as PublicLandingPage } from "./features/auth/PublicLandingPage";
--- a/webui/src/styles/badges.css
+++ b/webui/src/styles/badges.css
@@ -1,6 +1,6 @@
 .status-badge { display: inline-flex; align-items: center; height: 24px; border-radius: 99px; padding: 0 9px; font-size: 12px; font-weight: 800; background: var(--status-neutral-bg); color: var(--text-soft); text-transform: uppercase; }
 .status-ready, .status-sent, .status-appended, .status-success, .status-active { background: var(--success-soft); color: var(--success-text-strong); }
 .status-warning, .status-needs-review, .status-pending { background: var(--warning-soft); color: var(--warning-text-strong); }
-.status-blocked, .status-failed, .status-failed-permanent { background: var(--danger-bg); color: var(--danger-text-strong); }
+.status-blocked, .status-error, .status-danger, .status-failed, .status-failed-permanent { background: var(--danger-bg); color: var(--danger-text-strong); }
 .status-queued, .status-sending { background: var(--info-soft); color: var(--info-text-strong); }
 .status-inactive, .status-locked { background: var(--status-neutral-bg); color: var(--text-soft); }
--- a/webui/src/styles/components.css
+++ b/webui/src/styles/components.css
@@ -117,10 +117,6 @@
  font-size: 12px;
  line-height: 1.35;
 }
-.recipient-editor-table th:nth-child(2),
-.recipient-editor-table td:nth-child(2) { min-width: 430px; }
-.recipient-editor-table th:last-child,
-.recipient-editor-table td:last-child { width: 92px; text-align: right; }
 .recipient-field-input,
 .recipient-attachments-input {
  min-width: 150px;
@@ -957,15 +953,6 @@
  align-self: start;
 }

-.admin-icon-actions {
-  display: grid;
-  grid-auto-flow: column;
-  grid-auto-columns: 36px;
-  justify-content: end;
-  gap: 5px;
-  width: 100%;
-}
-
 .admin-icon-button.btn {
  display: inline-grid;
  place-items: center;
@@ -985,11 +972,19 @@
  gap: 14px;
 }

+.admin-form-grid > .wide {
+  grid-column: 1 / -1;
+}
+
 .admin-form-grid.two-columns,
 .admin-assignment-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
 }

+.admin-form-grid.three-columns {
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+}
+
 .admin-assignment-grid {
  display: grid;
  gap: 18px;
@@ -1034,6 +1029,7 @@

@media (max-width: 850px) {
  .admin-form-grid.two-columns,
+  .admin-form-grid.three-columns,
  .admin-assignment-grid,
  .admin-permission-groups {
    grid-template-columns: 1fr;
@@ -1803,6 +1799,27 @@
  white-space: nowrap;
 }

+.split-field-action {
+  gap: 0;
+}
+
+.split-field-action > input,
+.split-field-action > select,
+.split-field-action > textarea {
+  border-top-right-radius: 0 !important;
+  border-bottom-right-radius: 0 !important;
+}
+
+.split-field-action > button,
+.split-field-action > .button,
+.split-field-action > .btn {
+  align-self: stretch;
+  margin-left: -1px;
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+  box-shadow: none;
+}
+
 .field-input-missing {
  border-color: var(--danger-border-deep) !important;
  box-shadow: var(--danger-focus-ring) !important;
--- a/webui/src/styles/forms.css
+++ b/webui/src/styles/forms.css
@@ -1,10 +1,25 @@
 .form-grid { display: grid; gap: 18px; }
-.form-grid.compact { grid-template-columns: 1fr 1fr; }
+.form-grid.compact,
+.form-grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+.form-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
+.form-grid.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
+.form-grid > .wide { grid-column: 1 / -1; }
+.responsive-form-grid { align-items: start; }
 .form-field { display: grid; gap: 7px; }
 .form-label { font-weight: 700; font-size: 13px; color: var(--text-label); }
 .form-help { font-size: 12px; color: var(--muted); }
 input, select, textarea { border: var(--border-line); border-radius: 5px; background: var(--surface); font: inherit; padding: 10px 12px; color: var(--text); width: 100%; box-shadow: var(--shadow-control-inset); }
 textarea { resize: vertical; }
+
+@media (max-width: 1100px) {
+  .form-grid.compact.responsive-form-grid { grid-template-columns: 1fr; }
+}
+
+@media (max-width: 980px) {
+  .form-grid.two,
+  .form-grid.three,
+  .form-grid.four { grid-template-columns: 1fr; }
+}
 .form-field:has(input:disabled, select:disabled, textarea:disabled, input[readonly], textarea[readonly]) .form-label { color: var(--control-disabled-label); }
 input:disabled:not([type="checkbox"]):not([type="radio"]),
 select:disabled,
--- a/webui/src/styles/tables.css
+++ b/webui/src/styles/tables.css
@@ -653,17 +653,17 @@
  padding: 8px 10px;
 }

-/* Consistent row-level collection actions for editable DataGrid tables. */
-.data-grid-row-actions {
-  display: grid;
-  grid-template-columns: repeat(4, 36px);
+/* Consistent, context-aware row actions for tables and DataGrids. */
+.table-action-group {
+  display: flex;
+  flex-wrap: nowrap;
  align-items: center;
  justify-content: end;
  gap: 4px;
  width: 100%;
 }

-.data-grid-row-action.btn {
+.table-action-button.btn {
  display: inline-grid;
  place-items: center;
  width: 36px;
@@ -672,10 +672,20 @@
  padding: 0;
 }

-.data-grid-row-action.btn:disabled {
+.table-action-button.btn:disabled {
  opacity: .45;
 }

+.table-action-button.btn svg {
+  width: 17px;
+  height: 17px;
+}
+
+.table-action-icon {
+  display: inline-grid;
+  place-items: center;
+}
+
 .data-grid-empty-message {
  color: var(--muted);
  min-height: 64px;