feat: open folder explorer in vfolder table component and session lau…

…ncher
lablup · Oct 7, 2024 · 01135ca · 01135ca
1 parent 23b5f81
commit 01135ca
Show file tree

Hide file tree

Showing 3 changed files with 64 additions and 8 deletions.
diff --git a/react/src/components/MainLayout/WebUISider.tsx b/react/src/components/MainLayout/WebUISider.tsx
@@ -332,6 +332,7 @@ const WebUISider: React.FC<WebUISiderProps> = (props) => {
           // TODO: After 'SessionListPage' is completed and used as the main page, remove this code
           //       and change 'job' key to 'session'
           location.pathname.split('/')[1] === 'session' ? 'job' : '',
+          location.pathname.split('/')[1] === 'service' ? 'serving' : '',
         ]}
         items={
           // TODO: add plugin menu

diff --git a/react/src/components/VFolderTable.tsx b/react/src/components/VFolderTable.tsx
@@ -7,6 +7,8 @@ import { useCurrentProjectValue } from '../hooks/useCurrentProject';
 import { useEventNotStable } from '../hooks/useEventNotStable';
 import { useShadowRoot } from './DefaultProviders';
 import Flex from './Flex';
+import { useFolderExplorerOpener } from './FolderExplorerOpener';
+import HiddenFormItem from './HiddenFormItem';
 import TextHighlighter from './TextHighlighter';
 import VFolderPermissionTag from './VFolderPermissionTag';
 import { VFolder } from './VFolderSelect';
@@ -52,6 +54,11 @@ export interface VFolderSelectValue {
 
 export interface AliasMap {
   [key: string]: string;
+  // [key: string]: {
+  //   id: string,
+  //   name: string,
+  //   alias: string,
+  // };
 }
 
 type DataIndex = keyof VFolder;
@@ -135,6 +142,7 @@ const VFolderTable: React.FC<VFolderTableProps> = ({
   const { t } = useTranslation();
   const baiRequestWithPromise = useBaiSignedRequestWithPromise();
   const currentProject = useCurrentProjectValue();
+  const { open } = useFolderExplorerOpener();
   const [fetchKey, updateFetchKey] = useUpdatableState('first');
   const [isPendingRefetch, startRefetchTransition] = useTransition();
   const { data: allFolderList } = useSuspenseTanQuery({
@@ -311,15 +319,27 @@ const VFolderTable: React.FC<VFolderTableProps> = ({
             direction="column"
             align="stretch"
             gap={'xxs'}
-            style={
-              showAliasInput && isCurrentRowSelected
-                ? { display: 'inline-flex', height: 70, width: '100%' }
-                : {
-                    maxWidth: 200,
-                  }
-            }
+            style={{
+              ...(showAliasInput && isCurrentRowSelected
+                ? { width: '100%' }
+                : { maxWidth: 200 }),
+            }}
           >
-            <TextHighlighter keyword={searchKey}>{value}</TextHighlighter>
+            <Flex
+              onClick={() => {
+                record.id && open(record.id);
+              }}
+              style={{
+                width: 'fit-content',
+                cursor: 'pointer',
+              }}
+            >
+              <Typography.Text
+                style={{ whiteSpace: 'pre-line', wordBreak: 'break-all' }}
+              >
+                <TextHighlighter keyword={searchKey}>{value}</TextHighlighter>
+              </Typography.Text>
+            </Flex>
             {showAliasInput && isCurrentRowSelected && (
               <Form.Item
                 noStyle
@@ -399,6 +419,7 @@ const VFolderTable: React.FC<VFolderTableProps> = ({
                         record.name,
                         internalForm.getFieldValue(getRowKey(record)),
                       )}
+                      style={{ margin: 0 }}
                     >
                       <Input
                         onClick={(e) => {

diff --git a/react/src/pages/SessionLauncherPage.tsx b/react/src/pages/SessionLauncherPage.tsx
@@ -7,6 +7,7 @@ import EnvVarFormList, {
   EnvVarFormListValue,
 } from '../components/EnvVarFormList';
 import Flex from '../components/Flex';
+import { useFolderExplorerOpener } from '../components/FolderExplorerOpener';
 import ImageEnvironmentSelectFormItems, {
   ImageEnvironmentFormInput,
 } from '../components/ImageEnvironmentSelectFormItems';
@@ -53,6 +54,7 @@ import { useThemeMode } from '../hooks/useThemeMode';
 import customCSS from './SessionLauncherPage.css?raw';
 import {
   DoubleRightOutlined,
+  FolderOutlined,
   LeftOutlined,
   PlayCircleFilled,
   PlayCircleOutlined,
@@ -178,6 +180,7 @@ const SessionLauncherPage = () => {
   const mainContentDivRef = useAtomValue(mainContentDivRefState);
   const baiClient = useSuspendedBackendaiClient();
   const currentUserRole = useCurrentUserRole();
+  const { open } = useFolderExplorerOpener();
 
   const [isStartingSession, setIsStartingSession] = useState(false);
   const INITIAL_FORM_VALUES: SessionLauncherValue = useMemo(
@@ -1542,6 +1545,32 @@ const SessionLauncherPage = () => {
                               {
                                 dataIndex: 'name',
                                 title: t('data.folders.Name'),
+                                render: (value, record) => {
+                                  return (
+                                    <Flex
+                                      onClick={() => {
+                                        // record?.id && open(record.id);
+                                      }}
+                                      style={{ width: 'fit-content' }}
+                                    >
+                                      <Button
+                                        type="link"
+                                        icon={<FolderOutlined />}
+                                        style={{ paddingLeft: 0 }}
+                                      >
+                                        <Typography.Text
+                                          style={{
+                                            whiteSpace: 'pre-line',
+                                            wordBreak: 'break-all',
+                                            textAlign: 'start',
+                                          }}
+                                        >
+                                          {value}
+                                        </Typography.Text>
+                                      </Button>
+                                    </Flex>
+                                  );
+                                },
                               },
                               {
                                 dataIndex: 'alias',
@@ -1565,10 +1594,15 @@ const SessionLauncherPage = () => {
                             dataSource={_.map(
                               form.getFieldValue('mounts'),
                               (v) => {
+                                console.log(
+                                  'mounts form value: ',
+                                  form.getFieldValue('mounts'),
+                                );
                                 return {
                                   name: v,
                                   alias:
                                     form.getFieldValue('vfoldersAliasMap')?.[v],
+                                  id: v.id,
                                 };
                               },
                             )}