feat(FR-1502): implement editable folder names with visual identicons in file explorer (#4319)

yomybaby · yomybaby · commit 010c2b2da964 · 2025-09-23T08:29:24.000Z
Resolves #4318 ([FR-1502](https://lablup.atlassian.net/browse/FR-1502)) # Enhance VFolder Name Editing and Display in Folder Explorer This PR improves the folder name editing experience and updates the folder explorer header with a more consistent design: 1. Adds title attribute to display full folder name on hover 2. Prevents unnecessary rename mutations when the name hasn't changed 3. Enhances `EditableVFolderName` component with additional props: - New `inputProps` to customize the input field - Support for passing editable props through to the component 4. Replaces `VFolderNameTitle` with `EditableVFolderName` in the folder explorer header 5. Improves the styling of folder identicons for better visual consistency 6. Temporarily comments out the folder name validator to address issues with duplicate name detection **Checklist:** - [ ] 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 [FR-1502]: https://lablup.atlassian.net/browse/FR-1502?atlOrigin=eyJpIjoiNWRkNTljNzYxNjVmNDY3MDlhMDU5Y2ZhYzA5YTRkZjUiLCJwIjoiZ2l0aHViLWNvbS1KU1cifQ
diff --git a/packages/backend.ai-ui/src/hooks/useErrorMessageResolver.ts b/packages/backend.ai-ui/src/hooks/useErrorMessageResolver.ts
@@ -41,6 +41,7 @@ const useErrorMessageResolver = () => {
     let errorMsg = defaultMessage || t('error.UnknownError');
     if (!error) return errorMsg;
 
+    // Prioritize `msg` or `message`(deprecated) field if available.
     if (error?.msg || error?.message) {
       const integratedErrorMsg = error?.msg || error?.message || '';
       errorMsg = !_.includes(integratedErrorMsg, 'Traceback')
diff --git a/react/src/components/EditableVFolderName.tsx b/react/src/components/EditableVFolderName.tsx
@@ -6,7 +6,15 @@ import { useTanMutation } from '../hooks/reactQueryAlias';
 import { useCurrentProjectValue } from '../hooks/useCurrentProject';
 import { isDeletedCategory } from '../pages/VFolderNodeListPage';
 import { useFolderExplorerOpener } from './FolderExplorerOpener';
-import { theme, Form, Input, App, GetProps, Typography } from 'antd';
+import {
+  theme,
+  Form,
+  Input,
+  App,
+  GetProps,
+  Typography,
+  InputProps,
+} from 'antd';
 import { BAILink, toLocalId, useErrorMessageResolver } from 'backend.ai-ui';
 import _ from 'lodash';
 import { CornerDownLeftIcon } from 'lucide-react';
@@ -23,6 +31,7 @@ type EditableVFolderNameProps = {
   vfolderFrgmt: EditableVFolderNameFragment$key;
   enableLink?: boolean;
   existingNames?: Array<string>;
+  inputProps?: InputProps;
   onEditEnd?: () => void;
   onEditStart?: () => void;
 } & (
@@ -45,6 +54,7 @@ const EditableVFolderName: React.FC<EditableVFolderNameProps> = ({
   existingNames,
   onEditEnd,
   onEditStart,
+  inputProps,
   ...otherProps
 }) => {
   const vfolder = useFragment(
@@ -105,6 +115,7 @@ const EditableVFolderName: React.FC<EditableVFolderNameProps> = ({
                     onEditEnd?.();
                   },
                   triggerType: ['icon'],
+                  ...(!_.isBoolean(editableOfProps) ? editableOfProps : {}),
                 }
               : false
           }
@@ -114,6 +125,7 @@ const EditableVFolderName: React.FC<EditableVFolderNameProps> = ({
               ? token.colorTextTertiary
               : style?.color,
           }}
+          title={vfolder.name || undefined}
           {...otherProps}
         >
           {enableLink && !isEditing && (
@@ -132,6 +144,9 @@ const EditableVFolderName: React.FC<EditableVFolderNameProps> = ({
         <Form
           onFinish={(values) => {
             setIsEditing(false);
+            if (values.vfolderName === vfolder.name) {
+              return;
+            }
             setOptimisticName(values.vfolderName);
             renameMutation.mutate(
               {
@@ -159,7 +174,16 @@ const EditableVFolderName: React.FC<EditableVFolderNameProps> = ({
                 },
                 onError: (error) => {
                   onEditEnd?.();
-                  message.error(getErrorMessage(error));
+                  const errorMessage = getErrorMessage(error);
+                  if (
+                    errorMessage.includes(
+                      'One of your accessible vfolders already has the name you requested.',
+                    )
+                  ) {
+                    message.error(t('data.FolderAlreadyExists'));
+                  } else {
+                    message.error(errorMessage);
+                  }
                   setOptimisticName(vfolder.name);
                 },
               },
@@ -188,14 +212,15 @@ const EditableVFolderName: React.FC<EditableVFolderNameProps> = ({
                 pattern: /^[a-zA-Z0-9-_.]+$/,
                 message: t('data.AllowsLettersNumbersAnd-_Dot'),
               },
-              {
-                validator: (__, value) => {
-                  if (_.includes(existingNames, value)) {
-                    return Promise.reject(t('data.FolderAlreadyExists'));
-                  }
-                  return Promise.resolve();
-                },
-              },
+              // TODO: (Priority low) implement async validator to check existing folder names
+              // {
+              //   validator: (__, value) => {
+              //     if (_.includes(existingNames, value)) {
+              //       return Promise.reject(t('data.FolderAlreadyExists'));
+              //     }
+              //     return Promise.resolve();
+              //   },
+              // },
             ]}
             style={{
               margin: 0,
@@ -219,6 +244,7 @@ const EditableVFolderName: React.FC<EditableVFolderNameProps> = ({
                   onEditEnd?.();
                 }
               }}
+              {...inputProps}
             />
           </Form.Item>
         </Form>
diff --git a/react/src/components/FolderExplorerHeader.tsx b/react/src/components/FolderExplorerHeader.tsx
@@ -1,8 +1,9 @@
 import { FolderExplorerHeaderFragment$key } from '../__generated__/FolderExplorerHeaderFragment.graphql';
-import VFolderNameTitle from './VFolderNameTitle';
-import { Button, Tooltip, Image, Skeleton, Grid, theme } from 'antd';
+import EditableVFolderName from './EditableVFolderName';
+import VFolderNodeIdenticon from './VFolderNodeIdenticon';
+import { Button, Tooltip, Image, Grid, theme, Typography } from 'antd';
 import { BAIFlex } from 'backend.ai-ui';
-import React, { LegacyRef, Suspense } from 'react';
+import React, { LegacyRef } from 'react';
 import { useTranslation } from 'react-i18next';
 import { graphql, useFragment } from 'react-relay';
 
@@ -29,6 +30,8 @@ const FolderExplorerHeader: React.FC<FolderExplorerHeaderProps> = ({
         permission
         unmanaged_path @since(version: "25.04.0")
         ...VFolderNameTitleNodeFragment
+        ...VFolderNodeIdenticonFragment
+        ...EditableVFolderNameFragment
       }
     `,
     vfolderNodeFrgmt,
@@ -43,20 +46,52 @@ const FolderExplorerHeader: React.FC<FolderExplorerHeaderProps> = ({
     >
       <BAIFlex
         data-testid="folder-explorer-title"
-        gap={token.marginMD}
+        gap={'xs'}
         style={{ flex: 1, ...titleStyle }}
       >
-        <Suspense fallback={<Skeleton.Input active />}>
-          <VFolderNameTitle vfolderNodeFrgmt={vfolderNode} />
-        </Suspense>
+        {vfolderNode ? (
+          <VFolderNodeIdenticon
+            vfolderNodeIdenticonFrgmt={vfolderNode}
+            style={{
+              fontSize: token.fontSizeHeading4,
+            }}
+          />
+        ) : (
+          <BAIFlex
+            style={{
+              borderColor: token.colorBorderSecondary,
+              borderWidth: 1,
+              borderStyle: 'solid',
+              width: token.fontSizeHeading3,
+              height: token.fontSizeHeading3,
+              borderRadius: token.borderRadius,
+            }}
+          />
+        )}
+        {vfolderNode && (
+          <EditableVFolderName
+            vfolderFrgmt={vfolderNode}
+            enableLink={false}
+            component={Typography.Title}
+            level={3}
+            style={{
+              margin: 0,
+              width: '100%',
+            }}
+            ellipsis
+            editable={{
+              triggerType: ['icon', 'text'],
+            }}
+            inputProps={{
+              size: 'large',
+            }}
+          />
+        )}
       </BAIFlex>
       <BAIFlex
         data-testid="folder-explorer-actions"
         justify="end"
         gap={token.marginSM}
-        style={{
-          flex: lg ? 2 : 1,
-        }}
       >
         {!vfolderNode?.unmanaged_path ? (
           <>
diff --git a/react/src/components/VFolderNodeIdenticon.tsx b/react/src/components/VFolderNodeIdenticon.tsx
@@ -1,6 +1,7 @@
 import { VFolderNodeIdenticonFragment$key } from '../__generated__/VFolderNodeIdenticonFragment.graphql';
 import { shapes } from '@dicebear/collection';
 import { createAvatar } from '@dicebear/core';
+import { theme } from 'antd';
 import React from 'react';
 import { graphql, useFragment } from 'react-relay';
 
@@ -11,8 +12,9 @@ interface VFolderNodeIdenticonProps {
 
 const VFolderNodeIdenticon: React.FC<VFolderNodeIdenticonProps> = ({
   vfolderNodeIdenticonFrgmt,
-  ...style
+  style,
 }) => {
+  const { token } = theme.useToken();
   const vfolder = useFragment(
     graphql`
       fragment VFolderNodeIdenticonFragment on VirtualFolderNode {
@@ -24,7 +26,15 @@ const VFolderNodeIdenticon: React.FC<VFolderNodeIdenticonProps> = ({
 
   return (
     <img
-      {...style}
+      style={{
+        borderRadius: '0.25em',
+        width: '1em',
+        height: '1em',
+        borderWidth: 0.5,
+        borderStyle: 'solid',
+        borderColor: token.colorBorder,
+        ...style,
+      }}
       src={createAvatar(shapes, {
         seed: vfolder?.id,
         shape3: [],
diff --git a/react/src/components/VFolderNodes.tsx b/react/src/components/VFolderNodes.tsx
@@ -151,9 +151,7 @@ const VFolderNodes: React.FC<VFolderNodesProps> = ({
                   <VFolderNodeIdenticon
                     vfolderNodeIdenticonFrgmt={vfolder}
                     style={{
-                      width: token.size,
-                      height: token.size,
-                      borderRadius: token.borderRadiusSM,
+                      fontSize: token.fontSizeHeading5,
                     }}
                   />
                   {vfolder?.id === hoveredColumn ? (
@@ -171,7 +169,6 @@ const VFolderNodes: React.FC<VFolderNodesProps> = ({
                       onEditStart={() => {
                         setEditingColumn(vfolder?.id);
                       }}
-                      existingNames={_.compact(_.map(filteredVFolders, 'name'))}
                     />
                   ) : (
                     <BAILink
diff --git a/resources/i18n/el.json b/resources/i18n/el.json
@@ -238,6 +238,7 @@
     "EnterDifferentValue": "Εισαγάγετε μια τιμή διαφορετική από το υπάρχον όνομα αρχείου ή φακέλου. Ελέγξτε αν ο χαρακτήρας διαστήματος στο πεδίο εισαγωγής ή όχι.",
     "ExistingFolderName": "Το υπάρχον όνομα φακέλου",
     "FileAndFolderNameRequired": "Απαιτείται όνομα αρχείου / φακέλου",
+    "FolderAlreadyExists": "Υπάρχει ήδη ένας φάκελος με αυτό το όνομα",
     "FolderInfo": "Πληροφορίες για τον Φόρντερ",
     "FolderNameRequired": "Απαιτείται όνομα φακέλου",
     "FolderNameTooLong": "Εισαγάγετε όνομα φακέλου με λιγότερους από 64 χαρακτήρες",
@@ -259,6 +260,7 @@
     "NewFolder": "Νέος φάκελος",
     "NewFolderName": "Νέο όνομα φακέλου",
     "NoStorageDescriptionFound": "Χωρίς περιγραφή.",
+    "NotInProject": "Αυτός ο φάκελος ανήκει σε ένα διαφορετικό έργο.",
     "NumberOfFolders": "Αριθμός φακέλων",
     "Permission": "Αδεια",
     "Pipeline": "Γραμμή σωλήνων",
@@ -478,8 +480,7 @@
       "Status": "Κατάσταση",
       "StatusOfSelectedHost": "Κατάσταση του επιλεγμένου κεντρικού υπολογιστή",
       "Used": "χρησιμοποιημένο"
-    },
-    "NotInProject": "Αυτός ο φάκελος ανήκει σε ένα διαφορετικό έργο."
+    }
   },
   "desktopNotification": {
     "NotSupported": "Αυτό το πρόγραμμα περιήγησης δεν υποστηρίζει ειδοποιήσεις.",
diff --git a/resources/i18n/ko.json b/resources/i18n/ko.json
@@ -240,9 +240,9 @@
     "EnterDifferentValue": "기존 파일 또는 폴더 이름과 다른 값을 입력해 주세요. 변경하려는 폴더 이름에 공백문자가 있는지 확인해 주세요.",
     "ExistingFolderName": "기존 폴더 이름",
     "FileAndFolderNameRequired": "파일 및 폴더 이름이 필요합니다.",
-    "FolderAlreadyExists": "다음 폴더는 이미 존재합니다.",
+    "FolderAlreadyExists": "같은 이름의 폴더가 이미 존재합니다.",
     "FolderInfo": "폴더 정보",
-    "FolderNameRequired": "폴더 이름은 필수 입력입니다.",
+    "FolderNameRequired": "폴더 이름을 입력해주세요.",
     "FolderNameTooLong": "폴더 이름은 64자 이하로 입력하세요",
     "FolderToCopy": "복사할 폴더 이름",
     "Foldername": "폴더 이름",
@@ -263,6 +263,7 @@
     "NewFolder": "새 폴더",
     "NewFolderName": "새 폴더 이름",
     "NoStorageDescriptionFound": "별도 설명이 없습니다.",
+    "NotInProject": "이 폴더는 다른 프로젝트에 속해 있습니다.",
     "NumberOfFolders": "폴더 개수",
     "Permission": "권한",
     "Pipeline": "파이프라인",
@@ -483,8 +484,7 @@
       "Status": "상태",
       "StatusOfSelectedHost": "선택한 호스트 상태",
       "Used": "사용중"
-    },
-    "NotInProject": "이 폴더는 다른 프로젝트에 속해 있습니다."
+    }
   },
   "desktopNotification": {
     "NotSupported": "현재 브라우저에서는 알림 기능을 지원하지 않습니다. ",
diff --git a/src/lib/backend.ai-client-esm.ts b/src/lib/backend.ai-client-esm.ts
@@ -499,6 +499,10 @@ class Client {
         statusCode: resp.status,
         statusText: resp.statusText,
         title: errorTitle,
+        // `msg` field was introduced in v24.09.0
+        msg: resp.msg,
+        // `message` is deprecated, but it is kept for backward compatibility.
+        // use `msg` field instead.
         message: errorMsg,
         description: errorDesc,
         error_code: errorCode,
