Merge branch 'ide-rename-files' into 'master'

Enable renaming files & folders in the Web IDE

Closes #44845

See merge request gitlab-org/gitlab-ce!20835

7 files changed, 247 insertions, 38 deletions

diff --git a/spec/javascripts/ide/components/new_dropdown/index_spec.js b/spec/javascripts/ide/components/new_dropdown/index_spec.js
index 5cb8b177fc9..8a8cbd2cee4 100644
--- a/spec/javascripts/ide/components/new_dropdown/index_spec.js
+++ b/spec/javascripts/ide/components/new_dropdown/index_spec.js
@@ -75,7 +75,7 @@ describe('new dropdown component', () => {
     it('calls delete action', () => {
       spyOn(vm, 'deleteEntry');
 
-      vm.$el.querySelectorAll('.dropdown-menu button')[3].click();
+      vm.$el.querySelectorAll('.dropdown-menu button')[4].click();
 
       expect(vm.deleteEntry).toHaveBeenCalledWith('');
     });
diff --git a/spec/javascripts/ide/components/new_dropdown/modal_spec.js b/spec/javascripts/ide/components/new_dropdown/modal_spec.js
index 70651535e87..595a2f927e9 100644
--- a/spec/javascripts/ide/components/new_dropdown/modal_spec.js
+++ b/spec/javascripts/ide/components/new_dropdown/modal_spec.js
@@ -15,7 +15,7 @@ describe('new file modal component', () => {
     describe(type, () => {
       beforeEach(() => {
         const store = createStore();
-        store.state.newEntryModal = {
+        store.state.entryModal = {
           type,
           path: '',
         };
@@ -45,7 +45,7 @@ describe('new file modal component', () => {
         it('$emits create', () => {
           spyOn(vm, 'createTempEntry');
 
-          vm.createEntryInStore();
+          vm.submitForm();
 
           expect(vm.createTempEntry).toHaveBeenCalledWith({
             name: 'testing',
@@ -55,4 +55,47 @@ describe('new file modal component', () => {
       });
     });
   });
+
+  describe('rename entry', () => {
+    beforeEach(() => {
+      const store = createStore();
+      store.state.entryModal = {
+        type: 'rename',
+        path: '',
+        entry: {
+          name: 'test',
+          type: 'blob',
+        },
+      };
+
+      vm = createComponentWithStore(Component, store).$mount();
+    });
+
+    ['tree', 'blob'].forEach(type => {
+      it(`renders title and button for renaming ${type}`, done => {
+        const text = type === 'tree' ? 'folder' : 'file';
+
+        vm.$store.state.entryModal.entry.type = type;
+
+        vm.$nextTick(() => {
+          expect(vm.$el.querySelector('.modal-title').textContent.trim()).toBe(`Rename ${text}`);
+          expect(vm.$el.querySelector('.btn-success').textContent.trim()).toBe(`Rename ${text}`);
+
+          done();
+        });
+      });
+    });
+
+    describe('entryName', () => {
+      it('returns entries name', () => {
+        expect(vm.entryName).toBe('test');
+      });
+
+      it('updated name', () => {
+        vm.name = 'index.js';
+
+        expect(vm.entryName).toBe('index.js');
+      });
+    });
+  });
 });
diff --git a/spec/javascripts/ide/stores/actions_spec.js b/spec/javascripts/ide/stores/actions_spec.js
index 792a716565c..d84f1717a61 100644
--- a/spec/javascripts/ide/stores/actions_spec.js
+++ b/spec/javascripts/ide/stores/actions_spec.js
@@ -8,6 +8,7 @@ import actions, {
   updateTempFlagForEntry,
   setErrorMessage,
   deleteEntry,
+  renameEntry,
 } from '~/ide/stores/actions';
 import store from '~/ide/stores';
 import * as types from '~/ide/stores/mutation_types';
@@ -468,7 +469,61 @@ describe('Multi-file store actions', () => {
         'path',
         store.state,
         [{ type: types.DELETE_ENTRY, payload: 'path' }],
-        [{ type: 'burstUnusedSeal' }, { type: 'closeFile', payload: store.state.entries.path }],
+        [{ type: 'burstUnusedSeal' }],
+        done,
+      );
+    });
+  });
+
+  describe('renameEntry', () => {
+    it('renames entry', done => {
+      store.state.entries.test = {
+        tree: [],
+      };
+
+      testAction(
+        renameEntry,
+        { path: 'test', name: 'new-name' },
+        store.state,
+        [
+          {
+            type: types.RENAME_ENTRY,
+            payload: { path: 'test', name: 'new-name', entryPath: null },
+          },
+        ],
+        [{ type: 'deleteEntry', payload: 'test' }],
+        done,
+      );
+    });
+
+    it('renames all entries in tree', done => {
+      store.state.entries.test = {
+        type: 'tree',
+        tree: [
+          {
+            path: 'tree-1',
+          },
+          {
+            path: 'tree-2',
+          },
+        ],
+      };
+
+      testAction(
+        renameEntry,
+        { path: 'test', name: 'new-name' },
+        store.state,
+        [
+          {
+            type: types.RENAME_ENTRY,
+            payload: { path: 'test', name: 'new-name', entryPath: null },
+          },
+        ],
+        [
+          { type: 'renameEntry', payload: { path: 'test', name: 'new-name', entryPath: 'tree-1' } },
+          { type: 'renameEntry', payload: { path: 'test', name: 'new-name', entryPath: 'tree-2' } },
+          { type: 'deleteEntry', payload: 'test' },
+        ],
         done,
       );
     });
diff --git a/spec/javascripts/ide/stores/modules/commit/actions_spec.js b/spec/javascripts/ide/stores/modules/commit/actions_spec.js
index 133ad627f34..24a7d76f30b 100644
--- a/spec/javascripts/ide/stores/modules/commit/actions_spec.js
+++ b/spec/javascripts/ide/stores/modules/commit/actions_spec.js
@@ -294,9 +294,10 @@ describe('IDE commit module actions', () => {
                 {
                   action: 'update',
                   file_path: jasmine.anything(),
-                  content: jasmine.anything(),
+                  content: undefined,
                   encoding: jasmine.anything(),
                   last_commit_id: undefined,
+                  previous_path: undefined,
                 },
               ],
               start_branch: 'master',
@@ -320,9 +321,10 @@ describe('IDE commit module actions', () => {
                 {
                   action: 'update',
                   file_path: jasmine.anything(),
-                  content: jasmine.anything(),
+                  content: undefined,
                   encoding: jasmine.anything(),
                   last_commit_id: '123456789',
+                  previous_path: undefined,
                 },
               ],
               start_branch: undefined,
diff --git a/spec/javascripts/ide/stores/mutations_spec.js b/spec/javascripts/ide/stores/mutations_spec.js
index 8b5f2d0bdfa..1e836dbc3f9 100644
--- a/spec/javascripts/ide/stores/mutations_spec.js
+++ b/spec/javascripts/ide/stores/mutations_spec.js
@@ -206,6 +206,7 @@ describe('Multi-file store mutations', () => {
     it('adds to changedFiles', () => {
       localState.entries.filePath = {
         deleted: false,
+        type: 'blob',
       };
 
       mutations.DELETE_ENTRY(localState, 'filePath');
@@ -213,4 +214,103 @@ describe('Multi-file store mutations', () => {
       expect(localState.changedFiles).toEqual([localState.entries.filePath]);
     });
   });
+
+  describe('UPDATE_FILE_AFTER_COMMIT', () => {
+    it('updates URLs if prevPath is set', () => {
+      const f = {
+        ...file(),
+        path: 'test',
+        prevPath: 'testing-123',
+        rawPath: `${gl.TEST_HOST}/testing-123`,
+        permalink: `${gl.TEST_HOST}/testing-123`,
+        commitsPath: `${gl.TEST_HOST}/testing-123`,
+        blamePath: `${gl.TEST_HOST}/testing-123`,
+      };
+      localState.entries.test = f;
+      localState.changedFiles.push(f);
+
+      mutations.UPDATE_FILE_AFTER_COMMIT(localState, { file: f, lastCommit: { commit: {} } });
+
+      expect(f.rawPath).toBe(`${gl.TEST_HOST}/test`);
+      expect(f.permalink).toBe(`${gl.TEST_HOST}/test`);
+      expect(f.commitsPath).toBe(`${gl.TEST_HOST}/test`);
+      expect(f.blamePath).toBe(`${gl.TEST_HOST}/test`);
+    });
+  });
+
+  describe('OPEN_NEW_ENTRY_MODAL', () => {
+    it('sets entryModal', () => {
+      localState.entries.testPath = {
+        ...file(),
+      };
+
+      mutations.OPEN_NEW_ENTRY_MODAL(localState, { type: 'test', path: 'testPath' });
+
+      expect(localState.entryModal).toEqual({
+        type: 'test',
+        path: 'testPath',
+        entry: localState.entries.testPath,
+      });
+    });
+  });
+
+  describe('RENAME_ENTRY', () => {
+    beforeEach(() => {
+      localState.trees = {
+        'gitlab-ce/master': { tree: [] },
+      };
+      localState.currentProjectId = 'gitlab-ce';
+      localState.currentBranchId = 'master';
+      localState.entries.oldPath = {
+        ...file(),
+        type: 'blob',
+        name: 'oldPath',
+        path: 'oldPath',
+        url: `${gl.TEST_HOST}/oldPath`,
+      };
+    });
+
+    it('creates new renamed entry', () => {
+      mutations.RENAME_ENTRY(localState, { path: 'oldPath', name: 'newPath' });
+
+      expect(localState.entries.newPath).toEqual({
+        ...localState.entries.oldPath,
+        id: 'newPath',
+        name: 'newPath',
+        key: 'newPath-blob-name',
+        path: 'newPath',
+        tempFile: true,
+        prevPath: 'oldPath',
+        tree: [],
+        parentPath: '',
+        url: `${gl.TEST_HOST}/newPath`,
+        moved: jasmine.anything(),
+        movedPath: jasmine.anything(),
+      });
+    });
+
+    it('adds new entry to changedFiles', () => {
+      mutations.RENAME_ENTRY(localState, { path: 'oldPath', name: 'newPath' });
+
+      expect(localState.changedFiles.length).toBe(1);
+      expect(localState.changedFiles[0].path).toBe('newPath');
+    });
+
+    it('sets oldEntry as moved', () => {
+      mutations.RENAME_ENTRY(localState, { path: 'oldPath', name: 'newPath' });
+
+      expect(localState.entries.oldPath.moved).toBe(true);
+    });
+
+    it('adds to parents tree', () => {
+      localState.entries.oldPath.parentPath = 'parentPath';
+      localState.entries.parentPath = {
+        ...file(),
+      };
+
+      mutations.RENAME_ENTRY(localState, { path: 'oldPath', name: 'newPath' });
+
+      expect(localState.entries.parentPath.tree.length).toBe(1);
+    });
+  });
 });
diff --git a/spec/javascripts/ide/stores/utils_spec.js b/spec/javascripts/ide/stores/utils_spec.js
index 89db50b8874..9f18034f8a3 100644
--- a/spec/javascripts/ide/stores/utils_spec.js
+++ b/spec/javascripts/ide/stores/utils_spec.js
@@ -112,6 +112,7 @@ describe('Multi-file store utils', () => {
             content: 'updated file content',
             encoding: 'text',
             last_commit_id: '123456789',
+            previous_path: undefined,
           },
           {
             action: 'create',
@@ -119,13 +120,15 @@ describe('Multi-file store utils', () => {
             content: 'new file content',
             encoding: 'base64',
             last_commit_id: '123456789',
+            previous_path: undefined,
           },
           {
             action: 'delete',
             file_path: 'deletedFile',
-            content: '',
+            content: undefined,
             encoding: 'text',
             last_commit_id: undefined,
+            previous_path: undefined,
           },
         ],
         start_branch: undefined,
@@ -172,6 +175,7 @@ describe('Multi-file store utils', () => {
             content: 'updated file content',
             encoding: 'text',
             last_commit_id: '123456789',
+            previous_path: undefined,
           },
           {
             action: 'create',
@@ -179,6 +183,7 @@ describe('Multi-file store utils', () => {
             content: 'new file content',
             encoding: 'base64',
             last_commit_id: '123456789',
+            previous_path: undefined,
           },
         ],
         start_branch: undefined,
@@ -195,13 +200,17 @@ describe('Multi-file store utils', () => {
       expect(utils.commitActionForFile({ tempFile: true })).toBe('create');
     });
 
+    it('returns move for moved file', () => {
+      expect(utils.commitActionForFile({ prevPath: 'test' })).toBe('move');
+    });
+
     it('returns update by default', () => {
       expect(utils.commitActionForFile({})).toBe('update');
     });
   });
 
   describe('getCommitFiles', () => {
-    it('returns flattened list of files and folders', () => {
+    it('returns list of files excluding moved files', () => {
       const files = [
         {
           path: 'a',
@@ -209,19 +218,9 @@ describe('Multi-file store utils', () => {
           deleted: true,
         },
         {
-          path: 'b',
-          type: 'tree',
-          deleted: true,
-          tree: [
-            {
-              path: 'c',
-              type: 'blob',
-            },
-            {
-              path: 'd',
-              type: 'blob',
-            },
-          ],
+          path: 'c',
+          type: 'blob',
+          moved: true,
         },
       ];
 
@@ -233,16 +232,6 @@ describe('Multi-file store utils', () => {
           type: 'blob',
           deleted: true,
         },
-        {
-          path: 'c',
-          type: 'blob',
-          deleted: true,
-        },
-        {
-          path: 'd',
-          type: 'blob',
-          deleted: true,
-        },
       ]);
     });
   });
diff --git a/spec/javascripts/vue_shared/components/gl_modal_spec.js b/spec/javascripts/vue_shared/components/gl_modal_spec.js
index e4737714312..263824a102a 100644
--- a/spec/javascripts/vue_shared/components/gl_modal_spec.js
+++ b/spec/javascripts/vue_shared/components/gl_modal_spec.js
@@ -29,7 +29,7 @@ describe('GlModal', () => {
 
     describe('without id', () => {
       beforeEach(() => {
-        vm = mountComponent(modalComponent, { });
+        vm = mountComponent(modalComponent, {});
       });
 
       it('does not add an id attribute to the modal', () => {
@@ -83,7 +83,7 @@ describe('GlModal', () => {
     });
   });
 
-  it('works with data-toggle="modal"', (done) => {
+  it('works with data-toggle="modal"', done => {
     setFixtures(`
       <button id="modal-button" data-toggle="modal" data-target="#my-modal"></button>
       <div id="modal-container"></div>
@@ -91,9 +91,13 @@ describe('GlModal', () => {
 
     const modalContainer = document.getElementById('modal-container');
     const modalButton = document.getElementById('modal-button');
-    vm = mountComponent(modalComponent, {
-      id: 'my-modal',
-    }, modalContainer);
+    vm = mountComponent(
+      modalComponent,
+      {
+        id: 'my-modal',
+      },
+      modalContainer,
+    );
     $(vm.$el).on('shown.bs.modal', () => done());
 
     modalButton.click();
@@ -103,7 +107,7 @@ describe('GlModal', () => {
     const dummyEvent = 'not really an event';
 
     beforeEach(() => {
-      vm = mountComponent(modalComponent, { });
+      vm = mountComponent(modalComponent, {});
       spyOn(vm, '$emit');
     });
 
@@ -122,11 +126,27 @@ describe('GlModal', () => {
         expect(vm.$emit).toHaveBeenCalledWith('submit', dummyEvent);
       });
     });
+
+    describe('opened', () => {
+      it('emits a open event', () => {
+        vm.opened();
+
+        expect(vm.$emit).toHaveBeenCalledWith('open');
+      });
+    });
+
+    describe('closed', () => {
+      it('emits a closed event', () => {
+        vm.closed();
+
+        expect(vm.$emit).toHaveBeenCalledWith('closed');
+      });
+    });
   });
 
   describe('slots', () => {
     const slotContent = 'this should go into the slot';
-    const modalWithSlot = (slotName) => {
+    const modalWithSlot = slotName => {
       let template;
       if (slotName) {
         template = `