diff options
7 files changed, 66 insertions, 11 deletions
diff --git a/app/assets/javascripts/ide/components/new_dropdown/index.vue b/app/assets/javascripts/ide/components/new_dropdown/index.vue index 440e480d596..87c3512777f 100644 --- a/app/assets/javascripts/ide/components/new_dropdown/index.vue +++ b/app/assets/javascripts/ide/components/new_dropdown/index.vue @@ -111,6 +111,15 @@ export default { </template> <li> <item-button + :label="__('Rename')" + class="d-flex" + icon="pencil" + icon-classes="mr-2" + @click="createNewItem('rename')" + /> + </li> + <li> + <item-button :label="__('Delete')" class="d-flex" icon="remove" diff --git a/app/assets/javascripts/ide/components/new_dropdown/modal.vue b/app/assets/javascripts/ide/components/new_dropdown/modal.vue index 833c4b027df..a32c7cb534c 100644 --- a/app/assets/javascripts/ide/components/new_dropdown/modal.vue +++ b/app/assets/javascripts/ide/components/new_dropdown/modal.vue @@ -13,24 +13,30 @@ export default { }; }, computed: { - ...mapState(['newEntryModal']), + ...mapState(['entryModal']), entryName: { get() { - return this.name || (this.newEntryModal.path !== '' ? `${this.newEntryModal.path}/` : ''); + if (this.entryModal.type === 'rename') return this.name || this.entryModal.entry.name; + + return this.name || (this.entryModal.path !== '' ? `${this.entryModal.path}/` : ''); }, set(val) { this.name = val; }, }, modalTitle() { - if (this.newEntryModal.type === 'tree') { + if (this.entryModal.type === 'rename') return __('Rename'); + + if (this.entryModal.type === 'tree') { return __('Create new directory'); } return __('Create new file'); }, buttonLabel() { - if (this.newEntryModal.type === 'tree') { + if (this.entryModal.type === 'rename') return __('Update'); + + if (this.entryModal.type === 'tree') { return __('Create directory'); } @@ -42,7 +48,7 @@ export default { createEntryInStore() { this.createTempEntry({ name: this.name, - type: this.newEntryModal.type, + type: this.entryModal.type, }); }, focusInput() { diff --git a/app/assets/javascripts/ide/components/repo_file.vue b/app/assets/javascripts/ide/components/repo_file.vue index eb4a927fe0d..36e7cbf93b5 100644 --- a/app/assets/javascripts/ide/components/repo_file.vue +++ b/app/assets/javascripts/ide/components/repo_file.vue @@ -134,8 +134,7 @@ export default { .replace(/[/]$/g, ''); // - strip ending "/" - const filePath = this.file.path - .replace(/[/]$/g, ''); + const filePath = this.file.path.replace(/[/]$/g, ''); return filePath === routePath; }, @@ -208,7 +207,6 @@ export default { </span> <new-dropdown :type="file.type" - :branch="file.branchId" :path="file.path" :mouse-over="mouseOver" class="float-right prepend-left-8" diff --git a/app/assets/javascripts/ide/stores/mutations.js b/app/assets/javascripts/ide/stores/mutations.js index 799c2f51e8d..cd8beb3f3f6 100644 --- a/app/assets/javascripts/ide/stores/mutations.js +++ b/app/assets/javascripts/ide/stores/mutations.js @@ -169,7 +169,11 @@ export default { }, [types.OPEN_NEW_ENTRY_MODAL](state, { type, path }) { Object.assign(state, { - newEntryModal: { type, path }, + entryModal: { + type, + path, + entry: { ...state.entries[path] }, + }, }); }, [types.DELETE_ENTRY](state, path) { diff --git a/app/assets/javascripts/ide/stores/state.js b/app/assets/javascripts/ide/stores/state.js index 0f32a267469..2371b201f8c 100644 --- a/app/assets/javascripts/ide/stores/state.js +++ b/app/assets/javascripts/ide/stores/state.js @@ -26,8 +26,9 @@ export default () => ({ rightPane: null, links: {}, errorMessage: null, - newEntryModal: { + entryModal: { type: '', path: '', + entry: {}, }, }); diff --git a/changelogs/unreleased/ide-rename-files.yml b/changelogs/unreleased/ide-rename-files.yml new file mode 100644 index 00000000000..9f4ece68a48 --- /dev/null +++ b/changelogs/unreleased/ide-rename-files.yml @@ -0,0 +1,5 @@ +--- +title: Enable renaming files and folders in Web IDE +merge_request: +author: +type: added diff --git a/spec/javascripts/ide/components/new_dropdown/modal_spec.js b/spec/javascripts/ide/components/new_dropdown/modal_spec.js index 70651535e87..ed9b3cd8a29 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: '', }; @@ -55,4 +55,36 @@ describe('new file modal component', () => { }); }); }); + + describe('rename entry', () => { + beforeEach(() => { + const store = createStore(); + store.state.entryModal = { + type: 'rename', + path: '', + entry: { + name: 'test', + }, + }; + + vm = createComponentWithStore(Component, store).$mount(); + }); + + it('renders title and button for renaming', () => { + expect(vm.$el.querySelector('.modal-title').textContent.trim()).toBe('Rename'); + expect(vm.$el.querySelector('.btn-success').textContent.trim()).toBe('Update'); + }); + + describe('entryName', () => { + it('returns entries name', () => { + expect(vm.entryName).toBe('test'); + }); + + it('updated name', () => { + vm.name = 'index.js'; + + expect(vm.entryName).toBe('index.js'); + }); + }); + }); }); |