Merge branch '210567-new-container-registry-bugs-out-on-narrow-viewport' into 'master'

Fix container registry tag column on mobile

See merge request gitlab-org/gitlab!28206

app/assets/javascripts/registry/explorer/pages/details.vue

@@ -77,9 +77,10 @@ export default {
       return name;
     },
     fields() {
+      const tagClass = this.isDesktop ? 'w-25' : '';
       return [
         { key: LIST_KEY_CHECKBOX, label: '', class: 'gl-w-16' },
-        { key: LIST_KEY_TAG, label: LIST_LABEL_TAG, class: 'w-25' },
+        { key: LIST_KEY_TAG, label: LIST_LABEL_TAG, class: `${tagClass} js-tag-column` },
         { key: LIST_KEY_IMAGE_ID, label: LIST_LABEL_IMAGE_ID },
         { key: LIST_KEY_SIZE, label: LIST_LABEL_SIZE },
         { key: LIST_KEY_LAST_UPDATED, label: LIST_LABEL_LAST_UPDATED },

spec/frontend/registry/explorer/pages/details_spec.js

@@ -29,10 +29,11 @@ describe('Details Page', () => {
   const findAllDeleteButtons = () => wrapper.findAll('.js-delete-registry');
   const findAllCheckboxes = () => wrapper.findAll('.js-row-checkbox');
   const findCheckedCheckboxes = () => findAllCheckboxes().filter(c => c.attributes('checked'));
+  const findFirsTagColumn = () => wrapper.find('.js-tag-column');
 
   const routeId = window.btoa(JSON.stringify({ name: 'foo', tags_path: 'bar' }));
 
-  beforeEach(() => {
+  const mountComponent = options => {
     wrapper = mount(component, {
       store,
       stubs: {
@@ -49,7 +50,11 @@ describe('Details Page', () => {
         },
         $toast,
       },
+      ...options,
     });
+  };
+
+  beforeEach(() => {
     dispatchSpy = jest.spyOn(store, 'dispatch');
     store.dispatch('receiveTagsListSuccess', tagsListResponse);
     jest.spyOn(Tracking, 'event');
@@ -61,6 +66,7 @@ describe('Details Page', () => {
 
   describe('when isLoading is true', () => {
     beforeEach(() => {
+      mountComponent();
       store.dispatch('receiveTagsListSuccess', { ...tagsListResponse, data: [] });
       store.commit(SET_MAIN_LOADING, true);
     });
@@ -81,6 +87,10 @@ describe('Details Page', () => {
   });
 
   describe('table', () => {
+    beforeEach(() => {
+      mountComponent();
+    });
+
     it.each([
       'rowCheckbox',
       'rowName',
@@ -93,6 +103,10 @@ describe('Details Page', () => {
     });
 
     describe('header checkbox', () => {
+      beforeEach(() => {
+        mountComponent();
+      });
+
       it('exists', () => {
         expect(findMainCheckbox().exists()).toBe(true);
       });
@@ -116,6 +130,10 @@ describe('Details Page', () => {
     });
 
     describe('row checkbox', () => {
+      beforeEach(() => {
+        mountComponent();
+      });
+
       it('if selected adds item to selectedItems', () => {
         findFirstRowItem('rowCheckbox').vm.$emit('change');
         return wrapper.vm.$nextTick().then(() => {
@@ -135,6 +153,10 @@ describe('Details Page', () => {
     });
 
     describe('header delete button', () => {
+      beforeEach(() => {
+        mountComponent();
+      });
+
       it('exists', () => {
         expect(findBulkDeleteButton().exists()).toBe(true);
       });
@@ -182,6 +204,10 @@ describe('Details Page', () => {
     });
 
     describe('row delete button', () => {
+      beforeEach(() => {
+        mountComponent();
+      });
+
       it('exists', () => {
         expect(
           findAllDeleteButtons()
@@ -213,9 +239,39 @@ describe('Details Page', () => {
         });
       });
     });
+
+    describe('tag cell', () => {
+      describe('on desktop viewport', () => {
+        beforeEach(() => {
+          mountComponent();
+        });
+
+        it('has class w-25', () => {
+          expect(findFirsTagColumn().classes()).toContain('w-25');
+        });
+      });
+
+      describe('on mobile viewport', () => {
+        beforeEach(() => {
+          mountComponent({
+            data() {
+              return { isDesktop: false };
+            },
+          });
+        });
+
+        it('does not has class w-25', () => {
+          expect(findFirsTagColumn().classes()).not.toContain('w-25');
+        });
+      });
+    });
   });
 
   describe('pagination', () => {
+    beforeEach(() => {
+      mountComponent();
+    });
+
     it('exists', () => {
       expect(findPagination().exists()).toBe(true);
     });
@@ -238,6 +294,10 @@ describe('Details Page', () => {
   });
 
   describe('modal', () => {
+    beforeEach(() => {
+      mountComponent();
+    });
+
     it('exists', () => {
       expect(findDeleteModal().exists()).toBe(true);
     });