feat(FR-2425): add clear-all-selection button to table row selection indicator (#6321)

Author: yomybaby

packages/backend.ai-ui/src/components/BAISelectionLabel.stories.tsx

@@ -0,0 +1,88 @@
+'use memo';
+
+import BAISelectionLabel from './BAISelectionLabel';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { action } from 'storybook/actions';
+
+const meta: Meta<typeof BAISelectionLabel> = {
+  title: 'DataDisplay/BAISelectionLabel',
+  component: BAISelectionLabel,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'padded',
+    docs: {
+      description: {
+        component: `
+**BAISelectionLabel** displays the number of selected items with an optional clear-all button.
+
+## Props
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| \`count\` | \`number\` | — | Number of selected items. Renders nothing when \`count <= 0\`. |
+| \`onClearSelection\` | \`() => void\` | — | Callback when the clear icon is clicked. Icon is hidden when omitted. |
+        `,
+      },
+    },
+  },
+  argTypes: {
+    count: {
+      control: { type: 'number', min: 0, max: 100 },
+      description: 'Number of selected items. Renders nothing when 0.',
+      table: {
+        type: { summary: 'number' },
+      },
+    },
+    onClearSelection: {
+      description:
+        'Callback fired when the clear icon is clicked. Icon is hidden when omitted.',
+      table: {
+        type: { summary: '() => void' },
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof BAISelectionLabel>;
+
+export const Default: Story = {
+  name: 'Basic',
+  args: {
+    count: 3,
+    onClearSelection: action('onClearSelection'),
+  },
+};
+
+export const WithoutClearButton: Story = {
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'When `onClearSelection` is not provided, the clear icon is hidden.',
+      },
+    },
+  },
+  args: {
+    count: 5,
+  },
+};
+
+export const Comparison: Story = {
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Side-by-side comparison: with and without the clear button, and different counts.',
+      },
+    },
+  },
+  render: () => (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
+      <BAISelectionLabel count={1} onClearSelection={action('clear-1')} />
+      <BAISelectionLabel count={10} onClearSelection={action('clear-10')} />
+      <BAISelectionLabel count={99} onClearSelection={action('clear-99')} />
+      <BAISelectionLabel count={5} />
+      <BAISelectionLabel count={0} onClearSelection={action('clear-0')} />
+    </div>
+  ),
+};

packages/backend.ai-ui/src/components/BAISelectionLabel.tsx

@@ -0,0 +1,45 @@
+import { theme, Tooltip, Typography } from 'antd';
+import { CircleXIcon } from 'lucide-react';
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+
+export interface BAISelectionLabelProps {
+  count: number;
+  onClearSelection?: () => void;
+}
+
+const BAISelectionLabel: React.FC<BAISelectionLabelProps> = ({
+  count,
+  onClearSelection,
+}) => {
+  'use memo';
+
+  const { t } = useTranslation();
+  const { token } = theme.useToken();
+
+  if (count <= 0) return null;
+
+  return (
+    <span style={{ display: 'inline-flex', alignItems: 'center', gap: 4 }}>
+      <Typography.Text>{t('general.NSelected', { count })}</Typography.Text>
+      {onClearSelection && (
+        <Tooltip title={t('general.DeselectAll')}>
+          <CircleXIcon
+            size={16}
+            tabIndex={0}
+            role="button"
+            aria-label={t('general.DeselectAll')}
+            style={{
+              cursor: 'pointer',
+              color: token.colorTextSecondary,
+              flexShrink: 0,
+            }}
+            onClick={onClearSelection}
+          />
+        </Tooltip>
+      )}
+    </span>
+  );
+};
+
+export default BAISelectionLabel;

packages/backend.ai-ui/src/components/baiClient/FileExplorer/BAIFileExplorer.tsx

@@ -317,6 +317,7 @@ const BAIFileExplorer: React.FC<BAIFileExplorerProps> = ({
             enableWrite={enableWrite}
             onUpload={(files, currentPath) => onUpload(files, currentPath)}
             onDeleteFilesInBackground={onDeleteFilesInBackground}
+            onClearSelection={() => setSelectedItems([])}
             onRequestClose={(
               success: boolean,
               modifiedItems?: Array<VFolderFile>,

packages/backend.ai-ui/src/components/baiClient/FileExplorer/ExplorerActionControls.tsx

@@ -1,5 +1,6 @@
 import { BAITrashBinIcon } from '../../../icons';
 import BAIFlex from '../../BAIFlex';
+import BAISelectionLabel from '../../BAISelectionLabel';
 import { VFolderFile } from '../../provider/BAIClientProvider/types';
 import CreateDirectoryModal from './CreateDirectoryModal';
 import CreateFileModal from './CreateFileModal';
@@ -40,6 +41,7 @@ interface ExplorerActionControlsProps {
   ) => void;
   onUpload: (files: Array<RcFile>, currentPath: string) => void;
   onDeleteFilesInBackground: DeleteSelectedItemsModalProps['onDeleteFilesInBackground'];
+  onClearSelection?: () => void;
   enableDelete?: boolean;
   enableWrite?: boolean;
   // onClickRefresh?: (key: string) => void;
@@ -51,6 +53,7 @@ const ExplorerActionControls: React.FC<ExplorerActionControlsProps> = ({
   onRequestClose,
   onUpload,
   onDeleteFilesInBackground,
+  onClearSelection,
   enableDelete = false,
   enableWrite = false,
   extra,
@@ -73,9 +76,10 @@ const ExplorerActionControls: React.FC<ExplorerActionControlsProps> = ({
       <BAIFlex gap={'sm'}>
         {selectedFiles.length > 0 && (
           <>
-            {t('general.NSelected', {
-              count: selectedFiles.length,
-            })}
+            <BAISelectionLabel
+              count={selectedFiles.length}
+              onClearSelection={onClearSelection}
+            />
             <Tooltip title={t('general.button.Delete')} placement="topLeft">
               <Button
                 disabled={!enableDelete}

packages/backend.ai-ui/src/components/index.ts

@@ -61,6 +61,8 @@ export type {
 } from './BAIDeleteConfirmModal';
 export { default as BAIButton } from './BAIButton';
 export type { BAIButtonProps } from './BAIButton';
+export { default as BAISelectionLabel } from './BAISelectionLabel';
+export type { BAISelectionLabelProps } from './BAISelectionLabel';
 export { default as BAIFetchKeyButton } from './BAIFetchKeyButton';
 export {
   default as BAIResourceNumberWithIcon,

packages/backend.ai-ui/src/locale/de.json

@@ -359,6 +359,7 @@
     "UnknownError": "Ein unbekannter Fehler ist aufgetreten. \nBitte versuchen Sie es erneut."
   },
   "general": {
+    "DeselectAll": "Alle abwählen",
     "NSelected": "{{count}} ausgewählt",
     "Optional": "Optional",
     "TotalItems": "Total {{total}} Elemente",

packages/backend.ai-ui/src/locale/el.json

@@ -359,6 +359,7 @@
     "UnknownError": "Παρουσιάστηκε ένα άγνωστο σφάλμα. \nΔοκιμάστε ξανά."
   },
   "general": {
+    "DeselectAll": "Αποεπιλογή όλων",
     "NSelected": "{{count}} Επιλεγμένη",
     "Optional": "Προαιρετικό",
     "TotalItems": "Σύνολο {{total}} στοιχεία",

packages/backend.ai-ui/src/locale/en.json

@@ -365,6 +365,7 @@
     "UnknownError": "An unknown error occurred. Please try again."
   },
   "general": {
+    "DeselectAll": "Deselect all",
     "NSelected": "{{count}} selected",
     "Optional": "Optional",
     "TotalItems": "Total {{total}} items",

packages/backend.ai-ui/src/locale/es.json

@@ -359,6 +359,7 @@
     "UnknownError": "Ocurrió un error desconocido. \nPor favor intente de nuevo."
   },
   "general": {
+    "DeselectAll": "Deseleccionar todo",
     "NSelected": "{{count}} seleccionado",
     "Optional": "Opcional",
     "TotalItems": "Total {{total}} elementos",

packages/backend.ai-ui/src/locale/fi.json

@@ -359,6 +359,7 @@
     "UnknownError": "Tapahtui tuntematon virhe. \nYritä uudelleen."
   },
   "general": {
+    "DeselectAll": "Poista kaikki valinnat",
     "NSelected": "{{count}} valittu",
     "Optional": "Valinnainen",
     "TotalItems": "Yhteensä {{total}} kohteet",