fix(FR-2824): move CSV export to BAITable bottom-right in resource policy lists (#7366)

ironAiken2 · ironAiken2 · commit 496ceb98fa6a · 2026-05-15T05:54:12.000Z
Resolves #7366 (FR-2824) ## Summary Migrate the resource-policy lists (Keypair / User / Project) from the legacy `pagination.extraContent` + `TableColumnsSettingModal` column-settings setup to the canonical `BAITable` `tableSettings` prop, so the footer renders the same `[total, pagination, page size, ⚙ column-settings, ⋮ export]` order as the rest of the app (`UserManagement`, `AutoScalingRuleList`, etc.). ## Background The earlier version of this PR added `exportSettings` to `BAITable` for the CSV-export ⋮ menu, but kept the legacy `pagination.extraContent` button rendering a separate ⚙ column-settings icon. Because `extraContent` is appended after `exportSettings`, the footer ended up as `[..., ⋮ export, ⚙ column-settings]` — opposite of every other table in the app. Reviewer pointed out the inconsistency. ## Changes For each of `react/src/components/{KeypairResourcePolicyList,UserResourcePolicyList,ProjectResourcePolicyList}.tsx`: - Removed `useHiddenColumnKeysSetting` + `TableColumnsSettingModal` + the `useToggle()` modal state. - Removed the `pagination.extraContent` ⚙ button. - Removed manual `_.filter(columns, …hiddenColumnKeys…)` column filtering. - Added `useBAISettingUserState('table_column_overrides.<ListName>')` to source `columnOverrides` / `setColumnOverrides`. - Passed them to `BAITable` via `tableSettings={{ columnOverrides, onColumnOverridesChange }}` (matches `UserManagement.tsx:487` exactly). - Kept the already-added `exportSettings={{ supportedFields, onExport }}`. `BAITable` then renders the canonical footer ordering automatically. ## Test plan - [ ] Open **Resource Policy → Keypair Resource Policy** tab. Footer shows `[total, pagination, page size, ⚙, ⋮]`. Click ⚙ to toggle column visibility — state persists across reloads (BAI user-state). Click ⋮ → ExportCSV — downloads with the visible columns. - [ ] Repeat for **User Resource Policy** tab. - [ ] Repeat for **Project Resource Policy** tab. - [ ] `bash scripts/verify.sh` — Relay / Lint / Format / TypeScript pass for the modified files (pre-existing TS errors in unrelated files remain). 🤖 Generated with [Claude Code](https://claude.com/claude-code)
diff --git a/react/src/components/KeypairResourcePolicyList.tsx b/react/src/components/KeypairResourcePolicyList.tsx
@@ -12,19 +12,17 @@ import { KeypairResourcePolicySettingModalFragment$key } from '../__generated__/
 import { localeCompare, numberSorterWithInfinityValue } from '../helper';
 import { SIGNED_32BIT_MAX_INT } from '../helper/const-vars';
 import { exportCSVWithFormattingRules } from '../helper/csv-util';
-import { useHiddenColumnKeysSetting } from '../hooks/useHiddenColumnKeysSetting';
+import { useBAISettingUserState } from '../hooks/useBAISetting';
 import KeypairResourcePolicyInfoModal from './KeypairResourcePolicyInfoModal';
 import KeypairResourcePolicySettingModal from './KeypairResourcePolicySettingModal';
-import TableColumnsSettingModal from './TableColumnsSettingModal';
 import {
   DeleteFilled,
   InfoCircleOutlined,
   PlusOutlined,
   ReloadOutlined,
   SettingOutlined,
 } from '@ant-design/icons';
-import { useToggle } from 'ahooks';
-import { App, Button, Dropdown, Tooltip } from 'antd';
+import { App, Button, Tooltip } from 'antd';
 import { AnyObject } from 'antd/es/_util/type';
 import type { ColumnsType, ColumnType } from 'antd/es/table';
 import {
@@ -38,7 +36,6 @@ import {
   BAIDeleteConfirmModal,
 } from 'backend.ai-ui';
 import * as _ from 'lodash-es';
-import { EllipsisIcon } from 'lucide-react';
 import React, { Suspense, useState, useTransition } from 'react';
 import { useTranslation } from 'react-i18next';
 import { graphql, useLazyLoadQuery, useMutation } from 'react-relay';
@@ -58,8 +55,6 @@ const KeypairResourcePolicyList: React.FC<KeypairResourcePolicyListProps> = (
   const [keypairResourcePolicyFetchKey, updateKeypairResourcePolicyFetchKey] =
     useUpdatableState('initial-fetch');
   const [isRefetchPending, startRefetchTransition] = useTransition();
-  const [visibleColumnSettingModal, { toggle: toggleColumnSettingModal }] =
-    useToggle();
   const [isCreatingPolicySetting, setIsCreatingPolicySetting] = useState(false);
   const [editingKeypairResourcePolicy, setEditingKeypairResourcePolicy] =
     useState<KeypairResourcePolicySettingModalFragment$key | null>();
@@ -263,21 +258,28 @@ const KeypairResourcePolicyList: React.FC<KeypairResourcePolicyListProps> = (
     },
   ]);
 
-  const [hiddenColumnKeys, setHiddenColumnKeys] = useHiddenColumnKeysSetting(
-    'KeypairResourcePolicyList',
+  const [columnOverrides, setColumnOverrides] = useBAISettingUserState(
+    'table_column_overrides.KeypairResourcePolicyList',
   );
 
-  const handleExportCSV = () => {
+  const supportedFields = _.compact(
+    _.map(columns, (column) => _.toString(column.key)),
+  );
+
+  const handleExportCSV = (selectedExportKeys: string[]) => {
+    if (selectedExportKeys.length === 0) {
+      message.error(t('resourcePolicy.NoDataToExport'));
+      return;
+    }
     if (!keypair_resource_policies) {
       message.error(t('resourcePolicy.NoDataToExport'));
       return;
     }
 
-    const columnKeys = _.map(columns, (column) => _.toString(column.key));
     const responseData = _.map(keypair_resource_policies, (policy) => {
       return _.pick(
         policy,
-        columnKeys.map((key) => key as keyof KeypairResourcePolicies),
+        selectedExportKeys.map((key) => key as keyof KeypairResourcePolicies),
       );
     });
 
@@ -301,91 +303,47 @@ const KeypairResourcePolicyList: React.FC<KeypairResourcePolicyListProps> = (
   return (
     <BAIFlex direction="column" align="stretch" gap="sm" {...props}>
       <BAIFlex direction="row" justify="end" wrap="wrap" gap={'xs'}>
-        <Dropdown
-          menu={{
-            items: [
-              {
-                key: 'exportCSV',
-                label: t('resourcePolicy.ExportCSV'),
-                onClick: () => {
-                  handleExportCSV();
-                },
-              },
-            ],
-          }}
-          trigger={['click']}
-        >
-          <Button icon={<EllipsisIcon />} />
-        </Dropdown>
-        <BAIFlex
-          direction="row"
-          gap={'xs'}
-          wrap="wrap"
-          style={{ flexShrink: 1 }}
-        >
-          <BAIFlex gap={'xs'}>
-            <Tooltip title={t('button.Refresh')}>
-              <Button
-                icon={<ReloadOutlined />}
-                loading={isRefetchPending}
-                onClick={() => {
-                  startRefetchTransition(() =>
-                    updateKeypairResourcePolicyFetchKey(),
-                  );
-                }}
-              />
-            </Tooltip>
+        <BAIFlex gap={'xs'}>
+          <Tooltip title={t('button.Refresh')}>
             <Button
-              type="primary"
-              icon={<PlusOutlined />}
+              icon={<ReloadOutlined />}
+              loading={isRefetchPending}
               onClick={() => {
-                setIsCreatingPolicySetting(true);
+                startRefetchTransition(() =>
+                  updateKeypairResourcePolicyFetchKey(),
+                );
               }}
-            >
-              {t('button.Create')}
-            </Button>
-          </BAIFlex>
+            />
+          </Tooltip>
+          <Button
+            type="primary"
+            icon={<PlusOutlined />}
+            onClick={() => {
+              setIsCreatingPolicySetting(true);
+            }}
+          >
+            {t('button.Create')}
+          </Button>
         </BAIFlex>
       </BAIFlex>
       <BAITable
-        columns={
-          _.filter(
-            columns,
-            (column) => !_.includes(hiddenColumnKeys, _.toString(column?.key)),
-          ) as ColumnType<AnyObject>[]
-        }
+        columns={columns as ColumnType<AnyObject>[]}
         dataSource={
           keypair_resource_policies as readonly AnyObject[] | undefined
         }
         rowKey="name"
         scroll={{ x: 'max-content' }}
-        pagination={{
-          extraContent: (
-            <Button
-              type="text"
-              icon={<SettingOutlined />}
-              onClick={() => {
-                toggleColumnSettingModal();
-              }}
-            />
-          ),
-        }}
         showSorterTooltip={false}
-      />
-      <TableColumnsSettingModal
-        open={visibleColumnSettingModal}
-        onRequestClose={(values) => {
-          values?.selectedColumnKeys &&
-            setHiddenColumnKeys(
-              _.difference(
-                columns.map((column) => _.toString(column.key)),
-                values?.selectedColumnKeys,
-              ),
-            );
-          toggleColumnSettingModal();
+        tableSettings={{
+          columnOverrides: columnOverrides,
+          onColumnOverridesChange: setColumnOverrides,
+        }}
+        exportSettings={{
+          supportedFields,
+          onExport: async (selectedExportKeys) => {
+            handleExportCSV(selectedExportKeys);
+          },
         }}
-        columns={columns}
-        hiddenColumnKeys={hiddenColumnKeys}
       />
       <Suspense>
         <KeypairResourcePolicySettingModal
diff --git a/react/src/components/ProjectResourcePolicyList.tsx b/react/src/components/ProjectResourcePolicyList.tsx
@@ -15,17 +15,15 @@ import {
 } from '../helper';
 import { exportCSVWithFormattingRules } from '../helper/csv-util';
 import { useSuspendedBackendaiClient } from '../hooks';
-import { useHiddenColumnKeysSetting } from '../hooks/useHiddenColumnKeysSetting';
+import { useBAISettingUserState } from '../hooks/useBAISetting';
 import ProjectResourcePolicySettingModal from './ProjectResourcePolicySettingModal';
-import TableColumnsSettingModal from './TableColumnsSettingModal';
 import {
   DeleteFilled,
   PlusOutlined,
   ReloadOutlined,
   SettingOutlined,
 } from '@ant-design/icons';
-import { useToggle } from 'ahooks';
-import { App, Button, Dropdown, Tooltip } from 'antd';
+import { App, Button, Tooltip } from 'antd';
 import type { ColumnType } from 'antd/es/table';
 import {
   filterOutEmpty,
@@ -38,7 +36,6 @@ import {
 } from 'backend.ai-ui';
 import dayjs from 'dayjs';
 import * as _ from 'lodash-es';
-import { EllipsisIcon } from 'lucide-react';
 import React, { useState, useTransition } from 'react';
 import { useTranslation } from 'react-i18next';
 import { graphql, useLazyLoadQuery, useMutation } from 'react-relay';
@@ -60,8 +57,6 @@ const ProjectResourcePolicyList: React.FC<
   const [projectResourcePolicyFetchKey, updateProjectResourcePolicyFetchKey] =
     useUpdatableState('initial-fetch');
   const [isCreatingPolicySetting, setIsCreatingPolicySetting] = useState(false);
-  const [visibleColumnSettingModal, { toggle: toggleColumnSettingModal }] =
-    useToggle();
   const [editingProjectResourcePolicy, setEditingProjectResourcePolicy] =
     useState<ProjectResourcePolicySettingModalFragment$key | null>();
   const [deletingPolicyName, setDeletingPolicyName] = useState<string | null>(
@@ -190,21 +185,28 @@ const ProjectResourcePolicyList: React.FC<
     },
   ]);
 
-  const [hiddenColumnKeys, setHiddenColumnKeys] = useHiddenColumnKeysSetting(
-    'ProjectResourcePolicyList',
+  const [columnOverrides, setColumnOverrides] = useBAISettingUserState(
+    'table_column_overrides.ProjectResourcePolicyList',
   );
 
-  const handleExportCSV = () => {
+  const supportedFields = _.compact(
+    _.map(columns, (column) => _.toString(column.key)),
+  );
+
+  const handleExportCSV = (selectedExportKeys: string[]) => {
+    if (selectedExportKeys.length === 0) {
+      message.error(t('resourcePolicy.NoDataToExport'));
+      return;
+    }
     if (!project_resource_policies) {
       message.error(t('resourcePolicy.NoDataToExport'));
       return;
     }
 
-    const columnkeys = _.map(columns, (column) => _.toString(column.key));
     const responseData = _.map(project_resource_policies, (policy) => {
       return _.pick(
         policy,
-        columnkeys.map((key) => key as keyof ProjectResourcePolicies),
+        selectedExportKeys.map((key) => key as keyof ProjectResourcePolicies),
       );
     });
     exportCSVWithFormattingRules(
@@ -221,87 +223,45 @@ const ProjectResourcePolicyList: React.FC<
   return (
     <BAIFlex direction="column" align="stretch" gap="sm">
       <BAIFlex direction="row" justify="end" wrap="wrap" gap={'xs'}>
-        <BAIFlex
-          direction="row"
-          gap={'xs'}
-          wrap="wrap"
-          style={{ flexShrink: 1 }}
-        >
-          <Dropdown
-            menu={{
-              items: [
-                {
-                  key: 'exportCSV',
-                  label: t('resourcePolicy.ExportCSV'),
-                  onClick: () => {
-                    handleExportCSV();
-                  },
-                },
-              ],
-            }}
-            trigger={['click']}
-          >
-            <Button icon={<EllipsisIcon />} />
-          </Dropdown>
-          <BAIFlex gap={'xs'}>
-            <Tooltip title={t('button.Refresh')}>
-              <Button
-                icon={<ReloadOutlined />}
-                loading={isRefetchPending}
-                onClick={() => {
-                  startRefetchTransition(() =>
-                    updateProjectResourcePolicyFetchKey(),
-                  );
-                }}
-              />
-            </Tooltip>
+        <BAIFlex gap={'xs'}>
+          <Tooltip title={t('button.Refresh')}>
             <Button
-              type="primary"
-              icon={<PlusOutlined />}
+              icon={<ReloadOutlined />}
+              loading={isRefetchPending}
               onClick={() => {
-                setIsCreatingPolicySetting(true);
+                startRefetchTransition(() =>
+                  updateProjectResourcePolicyFetchKey(),
+                );
               }}
-            >
-              {t('button.Create')}
-            </Button>
-          </BAIFlex>
+            />
+          </Tooltip>
+          <Button
+            type="primary"
+            icon={<PlusOutlined />}
+            onClick={() => {
+              setIsCreatingPolicySetting(true);
+            }}
+          >
+            {t('button.Create')}
+          </Button>
         </BAIFlex>
       </BAIFlex>
       <BAITable
         rowKey="id"
         showSorterTooltip={false}
-        columns={_.filter(
-          columns,
-          (column) => !_.includes(hiddenColumnKeys, _.toString(column?.key)),
-        )}
+        columns={columns}
         dataSource={filterOutNullAndUndefined(project_resource_policies)}
         scroll={{ x: 'max-content' }}
-        pagination={{
-          extraContent: (
-            <Button
-              type="text"
-              icon={<SettingOutlined />}
-              onClick={() => {
-                toggleColumnSettingModal();
-              }}
-            />
-          ),
+        tableSettings={{
+          columnOverrides: columnOverrides,
+          onColumnOverridesChange: setColumnOverrides,
         }}
-      />
-      <TableColumnsSettingModal
-        open={visibleColumnSettingModal}
-        onRequestClose={(values) => {
-          values?.selectedColumnKeys &&
-            setHiddenColumnKeys(
-              _.difference(
-                columns.map((column) => _.toString(column.key)),
-                values?.selectedColumnKeys,
-              ),
-            );
-          toggleColumnSettingModal();
+        exportSettings={{
+          supportedFields,
+          onExport: async (selectedExportKeys) => {
+            handleExportCSV(selectedExportKeys);
+          },
         }}
-        columns={columns}
-        hiddenColumnKeys={hiddenColumnKeys}
       />
       <ProjectResourcePolicySettingModal
         existingPolicyNames={_.map(project_resource_policies, 'name')}
diff --git a/react/src/components/UserResourcePolicyList.tsx b/react/src/components/UserResourcePolicyList.tsx
