feat(FR-1093): migrate file browser function to react

Author: ironAiken2

react/src/components/FolderExplorerHeader.tsx

@@ -1,11 +1,22 @@
 import { FolderExplorerHeaderFragment$key } from '../__generated__/FolderExplorerHeaderFragment.graphql';
 import EditableVFolderName from './EditableVFolderName';
 import VFolderNodeIdenticon from './VFolderNodeIdenticon';
-import { Button, Tooltip, Image, Grid, theme, Typography } from 'antd';
+import { Button, Tooltip, Image, Grid, theme, Typography, App } from 'antd';
 import { BAIFlex } from 'backend.ai-ui';
-import React, { LegacyRef } from 'react';
+import _ from 'lodash';
+import React, { LegacyRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { graphql, useFragment } from 'react-relay';
+import {
+  fetchQuery,
+  graphql,
+  useFragment,
+  useRelayEnvironment,
+} from 'react-relay';
+import { FolderExplorerHeader_ImageQuery } from 'src/__generated__/FolderExplorerHeader_ImageQuery.graphql';
+import { getImageFullName } from 'src/helper';
+import { useSuspendedBackendaiClient } from 'src/hooks';
+import { useStartSession } from 'src/hooks/useStartSession';
+import { SessionLauncherFormValue } from 'src/pages/SessionLauncherPage';
 
 interface FolderExplorerHeaderProps {
   vfolderNodeFrgmt?: FolderExplorerHeaderFragment$key | null;
@@ -18,16 +29,27 @@ const FolderExplorerHeader: React.FC<FolderExplorerHeaderProps> = ({
   folderExplorerRef,
   titleStyle,
 }) => {
+  'use memo';
+
   const { t } = useTranslation();
   const { token } = theme.useToken();
   const { lg } = Grid.useBreakpoint();
+  const { message } = App.useApp();
+
+  const relayEnv = useRelayEnvironment();
+  const baiClient = useSuspendedBackendaiClient();
+  const { startSession, defaultFormValues, upsertSessionNotification } =
+    useStartSession();
+  const [isLoadingToStartFileBrowser, setIsLoadingToStartFileBrowser] =
+    useState(false);
 
   const vfolderNode = useFragment(
     graphql`
       fragment FolderExplorerHeaderFragment on VirtualFolderNode {
         id
         user
         permission
+        row_id @required(action: THROW)
         unmanaged_path @since(version: "25.04.0")
         ...VFolderNameTitleNodeFragment
         ...VFolderNodeIdenticonFragment
@@ -105,10 +127,141 @@ const FolderExplorerHeader: React.FC<FolderExplorerHeaderProps> = ({
                     preview={false}
                   />
                 }
-                onClick={() =>
-                  // @ts-ignore
-                  folderExplorerRef.current?._executeFileBrowser()
-                }
+                loading={isLoadingToStartFileBrowser}
+                onClick={() => {
+                  // FIXME: Currently, file browser filtering by server-side is not supported.
+                  setIsLoadingToStartFileBrowser(true);
+                  fetchQuery<FolderExplorerHeader_ImageQuery>(
+                    relayEnv,
+                    graphql`
+                      query FolderExplorerHeader_ImageQuery(
+                        $installed: Boolean
+                      ) {
+                        images(is_installed: $installed) {
+                          id
+                          name @deprecatedSince(version: "24.12.0")
+                          humanized_name
+                          tag
+                          registry
+                          architecture
+                          digest
+                          installed
+                          resource_limits {
+                            key
+                            min
+                            max
+                          }
+                          labels {
+                            key
+                            value
+                          }
+                          namespace @since(version: "24.12.0")
+                          base_image_name @since(version: "24.12.0")
+                          tags @since(version: "24.12.0") {
+                            key
+                            value
+                          }
+                          version @since(version: "24.12.0")
+                          supported_accelerators
+                        }
+                      }
+                    `,
+                    {
+                      installed: true,
+                    },
+                    {
+                      fetchPolicy: 'store-or-network',
+                    },
+                  )
+                    .toPromise()
+                    .then((response) =>
+                      response?.images?.filter((image) =>
+                        image?.labels?.find(
+                          (label) =>
+                            label?.key === 'ai.backend.service-ports' &&
+                            label?.value?.toLowerCase().includes('filebrowser'),
+                        ),
+                      ),
+                    )
+                    .then((filebrowserImages) => {
+                      if (_.isEmpty(filebrowserImages)) {
+                        message.error(
+                          t('data.explorer.NoImagesSupportingFileBrowser'),
+                        );
+                        setIsLoadingToStartFileBrowser(false);
+                        return;
+                      }
+
+                      const registry = filebrowserImages?.[0]?.registry;
+                      const namespace = filebrowserImages?.[0]?.namespace;
+                      const customizedImageTag = _.find(
+                        filebrowserImages?.[0]?.labels,
+                        (item) =>
+                          item !== null &&
+                          item?.key === 'ai.backend.customized-image.name',
+                      )?.value;
+                      const fileBrowserFormValue: DeepPartial<SessionLauncherFormValue> =
+                        {
+                          sessionName: `filebrowser-${vfolderNode?.row_id.split('-')[0]}`,
+                          sessionType: 'interactive',
+                          // use systemSSHImage if configured and allowed
+                          ...(baiClient._config?.systemSSHImage &&
+                          baiClient._config?.allow_manual_image_name_for_session
+                            ? {
+                                environments: {
+                                  environment: baiClient._config.systemSSHImage,
+                                },
+                              }
+                            : // otherwise use the first image found
+                              {
+                                environments: {
+                                  customizedTag:
+                                    customizedImageTag || undefined,
+                                  environment: `${registry}/${namespace}`,
+                                  image: filebrowserImages?.[0],
+                                  version: getImageFullName(
+                                    filebrowserImages?.[0],
+                                  ),
+                                },
+                              }),
+                          allocationPreset: 'minimum-required',
+                          cluster_mode: 'single-node',
+                          cluster_size: 1,
+                          mount_ids: [
+                            vfolderNode?.row_id?.replaceAll('-', '') || '',
+                          ],
+                          resource: {
+                            cpu: 1,
+                            mem: '0.5g',
+                          },
+                        };
+                      const formValuesForSessionLauncher = _.merge(
+                        {},
+                        defaultFormValues,
+                        fileBrowserFormValue,
+                      ) as SessionLauncherFormValue;
+
+                      startSession(formValuesForSessionLauncher)
+                        .then((results) => {
+                          if (
+                            results?.fulfilled &&
+                            results.fulfilled.length > 0
+                          ) {
+                            upsertSessionNotification(results.fulfilled);
+                          }
+                        })
+                        .catch((error) => {
+                          console.error(
+                            'Unexpected error during session creation:',
+                            error,
+                          );
+                          message.error(t('error.UnexpectedError'));
+                        })
+                        .finally(() => {
+                          setIsLoadingToStartFileBrowser(false);
+                        });
+                    });
+                }}
               >
                 {lg && t('data.explorer.ExecuteFileBrowser')}
               </Button>