Fixed bugs with IDE new directory

Closes #44838

9 files changed, 83 insertions, 67 deletions

diff --git a/app/assets/javascripts/ide/components/new_dropdown/modal.vue b/app/assets/javascripts/ide/components/new_dropdown/modal.vue
index 4b5a50785b6..e228a2f4024 100644
--- a/app/assets/javascripts/ide/components/new_dropdown/modal.vue
+++ b/app/assets/javascripts/ide/components/new_dropdown/modal.vue
@@ -40,13 +40,6 @@ export default {
 
       return __('Create file');
     },
-    formLabelName() {
-      if (this.type === 'tree') {
-        return __('Directory name');
-      }
-
-      return __('File name');
-    },
   },
   mounted() {
     this.$refs.fieldName.focus();
@@ -83,7 +76,7 @@ export default {
     >
       <fieldset class="form-group append-bottom-0">
         <label class="label-light col-sm-3">
-          {{ formLabelName }}
+          {{ __('Name') }}
         </label>
         <div class="col-sm-9">
           <input
diff --git a/app/assets/javascripts/ide/stores/actions.js b/app/assets/javascripts/ide/stores/actions.js
index c6ba679d99c..59e77fb2150 100644
--- a/app/assets/javascripts/ide/stores/actions.js
+++ b/app/assets/javascripts/ide/stores/actions.js
@@ -112,6 +112,14 @@ export const updateDelayViewerUpdated = ({ commit }, delay) => {
   commit(types.UPDATE_DELAY_VIEWER_CHANGE, delay);
 };
 
+export const updateTempFlagForEntry = ({ commit, dispatch, state }, { entry, tempFile }) => {
+  commit(types.UPDATE_TEMP_FLAG, { path: entry.path, tempFile });
+
+  if (entry.parentPath) {
+    dispatch('updateTempFlagForEntry', { entry: state.entries[entry.parentPath], tempFile });
+  }
+};
+
 export * from './actions/tree';
 export * from './actions/file';
 export * from './actions/project';
diff --git a/app/assets/javascripts/ide/stores/modules/commit/actions.js b/app/assets/javascripts/ide/stores/modules/commit/actions.js
index 367c45f7e2d..7964244743b 100644
--- a/app/assets/javascripts/ide/stores/modules/commit/actions.js
+++ b/app/assets/javascripts/ide/stores/modules/commit/actions.js
@@ -127,6 +127,8 @@ export const updateFilesAfterCommit = (
       },
       { root: true },
     );
+
+    dispatch('updateTempFlagForEntry', { entry, tempFile: false }, { root: true });
   });
 
   commit(rootTypes.REMOVE_ALL_CHANGES_FILES, null, { root: true });
diff --git a/app/assets/javascripts/ide/stores/mutation_types.js b/app/assets/javascripts/ide/stores/mutation_types.js
index e3f504e5ab0..08a5a54ad69 100644
--- a/app/assets/javascripts/ide/stores/mutation_types.js
+++ b/app/assets/javascripts/ide/stores/mutation_types.js
@@ -53,3 +53,5 @@ export const UPDATE_DELAY_VIEWER_CHANGE = 'UPDATE_DELAY_VIEWER_CHANGE';
 
 export const ADD_PENDING_TAB = 'ADD_PENDING_TAB';
 export const REMOVE_PENDING_TAB = 'REMOVE_PENDING_TAB';
+
+export const UPDATE_TEMP_FLAG = 'UPDATE_TEMP_FLAG';
diff --git a/app/assets/javascripts/ide/stores/mutations.js b/app/assets/javascripts/ide/stores/mutations.js
index 5e5eb831662..5c1db1d245b 100644
--- a/app/assets/javascripts/ide/stores/mutations.js
+++ b/app/assets/javascripts/ide/stores/mutations.js
@@ -4,6 +4,7 @@ import mergeRequestMutation from './mutations/merge_request';
 import fileMutations from './mutations/file';
 import treeMutations from './mutations/tree';
 import branchMutations from './mutations/branch';
+import { sortTree } from './utils';
 
 export default {
   [types.SET_INITIAL_DATA](state, data) {
@@ -68,7 +69,7 @@ export default {
           f => foundEntry.tree.find(e => e.path === f.path) === undefined,
         );
         Object.assign(foundEntry, {
-          tree: foundEntry.tree.concat(tree),
+          tree: sortTree(foundEntry.tree.concat(tree)),
         });
       }
 
@@ -81,10 +82,16 @@ export default {
 
     if (!foundEntry) {
       Object.assign(state.trees[`${projectId}/${branchId}`], {
-        tree: state.trees[`${projectId}/${branchId}`].tree.concat(data.treeList),
+        tree: sortTree(state.trees[`${projectId}/${branchId}`].tree.concat(data.treeList)),
       });
     }
   },
+  [types.UPDATE_TEMP_FLAG](state, { path, tempFile }) {
+    Object.assign(state.entries[path], {
+      tempFile,
+      changed: tempFile,
+    });
+  },
   [types.UPDATE_VIEWER](state, viewer) {
     Object.assign(state, {
       viewer,
diff --git a/app/assets/javascripts/ide/stores/utils.js b/app/assets/javascripts/ide/stores/utils.js
index 05a019de54f..fefdbc3222f 100644
--- a/app/assets/javascripts/ide/stores/utils.js
+++ b/app/assets/javascripts/ide/stores/utils.js
@@ -32,6 +32,7 @@ export const dataStructure = () => ({
   raw: '',
   content: '',
   parentTreeUrl: '',
+  parentPath: '',
   renderError: false,
   base64: false,
   editorRow: 1,
@@ -63,6 +64,7 @@ export const decorateData = entity => {
     previewMode,
     file_lock,
     html,
+    parentPath = '',
   } = entity;
 
   return {
@@ -79,6 +81,7 @@ export const decorateData = entity => {
     opened,
     active,
     parentTreeUrl,
+    parentPath,
     changed,
     renderError,
     content,
@@ -119,8 +122,8 @@ const sortTreesByTypeAndName = (a, b) => {
   } else if (a.type === 'blob' && b.type === 'tree') {
     return 1;
   }
-  if (a.name.toLowerCase() < b.name.toLowerCase()) return -1;
-  if (a.name.toLowerCase() > b.name.toLowerCase()) return 1;
+  if (a.name < b.name) return -1;
+  if (a.name > b.name) return 1;
   return 0;
 };
 
diff --git a/app/assets/javascripts/ide/stores/workers/files_decorator_worker.js b/app/assets/javascripts/ide/stores/workers/files_decorator_worker.js
index a1673276900..949758c1aa6 100644
--- a/app/assets/javascripts/ide/stores/workers/files_decorator_worker.js
+++ b/app/assets/javascripts/ide/stores/workers/files_decorator_worker.js
@@ -29,6 +29,7 @@ self.addEventListener('message', e => {
             tempFile,
             changed: tempFile,
             opened: tempFile,
+            parentPath: parentFolder ? parentFolder.path : null,
           });
 
           Object.assign(acc, {
@@ -66,6 +67,7 @@ self.addEventListener('message', e => {
         content,
         base64,
         previewMode: viewerInformationForPath(blobName),
+        parentPath: fileFolder ? fileFolder.path : null,
       });
 
       Object.assign(acc, {
diff --git a/app/assets/javascripts/vue_shared/components/file_icon.vue b/app/assets/javascripts/vue_shared/components/file_icon.vue
index ee1c3498748..be2755452e2 100644
--- a/app/assets/javascripts/vue_shared/components/file_icon.vue
+++ b/app/assets/javascripts/vue_shared/components/file_icon.vue
@@ -1,9 +1,9 @@
 <script>
-  import getIconForFile from './file_icon/file_icon_map';
-  import loadingIcon from '../../vue_shared/components/loading_icon.vue';
-  import icon from '../../vue_shared/components/icon.vue';
+import getIconForFile from './file_icon/file_icon_map';
+import loadingIcon from '../../vue_shared/components/loading_icon.vue';
+import icon from '../../vue_shared/components/icon.vue';
 
-  /* This is a re-usable vue component for rendering a svg sprite
+/* This is a re-usable vue component for rendering a svg sprite
     icon
 
     Sample configuration:
@@ -15,60 +15,60 @@
     />
 
   */
-  export default {
-    components: {
-      loadingIcon,
-      icon,
+export default {
+  components: {
+    loadingIcon,
+    icon,
+  },
+  props: {
+    fileName: {
+      type: String,
+      required: true,
     },
-    props: {
-      fileName: {
-        type: String,
-        required: true,
-      },
 
-      folder: {
-        type: Boolean,
-        required: false,
-        default: false,
-      },
+    folder: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
 
-      opened: {
-        type: Boolean,
-        required: false,
-        default: false,
-      },
+    opened: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
 
-      loading: {
-        type: Boolean,
-        required: false,
-        default: false,
-      },
+    loading: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
 
-      size: {
-        type: Number,
-        required: false,
-        default: 16,
-      },
+    size: {
+      type: Number,
+      required: false,
+      default: 16,
+    },
 
-      cssClasses: {
-        type: String,
-        required: false,
-        default: '',
-      },
+    cssClasses: {
+      type: String,
+      required: false,
+      default: '',
+    },
+  },
+  computed: {
+    spriteHref() {
+      const iconName = getIconForFile(this.fileName) || 'file';
+      return `${gon.sprite_file_icons}#${iconName}`;
+    },
+    folderIconName() {
+      return this.opened ? 'folder-open' : 'folder';
     },
-    computed: {
-      spriteHref() {
-        const iconName = getIconForFile(this.fileName) || 'file';
-        return `${gon.sprite_file_icons}#${iconName}`;
-      },
-      folderIconName() {
-        return this.opened ? 'folder-open' : 'folder';
-      },
-      iconSizeClass() {
-        return this.size ? `s${this.size}` : '';
-      },
+    iconSizeClass() {
+      return this.size ? `s${this.size}` : '';
     },
-  };
+  },
+};
 </script>
 <template>
   <span>
@@ -82,6 +82,7 @@
       v-if="!loading && folder"
       :name="folderIconName"
       :size="size"
+      css-classes="folder-icon"
     />
     <loading-icon
       v-if="loading"
diff --git a/app/assets/stylesheets/pages/repo.scss b/app/assets/stylesheets/pages/repo.scss
index f58f2579050..de9377a2fe0 100644
--- a/app/assets/stylesheets/pages/repo.scss
+++ b/app/assets/stylesheets/pages/repo.scss
@@ -85,10 +85,8 @@
       }
     }
 
-    &.folder {
-      svg {
-        fill: $gl-text-color-secondary;
-      }
+    .folder-icon {
+      fill: $gl-text-color-secondary;
     }
   }
 
@@ -429,7 +427,7 @@
   .projects-sidebar {
     display: flex;
     flex-direction: column;
-    height: 100%;
+    flex: 1;
 
     .context-header {
       width: auto;