Switch out inline script with dataset

To remove HAML lint disablement for suing inline script,
utilize dataset attribute to store the initial issuable data.

Use sentry in place of console.error when parsing fails.

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 });