Merge branch 'jc/design-images-in-drawer' into 'master'

Fix navigation across project/group for designs

See merge request https://gitlab.com/gitlab-org/gitlab/-/merge_requests/181104



Merged-by: Deepika Guliani <dguliani@gitlab.com>
Approved-by: Nick Brandt <nbrandt@gitlab.com>
Approved-by: Anastasia Khomchenko <akhomchenko@gitlab.com>
Approved-by: Deepika Guliani <dguliani@gitlab.com>
Reviewed-by: Anastasia Khomchenko <akhomchenko@gitlab.com>
Co-authored-by: Jack Chapman <jachapman@gitlab.com>

app/assets/javascripts/work_items/components/design_management/design_item.vue

@@ -60,6 +60,14 @@ export default {
       required: false,
       default: false,
     },
+    useRouter: {
+      type: Boolean,
+      required: true,
+    },
+    workItemWebUrl: {
+      type: String,
+      required: true,
+    },
   },
   data() {
     return {
@@ -113,6 +121,12 @@ export default {
         query: this.$route.query,
       };
     },
+    nonRouterHref() {
+      return `${this.workItemWebUrl}/designs/${this.filename}`;
+    },
+    linkComponent() {
+      return this.useRouter ? 'router-link' : 'a';
+    },
   },
   methods: {
     onImageLoad() {
@@ -144,8 +158,10 @@ export default {
 </script>
 
 <template>
-  <router-link
+  <component
+    :is="linkComponent"
     :to="routerLinkProps"
+    :href="nonRouterHref"
     class="card js-design-list-item design-list-item gl-mb-0 gl-cursor-pointer gl-text-default hover:gl-text-default"
   >
     <div
@@ -206,5 +222,5 @@ export default {
         </span>
       </div>
     </div>
-  </router-link>
+  </component>
 </template>

app/assets/javascripts/work_items/components/design_management/design_management_widget.vue

@@ -4,10 +4,11 @@ import { GlBreakpointInstance } from '@gitlab/ui/dist/utils';
 import VueDraggable from 'vuedraggable';
 import * as Sentry from '~/sentry/sentry_browser_wrapper';
 import { s__ } from '~/locale';
+import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import { isLoggedIn } from '~/lib/utils/common_utils';
 import { TYPENAME_DESIGN_VERSION } from '~/graphql_shared/constants';
 import { convertToGraphQLId } from '~/graphql_shared/utils';
-import { findDesignWidget } from '~/work_items/utils';
+import { findDesignWidget, canRouterNav } from '~/work_items/utils';
 import CrudComponent from '~/vue_shared/components/crud_component.vue';
 import DesignDropzone from '~/vue_shared/components/upload_dropzone/upload_dropzone.vue';
 import {
@@ -42,6 +43,7 @@ export default {
   directives: {
     GlTooltip: GlTooltipDirective,
   },
+  mixins: [glFeatureFlagMixin()],
   inject: ['fullPath'],
   props: {
     workItemId: {
@@ -74,6 +76,18 @@ export default {
       required: false,
       default: false,
     },
+    workItemFullPath: {
+      type: String,
+      required: true,
+    },
+    workItemWebUrl: {
+      type: String,
+      required: true,
+    },
+    isGroup: {
+      type: Boolean,
+      required: true,
+    },
   },
   apollo: {
     designCollection: {
@@ -190,6 +204,21 @@ export default {
         ? s__('DesignManagement|Deselect all')
         : s__('DesignManagement|Select all');
     },
+    issueAsWorkItem() {
+      return Boolean(
+        !this.isGroup &&
+          this.glFeatures.workItemsViewPreference &&
+          gon.current_user_use_work_items_view,
+      );
+    },
+    canUseRouter() {
+      return canRouterNav({
+        fullPath: this.fullPath,
+        webUrl: this.workItemWebUrl,
+        isGroup: this.isGroup,
+        issueAsWorkItem: this.issueAsWorkItem,
+      });
+    },
   },
   methods: {
     dismissError() {
@@ -231,7 +260,7 @@ export default {
           mutation: archiveDesignMutation,
           variables: {
             filenames: this.selectedDesigns,
-            projectPath: this.fullPath,
+            projectPath: this.workItemFullPath,
             iid: this.workItemIid,
           },
           update: this.afterArchiveDesign,
@@ -471,6 +500,8 @@ export default {
                 :is-uploading="false"
                 :is-dragging="isDraggingDesign"
                 :work-item-iid="workItemIid"
+                :work-item-web-url="workItemWebUrl"
+                :use-router="canUseRouter"
                 data-testid="design-item"
                 @pointerup="onPointerUp"
               />

app/assets/javascripts/work_items/components/work_item_detail.vue

@@ -1029,6 +1029,9 @@ export default {
               :class="{ 'gl-mt-0': isDrawer }"
               :work-item-id="workItem.id"
               :work-item-iid="iid"
+              :work-item-full-path="workItemFullPath"
+              :work-item-web-url="workItem.webUrl"
+              :is-group="isGroupWorkItem"
               :upload-error="designUploadError"
               :upload-error-variant="designUploadErrorVariant"
               :is-saving="isSaving"

spec/frontend/design_management/components/toolbar/index_spec.js

@@ -48,6 +48,7 @@ describe('Design management toolbar component', () => {
           name: 'Test Name',
         },
         image: '/-/designs/306/7f747adcd4693afadbe968d7ba7d983349b9012d',
+        isSidebarOpen: false,
         ...props,
       },
     });

spec/frontend/work_items/components/design_management/__snapshots__/design_item_spec.js.snap

@@ -11,6 +11,7 @@ exports[`Design item component when item appears in view after image is loaded r
 exports[`Design item component with notes renders item with multiple comments 1`] = `
 <a
   class="card design-list-item gl-cursor-pointer gl-mb-0 gl-text-default hover:gl-text-default js-design-list-item"
+  href="/gitlab-org/gitlab-test/-/work_items/1/designs/test"
 >
   <div
     class="card-body gl-flex gl-items-center gl-justify-center gl-overflow-hidden gl-p-0 gl-relative gl-rounded-t-base"
@@ -76,6 +77,7 @@ exports[`Design item component with notes renders item with multiple comments 1`
 exports[`Design item component with notes renders item with single comment 1`] = `
 <a
   class="card design-list-item gl-cursor-pointer gl-mb-0 gl-text-default hover:gl-text-default js-design-list-item"
+  href="/gitlab-org/gitlab-test/-/work_items/1/designs/test"
 >
   <div
     class="card-body gl-flex gl-items-center gl-justify-center gl-overflow-hidden gl-p-0 gl-relative gl-rounded-t-base"

spec/frontend/work_items/components/design_management/design_item_spec.js

@@ -46,6 +46,9 @@ describe('Design item component', () => {
           event,
           notesCount,
           updatedAt: '01-01-2019',
+          useRouter: true,
+          workItemWebUrl: '/gitlab-org/gitlab-test/-/work_items/1',
+          workItemIid: 'gid://gitlab/WorkItem/1',
           ...props,
         },
         data() {
@@ -58,6 +61,50 @@ describe('Design item component', () => {
     );
   }
 
+  describe('when router navigation is possible', () => {
+    beforeEach(() => {
+      createComponent();
+    });
+
+    it('renders a router-link', () => {
+      expect(wrapper.findComponent(RouterLinkStub).exists()).toBe(true);
+    });
+
+    it('provides a valid `to` prop to the router-link', () => {
+      const routerLink = wrapper.findComponent(RouterLinkStub);
+
+      expect(routerLink.props('to')).toEqual(
+        expect.objectContaining({
+          params: {
+            id: 'test',
+            iid: 'gid://gitlab/WorkItem/1',
+          },
+        }),
+      );
+    });
+  });
+
+  describe('when router navigation is not possible', () => {
+    beforeEach(() => {
+      createComponent({
+        props: {
+          useRouter: false,
+        },
+      });
+    });
+
+    it('renders an anchor element instead of router-link', () => {
+      expect(wrapper.find('a').exists()).toBe(true);
+      expect(wrapper.findComponent(RouterLinkStub).exists()).toBe(false);
+    });
+
+    it('provides a valid `to` prop to the router-link', () => {
+      const anchor = wrapper.find('a');
+
+      expect(anchor.attributes('href')).toBe('/gitlab-org/gitlab-test/-/work_items/1/designs/test');
+    });
+  });
+
   describe('when item is not in view', () => {
     it('image is not rendered', () => {
       createComponent();

spec/frontend/work_items/components/design_management/design_management_widget_spec.js

@@ -112,6 +112,9 @@ describe('DesignWidget', () => {
         uploadError,
         uploadErrorVariant,
         canReorderDesign,
+        workItemFullPath: 'gitlab-org/gitlab-shell',
+        workItemWebUrl: '/gitlab-org/gitlab-shell/-/work_items/1',
+        isGroup: false,
       },
       directives: {
         GlTooltip: createMockDirective('gl-tooltip'),