Skip to content

Commit a1d6866

Browse files
ironAiken2ironAiken2
committed
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
1 parent 2bd9044 commit a1d6866

File tree

5 files changed

+144
-39
lines changed

5 files changed

+144
-39
lines changed

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

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import { default as logo } from './Filebrowser.svg?react';
2+
import Icon from '@ant-design/icons';
3+
import { CustomIconComponentProps } from '@ant-design/icons/lib/components/Icon';
4+
5+
interface BAIFileBrowserIconProps
6+
extends Omit<CustomIconComponentProps, 'width' | 'height' | 'fill'> {}
7+
const BAIFileBrowserIcon: React.FC<BAIFileBrowserIconProps> = (props) => {
8+
return <Icon component={logo} {...props} />;
9+
};
10+
11+
export default BAIFileBrowserIcon;

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

Lines changed: 42 additions & 0 deletions
Loading

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -41,3 +41,4 @@ export { default as BAIUserUnionIcon } from './BAIUserUnionIcon';
4141
export { default as BAIHuggingFaceIcon } from './BAIHuggingFaceIcon';
4242
export { default as BAISftpIcon } from './BAISftpIcon';
4343
export { default as BAIJupyterIcon } from './BAIJupyterIcon';
44+
export { default as BAIFileBrowserIcon } from './BAIFileBrowserIcon';

‎react/src/components/ComputeSessionNodeItems/SessionActionButtons.tsx‎

Lines changed: 82 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ import { Tooltip, Button, theme, Space, ButtonProps } from 'antd';
1414
import {
1515
BAIAppIcon,
1616
BAIContainerCommitIcon,
17+
BAIFileBrowserIcon,
1718
BAIJupyterIcon,
1819
BAISessionLogIcon,
1920
BAISftpIcon,
@@ -36,7 +37,7 @@ type SessionActionButtonKey =
3637
| 'terminate';
3738

3839
export type PrimaryAppOption = {
39-
appName: 'jupyter';
40+
appName: 'jupyter' | 'filebrowser';
4041
urlPostfix?: string;
4142
};
4243

@@ -146,44 +147,87 @@ const SessionActionButtons: React.FC<SessionActionButtonsProps> = ({
146147
return session ? (
147148
<>
148149
<Wrapper compact={compact}>
149-
{primaryAppOption && primaryAppOption.appName === 'jupyter' && (
150-
<Tooltip
151-
title={
152-
isButtonTitleMode
153-
? undefined
154-
: t('session.ExecuteSpecificApp', {
155-
appName: 'Jupyter Notebook',
156-
})
157-
}
158-
>
159-
<Button
160-
size={size}
161-
type={'primary'}
162-
disabled={
163-
!isAppSupported(session) || !isActive(session) || !isOwner
164-
}
165-
icon={<BAIJupyterIcon />}
166-
onClick={() => {
167-
const appOption = {
168-
'app-name': primaryAppOption.appName,
169-
'session-uuid': session?.row_id,
170-
'url-postfix': primaryAppOption.urlPostfix,
171-
};
150+
{primaryAppOption && (
151+
<>
152+
{primaryAppOption.appName === 'jupyter' && (
153+
<Tooltip
154+
title={
155+
isButtonTitleMode
156+
? undefined
157+
: t('session.ExecuteSpecificApp', {
158+
appName: 'Jupyter Notebook',
159+
})
160+
}
161+
>
162+
<Button
163+
size={size}
164+
type={'primary'}
165+
disabled={
166+
!isAppSupported(session) || !isActive(session) || !isOwner
167+
}
168+
icon={<BAIJupyterIcon />}
169+
onClick={() => {
170+
const appOption = {
171+
'app-name': primaryAppOption.appName,
172+
'session-uuid': session?.row_id,
173+
'url-postfix': primaryAppOption.urlPostfix,
174+
};
172175

173-
// @ts-ignore
174-
globalThis.appLauncher._runApp(
175-
omitNullAndUndefinedFields(appOption),
176-
);
177-
}}
178-
title={
179-
isButtonTitleMode
180-
? t('session.ExecuteSpecificApp', {
181-
appName: 'Jupyter Notebook',
182-
})
183-
: undefined
184-
}
185-
/>
186-
</Tooltip>
176+
// @ts-ignore
177+
globalThis.appLauncher._runApp(
178+
omitNullAndUndefinedFields(appOption),
179+
);
180+
}}
181+
title={
182+
isButtonTitleMode
183+
? t('session.ExecuteSpecificApp', {
184+
appName: 'Jupyter Notebook',
185+
})
186+
: undefined
187+
}
188+
/>
189+
</Tooltip>
190+
)}
191+
{primaryAppOption.appName === 'filebrowser' && (
192+
<Tooltip
193+
title={
194+
isButtonTitleMode
195+
? undefined
196+
: t('session.ExecuteSpecificApp', {
197+
appName: 'Jupyter Notebook',
198+
})
199+
}
200+
>
201+
<Button
202+
size={size}
203+
type={'primary'}
204+
disabled={
205+
!isAppSupported(session) || !isActive(session) || !isOwner
206+
}
207+
icon={<BAIFileBrowserIcon />}
208+
onClick={() => {
209+
const appOption = {
210+
'app-name': primaryAppOption.appName,
211+
'session-uuid': session?.row_id,
212+
'url-postfix': primaryAppOption.urlPostfix,
213+
};
214+
215+
// @ts-ignore
216+
globalThis.appLauncher._runApp(
217+
omitNullAndUndefinedFields(appOption),
218+
);
219+
}}
220+
title={
221+
isButtonTitleMode
222+
? t('session.ExecuteSpecificApp', {
223+
appName: 'File browser',
224+
})
225+
: undefined
226+
}
227+
/>
228+
</Tooltip>
229+
)}
230+
</>
187231
)}
188232
{isVisible('appLauncher') && (
189233
<>

‎react/src/components/FolderExplorerHeader.tsx‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import { FolderExplorerHeaderFragment$key } from '../__generated__/FolderExplorerHeaderFragment.graphql';
2+
import { PrimaryAppOption } from './ComputeSessionNodeItems/SessionActionButtons';
23
import EditableVFolderName from './EditableVFolderName';
34
import VFolderNodeIdenticon from './VFolderNodeIdenticon';
45
import { Button, Tooltip, Image, Grid, theme, Typography, App } from 'antd';
@@ -218,7 +219,13 @@ const FolderExplorerHeader: React.FC<FolderExplorerHeaderProps> = ({
218219
results?.fulfilled &&
219220
results.fulfilled.length > 0
220221
) {
221-
upsertSessionNotification(results.fulfilled);
222+
upsertSessionNotification(results.fulfilled, [
223+
{
224+
extraData: {
225+
appName: 'filebrowser',
226+
} as PrimaryAppOption,
227+
},
228+
]);
222229
}
223230
if (
224231
results?.rejected &&

0 commit comments

Comments
 (0)