Merge branch 'ek-remove-inline-script-issues-show' into 'master'

Use dataset instead of inline javascript to embed initial issuable data

See merge request gitlab-org/gitlab!42667

app/assets/javascripts/issue_show/utils/parse_data.js

+import * as Sentry from '@sentry/browser';
 import { sanitize } from '~/lib/dompurify';
 
 // We currently load + parse the data from the issue app and related merge request
@@ -7,10 +8,9 @@ export const parseIssuableData = () => {
   try {
     if (cachedParsedData) return cachedParsedData;
 
-    const initialDataEl = document.getElementById('js-issuable-app-initial-data');
-
-    const parsedData = JSON.parse(initialDataEl.textContent.replace(/"/g, '"'));
+    const initialDataEl = document.getElementById('js-issuable-app');
 
+    const parsedData = JSON.parse(initialDataEl.dataset.initial);
     parsedData.initialTitleHtml = sanitize(parsedData.initialTitleHtml);
     parsedData.initialDescriptionHtml = sanitize(parsedData.initialDescriptionHtml);
 
@@ -18,7 +18,7 @@ export const parseIssuableData = () => {
 
     return parsedData;
   } catch (e) {
-    console.error(e); // eslint-disable-line no-console
+    Sentry.captureException(e);
 
     return {};
   }

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

@@ -62,9 +62,7 @@
 
 .issue-details.issuable-details
   .detail-page-description.content-block
-    -# haml-lint:disable InlineJavaScript
-    %script#js-issuable-app-initial-data{ type: "application/json" }= issuable_initial_data(@issue).to_json
-    #js-issuable-app
+    #js-issuable-app{ data: { initial: issuable_initial_data(@issue).to_json} }
       .title-container
         %h2.title= markdown_field(@issue, :title)
       - if @issue.description.present?

spec/frontend/issue_show/issue_spec.js

@@ -14,12 +14,8 @@ useMockIntersectionObserver();
 jest.mock('~/lib/utils/poll');
 
 const setupHTML = initialData => {
-  document.body.innerHTML = `
-    <div id="js-issuable-app"></div>
-    <script id="js-issuable-app-initial-data" type="application/json">
-      ${JSON.stringify(initialData)}
-    </script>
-  `;
+  document.body.innerHTML = `<div id="js-issuable-app"></div>`;
+  document.getElementById('js-issuable-app').dataset.initial = JSON.stringify(initialData);
 };
 
 describe('Issue show index', () => {

spec/frontend/related_merge_requests/components/related_merge_requests_spec.js

@@ -19,9 +19,8 @@ describe('RelatedMergeRequests', () => {
     mockData = getJSONFixture(FIXTURE_PATH);
 
     // put the fixture in DOM as the component expects
-    document.body.innerHTML = `<div id="js-issuable-app-initial-data">${JSON.stringify(
-      mockData,
-    )}</div>`;
+    document.body.innerHTML = `<div id="js-issuable-app"></div>`;
+    document.getElementById('js-issuable-app').dataset.initial = JSON.stringify(mockData);
 
     mock = new MockAdapter(axios);
     mock.onGet(`${API_ENDPOINT}?per_page=100`).reply(200, mockData, { 'x-total': 2 });