Enable deleting files in the Web IDE

10 files changed, 85 insertions, 57 deletions

diff --git a/app/assets/javascripts/ide/components/changed_file_icon.vue b/app/assets/javascripts/ide/components/changed_file_icon.vue
index a4e06bbbe3c..720ae11aaa6 100644
--- a/app/assets/javascripts/ide/components/changed_file_icon.vue
+++ b/app/assets/javascripts/ide/components/changed_file_icon.vue
@@ -3,6 +3,7 @@ import tooltip from '~/vue_shared/directives/tooltip';
 import Icon from '~/vue_shared/components/icon.vue';
 import { pluralize } from '~/lib/utils/text_utility';
 import { __, sprintf } from '~/locale';
+import { getCommitIconMap } from '../utils';
 
 export default {
   components: {
@@ -34,16 +35,14 @@ export default {
   },
   computed: {
     changedIcon() {
-      const suffix = this.file.staged && !this.showStagedIcon ? '-solid' : '';
-      return this.file.tempFile && !this.forceModifiedIcon
-        ? `file-addition${suffix}`
-        : `file-modified${suffix}`;
-    },
-    stagedIcon() {
-      return `${this.changedIcon}-solid`;
+      const suffix = !this.file.changed && this.file.staged && !this.showStagedIcon ? '-solid' : '';
+
+      if (this.forceModifiedIcon) return `file-modified${suffix}`;
+
+      return `${getCommitIconMap(this.file).icon}${suffix}`;
     },
     changedIconClass() {
-      return `multi-${this.changedIcon} float-left`;
+      return `ide-${this.changedIcon} float-left`;
     },
     tooltipTitle() {
       if (!this.showTooltip) return undefined;
@@ -66,6 +65,9 @@ export default {
 
       return undefined;
     },
+    showIcon() {
+      return this.file.changed || this.file.tempFile || this.file.staged || this.file.deleted;
+    },
   },
 };
 </script>
@@ -79,7 +81,7 @@ export default {
     class="ide-file-changed-icon"
   >
     <icon
-      v-if="file.changed || file.tempFile || file.staged"
+      v-if="showIcon"
       :name="changedIcon"
       :size="12"
       :css-classes="changedIconClass"
diff --git a/app/assets/javascripts/ide/components/commit_sidebar/list_item.vue b/app/assets/javascripts/ide/components/commit_sidebar/list_item.vue
index ee21eeda3cd..391004dcd3c 100644
--- a/app/assets/javascripts/ide/components/commit_sidebar/list_item.vue
+++ b/app/assets/javascripts/ide/components/commit_sidebar/list_item.vue
@@ -5,6 +5,7 @@ import Icon from '~/vue_shared/components/icon.vue';
 import StageButton from './stage_button.vue';
 import UnstageButton from './unstage_button.vue';
 import { viewerTypes } from '../../constants';
+import { getCommitIconMap } from '../../utils';
 
 export default {
   components: {
@@ -42,11 +43,12 @@ export default {
   },
   computed: {
     iconName() {
-      const prefix = this.stagedList ? '-solid' : '';
-      return this.file.tempFile ? `file-addition${prefix}` : `file-modified${prefix}`;
+      const suffix = this.stagedList ? '-solid' : '';
+
+      return `${getCommitIconMap(this.file).icon}${suffix}`;
     },
     iconClass() {
-      return `multi-file-${this.file.tempFile ? 'addition' : 'modified'} append-right-8`;
+      return `${getCommitIconMap(this.file).class} append-right-8`;
     },
     fullKey() {
       return `${this.keyPrefix}-${this.file.key}`;
@@ -67,6 +69,8 @@ export default {
       'stageChange',
     ]),
     openFileInEditor() {
+      if (this.file.type === 'tree') return null;
+
       return this.openPendingTab({
         file: this.file,
         keyPrefix: this.keyPrefix,
diff --git a/app/assets/javascripts/ide/components/ide_review.vue b/app/assets/javascripts/ide/components/ide_review.vue
index f9978762c45..d09c99050fe 100644
--- a/app/assets/javascripts/ide/components/ide_review.vue
+++ b/app/assets/javascripts/ide/components/ide_review.vue
@@ -10,7 +10,7 @@ export default {
     EditorModeDropdown,
   },
   computed: {
-    ...mapGetters(['currentMergeRequest']),
+    ...mapGetters(['currentMergeRequest', 'activeFile']),
     ...mapState(['viewer', 'currentMergeRequestId']),
     showLatestChangesText() {
       return !this.currentMergeRequestId || this.viewer === viewerTypes.diff;
@@ -23,12 +23,20 @@ export default {
     },
   },
   mounted() {
+    if (this.activeFile && this.activeFile.pending && !this.activeFile.deleted) {
+      this.$router.push(`/project${this.activeFile.url}`, () => {
+        this.updateViewer('editor');
+      });
+    } else if (this.activeFile && this.activeFile.deleted) {
+      this.resetOpenFiles();
+    }
+
     this.$nextTick(() => {
       this.updateViewer(this.currentMergeRequestId ? viewerTypes.mr : viewerTypes.diff);
     });
   },
   methods: {
-    ...mapActions(['updateViewer']),
+    ...mapActions(['updateViewer', 'resetOpenFiles']),
   },
 };
 </script>
@@ -36,7 +44,6 @@ export default {
 <template>
   <ide-tree-list
     :viewer-type="viewer"
-    :disable-action-dropdown="true"
     header-class="ide-review-header"
   >
     <template
diff --git a/app/assets/javascripts/ide/components/ide_tree.vue b/app/assets/javascripts/ide/components/ide_tree.vue
index 0a95c0bb30d..e996dd9059e 100644
--- a/app/assets/javascripts/ide/components/ide_tree.vue
+++ b/app/assets/javascripts/ide/components/ide_tree.vue
@@ -17,14 +17,18 @@ export default {
     ...mapGetters(['currentProject', 'currentTree', 'activeFile']),
   },
   mounted() {
-    if (this.activeFile && this.activeFile.pending) {
+    if (!this.activeFile) return;
+
+    if (this.activeFile.pending && !this.activeFile.deleted) {
       this.$router.push(`/project${this.activeFile.url}`, () => {
         this.updateViewer('editor');
       });
+    } else if (this.activeFile.deleted) {
+      this.resetOpenFiles();
     }
   },
   methods: {
-    ...mapActions(['updateViewer', 'openNewEntryModal', 'createTempEntry']),
+    ...mapActions(['updateViewer', 'openNewEntryModal', 'createTempEntry', 'resetOpenFiles']),
   },
 };
 </script>
diff --git a/app/assets/javascripts/ide/components/ide_tree_list.vue b/app/assets/javascripts/ide/components/ide_tree_list.vue
index 0df99798d21..2e7226b727c 100644
--- a/app/assets/javascripts/ide/components/ide_tree_list.vue
+++ b/app/assets/javascripts/ide/components/ide_tree_list.vue
@@ -22,11 +22,6 @@ export default {
       required: false,
       default: null,
     },
-    disableActionDropdown: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
   },
   computed: {
     ...mapState(['currentBranchId']),
@@ -69,7 +64,6 @@ export default {
         :key="file.key"
         :file="file"
         :level="0"
-        :disable-action-dropdown="disableActionDropdown"
       />
     </template>
   </div>
diff --git a/app/assets/javascripts/ide/components/new_dropdown/index.vue b/app/assets/javascripts/ide/components/new_dropdown/index.vue
index c29e49ba766..440e480d596 100644
--- a/app/assets/javascripts/ide/components/new_dropdown/index.vue
+++ b/app/assets/javascripts/ide/components/new_dropdown/index.vue
@@ -13,7 +13,7 @@ export default {
     ItemButton,
   },
   props: {
-    branch: {
+    type: {
       type: String,
       required: true,
     },
@@ -45,7 +45,7 @@ export default {
     },
   },
   methods: {
-    ...mapActions(['createTempEntry', 'openNewEntryModal']),
+    ...mapActions(['createTempEntry', 'openNewEntryModal', 'deleteEntry']),
     createNewItem(type) {
       this.openNewEntryModal({ type, path: this.path });
       this.dropdownOpen = false;
@@ -82,28 +82,40 @@ export default {
         ref="dropdownMenu"
         class="dropdown-menu dropdown-menu-right"
       >
+        <template v-if="type === 'tree'">
+          <li>
+            <item-button
+              :label="__('New file')"
+              class="d-flex"
+              icon="doc-new"
+              icon-classes="mr-2"
+              @click="createNewItem('blob')"
+            />
+          </li>
+          <li>
+            <upload
+              :path="path"
+              @create="createTempEntry"
+            />
+          </li>
+          <li>
+            <item-button
+              :label="__('New directory')"
+              class="d-flex"
+              icon="folder-new"
+              icon-classes="mr-2"
+              @click="createNewItem('tree')"
+            />
+          </li>
+          <li class="divider"></li>
+        </template>
         <li>
           <item-button
-            :label="__('New file')"
+            :label="__('Delete')"
             class="d-flex"
-            icon="doc-new"
+            icon="remove"
             icon-classes="mr-2"
-            @click="createNewItem('blob')"
-          />
-        </li>
-        <li>
-          <upload
-            :path="path"
-            @create="createTempEntry"
-          />
-        </li>
-        <li>
-          <item-button
-            :label="__('New directory')"
-            class="d-flex"
-            icon="folder-new"
-            icon-classes="mr-2"
-            @click="createNewItem('tree')"
+            @click="deleteEntry(path)"
           />
         </li>
       </ul>
diff --git a/app/assets/javascripts/ide/components/repo_commit_section.vue b/app/assets/javascripts/ide/components/repo_commit_section.vue
index 50ab242ba2a..6f1a941fbc4 100644
--- a/app/assets/javascripts/ide/components/repo_commit_section.vue
+++ b/app/assets/javascripts/ide/components/repo_commit_section.vue
@@ -44,7 +44,7 @@ export default {
     },
   },
   mounted() {
-    if (this.lastOpenedFile) {
+    if (this.lastOpenedFile && this.lastOpenedFile.type !== 'tree') {
       this.openPendingTab({
         file: this.lastOpenedFile,
         keyPrefix: this.lastOpenedFile.changed ? stageKeys.unstaged : stageKeys.staged,
diff --git a/app/assets/javascripts/ide/components/repo_editor.vue b/app/assets/javascripts/ide/components/repo_editor.vue
index 08ee12fd98f..f9badb01535 100644
--- a/app/assets/javascripts/ide/components/repo_editor.vue
+++ b/app/assets/javascripts/ide/components/repo_editor.vue
@@ -87,7 +87,9 @@ export default {
       this.editor.updateDimensions();
     },
     viewer() {
-      this.createEditorInstance();
+      if (!this.file.pending) {
+        this.createEditorInstance();
+      }
     },
     panelResizing() {
       if (!this.panelResizing) {
@@ -109,6 +111,7 @@ export default {
   },
   methods: {
     ...mapActions([
+      'getFileData',
       'getRawFileData',
       'changeFileContent',
       'setFileLanguage',
@@ -123,10 +126,16 @@ export default {
 
       this.editor.clearEditor();
 
-      this.getRawFileData({
+      this.getFileData({
         path: this.file.path,
-        baseSha: this.currentMergeRequest ? this.currentMergeRequest.baseCommitSha : '',
+        makeFileActive: false,
       })
+        .then(() =>
+          this.getRawFileData({
+            path: this.file.path,
+            baseSha: this.currentMergeRequest ? this.currentMergeRequest.baseCommitSha : '',
+          }),
+        )
         .then(() => {
           this.createEditorInstance();
         })
@@ -246,6 +255,8 @@ export default {
       ref="editor"
       :class="{
         'is-readonly': isCommitModeActive,
+        'is-deleted': file.deleted,
+        'is-added': file.tempFile
       }"
       class="multi-file-editor-holder"
     >
diff --git a/app/assets/javascripts/ide/components/repo_file.vue b/app/assets/javascripts/ide/components/repo_file.vue
index 3b4dd5ae9aa..eb4a927fe0d 100644
--- a/app/assets/javascripts/ide/components/repo_file.vue
+++ b/app/assets/javascripts/ide/components/repo_file.vue
@@ -34,11 +34,6 @@ export default {
       type: Number,
       required: true,
     },
-    disableActionDropdown: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
   },
   data() {
     return {
@@ -212,8 +207,7 @@ export default {
           />
         </span>
         <new-dropdown
-          v-if="isTree && !disableActionDropdown"
-          :project-id="file.projectId"
+          :type="file.type"
           :branch="file.branchId"
           :path="file.path"
           :mouse-over="mouseOver"
diff --git a/app/assets/javascripts/ide/components/repo_tab.vue b/app/assets/javascripts/ide/components/repo_tab.vue
index 03772ae4a4c..db47b75ec5c 100644
--- a/app/assets/javascripts/ide/components/repo_tab.vue
+++ b/app/assets/javascripts/ide/components/repo_tab.vue
@@ -37,7 +37,7 @@ export default {
       return this.fileHasChanged ? !this.tabMouseOver : false;
     },
     fileHasChanged() {
-      return this.tab.changed || this.tab.tempFile || this.tab.staged;
+      return this.tab.changed || this.tab.tempFile || this.tab.staged || this.tab.deleted;
     },
   },
 
@@ -71,7 +71,8 @@ export default {
 <template>
   <li
     :class="{
-      active: tab.active
+      active: tab.active,
+      disabled: tab.pending
     }"
     @click="clickFile(tab)"
     @mouseover="mouseOverTab"
@@ -105,7 +106,6 @@ export default {
       <changed-file-icon
         v-else
         :file="tab"
-        :force-modified-icon="true"
       />
     </button>
   </li>