Change show more button to be a table row

Issue: https://gitlab.com/gitlab-org/gitlab/-/issues/235672

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

 <script>
-import { GlSkeletonLoading } from '@gitlab/ui';
+import { GlSkeletonLoading, GlButton } from '@gitlab/ui';
 import { sprintf, __ } from '../../../locale';
 import getRefMixin from '../../mixins/get_ref';
 import projectPathQuery from '../../queries/project_path.query.graphql';
@@ -13,6 +13,7 @@ export default {
     TableHeader,
     TableRow,
     ParentRow,
+    GlButton,
   },
   mixins: [getRefMixin],
   apollo: {
@@ -39,6 +40,10 @@ export default {
       required: false,
       default: '',
     },
+    hasMore: {
+      type: Boolean,
+      required: true,
+    },
   },
   data() {
     return {
@@ -65,6 +70,11 @@ export default {
       return !this.isLoading && ['', '/'].indexOf(this.path) === -1;
     },
   },
+  methods: {
+    showMore() {
+      this.$emit('showMore');
+    },
+  },
 };
 </script>
 
@@ -110,6 +120,20 @@ export default {
               <td><gl-skeleton-loading :lines="1" class="ml-auto h-auto w-50" /></td>
             </tr>
           </template>
+          <template v-if="hasMore">
+            <tr>
+              <td align="center" colspan="3" class="gl-p-0!">
+                <gl-button
+                  variant="link"
+                  class="gl-display-flex gl-w-full gl-py-4!"
+                  :loading="isLoading"
+                  @click="showMore"
+                >
+                  {{ s__('ProjectFileTree|Show more') }}
+                </gl-button>
+              </td>
+            </tr>
+          </template>
         </tbody>
       </table>
     </div>

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

 <script>
-import { GlButton } from '@gitlab/ui';
 import { deprecatedCreateFlash as createFlash } from '~/flash';
 import { __ } from '../../locale';
 import FileTable from './table/index.vue';
@@ -17,7 +16,6 @@ export default {
   components: {
     FileTable,
     FilePreview,
-    GlButton,
   },
   mixins: [getRefMixin],
   apollo: {
@@ -127,7 +125,7 @@ export default {
         .concat(data.trees.pageInfo, data.submodules.pageInfo, data.blobs.pageInfo)
         .find(({ hasNextPage }) => hasNextPage);
     },
-    showMore() {
+    handleShowMore() {
       this.clickedShowMore = true;
       this.fetchFiles();
     },
@@ -142,20 +140,9 @@ export default {
       :entries="entries"
       :is-loading="isLoadingFiles"
       :loading-path="loadingPath"
+      :has-more="hasShowMore"
+      @showMore="handleShowMore"
     />
-    <div
-      v-if="hasShowMore"
-      class="gl-border-1 gl-border-gray-100 gl-rounded-base gl-border-t-none gl-border-b-solid gl-border-l-solid gl-border-r-solid gl-rounded-top-right-none gl-rounded-top-left-none gl-mt-n1"
-    >
-      <gl-button
-        variant="link"
-        class="gl-display-flex gl-w-full gl-py-4!"
-        :loading="isLoadingFiles"
-        @click="showMore"
-      >
-        {{ s__('ProjectFileTree|Show more') }}
-      </gl-button>
-    </div>
     <file-preview v-if="readme" :blob="readme" />
   </div>
 </template>

changelogs/unreleased/235672-convert-show-more-to-table-row.yml

+---
+title: Change show more button to be a table row so to remove manual CSS styling
+merge_request: 39788
+author:
+type: changed

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

 import { shallowMount } from '@vue/test-utils';
-import { GlSkeletonLoading } from '@gitlab/ui';
+import { GlSkeletonLoading, GlButton } from '@gitlab/ui';
 import Table from '~/repository/components/table/index.vue';
 import TableRow from '~/repository/components/table/row.vue';
 
@@ -34,12 +34,13 @@ const MOCK_BLOBS = [
   },
 ];
 
-function factory({ path, isLoading = false, entries = {} }) {
+function factory({ path, isLoading = false, hasMore = true, entries = {} }) {
   vm = shallowMount(Table, {
     propsData: {
       path,
       isLoading,
       entries,
+      hasMore,
     },
     mocks: {
       $apollo,
@@ -88,4 +89,27 @@ describe('Repository table component', () => {
     expect(rows.length).toEqual(3);
     expect(rows.at(2).attributes().mode).toEqual('120000');
   });
+
+  describe('Show more button', () => {
+    const showMoreButton = () => vm.find(GlButton);
+
+    it.each`
+      hasMore  | expectButtonToExist
+      ${true}  | ${true}
+      ${false} | ${false}
+    `('renders correctly', ({ hasMore, expectButtonToExist }) => {
+      factory({ path: '/', hasMore });
+      expect(showMoreButton().exists()).toBe(expectButtonToExist);
+    });
+
+    it('when is clicked, emits showMore event', async () => {
+      factory({ path: '/' });
+
+      showMoreButton().vm.$emit('click');
+
+      await vm.vm.$nextTick();
+
+      expect(vm.emitted('showMore')).toHaveLength(1);
+    });
+  });
 });

spec/frontend/repository/components/tree_content_spec.js

 import { shallowMount } from '@vue/test-utils';
-import { GlButton } from '@gitlab/ui';
 import TreeContent, { INITIAL_FETCH_COUNT } from '~/repository/components/tree_content.vue';
 import FilePreview from '~/repository/components/preview/index.vue';
+import FileTable from '~/repository/components/table/index.vue';
 
 let vm;
 let $apollo;
@@ -82,41 +82,36 @@ describe('Repository table component', () => {
     });
   });
 
-  describe('Show more button', () => {
-    const showMoreButton = () => vm.find(GlButton);
-
+  describe('FileTable showMore', () => {
     describe('when is present', () => {
+      const fileTable = () => vm.find(FileTable);
+
       beforeEach(async () => {
         factory('/');
-
-        vm.setData({ fetchCounter: 10, clickedShowMore: false });
-
-        await vm.vm.$nextTick();
       });
 
-      it('is not rendered once it is clicked', async () => {
-        showMoreButton().vm.$emit('click');
+      it('is changes hasShowMore to false when "showMore" event is emitted', async () => {
+        fileTable().vm.$emit('showMore');
+
         await vm.vm.$nextTick();
 
-        expect(showMoreButton().exists()).toBe(false);
+        expect(vm.vm.hasShowMore).toBe(false);
       });
 
-      it('is rendered', async () => {
-        expect(showMoreButton().exists()).toBe(true);
-      });
+      it('changes clickedShowMore when "showMore" event is emitted', async () => {
+        fileTable().vm.$emit('showMore');
 
-      it('changes clickedShowMore when show more button is clicked', async () => {
-        showMoreButton().vm.$emit('click');
+        await vm.vm.$nextTick();
 
         expect(vm.vm.clickedShowMore).toBe(true);
       });
 
-      it('triggers fetchFiles when show more button is clicked', async () => {
+      it('triggers fetchFiles when "showMore" event is emitted', () => {
         jest.spyOn(vm.vm, 'fetchFiles');
 
-        showMoreButton().vm.$emit('click');
+        fileTable().vm.$emit('showMore');
 
-        expect(vm.vm.fetchFiles).toBeCalled();
+        expect(vm.vm.fetchFiles).toHaveBeenCalled();
       });
     });
 
@@ -127,7 +122,7 @@ describe('Repository table component', () => {
 
       await vm.vm.$nextTick();
 
-      expect(showMoreButton().exists()).toBe(false);
+      expect(vm.vm.hasShowMore).toBe(false);
     });
 
     it('has limit of 1000 files on initial load', () => {