From a1d686682a91988ff74316fff65f6393e0dec650 Mon Sep 17 00:00:00 2001
From: ironAiken2 <51399982+ironAiken2@users.noreply.github.com>
Date: Tue, 11 Nov 2025 07:57:52 +0000
Subject: [PATCH] feat(FR-1656): enhance file browser session notifications
 with primary app option (#4602)

Resolves #4598 ([FR-1656](https://lablup.atlassian.net/browse/FR-1656))

## Summary
This PR enhances file browser session notifications by adding a primary app option for file browser, similar to how Jupyter notebooks are handled. This helps users understand when they're creating file browser-specific sessions.

## Changes
- Added new `BAIFileBrowserIcon` React component for file browser icon
- Added file browser SVG icon asset
- Enhanced `SessionActionButtons` to support "filebrowser" as a primary app option
- Updated `FolderExplorerHeader` to pass filebrowser app option in session notifications

## Test Plan
- [x] File browser icon displays correctly in session action buttons
- [x] Session notifications properly indicate file browser sessions
- [x] Primary app option works for both Jupyter and file browser

[FR-1656]: https://lablup.atlassian.net/browse/FR-1656?atlOrigin=eyJpIjoiNWRkNTljNzYxNjVmNDY3MDlhMDU5Y2ZhYzA5YTRkZjUiLCJwIjoiZ2l0aHViLWNvbS1KU1cifQ
---
 .../src/icons/BAIFileBrowserIcon.tsx          |  11 ++
 .../backend.ai-ui/src/icons/Filebrowser.svg   |  42 ++++++
 packages/backend.ai-ui/src/icons/index.ts     |   1 +
 .../SessionActionButtons.tsx                  | 120 ++++++++++++------
 react/src/components/FolderExplorerHeader.tsx |   9 +-
 5 files changed, 144 insertions(+), 39 deletions(-)
 create mode 100644 packages/backend.ai-ui/src/icons/BAIFileBrowserIcon.tsx
 create mode 100644 packages/backend.ai-ui/src/icons/Filebrowser.svg

diff --git a/packages/backend.ai-ui/src/icons/BAIFileBrowserIcon.tsx b/packages/backend.ai-ui/src/icons/BAIFileBrowserIcon.tsx
new file mode 100644
index 0000000000..279015f0f6
--- /dev/null
+++ b/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;
diff --git a/packages/backend.ai-ui/src/icons/Filebrowser.svg b/packages/backend.ai-ui/src/icons/Filebrowser.svg
new file mode 100644
index 0000000000..45b67afb08
--- /dev/null
+++ b/packages/backend.ai-ui/src/icons/Filebrowser.svg
@@ -0,0 +1,42 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
+ "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
+ viewBox="0 0 700.000000 700.000000"
+ preserveAspectRatio="xMidYMid meet">
+<metadata>
+Created by potrace 1.11, written by Peter Selinger 2001-2013
+</metadata>
+<g transform="translate(0.000000,700.000000) scale(0.100000,-0.100000)"
+fill="currentColor" stroke="none">
+<path d="M3245 6989 c-522 -39 -1042 -197 -1480 -449 -849 -488 -1459 -1308
+-1673 -2250 -177 -776 -89 -1582 250 -2301 368 -778 1052 -1418 1857 -1739
+903 -359 1927 -325 2812 92 778 368 1418 1052 1739 1857 359 903 325 1927 -92
+2812 -296 627 -806 1175 -1423 1529 -587 338 -1308 500 -1990 449z m555 -580
+c519 -51 1018 -245 1446 -565 788 -588 1229 -1526 1174 -2496 -16 -277 -58
+-500 -145 -763 -144 -440 -378 -819 -710 -1150 -452 -452 -1005 -730 -1655
+-832 -91 -14 -175 -18 -405 -18 -304 0 -369 6 -595 51 -1105 223 -1999 1092
+-2259 2197 -52 221 -73 412 -73 667 0 397 64 732 204 1080 304 752 886 1334
+1638 1638 431 174 895 238 1380 191z"/>
+<path d="M2670 5215 c0 -13 -44 -15 -335 -15 -352 0 -383 -3 -399 -45 -3 -9
+-6 -758 -6 -1663 0 -1168 -3 -1643 -11 -1632 -8 11 -9 8 -4 -15 3 -16 17 -41
+31 -55 l24 -25 1530 0 1530 0 24 25 c14 14 26 36 27 50 1 14 1 711 1 1550 l-2
+1526 -228 142 -229 142 -136 0 -137 0 0 -600 0 -600 -705 0 -705 0 0 615 0
+615 -135 0 c-113 0 -135 -2 -135 -15z m-264 -190 c57 -29 89 -71 103 -137 35
+-154 -98 -282 -258 -247 -55 12 -122 62 -148 113 -36 69 -12 186 49 243 62 58
+170 70 254 28z m2316 -1702 c17 -15 18 -49 18 -670 l0 -653 -1245 0 -1245 0 0
+654 c0 582 2 656 16 670 14 14 139 16 1226 16 1113 0 1213 -1 1230 -17z
+m-2602 -1363 c40 -40 13 -100 -43 -100 -60 0 -88 59 -47 100 11 11 31 20 45
+20 14 0 34 -9 45 -20z m2840 0 c41 -41 11 -100 -52 -100 -35 0 -58 24 -58 60
+0 54 71 79 110 40z"/>
+<path d="M2431 3091 c-7 -13 -7 -23 2 -35 11 -15 97 -16 1067 -14 l1055 3 0
+30 0 30 -1057 3 c-1023 2 -1058 1 -1067 -17z"/>
+<path d="M2436 2675 c-19 -19 -11 -41 17 -49 41 -11 2067 -7 2088 4 23 13 25
+46 3 54 -9 3 -483 6 -1054 6 -919 0 -1040 -2 -1054 -15z"/>
+<path d="M2447 2273 c-14 -4 -17 -13 -15 -36 l3 -32 1049 -3 c767 -1 1052 1
+1062 9 20 16 17 47 -5 59 -20 10 -2055 13 -2094 3z"/>
+<path d="M3822 5027 c-21 -23 -22 -30 -22 -293 0 -258 1 -271 20 -292 27 -29
+56 -35 140 -30 56 3 75 8 93 26 22 22 22 26 22 298 l0 276 -24 19 c-19 16 -40
+19 -115 19 -84 0 -95 -2 -114 -23z"/>
+</g>
+</svg>
diff --git a/packages/backend.ai-ui/src/icons/index.ts b/packages/backend.ai-ui/src/icons/index.ts
index ab8e4b5e5b..e43af2b567 100644
--- a/packages/backend.ai-ui/src/icons/index.ts
+++ b/packages/backend.ai-ui/src/icons/index.ts
@@ -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';
diff --git a/react/src/components/ComputeSessionNodeItems/SessionActionButtons.tsx b/react/src/components/ComputeSessionNodeItems/SessionActionButtons.tsx
index 831d536423..b163606bbb 100644
--- a/react/src/components/ComputeSessionNodeItems/SessionActionButtons.tsx
+++ b/react/src/components/ComputeSessionNodeItems/SessionActionButtons.tsx
@@ -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') && (
           <>
diff --git a/react/src/components/FolderExplorerHeader.tsx b/react/src/components/FolderExplorerHeader.tsx
index c74a12eaed..a4f132ff0d 100644
--- a/react/src/components/FolderExplorerHeader.tsx
+++ b/react/src/components/FolderExplorerHeader.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 &&