feat(FR-2915): add showOpen/showCreate/showRefresh buttons to BAIVFolderSelect

Author: agatha197

packages/backend.ai-ui/src/components/fragments/BAIVFolderSelect.stories.tsx

@@ -111,6 +111,9 @@ const meta: Meta<typeof BAIVFolderSelect> = {
 | \`filter\` | \`string\` | - | Additional filter string for vfolder query |
 | \`valuePropName\` | \`'id' \\| 'row_id'\` | \`'id'\` | Which field to use as option value |
 | \`excludeDeleted\` | \`boolean\` | \`false\` | Exclude deleted or deleting vfolders |
+| \`showOpenButton\` | \`boolean\` | \`false\` | Show button that opens the selected folder in the explorer |
+| \`showCreateButton\` | \`boolean\` | \`false\` | Show button that opens \`FolderCreateModalV2\` to create a new folder |
+| \`showRefreshButton\` | \`boolean\` | \`false\` | Show button that re-fetches the vfolder list |
 | \`ref\` | \`React.Ref<BAIVFolderSelectRef>\` | - | Ref exposing \`refetch()\` method |
 
 ## Features
@@ -254,6 +257,31 @@ For all other props, refer to [BAISelect](/?path=/docs/components-input-baiselec
         defaultValue: { summary: 'false' },
       },
     },
+    showOpenButton: {
+      control: { type: 'boolean' },
+      description: 'Show button that opens the selected folder in the explorer',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: 'false' },
+      },
+    },
+    showCreateButton: {
+      control: { type: 'boolean' },
+      description:
+        'Show button that opens FolderCreateModalV2 to create a new folder',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: 'false' },
+      },
+    },
+    showRefreshButton: {
+      control: { type: 'boolean' },
+      description: 'Show button that re-fetches the vfolder list',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: 'false' },
+      },
+    },
     placeholder: {
       control: { type: 'text' },
       description: 'Placeholder text when no value is selected',
@@ -418,6 +446,41 @@ export const WithClickableNames: Story = {
   ),
 };
 
+/**
+ * Select with the open, create, and refresh action buttons enabled.
+ */
+export const WithActionButtons: Story = {
+  name: 'WithActionButtons',
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Demonstrates `showOpenButton`, `showCreateButton`, and `showRefreshButton`. The open button writes a `folder` query param via `react-router-dom`. The create button opens the project `FolderCreateModalV2`. The refresh button re-fetches the paginated list.',
+      },
+    },
+  },
+  args: {
+    allowClear: true,
+    showOpenButton: true,
+    showCreateButton: true,
+    showRefreshButton: true,
+  },
+  render: (args) => (
+    <VFolderRelayResolver
+      mockResolvers={{
+        Query: () => ({
+          vfolder_nodes: {
+            count: 5,
+            edges: sampleVFolders,
+          },
+        }),
+      }}
+    >
+      <BAIVFolderSelect {...args} style={{ width: '400px' }} />
+    </VFolderRelayResolver>
+  ),
+};
+
 /**
  * Select using row_id instead of global ID.
  */

packages/backend.ai-ui/src/components/fragments/BAIVFolderSelect.tsx

@@ -1,17 +1,21 @@
+import FolderCreateModalV2 from '../../../../../react/src/components/FolderCreateModalV2';
 import { BAIVFolderSelectPaginatedQuery } from '../../__generated__/BAIVFolderSelectPaginatedQuery.graphql';
 import { BAIVFolderSelectValueQuery } from '../../__generated__/BAIVFolderSelectValueQuery.graphql';
 import { toLocalId } from '../../helper';
 import useDebouncedDeferredValue from '../../helper/useDebouncedDeferredValue';
 import { useFetchKey } from '../../hooks';
 import { useLazyPaginatedQuery } from '../../hooks/usePaginatedQuery';
+import BAIFlex from '../BAIFlex';
 import BAILink from '../BAILink';
 import { mergeFilterValues } from '../BAIPropertyFilter';
 import BAISelect, { BAISelectProps } from '../BAISelect';
 import BAIText from '../BAIText';
 import TotalFooter from '../TotalFooter';
+import { ReloadOutlined } from '@ant-design/icons';
 import { useControllableValue } from 'ahooks';
-import { GetRef, Skeleton } from 'antd';
+import { Button, GetRef, Skeleton, Space, Tooltip } from 'antd';
 import * as _ from 'lodash-es';
+import { FolderOpenIcon, PlusIcon } from 'lucide-react';
 import {
   useDeferredValue,
   useEffect,
@@ -23,6 +27,7 @@ import {
 } from 'react';
 import { useTranslation } from 'react-i18next';
 import { graphql, useLazyLoadQuery } from 'react-relay';
+import { useSearchParams } from 'react-router-dom';
 
 export type VFolderNode = NonNullable<
   NonNullable<
@@ -44,6 +49,9 @@ export interface BAIVFolderSelectProps extends Omit<
   valuePropName?: 'id' | 'row_id';
   excludeDeleted?: boolean;
   onResolvedNamesChange?: (nameMap: Record<string, string>) => void;
+  showOpenButton?: boolean;
+  showCreateButton?: boolean;
+  showRefreshButton?: boolean;
   ref?: React.Ref<BAIVFolderSelectRef>;
 }
 
@@ -59,13 +67,18 @@ const BAIVFolderSelect: React.FC<BAIVFolderSelectProps> = ({
   excludeDeleted,
   valuePropName = 'id',
   onResolvedNamesChange,
+  showOpenButton,
+  showCreateButton,
+  showRefreshButton,
   ref,
   labelRender: userLabelRender,
   ...selectProps
 }) => {
   'use memo';
   const { t } = useTranslation();
   const selectRef = useRef<GetRef<typeof BAISelect>>(null);
+  const [, setSearchParams] = useSearchParams();
+  const [isOpenCreateModal, setIsOpenCreateModal] = useState(false);
   const [controllableValue, setControllableValue] = useControllableValue<
     string | string[] | undefined
   >(selectProps);
@@ -261,7 +274,13 @@ const BAIVFolderSelect: React.FC<BAIVFolderSelectProps> = ({
     controllableValueWithLabel,
   );
 
-  return (
+  const hasActionButton =
+    showOpenButton || showCreateButton || showRefreshButton;
+  const singleValueForOpen = _.toString(
+    _.isArray(controllableValue) ? controllableValue[0] : controllableValue,
+  );
+
+  const baiSelectElement = (
     <BAISelect
       ref={selectRef}
       placeholder={t('comp:BAIVFolderSelect.SelectFolder')}
@@ -392,6 +411,79 @@ const BAIVFolderSelect: React.FC<BAIVFolderSelectProps> = ({
       }
     />
   );
+
+  if (!hasActionButton) {
+    return baiSelectElement;
+  }
+
+  return (
+    <BAIFlex direction="row" gap="xs">
+      {baiSelectElement}
+      <Space.Compact>
+        {showOpenButton ? (
+          <Tooltip title={t('comp:BAIVFolderSelect.OpenFolder')}>
+            <Button
+              icon={<FolderOpenIcon />}
+              disabled={!singleValueForOpen}
+              onClick={() => {
+                const folderId =
+                  valuePropName === 'id'
+                    ? toLocalId(singleValueForOpen)
+                    : singleValueForOpen;
+                if (folderId) {
+                  setSearchParams(
+                    (prev) => {
+                      prev.set('folder', folderId);
+                      return prev;
+                    },
+                    { replace: false },
+                  );
+                }
+              }}
+            />
+          </Tooltip>
+        ) : null}
+        {showCreateButton ? (
+          <Tooltip title={t('comp:BAIVFolderSelect.CreateANewStorageFolder')}>
+            <Button
+              icon={<PlusIcon />}
+              variant="text"
+              onClick={() => {
+                setIsOpenCreateModal(true);
+              }}
+            />
+          </Tooltip>
+        ) : null}
+        {showRefreshButton ? (
+          <Tooltip title={t('comp:BAIVFolderSelect.Refresh')}>
+            <Button
+              icon={<ReloadOutlined />}
+              variant="text"
+              onClick={() => {
+                startRefetchTransition(() => {
+                  updateFetchKey();
+                });
+              }}
+            />
+          </Tooltip>
+        ) : null}
+      </Space.Compact>
+      {showCreateButton ? (
+        <FolderCreateModalV2
+          open={isOpenCreateModal}
+          initialValues={{ usage_mode: 'model' }}
+          onRequestClose={(result) => {
+            setIsOpenCreateModal(false);
+            if (result) {
+              startRefetchTransition(() => {
+                updateFetchKey();
+              });
+            }
+          }}
+        />
+      ) : null}
+    </BAIFlex>
+  );
 };
 
 export default BAIVFolderSelect;

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

@@ -310,6 +310,9 @@
     "SelectUser": "Benutzer auswählen"
   },
   "comp:BAIVFolderSelect": {
+    "CreateANewStorageFolder": "Erstellen Sie einen neuen Speicherordner",
+    "OpenFolder": "Zum Ordner gehen",
+    "Refresh": "Aktualisierung",
     "SelectFolder": "Ordner auswählen"
   },
   "comp:FileExplorer": {

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

@@ -310,6 +310,9 @@
     "SelectUser": "Επιλογή χρήστη"
   },
   "comp:BAIVFolderSelect": {
+    "CreateANewStorageFolder": "Δημιουργήστε έναν νέο φάκελο αποθήκευσης",
+    "OpenFolder": "Μετάβαση στον φάκελο",
+    "Refresh": "Φρεσκάρω",
     "SelectFolder": "Επιλογή φακέλου"
   },
   "comp:FileExplorer": {

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

@@ -316,6 +316,9 @@
     "SelectUser": "Select User"
   },
   "comp:BAIVFolderSelect": {
+    "CreateANewStorageFolder": "Create a new storage folder",
+    "OpenFolder": "Open Folder",
+    "Refresh": "Refresh",
     "SelectFolder": "Select Folder"
   },
   "comp:FileExplorer": {

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

@@ -310,6 +310,9 @@
     "SelectUser": "Seleccionar usuario"
   },
   "comp:BAIVFolderSelect": {
+    "CreateANewStorageFolder": "Crear una nueva carpeta de almacenamiento",
+    "OpenFolder": "Ir a la carpeta",
+    "Refresh": "Actualizar",
     "SelectFolder": "Seleccionar carpeta"
   },
   "comp:FileExplorer": {

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

@@ -310,6 +310,9 @@
     "SelectUser": "Valitse käyttäjä"
   },
   "comp:BAIVFolderSelect": {
+    "CreateANewStorageFolder": "Luo uusi tallennuskansio",
+    "OpenFolder": "Siirry kansioon",
+    "Refresh": "Päivitä",
     "SelectFolder": "Valitse kansio"
   },
   "comp:FileExplorer": {

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

@@ -310,6 +310,9 @@
     "SelectUser": "Sélectionner un utilisateur"
   },
   "comp:BAIVFolderSelect": {
+    "CreateANewStorageFolder": "Créer un nouveau dossier de stockage",
+    "OpenFolder": "Aller au dossier",
+    "Refresh": "Rafraîchir",
     "SelectFolder": "Sélectionner un dossier"
   },
   "comp:FileExplorer": {

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

@@ -310,6 +310,9 @@
     "SelectUser": "Pilih Pengguna"
   },
   "comp:BAIVFolderSelect": {
+    "CreateANewStorageFolder": "Buat folder penyimpanan baru",
+    "OpenFolder": "Buka folder",
+    "Refresh": "Segarkan",
     "SelectFolder": "Pilih Folder"
   },
   "comp:FileExplorer": {

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

@@ -310,6 +310,9 @@
     "SelectUser": "Seleziona utente"
   },
   "comp:BAIVFolderSelect": {
+    "CreateANewStorageFolder": "Crea una nuova cartella di archiviazione",
+    "OpenFolder": "Vai alla cartella",
+    "Refresh": "ricaricare",
     "SelectFolder": "Seleziona cartella"
   },
   "comp:FileExplorer": {