feat(FR-1656): enhance file browser session notifications with primary app option

Author: ironAiken2

packages/backend.ai-ui/src/icons/BAIFileBrowserIcon.tsx

@@ -0,0 +1,11 @@
+import { default as logo } from './Filebrowser.svg?react';
+import Icon from '@ant-design/icons';
+import { CustomIconComponentProps } from '@ant-design/icons/lib/components/Icon';
+
+interface BAIFileBrowserIconProps
+  extends Omit<CustomIconComponentProps, 'width' | 'height' | 'fill'> {}
+const BAIFileBrowserIcon: React.FC<BAIFileBrowserIconProps> = (props) => {
+  return <Icon component={logo} {...props} />;
+};
+
+export default BAIFileBrowserIcon;

packages/backend.ai-ui/src/icons/Filebrowser.svg

@@ -41,3 +41,4 @@ export { default as BAIUserUnionIcon } from './BAIUserUnionIcon';
 export { default as BAIHuggingFaceIcon } from './BAIHuggingFaceIcon';
 export { default as BAISftpIcon } from './BAISftpIcon';
 export { default as BAIJupyterIcon } from './BAIJupyterIcon';
+export { default as BAIFileBrowserIcon } from './BAIFileBrowserIcon';

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

@@ -14,6 +14,7 @@ import { Tooltip, Button, theme, Space, ButtonProps } from 'antd';
 import {
   BAIAppIcon,
   BAIContainerCommitIcon,
+  BAIFileBrowserIcon,
   BAIJupyterIcon,
   BAISessionLogIcon,
   BAISftpIcon,
@@ -36,7 +37,7 @@ type SessionActionButtonKey =
   | 'terminate';
 
 export type PrimaryAppOption = {
-  appName: 'jupyter';
+  appName: 'jupyter' | 'filebrowser';
   urlPostfix?: string;
 };
 
@@ -146,44 +147,87 @@ const SessionActionButtons: React.FC<SessionActionButtonsProps> = ({
   return session ? (
     <>
       <Wrapper compact={compact}>
-        {primaryAppOption && primaryAppOption.appName === 'jupyter' && (
-          <Tooltip
-            title={
-              isButtonTitleMode
-                ? undefined
-                : t('session.ExecuteSpecificApp', {
-                    appName: 'Jupyter Notebook',
-                  })
-            }
-          >
-            <Button
-              size={size}
-              type={'primary'}
-              disabled={
-                !isAppSupported(session) || !isActive(session) || !isOwner
-              }
-              icon={<BAIJupyterIcon />}
-              onClick={() => {
-                const appOption = {
-                  'app-name': primaryAppOption.appName,
-                  'session-uuid': session?.row_id,
-                  'url-postfix': primaryAppOption.urlPostfix,
-                };
+        {primaryAppOption && (
+          <>
+            {primaryAppOption.appName === 'jupyter' && (
+              <Tooltip
+                title={
+                  isButtonTitleMode
+                    ? undefined
+                    : t('session.ExecuteSpecificApp', {
+                        appName: 'Jupyter Notebook',
+                      })
+                }
+              >
+                <Button
+                  size={size}
+                  type={'primary'}
+                  disabled={
+                    !isAppSupported(session) || !isActive(session) || !isOwner
+                  }
+                  icon={<BAIJupyterIcon />}
+                  onClick={() => {
+                    const appOption = {
+                      'app-name': primaryAppOption.appName,
+                      'session-uuid': session?.row_id,
+                      'url-postfix': primaryAppOption.urlPostfix,
+                    };
 
-                // @ts-ignore
-                globalThis.appLauncher._runApp(
-                  omitNullAndUndefinedFields(appOption),
-                );
-              }}
-              title={
-                isButtonTitleMode
-                  ? t('session.ExecuteSpecificApp', {
-                      appName: 'Jupyter Notebook',
-                    })
-                  : undefined
-              }
-            />
-          </Tooltip>
+                    // @ts-ignore
+                    globalThis.appLauncher._runApp(
+                      omitNullAndUndefinedFields(appOption),
+                    );
+                  }}
+                  title={
+                    isButtonTitleMode
+                      ? t('session.ExecuteSpecificApp', {
+                          appName: 'Jupyter Notebook',
+                        })
+                      : undefined
+                  }
+                />
+              </Tooltip>
+            )}
+            {primaryAppOption.appName === 'filebrowser' && (
+              <Tooltip
+                title={
+                  isButtonTitleMode
+                    ? undefined
+                    : t('session.ExecuteSpecificApp', {
+                        appName: 'Jupyter Notebook',
+                      })
+                }
+              >
+                <Button
+                  size={size}
+                  type={'primary'}
+                  disabled={
+                    !isAppSupported(session) || !isActive(session) || !isOwner
+                  }
+                  icon={<BAIFileBrowserIcon />}
+                  onClick={() => {
+                    const appOption = {
+                      'app-name': primaryAppOption.appName,
+                      'session-uuid': session?.row_id,
+                      'url-postfix': primaryAppOption.urlPostfix,
+                    };
+
+                    // @ts-ignore
+                    globalThis.appLauncher._runApp(
+                      omitNullAndUndefinedFields(appOption),
+                    );
+                  }}
+                  title={
+                    isButtonTitleMode
+                      ? t('session.ExecuteSpecificApp', {
+                          appName: 'File browser',
+                        })
+                      : undefined
+                  }
+                />
+              </Tooltip>
+            )}
+          </>
         )}
         {isVisible('appLauncher') && (
           <>

react/src/components/ComputeSessionNodeItems/SessionActionButtons.tsx

@@ -1,4 +1,5 @@
 import { FolderExplorerHeaderFragment$key } from '../__generated__/FolderExplorerHeaderFragment.graphql';
+import { PrimaryAppOption } from './ComputeSessionNodeItems/SessionActionButtons';
 import EditableVFolderName from './EditableVFolderName';
 import VFolderNodeIdenticon from './VFolderNodeIdenticon';
 import { Button, Tooltip, Image, Grid, theme, Typography, App } from 'antd';
@@ -218,7 +219,13 @@ const FolderExplorerHeader: React.FC<FolderExplorerHeaderProps> = ({
                             results?.fulfilled &&
                             results.fulfilled.length > 0
                           ) {
-                            upsertSessionNotification(results.fulfilled);
+                            upsertSessionNotification(results.fulfilled, [
+                              {
+                                extraData: {
+                                  appName: 'filebrowser',
+                                } as PrimaryAppOption,
+                              },
+                            ]);
                           }
                           if (
                             results?.rejected &&