Handle file change rename in IDE editor module

- This introduces a payload to the files changed
eventHub so that listeners can react to
*specific* actions.

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

@@ -5,7 +5,7 @@ import { visitUrl } from '~/lib/utils/url_utility';
 import { deprecatedCreateFlash as flash } from '~/flash';
 import * as types from './mutation_types';
 import { decorateFiles } from '../lib/files';
-import { stageKeys } from '../constants';
+import { stageKeys, commitActionTypes } from '../constants';
 import service from '../services';
 import eventHub from '../eventhub';
 
@@ -242,7 +242,7 @@ export const renameEntry = ({ dispatch, commit, state, getters }, { path, name,
     }
   }
 
-  dispatch('triggerFilesChange');
+  dispatch('triggerFilesChange', { type: commitActionTypes.move, path, newPath });
 };
 
 export const getBranchData = ({ commit, state }, { projectId, branchId, force = false } = {}) =>

app/assets/javascripts/ide/stores/actions/file.js

@@ -269,7 +269,7 @@ export const removePendingTab = ({ commit }, file) => {
   eventHub.$emit(`editor.update.model.dispose.${file.key}`);
 };
 
-export const triggerFilesChange = () => {
+export const triggerFilesChange = (ctx, payload = {}) => {
   // Used in EE for file mirroring
-  eventHub.$emit('ide.files.change');
+  eventHub.$emit('ide.files.change', payload);
 };

app/assets/javascripts/ide/stores/modules/editor/actions.js

@@ -13,3 +13,7 @@ export const updateFileEditor = ({ commit }, payload) => {
 export const removeFileEditor = ({ commit }, path) => {
   commit(types.REMOVE_FILE_EDITOR, path);
 };
+
+export const renameFileEditor = ({ commit }, payload) => {
+  commit(types.RENAME_FILE_EDITOR, payload);
+};

app/assets/javascripts/ide/stores/modules/editor/mutation_types.js

 export const UPDATE_FILE_EDITOR = 'UPDATE_FILE_EDITOR';
 export const REMOVE_FILE_EDITOR = 'REMOVE_FILE_EDITOR';
+export const RENAME_FILE_EDITOR = 'RENAME_FILE_EDITOR';

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

@@ -11,4 +11,15 @@ export default {
   [types.REMOVE_FILE_EDITOR](state, path) {
     Vue.delete(state.fileEditors, path);
   },
+  [types.RENAME_FILE_EDITOR](state, { path, newPath }) {
+    const existing = state.fileEditors[path];
+
+    // Gracefully do nothing if fileEditor isn't found.
+    if (!existing) {
+      return;
+    }
+
+    Vue.delete(state.fileEditors, path);
+    Vue.set(state.fileEditors, newPath, existing);
+  },
 };

app/assets/javascripts/ide/stores/modules/editor/setup.js

 import eventHub from '~/ide/eventhub';
+import { commitActionTypes } from '~/ide/constants';
 
 const removeUnusedFileEditors = store => {
   Object.keys(store.state.editor.fileEditors)
@@ -7,7 +8,12 @@ const removeUnusedFileEditors = store => {
 };
 
 export const setupFileEditorsSync = store => {
-  eventHub.$on('ide.files.change', () => {
-    removeUnusedFileEditors(store);
+  eventHub.$on('ide.files.change', ({ type, ...payload } = {}) => {
+    if (type === commitActionTypes.move) {
+      store.dispatch('editor/renameFileEditor', payload);
+    } else {
+      // The files have changed, but the specific change is not known.
+      removeUnusedFileEditors(store);
+    }
   });
 };

spec/features/ide/user_sees_editor_info_spec.rb

@@ -46,6 +46,20 @@ RSpec.describe 'IDE user sees editor info', :js do
     end
   end
 
+  it 'persists position after rename' do
+    ide_open_file('README.md')
+    ide_set_editor_position(4, 10)
+
+    ide_open_file('files/js/application.js')
+    ide_rename_file('README.md', 'READING_RAINBOW.md')
+
+    ide_open_file('READING_RAINBOW.md')
+
+    within find('.ide-status-bar') do
+      expect(page).to have_content('4:10')
+    end
+  end
+
   it 'persists position' do
     ide_open_file('README.md')
     ide_set_editor_position(4, 10)

spec/frontend/ide/helpers.js

 import * as pathUtils from 'path';
 import { decorateData } from '~/ide/stores/utils';
+import { commitActionTypes } from '~/ide/constants';
 
 export const file = (name = 'name', id = name, type = '', parent = null) =>
   decorateData({
@@ -28,3 +29,17 @@ export const createEntriesFromPaths = paths =>
         ...entries,
       };
     }, {});
+
+export const createTriggerChangeAction = payload => ({
+  type: 'triggerFilesChange',
+  ...(payload ? { payload } : {}),
+});
+
+export const createTriggerRenamePayload = (path, newPath) => ({
+  type: commitActionTypes.move,
+  path,
+  newPath,
+});
+
+export const createTriggerRenameAction = (path, newPath) =>
+  createTriggerChangeAction(createTriggerRenamePayload(path, newPath));

spec/frontend/ide/stores/actions/file_spec.js

@@ -7,7 +7,7 @@ import * as types from '~/ide/stores/mutation_types';
 import service from '~/ide/services';
 import { createRouter } from '~/ide/ide_router';
 import eventHub from '~/ide/eventhub';
-import { file } from '../../helpers';
+import { file, createTriggerRenameAction } from '../../helpers';
 
 const ORIGINAL_CONTENT = 'original content';
 const RELATIVE_URL_ROOT = '/gitlab';
@@ -785,13 +785,19 @@ describe('IDE store file actions', () => {
   });
 
   describe('triggerFilesChange', () => {
+    const { payload: renamePayload } = createTriggerRenameAction('test', '123');
+
     beforeEach(() => {
       jest.spyOn(eventHub, '$emit').mockImplementation(() => {});
     });
 
-    it('emits event that files have changed', () => {
-      return store.dispatch('triggerFilesChange').then(() => {
-        expect(eventHub.$emit).toHaveBeenCalledWith('ide.files.change');
+    it.each`
+      args               | payload
+      ${[]}              | ${{}}
+      ${[renamePayload]} | ${renamePayload}
+    `('emits event that files have changed (args=$args)', ({ args, payload }) => {
+      return store.dispatch('triggerFilesChange', ...args).then(() => {
+        expect(eventHub.$emit).toHaveBeenCalledWith('ide.files.change', payload);
       });
     });
   });

spec/frontend/ide/stores/actions_spec.js

@@ -19,7 +19,7 @@ import {
 } from '~/ide/stores/actions';
 import axios from '~/lib/utils/axios_utils';
 import * as types from '~/ide/stores/mutation_types';
-import { file } from '../helpers';
+import { file, createTriggerRenameAction, createTriggerChangeAction } from '../helpers';
 import testAction from '../../helpers/vuex_action_helper';
 import eventHub from '~/ide/eventhub';
 
@@ -522,7 +522,7 @@ describe('Multi-file store actions', () => {
         'path',
         store.state,
         [{ type: types.DELETE_ENTRY, payload: 'path' }],
-        [{ type: 'stageChange', payload: 'path' }, { type: 'triggerFilesChange' }],
+        [{ type: 'stageChange', payload: 'path' }, createTriggerChangeAction()],
         done,
       );
     });
@@ -551,7 +551,7 @@ describe('Multi-file store actions', () => {
         [{ type: types.DELETE_ENTRY, payload: 'testFolder/entry-to-delete' }],
         [
           { type: 'stageChange', payload: 'testFolder/entry-to-delete' },
-          { type: 'triggerFilesChange' },
+          createTriggerChangeAction(),
         ],
         done,
       );
@@ -614,7 +614,7 @@ describe('Multi-file store actions', () => {
             testEntry.path,
             store.state,
             [{ type: types.DELETE_ENTRY, payload: testEntry.path }],
-            [{ type: 'stageChange', payload: testEntry.path }, { type: 'triggerFilesChange' }],
+            [{ type: 'stageChange', payload: testEntry.path }, createTriggerChangeAction()],
             done,
           );
         });
@@ -754,7 +754,7 @@ describe('Multi-file store actions', () => {
               payload: origEntry,
             },
           ],
-          [{ type: 'triggerFilesChange' }],
+          [createTriggerRenameAction('renamed', 'orig')],
           done,
         );
       });
@@ -767,7 +767,7 @@ describe('Multi-file store actions', () => {
           { path: 'orig', name: 'renamed' },
           store.state,
           [expect.objectContaining({ type: types.RENAME_ENTRY })],
-          [{ type: 'triggerFilesChange' }],
+          [createTriggerRenameAction('orig', 'renamed')],
           done,
         );
       });

spec/frontend/ide/stores/modules/editor/actions_spec.js

 import testAction from 'helpers/vuex_action_helper';
 import * as types from '~/ide/stores/modules/editor/mutation_types';
 import * as actions from '~/ide/stores/modules/editor/actions';
+import { createTriggerRenamePayload } from '../../../helpers';
 
 describe('~/ide/stores/modules/editor/actions', () => {
   describe('updateFileEditor', () => {
@@ -22,4 +23,14 @@ describe('~/ide/stores/modules/editor/actions', () => {
       ]);
     });
   });
+
+  describe('renameFileEditor', () => {
+    it('commits with payload', () => {
+      const payload = createTriggerRenamePayload('test', 'test123');
+
+      testAction(actions.renameFileEditor, payload, {}, [
+        { type: types.RENAME_FILE_EDITOR, payload },
+      ]);
+    });
+  });
 });

spec/frontend/ide/stores/modules/editor/mutations_spec.js

 import { createDefaultFileEditor } from '~/ide/stores/modules/editor/utils';
 import * as types from '~/ide/stores/modules/editor/mutation_types';
 import mutations from '~/ide/stores/modules/editor/mutations';
+import { createTriggerRenamePayload } from '../../../helpers';
 
 const TEST_PATH = 'test/path.md';
 
@@ -60,4 +61,18 @@ describe('~/ide/stores/modules/editor/mutations', () => {
       expect(state).toEqual({ fileEditors: expected });
     });
   });
+
+  describe(types.RENAME_FILE_EDITOR, () => {
+    it.each`
+      fileEditors                   | payload                                                | expected
+      ${{ foo: {} }}                | ${createTriggerRenamePayload('does/not/exist', 'abc')} | ${{ foo: {} }}
+      ${{ foo: { a: 1 }, bar: {} }} | ${createTriggerRenamePayload('foo', 'abc/def')}        | ${{ 'abc/def': { a: 1 }, bar: {} }}
+    `('renames fileEditor at $payload', ({ fileEditors, payload, expected }) => {
+      const state = { fileEditors };
+
+      mutations[types.RENAME_FILE_EDITOR](state, payload);
+
+      expect(state).toEqual({ fileEditors: expected });
+    });
+  });
 });

spec/frontend/ide/stores/modules/editor/setup_spec.js

@@ -2,10 +2,13 @@ import Vuex from 'vuex';
 import eventHub from '~/ide/eventhub';
 import { createStoreOptions } from '~/ide/stores';
 import { setupFileEditorsSync } from '~/ide/stores/modules/editor/setup';
+import { createTriggerRenamePayload } from '../../../helpers';
 
 describe('~/ide/stores/modules/editor/setup', () => {
-  it('when files change is emitted, removes unused fileEditors', async () => {
-    const store = new Vuex.Store(createStoreOptions());
+  let store;
+
+  beforeEach(() => {
+    store = new Vuex.Store(createStoreOptions());
     store.state.entries = {
       foo: {},
       bar: {},
@@ -16,6 +19,9 @@ describe('~/ide/stores/modules/editor/setup', () => {
     };
 
     setupFileEditorsSync(store);
+  });
+
+  it('when files change is emitted, removes unused fileEditors', () => {
     eventHub.$emit('ide.files.change');
 
     expect(store.state.entries).toEqual({
@@ -26,4 +32,13 @@ describe('~/ide/stores/modules/editor/setup', () => {
       foo: {},
     });
   });
+
+  it('when files rename is emitted, renames fileEditor', () => {
+    eventHub.$emit('ide.files.change', createTriggerRenamePayload('foo', 'foo_new'));
+
+    expect(store.state.editor.fileEditors).toEqual({
+      foo_new: {},
+      bizz: {},
+    });
+  });
 });