Add latest changes from gitlab-org/gitlab@15-1-stable-eev15.1.0-rc42

9 files changed, 45 insertions, 31 deletions

diff --git a/spec/frontend/design_management/components/design_presentation_spec.js b/spec/frontend/design_management/components/design_presentation_spec.js
index d79dde84d46..30eddcee86a 100644
--- a/spec/frontend/design_management/components/design_presentation_spec.js
+++ b/spec/frontend/design_management/components/design_presentation_spec.js
@@ -36,6 +36,7 @@ describe('Design management design presentation component', () => {
         discussions,
         isAnnotating,
         resolvedDiscussionsExpanded,
+        isLoading: false,
       },
       stubs,
     });
diff --git a/spec/frontend/design_management/components/design_sidebar_spec.js b/spec/frontend/design_management/components/design_sidebar_spec.js
index e8426216c1c..40968d9204a 100644
--- a/spec/frontend/design_management/components/design_sidebar_spec.js
+++ b/spec/frontend/design_management/components/design_sidebar_spec.js
@@ -52,6 +52,7 @@ describe('Design management design sidebar component', () => {
         design,
         resolvedDiscussionsExpanded: false,
         markdownPreviewPath: '',
+        isLoading: false,
         ...props,
       },
       mocks: {
diff --git a/spec/frontend/design_management/components/toolbar/__snapshots__/design_navigation_spec.js.snap b/spec/frontend/design_management/components/toolbar/__snapshots__/design_navigation_spec.js.snap
index 3cb48d7632f..b5a69b28a88 100644
--- a/spec/frontend/design_management/components/toolbar/__snapshots__/design_navigation_spec.js.snap
+++ b/spec/frontend/design_management/components/toolbar/__snapshots__/design_navigation_spec.js.snap
@@ -18,7 +18,7 @@ exports[`Design management pagination component renders navigation buttons 1`] =
       category="primary"
       class="js-previous-design"
       disabled="true"
-      icon="angle-left"
+      icon="chevron-lg-left"
       size="medium"
       title="Go to previous design"
       variant="default"
@@ -29,7 +29,7 @@ exports[`Design management pagination component renders navigation buttons 1`] =
       buttontextclasses=""
       category="primary"
       class="js-next-design"
-      icon="angle-right"
+      icon="chevron-lg-right"
       size="medium"
       title="Go to next design"
       variant="default"
diff --git a/spec/frontend/design_management/components/toolbar/__snapshots__/index_spec.js.snap b/spec/frontend/design_management/components/toolbar/__snapshots__/index_spec.js.snap
index 6dfd57906d8..3c4aa0f4d3c 100644
--- a/spec/frontend/design_management/components/toolbar/__snapshots__/index_spec.js.snap
+++ b/spec/frontend/design_management/components/toolbar/__snapshots__/index_spec.js.snap
@@ -56,7 +56,7 @@ exports[`Design management toolbar component renders design and updated data 1`]
     buttonclass=""
     buttonicon="archive"
     buttonsize="medium"
-    buttonvariant="warning"
+    buttonvariant="default"
     class="gl-ml-3"
     hasselecteddesigns="true"
     title="Archive design"
diff --git a/spec/frontend/design_management/pages/__snapshots__/index_spec.js.snap b/spec/frontend/design_management/pages/__snapshots__/index_spec.js.snap
index 243cc9d891d..be736184e60 100644
--- a/spec/frontend/design_management/pages/__snapshots__/index_spec.js.snap
+++ b/spec/frontend/design_management/pages/__snapshots__/index_spec.js.snap
@@ -45,7 +45,7 @@ exports[`Design management index page designs renders loading icon 1`] = `
     <gl-loading-icon-stub
       color="dark"
       label="Loading"
-      size="md"
+      size="lg"
     />
   </div>
    
diff --git a/spec/frontend/design_management/pages/design/__snapshots__/index_spec.js.snap b/spec/frontend/design_management/pages/design/__snapshots__/index_spec.js.snap
index 8f12dc8fb06..0f2857821ea 100644
--- a/spec/frontend/design_management/pages/design/__snapshots__/index_spec.js.snap
+++ b/spec/frontend/design_management/pages/design/__snapshots__/index_spec.js.snap
@@ -99,7 +99,7 @@ exports[`Design management design index page renders design index 1`] = `
       variant="link"
     >
       Resolved Comments (1)
-    
+      
     </gl-button-stub>
      
     <gl-popover-stub
@@ -112,8 +112,8 @@ exports[`Design management design index page renders design index 1`] = `
     >
       <p>
         
-        Comments you resolve can be viewed and unresolved by going to the "Resolved Comments" section below
-      
+          Comments you resolve can be viewed and unresolved by going to the "Resolved Comments" section below
+        
       </p>
        
       <a
@@ -144,19 +144,6 @@ exports[`Design management design index page renders design index 1`] = `
 </div>
 `;
 
-exports[`Design management design index page sets loading state 1`] = `
-<div
-  class="design-detail js-design-detail fixed-top gl-w-full gl-bottom-0 gl-display-flex gl-justify-content-center gl-flex-direction-column gl-lg-flex-direction-row"
->
-  <gl-loading-icon-stub
-    class="gl-align-self-center"
-    color="dark"
-    label="Loading"
-    size="xl"
-  />
-</div>
-`;
-
 exports[`Design management design index page with error GlAlert is rendered in correct position with correct content 1`] = `
 <div
   class="design-detail js-design-detail fixed-top gl-w-full gl-bottom-0 gl-display-flex gl-justify-content-center gl-flex-direction-column gl-lg-flex-direction-row"
@@ -185,8 +172,8 @@ exports[`Design management design index page with error GlAlert is rendered in c
         variant="danger"
       >
         
-          woops
-        
+        woops
+      
       </gl-alert-stub>
     </div>
      
diff --git a/spec/frontend/design_management/pages/design/index_spec.js b/spec/frontend/design_management/pages/design/index_spec.js
index 55d0fabe402..17a299c5de1 100644
--- a/spec/frontend/design_management/pages/design/index_spec.js
+++ b/spec/frontend/design_management/pages/design/index_spec.js
@@ -91,7 +91,12 @@ describe('Design management design index page', () => {
 
   function createComponent(
     { loading = false } = {},
-    { data = {}, intialRouteOptions = {}, provide = {} } = {},
+    {
+      data = {},
+      intialRouteOptions = {},
+      provide = {},
+      stubs = { ApolloMutation, DesignSidebar, DesignReplyForm },
+    } = {},
   ) {
     const $apollo = {
       queries: {
@@ -109,11 +114,7 @@ describe('Design management design index page', () => {
     wrapper = shallowMount(DesignIndex, {
       propsData: { id: '1' },
       mocks: { $apollo },
-      stubs: {
-        ApolloMutation,
-        DesignSidebar,
-        DesignReplyForm,
-      },
+      stubs,
       provide: {
         issueIid: '1',
         projectPath: 'project-path',
@@ -139,7 +140,7 @@ describe('Design management design index page', () => {
   describe('when navigating to component', () => {
     it('applies fullscreen layout class', () => {
       jest.spyOn(utils, 'getPageLayoutElement').mockReturnValue(mockPageLayoutElement);
-      createComponent({ loading: true });
+      createComponent({}, { stubs: {} });
 
       expect(mockPageLayoutElement.classList.add).toHaveBeenCalledTimes(1);
       expect(mockPageLayoutElement.classList.add).toHaveBeenCalledWith(
@@ -151,7 +152,7 @@ describe('Design management design index page', () => {
   describe('when navigating within the component', () => {
     it('`scale` prop of DesignPresentation component is 1', async () => {
       jest.spyOn(utils, 'getPageLayoutElement').mockReturnValue(mockPageLayoutElement);
-      createComponent({ loading: false }, { data: { design, scale: 2 } });
+      createComponent({}, { data: { design, scale: 2 } });
 
       await nextTick();
       expect(findDesignPresentation().props('scale')).toBe(2);
@@ -180,7 +181,8 @@ describe('Design management design index page', () => {
   it('sets loading state', () => {
     createComponent({ loading: true });
 
-    expect(wrapper.element).toMatchSnapshot();
+    expect(wrapper.find(DesignPresentation).props('isLoading')).toBe(true);
+    expect(wrapper.find(DesignSidebar).props('isLoading')).toBe(true);
   });
 
   it('renders design index', () => {
@@ -197,6 +199,7 @@ describe('Design management design index page', () => {
       design,
       markdownPreviewPath: '/project-path/preview_markdown?target_type=Issue',
       resolvedDiscussionsExpanded: false,
+      isLoading: false,
     });
   });
 
diff --git a/spec/frontend/design_management/pages/index_spec.js b/spec/frontend/design_management/pages/index_spec.js
index 87531e8b645..087655d10f7 100644
--- a/spec/frontend/design_management/pages/index_spec.js
+++ b/spec/frontend/design_management/pages/index_spec.js
@@ -4,6 +4,7 @@ import Vue, { nextTick } from 'vue';
 
 import VueApollo, { ApolloMutation } from 'vue-apollo';
 import VueRouter from 'vue-router';
+import { GlBreakpointInstance as breakpointInstance } from '@gitlab/ui/dist/utils';
 import VueDraggable from 'vuedraggable';
 import createMockApollo from 'helpers/mock_apollo_helper';
 import waitForPromises from 'helpers/wait_for_promises';
@@ -762,6 +763,25 @@ describe('Design management index page', () => {
       expect(findDesigns().at(0).props('id')).toBe('2');
     });
 
+    it.each`
+      breakpoint | reorderDisabled
+      ${'xs'}    | ${true}
+      ${'sm'}    | ${false}
+      ${'md'}    | ${false}
+      ${'lg'}    | ${false}
+      ${'xl'}    | ${false}
+    `(
+      'sets draggable disabled value to $reorderDisabled when breakpoint is $breakpoint',
+      async ({ breakpoint, reorderDisabled }) => {
+        jest.spyOn(breakpointInstance, 'getBreakpointSize').mockReturnValue(breakpoint);
+
+        createComponentWithApollo({});
+        await waitForPromises();
+
+        expect(draggableAttributes().disabled).toBe(reorderDisabled);
+      },
+    );
+
     it('prevents reordering when reorderDesigns mutation is in progress', async () => {
       createComponentWithApollo({});
       await moveDesigns(wrapper);
diff --git a/spec/frontend/design_management/router_spec.js b/spec/frontend/design_management/router_spec.js
index 03ab79712a4..b9c62334223 100644
--- a/spec/frontend/design_management/router_spec.js
+++ b/spec/frontend/design_management/router_spec.js
@@ -20,6 +20,8 @@ function factory(routeArg) {
 
   return mount(App, {
     router,
+    provide: { issueIid: '1' },
+    stubs: { Toolbar: true },
     mocks: {
       $apollo: {
         queries: {