feat(FR-2573): migrate VFolder list queries to Strawberry V2 GraphQL API

Migrate AdminVFolderNodeListPage and VFolderNodeListPage, plus VFolderNodesV2
and its child components, from the legacy VirtualFolderNode query path to the
V2 Strawberry VFolder type. AdminVFolderNodeListPage uses adminVfoldersV2,
VFolderNodeListPage uses myVfolders (user-facing: folders accessible to the
current user). Shared modal and button fragments (DeleteVFolderModalV2,
DeleteForeverVFolderModalV2, RestoreVFolderModalV2, BAIVFolderDeleteButton)
are also switched to V2 fields (metadata, accessControl, ownership).

URL state now uses nuqs with structured VFolderFilter/VFolderOrderBy inputs
composed via top-level AND, and convertToOrderBy for sort. isDeletedCategory
accepts both V2 UPPERCASE and legacy kebab-case statuses for backwards
compatibility with the remaining legacy call sites.

Author: ironAiken2

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

@@ -0,0 +1,52 @@
+import { BAIVFolderDeleteButtonV2Fragment$key } from '../../__generated__/BAIVFolderDeleteButtonV2Fragment.graphql';
+import { BAITrashBinIcon } from '../../icons';
+import BAIButton from '../BAIButton';
+import { theme, type ButtonProps } from 'antd';
+import * as _ from 'lodash-es';
+import { graphql, useFragment } from 'react-relay';
+
+export interface BAIVFolderDeleteButtonV2Props extends ButtonProps {
+  vfolderFrgmt: BAIVFolderDeleteButtonV2Fragment$key;
+}
+
+const BAIVFolderDeleteButtonV2 = ({
+  vfolderFrgmt,
+  ...buttonProps
+}: BAIVFolderDeleteButtonV2Props) => {
+  const { token } = theme.useToken();
+  useFragment<BAIVFolderDeleteButtonV2Fragment$key>(
+    graphql`
+      fragment BAIVFolderDeleteButtonV2Fragment on VFolder
+      @relay(plural: true) {
+        id
+      }
+    `,
+    vfolderFrgmt,
+  );
+
+  // TODO(needs-backend): V2 `VFolder` does not expose a per-user action
+  // permission (legacy `VirtualFolderNode.permissions` had `delete_vfolder`).
+  // `accessControl.permission` is a `VFolderMountPermission` enum (RO/RW/
+  // RW_DELETE) describing the mount level, not a user's entity-level action
+  // permission on the folder, so it cannot be used as a gate for delete.
+  // Until a proper permission field is exposed, always treat the button as
+  // enabled and let the backend reject unauthorized requests.
+  const isEnabled = !buttonProps.disabled;
+
+  return (
+    <BAIButton
+      icon={<BAITrashBinIcon />}
+      disabled={buttonProps.disabled}
+      style={{
+        color: isEnabled ? token.colorError : token.colorTextDisabled,
+        backgroundColor: isEnabled
+          ? token.colorErrorBg
+          : token.colorBgContainerDisabled,
+        ...buttonProps.style,
+      }}
+      {..._.omit(buttonProps, ['style', 'disabled'])}
+    />
+  );
+};
+
+export default BAIVFolderDeleteButtonV2;

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

@@ -54,6 +54,7 @@ export type {
   BAIActivateArtifactsModalArtifactsFragmentKey,
 } from './BAIActivateArtifactsModal';
 export { default as BAIVFolderDeleteButton } from './BAIVFolderDeleteButton';
+export { default as BAIVFolderDeleteButtonV2 } from './BAIVFolderDeleteButtonV2';
 export { default as BAIAdminResourceGroupSelect } from './BAIAdminResourceGroupSelect';
 export type { BAIAdminResourceGroupSelectProps } from './BAIAdminResourceGroupSelect';
 export {

react/src/components/DeleteForeverVFolderModalV2.tsx

@@ -36,10 +36,12 @@ const DeleteForeverVFolderModalV2: React.FC<
 
   const vfolders = useFragment(
     graphql`
-      fragment DeleteForeverVFolderModalV2Fragment on VirtualFolderNode
+      fragment DeleteForeverVFolderModalV2Fragment on VFolder
       @relay(plural: true) {
         id
-        name
+        metadata {
+          name
+        }
       }
     `,
     vfolderFrgmts,
@@ -80,7 +82,7 @@ const DeleteForeverVFolderModalV2: React.FC<
           <Typography.Text>
             {purgeable.length === 1
               ? t('data.folders.DeleteForeverDescription', {
-                  folderName: purgeable[0]?.name,
+                  folderName: purgeable[0]?.metadata?.name,
                 })
               : t('data.folders.DeleteForeverMultipleDescription', {
                   folderLength: purgeable.length,
@@ -112,15 +114,17 @@ const DeleteForeverVFolderModalV2: React.FC<
             if (purgedCount === 0) {
               message.error(
                 t('data.folders.FailedToDeleteFolders', {
-                  folderNames: _.map(purgeable, 'name').join(', '),
+                  folderNames: _.map(purgeable, (v) => v?.metadata?.name).join(
+                    ', ',
+                  ),
                 }),
               );
               return;
             }
             if (purgeable.length === 1) {
               message.success(
                 t('data.folders.FolderDeletedForever', {
-                  folderName: purgeable[0]?.name,
+                  folderName: purgeable[0]?.metadata?.name,
                 }),
               );
             } else {

react/src/components/DeleteVFolderModalV2.tsx

@@ -4,9 +4,8 @@
  */
 import { DeleteVFolderModalV2Fragment$key } from '../__generated__/DeleteVFolderModalV2Fragment.graphql';
 import { DeleteVFolderModalV2Mutation } from '../__generated__/DeleteVFolderModalV2Mutation.graphql';
-import { App, Typography, theme } from 'antd';
+import { App, Typography } from 'antd';
 import {
-  BAIAlert,
   BAIFlex,
   BAIModal,
   BAIModalProps,
@@ -32,15 +31,14 @@ const DeleteVFolderModalV2: React.FC<DeleteVFolderModalV2Props> = ({
   const { t } = useTranslation();
   const { message } = App.useApp();
   const { getErrorMessage } = useErrorMessageResolver();
-  const { token } = theme.useToken();
 
   const vfolders = useFragment(
     graphql`
-      fragment DeleteVFolderModalV2Fragment on VirtualFolderNode
-      @relay(plural: true) {
+      fragment DeleteVFolderModalV2Fragment on VFolder @relay(plural: true) {
         id
-        name
-        permissions
+        metadata {
+          name
+        }
       }
     `,
     vfolderFrgmts,
@@ -58,12 +56,13 @@ const DeleteVFolderModalV2: React.FC<DeleteVFolderModalV2Props> = ({
     `,
   );
 
-  const foldersByPermission = _.groupBy(vfolders, (vfolder) => {
-    if (vfolder.permissions?.includes('delete_vfolder')) {
-      return 'deletable';
-    }
-    return 'undeletable';
-  });
+  // TODO(needs-backend): V2 `VFolder` does not expose a per-user action
+  // permission (legacy `VirtualFolderNode.permissions` had `delete_vfolder`).
+  // `accessControl.permission` is a mount-level enum (RO/RW/RW_DELETE), not
+  // an entity-level action permission, so it cannot be used to filter out
+  // undeletable folders here. Send all selected folders and let the backend
+  // reject unauthorized ones until a proper permission field is exposed.
+  const folders = vfolders ?? [];
 
   return (
     <BAIModal
@@ -73,12 +72,11 @@ const DeleteVFolderModalV2: React.FC<DeleteVFolderModalV2Props> = ({
       okButtonProps={{ danger: true }}
       onCancel={() => onRequestClose?.(false)}
       onOk={() => {
-        const deletable = foldersByPermission.deletable ?? [];
-        if (deletable.length === 0) {
+        if (folders.length === 0) {
           onRequestClose?.(false);
           return;
         }
-        const ids = _.map(deletable, (vfolder) => toLocalId(vfolder.id));
+        const ids = _.map(folders, (vfolder) => toLocalId(vfolder.id));
         commitBulkDeleteMutation({
           variables: { input: { ids } },
           onCompleted: (data, errors) => {
@@ -91,22 +89,24 @@ const DeleteVFolderModalV2: React.FC<DeleteVFolderModalV2Props> = ({
             if (deletedCount === 0) {
               message.error(
                 t('data.folders.FailedToDeleteFolders', {
-                  folderNames: _.map(deletable, 'name').join(', '),
+                  folderNames: _.map(folders, (v) => v?.metadata?.name).join(
+                    ', ',
+                  ),
                 }),
               );
               return;
             }
-            if (deletable.length === 1) {
+            if (folders.length === 1) {
               message.success(
                 t('data.folders.FolderDeleted', {
-                  folderName: deletable[0]?.name,
+                  folderName: folders[0]?.metadata?.name,
                 }),
               );
             } else {
               message.success(
                 t('data.folders.MultipleFolderDeleted', {
                   count: deletedCount,
-                  total: deletable.length,
+                  total: folders.length,
                 }),
               );
             }
@@ -120,37 +120,13 @@ const DeleteVFolderModalV2: React.FC<DeleteVFolderModalV2Props> = ({
       {...baiModalProps}
     >
       <BAIFlex direction="column" gap={'sm'} align="stretch">
-        {vfolders &&
-          vfolders.length !== foldersByPermission.deletable?.length && (
-            <BAIAlert
-              showIcon
-              ghostInfoBg={false}
-              title={t('data.folders.ExcludedFolders', {
-                count: foldersByPermission.undeletable?.length || 0,
-              })}
-              description={
-                <ul
-                  style={{
-                    margin: 0,
-                    padding: 0,
-                    paddingTop: token.paddingXXS,
-                    listStyle: 'circle',
-                  }}
-                >
-                  {_.map(foldersByPermission.undeletable, (vfolder) => (
-                    <li key={vfolder.id}>{vfolder.name}</li>
-                  ))}
-                </ul>
-              }
-            />
-          )}
         <Typography.Text>
-          {foldersByPermission.deletable?.length === 1
+          {folders.length === 1
             ? t('data.folders.MoveToTrashDescription', {
-                folderName: foldersByPermission.deletable?.[0]?.name,
+                folderName: folders[0]?.metadata?.name,
               })
             : t('data.folders.MoveToTrashMultipleDescription', {
-                folderLength: foldersByPermission.deletable?.length,
+                folderLength: folders.length,
               })}
         </Typography.Text>
       </BAIFlex>

react/src/components/RestoreVFolderModalV2.tsx

@@ -35,10 +35,11 @@ const RestoreVFolderModalV2: React.FC<RestoreVFolderModalV2Props> = ({
 
   const vfolders = useFragment(
     graphql`
-      fragment RestoreVFolderModalV2Fragment on VirtualFolderNode
-      @relay(plural: true) {
+      fragment RestoreVFolderModalV2Fragment on VFolder @relay(plural: true) {
         id
-        name
+        metadata {
+          name
+        }
       }
     `,
     vfolderFrgmts,
@@ -95,7 +96,7 @@ const RestoreVFolderModalV2: React.FC<RestoreVFolderModalV2Props> = ({
             if (vfolders?.length === 1) {
               message.success(
                 t('data.folders.FolderRestored', {
-                  folderName: vfolders?.[0]?.name,
+                  folderName: vfolders?.[0]?.metadata?.name,
                 }),
               );
             } else {
@@ -114,7 +115,7 @@ const RestoreVFolderModalV2: React.FC<RestoreVFolderModalV2Props> = ({
       <Typography.Text>
         {vfolders?.length === 1
           ? t('data.folders.RestoreDescription', {
-              folderName: vfolders?.[0]?.name,
+              folderName: vfolders?.[0]?.metadata?.name,
             })
           : t('data.folders.RestoreMultipleDescription', {
               folderLength: vfolders?.length,