feat(FR-247, FR-249): open folder explorer from session detail panel …

…using vfolder_mounts (#3038)

resolves #3051 (FR-249)
<!-- replace NNN, MMM with the GitHub issue number and the corresponding Jira issue number. -->

>lablup/backend.ai#3461 PR must be merged first.

<!--
Please precisely, concisely, and concretely describe what this PR changes, the rationale behind codes,
and how it affects the users and other developers.
-->

This PR makes folder explorer available in the Session Detail Panel.

In versions prior to Backend.AI Core 24.12.0, the vfolder_nodes field is not provided. Therefore, you must use the `mounts` field of the `compute_session_node` query.

Mounts field does not provide vfolder name. So we need to use `vfolder_mounts` field in legacy `compute_session` query.  vfolder_mounts' provide the name of the vfolder in the same order as the `mounts' field in `compute_session_node'.

**Feature:**
- allow to open folder explorer in session detail panel

**How to test:**
- checkout Core branch to [lablup/backend.ai#3461](lablup/backend.ai#3461)
- open session detail panel. you can open session detail panel via using query string (?sessionDetail=<sessionID>)
- click the folder icon in session detail panel
- Verify that folder opener works for the vfolder you clicked on (name, contents, etc. match)

**Checklist:** (if applicable)

- [ ] Documentation
- [ ] Minium 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

react/src/components/SessionDetailContent.tsx

@@ -9,10 +9,12 @@ import SessionReservation from './ComputeSessionNodeItems/SessionReservation';
 import SessionStatusTag from './ComputeSessionNodeItems/SessionStatusTag';
 import SessionTypeTag from './ComputeSessionNodeItems/SessionTypeTag';
 import Flex from './Flex';
+import { useFolderExplorerOpener } from './FolderExplorerOpener';
 import ImageMetaIcon from './ImageMetaIcon';
 import SessionUsageMonitor from './SessionUsageMonitor';
 import { SessionDetailContentLegacyQuery } from './__generated__/SessionDetailContentLegacyQuery.graphql';
 import { SessionDetailContentQuery } from './__generated__/SessionDetailContentQuery.graphql';
+import { FolderOutlined } from '@ant-design/icons';
 import {
   Alert,
   Button,
@@ -25,6 +27,7 @@ import {
 } from 'antd';
 import Title from 'antd/es/typography/Title';
 import graphql from 'babel-plugin-relay/macro';
+import _ from 'lodash';
 import { useTranslation } from 'react-i18next';
 import { useLazyLoadQuery } from 'react-relay';
 
@@ -34,6 +37,7 @@ const SessionDetailContent: React.FC<{
 }> = ({ id, fetchKey = 'initial' }) => {
   const { t } = useTranslation();
   const { token } = theme.useToken();
+  const { open } = useFolderExplorerOpener();
   const currentProject = useCurrentProjectValue();
   const userRole = useCurrentUserRole();
 
@@ -189,7 +193,25 @@ const SessionDetailContent: React.FC<{
           )}
         </Descriptions.Item>
         <Descriptions.Item label={t('session.launcher.MountedFolders')}>
-          {legacy_session?.mounts?.join(', ')}
+          {_.map(
+            _.zip(legacy_session?.mounts, session?.vfolder_mounts),
+            (mountInfo) => {
+              const [name, id] = mountInfo;
+              return (
+                <Button
+                  key={id}
+                  type="link"
+                  size="small"
+                  icon={<FolderOutlined />}
+                  onClick={() => {
+                    open(id ?? '');
+                  }}
+                >
+                  {name}
+                </Button>
+              );
+            },
+          )}
         </Descriptions.Item>
         <Descriptions.Item label={t('session.launcher.ResourceAllocation')}>
           <Flex gap={'sm'} wrap="wrap">