Merge branch '456083-add-visual-indicators-for-imported-designs' into 'master'

Add "Imported" badge to Design header

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



Merged-by: Scott Hampton <shampton@gitlab.com>
Approved-by: Sharmad Nachnolkar <snachnolkar@gitlab.com>
Approved-by: Emily Bauman <ebauman@gitlab.com>
Approved-by: Scott Hampton <shampton@gitlab.com>
Co-authored-by: Justin Ho Tuan Duong <hduong@gitlab.com>

app/assets/javascripts/design_management/components/toolbar/index.vue

@@ -4,7 +4,9 @@ import { GlButton, GlIcon, GlTooltipDirective, GlSkeletonLoader } from '@gitlab/
 import permissionsQuery from 'shared_queries/design_management/design_permissions.query.graphql';
 import { isLoggedIn } from '~/lib/utils/common_utils';
 import { __, s__, sprintf } from '~/locale';
+import { TYPE_DESIGN } from '~/import/constants';
 import timeagoMixin from '~/vue_shared/mixins/timeago';
+import ImportedBadge from '~/vue_shared/components/imported_badge.vue';
 import { DESIGNS_ROUTE_NAME } from '../../router/constants';
 import DeleteButton from '../delete_button.vue';
 import DesignTodoButton from '../design_todo_button.vue';
@@ -25,6 +27,7 @@ export default {
     DeleteButton,
     DesignTodoButton,
     CloseButton,
+    ImportedBadge,
   },
   directives: {
     GlTooltip: GlTooltipDirective,
@@ -117,6 +120,9 @@ export default {
     issueTitle() {
       return this.design.issue.title;
     },
+    isImported() {
+      return this.design.imported;
+    },
     toggleCommentsButtonLabel() {
       return this.isSidebarOpen
         ? this.$options.i18n.hideCommentsButtonLabel
@@ -124,6 +130,7 @@ export default {
     },
   },
   DESIGNS_ROUTE_NAME,
+  TYPE_DESIGN,
 };
 </script>
 
@@ -136,12 +143,21 @@ export default {
     >
       <div class="gl-overflow-hidden gl-display-flex gl-mr-3">
         <gl-skeleton-loader v-if="isLoading" :lines="1" />
-        <h2 v-else class="gl-display-flex gl-overflow-hidden gl-m-0 gl-font-base">
+        <h2
+          v-else
+          class="gl-display-flex gl-align-items-center gl-overflow-hidden gl-m-0 gl-font-base"
+        >
           <span class="gl-text-truncate gl-text-gray-900 gl-text-decoration-none">
             {{ issueTitle }}
           </span>
           <gl-icon name="chevron-right" class="gl-text-gray-200 gl-flex-shrink-0" />
           <span class="gl-text-truncate gl-font-weight-normal">{{ filename }}</span>
+          <imported-badge
+            v-if="isImported"
+            :importable-type="$options.TYPE_DESIGN"
+            size="sm"
+            class="gl-ml-2"
+          />
         </h2>
         <small v-if="updatedAt" class="gl-text-gray-500">{{ updatedText }}</small>
       </div>

app/assets/javascripts/import/constants.js

 import { convertObjectPropsToCamelCase } from '~/lib/utils/common_utils';
 import { __, s__ } from '~/locale';
 
+export const TYPE_DESIGN = 'design';
+
 export const BULK_IMPORT_STATIC_ITEMS = {
   badges: __('Badge'),
   boards: s__('IssueBoards|Board'),

app/assets/javascripts/vue_shared/components/imported_badge.vue

@@ -3,8 +3,10 @@ import { GlBadge, GlTooltipDirective } from '@gitlab/ui';
 import { __, s__, sprintf } from '~/locale';
 
 import { TYPE_EPIC, TYPE_ISSUE, TYPE_MERGE_REQUEST } from '~/issues/constants';
+import { TYPE_DESIGN } from '~/import/constants';
 
 const importableTypeText = {
+  [TYPE_DESIGN]: __('design'),
   [TYPE_EPIC]: __('epic'),
   [TYPE_ISSUE]: __('issue'),
   [TYPE_MERGE_REQUEST]: __('merge request'),
@@ -23,6 +25,11 @@ export default {
       required: false,
       default: '',
     },
+    size: {
+      type: String,
+      required: false,
+      default: undefined,
+    },
   },
   computed: {
     title() {
@@ -35,7 +42,7 @@ export default {
 </script>
 
 <template>
-  <gl-badge v-gl-tooltip="title">
+  <gl-badge v-gl-tooltip="title" :size="size">
     {{ __('Imported') }}
   </gl-badge>
 </template>

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

@@ -11,7 +11,7 @@ exports[`Design management toolbar component renders design and updated data 1`]
       class="gl-display-flex gl-mr-3 gl-overflow-hidden"
     >
       <h2
-        class="gl-display-flex gl-font-base gl-m-0 gl-overflow-hidden"
+        class="gl-align-items-center gl-display-flex gl-font-base gl-m-0 gl-overflow-hidden"
       >
         <span
           class="gl-text-decoration-none gl-text-gray-900 gl-text-truncate"
@@ -28,6 +28,11 @@ exports[`Design management toolbar component renders design and updated data 1`]
         >
           test.jpg
         </span>
+        <imported-badge-stub
+          class="gl-ml-2"
+          importabletype="design"
+          size="sm"
+        />
       </h2>
       <small
         class="gl-text-gray-500"

spec/frontend/design_management/mock_data/design.js

@@ -7,6 +7,7 @@ export default {
   fullPath: 'full-design-path',
   image: 'test.jpg',
   imageV432x230: 'test.jpg',
+  imported: true,
   currentUserTodos: null,
   description: 'Test description',
   descriptionHtml: 'Test description',

spec/frontend/vue_shared/components/imported_badge_spec.js

@@ -3,6 +3,7 @@ import { shallowMount } from '@vue/test-utils';
 import { createMockDirective, getBinding } from 'helpers/vue_mock_directive';
 
 import { TYPE_EPIC, TYPE_ISSUE, TYPE_MERGE_REQUEST } from '~/issues/constants';
+import { TYPE_DESIGN } from '~/import/constants';
 
 import ImportedBadge from '~/vue_shared/components/imported_badge.vue';
 
@@ -35,6 +36,7 @@ describe('ImportedBadge', () => {
 
   it.each`
     importableType        | tooltipText
+    ${TYPE_DESIGN}        | ${'This design was imported from another instance.'}
     ${TYPE_EPIC}          | ${'This epic was imported from another instance.'}
     ${TYPE_ISSUE}         | ${'This issue was imported from another instance.'}
     ${TYPE_MERGE_REQUEST} | ${'This merge request was imported from another instance.'}