Merge branch 'ntepluhina-move-design-management' into 'master'

Move design management app to the issue tab

Closes #223193

See merge request gitlab-org/gitlab!35042

app/assets/javascripts/design_management_new/components/design_destroyer.vue

@@ -13,13 +13,14 @@ export default {
       type: Array,
       required: true,
     },
+  },
+  inject: {
     projectPath: {
-      type: String,
-      required: true,
+      default: '',
     },
     iid: {
-      type: String,
-      required: true,
+      from: 'issueIid',
+      defaut: '',
     },
   },
   computed: {

app/assets/javascripts/design_management_new/components/design_notes/design_note.vue

@@ -60,7 +60,7 @@ export default {
   },
   mounted() {
     if (this.isNoteLinked) {
-      this.$refs.anchor.$el.scrollIntoView({ behavior: 'smooth', inline: 'start' });
+      this.$el.scrollIntoView({ behavior: 'smooth', inline: 'start' });
     }
   },
   methods: {
@@ -80,7 +80,7 @@ export default {
 </script>
 
 <template>
-  <timeline-entry-item :id="`note_${noteAnchorId}`" ref="anchor" class="design-note note-form">
+  <timeline-entry-item :id="`note_${noteAnchorId}`" class="design-note note-form">
     <user-avatar-link
       :link-href="author.webUrl"
       :img-src="author.avatarUrl"

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

@@ -6,7 +6,6 @@ import timeagoMixin from '~/vue_shared/mixins/timeago';
 import Pagination from './pagination.vue';
 import DeleteButton from '../delete_button.vue';
 import permissionsQuery from '../../graphql/queries/design_permissions.query.graphql';
-import appDataQuery from '../../graphql/queries/app_data.query.graphql';
 import { DESIGNS_ROUTE_NAME } from '../../router/constants';
 
 export default {
@@ -55,19 +54,17 @@ export default {
       permissions: {
         createDesign: false,
       },
-      projectPath: '',
-      issueIid: null,
     };
   },
-  apollo: {
-    appData: {
-      query: appDataQuery,
-      manual: true,
-      result({ data: { projectPath, issueIid } }) {
-        this.projectPath = projectPath;
-        this.issueIid = issueIid;
-      },
+  inject: {
+    projectPath: {
+      default: '',
     },
+    issueIid: {
+      default: '',
+    },
+  },
+  apollo: {
     permissions: {
       query: permissionsQuery,
       variables() {
@@ -102,6 +99,7 @@ export default {
         query: $route.query,
       }"
       :aria-label="s__('DesignManagement|Go back to designs')"
+      data-testid="close-design"
       class="mr-3 text-plain d-flex justify-content-center align-items-center"
     >
       <icon :size="18" name="close" />

app/assets/javascripts/design_management_new/graphql/queries/app_data.query.graphql

-query projectFullPath {
-  projectPath @client
-  issueIid @client
-}

app/assets/javascripts/design_management_new/index.js

-import $ from 'jquery';
 import Vue from 'vue';
 import createRouter from './router';
 import App from './components/app.vue';
 import apolloProvider from './graphql';
-import getDesignListQuery from './graphql/queries/get_design_list.query.graphql';
-import { DESIGNS_ROUTE_NAME, ROOT_ROUTE_NAME } from './router/constants';
 
 export default () => {
   const el = document.querySelector('.js-design-management-new');
-  const badge = document.querySelector('.js-designs-count');
   const { issueIid, projectPath, issuePath } = el.dataset;
   const router = createRouter(issuePath);
 
-  $('.js-issue-tabs').on('shown.bs.tab', ({ target: { id } }) => {
-    if (id === 'designs' && router.currentRoute.name === ROOT_ROUTE_NAME) {
-      router.push({ name: DESIGNS_ROUTE_NAME });
-    } else if (id === 'discussion') {
-      router.push({ name: ROOT_ROUTE_NAME });
-    }
-  });
-
   apolloProvider.clients.defaultClient.cache.writeData({
     data: {
-      projectPath,
-      issueIid,
       activeDiscussion: {
         __typename: 'ActiveDiscussion',
         id: null,
@@ -32,25 +18,14 @@ export default () => {
     },
   });
 
-  apolloProvider.clients.defaultClient
-    .watchQuery({
-      query: getDesignListQuery,
-      variables: {
-        fullPath: projectPath,
-        iid: issueIid,
-        atVersion: null,
-      },
-    })
-    .subscribe(({ data }) => {
-      if (badge) {
-        badge.textContent = data.project.issue.designCollection.designs.edges.length;
-      }
-    });
-
   return new Vue({
     el,
     router,
     apolloProvider,
+    provide: {
+      projectPath,
+      issueIid,
+    },
     render(createElement) {
       return createElement(App);
     },

app/assets/javascripts/design_management_new/mixins/all_versions.js

 import getDesignListQuery from '../graphql/queries/get_design_list.query.graphql';
-import appDataQuery from '../graphql/queries/app_data.query.graphql';
 import { findVersionId } from '../utils/design_management_utils';
 
 export default {
   apollo: {
-    appData: {
-      query: appDataQuery,
-      manual: true,
-      result({ data: { projectPath, issueIid } }) {
-        this.projectPath = projectPath;
-        this.issueIid = issueIid;
-      },
-    },
     allVersions: {
       query: getDesignListQuery,
       variables() {
@@ -24,6 +15,14 @@ export default {
       update: data => data.project.issue.designCollection.versions.edges,
     },
   },
+  inject: {
+    projectPath: {
+      default: '',
+    },
+    issueIid: {
+      default: '',
+    },
+  },
   computed: {
     hasValidVersion() {
       return (
@@ -55,8 +54,6 @@ export default {
   data() {
     return {
       allVersions: [],
-      projectPath: '',
-      issueIid: null,
     };
   },
 };

app/assets/javascripts/design_management_new/pages/design/index.vue

@@ -12,7 +12,6 @@ import DesignPresentation from '../../components/design_presentation.vue';
 import DesignReplyForm from '../../components/design_notes/design_reply_form.vue';
 import DesignSidebar from '../../components/design_sidebar.vue';
 import getDesignQuery from '../../graphql/queries/get_design.query.graphql';
-import appDataQuery from '../../graphql/queries/app_data.query.graphql';
 import createImageDiffNoteMutation from '../../graphql/mutations/create_image_diff_note.mutation.graphql';
 import updateImageDiffNoteMutation from '../../graphql/mutations/update_image_diff_note.mutation.graphql';
 import updateActiveDiscussionMutation from '../../graphql/mutations/update_active_discussion.mutation.graphql';
@@ -62,22 +61,12 @@ export default {
       design: {},
       comment: '',
       annotationCoordinates: null,
-      projectPath: '',
       errorMessage: '',
-      issueIid: '',
       scale: 1,
       resolvedDiscussionsExpanded: false,
     };
   },
   apollo: {
-    appData: {
-      query: appDataQuery,
-      manual: true,
-      result({ data: { projectPath, issueIid } }) {
-        this.projectPath = projectPath;
-        this.issueIid = issueIid;
-      },
-    },
     design: {
       query: getDesignQuery,
       // We want to see cached design version if we have one, and fetch newer version on the background to update discussions

app/assets/javascripts/design_management_new/pages/index.vue

@@ -259,7 +259,7 @@ export default {
 </script>
 
 <template>
-  <div>
+  <div data-testid="designs-root">
     <header v-if="showToolbar" class="row-content-block border-top-0 p-2 d-flex">
       <div class="d-flex justify-content-between align-items-center w-100">
         <design-version-dropdown />
@@ -274,8 +274,6 @@ export default {
           <design-destroyer
             #default="{ mutate, loading }"
             :filenames="selectedDesigns"
-            :project-path="projectPath"
-            :iid="issueIid"
             @done="onDesignDelete"
             @error="onDesignDeleteError"
           >

app/assets/javascripts/design_management_new/router/constants.js

-export const ROOT_ROUTE_NAME = 'root';
 export const DESIGNS_ROUTE_NAME = 'designs';
 export const DESIGN_ROUTE_NAME = 'design';

app/assets/javascripts/design_management_new/router/index.js

-import $ from 'jquery';
 import Vue from 'vue';
 import VueRouter from 'vue-router';
 import routes from './routes';
@@ -16,9 +15,7 @@ export default function createRouter(base) {
   });
   const pageEl = getPageLayoutElement();
 
-  router.beforeEach(({ meta: { el }, name }, _, next) => {
-    $(`#${el}`).tab('show');
-
+  router.beforeEach(({ name }, _, next) => {
     // apply a fullscreen layout style in Design View (a.k.a design detail)
     if (pageEl) {
       if (name === DESIGN_ROUTE_NAME) {

app/assets/javascripts/design_management_new/router/routes.js

 import Home from '../pages/index.vue';
 import DesignDetail from '../pages/design/index.vue';
-import { ROOT_ROUTE_NAME, DESIGNS_ROUTE_NAME, DESIGN_ROUTE_NAME } from './constants';
+import { DESIGNS_ROUTE_NAME, DESIGN_ROUTE_NAME } from './constants';
 
 export default [
   {
-    name: ROOT_ROUTE_NAME,
+    name: DESIGNS_ROUTE_NAME,
     path: '/',
     component: Home,
-    meta: {
-      el: 'discussion',
-    },
   },
   {
-    name: DESIGNS_ROUTE_NAME,
-    path: '/designs',
-    component: Home,
-    meta: {
-      el: 'designs',
-    },
-    children: [
+    name: DESIGN_ROUTE_NAME,
+    path: '/designs/:id',
+    component: DesignDetail,
+    beforeEnter(
       {
-        name: DESIGN_ROUTE_NAME,
-        path: ':id',
-        component: DesignDetail,
-        meta: {
-          el: 'designs',
-        },
-        beforeEnter(
-          {
-            params: { id },
-          },
-          from,
-          next,
-        ) {
-          if (typeof id === 'string') {
-            next();
-          }
-        },
-        props: ({ params: { id } }) => ({ id }),
+        params: { id },
       },
-    ],
+      from,
+      next,
+    ) {
+      if (typeof id === 'string') {
+        next();
+      }
+    },
+    props: ({ params: { id } }) => ({ id }),
   },
 ];

app/views/projects/issues/show.html.haml

@@ -77,6 +77,9 @@
     - if @issue.sentry_issue.present?
       #js-sentry-error-stack-trace{ data: error_details_data(@project, @issue.sentry_issue.sentry_issue_identifier) }
 
+    - if Feature.enabled?(:design_management_moved, @project)
+      = render 'projects/issues/design_management'
+
     = render_if_exists 'projects/issues/related_issues'
 
     #js-related-merge-requests{ data: { endpoint: expose_path(api_v4_projects_issues_related_merge_requests_path(id: @project.id, issue_iid: @issue.iid)), project_namespace: @project.namespace.path, project_path: @project.path } }
@@ -94,6 +97,9 @@
         #js-vue-discussion-filter{ data: { default_filter: current_user&.notes_filter_for(@issue), notes_filters: UserPreference.notes_filters.to_json } }
         = render 'new_branch' if show_new_branch_button?
 
-  = render 'projects/issues/tabs'
+  - if Feature.enabled?(:design_management_moved, @project)
+    = render 'projects/issues/discussion'
+  - else
+    = render 'projects/issues/tabs'
 
 = render 'shared/issuable/sidebar', issuable_sidebar: @issuable_sidebar, assignees: @issue.assignees

ee/spec/features/issues/issues_tabs_spec.rb

@@ -10,6 +10,7 @@ RSpec.describe 'Issue page tabs', :js do
   describe 'discussions tab counter' do
     before do
       allow(Ability).to receive(:allowed?) { true }
+      stub_feature_flags(design_management_moved: false)
     end
 
     subject do

spec/features/projects/issues/design_management/user_links_to_designs_in_issue_spec.rb

@@ -27,10 +27,6 @@ RSpec.describe 'viewing issues with design references' do
     MD
   end
 
-  before do
-    stub_feature_flags(design_management_moved: false)
-  end
-
   def visit_page_with_design_references
     public_issue = create(:issue, project: public_project, description: description)
     visit project_issue_path(public_issue.project, public_issue)

spec/features/projects/issues/design_management/user_paginates_designs_spec.rb

@@ -8,34 +8,57 @@ RSpec.describe 'User paginates issue designs', :js do
   let(:project) { create(:project_empty_repo, :public) }
   let(:issue) { create(:issue, project: project) }
 
-  before do
-    enable_design_management
-    stub_feature_flags(design_management_moved: false)
+  context 'design_management_moved flag disabled' do
+    before do
+      stub_feature_flags(design_management_moved: false)
+      enable_design_management
 
-    create_list(:design, 2, :with_file, issue: issue)
+      create_list(:design, 2, :with_file, issue: issue)
+      visit project_issue_path(project, issue)
+      click_link 'Designs'
+      wait_for_requests
+      find('.js-design-list-item', match: :first).click
+    end
 
-    visit project_issue_path(project, issue)
+    it 'paginates to next design' do
+      expect(find('.js-previous-design')[:disabled]).to eq('true')
 
-    click_link 'Designs'
+      page.within(find('.js-design-header')) do
+        expect(page).to have_content('1 of 2')
+      end
 
-    wait_for_requests
+      find('.js-next-design').click
 
-    find('.js-design-list-item', match: :first).click
-  end
+      expect(find('.js-previous-design')[:disabled]).not_to eq('true')
 
-  it 'paginates to next design' do
-    expect(find('.js-previous-design')[:disabled]).to eq('true')
+      page.within(find('.js-design-header')) do
+        expect(page).to have_content('2 of 2')
+      end
+    end
+  end
 
-    page.within(find('.js-design-header')) do
-      expect(page).to have_content('1 of 2')
+  context 'design_management_moved flag enabled' do
+    before do
+      enable_design_management
+      create_list(:design, 2, :with_file, issue: issue)
+      visit project_issue_path(project, issue)
+      find('.js-design-list-item', match: :first).click
     end
 
-    find('.js-next-design').click
+    it 'paginates to next design' do
+      expect(find('.js-previous-design')[:disabled]).to eq('true')
+
+      page.within(find('.js-design-header')) do
+        expect(page).to have_content('1 of 2')
+      end
+
+      find('.js-next-design').click
 
-    expect(find('.js-previous-design')[:disabled]).not_to eq('true')
+      expect(find('.js-previous-design')[:disabled]).not_to eq('true')
 
-    page.within(find('.js-design-header')) do
-      expect(page).to have_content('2 of 2')
+      page.within(find('.js-design-header')) do
+        expect(page).to have_content('2 of 2')
+      end
     end
   end
 end

spec/features/projects/issues/design_management/user_permissions_upload_spec.rb

@@ -8,18 +8,32 @@ RSpec.describe 'User design permissions', :js do
   let(:project) { create(:project_empty_repo, :public) }
   let(:issue) { create(:issue, project: project) }
 
-  before do
-    enable_design_management
-    stub_feature_flags(design_management_moved: false)
+  context 'design_management_moved flag disabled' do
+    before do
+      enable_design_management
+      stub_feature_flags(design_management_moved: false)
 
-    visit project_issue_path(project, issue)
+      visit project_issue_path(project, issue)
 
-    click_link 'Designs'
+      click_link 'Designs'
 
-    wait_for_requests
+      wait_for_requests
+    end
+
+    it 'user does not have permissions to upload design' do
+      expect(page).not_to have_field('design_file')
+    end
   end
 
-  it 'user does not have permissions to upload design' do
-    expect(page).not_to have_field('design_file')
+  context 'design_management_moved flag enabled' do
+    before do
+      enable_design_management
+
+      visit project_issue_path(project, issue)
+    end
+
+    it 'user does not have permissions to upload design' do
+      expect(page).not_to have_field('design_file')
+    end
   end
 end

spec/features/projects/issues/design_management/user_uploads_designs_spec.rb

@@ -13,44 +13,81 @@ RSpec.describe 'User uploads new design', :js do
     sign_in(user)
   end
 
-  context "when the feature is available" do
-    before do
-      enable_design_management
-      stub_feature_flags(design_management_moved: false)
+  context 'design_management_moved flag disabled' do
+    context "when the feature is available" do
+      before do
+        enable_design_management
+        stub_feature_flags(design_management_moved: false)
 
-      visit project_issue_path(project, issue)
+        visit project_issue_path(project, issue)
 
-      click_link 'Designs'
+        click_link 'Designs'
 
-      wait_for_requests
-    end
+        wait_for_requests
+      end
+
+      it 'uploads designs' do
+        attach_file(:design_file, logo_fixture, make_visible: true)
 
-    it 'uploads designs' do
-      attach_file(:design_file, logo_fixture, make_visible: true)
+        expect(page).to have_selector('.js-design-list-item', count: 1)
 
-      expect(page).to have_selector('.js-design-list-item', count: 1)
+        within first('#designs-tab .js-design-list-item') do
+          expect(page).to have_content('dk.png')
+        end
 
-      within first('#designs-tab .js-design-list-item') do
-        expect(page).to have_content('dk.png')
+        attach_file(:design_file, gif_fixture, make_visible: true)
+
+        expect(page).to have_selector('.js-design-list-item', count: 2)
       end
+    end
 
-      attach_file(:design_file, gif_fixture, make_visible: true)
+    context 'when the feature is not available' do
+      before do
+        stub_feature_flags(design_management_moved: false)
+        visit project_issue_path(project, issue)
 
-      expect(page).to have_selector('.js-design-list-item', count: 2)
+        click_link 'Designs'
+
+        wait_for_requests
+      end
+
+      it 'shows the message about requirements' do
+        expect(page).to have_content("To enable design management, you'll need to meet the requirements.")
+      end
     end
   end
 
-  context 'when the feature is not available' do
-    before do
-      visit project_issue_path(project, issue)
+  context 'design_management_moved flag enabled' do
+    context "when the feature is available" do
+      before do
+        enable_design_management
 
-      click_link 'Designs'
+        visit project_issue_path(project, issue)
+      end
+
+      it 'uploads designs' do
+        attach_file(:design_file, logo_fixture, make_visible: true)
+
+        expect(page).to have_selector('.js-design-list-item', count: 1)
+
+        within first('[data-testid="designs-root"] .js-design-list-item') do
+          expect(page).to have_content('dk.png')
+        end
+
+        attach_file(:design_file, gif_fixture, make_visible: true)
 
-      wait_for_requests
+        expect(page).to have_selector('.js-design-list-item', count: 2)
+      end
     end
 
-    it 'shows the message about requirements' do
-      expect(page).to have_content("To enable design management, you'll need to meet the requirements.")
+    context 'when the feature is not available' do
+      before do
+        visit project_issue_path(project, issue)
+      end
+
+      it 'shows the message about requirements' do
+        expect(page).to have_content("To enable design management, you'll need to meet the requirements.")
+      end
     end
   end
 

spec/features/projects/issues/design_management/user_views_design_images_spec.rb

@@ -13,7 +13,6 @@ RSpec.describe 'Users views raw design image files' do
 
   before do
     enable_design_management
-    stub_feature_flags(design_management_moved: false)
   end
 
   it 'serves the latest design version when no ref is given' do

spec/features/projects/issues/design_management/user_views_design_spec.rb

@@ -9,22 +9,42 @@ RSpec.describe 'User views issue designs', :js do
   let_it_be(:issue) { create(:issue, project: project) }
   let_it_be(:design) { create(:design, :with_file, issue: issue) }
 
-  before do
-    enable_design_management
-    stub_feature_flags(design_management_moved: false)
+  context 'design_management_moved flag disabled' do
+    before do
+      enable_design_management
+      stub_feature_flags(design_management_moved: false)
 
-    visit project_issue_path(project, issue)
+      visit project_issue_path(project, issue)
 
-    click_link 'Designs'
+      click_link 'Designs'
+    end
+
+    it 'opens design detail' do
+      click_link design.filename
+
+      page.within(find('.js-design-header')) do
+        expect(page).to have_content(design.filename)
+      end
+
+      expect(page).to have_selector('.js-design-image')
+    end
   end
 
-  it 'opens design detail' do
-    click_link design.filename
+  context 'design_management_moved flag enabled' do
+    before do
+      enable_design_management
 
-    page.within(find('.js-design-header')) do
-      expect(page).to have_content(design.filename)
+      visit project_issue_path(project, issue)
     end
 
-    expect(page).to have_selector('.js-design-image')
+    it 'opens design detail' do
+      click_link design.filename
+
+      page.within(find('.js-design-header')) do
+        expect(page).to have_content(design.filename)
+      end
+
+      expect(page).to have_selector('.js-design-image')
+    end
   end
 end

spec/features/projects/issues/design_management/user_views_designs_spec.rb

@@ -9,40 +9,78 @@ RSpec.describe 'User views issue designs', :js do
   let_it_be(:issue) { create(:issue, project: project) }
   let_it_be(:design) { create(:design, :with_file, issue: issue) }
 
-  before do
-    enable_design_management
-    stub_feature_flags(design_management_moved: false)
-  end
-
-  context 'navigates from the issue view' do
+  context 'design_management_moved flag disabled' do
     before do
-      visit project_issue_path(project, issue)
-      click_link 'Designs'
-      wait_for_requests
+      enable_design_management
+      stub_feature_flags(design_management_moved: false)
     end
 
-    it 'fetches list of designs' do
-      expect(page).to have_selector('.js-design-list-item', count: 1)
+    context 'navigates from the issue view' do
+      before do
+        visit project_issue_path(project, issue)
+        click_link 'Designs'
+        wait_for_requests
+      end
+
+      it 'fetches list of designs' do
+        expect(page).to have_selector('.js-design-list-item', count: 1)
+      end
     end
-  end
 
-  context 'navigates directly to the design collection view' do
-    before do
-      visit designs_project_issue_path(project, issue)
+    context 'navigates directly to the design collection view' do
+      before do
+        visit designs_project_issue_path(project, issue)
+      end
+
+      it 'expands the sidebar' do
+        expect(page).to have_selector('.layout-page.right-sidebar-expanded')
+      end
     end
 
-    it 'expands the sidebar' do
-      expect(page).to have_selector('.layout-page.right-sidebar-expanded')
+    context 'navigates directly to the individual design view' do
+      before do
+        visit designs_project_issue_path(project, issue, vueroute: design.filename)
+      end
+
+      it 'sees the design' do
+        expect(page).to have_selector('.js-design-detail')
+      end
     end
   end
 
-  context 'navigates directly to the individual design view' do
+  context 'design_management_moved flag enabled' do
     before do
-      visit designs_project_issue_path(project, issue, vueroute: design.filename)
+      enable_design_management
     end
 
-    it 'sees the design' do
-      expect(page).to have_selector('.js-design-detail')
+    context 'navigates from the issue view' do
+      before do
+        visit project_issue_path(project, issue)
+      end
+
+      it 'fetches list of designs' do
+        expect(page).to have_selector('.js-design-list-item', count: 1)
+      end
+    end
+
+    context 'navigates directly to the design collection view' do
+      before do
+        visit designs_project_issue_path(project, issue)
+      end
+
+      it 'expands the sidebar' do
+        expect(page).to have_selector('.layout-page.right-sidebar-expanded')
+      end
+    end
+
+    context 'navigates directly to the individual design view' do
+      before do
+        visit designs_project_issue_path(project, issue, vueroute: design.filename)
+      end
+
+      it 'sees the design' do
+        expect(page).to have_selector('.js-design-detail')
+      end
     end
   end
 end

spec/features/projects/issues/design_management/user_views_designs_with_svg_xss_spec.rb

@@ -12,7 +12,6 @@ RSpec.describe 'User views an SVG design that contains XSS', :js do
 
   before do
     enable_design_management
-    stub_feature_flags(design_management_moved: false)
 
     visit designs_project_issue_path(
       project,
@@ -30,6 +29,7 @@ RSpec.describe 'User views an SVG design that contains XSS', :js do
   end
 
   it 'displays the SVG' do
+    find("[data-testid='close-design']").click
     expect(page).to have_selector("img.design-img[alt='xss.svg']", count: 1, visible: false)
   end
 

spec/frontend/design_management_new/components/design_notes/design_discussion_spec.js

@@ -61,6 +61,10 @@ describe('Design discussions component', () => {
           ...data,
         };
       },
+      provide: {
+        projectPath: 'project-path',
+        issueIid: '1',
+      },
       mocks: {
         $apollo,
         $route: {

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

@@ -7,6 +7,7 @@ exports[`Design management toolbar component renders design and updated data 1`]
   <a
     aria-label="Go back to designs"
     class="mr-3 text-plain d-flex justify-content-center align-items-center"
+    data-testid="close-design"
   >
     <icon-stub
       name="close"

spec/frontend/design_management_new/pages/__snapshots__/index_spec.js.snap

 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Design management index page designs does not render toolbar when there is no permission 1`] = `
-<div>
+<div
+  data-testid="designs-root"
+>
   <!---->
    
   <div
@@ -73,7 +75,9 @@ exports[`Design management index page designs does not render toolbar when there
 `;
 
 exports[`Design management index page designs renders designs list and header with upload button 1`] = `
-<div>
+<div
+  data-testid="designs-root"
+>
   <header
     class="row-content-block border-top-0 p-2 d-flex"
   >
@@ -188,7 +192,9 @@ exports[`Design management index page designs renders designs list and header wi
 `;
 
 exports[`Design management index page designs renders error 1`] = `
-<div>
+<div
+  data-testid="designs-root"
+>
   <!---->
    
   <div
@@ -216,7 +222,9 @@ exports[`Design management index page designs renders error 1`] = `
 `;
 
 exports[`Design management index page designs renders loading icon 1`] = `
-<div>
+<div
+  data-testid="designs-root"
+>
   <!---->
    
   <div
@@ -236,7 +244,9 @@ exports[`Design management index page designs renders loading icon 1`] = `
 `;
 
 exports[`Design management index page when has no designs renders empty text 1`] = `
-<div>
+<div
+  data-testid="designs-root"
+>
   <!---->
    
   <div

spec/frontend/design_management_new/pages/design/__snapshots__/index_spec.js.snap

@@ -10,7 +10,7 @@ exports[`Design management design index page renders design index 1`] = `
     <design-destroyer-stub
       filenames="test.jpg"
       iid="1"
-      projectpath=""
+      project-path="project-path"
     />
      
     <!---->
@@ -60,7 +60,7 @@ exports[`Design management design index page renders design index 1`] = `
       designid="test"
       discussion="[object Object]"
       discussionwithopenform=""
-      markdownpreviewpath="//preview_markdown?target_type=Issue"
+      markdownpreviewpath="/project-path/preview_markdown?target_type=Issue"
       noteableid="design-id"
     />
      
@@ -108,7 +108,7 @@ exports[`Design management design index page renders design index 1`] = `
         designid="test"
         discussion="[object Object]"
         discussionwithopenform=""
-        markdownpreviewpath="//preview_markdown?target_type=Issue"
+        markdownpreviewpath="/project-path/preview_markdown?target_type=Issue"
         noteableid="design-id"
       />
     </gl-collapse-stub>
@@ -140,7 +140,7 @@ exports[`Design management design index page with error GlAlert is rendered in c
     <design-destroyer-stub
       filenames="test.jpg"
       iid="1"
-      projectpath=""
+      project-path="project-path"
     />
      
     <div

spec/frontend/design_management_new/pages/design/index_spec.js

@@ -95,9 +95,12 @@ describe('Design management design index page', () => {
         DesignSidebar,
         DesignReplyForm,
       },
+      provide: {
+        issueIid: '1',
+        projectPath: 'project-path',
+      },
       data() {
         return {
-          issueIid: '1',
           activeDiscussion: {
             id: null,
             source: null,
@@ -149,7 +152,7 @@ describe('Design management design index page', () => {
 
     expect(findSidebar().props()).toEqual({
       design,
-      markdownPreviewPath: '//preview_markdown?target_type=Issue',
+      markdownPreviewPath: '/project-path/preview_markdown?target_type=Issue',
       resolvedDiscussionsExpanded: false,
     });
   });

spec/frontend/design_management_new/pages/index_spec.js

@@ -92,19 +92,23 @@ describe('Design management index page', () => {
     };
 
     wrapper = shallowMount(Index, {
+      data() {
+        return {
+          designs,
+          allVersions,
+          permissions: {
+            createDesign,
+          },
+        };
+      },
       mocks: { $apollo },
       localVue,
       router,
       stubs: { DesignDestroyer, ApolloMutation, ...stubs },
       attachToDocument: true,
-    });
-
-    wrapper.setData({
-      designs,
-      allVersions,
-      issueIid: '1',
-      permissions: {
-        createDesign,
+      provide: {
+        projectPath: 'project-path',
+        issueIid: '1',
       },
     });
   }
@@ -117,9 +121,7 @@ describe('Design management index page', () => {
     it('renders loading icon', () => {
       createComponent({ loading: true });
 
-      return wrapper.vm.$nextTick().then(() => {
-        expect(wrapper.element).toMatchSnapshot();
-      });
+      expect(wrapper.element).toMatchSnapshot();
     });
 
     it('renders error', () => {
@@ -135,25 +137,19 @@ describe('Design management index page', () => {
     it('renders a toolbar with buttons when there are designs', () => {
       createComponent({ designs: mockDesigns, allVersions: [mockVersion] });
 
-      return wrapper.vm.$nextTick().then(() => {
-        expect(findToolbar().exists()).toBe(true);
-      });
+      expect(findToolbar().exists()).toBe(true);
     });
 
     it('renders designs list and header with upload button', () => {
       createComponent({ designs: mockDesigns, allVersions: [mockVersion] });
 
-      return wrapper.vm.$nextTick().then(() => {
-        expect(wrapper.element).toMatchSnapshot();
-      });
+      expect(wrapper.element).toMatchSnapshot();
     });
 
     it('does not render toolbar when there is no permission', () => {
       createComponent({ designs: mockDesigns, allVersions: [mockVersion], createDesign: false });
 
-      return wrapper.vm.$nextTick().then(() => {
-        expect(wrapper.element).toMatchSnapshot();
-      });
+      expect(wrapper.element).toMatchSnapshot();
     });
   });
 
@@ -185,7 +181,7 @@ describe('Design management index page', () => {
         mutation: uploadDesignQuery,
         variables: {
           files: [{ name: 'test' }],
-          projectPath: '',
+          projectPath: 'project-path',
           iid: '1',
         },
         optimisticResponse: {
@@ -442,9 +438,9 @@ describe('Design management index page', () => {
     });
   });
 
-  it('on latest version when has no designs does not render toolbar buttons', () => {
+  it('on latest version when has no designs toolbar buttons are invisible', () => {
     createComponent({ designs: [], allVersions: [mockVersion] });
-    expect(findToolbar().exists()).toBe(false);
+    expect(findToolbar().classes()).toContain('d-none');
   });
 
   describe('on non-latest version', () => {
@@ -535,7 +531,7 @@ describe('Design management index page', () => {
     it('ensures fullscreen layout is not applied', () => {
       createComponent(true);
 
-      wrapper.vm.$router.push('/designs');
+      wrapper.vm.$router.push('/');
       expect(mockPageEl.classList.remove).toHaveBeenCalledTimes(1);
       expect(mockPageEl.classList.remove).toHaveBeenCalledWith(...DESIGN_DETAIL_LAYOUT_CLASSLIST);
     });

spec/frontend/design_management_new/router_spec.js

@@ -5,11 +5,7 @@ import App from '~/design_management_new/components/app.vue';
 import Designs from '~/design_management_new/pages/index.vue';
 import DesignDetail from '~/design_management_new/pages/design/index.vue';
 import createRouter from '~/design_management_new/router';
-import {
-  ROOT_ROUTE_NAME,
-  DESIGNS_ROUTE_NAME,
-  DESIGN_ROUTE_NAME,
-} from '~/design_management_new/router/constants';
+import { DESIGNS_ROUTE_NAME, DESIGN_ROUTE_NAME } from '~/design_management_new/router/constants';
 import '~/commons/bootstrap';
 
 function factory(routeArg) {
@@ -49,7 +45,7 @@ describe('Design management router', () => {
     window.location.hash = '';
   });
 
-  describe.each([['/'], [{ name: ROOT_ROUTE_NAME }]])('root route', routeArg => {
+  describe.each([['/'], [{ name: DESIGNS_ROUTE_NAME }]])('root route', routeArg => {
     it('pushes home component', () => {
       const wrapper = factory(routeArg);
 
@@ -57,14 +53,6 @@ describe('Design management router', () => {
     });
   });
 
-  describe.each([['/designs'], [{ name: DESIGNS_ROUTE_NAME }]])('designs route', routeArg => {
-    it('pushes designs root component', () => {
-      const wrapper = factory(routeArg);
-
-      expect(wrapper.find(Designs).exists()).toBe(true);
-    });
-  });
-
   describe.each([['/designs/1'], [{ name: DESIGN_ROUTE_NAME, params: { id: '1' } }]])(
     'designs detail route',
     routeArg => {