From 91b825c5cf7c9c2e0808847810ecd7a9ed929c4f Mon Sep 17 00:00:00 2001 From: Tom Quirk Date: Thu, 7 May 2020 15:42:33 +0930 Subject: [PATCH 1/2] Initialise Design Management Vue app in CE Imports ~/design_management chunk in CE so that we attempt to mount Vue app in a CE Issue. Previously, this happened on EE issues. Design Management will still not be visible in CE, as the `.js-design-management.` element is only present on EE. --- app/assets/javascripts/pages/projects/issues/show.js | 10 ++++++++++ .../javascripts/pages/projects/issues/show/index.js | 6 ------ 2 files changed, 10 insertions(+), 6 deletions(-) diff --git a/app/assets/javascripts/pages/projects/issues/show.js b/app/assets/javascripts/pages/projects/issues/show.js index 75df80a0f6c5bd..139fe95aec2e4b 100644 --- a/app/assets/javascripts/pages/projects/issues/show.js +++ b/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.getElementById('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 diff --git a/ee/app/assets/javascripts/pages/projects/issues/show/index.js b/ee/app/assets/javascripts/pages/projects/issues/show/index.js index 0f8e0aca797025..48de8ed3c659ff 100644 --- a/ee/app/assets/javascripts/pages/projects/issues/show/index.js +++ b/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 -- GitLab From 874db91c342ffd67de5f11626f7c96db3ced3acf Mon Sep 17 00:00:00 2001 From: Tom Quirk Date: Tue, 12 May 2020 16:03:47 +0930 Subject: [PATCH 2/2] Use class for bootstrapping Design Mgmt --- app/assets/javascripts/design_management/index.js | 2 +- app/assets/javascripts/pages/projects/issues/show.js | 4 ++-- ee/app/views/projects/issues/_discussion.html.haml | 2 +- 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/app/assets/javascripts/design_management/index.js b/app/assets/javascripts/design_management/index.js index 63e59f816d704d..f0b02d07d93f0b 100644 --- a/app/assets/javascripts/design_management/index.js +++ b/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); diff --git a/app/assets/javascripts/pages/projects/issues/show.js b/app/assets/javascripts/pages/projects/issues/show.js index 139fe95aec2e4b..46c9b2fe0af0e9 100644 --- a/app/assets/javascripts/pages/projects/issues/show.js +++ b/app/assets/javascripts/pages/projects/issues/show.js @@ -13,10 +13,10 @@ export default function() { initSentryErrorStackTraceApp(); initRelatedMergeRequestsApp(); - // js-design-management is currently EE-only. + // .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.getElementById('js-design-management')) { + if (document.querySelector('.js-design-management')) { import(/* webpackChunkName: 'design_management' */ '~/design_management') .then(module => module.default()) .catch(() => {}); diff --git a/ee/app/views/projects/issues/_discussion.html.haml b/ee/app/views/projects/issues/_discussion.html.haml index 99dbb2b4373690..e0711912b9e880 100644 --- a/ee/app/views/projects/issues/_discussion.html.haml +++ b/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 -- GitLab