feat(FR-1014): implement text file editor for NEO File Explorer (#4966)

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

## Summary

Implement the ability to directly edit and save simple text files within the NEO File Explorer.

## Background

Users frequently need to modify configuration files such as yaml, toml, and json within vfolders for model serving. Currently, this requires downloading the file → editing locally → re-uploading, which results in a poor user experience.

## Implementation

### Key Features
- **Edit button in More menu**: Added dropdown menu with edit option in File Explorer controls
- **Text file detection**: Supports .txt, .md, .json, .yaml, .yml, .xml, .csv, .js, .ts, .jsx, .tsx, .py, .sh, .bash, .html, .css, .scss, .less, .sql, .log, .env, .conf, .config, .ini, .toml
- **CodeMirror editor**: Full-featured text editor with syntax highlighting
- **File operations**: Download → Edit → Upload workflow using existing APIs

### Components Added
- `TextFileEditorModal.tsx`: Main editor modal with BAICodeEditor
- Enhanced `FileItemControls.tsx`: Added More menu with Edit option
- Enhanced `BAIFileExplorer.tsx`: Added `enableEdit` and `onClickEditFile` props
- Updated `FolderExplorerModal.tsx`: Integration with TextFileEditorModal

### Technical Details
- **File Reading**: `request_download_token` → `fetch` → `blob.text()`
- **File Saving**: Modified content → `new File()` → `FileUploadManager.uploadFiles()` (overwrites)
- **Permissions**: Requires `write_content` permission
- **Size Limit**: `baiClient._config.maxFileUploadSize`

### i18n Support
- `comp:FileExplorer.EditFile`: "Edit"
- `data.explorer.EditFile`: "Edit File"
- `data.explorer.FailedToLoadFile": "Failed to load file"

**Checklist:**
- [x] Documentation (PR description)
- [ ] Minimum required manager version (N/A - client-side feature)
- [ ] Specific setting for review: Test with various text files in File Explorer
- [x] Minimum requirements: `write_content` permission on vfolder
- [x] Test cases: Edit .txt, .yaml, .json files; verify save/cancel functionality

[FR-1014]: https://lablup.atlassian.net/browse/FR-1014

### test

https://github.com/user-attachments/assets/f067e671-999a-4f20-9f7f-1c13f1d92e00

Author: limshyun

packages/backend.ai-ui/src/components/baiClient/FileExplorer/BAIFileExplorer.tsx

@@ -55,6 +55,7 @@ export interface BAIFileExplorerProps {
   enableDownload?: boolean;
   enableDelete?: boolean;
   enableWrite?: boolean;
+  enableEdit?: boolean;
   onChangeFetchKey?: (fetchKey: string) => void;
   ref?: React.Ref<BAIFileExplorerRef>;
   onDeleteFilesInBackground?: (
@@ -64,6 +65,7 @@ export interface BAIFileExplorerProps {
   ) => void;
   // FIXME: need to delete when `delete-file-async` API returns deleting file paths
   deletingFilePaths?: Array<string>;
+  onClickEditFile?: (file: VFolderFile, currentPath: string) => void;
 }
 
 const BAIFileExplorer: React.FC<BAIFileExplorerProps> = ({
@@ -75,11 +77,15 @@ const BAIFileExplorer: React.FC<BAIFileExplorerProps> = ({
   enableDownload = false,
   enableDelete = false,
   enableWrite = false,
+  enableEdit = false,
   onDeleteFilesInBackground,
   deletingFilePaths,
+  onClickEditFile,
   style,
   ref,
 }) => {
+  'use memo';
+
   const { t } = useTranslation();
   const { token } = theme.useToken();
 
@@ -214,8 +220,10 @@ const BAIFileExplorer: React.FC<BAIFileExplorerProps> = ({
               onClickDelete={() => {
                 setSelectedSingleItem(record);
               }}
+              onClickEdit={() => onClickEditFile?.(record, currentPath)}
               enableDownload={enableDownload}
               enableDelete={enableDelete}
+              enableEdit={enableEdit}
               deleteButtonProps={{ loading: isPendingDelete }}
             />
           </Suspense>

packages/backend.ai-ui/src/components/baiClient/FileExplorer/FileItemControls.tsx

@@ -1,39 +1,48 @@
+import { filterOutEmpty } from '../../../helper';
+import { useTanMutation } from '../../../helper/reactQueryAlias';
 import { BAITrashBinIcon } from '../../../icons';
-import { BAIButtonProps } from '../../BAIButton';
+import BAIButton, { BAIButtonProps } from '../../BAIButton';
 import BAIFlex from '../../BAIFlex';
 import useConnectedBAIClient from '../../provider/BAIClientProvider/hooks/useConnectedBAIClient';
 import { VFolderFile } from '../../provider/BAIClientProvider/types';
 import { FolderInfoContext } from './BAIFileExplorer';
-import { useMutation } from '@tanstack/react-query';
-import { App, Button, theme } from 'antd';
-import { DownloadIcon } from 'lucide-react';
+import { MoreOutlined } from '@ant-design/icons';
+import { App, theme, Dropdown, Tooltip } from 'antd';
+import type { MenuProps } from 'antd';
+import { DownloadIcon, EditIcon } from 'lucide-react';
 import { use } from 'react';
 import { useTranslation } from 'react-i18next';
 
 interface FileItemControlsProps {
   selectedItem: VFolderFile;
   onClickDelete: () => void;
+  onClickEdit?: () => void;
   enableDownload?: boolean;
   enableDelete?: boolean;
+  enableEdit?: boolean;
   downloadButtonProps?: BAIButtonProps;
   deleteButtonProps?: BAIButtonProps;
 }
 
 const FileItemControls: React.FC<FileItemControlsProps> = ({
   selectedItem,
   onClickDelete,
+  onClickEdit,
   enableDownload = false,
   enableDelete = false,
+  enableEdit = false,
   downloadButtonProps,
   deleteButtonProps,
 }) => {
+  'use memo';
+
   const { t } = useTranslation();
   const { token } = theme.useToken();
   const { message } = App.useApp();
   const { targetVFolderId, currentPath } = use(FolderInfoContext);
   const baiClient = useConnectedBAIClient();
 
-  const downloadFileMutation = useMutation({
+  const downloadFileMutation = useTanMutation({
     mutationFn: async ({
       fileName,
       currentFolder,
@@ -73,31 +82,46 @@ const FileItemControls: React.FC<FileItemControlsProps> = ({
     },
   });
 
-  const handleDownload = () => {
-    if (!selectedItem || downloadFileMutation.isPending) return;
+  const isDirectory = selectedItem.type === 'DIRECTORY';
 
-    downloadFileMutation.mutate({
-      fileName: `${currentPath}/${selectedItem.name}`,
-      currentFolder: targetVFolderId,
-      archive: selectedItem.type === 'DIRECTORY',
-    });
-  };
+  const dropdownMenuItems: MenuProps['items'] = filterOutEmpty([
+    {
+      key: 'fileEdit',
+      icon: <EditIcon />,
+      label: isDirectory ? (
+        <Tooltip title={t('comp:FileExplorer.UnsupportedFileFormat')}>
+          <span>{t('comp:FileExplorer.EditFile')}</span>
+        </Tooltip>
+      ) : (
+        t('comp:FileExplorer.EditFile')
+      ),
+      disabled: !enableEdit || isDirectory,
+      onClick: (e) => {
+        e.domEvent.stopPropagation();
+        onClickEdit?.();
+      },
+    },
+  ]);
 
   return (
     <BAIFlex gap="xs">
-      <Button
+      <BAIButton
         type="text"
         size="small"
         icon={<DownloadIcon color={token.colorInfo} />}
-        disabled={!enableDownload || downloadFileMutation.isPending}
-        loading={downloadFileMutation.isPending}
-        onClick={(e) => {
-          e.stopPropagation();
-          handleDownload();
+        disabled={!enableDownload}
+        onClick={(e) => e.stopPropagation()}
+        action={async () => {
+          if (!selectedItem) return;
+          await downloadFileMutation.mutateAsync({
+            fileName: `${currentPath}/${selectedItem.name}`,
+            currentFolder: targetVFolderId,
+            archive: isDirectory,
+          });
         }}
         {...downloadButtonProps}
       />
-      <Button
+      <BAIButton
         type="text"
         size="small"
         icon={<BAITrashBinIcon style={{ color: token.colorError }} />}
@@ -108,6 +132,23 @@ const FileItemControls: React.FC<FileItemControlsProps> = ({
         }}
         {...deleteButtonProps}
       />
+      <Dropdown
+        menu={{
+          items: dropdownMenuItems,
+        }}
+        trigger={['click']}
+      >
+        <BAIButton
+          type="text"
+          size="small"
+          onClick={(e) => {
+            e.stopPropagation();
+          }}
+          icon={<MoreOutlined />}
+          aria-label={t('comp:FileExplorer.MoreOptions')}
+          style={{ color: token.colorTextSecondary }}
+        />
+      </Dropdown>
     </BAIFlex>
   );
 };

packages/backend.ai-ui/src/components/provider/BAIClientProvider/index.ts

@@ -1,6 +1,6 @@
 export { default as BAIClientProvider } from './BAIClientProvider';
 export type { BAIClientProviderProps } from './BAIClientProvider';
 export { BAIClientContext, BAIAnonymousClientContext } from './context';
-export type { BAIClient } from './types';
+export type { BAIClient, VFolderFile } from './types';
 export { default as useConnectedBAIClient } from './hooks/useConnectedBAIClient';
 export { default as useAnonymousBAIClient } from './hooks/useAnonymousBAIClient';

packages/backend.ai-ui/src/locale/de.json

@@ -197,17 +197,20 @@
     "DragAndDropDesc": "Ziehen Sie Dateien in diesen Bereich zum Hochladen.",
     "DuplicatedFiles": "Überschreibung der Bestätigung",
     "DuplicatedFilesDesc": "Die Datei oder der Ordner mit demselben Namen existieren bereits. \nMöchten Sie überschreiben?",
+    "EditFile": "Datei bearbeiten",
     "FolderCreatedSuccessfully": "Ordner erfolgreich erstellt.",
     "FolderName": "Ordner Name",
     "MaxFolderNameLength": "Der Ordnername muss 255 Zeichen oder weniger betragen.",
     "ModifiedAt": "Modifiziert bei",
+    "MoreOptions": "Weitere Optionen",
     "Name": "Name",
     "PleaseEnterAFolderName": "Bitte geben Sie den Ordneramen ein.",
     "RenameSuccess": "Der Name wurde erfolgreich geändert.",
     "SelectedItemsDeletedSuccessfully": "Ausgewählte Dateien und Ordner wurden erfolgreich gelöscht.",
     "Size": "Größe",
     "TypeDeleteToConfirm": "Geben Sie zur Bestätigung „Löschen“ ein.",
     "TypeFolderNameToDelete": "Geben Sie den Namen des zu löschenden Ordners oder der Datei ein.",
+    "UnsupportedFileFormat": "Dieses Dateiformat unterstützt keine Bearbeitung.",
     "UploadFiles": "Dateien hochladen",
     "UploadFolder": "Ordner hochladen",
     "error": {

packages/backend.ai-ui/src/locale/el.json

@@ -197,17 +197,20 @@
     "DragAndDropDesc": "Σύρετε και αποθέστε αρχεία σε αυτήν την περιοχή για μεταφόρτωση.",
     "DuplicatedFiles": "Αντιπροσώπηση επιβεβαίωσης",
     "DuplicatedFilesDesc": "Το αρχείο ή ο φάκελος με το ίδιο όνομα υπάρχει ήδη. \nΘέλετε να αντικαταστήσετε;",
+    "EditFile": "Επεξεργασία αρχείου",
     "FolderCreatedSuccessfully": "Ο φάκελος δημιούργησε με επιτυχία.",
     "FolderName": "Όνομα φακέλου",
     "MaxFolderNameLength": "Το όνομα του φακέλου πρέπει να είναι 255 χαρακτήρες ή λιγότερο.",
     "ModifiedAt": "Τροποποιημένος",
+    "MoreOptions": "Περισσότερες επιλογές",
     "Name": "Ονομα",
     "PleaseEnterAFolderName": "Εισαγάγετε το όνομα του φακέλου.",
     "RenameSuccess": "Το όνομα έχει αλλάξει με επιτυχία.",
     "SelectedItemsDeletedSuccessfully": "Επιλεγμένα αρχεία και φακέλους έχουν διαγραφεί με επιτυχία.",
     "Size": "Μέγεθος",
     "TypeDeleteToConfirm": "Πληκτρολογήστε «Διαγράφω» για επιβεβαίωση.",
     "TypeFolderNameToDelete": "Πληκτρολογήστε φάκελο ή όνομα αρχείου για διαγραφή.",
+    "UnsupportedFileFormat": "Αυτή η μορφή αρχείου δεν υποστηρίζει επεξεργασία.",
     "UploadFiles": "Μεταφόρτωση αρχείων",
     "UploadFolder": "Μεταφορτωμένος φάκελος",
     "error": {

packages/backend.ai-ui/src/locale/en.json

@@ -200,17 +200,20 @@
     "DragAndDropDesc": "Drag and drop files to this area to upload.",
     "DuplicatedFiles": "Overwrite Confirmation",
     "DuplicatedFilesDesc": "The file or folder with the same name already exists. Do you want to overwrite?",
+    "EditFile": "Edit File",
     "FolderCreatedSuccessfully": "Folder created successfully.",
     "FolderName": "Folder Name",
     "MaxFolderNameLength": "Folder name must be 255 characters or less.",
     "ModifiedAt": "Modified At",
+    "MoreOptions": "More options",
     "Name": "Name",
     "PleaseEnterAFolderName": "Please enter the folder name.",
     "RenameSuccess": "The name has been successfully changed.",
     "SelectedItemsDeletedSuccessfully": "Selected files and folders have been deleted successfully.",
     "Size": "Size",
     "TypeDeleteToConfirm": "Type 'Delete' to confirm.",
     "TypeFolderNameToDelete": "Type folder or file name to delete.",
+    "UnsupportedFileFormat": "This file format does not support editing.",
     "UploadFiles": "Upload Files",
     "UploadFolder": "Upload Folder",
     "error": {

packages/backend.ai-ui/src/locale/es.json

@@ -197,17 +197,20 @@
     "DragAndDropDesc": "Arrastre y suelte archivos a esta área para cargar.",
     "DuplicatedFiles": "Confirmación de sobrescribencia",
     "DuplicatedFilesDesc": "El archivo o carpeta con el mismo nombre ya existe. \n¿Quieres sobrescribir?",
+    "EditFile": "Editar archivo",
     "FolderCreatedSuccessfully": "Carpeta creada con éxito.",
     "FolderName": "Nombre de carpeta",
     "MaxFolderNameLength": "El nombre de la carpeta debe ser de 255 caracteres o menos.",
     "ModifiedAt": "Modificado en",
+    "MoreOptions": "Más opciones",
     "Name": "Nombre",
     "PleaseEnterAFolderName": "Ingrese el nombre de la carpeta.",
     "RenameSuccess": "El nombre ha sido cambiado con éxito.",
     "SelectedItemsDeletedSuccessfully": "Los archivos y carpetas seleccionados se han eliminado correctamente.",
     "Size": "Tamaño",
     "TypeDeleteToConfirm": "Escriba \"Borrar\" para confirmar.",
     "TypeFolderNameToDelete": "Escriba el nombre de la carpeta o del archivo para eliminar.",
+    "UnsupportedFileFormat": "Este formato de archivo no admite la edición.",
     "UploadFiles": "Cargar archivos",
     "UploadFolder": "Carpeta de carga",
     "error": {

packages/backend.ai-ui/src/locale/fi.json

@@ -197,17 +197,20 @@
     "DragAndDropDesc": "Vedä ja pudota tiedostoja tälle alueelle ladataksesi.",
     "DuplicatedFiles": "Korvata vahvistus",
     "DuplicatedFilesDesc": "Tiedosto tai kansio, jolla on sama nimi, on jo olemassa. \nHaluatko korvata?",
+    "EditFile": "Muokkaa tiedostoa",
     "FolderCreatedSuccessfully": "Kansio luotu onnistuneesti.",
     "FolderName": "Kansionimi",
     "MaxFolderNameLength": "Kansion nimen on oltava enintään 255 merkkiä.",
     "ModifiedAt": "Muutettu",
+    "MoreOptions": "Lisää vaihtoehtoja",
     "Name": "Nimi",
     "PleaseEnterAFolderName": "Anna kansionimi.",
     "RenameSuccess": "Nimi on muutettu onnistuneesti.",
     "SelectedItemsDeletedSuccessfully": "Valitut tiedostot ja kansiot on poistettu onnistuneesti.",
     "Size": "Koko",
     "TypeDeleteToConfirm": "Kirjoita 'Poistaa' vahvistaaksesi.",
     "TypeFolderNameToDelete": "Kirjoita kansio tai tiedostonimi poistaaksesi.",
+    "UnsupportedFileFormat": "Tämä tiedostomuoto ei tue muokkaamista.",
     "UploadFiles": "Lähetä tiedostot",
     "UploadFolder": "Lataa kansio",
     "error": {

packages/backend.ai-ui/src/locale/fr.json

@@ -197,17 +197,20 @@
     "DragAndDropDesc": "Faites glisser et déposez les fichiers dans cette zone pour télécharger.",
     "DuplicatedFiles": "Écran de confirmation",
     "DuplicatedFilesDesc": "Le fichier ou le dossier avec le même nom existe déjà. \nVoulez-vous écraser?",
+    "EditFile": "Modifier le fichier",
     "FolderCreatedSuccessfully": "Dossier créé avec succès.",
     "FolderName": "Nom du dossier",
     "MaxFolderNameLength": "Le nom du dossier doit comporter 255 caractères ou moins.",
     "ModifiedAt": "Modifié à",
+    "MoreOptions": "Plus d'options",
     "Name": "Nom",
     "PleaseEnterAFolderName": "Veuillez saisir le nom du dossier.",
     "RenameSuccess": "Le nom a été modifié avec succès.",
     "SelectedItemsDeletedSuccessfully": "Les fichiers et dossiers sélectionnés ont été supprimés avec succès.",
     "Size": "Taille",
     "TypeDeleteToConfirm": "Tapez « Supprimer » pour confirmer.",
     "TypeFolderNameToDelete": "Tapez le nom du dossier ou du fichier à supprimer.",
+    "UnsupportedFileFormat": "Ce format de fichier ne prend pas en charge l'édition.",
     "UploadFiles": "Télécharger des fichiers",
     "UploadFolder": "Dossier de téléchargement",
     "error": {

packages/backend.ai-ui/src/locale/id.json

@@ -197,17 +197,20 @@
     "DragAndDropDesc": "Seret dan jatuhkan file ke area ini untuk diunggah.",
     "DuplicatedFiles": "Timpa konfirmasi",
     "DuplicatedFilesDesc": "File atau folder dengan nama yang sama sudah ada. \nApakah Anda ingin menimpa?",
+    "EditFile": "Edit File",
     "FolderCreatedSuccessfully": "Folder berhasil dibuat.",
     "FolderName": "Nama folder",
     "MaxFolderNameLength": "Nama folder harus 255 karakter atau kurang.",
     "ModifiedAt": "Dimodifikasi di",
+    "MoreOptions": "Opsi lainnya",
     "Name": "Nama",
     "PleaseEnterAFolderName": "Harap masukkan nama folder.",
     "RenameSuccess": "Namanya telah berhasil diubah.",
     "SelectedItemsDeletedSuccessfully": "File dan folder yang dipilih telah berhasil dihapus.",
     "Size": "Ukuran",
     "TypeDeleteToConfirm": "Ketik 'Menghapus' untuk mengonfirmasi.",
     "TypeFolderNameToDelete": "Ketik folder atau nama file yang ingin dihapus.",
+    "UnsupportedFileFormat": "Format file ini tidak mendukung pengeditan.",
     "UploadFiles": "Unggah file",
     "UploadFolder": "Unggah folder",
     "error": {