Merge branch 'design-management-ee-to-ce-fe-vue-app' into 'master'

Design Management FE to FOSS Part 2/3: Init Design Mgmt. Vue app in CE

See merge request gitlab-org/gitlab!31306

app/assets/javascripts/design_management/index.js

@@ -7,7 +7,7 @@ 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.getElementById('js-design-management');
+  const el = document.querySelector('.js-design-management');
   const badge = document.querySelector('.js-designs-count');
   const { issueIid, projectPath, issuePath } = el.dataset;
   const router = createRouter(issuePath);

app/assets/javascripts/pages/projects/issues/show.js

@@ -12,6 +12,16 @@ export default function() {
   initIssueableApp();
   initSentryErrorStackTraceApp();
   initRelatedMergeRequestsApp();
+
+  // .js-design-management is currently EE-only.
+  // This will be moved to CE as part of https://gitlab.com/gitlab-org/gitlab/-/issues/212566#frontend
+  // at which point this conditional can be removed.
+  if (document.querySelector('.js-design-management')) {
+    import(/* webpackChunkName: 'design_management' */ '~/design_management')
+      .then(module => module.default())
+      .catch(() => {});
+  }
+
   new Issue(); // eslint-disable-line no-new
   new ShortcutsIssuable(); // eslint-disable-line no-new
   new ZenMode(); // eslint-disable-line no-new

ee/app/assets/javascripts/pages/projects/issues/show/index.js

@@ -10,12 +10,6 @@ document.addEventListener('DOMContentLoaded', () => {
   }
   initRelatedIssues();
 
-  if (document.getElementById('js-design-management')) {
-    import(/* webpackChunkName: 'design_management' */ '~/design_management')
-      .then(module => module.default())
-      .catch(() => {});
-  }
-
   // eslint-disable-next-line no-new
   new UserCallout({ className: 'js-epics-sidebar-callout' });
   // eslint-disable-next-line no-new

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?
-      #js-design-management{ data: { project_path: @project.full_path, issue_iid: @issue.iid, issue_path: project_issue_path(@project, @issue) } }
+      .js-design-management{ data: { project_path: @project.full_path, issue_iid: @issue.iid, issue_path: project_issue_path(@project, @issue) } }
     - else
       .mt-4
         .row.empty-state