feat(FR-1655): migrate SFTP server launch feature to React

react/src/components/ComputeSessionNodeItems/SessionActionButtons.tsx

@@ -256,7 +256,9 @@ const SessionActionButtons: React.FC<SessionActionButtonsProps> = ({
           <Tooltip title={t('data.explorer.RunSSH/SFTPserver')}>
             <Button
               type="primary"
-              disabled={!isActive(session) || !isOwner}
+              disabled={
+                !isAppSupported(session) || !isActive(session) || !isOwner
+              }
               size={size}
               icon={<BAISftpIcon />}
               onClick={() => {

react/src/components/FileBrowserButton.tsx

@@ -1,31 +1,54 @@
 import { PrimaryAppOption } from './ComputeSessionNodeItems/SessionActionButtons';
-import { App, ButtonProps, Image, Tooltip } from 'antd';
-import { BAIButton, useErrorMessageResolver } from 'backend.ai-ui';
+import { App, Image, Tooltip } from 'antd';
+import {
+  BAIButton,
+  BAIButtonProps,
+  useErrorMessageResolver,
+} from 'backend.ai-ui';
+import _ from 'lodash';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { graphql, useFragment } from 'react-relay';
 import { FileBrowserButtonFragment$key } from 'src/__generated__/FileBrowserButtonFragment.graphql';
-import { useDefaultFileBrowserImageWithFallback } from 'src/hooks/useDefaultFileBrowserImageWithFallback';
+import { useCurrentDomainValue, useSuspendedBackendaiClient } from 'src/hooks';
+import { useSetBAINotification } from 'src/hooks/useBAINotification';
+import { useCurrentProjectValue } from 'src/hooks/useCurrentProject';
+import { useDefaultFileBrowserImageWithFallback } from 'src/hooks/useDefaultImagesWithFallback';
+import { useMergedAllowedStorageHostPermission } from 'src/hooks/useMergedAllowedStorageHostPermission';
 import {
+  startSessionErrorCodes,
   StartSessionWithDefaultValue,
   useStartSession,
 } from 'src/hooks/useStartSession';
 
-interface FileBrowserButtonProps extends ButtonProps {
+interface FileBrowserButtonProps extends BAIButtonProps {
   showTitle?: boolean;
   vfolderFrgmt: FileBrowserButtonFragment$key;
 }
 const FileBrowserButton: React.FC<FileBrowserButtonProps> = ({
   showTitle = true,
   vfolderFrgmt,
+  ...buttonProps
 }) => {
   'use memo';
   const { t } = useTranslation();
   const { message, modal } = App.useApp();
 
+  const baiClient = useSuspendedBackendaiClient();
+  const currentDomain = useCurrentDomainValue();
+  const currentProject = useCurrentProjectValue();
+  const currentUserAccessKey = baiClient?._config?.accessKey;
+  const { unitedAllowedPermissionByVolume } =
+    useMergedAllowedStorageHostPermission(
+      currentDomain,
+      currentProject.id,
+      currentUserAccessKey,
+    );
+
   const { getErrorMessage } = useErrorMessageResolver();
   const { startSessionWithDefault, upsertSessionNotification } =
     useStartSession();
+  const { upsertNotification } = useSetBAINotification();
 
   const filebrowserImage = useDefaultFileBrowserImageWithFallback();
 
@@ -34,21 +57,29 @@ const FileBrowserButton: React.FC<FileBrowserButtonProps> = ({
       fragment FileBrowserButtonFragment on VirtualFolderNode {
         id
         row_id
+        host
       }
     `,
     vfolderFrgmt,
   );
 
+  const hasAccessPermission = _.includes(
+    unitedAllowedPermissionByVolume[vfolder?.host ?? ''],
+    'mount-in-session',
+  );
+
+  const getTooltipTitle = () => {
+    if (!hasAccessPermission) {
+      return t('data.explorer.NoPermissionToMountFolder');
+    } else if (filebrowserImage === null) {
+      return t('data.explorer.NoImagesSupportingFileBrowser');
+    } else if (!showTitle && filebrowserImage) {
+      return t('data.explorer.ExecuteFileBrowser');
+    } else return '';
+  };
+
   return (
-    <Tooltip
-      title={
-        filebrowserImage === null
-          ? t('data.explorer.NoImagesSupportingFileBrowser')
-          : !showTitle &&
-            filebrowserImage &&
-            t('data.explorer.ExecuteFileBrowser')
-      }
-    >
+    <Tooltip title={getTooltipTitle()}>
       <BAIButton
         icon={
           <Image
@@ -65,7 +96,7 @@ const FileBrowserButton: React.FC<FileBrowserButtonProps> = ({
             }
           />
         }
-        disabled={!filebrowserImage}
+        disabled={!filebrowserImage || !hasAccessPermission}
         action={async () => {
           if (!filebrowserImage) {
             return;
@@ -100,17 +131,30 @@ const FileBrowserButton: React.FC<FileBrowserButtonProps> = ({
               }
               if (results?.rejected && results.rejected.length > 0) {
                 const error = results.rejected[0].reason;
-                modal.error({
-                  title: error?.title,
-                  content: getErrorMessage(error),
-                });
+                if (
+                  _.includes(
+                    error.message,
+                    startSessionErrorCodes.DUPLICATED_SESSION,
+                  )
+                ) {
+                  upsertNotification({
+                    key: `filebrowser-${vfolder.row_id}`,
+                    open: true,
+                  });
+                } else {
+                  modal.error({
+                    title: error?.title,
+                    content: getErrorMessage(error),
+                  });
+                }
               }
             })
             .catch((error) => {
               console.error('Unexpected error during session creation:', error);
               message.error(t('error.UnexpectedError'));
             });
         }}
+        {...buttonProps}
       >
         {showTitle && t('data.explorer.ExecuteFileBrowser')}
       </BAIButton>

react/src/components/FolderExplorerHeader.tsx

@@ -1,28 +1,26 @@
 import { FolderExplorerHeaderFragment$key } from '../__generated__/FolderExplorerHeaderFragment.graphql';
 import EditableVFolderName from './EditableVFolderName';
+import ErrorBoundaryWithNullFallback from './ErrorBoundaryWithNullFallback';
 import FileBrowserButton from './FileBrowserButton';
+import SFTPServerButton from './SFTPServerButton';
 import VFolderNodeIdenticon from './VFolderNodeIdenticon';
-import { Button, Tooltip, Image, Grid, theme, Typography } from 'antd';
+import { theme, Typography, Skeleton, Grid } from 'antd';
 import { BAIFlex } from 'backend.ai-ui';
 import _ from 'lodash';
-import React, { Ref } from 'react';
-import { useTranslation } from 'react-i18next';
+import React, { Suspense } from 'react';
 import { graphql, useFragment } from 'react-relay';
 
 interface FolderExplorerHeaderProps {
   vfolderNodeFrgmt?: FolderExplorerHeaderFragment$key | null;
-  folderExplorerRef: Ref<HTMLDivElement>;
   titleStyle?: React.CSSProperties;
 }
 
 const FolderExplorerHeader: React.FC<FolderExplorerHeaderProps> = ({
   vfolderNodeFrgmt,
-  folderExplorerRef,
   titleStyle,
 }) => {
   'use memo';
 
-  const { t } = useTranslation();
   const { token } = theme.useToken();
   const { lg } = Grid.useBreakpoint();
 
@@ -38,6 +36,7 @@ const FolderExplorerHeader: React.FC<FolderExplorerHeaderProps> = ({
         ...VFolderNodeIdenticonFragment
         ...EditableVFolderNameFragment
         ...FileBrowserButtonFragment
+        ...SFTPServerButtonFragment
       }
     `,
     vfolderNodeFrgmt,
@@ -99,28 +98,15 @@ const FolderExplorerHeader: React.FC<FolderExplorerHeaderProps> = ({
         justify="end"
         gap={token.marginSM}
       >
-        {!vfolderNode?.unmanaged_path && vfolderNode ? (
-          <>
-            <FileBrowserButton vfolderFrgmt={vfolderNode} showTitle={lg} />
-            <Tooltip title={!lg && t('data.explorer.RunSSH/SFTPserver')}>
-              <Button
-                icon={
-                  <Image
-                    width="18px"
-                    src="/resources/icons/sftp.png"
-                    alt="SSH / SFTP"
-                    preview={false}
-                  />
-                }
-                onClick={() => {
-                  // @ts-ignore
-                  folderExplorerRef.current?._executeSSHProxyAgent();
-                }}
-              >
-                {lg && t('data.explorer.RunSSH/SFTPserver')}
-              </Button>
-            </Tooltip>
-          </>
+        {vfolderNode && !vfolderNode?.unmanaged_path ? (
+          <Suspense fallback={<Skeleton.Button active />}>
+            <ErrorBoundaryWithNullFallback>
+              <FileBrowserButton vfolderFrgmt={vfolderNode} showTitle={lg} />
+            </ErrorBoundaryWithNullFallback>
+            <ErrorBoundaryWithNullFallback>
+              <SFTPServerButton vfolderFrgmt={vfolderNode} showTitle={lg} />
+            </ErrorBoundaryWithNullFallback>
+          </Suspense>
         ) : null}
       </BAIFlex>
     </BAIFlex>

react/src/components/FolderExplorerModal.tsx

@@ -160,7 +160,6 @@ const FolderExplorerModal: React.FC<FolderExplorerProps> = ({
               zIndex: token.zIndexPopupBase + 2,
             }}
             vfolderNodeFrgmt={vfolder_node}
-            folderExplorerRef={folderExplorerRef}
           />
         ) : null
       }