UX improvements to Vue file listing refactor

Improves the loading state of the table
Fixes some tooltip placements

app/assets/javascripts/repository/components/last_commit.vue

@@ -128,7 +128,7 @@ export default {
           <div class="ci-status-link">
             <gl-link
               v-if="commit.latestPipeline"
-              v-gl-tooltip
+              v-gl-tooltip.left
               :href="commit.latestPipeline.detailedStatus.detailsPath"
               :title="statusTitle"
               class="js-commit-pipeline"

app/assets/javascripts/repository/components/table/index.vue

 <script>
-import { GlLoadingIcon } from '@gitlab/ui';
+import { GlSkeletonLoading } from '@gitlab/ui';
 import createFlash from '~/flash';
 import { sprintf, __ } from '../../../locale';
 import getRefMixin from '../../mixins/get_ref';
@@ -13,7 +13,7 @@ const PAGE_SIZE = 100;
 
 export default {
   components: {
-    GlLoadingIcon,
+    GlSkeletonLoading,
     TableHeader,
     TableRow,
     ParentRow,
@@ -44,6 +44,15 @@ export default {
   },
   computed: {
     tableCaption() {
+      if (this.isLoadingFiles) {
+        return sprintf(
+          __(
+            'Loading files, directories, and submodules in the path %{path} for commit reference %{ref}',
+          ),
+          { path: this.path, ref: this.ref },
+        );
+      }
+
       return sprintf(
         __('Files, directories, and submodules in the path %{path} for commit reference %{ref}'),
         { path: this.path, ref: this.ref },
@@ -117,12 +126,7 @@ export default {
 <template>
   <div class="tree-content-holder">
     <div class="table-holder bordered-box">
-      <table class="table tree-table qa-file-tree" aria-live="polite">
-        <caption class="sr-only">
-          {{
-            tableCaption
-          }}
-        </caption>
+      <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" />
@@ -141,9 +145,15 @@ export default {
               :lfs-oid="entry.lfsOid"
             />
           </template>
+          <template v-if="isLoadingFiles">
+            <tr v-for="i in 5" :key="i" aria-hidden="true">
+              <td><gl-skeleton-loading :lines="1" class="h-auto" /></td>
+              <td><gl-skeleton-loading :lines="1" class="h-auto" /></td>
+              <td><gl-skeleton-loading :lines="1" class="ml-auto h-auto w-50" /></td>
+            </tr>
+          </template>
         </tbody>
       </table>
-      <gl-loading-icon v-show="isLoadingFiles" class="my-3" size="md" />
     </div>
   </div>
 </template>

app/assets/javascripts/repository/components/table/row.vue

@@ -124,13 +124,18 @@ export default {
       </template>
     </td>
     <td class="d-none d-sm-table-cell tree-commit">
-      <gl-link v-if="commit" :href="commit.commitPath" class="str-truncated-100 tree-commit-link">
+      <gl-link
+        v-if="commit"
+        :href="commit.commitPath"
+        :title="commit.message"
+        class="str-truncated-100 tree-commit-link"
+      >
         {{ commit.message }}
       </gl-link>
       <gl-skeleton-loading v-else :lines="1" class="h-auto" />
     </td>
     <td class="tree-time-ago text-right">
-      <timeago-tooltip v-if="commit" :time="commit.committedDate" tooltip-placement="bottom" />
+      <timeago-tooltip v-if="commit" :time="commit.committedDate" />
       <gl-skeleton-loading v-else :lines="1" class="ml-auto h-auto w-50" />
     </td>
   </tr>

app/assets/javascripts/vue_shared/components/time_ago_tooltip.vue

@@ -32,7 +32,7 @@ export default {
 </script>
 <template>
   <time
-    v-gl-tooltip="{ placement: tooltipPlacement }"
+    v-gl-tooltip.viewport="{ placement: tooltipPlacement }"
     :class="cssClass"
     :title="tooltipTitle(time)"
     v-text="timeFormated(time)"

locale/gitlab.pot

@@ -9954,6 +9954,9 @@ msgstr ""
 msgid "Loading contribution stats for group members"
 msgstr ""
 
+msgid "Loading files, directories, and submodules in the path %{path} for commit reference %{ref}"
+msgstr ""
+
 msgid "Loading functions timed out. Please reload the page to try again."
 msgstr ""
 

spec/frontend/repository/components/table/index_spec.js

 import { shallowMount } from '@vue/test-utils';
-import { GlLoadingIcon } from '@gitlab/ui';
+import { GlSkeletonLoading } from '@gitlab/ui';
 import Table from '~/repository/components/table/index.vue';
 
 let vm;
@@ -35,7 +35,7 @@ describe('Repository table component', () => {
 
     vm.setData({ ref });
 
-    expect(vm.find('caption').text()).toEqual(
+    expect(vm.find('.table').attributes('aria-label')).toEqual(
       `Files, directories, and submodules in the path ${path} for commit reference ${ref}`,
     );
   });
@@ -45,7 +45,7 @@ describe('Repository table component', () => {
 
     vm.setData({ isLoadingFiles: true });
 
-    expect(vm.find(GlLoadingIcon).isVisible()).toBe(true);
+    expect(vm.find(GlSkeletonLoading).exists()).toBe(true);
   });
 
   describe('normalizeData', () => {