Add latest changes from gitlab-org/gitlab@master

6 files changed, 61 insertions, 9 deletions

diff --git a/app/assets/javascripts/repository/components/last_commit.vue b/app/assets/javascripts/repository/components/last_commit.vue
index 70678b0db37..8e7529899c0 100644
--- a/app/assets/javascripts/repository/components/last_commit.vue
+++ b/app/assets/javascripts/repository/components/last_commit.vue
@@ -90,7 +90,7 @@ export default {
 
 <template>
   <div class="info-well d-none d-sm-flex project-last-commit commit p-3">
-    <gl-loading-icon v-if="isLoading" size="md" class="m-auto" />
+    <gl-loading-icon v-if="isLoading" size="md" color="dark" class="m-auto" />
     <template v-else>
       <user-avatar-link
         v-if="commit.author"
diff --git a/app/assets/javascripts/repository/components/preview/index.vue b/app/assets/javascripts/repository/components/preview/index.vue
index 6b3822151ff..2bc93c3f1c1 100644
--- a/app/assets/javascripts/repository/components/preview/index.vue
+++ b/app/assets/javascripts/repository/components/preview/index.vue
@@ -44,7 +44,7 @@ export default {
       </div>
     </div>
     <div class="blob-viewer">
-      <gl-loading-icon v-if="loading > 0" size="md" class="my-4 mx-auto" />
+      <gl-loading-icon v-if="loading > 0" size="md" color="dark" class="my-4 mx-auto" />
       <div v-else-if="readme" v-html="readme.html"></div>
     </div>
   </article>
diff --git a/app/assets/javascripts/repository/components/table/index.vue b/app/assets/javascripts/repository/components/table/index.vue
index 8f2e9264bca..29a3340b83d 100644
--- a/app/assets/javascripts/repository/components/table/index.vue
+++ b/app/assets/javascripts/repository/components/table/index.vue
@@ -34,6 +34,11 @@ export default {
       type: Boolean,
       required: true,
     },
+    loadingPath: {
+      type: String,
+      required: false,
+      default: '',
+    },
   },
   data() {
     return {
@@ -69,7 +74,12 @@ export default {
       <table :aria-label="tableCaption" class="table tree-table qa-file-tree" aria-live="polite">
         <table-header v-once />
         <tbody>
-          <parent-row v-show="showParentRow" :commit-ref="ref" :path="path" />
+          <parent-row
+            v-show="showParentRow"
+            :commit-ref="ref"
+            :path="path"
+            :loading-path="loadingPath"
+          />
           <template v-for="val in entries">
             <table-row
               v-for="entry in val"
@@ -84,6 +94,7 @@ export default {
               :url="entry.webUrl"
               :submodule-tree-url="entry.treeUrl"
               :lfs-oid="entry.lfsOid"
+              :loading-path="loadingPath"
             />
           </template>
           <template v-if="isLoading">
diff --git a/app/assets/javascripts/repository/components/table/parent_row.vue b/app/assets/javascripts/repository/components/table/parent_row.vue
index 3c39f404226..70a188f98cc 100644
--- a/app/assets/javascripts/repository/components/table/parent_row.vue
+++ b/app/assets/javascripts/repository/components/table/parent_row.vue
@@ -1,5 +1,10 @@
 <script>
+import { GlLoadingIcon } from '@gitlab/ui';
+
 export default {
+  components: {
+    GlLoadingIcon,
+  },
   props: {
     commitRef: {
       type: String,
@@ -9,13 +14,21 @@ export default {
       type: String,
       required: true,
     },
+    loadingPath: {
+      type: String,
+      required: false,
+      default: null,
+    },
   },
   computed: {
-    parentRoute() {
+    parentPath() {
       const splitArray = this.path.split('/');
       splitArray.pop();
 
-      return { path: `/tree/${this.commitRef}/${splitArray.join('/')}` };
+      return splitArray.join('/');
+    },
+    parentRoute() {
+      return { path: `/tree/${this.commitRef}/${this.parentPath}` };
     },
   },
   methods: {
@@ -29,7 +42,13 @@ export default {
 <template>
   <tr class="tree-item">
     <td colspan="3" class="tree-item-file-name" @click.self="clickRow">
-      <router-link :to="parentRoute" :aria-label="__('Go to parent')">
+      <gl-loading-icon
+        v-if="parentPath === loadingPath"
+        size="sm"
+        inline
+        class="d-inline-block align-text-bottom"
+      />
+      <router-link v-else :to="parentRoute" :aria-label="__('Go to parent')">
         ..
       </router-link>
     </td>
diff --git a/app/assets/javascripts/repository/components/table/row.vue b/app/assets/javascripts/repository/components/table/row.vue
index cf0457a2abf..a8e13241c37 100644
--- a/app/assets/javascripts/repository/components/table/row.vue
+++ b/app/assets/javascripts/repository/components/table/row.vue
@@ -1,5 +1,5 @@
 <script>
-import { GlBadge, GlLink, GlSkeletonLoading, GlTooltipDirective } from '@gitlab/ui';
+import { GlBadge, GlLink, GlSkeletonLoading, GlTooltipDirective, GlLoadingIcon } from '@gitlab/ui';
 import { visitUrl } from '~/lib/utils/url_utility';
 import TimeagoTooltip from '~/vue_shared/components/time_ago_tooltip.vue';
 import Icon from '~/vue_shared/components/icon.vue';
@@ -12,6 +12,7 @@ export default {
     GlBadge,
     GlLink,
     GlSkeletonLoading,
+    GlLoadingIcon,
     TimeagoTooltip,
     Icon,
   },
@@ -76,6 +77,11 @@ export default {
       required: false,
       default: null,
     },
+    loadingPath: {
+      type: String,
+      required: false,
+      default: '',
+    },
   },
   data() {
     return {
@@ -125,7 +131,13 @@ export default {
 <template>
   <tr :class="`file_${id}`" class="tree-item" @click="openRow">
     <td class="tree-item-file-name">
-      <i :aria-label="type" role="img" :class="iconName" class="fa fa-fw"></i>
+      <gl-loading-icon
+        v-if="path === loadingPath"
+        size="sm"
+        inline
+        class="d-inline-block align-text-bottom fa-fw"
+      />
+      <i v-else :aria-label="type" role="img" :class="iconName" class="fa fa-fw"></i>
       <component :is="linkComponent" :to="routerLinkTo" :href="url" class="str-truncated">
         {{ fullPath }}
       </component>
diff --git a/app/assets/javascripts/repository/components/tree_content.vue b/app/assets/javascripts/repository/components/tree_content.vue
index 949e653fc8f..c30d6f05c6a 100644
--- a/app/assets/javascripts/repository/components/tree_content.vue
+++ b/app/assets/javascripts/repository/components/tree_content.vue
@@ -27,6 +27,11 @@ export default {
       required: false,
       default: '/',
     },
+    loadingPath: {
+      type: String,
+      required: false,
+      default: '',
+    },
   },
   data() {
     return {
@@ -109,7 +114,12 @@ export default {
 
 <template>
   <div>
-    <file-table :path="path" :entries="entries" :is-loading="isLoadingFiles" />
+    <file-table
+      :path="path"
+      :entries="entries"
+      :is-loading="isLoadingFiles"
+      :loading-path="loadingPath"
+    />
     <file-preview v-if="readme" :blob="readme" />
   </div>
 </template>