Add latest changes from gitlab-org/gitlab@13-4-stable-ee

5 files changed, 155 insertions, 102 deletions

diff --git a/spec/frontend/packages/shared/components/__snapshots__/package_list_row_spec.js.snap b/spec/frontend/packages/shared/components/__snapshots__/package_list_row_spec.js.snap
index eab8d7b67cc..6aaefed92d0 100644
--- a/spec/frontend/packages/shared/components/__snapshots__/package_list_row_spec.js.snap
+++ b/spec/frontend/packages/shared/components/__snapshots__/package_list_row_spec.js.snap
@@ -2,99 +2,143 @@
 
 exports[`packages_list_row renders 1`] = `
 <div
-  class="gl-responsive-table-row"
-  data-qa-selector="packages-row"
+  class="gl-display-flex gl-flex-direction-column gl-border-b-solid gl-border-t-solid gl-border-t-1 gl-border-b-1 gl-border-t-transparent gl-border-b-gray-100"
+  data-qa-selector="package_row"
 >
   <div
-    class="table-section section-50 d-flex flex-md-column justify-content-between flex-wrap"
+    class="gl-display-flex gl-align-items-center gl-py-5"
   >
-    <div
-      class="d-flex align-items-center mr-2"
-    >
-      <gl-link-stub
-        class="text-dark font-weight-bold mb-md-1"
-        data-qa-selector="package_link"
-        href="foo"
-      >
-        
-        Test package
-      
-      </gl-link-stub>
-       
-      <!---->
-    </div>
+    <!---->
      
     <div
-      class="d-flex text-secondary text-truncate mt-md-2"
+      class="gl-display-flex gl-xs-flex-direction-column gl-justify-content-space-between gl-align-items-stretch gl-flex-fill-1"
     >
-      <span>
-        1.0.0
-      </span>
-       
-      <!---->
-       
       <div
-        class="d-flex align-items-center"
+        class="gl-display-flex gl-flex-direction-column gl-justify-content-space-between gl-xs-mb-3 gl-min-w-0 gl-flex-grow-1"
       >
-        <gl-icon-stub
-          class="text-secondary ml-2 mr-1"
-          name="review-list"
-          size="16"
-        />
+        <div
+          class="gl-display-flex gl-align-items-center gl-text-body gl-font-weight-bold gl-min-h-6 gl-min-w-0"
+        >
+          <div
+            class="gl-display-flex gl-align-items-center gl-mr-3 gl-min-w-0"
+          >
+            <gl-link-stub
+              class="gl-text-body gl-min-w-0"
+              data-qa-selector="package_link"
+              href="foo"
+            >
+              <gl-truncate-stub
+                position="end"
+                text="Test package"
+              />
+            </gl-link-stub>
+             
+            <!---->
+          </div>
+           
+          <!---->
+        </div>
          
-        <gl-link-stub
-          class="text-secondary"
-          data-testid="packages-row-project"
-          href="/foo/bar/baz"
+        <div
+          class="gl-display-flex gl-align-items-center gl-text-gray-500 gl-mt-1 gl-min-h-6 gl-min-w-0 gl-flex-fill-1"
         >
-          
-        </gl-link-stub>
+          <div
+            class="gl-display-flex"
+          >
+            <span>
+              1.0.0
+            </span>
+             
+            <!---->
+             
+            <div
+              class="gl-display-flex gl-align-items-center"
+            >
+              <gl-icon-stub
+                class="gl-ml-3 gl-mr-2 gl-min-w-0"
+                name="review-list"
+                size="16"
+              />
+               
+              <gl-link-stub
+                class="gl-text-body gl-min-w-0"
+                data-testid="packages-row-project"
+                href="/foo/bar/baz"
+              >
+                <gl-truncate-stub
+                  position="end"
+                  text="foo/bar/baz"
+                />
+              </gl-link-stub>
+            </div>
+             
+            <div
+              class="d-flex align-items-center"
+              data-testid="package-type"
+            >
+              <gl-icon-stub
+                class="gl-ml-3 gl-mr-2"
+                name="package"
+                size="16"
+              />
+               
+              <span>
+                Maven
+              </span>
+            </div>
+          </div>
+        </div>
       </div>
        
       <div
-        class="d-flex align-items-center"
-        data-testid="package-type"
+        class="gl-display-flex gl-flex-direction-column gl-sm-align-items-flex-end gl-justify-content-space-between gl-text-gray-500 gl-flex-shrink-0"
       >
-        <gl-icon-stub
-          class="text-secondary ml-2 mr-1"
-          name="package"
-          size="16"
-        />
+        <div
+          class="gl-display-flex gl-align-items-center gl-sm-text-body gl-sm-font-weight-bold gl-min-h-6"
+        >
+          <publish-method-stub
+            packageentity="[object Object]"
+          />
+        </div>
          
-        <span>
-          Maven
-        </span>
+        <div
+          class="gl-display-flex gl-align-items-center gl-mt-1 gl-min-h-6"
+        >
+          <span>
+            <gl-sprintf-stub
+              message="Created %{timestamp}"
+            />
+          </span>
+        </div>
       </div>
     </div>
-  </div>
-   
-  <div
-    class="table-section d-flex flex-md-column justify-content-between align-items-md-end section-40"
-  >
-    <publish-method-stub
-      packageentity="[object Object]"
-    />
      
     <div
-      class="text-secondary order-0 order-md-1 mt-md-2"
+      class="gl-w-9 gl-display-none gl-display-sm-flex gl-justify-content-end gl-pr-1"
     >
-      <gl-sprintf-stub
-        message="Created %{timestamp}"
+      <gl-button-stub
+        aria-label="Remove package"
+        category="primary"
+        data-testid="action-delete"
+        icon="remove"
+        size="medium"
+        title="Remove package"
+        variant="danger"
       />
     </div>
   </div>
    
   <div
-    class="table-section section-10 d-flex justify-content-end"
+    class="gl-display-flex"
   >
-    <gl-button-stub
-      aria-label="Remove package"
-      category="primary"
-      data-testid="action-delete"
-      icon="remove"
-      size="medium"
-      title="Remove package"
-      variant="danger"
+    <div
+      class="gl-w-7"
+    />
+     
+    <!---->
+     
+    <div
+      class="gl-w-9"
     />
   </div>
 </div>
diff --git a/spec/frontend/packages/shared/components/__snapshots__/publish_method_spec.js.snap b/spec/frontend/packages/shared/components/__snapshots__/publish_method_spec.js.snap
index 5ecca63d41d..9a0c52cee47 100644
--- a/spec/frontend/packages/shared/components/__snapshots__/publish_method_spec.js.snap
+++ b/spec/frontend/packages/shared/components/__snapshots__/publish_method_spec.js.snap
@@ -2,35 +2,37 @@
 
 exports[`publish_method renders 1`] = `
 <div
-  class="d-flex align-items-center text-secondary order-1 order-md-0 mb-md-1"
+  class="gl-display-flex gl-align-items-center"
 >
   <gl-icon-stub
-    class="mr-1"
+    class="gl-mr-2"
     name="git-merge"
     size="16"
   />
    
-  <strong
-    class="mr-1 text-dark"
+  <span
+    class="gl-mr-2"
+    data-testid="pipeline-ref"
   >
     branch-name
-  </strong>
+  </span>
    
   <gl-icon-stub
-    class="mr-1"
+    class="gl-mr-2"
     name="commit"
     size="16"
   />
    
   <gl-link-stub
-    class="mr-1"
+    class="gl-mr-2"
+    data-testid="pipeline-sha"
     href="../commit/sha-baz"
   >
     sha-baz
   </gl-link-stub>
    
   <clipboard-button-stub
-    cssclass="border-0 text-secondary py-0 px-1"
+    cssclass="gl-border-0 gl-py-0 gl-px-2"
     text="sha-baz"
     title="Copy commit SHA"
     tooltipplacement="top"
diff --git a/spec/frontend/packages/shared/components/package_list_row_spec.js b/spec/frontend/packages/shared/components/package_list_row_spec.js
index c0ae972d519..f4eabf7bb67 100644
--- a/spec/frontend/packages/shared/components/package_list_row_spec.js
+++ b/spec/frontend/packages/shared/components/package_list_row_spec.js
@@ -1,6 +1,7 @@
-import { mount, shallowMount } from '@vue/test-utils';
+import { shallowMount } from '@vue/test-utils';
 import PackagesListRow from '~/packages/shared/components/package_list_row.vue';
 import PackageTags from '~/packages/shared/components/package_tags.vue';
+import ListItem from '~/vue_shared/components/registry/list_item.vue';
 import { packageList } from '../../mock_data';
 
 describe('packages_list_row', () => {
@@ -17,14 +18,12 @@ describe('packages_list_row', () => {
   const mountComponent = ({
     isGroup = false,
     packageEntity = packageWithoutTags,
-    shallow = true,
     showPackageType = true,
     disableDelete = false,
   } = {}) => {
-    const mountFunc = shallow ? shallowMount : mount;
-
-    wrapper = mountFunc(PackagesListRow, {
+    wrapper = shallowMount(PackagesListRow, {
       store,
+      stubs: { ListItem },
       propsData: {
         packageLink: 'foo',
         packageEntity,
@@ -92,15 +91,14 @@ describe('packages_list_row', () => {
   });
 
   describe('delete event', () => {
-    beforeEach(() => mountComponent({ packageEntity: packageWithoutTags, shallow: false }));
+    beforeEach(() => mountComponent({ packageEntity: packageWithoutTags }));
 
-    it('emits the packageToDelete event when the delete button is clicked', () => {
-      findDeleteButton().trigger('click');
+    it('emits the packageToDelete event when the delete button is clicked', async () => {
+      findDeleteButton().vm.$emit('click');
 
-      return wrapper.vm.$nextTick().then(() => {
-        expect(wrapper.emitted('packageToDelete')).toBeTruthy();
-        expect(wrapper.emitted('packageToDelete')[0]).toEqual([packageWithoutTags]);
-      });
+      await wrapper.vm.$nextTick();
+      expect(wrapper.emitted('packageToDelete')).toBeTruthy();
+      expect(wrapper.emitted('packageToDelete')[0]).toEqual([packageWithoutTags]);
     });
   });
 });
diff --git a/spec/frontend/packages/shared/components/packages_list_loader_spec.js b/spec/frontend/packages/shared/components/packages_list_loader_spec.js
index c8c2e2a4ba4..115a3a7095d 100644
--- a/spec/frontend/packages/shared/components/packages_list_loader_spec.js
+++ b/spec/frontend/packages/shared/components/packages_list_loader_spec.js
@@ -12,8 +12,8 @@ describe('PackagesListLoader', () => {
     });
   };
 
-  const getShapes = () => wrapper.vm.desktopShapes;
-  const findSquareButton = () => wrapper.find({ ref: 'button-loader' });
+  const findDesktopShapes = () => wrapper.find('[data-testid="desktop-loader"]');
+  const findMobileShapes = () => wrapper.find('[data-testid="mobile-loader"]');
 
   beforeEach(createComponent);
 
@@ -22,21 +22,30 @@ describe('PackagesListLoader', () => {
     wrapper = null;
   });
 
-  describe('when used for projects', () => {
-    it('should return 5 rects with last one being a square', () => {
-      expect(getShapes()).toHaveLength(5);
-      expect(findSquareButton().exists()).toBe(true);
+  describe('desktop loader', () => {
+    it('produces the right loader', () => {
+      expect(findDesktopShapes().findAll('rect[width="1000"]')).toHaveLength(20);
+    });
+
+    it('has the correct classes', () => {
+      expect(findDesktopShapes().classes()).toEqual([
+        'gl-display-none',
+        'gl-display-sm-flex',
+        'gl-flex-direction-column',
+      ]);
     });
   });
 
-  describe('when used for groups', () => {
-    beforeEach(() => {
-      createComponent({ isGroup: true });
+  describe('mobile loader', () => {
+    it('produces the right loader', () => {
+      expect(findMobileShapes().findAll('rect[height="170"]')).toHaveLength(5);
     });
 
-    it('should return 5 rects with no square', () => {
-      expect(getShapes()).toHaveLength(5);
-      expect(findSquareButton().exists()).toBe(false);
+    it('has the correct classes', () => {
+      expect(findMobileShapes().classes()).toEqual([
+        'gl-flex-direction-column',
+        'gl-display-sm-none',
+      ]);
     });
   });
 });
diff --git a/spec/frontend/packages/shared/components/publish_method_spec.js b/spec/frontend/packages/shared/components/publish_method_spec.js
index bb9287c1204..6014774990c 100644
--- a/spec/frontend/packages/shared/components/publish_method_spec.js
+++ b/spec/frontend/packages/shared/components/publish_method_spec.js
@@ -7,9 +7,9 @@ describe('publish_method', () => {
 
   const [packageWithoutPipeline, packageWithPipeline] = packageList;
 
-  const findPipelineRef = () => wrapper.find({ ref: 'pipeline-ref' });
-  const findPipelineSha = () => wrapper.find({ ref: 'pipeline-sha' });
-  const findManualPublish = () => wrapper.find({ ref: 'manual-ref' });
+  const findPipelineRef = () => wrapper.find('[data-testid="pipeline-ref"]');
+  const findPipelineSha = () => wrapper.find('[data-testid="pipeline-sha"]');
+  const findManualPublish = () => wrapper.find('[data-testid="manually-published"]');
 
   const mountComponent = (packageEntity = {}, isGroup = false) => {
     wrapper = shallowMount(PublishMethod, {