Fix Web IDE tree not updating modified status

Also added `ide/stores/integration_spec` for testing
the full IDE store.

app/assets/javascripts/ide/stores/mutations.js

@@ -73,16 +73,15 @@ export default {
       const entry = data.entries[key];
       const foundEntry = state.entries[key];
 
+      // NOTE: We can't clone `entry` in any of the below assignments because
+      // we need `state.entries` and the `entry.tree` to reference the same object.
       if (!foundEntry) {
         Object.assign(state.entries, {
           [key]: entry,
         });
       } else if (foundEntry.deleted) {
         Object.assign(state.entries, {
-          [key]: {
-            ...entry,
-            replaces: true,
-          },
+          [key]: Object.assign(entry, { replaces: true }),
         });
       } else {
         const tree = entry.tree.filter(

changelogs/unreleased/29881-fix-ide-delete-and-readd.yml

+---
+title: Fix Web IDE tree not updating modified status
+merge_request: 18647
+author:
+type: fixed

spec/frontend/ide/stores/integration_spec.js

+import { decorateFiles } from '~/ide/lib/files';
+import { createStore } from '~/ide/stores';
+
+const TEST_BRANCH = 'test_branch';
+const TEST_NAMESPACE = 'test_namespace';
+const TEST_PROJECT_ID = `${TEST_NAMESPACE}/test_project`;
+const TEST_PATH_DIR = 'src';
+const TEST_PATH = `${TEST_PATH_DIR}/foo.js`;
+const TEST_CONTENT = `Lorem ipsum dolar sit
+Lorem ipsum dolar
+Lorem ipsum
+Lorem
+`;
+
+jest.mock('~/ide/ide_router');
+
+describe('IDE store integration', () => {
+  let store;
+
+  beforeEach(() => {
+    store = createStore();
+    store.replaceState({
+      ...store.state,
+      projects: {
+        [TEST_PROJECT_ID]: {
+          web_url: 'test_web_url',
+          branches: [],
+        },
+      },
+      currentProjectId: TEST_PROJECT_ID,
+      currentBranchId: TEST_BRANCH,
+    });
+  });
+
+  describe('with project and files', () => {
+    beforeEach(() => {
+      const { entries, treeList } = decorateFiles({
+        data: [`${TEST_PATH_DIR}/`, TEST_PATH, 'README.md'],
+        projectId: TEST_PROJECT_ID,
+        branchId: TEST_BRANCH,
+      });
+
+      Object.assign(entries[TEST_PATH], {
+        raw: TEST_CONTENT,
+      });
+
+      store.replaceState({
+        ...store.state,
+        trees: {
+          [`${TEST_PROJECT_ID}/${TEST_BRANCH}`]: {
+            tree: treeList,
+          },
+        },
+        entries,
+      });
+    });
+
+    describe('when a file is deleted and readded', () => {
+      beforeEach(() => {
+        store.dispatch('deleteEntry', TEST_PATH);
+        store.dispatch('createTempEntry', { name: TEST_PATH, type: 'blob' });
+      });
+
+      it('has changed and staged', () => {
+        expect(store.state.changedFiles).toEqual([
+          expect.objectContaining({
+            path: TEST_PATH,
+            tempFile: true,
+            deleted: false,
+          }),
+        ]);
+
+        expect(store.state.stagedFiles).toEqual([
+          expect.objectContaining({
+            path: TEST_PATH,
+            deleted: true,
+          }),
+        ]);
+      });
+
+      it('cleans up after commit', () => {
+        const expected = expect.objectContaining({
+          path: TEST_PATH,
+          staged: false,
+          changed: false,
+          tempFile: false,
+          deleted: false,
+        });
+        store.dispatch('stageChange', TEST_PATH);
+
+        store.dispatch('commit/updateFilesAfterCommit', { data: {} });
+
+        expect(store.state.entries[TEST_PATH]).toEqual(expected);
+        expect(store.state.entries[TEST_PATH_DIR].tree.find(x => x.path === TEST_PATH)).toEqual(
+          expected,
+        );
+      });
+    });
+  });
+});