refactor(FR-2820): replace BAIProjectTable per-action callbacks with nameColumnActionProps

ironAiken2 · claude · ironAiken2 · commit 7c11148a8e30 · 2026-05-18T06:28:51.000Z
Consolidate onClickProjectEditButton / onClickDeactivateProject /
onClickRestoreProject / onClickPurgeProject into a single
nameColumnActionProps prop (object or (value, record, index) =&gt; props),
mirroring the BAIModelDeploymentNodes pattern. The name column now only
renders the title; ProjectPage composes the per-row action list
(edit / deactivate / activate / purge) as a closure so all mutation and
side-effect logic stays in the app layer instead of crossing the
backend.ai-ui library boundary via individual callbacks.

- BAIProjectTable: drop 4 callback props, add nameColumnActionProps and
  exported BAIProjectTableNameColumnActionProps type
- ProjectPage: build the action list inline, reusing existing
  comp:BAIProjectTable.* i18n keys (no i18n changes)
- stories: keep local QueryResolver callback API, adapt internally

Co-Authored-By: Claude Opus 4.7 &lt;noreply@anthropic.com&gt;
diff --git a/packages/backend.ai-ui/src/components/fragments/BAIProjectTable.stories.tsx b/packages/backend.ai-ui/src/components/fragments/BAIProjectTable.stories.tsx
@@ -10,9 +10,12 @@ import { BAIConfigProvider } from '../provider/BAIConfigProvider';
 import { BAIMetaDataProvider } from '../provider/BAIMetaDataProvider';
 import BAIProjectTable, {
   availableProjectSorterValues,
+  type ProjectInList,
 } from './BAIProjectTable';
+import { DeleteFilled, SettingOutlined } from '@ant-design/icons';
 import type { Meta, StoryObj } from '@storybook/react-vite';
 import { App } from 'antd';
+import { BanIcon, UndoIcon } from 'lucide-react';
 import { useState } from 'react';
 import { graphql, useLazyLoadQuery } from 'react-relay';
 
@@ -45,14 +48,10 @@ const meta: Meta<typeof BAIProjectTable> = {
 |------|------|---------|-------------|
 | \`projectFragment\` | \`BAIProjectTableFragment$key\` | - | GraphQL fragment reference (required) |
 | \`onChangeOrder\` | \`(order: ProjectSorterValue \\| null) => void\` | - | Callback when sort order changes |
-| \`onClickProjectEditButton\` | \`(project: Project) => void\` | - | Callback when edit button is clicked (required) |
-| \`onClickDeactivateProject\` | \`(project: Project) => Promise<void>\` | - | Async callback when deactivate is confirmed (required) |
-| \`onClickRestoreProject\` | \`(project: Project) => Promise<void>\` | - | Async callback when restore is confirmed (required) |
-| \`onClickPurgeProject\` | \`(project: Project) => void\` | - | Callback when purge is clicked (required) |
+| \`nameColumnActionProps\` | \`BAINameActionCellProps \\| ((value, record, index) => BAINameActionCellProps)\` | - | Props forwarded to the name column's \`BAINameActionCell\`. The page composes the per-row action list (edit / deactivate / activate / purge) here so action logic stays in the app layer |
 
 ## Pre-configured Columns
-- **Name**: Project name (sortable)
-- **Controls**: Edit, Deactivate, and Purge buttons
+- **Name**: Project name (sortable) with caller-composed row actions via \`nameColumnActionProps\`
 - **Domain**: Domain name (sortable)
 - **Description**: Project description
 - **Created At**: Creation timestamp (sortable)
@@ -88,32 +87,15 @@ For other props (loading, pagination, etc.), refer to [BAITable](?path=/docs/tab
         },
       },
     },
-    onClickProjectEditButton: {
-      action: 'edit-clicked',
-      description: 'Callback when edit button is clicked',
-      table: {
-        type: { summary: '(project: Project) => void' },
-      },
-    },
-    onClickDeactivateProject: {
-      action: 'deactivate-confirmed',
-      description: 'Async callback when deactivate is confirmed',
-      table: {
-        type: { summary: '(project: Project) => Promise<void>' },
-      },
-    },
-    onClickRestoreProject: {
-      action: 'restore-confirmed',
-      description: 'Async callback when restore is confirmed',
-      table: {
-        type: { summary: '(project: Project) => Promise<void>' },
-      },
-    },
-    onClickPurgeProject: {
-      action: 'purge-clicked',
-      description: 'Callback when purge is clicked',
+    nameColumnActionProps: {
+      control: false,
+      description:
+        "Props forwarded to the name column's BAINameActionCell. The page composes the per-row action list (edit / deactivate / activate / purge) here.",
       table: {
-        type: { summary: '(project: Project) => void' },
+        type: {
+          summary:
+            'BAINameActionCellProps | ((value, record, index) => BAINameActionCellProps)',
+        },
       },
     },
   },
@@ -145,15 +127,14 @@ type Story = StoryObj<typeof BAIProjectTable>;
 interface QueryResolverProps extends Partial<
   Pick<
     React.ComponentProps<typeof BAIProjectTable>,
-    | 'onClickProjectEditButton'
-    | 'onClickDeactivateProject'
-    | 'onClickRestoreProject'
-    | 'onClickPurgeProject'
-    | 'onChangeOrder'
-    | 'loading'
-    | 'order'
+    'onChangeOrder' | 'loading' | 'order'
   >
-> {}
+> {
+  onClickProjectEditButton?: (project: ProjectInList) => void;
+  onClickDeactivateProject?: (project: ProjectInList) => Promise<void>;
+  onClickRestoreProject?: (project: ProjectInList) => Promise<void>;
+  onClickPurgeProject?: (project: ProjectInList) => void;
+}
 
 const noop = () => {};
 const asyncNoop = async () => {};
@@ -194,10 +175,59 @@ const QueryResolver: React.FC<QueryResolverProps> = ({
   return (
     <BAIProjectTable
       projectFragment={projectNodes}
-      onClickProjectEditButton={onClickProjectEditButton}
-      onClickDeactivateProject={onClickDeactivateProject}
-      onClickRestoreProject={onClickRestoreProject}
-      onClickPurgeProject={onClickPurgeProject}
+      nameColumnActionProps={(_value, record) => {
+        const isModelStore = record.type === 'MODEL_STORE';
+        return {
+          actions: [
+            {
+              key: 'edit',
+              title: 'Edit',
+              icon: <SettingOutlined />,
+              disabled: isModelStore,
+              onClick: () => onClickProjectEditButton(record),
+            },
+            ...(record.is_active
+              ? [
+                  {
+                    key: 'deactivate',
+                    title: 'Deactivate',
+                    icon: <BanIcon />,
+                    type: 'danger' as const,
+                    disabled: isModelStore,
+                    popConfirm: {
+                      title: 'Deactivate project',
+                      description: record.name,
+                      okButtonProps: { danger: true },
+                      okText: 'Deactivate',
+                      onConfirm: () => onClickDeactivateProject(record),
+                    },
+                  },
+                ]
+              : [
+                  {
+                    key: 'activate',
+                    title: 'Activate',
+                    icon: <UndoIcon />,
+                    disabled: isModelStore,
+                    popConfirm: {
+                      title: 'Activate project',
+                      description: record.name,
+                      okText: 'Activate',
+                      onConfirm: () => onClickRestoreProject(record),
+                    },
+                  },
+                  {
+                    key: 'purge',
+                    title: 'Purge',
+                    icon: <DeleteFilled />,
+                    type: 'danger' as const,
+                    disabled: isModelStore,
+                    onClick: () => onClickPurgeProject(record),
+                  },
+                ]),
+          ],
+        };
+      }}
       onChangeOrder={onChangeOrder}
       loading={loading}
       order={order}
diff --git a/packages/backend.ai-ui/src/components/fragments/BAIProjectTable.tsx b/packages/backend.ai-ui/src/components/fragments/BAIProjectTable.tsx
@@ -5,14 +5,17 @@ import {
 import { toLocalId } from '../../helper';
 import BAIResourceNumberWithIcon from '../BAIResourceNumberWithIcon';
 import BAIText from '../BAIText';
-import { BAIColumnsType, BAITable, BAITableProps } from '../Table';
-import BAINameActionCell from '../Table/BAINameActionCell';
+import {
+  BAIColumnsType,
+  BAINameActionCell,
+  BAINameActionCellProps,
+  BAITable,
+  BAITableProps,
+} from '../Table';
 import AllowedVfolderHostsWithPermission from './BAIAllowedVfolderHostsWithPermission';
-import { DeleteFilled, SettingOutlined } from '@ant-design/icons';
 import { Tag } from 'antd';
 import dayjs from 'dayjs';
 import * as _ from 'lodash-es';
-import { BanIcon, UndoIcon } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
 import { graphql, useFragment } from 'react-relay';
 
@@ -38,6 +41,14 @@ export type ProjectInList = NonNullable<
   NonNullable<BAIProjectTableFragment$data>[number]
 >;
 
+export type BAIProjectTableNameColumnActionProps =
+  | BAINameActionCellProps
+  | ((
+      value: any,
+      record: ProjectInList,
+      index: number,
+    ) => BAINameActionCellProps);
+
 export interface BAIProjectTableProps extends Omit<
   BAITableProps<ProjectInList>,
   'dataSource' | 'columns' | 'rowKey' | 'onChangeOrder'
@@ -46,19 +57,21 @@ export interface BAIProjectTableProps extends Omit<
   onChangeOrder?: (
     order: (typeof availableProjectSorterValues)[number] | null,
   ) => void;
-  onClickProjectEditButton: (project: ProjectInList) => void;
-  onClickDeactivateProject: (project: ProjectInList) => Promise<void>;
-  onClickRestoreProject: (project: ProjectInList) => Promise<void>;
-  onClickPurgeProject: (project: ProjectInList) => void;
+  /**
+   * Props forwarded to the `BAINameActionCell` used in the `name` column.
+   * Accepts either a static object or a function receiving the column
+   * render arguments `(value, record, index)` and returning props. The
+   * page composes the per-row action list (edit / deactivate / activate /
+   * purge) here so the action logic stays in the app layer rather than
+   * being injected through individual callback props.
+   */
+  nameColumnActionProps?: BAIProjectTableNameColumnActionProps;
 }
 
 const BAIProjectTable = ({
   projectFragment,
   onChangeOrder,
-  onClickProjectEditButton,
-  onClickDeactivateProject,
-  onClickRestoreProject,
-  onClickPurgeProject,
+  nameColumnActionProps,
   ...tableProps
 }: BAIProjectTableProps) => {
   'use memo';
@@ -93,64 +106,16 @@ const BAIProjectTable = ({
       dataIndex: 'name',
       fixed: 'left',
       sorter: isEnableSorter('name'),
-      render: (_value, record) => {
-        const isModelStore = record.type === 'MODEL_STORE';
+      render: (value, record, index) => {
+        const resolvedProps =
+          typeof nameColumnActionProps === 'function'
+            ? nameColumnActionProps(value, record, index)
+            : nameColumnActionProps;
         return (
           <BAINameActionCell
             title={record.name}
             showActions="always"
-            actions={[
-              {
-                key: 'edit',
-                title: t('comp:BAIProjectTable.EditProject'),
-                icon: <SettingOutlined />,
-                disabled: isModelStore,
-                onClick: () => {
-                  onClickProjectEditButton(record);
-                },
-              },
-              ...(record.is_active
-                ? [
-                    {
-                      key: 'deactivate',
-                      title: t('comp:BAIProjectTable.Deactivate'),
-                      icon: <BanIcon />,
-                      type: 'danger' as const,
-                      disabled: isModelStore,
-                      popConfirm: {
-                        title: t('comp:BAIProjectTable.DeactivateProject'),
-                        description: record.name,
-                        okButtonProps: { danger: true },
-                        okText: t('comp:BAIProjectTable.Deactivate'),
-                        onConfirm: () => onClickDeactivateProject(record),
-                      },
-                    },
-                  ]
-                : [
-                    {
-                      key: 'activate',
-                      title: t('comp:BAIProjectTable.Activate'),
-                      icon: <UndoIcon />,
-                      disabled: isModelStore,
-                      popConfirm: {
-                        title: t('comp:BAIProjectTable.ActivateProject'),
-                        description: record.name,
-                        okText: t('comp:BAIProjectTable.Activate'),
-                        onConfirm: () => onClickRestoreProject(record),
-                      },
-                    },
-                    {
-                      key: 'purge',
-                      title: t('comp:BAIProjectTable.Purge'),
-                      icon: <DeleteFilled />,
-                      type: 'danger' as const,
-                      disabled: isModelStore,
-                      onClick: () => {
-                        onClickPurgeProject(record);
-                      },
-                    },
-                  ]),
-            ]}
+            {...resolvedProps}
           />
         );
       },
diff --git a/packages/backend.ai-ui/src/components/fragments/index.ts b/packages/backend.ai-ui/src/components/fragments/index.ts
@@ -62,7 +62,11 @@ export {
   availableProjectSorterKeys,
   availableProjectSorterValues,
 } from './BAIProjectTable';
-export type { BAIProjectTableProps, ProjectInList } from './BAIProjectTable';
+export type {
+  BAIProjectTableProps,
+  BAIProjectTableNameColumnActionProps,
+  ProjectInList,
+} from './BAIProjectTable';
 export { default as BAIAllowedVfolderHostsWithPermission } from './BAIAllowedVfolderHostsWithPermission';
 export type { BAIAllowedVfolderHostsWithPermissionProps } from './BAIAllowedVfolderHostsWithPermission';
 export { default as BAIAdminContainerRegistrySelect } from './BAIAdminContainerRegistrySelect';
diff --git a/react/src/pages/ProjectPage.tsx b/react/src/pages/ProjectPage.tsx
