Fix direct access to deprecated design path

71d92460 introduced a change to issue
routes, deprecating the old ones, but still supporting them. There was
added a special variable in issues/_discussion.html.haml to
inform the Vue app about which of the two possible routes the Vue app
was mounted on.

The calculation of `deprecated_route` was previously only returning
true if the user was looking at:

- issues/1
- issues/1/designs

But not:

- issues/1/designs/mydesign.png

In Rails, everything after the `designs` segment of the route is
wildcarded as a single param[:vueroute] so it can be handled by Vue.

https://gitlab.com/gitlab-org/gitlab/-/issues/211833

ee/app/assets/javascripts/design_management/pages/design/index.vue

@@ -254,7 +254,7 @@ export default {
 
 <template>
   <div
-    class="design-detail fixed-top w-100 position-bottom-0 d-flex justify-content-center flex-column flex-lg-row"
+    class="design-detail js-design-detail fixed-top w-100 position-bottom-0 d-flex justify-content-center flex-column flex-lg-row"
   >
     <gl-loading-icon v-if="isLoading" size="xl" class="align-self-center" />
     <template v-else>

ee/app/views/projects/issues/_discussion.html.haml

@@ -12,7 +12,7 @@
     = render_ce 'projects/issues/discussion'
   #designs-tab.tab-pane{ role: 'tabpanel', 'aria-labelledby': 'designs', data: { qa_selector: 'designs_tab_content'} }
     - if @project.design_management_enabled?
-      - deprecated_route = current_page?(project_deprecated_issue_path(@project, @issue)) || current_page?(designs_project_deprecated_issue_path(@project, @issue))
+      - deprecated_route = current_page?(project_deprecated_issue_path(@project, @issue)) || request.path.start_with?(designs_project_deprecated_issue_path(@project, @issue))
       #js-design-management{ data: { project_path: @project.full_path, issue_iid: @issue.iid, issue_path: deprecated_route ? project_deprecated_issue_path(@project, @issue) : project_issue_path(@project, @issue) } }
     - else
       .mt-4

ee/changelogs/unreleased/211833-fix-direct-access-to-deprecated-design-path.yml

+---
+title: Fix direct access to individual design on deprecated issue route
+merge_request: 27650
+author:
+type: fixed

ee/spec/features/projects/issues/design_management/user_views_designs_from_deprecated_route_spec.rb

+# frozen_string_literal: true
+
+require 'spec_helper'
+
+describe 'User views issue designs from deprecated issue routes', :js do
+  include DesignManagementTestHelpers
+
+  let_it_be(:project) { create(:project_empty_repo, :public) }
+  let_it_be(:issue) { create(:issue, project: project) }
+  let_it_be(:design) { create(:design, :with_file, issue: issue) }
+
+  before do
+    enable_design_management
+  end
+
+  context 'navigates from the issue view on the deprecated route' do
+    before do
+      visit project_deprecated_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
+
+  context 'navigates directly to the design collection view on the deprecated route' do
+    before do
+      visit designs_project_deprecated_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 on the deprecated route' do
+    before do
+      visit designs_project_deprecated_issue_path(project, issue, vueroute: design.filename)
+    end
+
+    it 'sees the design' do
+      expect(page).to have_selector('.js-design-detail')
+    end
+  end
+end

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

@@ -25,7 +25,7 @@ describe 'User views issue designs', :js do
     end
   end
 
-  context 'navigates directly to the design view' do
+  context 'navigates directly to the design collection view' do
     before do
       visit designs_project_issue_path(project, issue)
     end
@@ -34,4 +34,14 @@ describe 'User views issue designs', :js 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

ee/spec/frontend/design_management/pages/design/__snapshots__/index_spec.js.snap

@@ -2,7 +2,7 @@
 
 exports[`Design management design index page renders design index 1`] = `
 <div
-  class="design-detail fixed-top w-100 position-bottom-0 d-flex justify-content-center flex-column flex-lg-row"
+  class="design-detail js-design-detail fixed-top w-100 position-bottom-0 d-flex justify-content-center flex-column flex-lg-row"
 >
   <div
     class="d-flex overflow-hidden flex-grow-1 flex-column position-relative"
@@ -66,7 +66,7 @@ exports[`Design management design index page renders design index 1`] = `
 
 exports[`Design management design index page sets loading state 1`] = `
 <div
-  class="design-detail fixed-top w-100 position-bottom-0 d-flex justify-content-center flex-column flex-lg-row"
+  class="design-detail js-design-detail fixed-top w-100 position-bottom-0 d-flex justify-content-center flex-column flex-lg-row"
 >
   <gl-loading-icon-stub
     class="align-self-center"
@@ -79,7 +79,7 @@ exports[`Design management design index page sets loading state 1`] = `
 
 exports[`Design management design index page with error GlAlert is rendered in correct position with correct content 1`] = `
 <div
-  class="design-detail fixed-top w-100 position-bottom-0 d-flex justify-content-center flex-column flex-lg-row"
+  class="design-detail js-design-detail fixed-top w-100 position-bottom-0 d-flex justify-content-center flex-column flex-lg-row"
 >
   <div
     class="d-flex overflow-hidden flex-grow-1 flex-column position-relative"