Use class for bootstrapping Design Mgmt

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

@@ -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(() => {});

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