feat(FR-1659): enhance session UI with primary app actions and Jupyter notebook import (#4595)

### Enhance Session UI with Primary App Actions and Jupyter Notebook Import

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

This PR enhances the session creation workflow and notification system to provide better UX for primary applications like Jupyter, along with improvements to the notebook import functionality.

## Key Changes

### 🎯 Primary App Support in Session Notifications
- Added primary app option to session creation notifications
- Jupyter icon now appears as the primary action button when creating sessions via Jupyter import
- Enhanced visual hierarchy to highlight the main application users will interact with

### 📓 Jupyter Notebook Import Improvements
- Refactored notebook import to use the new `useStartSession` hook
- Direct session creation flow without intermediate launcher steps
- Automatic Jupyter redirect after notebook import with proper URL postfix

### 🔧 Bootstrap Script Enhancements
- Added informative alert in session launcher preview when bootstrap script is configured
- "See Detail" button to view the full bootstrap script content in a modal
- Better visibility of custom initialization scripts

### 🛠️ Code Organization & Utilities
- Moved `generateRandomString` utility to the shared UI package
- Added `useGetAvailableFolderName` hook for unique folder name generation
- Created reusable Jupyter icon component (`BAIJupyterIcon`)

## Testing Guide

1. **Primary App in Notifications:**
   - Import a Jupyter notebook via the Import page
   - Observe the session creation notification with Jupyter icon as primary action
   - Click the Jupyter button to launch the notebook directly

2. **Bootstrap Script Preview:**
   - Create a session with a bootstrap script
   - Check the info alert in the preview step
   - Click "See Detail" to view the script

3. **Folder Name Generation:**
   - Test folder creation with duplicate names
   - Verify unique name generation with random suffix

**Checklist:**

- [ ] Documentation
- [ ] Minimum required manager version
- [ ] Specific setting for review (eg., KB link, endpoint or how to setup)
- [ ] Minimum requirements to check during review
- [ ] Test case(s) to demonstrate the difference of before/after

[FR-1659]: https://lablup.atlassian.net/browse/FR-1659?atlOrigin=eyJpIjoiNWRkNTljNzYxNjVmNDY3MDlhMDU5Y2ZhYzA5YTRkZjUiLCJwIjoiZ2l0aHViLWNvbS1KU1cifQ

Author: yomybaby

backend.ai-webui.code-workspace

@@ -14,7 +14,8 @@
     "i18n-ally.keystyle": "nested",
     "i18n-ally.dirStructure": "auto",
     "i18n-ally.displayLanguage": "en",
-    "i18n-ally.sourceLanguage": "en",
+    "i18n-ally.sourceLanguage": "ko",
+    "i18n-ally.translate.promptSource": true,
     "i18n-ally.regex.usageMatch": [
       "<Trans\\b[^>]*?\\bi18nKey\\s*=\\s*\\{['\"`]({key})['\"`]\\}", // <Trans i18nKey={'key'}>
       "<Trans\\b[^>]*?\\bi18nKey\\s*=\\s*['\"`]({key})['\"`]", // <Trans i18nKey="key">

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

@@ -380,3 +380,38 @@ export const omitNullAndUndefinedFields = <T extends Record<string, any>>(
     ),
   ) as Partial<T>;
 };
+
+/**
+ * Generates a random string of alphabetic characters.
+ *
+ * @param n - The length of the random string to generate. Defaults to 3.
+ * @returns A random string containing uppercase and lowercase letters of the specified length.
+ *
+ * @example
+ * ```typescript
+ * generateRandomString(); // Returns a 3-character string like "AbC"
+ * generateRandomString(5); // Returns a 5-character string like "XyZaB"
+ * ```
+ *
+ * @remarks
+ * The function uses a base-52 number system where:
+ * - Characters 0-25 map to uppercase letters A-Z
+ * - Characters 26-51 map to lowercase letters a-z
+ */
+export const generateRandomString = (n = 3) => {
+  let randNum = Math.floor(Math.random() * 52 * 52 * 52);
+
+  const parseNum = (num: number) => {
+    if (num < 26) return String.fromCharCode(65 + num);
+    else return String.fromCharCode(97 + num - 26);
+  };
+
+  let randStr = '';
+
+  for (let i = 0; i < n; i++) {
+    randStr += parseNum(randNum % 52);
+    randNum = Math.floor(randNum / 52);
+  }
+
+  return randStr;
+};

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

@@ -0,0 +1,14 @@
+import { default as logo } from './Jupyter.svg?react';
+import Icon from '@ant-design/icons';
+import { CustomIconComponentProps } from '@ant-design/icons/lib/components/Icon';
+
+// https://jupyter.org/governance/trademarks.html
+// https://github.com/jupyter/design/tree/main/logos/Logo%20Mark
+interface BAIHuggingFaceIconProps
+  extends Omit<CustomIconComponentProps, 'width' | 'height' | 'fill'> {}
+
+const BAIJupyterIcon: React.FC<BAIHuggingFaceIconProps> = (props) => {
+  return <Icon component={logo} {...props} />;
+};
+
+export default BAIJupyterIcon;

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

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

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

@@ -1,4 +1,6 @@
-import SessionActionButtons from './ComputeSessionNodeItems/SessionActionButtons';
+import SessionActionButtons, {
+  PrimaryAppOption,
+} from './ComputeSessionNodeItems/SessionActionButtons';
 import SessionStatusTag from './ComputeSessionNodeItems/SessionStatusTag';
 import { useUpdateEffect } from 'ahooks';
 import { BAIFlex, BAILink, BAINotificationItem, BAIText } from 'backend.ai-ui';
@@ -24,10 +26,12 @@ interface BAINodeNotificationItemProps {
   notification: NotificationState;
   sessionFrgmt: BAIComputeSessionNodeNotificationItemFragment$key | null;
   showDate?: boolean;
+  primaryAppOption?: PrimaryAppOption;
 }
+
 const BAIComputeSessionNodeNotificationItem: React.FC<
   BAINodeNotificationItemProps
-> = ({ sessionFrgmt, showDate, notification }) => {
+> = ({ sessionFrgmt, showDate, notification, primaryAppOption }) => {
   const { destroyNotification } = useSetBAINotification();
   const { t } = useTranslation();
   const navigate = useNavigate();
@@ -105,6 +109,7 @@ const BAIComputeSessionNodeNotificationItem: React.FC<
               size="small"
               sessionFrgmt={node || null}
               hiddenButtonKeys={['containerCommit']}
+              primaryAppOption={primaryAppOption}
             />
           </BAIFlex>
         }

react/src/components/BAIComputeSessionNodeNotificationItem.tsx

@@ -35,6 +35,7 @@ const BAINodeNotificationItem: React.FC<{
         notification={notification}
         sessionFrgmt={node.sessionFrgmt || null}
         showDate={showDate}
+        primaryAppOption={notification.extraData}
       />
     );
   } else if (node?.__typename === 'VirtualFolderNode') {

react/src/components/BAINodeNotificationItem.tsx

@@ -14,11 +14,13 @@ import { Tooltip, Button, theme, Space, ButtonProps } from 'antd';
 import {
   BAIAppIcon,
   BAIContainerCommitIcon,
+  BAIJupyterIcon,
   BAISessionLogIcon,
   BAISftpIcon,
   BAITerminalAppIcon,
   BAITerminateIcon,
   BAIUnmountAfterClose,
+  omitNullAndUndefinedFields,
 } from 'backend.ai-ui';
 import _ from 'lodash';
 import React, { Suspense, useState } from 'react';
@@ -33,12 +35,18 @@ type SessionActionButtonKey =
   | 'sftp'
   | 'terminate';
 
+export type PrimaryAppOption = {
+  appName: 'jupyter';
+  urlPostfix?: string;
+};
+
 interface SessionActionButtonsProps {
   sessionFrgmt: SessionActionButtonsFragment$key | null;
   size?: ButtonProps['size'];
   compact?: boolean;
   hiddenButtonKeys?: SessionActionButtonKey[];
   onAction?: (action: SessionActionButtonKey) => void;
+  primaryAppOption?: PrimaryAppOption;
 }
 
 const isActive = (session: SessionActionButtonsFragment$data) => {
@@ -66,6 +74,7 @@ const SessionActionButtons: React.FC<SessionActionButtonsProps> = ({
   compact,
   size,
   hiddenButtonKeys,
+  primaryAppOption,
   onAction,
 }) => {
   const { t } = useTranslation();
@@ -137,14 +146,53 @@ 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,
+                };
+
+                // @ts-ignore
+                globalThis.appLauncher._runApp(
+                  omitNullAndUndefinedFields(appOption),
+                );
+              }}
+              title={
+                isButtonTitleMode
+                  ? t('session.ExecuteSpecificApp', {
+                      appName: 'Jupyter Notebook',
+                    })
+                  : undefined
+              }
+            />
+          </Tooltip>
+        )}
         {isVisible('appLauncher') && (
           <>
             <Tooltip
               title={isButtonTitleMode ? undefined : t('session.SeeAppDialog')}
             >
               <Button
                 size={size}
-                type="primary"
+                type={primaryAppOption ? undefined : 'primary'}
                 disabled={
                   !isAppSupported(session) || !isActive(session) || !isOwner
                 }

react/src/components/ComputeSessionNodeItems/SessionActionButtons.tsx

@@ -1,14 +1,18 @@
-import { generateRandomString } from '../helper';
 import { useSuspendedBackendaiClient, useWebUINavigate } from '../hooks';
-import {
-  AppOption,
-  SessionLauncherFormValue,
-} from '../pages/SessionLauncherPage';
-import { SessionLauncherPageLocationState } from './LocationStateBreadCrumb';
+import { PrimaryAppOption } from './ComputeSessionNodeItems/SessionActionButtons';
 import { CloudDownloadOutlined } from '@ant-design/icons';
-import { Button, Form, FormInstance, FormProps, Input } from 'antd';
+import { App, Form, FormInstance, FormProps, Input } from 'antd';
+import {
+  BAIButton,
+  generateRandomString,
+  useErrorMessageResolver,
+} from 'backend.ai-ui';
 import { useRef } from 'react';
 import { useTranslation } from 'react-i18next';
+import {
+  StartSessionWithDefaultValue,
+  useStartSession,
+} from 'src/hooks/useStartSession';
 
 const regularizeGithubURL = (url: string) => {
   url = url.replace('/blob/', '/');
@@ -20,8 +24,50 @@ const ImportNotebook: React.FC<FormProps> = (props) => {
     url: string;
   }> | null>(null);
   const { t } = useTranslation();
+  const app = App.useApp();
   const webuiNavigate = useWebUINavigate();
-  useSuspendedBackendaiClient();
+  const baiClient = useSuspendedBackendaiClient();
+  const { startSessionWithDefault, upsertSessionNotification } =
+    useStartSession();
+  const { getErrorMessage } = useErrorMessageResolver();
+
+  const handleNotebookImport = async (url: string) => {
+    const notebookURL = regularizeGithubURL(url);
+    const fileName = notebookURL.split('/').pop();
+
+    const launcherValue: StartSessionWithDefaultValue = {
+      sessionName: `imported-notebook-${generateRandomString(5)}`,
+      environments: {
+        version: baiClient._config.default_import_environment,
+      },
+      bootstrap_script: '#!/bin/sh\ncurl -O ' + notebookURL,
+    };
+
+    const results = await startSessionWithDefault(launcherValue);
+    if (results.fulfilled && results.fulfilled.length > 0) {
+      // Handle successful result
+      upsertSessionNotification(results.fulfilled, [
+        {
+          extraData: {
+            appName: 'jupyter',
+            urlPostfix: '&redirect=/notebooks/' + fileName,
+          } as PrimaryAppOption,
+        },
+      ]);
+    }
+
+    if (results?.rejected && results.rejected.length > 0) {
+      const error = results.rejected[0].reason;
+      app.modal.error({
+        title: error?.title,
+        content: getErrorMessage(error),
+      });
+    }
+
+    webuiNavigate('/session');
+
+  };
+
   return (
     <Form ref={formRef} layout="inline" {...props}>
       <Form.Item
@@ -46,45 +92,20 @@ const ImportNotebook: React.FC<FormProps> = (props) => {
       >
         <Input placeholder={t('import.NotebookURL')} />
       </Form.Item>
-      <Button
+      <BAIButton
         icon={<CloudDownloadOutlined />}
         type="primary"
-        onClick={() => {
-          formRef.current
+        action={async () => {
+          const values = await formRef.current
             ?.validateFields()
-            .then((values) => {
-              const notebookURL = regularizeGithubURL(values.url);
-              const launcherValue: DeepPartial<SessionLauncherFormValue> = {
-                sessionName: 'imported-notebook-' + generateRandomString(5),
-                environments: {
-                  environment: 'cr.backend.ai/stable/python',
-                },
-                bootstrap_script: '#!/bin/sh\ncurl -O ' + notebookURL,
-              };
-              const params = new URLSearchParams();
-              params.set('step', '4');
-              params.set('formValues', JSON.stringify(launcherValue));
-              params.set(
-                'appOption',
-                JSON.stringify({
-                  runtime: 'jupyter',
-                  filename: notebookURL.split('/').pop(),
-                } as AppOption),
-              );
-              webuiNavigate(`/session/start?${params.toString()}`, {
-                state: {
-                  from: {
-                    pathname: '/import',
-                    label: t('webui.menu.Import&Run'),
-                  },
-                } as SessionLauncherPageLocationState,
-              });
-            })
-            .catch(() => {});
+            .catch(() => undefined);
+          if (values) {
+            await handleNotebookImport(values.url);
+          }
         }}
       >
         {t('import.GetAndRunNotebook')}
-      </Button>
+      </BAIButton>
     </Form>
   );
 };

react/src/components/ImportNotebook.tsx

@@ -3,7 +3,6 @@ import { ModelTryContentButtonVFolderNodeListQuery } from '../__generated__/Mode
 import {
   baiSignedRequestWithPromise,
   compareNumberWithUnits,
-  generateRandomString,
   useBaiSignedRequestWithPromise,
 } from '../helper';
 import {
@@ -23,7 +22,7 @@ import {
   ServiceLauncherFormValue,
 } from './ServiceLauncherPageContent';
 import { Button } from 'antd';
-import { ESMClientErrorResponse } from 'backend.ai-ui';
+import { ESMClientErrorResponse, generateRandomString } from 'backend.ai-ui';
 import _ from 'lodash';
 import React from 'react';
 import { useTranslation } from 'react-i18next';