fix: filename missing and file path in EditorTree is not updated (#659)

Author: kiwiwong

src/extensions/__tests__/folderTree.test.tsx

@@ -0,0 +1,82 @@
+import React from 'react';
+import '@testing-library/jest-dom';
+import molecule, { MoleculeProvider, Workbench } from 'mo';
+import { cleanup, fireEvent, render } from '@testing-library/react';
+import type { ITreeNodeItemProps } from 'mo/components';
+import type { IEditorTab } from 'mo/model/workbench/editor';
+
+const testFileId = 'testFileId';
+const testFileName = 'testFileName';
+const mockTreeData: ITreeNodeItemProps[] = [
+    {
+        id: 'root',
+        name: 'root',
+        isLeaf: false,
+        children: [
+            {
+                id: testFileId,
+                name: testFileName,
+                isLeaf: true,
+                isEditable: true,
+            },
+        ],
+    },
+];
+const mockTabData: IEditorTab = {
+    id: testFileId,
+    name: testFileName,
+    data: {
+        value: '',
+        path: testFileName,
+    },
+};
+
+describe('folderTree extension', () => {
+    afterEach(cleanup);
+
+    test('Execute the listener function of onUpdateFileName', () => {
+        const { getByRole } = render(
+            <MoleculeProvider>
+                <Workbench />
+            </MoleculeProvider>
+        );
+
+        molecule.folderTree.setState({ folderTree: { data: mockTreeData } });
+        expect(molecule.folderTree.getState().folderTree?.data).toEqual(
+            mockTreeData
+        );
+
+        molecule.editor.open(mockTabData);
+        expect(molecule.editor.getState().current?.data?.length).toBe(1);
+
+        const input = getByRole('input');
+        expect(input).toBeTruthy();
+
+        // Update filename to a valid name
+        const mockEnterValue = 'test-enter';
+        fireEvent.keyDown(input, {
+            keyCode: 13,
+            target: { value: mockEnterValue },
+        });
+        expect(molecule.editor.getState().current?.tab?.name).toBe(
+            mockEnterValue
+        );
+
+        molecule.folderTree.update({
+            id: testFileId,
+            isEditable: true,
+        });
+        const input2 = getByRole('input');
+        expect(input2).toBeTruthy();
+
+        // Update filename to an invalid name
+        const mockEmptyValue = '';
+        fireEvent.keyDown(input2, {
+            keyCode: 13,
+            target: { value: mockEmptyValue },
+        });
+        expect(molecule.editor.getState().current?.tab?.name).toBe(
+            mockEnterValue
+        );
+    });
+});

src/extensions/folderTree/index.tsx

@@ -1,5 +1,9 @@
 import molecule from 'mo';
 import { IExtension } from 'mo/model/extension';
+import {
+    IEditorTab,
+    BuiltInEditorTabDataType,
+} from 'mo/model/workbench/editor';
 
 export const ExtendsFolderTree: IExtension = {
     id: 'ExtendsFolderTree',
@@ -17,12 +21,29 @@ export const ExtendsFolderTree: IExtension = {
             if (name) {
                 const newLoc = location?.split('/') || [];
                 newLoc[newLoc.length - 1] = name;
+                const newLocation = newLoc.join('/');
                 molecule.folderTree.update({
                     ...file,
                     id,
-                    location: newLoc.join('/'),
+                    location: newLocation,
                     isEditable: false,
                 });
+
+                const groupId = molecule.editor.getGroupIdByTab(id.toString());
+                const isValidGroupId = !!groupId || groupId === 0;
+                if (isValidGroupId) {
+                    const prevTab =
+                        molecule.editor.getTabById<BuiltInEditorTabDataType>(
+                            id.toString(),
+                            groupId
+                        );
+                    const newTab: IEditorTab = { id: id.toString(), name };
+                    const prevTabData = prevTab?.data;
+                    if (prevTabData && prevTabData.path) {
+                        newTab.data = { ...prevTabData, path: newLocation };
+                    }
+                    molecule.editor.updateTab(newTab);
+                }
             } else {
                 const node = molecule.folderTree.get(id);
                 if (node?.name) {
@@ -34,14 +55,6 @@ export const ExtendsFolderTree: IExtension = {
                     molecule.folderTree.remove(id);
                 }
             }
-
-            const isOpened = molecule.editor.isOpened(id.toString());
-            if (isOpened) {
-                molecule.editor.updateTab({
-                    id: id.toString(),
-                    name,
-                });
-            }
         });
     },
     dispose() {},

src/model/workbench/editor.ts

@@ -18,7 +18,8 @@ export enum EditorEvent {
     onActionsClick = 'editor.actionsClick',
     OnSplitEditorRight = 'editor.splitEditorRight',
 }
-interface BuiltInEditorTabDataType {
+
+export interface BuiltInEditorTabDataType {
     language?: string | undefined;
     path?: string;
     value?: string;