Show title in design item

Fixes reference to pull title
from design object instead of
empty title reference. Only
available behind work items feature
flags.

app/assets/javascripts/work_items/components/design_management/design_preview/design_details.vue

@@ -100,7 +100,6 @@ export default {
       prevCurrentUserTodos: null,
       maxScale: DEFAULT_MAX_SCALE,
       workItemId: '',
-      workItemTitle: '',
       isSidebarOpen: true,
     };
   },
@@ -360,7 +359,6 @@ export default {
   >
     <div class="gl-relative gl-flex gl-grow gl-flex-col gl-overflow-hidden">
       <design-toolbar
-        :work-item-title="workItemTitle"
         :design="design"
         :design-filename="$route.params.id"
         :is-loading="isLoading"

app/assets/javascripts/work_items/components/design_management/design_preview/design_toolbar.vue

@@ -31,10 +31,6 @@ export default {
     GlTooltip: GlTooltipDirective,
   },
   props: {
-    workItemTitle: {
-      type: String,
-      required: true,
-    },
     design: {
       type: Object,
       required: true,
@@ -86,9 +82,9 @@ export default {
         <gl-skeleton-loader v-if="isLoading" :lines="1" />
         <h2 v-else class="gl-m-0 gl-flex gl-items-center gl-overflow-hidden gl-text-base">
           <span class="gl-truncate gl-text-heading gl-no-underline">
-            {{ workItemTitle }}
+            {{ design.issue.title }}
           </span>
-          <gl-icon name="chevron-right" class="gl-shrink-0" variant="disabled" />
+          <gl-icon name="chevron-right" class="gl-shrink-0" variant="subtle" />
           <span class="gl-truncate gl-font-normal">{{ design.filename }}</span>
           <imported-badge
             v-if="design.imported"

spec/frontend/work_items/components/design_management/design_preview/design_toolbar_spec.js

@@ -13,7 +13,6 @@ jest.mock('~/lib/utils/common_utils');
 
 describe('DesignToolbar', () => {
   let wrapper;
-  const workItemTitle = 'Test title';
 
   function createComponent({
     isLoading = false,
@@ -22,7 +21,6 @@ describe('DesignToolbar', () => {
   } = {}) {
     wrapper = shallowMountExtended(DesignToolbar, {
       propsData: {
-        workItemTitle,
         isLoading,
         design,
         isSidebarOpen: true,
@@ -57,7 +55,7 @@ describe('DesignToolbar', () => {
   it('renders issue title and design filename', () => {
     createComponent();
 
-    expect(findDesignTitle()).toContain(workItemTitle);
+    expect(findDesignTitle()).toContain('My precious issue');
     expect(findDesignTitle()).toContain(mockDesign.filename);
   });