[ci skip]ce-6038-rebase-preserve-merge

Merge remote-tracking branch 'upstream/master' into ce-6038-rebase-preserve-merge

* upstream/master: (173 commits)
  Fix invalid link to GitLab.com architecture.md
  i18n: externalize strings from 'app/views/import'
  Remove Repository#lookup and unreachable rugged code
  refactor code based on feedback
  Trigger rails5 tests either by variable or ref name
  Fix link in help doc which was linking to old mono-repo, now in its own repo
  Allow Danger step to fail
  update webpack to v4.16
  Backport logger changes from EE
  Add the CI Job trigger as the build trigger
  Remove flaky and redundant expectations
  use fileuploader dynamic path method in uploads manager and add spec
  fix typo in uploads manager
  add small comment to download method in uploads manager
  refactor uploads manager
  Update 10.6-to-10.7.md
  Lazy-load performance bar UI
  Update .gitlab-ci.yml
  fixed test to correctly text relative URLs doesnt add query param if source & target projects match
  Add changelog entry
  ...

4 files changed, 183 insertions, 134 deletions

diff --git a/app/assets/javascripts/ide/components/new_dropdown/button.vue b/app/assets/javascripts/ide/components/new_dropdown/button.vue
new file mode 100644
index 00000000000..7682b34ce4d
--- /dev/null
+++ b/app/assets/javascripts/ide/components/new_dropdown/button.vue
@@ -0,0 +1,51 @@
+<script>
+import Icon from '~/vue_shared/components/icon.vue';
+
+export default {
+  components: {
+    Icon,
+  },
+  props: {
+    label: {
+      type: String,
+      required: false,
+      default: null,
+    },
+    icon: {
+      type: String,
+      required: true,
+    },
+    iconClasses: {
+      type: String,
+      required: false,
+      default: null,
+    },
+    showLabel: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
+  },
+  methods: {
+    clicked() {
+      this.$emit('click');
+    },
+  },
+};
+</script>
+
+<template>
+  <button
+    :aria-label="label"
+    type="button"
+    @click.stop.prevent="clicked"
+  >
+    <icon
+      :name="icon"
+      :css-classes="iconClasses"
+    />
+    <template v-if="showLabel">
+      {{ label }}
+    </template>
+  </button>
+</template>
diff --git a/app/assets/javascripts/ide/components/new_dropdown/index.vue b/app/assets/javascripts/ide/components/new_dropdown/index.vue
index 1e398d7e1aa..c29e49ba766 100644
--- a/app/assets/javascripts/ide/components/new_dropdown/index.vue
+++ b/app/assets/javascripts/ide/components/new_dropdown/index.vue
@@ -3,12 +3,14 @@ import { mapActions } from 'vuex';
 import icon from '~/vue_shared/components/icon.vue';
 import newModal from './modal.vue';
 import upload from './upload.vue';
+import ItemButton from './button.vue';
 
 export default {
   components: {
     icon,
     newModal,
     upload,
+    ItemButton,
   },
   props: {
     branch: {
@@ -20,11 +22,13 @@ export default {
       required: false,
       default: '',
     },
+    mouseOver: {
+      type: Boolean,
+      required: true,
+    },
   },
   data() {
     return {
-      openModal: false,
-      modalType: '',
       dropdownOpen: false,
     };
   },
@@ -34,17 +38,18 @@ export default {
         this.$refs.dropdownMenu.scrollIntoView();
       });
     },
+    mouseOver() {
+      if (!this.mouseOver) {
+        this.dropdownOpen = false;
+      }
+    },
   },
   methods: {
-    ...mapActions(['createTempEntry']),
+    ...mapActions(['createTempEntry', 'openNewEntryModal']),
     createNewItem(type) {
-      this.modalType = type;
-      this.openModal = true;
+      this.openNewEntryModal({ type, path: this.path });
       this.dropdownOpen = false;
     },
-    hideModal() {
-      this.openModal = false;
-    },
     openDropdown() {
       this.dropdownOpen = !this.dropdownOpen;
     },
@@ -58,23 +63,19 @@ export default {
       :class="{
         show: dropdownOpen,
       }"
-      class="dropdown"
+      class="dropdown d-flex"
     >
       <button
+        :aria-label="__('Create new file or directory')"
         type="button"
-        class="btn btn-sm btn-default dropdown-toggle add-to-tree"
-        aria-label="Create new file or directory"
+        class="rounded border-0 d-flex ide-entry-dropdown-toggle"
         @click.stop="openDropdown()"
       >
         <icon
-          :size="12"
-          name="plus"
-          css-classes="float-left"
+          name="hamburger"
         />
         <icon
-          :size="12"
           name="arrow-down"
-          css-classes="float-left"
         />
       </button>
       <ul
@@ -82,39 +83,30 @@ export default {
         class="dropdown-menu dropdown-menu-right"
       >
         <li>
-          <a
-            href="#"
-            role="button"
-            @click.stop.prevent="createNewItem('blob')"
-          >
-            {{ __('New file') }}
-          </a>
+          <item-button
+            :label="__('New file')"
+            class="d-flex"
+            icon="doc-new"
+            icon-classes="mr-2"
+            @click="createNewItem('blob')"
+          />
         </li>
         <li>
           <upload
-            :branch-id="branch"
             :path="path"
             @create="createTempEntry"
           />
         </li>
         <li>
-          <a
-            href="#"
-            role="button"
-            @click.stop.prevent="createNewItem('tree')"
-          >
-            {{ __('New directory') }}
-          </a>
+          <item-button
+            :label="__('New directory')"
+            class="d-flex"
+            icon="folder-new"
+            icon-classes="mr-2"
+            @click="createNewItem('tree')"
+          />
         </li>
       </ul>
     </div>
-    <new-modal
-      v-if="openModal"
-      :type="modalType"
-      :branch-id="branch"
-      :path="path"
-      @hide="hideModal"
-      @create="createTempEntry"
-    />
   </div>
 </template>
diff --git a/app/assets/javascripts/ide/components/new_dropdown/modal.vue b/app/assets/javascripts/ide/components/new_dropdown/modal.vue
index 1e9668d5154..1867b7980d2 100644
--- a/app/assets/javascripts/ide/components/new_dropdown/modal.vue
+++ b/app/assets/javascripts/ide/components/new_dropdown/modal.vue
@@ -1,78 +1,70 @@
 <script>
 import { __ } from '~/locale';
-import DeprecatedModal from '~/vue_shared/components/deprecated_modal.vue';
+import { mapActions, mapState } from 'vuex';
+import GlModal from '~/vue_shared/components/gl_modal.vue';
 
 export default {
   components: {
-    DeprecatedModal,
-  },
-  props: {
-    branchId: {
-      type: String,
-      required: true,
-    },
-    type: {
-      type: String,
-      required: true,
-    },
-    path: {
-      type: String,
-      required: true,
-    },
+    GlModal,
   },
   data() {
     return {
-      entryName: this.path !== '' ? `${this.path}/` : '',
+      name: '',
     };
   },
   computed: {
+    ...mapState(['newEntryModal']),
+    entryName: {
+      get() {
+        return this.name || (this.newEntryModal.path !== '' ? `${this.newEntryModal.path}/` : '');
+      },
+      set(val) {
+        this.name = val;
+      },
+    },
     modalTitle() {
-      if (this.type === 'tree') {
+      if (this.newEntryModal.type === 'tree') {
         return __('Create new directory');
       }
 
       return __('Create new file');
     },
     buttonLabel() {
-      if (this.type === 'tree') {
+      if (this.newEntryModal.type === 'tree') {
         return __('Create directory');
       }
 
       return __('Create file');
     },
   },
-  mounted() {
-    this.$refs.fieldName.focus();
-  },
   methods: {
+    ...mapActions(['createTempEntry']),
     createEntryInStore() {
-      this.$emit('create', {
-        branchId: this.branchId,
-        name: this.entryName,
-        type: this.type,
+      this.createTempEntry({
+        name: this.name,
+        type: this.newEntryModal.type,
       });
-
-      this.hideModal();
     },
-    hideModal() {
-      this.$emit('hide');
+    focusInput() {
+      setTimeout(() => {
+        this.$refs.fieldName.focus();
+      });
     },
   },
 };
 </script>
 
 <template>
-  <deprecated-modal
-    :title="modalTitle"
-    :primary-button-label="buttonLabel"
-    kind="success"
-    @cancel="hideModal"
+  <gl-modal
+    id="ide-new-entry"
+    :header-title-text="modalTitle"
+    :footer-primary-button-text="buttonLabel"
+    footer-primary-button-variant="success"
     @submit="createEntryInStore"
+    @open="focusInput"
   >
-    <form
-      slot="body"
+    <div
       class="form-group row"
-      @submit.prevent="createEntryInStore"
     >
       <label class="label-light col-form-label col-sm-3">
         {{ __('Name') }}
@@ -85,6 +77,6 @@ export default {
           class="form-control"
         />
       </div>
-    </form>
-  </deprecated-modal>
+    </div>
+  </gl-modal>
 </template>
diff --git a/app/assets/javascripts/ide/components/new_dropdown/upload.vue b/app/assets/javascripts/ide/components/new_dropdown/upload.vue
index 677b282bd61..5b1743bb30e 100644
--- a/app/assets/javascripts/ide/components/new_dropdown/upload.vue
+++ b/app/assets/javascripts/ide/components/new_dropdown/upload.vue
@@ -1,71 +1,85 @@
 <script>
-  export default {
-    props: {
-      branchId: {
-        type: String,
-        required: true,
-      },
-      path: {
-        type: String,
-        required: false,
-        default: '',
-      },
+import Icon from '~/vue_shared/components/icon.vue';
+import ItemButton from './button.vue';
+
+export default {
+  components: {
+    Icon,
+    ItemButton,
+  },
+  props: {
+    path: {
+      type: String,
+      required: false,
+      default: '',
     },
-    mounted() {
-      this.$refs.fileUpload.addEventListener('change', this.openFile);
+    showLabel: {
+      type: Boolean,
+      required: false,
+      default: true,
     },
-    beforeDestroy() {
-      this.$refs.fileUpload.removeEventListener('change', this.openFile);
+    buttonCssClasses: {
+      type: String,
+      required: false,
+      default: null,
     },
-    methods: {
-      createFile(target, file, isText) {
-        const { name } = file;
-        let { result } = target;
+  },
+  mounted() {
+    this.$refs.fileUpload.addEventListener('change', this.openFile);
+  },
+  beforeDestroy() {
+    this.$refs.fileUpload.removeEventListener('change', this.openFile);
+  },
+  methods: {
+    createFile(target, file, isText) {
+      const { name } = file;
+      let { result } = target;
 
-        if (!isText) {
-          // eslint-disable-next-line prefer-destructuring
-          result = result.split('base64,')[1];
-        }
+      if (!isText) {
+        // eslint-disable-next-line prefer-destructuring
+        result = result.split('base64,')[1];
+      }
 
-        this.$emit('create', {
-          name: `${(this.path ? `${this.path}/` : '')}${name}`,
-          branchId: this.branchId,
-          type: 'blob',
-          content: result,
-          base64: !isText,
-        });
-      },
-      readFile(file) {
-        const reader = new FileReader();
-        const isText = file.type.match(/text.*/) !== null;
+      this.$emit('create', {
+        name: `${this.path ? `${this.path}/` : ''}${name}`,
+        type: 'blob',
+        content: result,
+        base64: !isText,
+      });
+    },
+    readFile(file) {
+      const reader = new FileReader();
+      const isText = file.type.match(/text.*/) !== null;
 
-        reader.addEventListener('load', e => this.createFile(e.target, file, isText), { once: true });
+      reader.addEventListener('load', e => this.createFile(e.target, file, isText), { once: true });
 
-        if (isText) {
-          reader.readAsText(file);
-        } else {
-          reader.readAsDataURL(file);
-        }
-      },
-      openFile() {
-        Array.from(this.$refs.fileUpload.files).forEach(file => this.readFile(file));
-      },
-      startFileUpload() {
-        this.$refs.fileUpload.click();
-      },
+      if (isText) {
+        reader.readAsText(file);
+      } else {
+        reader.readAsDataURL(file);
+      }
+    },
+    openFile() {
+      Array.from(this.$refs.fileUpload.files).forEach(file => this.readFile(file));
     },
-  };
+    startFileUpload() {
+      this.$refs.fileUpload.click();
+    },
+  },
+};
 </script>
 
 <template>
   <div>
-    <a
-      href="#"
-      role="button"
-      @click.stop.prevent="startFileUpload"
-    >
-      {{ __('Upload file') }}
-    </a>
+    <item-button
+      :class="buttonCssClasses"
+      :show-label="showLabel"
+      :icon-classes="showLabel ? 'mr-2' : ''"
+      :label="__('Upload file')"
+      class="d-flex"
+      icon="upload"
+      @click="startFileUpload"
+    />
     <input
       id="file-upload"
       ref="fileUpload"