From 9a8766e03e97e33d8591ea3833ab02467a3089f8 Mon Sep 17 00:00:00 2001
From: Enrique Alcantara <ealcantara@gitlab.com>
Date: Mon, 2 May 2022 09:43:38 -0400
Subject: [PATCH 01/20] Allow to create tables with JSON

Convert JSON code blocks into tables
if the code blocks have a table param

Changelog: added
---
 .../behaviors/components/json_table.vue       | 22 +++++++++++++
 .../behaviors/markdown/render_gfm.js          |  3 +-
 .../behaviors/markdown/render_json_table.js   | 31 +++++++++++++++++++
 3 files changed, 55 insertions(+), 1 deletion(-)
 create mode 100644 app/assets/javascripts/behaviors/components/json_table.vue
 create mode 100644 app/assets/javascripts/behaviors/markdown/render_json_table.js

diff --git a/app/assets/javascripts/behaviors/components/json_table.vue b/app/assets/javascripts/behaviors/components/json_table.vue
new file mode 100644
index 00000000000000..a6a76aee1360a8
--- /dev/null
+++ b/app/assets/javascripts/behaviors/components/json_table.vue
@@ -0,0 +1,22 @@
+<script>
+import { GlTableLite } from '@gitlab/ui';
+
+export default {
+  components: {
+    GlTableLite,
+  },
+  props: {
+    fields: {
+      type: Array,
+      required: true,
+    },
+    items: {
+      type: Array,
+      required: true,
+    },
+  },
+};
+</script>
+<template>
+  <gl-table-lite :fields="fields" :items="items" />
+</template>
diff --git a/app/assets/javascripts/behaviors/markdown/render_gfm.js b/app/assets/javascripts/behaviors/markdown/render_gfm.js
index c9ae370638358b..7716fed117320a 100644
--- a/app/assets/javascripts/behaviors/markdown/render_gfm.js
+++ b/app/assets/javascripts/behaviors/markdown/render_gfm.js
@@ -5,6 +5,7 @@ import { renderKroki } from './render_kroki';
 import renderMath from './render_math';
 import renderSandboxedMermaid from './render_sandboxed_mermaid';
 import renderMetrics from './render_metrics';
+import { renderJSONTable } from './render_json_table';
 
 // Render GitLab flavoured Markdown
 //
@@ -15,7 +16,7 @@ $.fn.renderGFM = function renderGFM() {
   renderKroki(this.find('.js-render-kroki[hidden]').get());
   renderMath(this.find('.js-render-math'));
   renderSandboxedMermaid(this.find('.js-render-mermaid'));
-
+  renderJSONTable(document.querySelectorAll('[lang="json"][data-lang-params="table"]'));
   highlightCurrentUser(this.find('.gfm-project_member').get());
 
   const issuablePopoverElements = this.find('.gfm-issue, .gfm-merge_request').get();
diff --git a/app/assets/javascripts/behaviors/markdown/render_json_table.js b/app/assets/javascripts/behaviors/markdown/render_json_table.js
new file mode 100644
index 00000000000000..0d158984725643
--- /dev/null
+++ b/app/assets/javascripts/behaviors/markdown/render_json_table.js
@@ -0,0 +1,31 @@
+import Vue from 'vue';
+import JSONTable from '../components/json_table.vue';
+
+const renderTable = (element) => {
+  const { fields, items } = JSON.parse(element.textContent);
+  const el = document.createElement('div');
+
+  element.insertAdjacentElement('afterend', el);
+  element.remove();
+
+  return new Vue({
+    el,
+    components: {
+      JSONTable,
+    },
+    render(h) {
+      return h(JSONTable, {
+        props: {
+          fields,
+          items,
+        },
+      });
+    },
+  });
+};
+
+export const renderJSONTable = (elements) => {
+  elements.forEach((el) => {
+    window.requestIdleCallback(() => renderTable(el));
+  });
+};
-- 
GitLab


From 86db432c6d5f970d8ca51e1ca1574fa783829877 Mon Sep 17 00:00:00 2001
From: Enrique Alcantara <ealcantara@gitlab.com>
Date: Thu, 5 May 2022 09:19:46 -0400
Subject: [PATCH 02/20] Add test coverage

---
 .../behaviors/components/json_table_spec.js   | 22 ++++++++++++++
 .../markdown/render_json_table_spec.js        | 29 +++++++++++++++++++
 2 files changed, 51 insertions(+)
 create mode 100644 spec/frontend/behaviors/components/json_table_spec.js
 create mode 100644 spec/frontend/behaviors/markdown/render_json_table_spec.js

diff --git a/spec/frontend/behaviors/components/json_table_spec.js b/spec/frontend/behaviors/components/json_table_spec.js
new file mode 100644
index 00000000000000..14abe440913068
--- /dev/null
+++ b/spec/frontend/behaviors/components/json_table_spec.js
@@ -0,0 +1,22 @@
+import { GlTableLite } from '@gitlab/ui';
+import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
+import JSONTable from '~/behaviors/components/json_table.vue';
+
+describe('behaviors/components/json_table', () => {
+  let wrapper;
+
+  const buildWrapper = ({ fields = [], items = [] } = {}) => {
+    wrapper = shallowMountExtended(JSONTable, {
+      propsData: {
+        fields,
+        items,
+      },
+    });
+  };
+
+  it('renders the component', () => {
+    buildWrapper();
+
+    expect(wrapper.findComponent(GlTableLite).exists()).toBe(true);
+  });
+});
diff --git a/spec/frontend/behaviors/markdown/render_json_table_spec.js b/spec/frontend/behaviors/markdown/render_json_table_spec.js
new file mode 100644
index 00000000000000..d1547226eed11a
--- /dev/null
+++ b/spec/frontend/behaviors/markdown/render_json_table_spec.js
@@ -0,0 +1,29 @@
+import { renderJSONTable } from '~/behaviors/markdown/render_json_table';
+
+describe('behaviors/markdown/render_json_table', () => {
+  const tableFixture = {
+    fields: ['a', 'b', 'c'],
+    items: [
+      {
+        a: 'a',
+        b: 'b',
+        c: 'c',
+      },
+    ],
+  };
+
+  it('replaces pre code block with a table vue application', () => {
+    const pre = document.createElement('pre');
+
+    pre.textContent = JSON.stringify(tableFixture, null, 2);
+
+    document.body.appendChild(pre);
+
+    renderJSONTable(document.querySelectorAll('pre'));
+
+    jest.runAllTimers();
+
+    expect(document.querySelectorAll('pre')).toHaveLength(0);
+    expect(document.querySelectorAll('table')).toHaveLength(1);
+  });
+});
-- 
GitLab


From 3a8275e12efc8869be98f17457123d00aebd69ec Mon Sep 17 00:00:00 2001
From: Vishal Tak <vtak@gitlab.com>
Date: Thu, 12 May 2022 15:05:15 +0530
Subject: [PATCH 03/20] Use GlTable. Add error message. Clean fields before
 rendering

---
 .../behaviors/components/json_table.vue       | 26 +++++-
 .../behaviors/markdown/render_json_table.js   | 12 ++-
 .../behaviors/components/json_table_spec.js   | 83 +++++++++++++++++--
 .../markdown/render_json_table_spec.js        | 15 ++++
 4 files changed, 127 insertions(+), 9 deletions(-)

diff --git a/app/assets/javascripts/behaviors/components/json_table.vue b/app/assets/javascripts/behaviors/components/json_table.vue
index a6a76aee1360a8..717d538ae058c3 100644
--- a/app/assets/javascripts/behaviors/components/json_table.vue
+++ b/app/assets/javascripts/behaviors/components/json_table.vue
@@ -1,9 +1,9 @@
 <script>
-import { GlTableLite } from '@gitlab/ui';
+import { GlTable } from '@gitlab/ui';
 
 export default {
   components: {
-    GlTableLite,
+    GlTable,
   },
   props: {
     fields: {
@@ -14,9 +14,29 @@ export default {
       type: Array,
       required: true,
     },
+    errMsg: {
+      type: String,
+      required: false,
+      default: null,
+    },
+  },
+  data() {
+    const cleanedFields = this.fields.map((field) => {
+      if (typeof field === 'string') {
+        return field;
+      }
+      return {
+        key: field.key,
+        label: field.label,
+      };
+    });
+    return {
+      cleanedFields,
+    };
   },
 };
 </script>
 <template>
-  <gl-table-lite :fields="fields" :items="items" />
+  <h1 v-if="errMsg !== null" id="errMsg">{{ errMsg }}</h1>
+  <gl-table v-else :fields="cleanedFields" :items="items" />
 </template>
diff --git a/app/assets/javascripts/behaviors/markdown/render_json_table.js b/app/assets/javascripts/behaviors/markdown/render_json_table.js
index 0d158984725643..06936c7a3d7742 100644
--- a/app/assets/javascripts/behaviors/markdown/render_json_table.js
+++ b/app/assets/javascripts/behaviors/markdown/render_json_table.js
@@ -2,7 +2,16 @@ import Vue from 'vue';
 import JSONTable from '../components/json_table.vue';
 
 const renderTable = (element) => {
-  const { fields, items } = JSON.parse(element.textContent);
+  let rawData = [];
+  let errMsg = null;
+
+  try {
+    rawData = JSON.parse(element.textContent);
+  } catch (e) {
+    errMsg = 'Unable to parse JSON';
+  }
+  const fields = rawData.fields === undefined ? [] : rawData.fields;
+  const items = rawData.items === undefined ? [] : rawData.items;
   const el = document.createElement('div');
 
   element.insertAdjacentElement('afterend', el);
@@ -18,6 +27,7 @@ const renderTable = (element) => {
         props: {
           fields,
           items,
+          errMsg,
         },
       });
     },
diff --git a/spec/frontend/behaviors/components/json_table_spec.js b/spec/frontend/behaviors/components/json_table_spec.js
index 14abe440913068..137eaafcd2f5e9 100644
--- a/spec/frontend/behaviors/components/json_table_spec.js
+++ b/spec/frontend/behaviors/components/json_table_spec.js
@@ -1,15 +1,16 @@
-import { GlTableLite } from '@gitlab/ui';
-import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
+import { GlTable } from '@gitlab/ui';
+import { mountExtended } from 'helpers/vue_test_utils_helper';
 import JSONTable from '~/behaviors/components/json_table.vue';
 
 describe('behaviors/components/json_table', () => {
   let wrapper;
 
-  const buildWrapper = ({ fields = [], items = [] } = {}) => {
-    wrapper = shallowMountExtended(JSONTable, {
+  const buildWrapper = ({ fields = [], items = [], errMsg = undefined } = {}) => {
+    wrapper = mountExtended(JSONTable, {
       propsData: {
         fields,
         items,
+        errMsg,
       },
     });
   };
@@ -17,6 +18,78 @@ describe('behaviors/components/json_table', () => {
   it('renders the component', () => {
     buildWrapper();
 
-    expect(wrapper.findComponent(GlTableLite).exists()).toBe(true);
+    expect(wrapper.findComponent(GlTable).exists()).toBe(true);
+  });
+
+  it('keep fields as it is when it is an array of strings', () => {
+    const tableFixture = {
+      fields: ['a', 'b', 'c'],
+      items: [
+        {
+          a: 'a',
+          b: 'b',
+          c: 'c',
+        },
+      ],
+    };
+    const cleanedField = ['a', 'b', 'c'];
+    buildWrapper(tableFixture);
+
+    expect(wrapper.findComponent(GlTable).vm.$options.parent.cleanedFields).toEqual(cleanedField);
+  });
+
+  it('clean fields when it is an array of objects', () => {
+    const tableFixture = {
+      fields: [
+        {
+          key: 'a',
+          label: 'A',
+          extra: true,
+        },
+        {
+          key: 'b',
+          label: 'B',
+          dummy: 1,
+        },
+        {
+          key: 'c',
+          label: 'C',
+        },
+      ],
+      items: [
+        {
+          a: 'a',
+          b: 'b',
+          c: 'c',
+        },
+      ],
+    };
+    const cleanedField = [
+      {
+        key: 'a',
+        label: 'A',
+      },
+      {
+        key: 'b',
+        label: 'B',
+      },
+      {
+        key: 'c',
+        label: 'C',
+      },
+    ];
+    buildWrapper(tableFixture);
+
+    expect(wrapper.findComponent(GlTable).vm.$options.parent.cleanedFields).toEqual(cleanedField);
+  });
+
+  it('error is rendered', () => {
+    const errMsg = 'This is an error';
+    buildWrapper({ errMsg });
+
+    const errMsgComponent = wrapper.find('#errMsg');
+    expect(errMsgComponent.exists()).toBe(true);
+    expect(errMsgComponent.text()).toBe(errMsg);
+    expect(wrapper.findComponent(GlTable).exists()).toBe(false);
   });
 });
diff --git a/spec/frontend/behaviors/markdown/render_json_table_spec.js b/spec/frontend/behaviors/markdown/render_json_table_spec.js
index d1547226eed11a..5a5a876a6870a7 100644
--- a/spec/frontend/behaviors/markdown/render_json_table_spec.js
+++ b/spec/frontend/behaviors/markdown/render_json_table_spec.js
@@ -26,4 +26,19 @@ describe('behaviors/markdown/render_json_table', () => {
     expect(document.querySelectorAll('pre')).toHaveLength(0);
     expect(document.querySelectorAll('table')).toHaveLength(1);
   });
+
+  it('error is displayed when invalid JSON is provided', () => {
+    const pre = document.createElement('pre');
+
+    pre.textContent = JSON.stringify(tableFixture, null, 2).concat('.');
+
+    document.body.appendChild(pre);
+
+    renderJSONTable(document.querySelectorAll('pre'));
+
+    jest.runAllTimers();
+
+    expect(document.querySelectorAll('pre')).toHaveLength(0);
+    expect(document.querySelectorAll('h1')).toHaveLength(1);
+  });
 });
-- 
GitLab


From d28d2988dd7f5d47e3ca65acb81836109279c75b Mon Sep 17 00:00:00 2001
From: Vishal Tak <vtak@gitlab.com>
Date: Thu, 12 May 2022 16:35:01 +0530
Subject: [PATCH 04/20] Use GlAlert for showing rendering errors

---
 .../javascripts/behaviors/components/json_table.vue   | 11 ++++++++---
 .../behaviors/markdown/render_json_table.js           |  4 +++-
 spec/frontend/behaviors/components/json_table_spec.js |  6 ++----
 .../behaviors/markdown/render_json_table_spec.js      |  4 ++--
 4 files changed, 15 insertions(+), 10 deletions(-)

diff --git a/app/assets/javascripts/behaviors/components/json_table.vue b/app/assets/javascripts/behaviors/components/json_table.vue
index 717d538ae058c3..720ee6503c5e0e 100644
--- a/app/assets/javascripts/behaviors/components/json_table.vue
+++ b/app/assets/javascripts/behaviors/components/json_table.vue
@@ -1,9 +1,10 @@
 <script>
-import { GlTable } from '@gitlab/ui';
+import { GlTable, GlAlert } from '@gitlab/ui';
 
 export default {
   components: {
     GlTable,
+    GlAlert,
   },
   props: {
     fields: {
@@ -37,6 +38,10 @@ export default {
 };
 </script>
 <template>
-  <h1 v-if="errMsg !== null" id="errMsg">{{ errMsg }}</h1>
-  <gl-table v-else :fields="cleanedFields" :items="items" />
+  <div>
+    <gl-alert v-if="errMsg !== null" showIcon variant="warning" :dismissible="false">{{
+      errMsg
+    }}</gl-alert>
+    <gl-table v-else :fields="cleanedFields" :items="items" />
+  </div>
 </template>
diff --git a/app/assets/javascripts/behaviors/markdown/render_json_table.js b/app/assets/javascripts/behaviors/markdown/render_json_table.js
index 06936c7a3d7742..446645370d65e7 100644
--- a/app/assets/javascripts/behaviors/markdown/render_json_table.js
+++ b/app/assets/javascripts/behaviors/markdown/render_json_table.js
@@ -15,7 +15,9 @@ const renderTable = (element) => {
   const el = document.createElement('div');
 
   element.insertAdjacentElement('afterend', el);
-  element.remove();
+  if (errMsg === null) {
+    element.remove();
+  }
 
   return new Vue({
     el,
diff --git a/spec/frontend/behaviors/components/json_table_spec.js b/spec/frontend/behaviors/components/json_table_spec.js
index 137eaafcd2f5e9..92c8ae2af6418c 100644
--- a/spec/frontend/behaviors/components/json_table_spec.js
+++ b/spec/frontend/behaviors/components/json_table_spec.js
@@ -1,4 +1,4 @@
-import { GlTable } from '@gitlab/ui';
+import { GlTable, GlAlert } from '@gitlab/ui';
 import { mountExtended } from 'helpers/vue_test_utils_helper';
 import JSONTable from '~/behaviors/components/json_table.vue';
 
@@ -87,9 +87,7 @@ describe('behaviors/components/json_table', () => {
     const errMsg = 'This is an error';
     buildWrapper({ errMsg });
 
-    const errMsgComponent = wrapper.find('#errMsg');
-    expect(errMsgComponent.exists()).toBe(true);
-    expect(errMsgComponent.text()).toBe(errMsg);
+    expect(wrapper.findComponent(GlAlert).exists()).toBe(true);
     expect(wrapper.findComponent(GlTable).exists()).toBe(false);
   });
 });
diff --git a/spec/frontend/behaviors/markdown/render_json_table_spec.js b/spec/frontend/behaviors/markdown/render_json_table_spec.js
index 5a5a876a6870a7..46d01c0688052a 100644
--- a/spec/frontend/behaviors/markdown/render_json_table_spec.js
+++ b/spec/frontend/behaviors/markdown/render_json_table_spec.js
@@ -38,7 +38,7 @@ describe('behaviors/markdown/render_json_table', () => {
 
     jest.runAllTimers();
 
-    expect(document.querySelectorAll('pre')).toHaveLength(0);
-    expect(document.querySelectorAll('h1')).toHaveLength(1);
+    expect(document.querySelectorAll('pre')).toHaveLength(1);
+    expect(document.querySelectorAll('.gl-alert')).toHaveLength(1);
   });
 });
-- 
GitLab


From 05d506f60f07becb2fee68dde532182dde303b36 Mon Sep 17 00:00:00 2001
From: Vishal Tak <vtak@gitlab.com>
Date: Fri, 20 May 2022 12:43:45 +0530
Subject: [PATCH 05/20] Add filter and sorting capabilities to table

Improve error handling. Add ability to sort columns in tables and filter values.
---
 .../behaviors/components/json_table.vue       | 27 ++++++--
 .../behaviors/markdown/render_gfm.js          |  4 +-
 .../behaviors/markdown/render_json_table.js   | 15 ++--
 locale/gitlab.pot                             |  6 ++
 .../behaviors/components/json_table_spec.js   | 68 +++++++------------
 .../markdown/render_json_table_spec.js        | 33 +++++++--
 6 files changed, 97 insertions(+), 56 deletions(-)

diff --git a/app/assets/javascripts/behaviors/components/json_table.vue b/app/assets/javascripts/behaviors/components/json_table.vue
index 720ee6503c5e0e..6492a40b5df81a 100644
--- a/app/assets/javascripts/behaviors/components/json_table.vue
+++ b/app/assets/javascripts/behaviors/components/json_table.vue
@@ -1,10 +1,11 @@
 <script>
-import { GlTable, GlAlert } from '@gitlab/ui';
+import { GlTable, GlAlert, GlFormInput } from '@gitlab/ui';
 
 export default {
   components: {
     GlTable,
     GlAlert,
+    GlFormInput,
   },
   props: {
     fields: {
@@ -15,6 +16,11 @@ export default {
       type: Array,
       required: true,
     },
+    filter: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
     errMsg: {
       type: String,
       required: false,
@@ -29,19 +35,32 @@ export default {
       return {
         key: field.key,
         label: field.label,
+        sortable: field.sortable || false,
       };
     });
     return {
       cleanedFields,
+      filterInput: '',
     };
   },
+  computed: {
+    hasErrors() {
+      return this.errMsg !== null;
+    },
+    hasFilter() {
+      return this.filter;
+    },
+  },
 };
 </script>
 <template>
-  <div>
-    <gl-alert v-if="errMsg !== null" showIcon variant="warning" :dismissible="false">{{
+  <div class="js-json-table">
+    <gl-alert v-if="hasErrors" show-icon variant="warning" :dismissible="false">{{
       errMsg
     }}</gl-alert>
-    <gl-table v-else :fields="cleanedFields" :items="items" />
+    <div v-else class="gl-display-inline-block">
+      <gl-form-input v-if="hasFilter" v-model="filterInput" :placeholder="__('Type to search')" />
+      <gl-table :fields="cleanedFields" :items="items" :filter="filterInput" />
+    </div>
   </div>
 </template>
diff --git a/app/assets/javascripts/behaviors/markdown/render_gfm.js b/app/assets/javascripts/behaviors/markdown/render_gfm.js
index 7716fed117320a..48d9d15387d2d8 100644
--- a/app/assets/javascripts/behaviors/markdown/render_gfm.js
+++ b/app/assets/javascripts/behaviors/markdown/render_gfm.js
@@ -16,7 +16,9 @@ $.fn.renderGFM = function renderGFM() {
   renderKroki(this.find('.js-render-kroki[hidden]').get());
   renderMath(this.find('.js-render-math'));
   renderSandboxedMermaid(this.find('.js-render-mermaid'));
-  renderJSONTable(document.querySelectorAll('[lang="json"][data-lang-params="table"]'));
+  renderJSONTable(
+    Array.from(this.find('[lang="json"][data-lang-params="table"]').get()).map((e) => e.parentNode),
+  );
   highlightCurrentUser(this.find('.gfm-project_member').get());
 
   const issuablePopoverElements = this.find('.gfm-issue, .gfm-merge_request').get();
diff --git a/app/assets/javascripts/behaviors/markdown/render_json_table.js b/app/assets/javascripts/behaviors/markdown/render_json_table.js
index 446645370d65e7..948c38a8e7052c 100644
--- a/app/assets/javascripts/behaviors/markdown/render_json_table.js
+++ b/app/assets/javascripts/behaviors/markdown/render_json_table.js
@@ -1,20 +1,26 @@
 import Vue from 'vue';
+import { __ } from '~/locale';
 import JSONTable from '../components/json_table.vue';
 
 const renderTable = (element) => {
+  const prev = element.previousElementSibling;
+  if (prev && prev.classList.contains('js-json-table')) {
+    // To avoid rendering it multiple times
+    return {};
+  }
   let rawData = [];
   let errMsg = null;
 
   try {
     rawData = JSON.parse(element.textContent);
   } catch (e) {
-    errMsg = 'Unable to parse JSON';
+    errMsg = __('Unable to parse JSON');
+    rawData = {};
   }
-  const fields = rawData.fields === undefined ? [] : rawData.fields;
-  const items = rawData.items === undefined ? [] : rawData.items;
+  const { fields = [], items = [], filter } = rawData;
   const el = document.createElement('div');
 
-  element.insertAdjacentElement('afterend', el);
+  element.insertAdjacentElement('beforebegin', el);
   if (errMsg === null) {
     element.remove();
   }
@@ -29,6 +35,7 @@ const renderTable = (element) => {
         props: {
           fields,
           items,
+          filter,
           errMsg,
         },
       });
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index d07818c19f55e1..522bd00a7a99cc 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -41250,6 +41250,9 @@ msgstr ""
 msgid "Type"
 msgstr ""
 
+msgid "Type to search"
+msgstr ""
+
 msgid "U2F Devices (%{length})"
 msgstr ""
 
@@ -41370,6 +41373,9 @@ msgstr ""
 msgid "Unable to load the merge request widget. Try reloading the page."
 msgstr ""
 
+msgid "Unable to parse JSON"
+msgstr ""
+
 msgid "Unable to parse the vulnerability report's options."
 msgstr ""
 
diff --git a/spec/frontend/behaviors/components/json_table_spec.js b/spec/frontend/behaviors/components/json_table_spec.js
index 92c8ae2af6418c..5d27d316f044d6 100644
--- a/spec/frontend/behaviors/components/json_table_spec.js
+++ b/spec/frontend/behaviors/components/json_table_spec.js
@@ -1,15 +1,21 @@
-import { GlTable, GlAlert } from '@gitlab/ui';
+import { GlTable, GlAlert, GlFormInput } from '@gitlab/ui';
 import { mountExtended } from 'helpers/vue_test_utils_helper';
 import JSONTable from '~/behaviors/components/json_table.vue';
 
 describe('behaviors/components/json_table', () => {
   let wrapper;
 
-  const buildWrapper = ({ fields = [], items = [], errMsg = undefined } = {}) => {
+  const buildWrapper = ({
+    fields = [],
+    items = [],
+    filter = undefined,
+    errMsg = undefined,
+  } = {}) => {
     wrapper = mountExtended(JSONTable, {
       propsData: {
         fields,
         items,
+        filter,
         errMsg,
       },
     });
@@ -24,13 +30,7 @@ describe('behaviors/components/json_table', () => {
   it('keep fields as it is when it is an array of strings', () => {
     const tableFixture = {
       fields: ['a', 'b', 'c'],
-      items: [
-        {
-          a: 'a',
-          b: 'b',
-          c: 'c',
-        },
-      ],
+      items: [{ a: 'a', b: 'b', c: 'c' }],
     };
     const cleanedField = ['a', 'b', 'c'];
     buildWrapper(tableFixture);
@@ -38,51 +38,33 @@ describe('behaviors/components/json_table', () => {
     expect(wrapper.findComponent(GlTable).vm.$options.parent.cleanedFields).toEqual(cleanedField);
   });
 
-  it('clean fields when it is an array of objects', () => {
+  it('extra elements are removed from fields and defaults are setwhen it is an array of objects', () => {
     const tableFixture = {
       fields: [
-        {
-          key: 'a',
-          label: 'A',
-          extra: true,
-        },
-        {
-          key: 'b',
-          label: 'B',
-          dummy: 1,
-        },
-        {
-          key: 'c',
-          label: 'C',
-        },
-      ],
-      items: [
-        {
-          a: 'a',
-          b: 'b',
-          c: 'c',
-        },
+        { key: 'a', label: 'A', extra: true },
+        { key: 'b', label: 'B', sortable: true, dummy: 1 },
+        { key: 'c', label: 'C' },
       ],
+      items: [{ a: 'a', b: 'b', c: 'c' }],
     };
     const cleanedField = [
-      {
-        key: 'a',
-        label: 'A',
-      },
-      {
-        key: 'b',
-        label: 'B',
-      },
-      {
-        key: 'c',
-        label: 'C',
-      },
+      { key: 'a', label: 'A', sortable: false },
+      { key: 'b', label: 'B', sortable: true },
+      { key: 'c', label: 'C', sortable: false },
     ];
     buildWrapper(tableFixture);
 
     expect(wrapper.findComponent(GlTable).vm.$options.parent.cleanedFields).toEqual(cleanedField);
   });
 
+  it('filter form input is rendered', () => {
+    const filter = true;
+    buildWrapper({ filter });
+
+    expect(wrapper.findComponent(GlTable).exists()).toBe(true);
+    expect(wrapper.findComponent(GlFormInput).exists()).toBe(true);
+  });
+
   it('error is rendered', () => {
     const errMsg = 'This is an error';
     buildWrapper({ errMsg });
diff --git a/spec/frontend/behaviors/markdown/render_json_table_spec.js b/spec/frontend/behaviors/markdown/render_json_table_spec.js
index 46d01c0688052a..a88ef4965bdf8d 100644
--- a/spec/frontend/behaviors/markdown/render_json_table_spec.js
+++ b/spec/frontend/behaviors/markdown/render_json_table_spec.js
@@ -13,13 +13,16 @@ describe('behaviors/markdown/render_json_table', () => {
   };
 
   it('replaces pre code block with a table vue application', () => {
+    const parent = document.createElement('div');
     const pre = document.createElement('pre');
 
     pre.textContent = JSON.stringify(tableFixture, null, 2);
 
-    document.body.appendChild(pre);
+    parent.appendChild(pre);
+    document.body.innerHTML = '';
+    document.body.appendChild(parent);
 
-    renderJSONTable(document.querySelectorAll('pre'));
+    renderJSONTable([parent]);
 
     jest.runAllTimers();
 
@@ -28,17 +31,39 @@ describe('behaviors/markdown/render_json_table', () => {
   });
 
   it('error is displayed when invalid JSON is provided', () => {
+    const parent = document.createElement('div');
     const pre = document.createElement('pre');
 
     pre.textContent = JSON.stringify(tableFixture, null, 2).concat('.');
 
-    document.body.appendChild(pre);
+    parent.appendChild(pre);
+    document.body.innerHTML = '';
+    document.body.appendChild(parent);
 
-    renderJSONTable(document.querySelectorAll('pre'));
+    renderJSONTable([parent]);
 
     jest.runAllTimers();
 
     expect(document.querySelectorAll('pre')).toHaveLength(1);
     expect(document.querySelectorAll('.gl-alert')).toHaveLength(1);
   });
+
+  it('form input is displayed when filter is set', () => {
+    const parent = document.createElement('div');
+    const pre = document.createElement('pre');
+
+    pre.textContent = JSON.stringify({ ...tableFixture, filter: true }, null, 2);
+
+    parent.appendChild(pre);
+    document.body.innerHTML = '';
+    document.body.appendChild(parent);
+
+    renderJSONTable([parent]);
+
+    jest.runAllTimers();
+
+    expect(document.querySelectorAll('pre')).toHaveLength(0);
+    expect(document.querySelectorAll('table')).toHaveLength(1);
+    expect(document.querySelectorAll('.gl-form-input')).toHaveLength(1);
+  });
 });
-- 
GitLab


From cbb7343a6efb3de8cf611e789b93ce8a2fe9007c Mon Sep 17 00:00:00 2001
From: Vishal Tak <vtak@gitlab.com>
Date: Wed, 29 Jun 2022 21:35:52 +0530
Subject: [PATCH 06/20] Differentiate between JSON Table and other tables

---
 .../behaviors/components/json_table.vue       | 26 ++++++++++++++++---
 .../behaviors/markdown/render_gfm.js          |  1 +
 locale/gitlab.pot                             |  6 +++++
 .../behaviors/components/json_table_spec.js   |  3 ++-
 4 files changed, 31 insertions(+), 5 deletions(-)

diff --git a/app/assets/javascripts/behaviors/components/json_table.vue b/app/assets/javascripts/behaviors/components/json_table.vue
index 6492a40b5df81a..b9cb282a1a4473 100644
--- a/app/assets/javascripts/behaviors/components/json_table.vue
+++ b/app/assets/javascripts/behaviors/components/json_table.vue
@@ -1,11 +1,16 @@
 <script>
-import { GlTable, GlAlert, GlFormInput } from '@gitlab/ui';
+import { GlTable, GlAlert, GlFormInput, GlBadge, GlTooltipDirective } from '@gitlab/ui';
+import { __ } from '~/locale';
 
 export default {
   components: {
     GlTable,
     GlAlert,
     GlFormInput,
+    GlBadge,
+  },
+  directives: {
+    GlTooltip: GlTooltipDirective,
   },
   props: {
     fields: {
@@ -41,6 +46,8 @@ export default {
     return {
       cleanedFields,
       filterInput: '',
+      badgeTitle: __('JSON:Table is different from a Markdown Table'),
+      badgeText: __('JSON:Table'),
     };
   },
   computed: {
@@ -50,6 +57,9 @@ export default {
     hasFilter() {
       return this.filter;
     },
+    columnCount() {
+      return this.cleanedFields.length;
+    },
   },
 };
 </script>
@@ -58,9 +68,17 @@ export default {
     <gl-alert v-if="hasErrors" show-icon variant="warning" :dismissible="false">{{
       errMsg
     }}</gl-alert>
-    <div v-else class="gl-display-inline-block">
-      <gl-form-input v-if="hasFilter" v-model="filterInput" :placeholder="__('Type to search')" />
-      <gl-table :fields="cleanedFields" :items="items" :filter="filterInput" />
+    <div v-else class="gl-display-inline-block gl-mt-5">
+      <gl-badge v-gl-tooltip icon="table" :title="badgeTitle" class="gl-mb-2!">
+        {{ badgeText }}
+      </gl-badge>
+      <gl-form-input
+        v-if="hasFilter"
+        v-model="filterInput"
+        :placeholder="__('Type to search')"
+        class="gl-mb-2!"
+      />
+      <gl-table :fields="cleanedFields" :items="items" :filter="filterInput" class="gl-mt-0!" />
     </div>
   </div>
 </template>
diff --git a/app/assets/javascripts/behaviors/markdown/render_gfm.js b/app/assets/javascripts/behaviors/markdown/render_gfm.js
index 48d9d15387d2d8..ee5c0fe5ef350c 100644
--- a/app/assets/javascripts/behaviors/markdown/render_gfm.js
+++ b/app/assets/javascripts/behaviors/markdown/render_gfm.js
@@ -19,6 +19,7 @@ $.fn.renderGFM = function renderGFM() {
   renderJSONTable(
     Array.from(this.find('[lang="json"][data-lang-params="table"]').get()).map((e) => e.parentNode),
   );
+
   highlightCurrentUser(this.find('.gfm-project_member').get());
 
   const issuablePopoverElements = this.find('.gfm-issue, .gfm-merge_request').get();
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index 522bd00a7a99cc..ca0f76a45937b9 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -22135,6 +22135,12 @@ msgstr ""
 msgid "Iteration|cannot be more than 500 years in the future"
 msgstr ""
 
+msgid "JSON:Table"
+msgstr ""
+
+msgid "JSON:Table is different from a Markdown Table"
+msgstr ""
+
 msgid "Jan"
 msgstr ""
 
diff --git a/spec/frontend/behaviors/components/json_table_spec.js b/spec/frontend/behaviors/components/json_table_spec.js
index 5d27d316f044d6..6db3326e1c179d 100644
--- a/spec/frontend/behaviors/components/json_table_spec.js
+++ b/spec/frontend/behaviors/components/json_table_spec.js
@@ -1,4 +1,4 @@
-import { GlTable, GlAlert, GlFormInput } from '@gitlab/ui';
+import { GlTable, GlAlert, GlFormInput, GlBadge } from '@gitlab/ui';
 import { mountExtended } from 'helpers/vue_test_utils_helper';
 import JSONTable from '~/behaviors/components/json_table.vue';
 
@@ -25,6 +25,7 @@ describe('behaviors/components/json_table', () => {
     buildWrapper();
 
     expect(wrapper.findComponent(GlTable).exists()).toBe(true);
+    expect(wrapper.findComponent(GlBadge).exists()).toBe(true);
   });
 
   it('keep fields as it is when it is an array of strings', () => {
-- 
GitLab


From 74746b0a2d609dfc7cbeaea4b1c95081b43da501 Mon Sep 17 00:00:00 2001
From: Vishal Tak <vtak@gitlab.com>
Date: Fri, 1 Jul 2022 11:27:12 +0530
Subject: [PATCH 07/20] Add table tooltip and remove badge

---
 .../javascripts/behaviors/components/json_table.vue   | 11 ++---------
 locale/gitlab.pot                                     |  3 ---
 spec/frontend/behaviors/components/json_table_spec.js |  3 +--
 3 files changed, 3 insertions(+), 14 deletions(-)

diff --git a/app/assets/javascripts/behaviors/components/json_table.vue b/app/assets/javascripts/behaviors/components/json_table.vue
index b9cb282a1a4473..d340ec85e2bc28 100644
--- a/app/assets/javascripts/behaviors/components/json_table.vue
+++ b/app/assets/javascripts/behaviors/components/json_table.vue
@@ -1,13 +1,11 @@
 <script>
-import { GlTable, GlAlert, GlFormInput, GlBadge, GlTooltipDirective } from '@gitlab/ui';
-import { __ } from '~/locale';
+import { GlTable, GlAlert, GlFormInput, GlTooltipDirective } from '@gitlab/ui';
 
 export default {
   components: {
     GlTable,
     GlAlert,
     GlFormInput,
-    GlBadge,
   },
   directives: {
     GlTooltip: GlTooltipDirective,
@@ -46,8 +44,6 @@ export default {
     return {
       cleanedFields,
       filterInput: '',
-      badgeTitle: __('JSON:Table is different from a Markdown Table'),
-      badgeText: __('JSON:Table'),
     };
   },
   computed: {
@@ -68,10 +64,7 @@ export default {
     <gl-alert v-if="hasErrors" show-icon variant="warning" :dismissible="false">{{
       errMsg
     }}</gl-alert>
-    <div v-else class="gl-display-inline-block gl-mt-5">
-      <gl-badge v-gl-tooltip icon="table" :title="badgeTitle" class="gl-mb-2!">
-        {{ badgeText }}
-      </gl-badge>
+    <div v-else v-gl-tooltip class="gl-display-inline-block gl-mt-5" :title="__('JSON:Table')">
       <gl-form-input
         v-if="hasFilter"
         v-model="filterInput"
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index ca0f76a45937b9..4662ea7d5cd3fc 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -22138,9 +22138,6 @@ msgstr ""
 msgid "JSON:Table"
 msgstr ""
 
-msgid "JSON:Table is different from a Markdown Table"
-msgstr ""
-
 msgid "Jan"
 msgstr ""
 
diff --git a/spec/frontend/behaviors/components/json_table_spec.js b/spec/frontend/behaviors/components/json_table_spec.js
index 6db3326e1c179d..5d27d316f044d6 100644
--- a/spec/frontend/behaviors/components/json_table_spec.js
+++ b/spec/frontend/behaviors/components/json_table_spec.js
@@ -1,4 +1,4 @@
-import { GlTable, GlAlert, GlFormInput, GlBadge } from '@gitlab/ui';
+import { GlTable, GlAlert, GlFormInput } from '@gitlab/ui';
 import { mountExtended } from 'helpers/vue_test_utils_helper';
 import JSONTable from '~/behaviors/components/json_table.vue';
 
@@ -25,7 +25,6 @@ describe('behaviors/components/json_table', () => {
     buildWrapper();
 
     expect(wrapper.findComponent(GlTable).exists()).toBe(true);
-    expect(wrapper.findComponent(GlBadge).exists()).toBe(true);
   });
 
   it('keep fields as it is when it is an array of strings', () => {
-- 
GitLab


From 686ddcb43f5d14d53936b4196f01a09bf16b48eb Mon Sep 17 00:00:00 2001
From: Vishal Tak <vtak@gitlab.com>
Date: Mon, 4 Jul 2022 12:24:16 +0530
Subject: [PATCH 08/20] Remove tooltip and add table caption

---
 .../behaviors/components/json_table.vue       | 19 +++++++++++++------
 .../behaviors/markdown/render_json_table.js   |  3 ++-
 locale/gitlab.pot                             |  6 +++---
 3 files changed, 18 insertions(+), 10 deletions(-)

diff --git a/app/assets/javascripts/behaviors/components/json_table.vue b/app/assets/javascripts/behaviors/components/json_table.vue
index d340ec85e2bc28..21fb4074f4ca13 100644
--- a/app/assets/javascripts/behaviors/components/json_table.vue
+++ b/app/assets/javascripts/behaviors/components/json_table.vue
@@ -1,5 +1,6 @@
 <script>
-import { GlTable, GlAlert, GlFormInput, GlTooltipDirective } from '@gitlab/ui';
+import { GlTable, GlAlert, GlFormInput } from '@gitlab/ui';
+import { __ } from '~/locale';
 
 export default {
   components: {
@@ -7,9 +8,6 @@ export default {
     GlAlert,
     GlFormInput,
   },
-  directives: {
-    GlTooltip: GlTooltipDirective,
-  },
   props: {
     fields: {
       type: Array,
@@ -29,6 +27,11 @@ export default {
       required: false,
       default: null,
     },
+    caption: {
+      type: String,
+      required: false,
+      default: __('Generated with JSON data'),
+    },
   },
   data() {
     const cleanedFields = this.fields.map((field) => {
@@ -64,14 +67,18 @@ export default {
     <gl-alert v-if="hasErrors" show-icon variant="warning" :dismissible="false">{{
       errMsg
     }}</gl-alert>
-    <div v-else v-gl-tooltip class="gl-display-inline-block gl-mt-5" :title="__('JSON:Table')">
+    <div v-else class="gl-display-inline-block">
       <gl-form-input
         v-if="hasFilter"
         v-model="filterInput"
         :placeholder="__('Type to search')"
         class="gl-mb-2!"
       />
-      <gl-table :fields="cleanedFields" :items="items" :filter="filterInput" class="gl-mt-0!" />
+      <gl-table :fields="cleanedFields" :items="items" :filter="filterInput" class="gl-mt-0!">
+        <template v-if="caption" #table-caption>
+          <small>{{ caption }}</small>
+        </template>
+      </gl-table>
     </div>
   </div>
 </template>
diff --git a/app/assets/javascripts/behaviors/markdown/render_json_table.js b/app/assets/javascripts/behaviors/markdown/render_json_table.js
index 948c38a8e7052c..07aa1910bcd193 100644
--- a/app/assets/javascripts/behaviors/markdown/render_json_table.js
+++ b/app/assets/javascripts/behaviors/markdown/render_json_table.js
@@ -17,7 +17,7 @@ const renderTable = (element) => {
     errMsg = __('Unable to parse JSON');
     rawData = {};
   }
-  const { fields = [], items = [], filter } = rawData;
+  const { fields = [], items = [], filter, caption } = rawData;
   const el = document.createElement('div');
 
   element.insertAdjacentElement('beforebegin', el);
@@ -37,6 +37,7 @@ const renderTable = (element) => {
           items,
           filter,
           errMsg,
+          caption,
         },
       });
     },
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index 4662ea7d5cd3fc..5c6ec47f78ea74 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -16800,6 +16800,9 @@ msgstr ""
 msgid "Generate site and private keys at"
 msgstr ""
 
+msgid "Generated with JSON data"
+msgstr ""
+
 msgid "Generic"
 msgstr ""
 
@@ -22135,9 +22138,6 @@ msgstr ""
 msgid "Iteration|cannot be more than 500 years in the future"
 msgstr ""
 
-msgid "JSON:Table"
-msgstr ""
-
 msgid "Jan"
 msgstr ""
 
-- 
GitLab


From e4d4696ac5b956b94d568f078db94e550d5a95a6 Mon Sep 17 00:00:00 2001
From: Vishal Tak <vtak@gitlab.com>
Date: Wed, 6 Jul 2022 10:41:23 +0530
Subject: [PATCH 09/20] Reduce padding between table and caption

---
 app/assets/javascripts/behaviors/components/json_table.vue | 7 ++++++-
 app/assets/stylesheets/framework/tables.scss               | 4 ++++
 2 files changed, 10 insertions(+), 1 deletion(-)

diff --git a/app/assets/javascripts/behaviors/components/json_table.vue b/app/assets/javascripts/behaviors/components/json_table.vue
index 21fb4074f4ca13..bffdf253b6f308 100644
--- a/app/assets/javascripts/behaviors/components/json_table.vue
+++ b/app/assets/javascripts/behaviors/components/json_table.vue
@@ -74,7 +74,12 @@ export default {
         :placeholder="__('Type to search')"
         class="gl-mb-2!"
       />
-      <gl-table :fields="cleanedFields" :items="items" :filter="filterInput" class="gl-mt-0!">
+      <gl-table
+        :fields="cleanedFields"
+        :items="items"
+        :filter="filterInput"
+        class="json-table gl-mt-0!"
+      >
         <template v-if="caption" #table-caption>
           <small>{{ caption }}</small>
         </template>
diff --git a/app/assets/stylesheets/framework/tables.scss b/app/assets/stylesheets/framework/tables.scss
index f39d53c5b1c7a6..806b42bcd1e67a 100644
--- a/app/assets/stylesheets/framework/tables.scss
+++ b/app/assets/stylesheets/framework/tables.scss
@@ -176,3 +176,7 @@ table {
     border-top: 0;
   }
 }
+
+.json-table caption {
+  @include gl-pt-2;
+}
-- 
GitLab


From 659d711f5cd1e1830be4ef010edb27e7c51da68a Mon Sep 17 00:00:00 2001
From: Vishal Tak <vtak@gitlab.com>
Date: Mon, 18 Jul 2022 12:15:51 +0530
Subject: [PATCH 10/20] Show empty text when no items in table are found

---
 app/assets/javascripts/behaviors/components/json_table.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/app/assets/javascripts/behaviors/components/json_table.vue b/app/assets/javascripts/behaviors/components/json_table.vue
index bffdf253b6f308..830034ca172420 100644
--- a/app/assets/javascripts/behaviors/components/json_table.vue
+++ b/app/assets/javascripts/behaviors/components/json_table.vue
@@ -78,6 +78,7 @@ export default {
         :fields="cleanedFields"
         :items="items"
         :filter="filterInput"
+        show-empty
         class="json-table gl-mt-0!"
       >
         <template v-if="caption" #table-caption>
-- 
GitLab


From 96c0c71d0b38ac2391ba3bec5d538f82d2c9d327 Mon Sep 17 00:00:00 2001
From: Vishal Tak <vtak@gitlab.com>
Date: Mon, 18 Jul 2022 13:22:31 +0530
Subject: [PATCH 11/20] Move error management away from vue compoenent

Add test scenarios
---
 .../behaviors/components/json_table.vue       | 52 +++++---------
 .../behaviors/markdown/render_json_table.js   | 69 +++++++++++--------
 .../behaviors/components/json_table_spec.js   | 18 ++---
 .../markdown/render_json_table_spec.js        |  6 ++
 4 files changed, 71 insertions(+), 74 deletions(-)

diff --git a/app/assets/javascripts/behaviors/components/json_table.vue b/app/assets/javascripts/behaviors/components/json_table.vue
index 830034ca172420..e68ea620180e51 100644
--- a/app/assets/javascripts/behaviors/components/json_table.vue
+++ b/app/assets/javascripts/behaviors/components/json_table.vue
@@ -1,11 +1,10 @@
 <script>
-import { GlTable, GlAlert, GlFormInput } from '@gitlab/ui';
+import { GlTable, GlFormInput } from '@gitlab/ui';
 import { __ } from '~/locale';
 
 export default {
   components: {
     GlTable,
-    GlAlert,
     GlFormInput,
   },
   props: {
@@ -22,11 +21,6 @@ export default {
       required: false,
       default: false,
     },
-    errMsg: {
-      type: String,
-      required: false,
-      default: null,
-    },
     caption: {
       type: String,
       required: false,
@@ -50,9 +44,6 @@ export default {
     };
   },
   computed: {
-    hasErrors() {
-      return this.errMsg !== null;
-    },
     hasFilter() {
       return this.filter;
     },
@@ -63,28 +54,23 @@ export default {
 };
 </script>
 <template>
-  <div class="js-json-table">
-    <gl-alert v-if="hasErrors" show-icon variant="warning" :dismissible="false">{{
-      errMsg
-    }}</gl-alert>
-    <div v-else class="gl-display-inline-block">
-      <gl-form-input
-        v-if="hasFilter"
-        v-model="filterInput"
-        :placeholder="__('Type to search')"
-        class="gl-mb-2!"
-      />
-      <gl-table
-        :fields="cleanedFields"
-        :items="items"
-        :filter="filterInput"
-        show-empty
-        class="json-table gl-mt-0!"
-      >
-        <template v-if="caption" #table-caption>
-          <small>{{ caption }}</small>
-        </template>
-      </gl-table>
-    </div>
+  <div class="gl-display-inline-block">
+    <gl-form-input
+      v-if="hasFilter"
+      v-model="filterInput"
+      :placeholder="__('Type to search')"
+      class="gl-mb-2!"
+    />
+    <gl-table
+      :fields="cleanedFields"
+      :items="items"
+      :filter="filterInput"
+      show-empty
+      class="json-table gl-mt-0!"
+    >
+      <template v-if="caption" #table-caption>
+        <small>{{ caption }}</small>
+      </template>
+    </gl-table>
   </div>
 </template>
diff --git a/app/assets/javascripts/behaviors/markdown/render_json_table.js b/app/assets/javascripts/behaviors/markdown/render_json_table.js
index 07aa1910bcd193..fd3dad5450ae3e 100644
--- a/app/assets/javascripts/behaviors/markdown/render_json_table.js
+++ b/app/assets/javascripts/behaviors/markdown/render_json_table.js
@@ -1,47 +1,56 @@
 import Vue from 'vue';
 import { __ } from '~/locale';
+import { createAlert } from '~/flash';
 import JSONTable from '../components/json_table.vue';
 
 const renderTable = (element) => {
   const prev = element.previousElementSibling;
-  if (prev && prev.classList.contains('js-json-table')) {
+  if (prev?.classList.contains('js-json-table')) {
     // To avoid rendering it multiple times
     return {};
   }
-  let rawData = [];
-  let errMsg = null;
+  const wrapper = document.createElement('div');
+  wrapper.classList.add('js-json-table');
 
   try {
-    rawData = JSON.parse(element.textContent);
+    const rawData = JSON.parse(element.textContent);
+    const { fields = [], items = [], filter, caption } = rawData;
+    const el = document.createElement('div');
+
+    wrapper.insertAdjacentElement('afterbegin', el);
+    element.innerHTML = '';
+    element.insertAdjacentElement('beforebegin', wrapper);
+
+    return new Vue({
+      el,
+      components: {
+        JSONTable,
+      },
+      render(h) {
+        return h(JSONTable, {
+          props: {
+            fields,
+            items,
+            filter,
+            caption,
+          },
+        });
+      },
+    });
   } catch (e) {
-    errMsg = __('Unable to parse JSON');
-    rawData = {};
-  }
-  const { fields = [], items = [], filter, caption } = rawData;
-  const el = document.createElement('div');
+    const el = document.createElement('div');
+    el.classList.add('js-json-table-error');
 
-  element.insertAdjacentElement('beforebegin', el);
-  if (errMsg === null) {
-    element.remove();
-  }
+    wrapper.insertAdjacentElement('afterbegin', el);
+    element.insertAdjacentElement('beforebegin', wrapper);
 
-  return new Vue({
-    el,
-    components: {
-      JSONTable,
-    },
-    render(h) {
-      return h(JSONTable, {
-        props: {
-          fields,
-          items,
-          filter,
-          errMsg,
-          caption,
-        },
-      });
-    },
-  });
+    return createAlert({
+      message: __('Unable to parse JSON'),
+      variant: 'warning',
+      parent: wrapper,
+      containerSelector: '.js-json-table-error',
+    });
+  }
 };
 
 export const renderJSONTable = (elements) => {
diff --git a/spec/frontend/behaviors/components/json_table_spec.js b/spec/frontend/behaviors/components/json_table_spec.js
index 5d27d316f044d6..c7026e873c8d0b 100644
--- a/spec/frontend/behaviors/components/json_table_spec.js
+++ b/spec/frontend/behaviors/components/json_table_spec.js
@@ -1,4 +1,4 @@
-import { GlTable, GlAlert, GlFormInput } from '@gitlab/ui';
+import { GlTable, GlFormInput } from '@gitlab/ui';
 import { mountExtended } from 'helpers/vue_test_utils_helper';
 import JSONTable from '~/behaviors/components/json_table.vue';
 
@@ -9,14 +9,14 @@ describe('behaviors/components/json_table', () => {
     fields = [],
     items = [],
     filter = undefined,
-    errMsg = undefined,
+    caption = undefined,
   } = {}) => {
     wrapper = mountExtended(JSONTable, {
       propsData: {
         fields,
         items,
         filter,
-        errMsg,
+        caption,
       },
     });
   };
@@ -24,7 +24,11 @@ describe('behaviors/components/json_table', () => {
   it('renders the component', () => {
     buildWrapper();
 
+    const caption = wrapper.find('caption');
+
     expect(wrapper.findComponent(GlTable).exists()).toBe(true);
+    expect(caption.exists()).toBe(true);
+    expect(caption.text()).toBe('Generated with JSON data');
   });
 
   it('keep fields as it is when it is an array of strings', () => {
@@ -64,12 +68,4 @@ describe('behaviors/components/json_table', () => {
     expect(wrapper.findComponent(GlTable).exists()).toBe(true);
     expect(wrapper.findComponent(GlFormInput).exists()).toBe(true);
   });
-
-  it('error is rendered', () => {
-    const errMsg = 'This is an error';
-    buildWrapper({ errMsg });
-
-    expect(wrapper.findComponent(GlAlert).exists()).toBe(true);
-    expect(wrapper.findComponent(GlTable).exists()).toBe(false);
-  });
 });
diff --git a/spec/frontend/behaviors/markdown/render_json_table_spec.js b/spec/frontend/behaviors/markdown/render_json_table_spec.js
index a88ef4965bdf8d..2e75e4420627db 100644
--- a/spec/frontend/behaviors/markdown/render_json_table_spec.js
+++ b/spec/frontend/behaviors/markdown/render_json_table_spec.js
@@ -26,8 +26,14 @@ describe('behaviors/markdown/render_json_table', () => {
 
     jest.runAllTimers();
 
+    const tableAsMatrix = (table) =>
+      Array.from(table.querySelectorAll('tbody > tr')).map((tr) =>
+        Array.from(tr.querySelectorAll('td')).map((x) => x.textContent),
+      );
+
     expect(document.querySelectorAll('pre')).toHaveLength(0);
     expect(document.querySelectorAll('table')).toHaveLength(1);
+    expect(tableAsMatrix(document.querySelector('table'))).toEqual([['a', 'b', 'c']]);
   });
 
   it('error is displayed when invalid JSON is provided', () => {
-- 
GitLab


From a1230eac8fb57f952ef734d18ff5b208ce33a1e8 Mon Sep 17 00:00:00 2001
From: Vishal Tak <vtak@gitlab.com>
Date: Mon, 18 Jul 2022 13:52:39 +0530
Subject: [PATCH 12/20] Make cleanedFields a computed property

---
 .../behaviors/components/json_table.vue       | 24 +++++++++----------
 1 file changed, 11 insertions(+), 13 deletions(-)

diff --git a/app/assets/javascripts/behaviors/components/json_table.vue b/app/assets/javascripts/behaviors/components/json_table.vue
index e68ea620180e51..e5aee5234509ef 100644
--- a/app/assets/javascripts/behaviors/components/json_table.vue
+++ b/app/assets/javascripts/behaviors/components/json_table.vue
@@ -28,18 +28,7 @@ export default {
     },
   },
   data() {
-    const cleanedFields = this.fields.map((field) => {
-      if (typeof field === 'string') {
-        return field;
-      }
-      return {
-        key: field.key,
-        label: field.label,
-        sortable: field.sortable || false,
-      };
-    });
     return {
-      cleanedFields,
       filterInput: '',
     };
   },
@@ -47,8 +36,17 @@ export default {
     hasFilter() {
       return this.filter;
     },
-    columnCount() {
-      return this.cleanedFields.length;
+    cleanedFields() {
+      return this.fields.map((field) => {
+        if (typeof field === 'string') {
+          return field;
+        }
+        return {
+          key: field.key,
+          label: field.label,
+          sortable: field.sortable || false,
+        };
+      });
     },
   },
 };
-- 
GitLab


From d7557f3bc1aec6a517852e2c3e2d0720c7964f7a Mon Sep 17 00:00:00 2001
From: Vishal Tak <vtak@gitlab.com>
Date: Mon, 18 Jul 2022 14:10:36 +0530
Subject: [PATCH 13/20] Reduce explicit padding between table and caption

---
 app/assets/javascripts/behaviors/components/json_table.vue | 2 +-
 app/assets/stylesheets/framework/tables.scss               | 4 ----
 2 files changed, 1 insertion(+), 5 deletions(-)

diff --git a/app/assets/javascripts/behaviors/components/json_table.vue b/app/assets/javascripts/behaviors/components/json_table.vue
index e5aee5234509ef..23ba193a0f8117 100644
--- a/app/assets/javascripts/behaviors/components/json_table.vue
+++ b/app/assets/javascripts/behaviors/components/json_table.vue
@@ -64,7 +64,7 @@ export default {
       :items="items"
       :filter="filterInput"
       show-empty
-      class="json-table gl-mt-0!"
+      class="gl-mt-0!"
     >
       <template v-if="caption" #table-caption>
         <small>{{ caption }}</small>
diff --git a/app/assets/stylesheets/framework/tables.scss b/app/assets/stylesheets/framework/tables.scss
index 806b42bcd1e67a..f39d53c5b1c7a6 100644
--- a/app/assets/stylesheets/framework/tables.scss
+++ b/app/assets/stylesheets/framework/tables.scss
@@ -176,7 +176,3 @@ table {
     border-top: 0;
   }
 }
-
-.json-table caption {
-  @include gl-pt-2;
-}
-- 
GitLab


From cfacf75eec85de40926e462798fd6b357ec5214b Mon Sep 17 00:00:00 2001
From: Vishal Tak <vtak@gitlab.com>
Date: Thu, 21 Jul 2022 21:38:48 +0530
Subject: [PATCH 14/20] Refactor json table rendering to make it readable

---
 .../behaviors/markdown/render_json_table.js   | 92 ++++++++++---------
 1 file changed, 49 insertions(+), 43 deletions(-)

diff --git a/app/assets/javascripts/behaviors/markdown/render_json_table.js b/app/assets/javascripts/behaviors/markdown/render_json_table.js
index fd3dad5450ae3e..0b2f5daffbe654 100644
--- a/app/assets/javascripts/behaviors/markdown/render_json_table.js
+++ b/app/assets/javascripts/behaviors/markdown/render_json_table.js
@@ -3,58 +3,64 @@ import { __ } from '~/locale';
 import { createAlert } from '~/flash';
 import JSONTable from '../components/json_table.vue';
 
+const mountParseError = (container) => {
+  const el = document.createElement('div');
+  el.classList.add('js-json-table-error');
+
+  container.insertAdjacentElement('afterbegin', el);
+
+  return createAlert({
+    message: __('Unable to parse JSON'),
+    variant: 'warning',
+    parent: container,
+    containerSelector: '.js-json-table-error',
+  });
+};
+
+const mountJSONTableVueComponent = (userData, container) => {
+  const { fields = [], items = [], filter, caption } = userData;
+
+  return new Vue({
+    el: container,
+    components: {
+      JSONTable,
+    },
+    render(h) {
+      return h(JSONTable, {
+        props: {
+          fields,
+          items,
+          filter,
+          caption,
+        },
+      });
+    },
+  });
+};
+
 const renderTable = (element) => {
-  const prev = element.previousElementSibling;
-  if (prev?.classList.contains('js-json-table')) {
-    // To avoid rendering it multiple times
-    return {};
+  // Avoid rendering multiple times
+  if (!element || element.classList.contains('js-json-table')) {
+    return null;
   }
-  const wrapper = document.createElement('div');
-  wrapper.classList.add('js-json-table');
+
+  element.classList.add('js-json-table');
+
+  const container = document.createElement('div');
+  element.insertAdjacentElement('beforebegin', container);
 
   try {
-    const rawData = JSON.parse(element.textContent);
-    const { fields = [], items = [], filter, caption } = rawData;
-    const el = document.createElement('div');
+    mountJSONTableVueComponent(JSON.parse(element.textContent), container);
 
-    wrapper.insertAdjacentElement('afterbegin', el);
+    // Clear out existing content since we successfully replaced with component
     element.innerHTML = '';
-    element.insertAdjacentElement('beforebegin', wrapper);
-
-    return new Vue({
-      el,
-      components: {
-        JSONTable,
-      },
-      render(h) {
-        return h(JSONTable, {
-          props: {
-            fields,
-            items,
-            filter,
-            caption,
-          },
-        });
-      },
-    });
   } catch (e) {
-    const el = document.createElement('div');
-    el.classList.add('js-json-table-error');
-
-    wrapper.insertAdjacentElement('afterbegin', el);
-    element.insertAdjacentElement('beforebegin', wrapper);
-
-    return createAlert({
-      message: __('Unable to parse JSON'),
-      variant: 'warning',
-      parent: wrapper,
-      containerSelector: '.js-json-table-error',
-    });
+    mountParseError(container);
   }
+
+  return container;
 };
 
 export const renderJSONTable = (elements) => {
-  elements.forEach((el) => {
-    window.requestIdleCallback(() => renderTable(el));
-  });
+  elements.forEach(renderTable);
 };
-- 
GitLab


From ce294ba09e2218fe2bcef774b5b81b095653b1d8 Mon Sep 17 00:00:00 2001
From: Vishal Tak <vtak@gitlab.com>
Date: Thu, 21 Jul 2022 21:39:17 +0530
Subject: [PATCH 15/20] Import JSONTable async

---
 .../behaviors/markdown/render_json_table.js           | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/app/assets/javascripts/behaviors/markdown/render_json_table.js b/app/assets/javascripts/behaviors/markdown/render_json_table.js
index 0b2f5daffbe654..826ec75ab1c06e 100644
--- a/app/assets/javascripts/behaviors/markdown/render_json_table.js
+++ b/app/assets/javascripts/behaviors/markdown/render_json_table.js
@@ -1,7 +1,13 @@
+import { memoize } from 'lodash';
 import Vue from 'vue';
 import { __ } from '~/locale';
 import { createAlert } from '~/flash';
-import JSONTable from '../components/json_table.vue';
+
+// Async import component since we might not need it...
+const JSONTable = memoize(() =>
+  import(/* webpackChunkName: 'gfm_json_table' */ '../components/json_table.vue'),
+);
+
 
 const mountParseError = (container) => {
   const el = document.createElement('div');
@@ -22,9 +28,6 @@ const mountJSONTableVueComponent = (userData, container) => {
 
   return new Vue({
     el: container,
-    components: {
-      JSONTable,
-    },
     render(h) {
       return h(JSONTable, {
         props: {
-- 
GitLab


From db35cff146955eec6e7de30038be2dda90caaa85 Mon Sep 17 00:00:00 2001
From: Vishal Tak <vtak@gitlab.com>
Date: Thu, 21 Jul 2022 22:06:44 +0530
Subject: [PATCH 16/20] Refactor test cases

---
 spec/frontend/__helpers__/stub_component.js   |   8 +
 .../behaviors/components/json_table_spec.js   | 167 ++++++++++++++----
 .../markdown/render_json_table_spec.js        | 128 +++++++++-----
 3 files changed, 223 insertions(+), 80 deletions(-)

diff --git a/spec/frontend/__helpers__/stub_component.js b/spec/frontend/__helpers__/stub_component.js
index 96fe3a8bc45122..4f9d1ee6f5dc7c 100644
--- a/spec/frontend/__helpers__/stub_component.js
+++ b/spec/frontend/__helpers__/stub_component.js
@@ -22,6 +22,14 @@ const createStubbedMethods = (methods = {}) => {
   );
 };
 
+export const RENDER_ALL_SLOTS_TEMPLATE = `<div>
+  <template v-for="(_, name) in $scopedSlots">
+    <div :data-testid="'slot-' + name">            
+      <slot :name="name" />
+    </div>
+  </template>
+</div>`;
+
 export function stubComponent(Component, options = {}) {
   return {
     props: Component.props,
diff --git a/spec/frontend/behaviors/components/json_table_spec.js b/spec/frontend/behaviors/components/json_table_spec.js
index c7026e873c8d0b..d5163e416d0b27 100644
--- a/spec/frontend/behaviors/components/json_table_spec.js
+++ b/spec/frontend/behaviors/components/json_table_spec.js
@@ -1,7 +1,30 @@
 import { GlTable, GlFormInput } from '@gitlab/ui';
-import { mountExtended } from 'helpers/vue_test_utils_helper';
+import { nextTick } from 'vue';
+import { merge } from 'lodash';
+import { shallowMountExtended, mountExtended } from 'helpers/vue_test_utils_helper';
+import { stubComponent, RENDER_ALL_SLOTS_TEMPLATE } from 'helpers/stub_component';
 import JSONTable from '~/behaviors/components/json_table.vue';
 
+const TEST_FIELDS = [
+  'A',
+  {
+    key: 'B',
+    label: 'Second',
+    sortable: true,
+    other: 'foo',
+  },
+  {
+    key: 'C',
+    label: 'Third',
+  },
+  'D',
+];
+const TEST_ITEMS = [
+  { A: 1, B: 'lorem', C: 2, D: null, E: 'dne' },
+  { A: 2, B: 'ipsum', C: 2, D: null, E: 'dne' },
+  { A: 3, B: 'dolar', C: 2, D: null, E: 'dne' },
+];
+
 describe('behaviors/components/json_table', () => {
   let wrapper;
 
@@ -11,61 +34,129 @@ describe('behaviors/components/json_table', () => {
     filter = undefined,
     caption = undefined,
   } = {}) => {
-    wrapper = mountExtended(JSONTable, {
+    wrapper = shallowMountExtended(JSONTable, {
       propsData: {
         fields,
         items,
         filter,
         caption,
       },
+      stubs: {
+        GlTable: merge(stubComponent(GlTable), {
+          props: {
+            fields: {
+              type: Array,
+              required: true,
+            },
+            items: {
+              type: Array,
+              required: true,
+            },
+          },
+          template: RENDER_ALL_SLOTS_TEMPLATE,
+        }),
+      },
     });
   };
 
-  it('renders the component', () => {
-    buildWrapper();
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  const findTable = () => wrapper.findComponent(GlTable);
+  const findTableCaption = () => wrapper.findByTestId('slot-table-caption');
+  const findFilterInput = () => wrapper.findComponent(GlFormInput);
 
-    const caption = wrapper.find('caption');
+  describe('default', () => {
+    beforeEach(() => {
+      buildWrapper();
+    });
 
-    expect(wrapper.findComponent(GlTable).exists()).toBe(true);
-    expect(caption.exists()).toBe(true);
-    expect(caption.text()).toBe('Generated with JSON data');
+    it('renders gltable', () => {
+      expect(findTable().props()).toEqual({
+        fields: [],
+        items: [],
+      });
+      expect(findTable().attributes()).toMatchObject({
+        filter: '',
+        'show-empty': '',
+      });
+    });
+
+    it('does not render filter input', () => {
+      expect(findFilterInput().exists()).toBe(false);
+    });
+
+    it('renders caption', () => {
+      expect(findTableCaption().text()).toBe('Generated with JSON data');
+    });
   });
 
-  it('keep fields as it is when it is an array of strings', () => {
-    const tableFixture = {
-      fields: ['a', 'b', 'c'],
-      items: [{ a: 'a', b: 'b', c: 'c' }],
-    };
-    const cleanedField = ['a', 'b', 'c'];
-    buildWrapper(tableFixture);
+  describe('with filter', () => {
+    beforeEach(() => {
+      buildWrapper({
+        filter: true,
+      });
+    });
 
-    expect(wrapper.findComponent(GlTable).vm.$options.parent.cleanedFields).toEqual(cleanedField);
+    it('renders filter input', () => {
+      expect(findFilterInput().attributes()).toMatchObject({
+        value: '',
+        placeholder: 'Type to search',
+      });
+    });
+
+    it('when input is changed, updates table filter', async () => {
+      findFilterInput().vm.$emit('input', 'New value!');
+
+      await nextTick();
+
+      expect(findTable().attributes('filter')).toBe('New value!');
+    });
   });
 
-  it('extra elements are removed from fields and defaults are setwhen it is an array of objects', () => {
-    const tableFixture = {
-      fields: [
-        { key: 'a', label: 'A', extra: true },
-        { key: 'b', label: 'B', sortable: true, dummy: 1 },
-        { key: 'c', label: 'C' },
-      ],
-      items: [{ a: 'a', b: 'b', c: 'c' }],
-    };
-    const cleanedField = [
-      { key: 'a', label: 'A', sortable: false },
-      { key: 'b', label: 'B', sortable: true },
-      { key: 'c', label: 'C', sortable: false },
-    ];
-    buildWrapper(tableFixture);
-
-    expect(wrapper.findComponent(GlTable).vm.$options.parent.cleanedFields).toEqual(cleanedField);
+  describe('with fields', () => {
+    beforeEach(() => {
+      buildWrapper({
+        fields: TEST_FIELDS,
+        items: TEST_ITEMS,
+      });
+    });
+
+    it('passes cleaned fields and items to table', () => {
+      expect(findTable().props()).toEqual({
+        fields: [
+          'A',
+          {
+            key: 'B',
+            label: 'Second',
+            sortable: true,
+          },
+          {
+            key: 'C',
+            label: 'Third',
+            sortable: false,
+          },
+          'D',
+        ],
+        items: TEST_ITEMS,
+      });
+    });
   });
 
-  it('filter form input is rendered', () => {
-    const filter = true;
-    buildWrapper({ filter });
+  describe('with full mount', () => {
+    beforeEach(() => {
+      wrapper = mountExtended(JSONTable, {
+        propsData: {
+          fields: [],
+          items: [],
+        },
+      });
+    });
 
-    expect(wrapper.findComponent(GlTable).exists()).toBe(true);
-    expect(wrapper.findComponent(GlFormInput).exists()).toBe(true);
+    // We want to make sure all the props are passed down nicely in integration
+    it('renders table without errors', () => {
+      expect(findTable().exists()).toBe(true);
+    });
   });
 });
diff --git a/spec/frontend/behaviors/markdown/render_json_table_spec.js b/spec/frontend/behaviors/markdown/render_json_table_spec.js
index 2e75e4420627db..488492479f3bfb 100644
--- a/spec/frontend/behaviors/markdown/render_json_table_spec.js
+++ b/spec/frontend/behaviors/markdown/render_json_table_spec.js
@@ -1,75 +1,119 @@
+import { nextTick } from 'vue';
 import { renderJSONTable } from '~/behaviors/markdown/render_json_table';
 
 describe('behaviors/markdown/render_json_table', () => {
-  const tableFixture = {
-    fields: ['a', 'b', 'c'],
+  let element;
+
+  const TEST_DATA = {
+    fields: [
+      { label: 'Field 1', key: 'a' },
+      { label: 'F 2', key: 'b' },
+      { label: 'F 3', key: 'c' },
+    ],
     items: [
       {
-        a: 'a',
+        a: '1',
         b: 'b',
         c: 'c',
       },
+      {
+        a: '2',
+        b: 'd',
+        c: 'e',
+      },
     ],
   };
+  const TEST_LABELS = TEST_DATA.fields.map((x) => x.label);
+
+  const tableAsData = (table) => ({
+    head: Array.from(table.querySelectorAll('thead th')).map((td) => td.textContent),
+    body: Array.from(table.querySelectorAll('tbody > tr')).map((tr) =>
+      Array.from(tr.querySelectorAll('td')).map((x) => x.textContent),
+    ),
+  });
+
+  const createTestSubject = async (json) => {
+    if (element) {
+      throw new Error('element has already been initialized');
+    }
 
-  it('replaces pre code block with a table vue application', () => {
     const parent = document.createElement('div');
     const pre = document.createElement('pre');
 
-    pre.textContent = JSON.stringify(tableFixture, null, 2);
-
+    pre.textContent = json;
     parent.appendChild(pre);
-    document.body.innerHTML = '';
-    document.body.appendChild(parent);
 
+    document.body.appendChild(parent);
     renderJSONTable([parent]);
 
-    jest.runAllTimers();
-
-    const tableAsMatrix = (table) =>
-      Array.from(table.querySelectorAll('tbody > tr')).map((tr) =>
-        Array.from(tr.querySelectorAll('td')).map((x) => x.textContent),
-      );
+    element = parent;
 
-    expect(document.querySelectorAll('pre')).toHaveLength(0);
-    expect(document.querySelectorAll('table')).toHaveLength(1);
-    expect(tableAsMatrix(document.querySelector('table'))).toEqual([['a', 'b', 'c']]);
-  });
+    jest.runAllTimers();
 
-  it('error is displayed when invalid JSON is provided', () => {
-    const parent = document.createElement('div');
-    const pre = document.createElement('pre');
+    await nextTick();
+  };
 
-    pre.textContent = JSON.stringify(tableFixture, null, 2).concat('.');
+  const findPres = () => document.querySelectorAll('pre');
+  const findTables = () => document.querySelectorAll('table');
+  const findAlerts = () => document.querySelectorAll('.gl-alert');
+  const findInputs = () => document.querySelectorAll('.gl-form-input');
 
-    parent.appendChild(pre);
+  afterEach(() => {
     document.body.innerHTML = '';
-    document.body.appendChild(parent);
-
-    renderJSONTable([parent]);
-
-    jest.runAllTimers();
+    element = null;
+  });
 
-    expect(document.querySelectorAll('pre')).toHaveLength(1);
-    expect(document.querySelectorAll('.gl-alert')).toHaveLength(1);
+  describe('default', () => {
+    beforeEach(async () => {
+      await createTestSubject(JSON.stringify(TEST_DATA, null, 2));
+    });
+
+    it('removes pre', () => {
+      expect(findPres()).toHaveLength(0);
+    });
+
+    it('replaces pre with table', () => {
+      const tables = findTables();
+
+      expect(tables).toHaveLength(1);
+      expect(tableAsData(tables[0])).toEqual({
+        head: TEST_LABELS,
+        body: [
+          ['1', 'b', 'c'],
+          ['2', 'd', 'e'],
+        ],
+      });
+    });
+
+    it('does not show filter', () => {
+      expect(findInputs()).toHaveLength(0);
+    });
   });
 
-  it('form input is displayed when filter is set', () => {
-    const parent = document.createElement('div');
-    const pre = document.createElement('pre');
+  describe('with invalid json', () => {
+    beforeEach(() => {
+      createTestSubject('funky but not json');
+    });
 
-    pre.textContent = JSON.stringify({ ...tableFixture, filter: true }, null, 2);
+    it('preserves pre', () => {
+      expect(findPres()).toHaveLength(1);
+    });
 
-    parent.appendChild(pre);
-    document.body.innerHTML = '';
-    document.body.appendChild(parent);
+    it('shows alert', () => {
+      const alerts = findAlerts();
 
-    renderJSONTable([parent]);
+      expect(alerts).toHaveLength(1);
+      expect(alerts[0].textContent).toMatchInterpolatedText('Unable to parse JSON');
+    });
+  });
 
-    jest.runAllTimers();
+  describe('with filter set', () => {
+    beforeEach(() => {
+      createTestSubject(JSON.stringify({ ...TEST_DATA, filter: true }));
+    });
 
-    expect(document.querySelectorAll('pre')).toHaveLength(0);
-    expect(document.querySelectorAll('table')).toHaveLength(1);
-    expect(document.querySelectorAll('.gl-form-input')).toHaveLength(1);
+    it('shows filter', () => {
+      expect(findInputs()).toHaveLength(1);
+    });
   });
 });
-- 
GitLab


From 618e91b613947ff97c7affc27e7644471c76c0ee Mon Sep 17 00:00:00 2001
From: Vishal Tak <vtak@gitlab.com>
Date: Thu, 21 Jul 2022 22:21:16 +0530
Subject: [PATCH 17/20] Rename filter prop to hasFilter since it is boolean

---
 app/assets/javascripts/behaviors/components/json_table.vue   | 5 +----
 .../javascripts/behaviors/markdown/render_json_table.js      | 3 +--
 spec/frontend/behaviors/components/json_table_spec.js        | 2 +-
 3 files changed, 3 insertions(+), 7 deletions(-)

diff --git a/app/assets/javascripts/behaviors/components/json_table.vue b/app/assets/javascripts/behaviors/components/json_table.vue
index 23ba193a0f8117..bb38d80c1b54d3 100644
--- a/app/assets/javascripts/behaviors/components/json_table.vue
+++ b/app/assets/javascripts/behaviors/components/json_table.vue
@@ -16,7 +16,7 @@ export default {
       type: Array,
       required: true,
     },
-    filter: {
+    hasFilter: {
       type: Boolean,
       required: false,
       default: false,
@@ -33,9 +33,6 @@ export default {
     };
   },
   computed: {
-    hasFilter() {
-      return this.filter;
-    },
     cleanedFields() {
       return this.fields.map((field) => {
         if (typeof field === 'string') {
diff --git a/app/assets/javascripts/behaviors/markdown/render_json_table.js b/app/assets/javascripts/behaviors/markdown/render_json_table.js
index 826ec75ab1c06e..9ae197e537c361 100644
--- a/app/assets/javascripts/behaviors/markdown/render_json_table.js
+++ b/app/assets/javascripts/behaviors/markdown/render_json_table.js
@@ -8,7 +8,6 @@ const JSONTable = memoize(() =>
   import(/* webpackChunkName: 'gfm_json_table' */ '../components/json_table.vue'),
 );
 
-
 const mountParseError = (container) => {
   const el = document.createElement('div');
   el.classList.add('js-json-table-error');
@@ -33,7 +32,7 @@ const mountJSONTableVueComponent = (userData, container) => {
         props: {
           fields,
           items,
-          filter,
+          hasFilter: filter,
           caption,
         },
       });
diff --git a/spec/frontend/behaviors/components/json_table_spec.js b/spec/frontend/behaviors/components/json_table_spec.js
index d5163e416d0b27..42b4a051d4d16f 100644
--- a/spec/frontend/behaviors/components/json_table_spec.js
+++ b/spec/frontend/behaviors/components/json_table_spec.js
@@ -38,7 +38,7 @@ describe('behaviors/components/json_table', () => {
       propsData: {
         fields,
         items,
-        filter,
+        hasFilter: filter,
         caption,
       },
       stubs: {
-- 
GitLab


From 55847d71e66303def033ab5e403102a0af1eba22 Mon Sep 17 00:00:00 2001
From: Paul Slaughter <pslaughter@gitlab.com>
Date: Wed, 27 Jul 2022 13:37:12 -0500
Subject: [PATCH 18/20] Add feature spec for json table markdown rendering

---
 spec/features/markdown/json_table_spec.rb | 40 +++++++++++++++++++++++
 1 file changed, 40 insertions(+)
 create mode 100644 spec/features/markdown/json_table_spec.rb

diff --git a/spec/features/markdown/json_table_spec.rb b/spec/features/markdown/json_table_spec.rb
new file mode 100644
index 00000000000000..e36b5dbd0baebb
--- /dev/null
+++ b/spec/features/markdown/json_table_spec.rb
@@ -0,0 +1,40 @@
+# frozen_string_literal: true
+
+require 'spec_helper'
+
+RSpec.describe 'Rendering json:table code block in markdown', :js do
+  let_it_be(:project) { create(:project, :public) }
+
+  it 'creates table correctly' do
+    description = <<~JSONTABLE
+      Hello world!
+
+      ```json:table
+      {
+        "fields" : [
+            {"key": "a", "label": "AA"},
+            {"key": "b", "label": "BB"},
+            {"key": "c", "label": "CC"}
+        ],
+        "items" : [
+          {"a": "11", "b": "22", "c": "33"},
+          {"a": "211", "b": "222", "c": "233"}
+        ]
+      }
+      ```
+    JSONTABLE
+
+    issue = create(:issue, project: project, description: description)
+
+    visit project_issue_path(project, issue)
+
+    wait_for_requests
+
+    # Body of table is tested in the unit test
+    within ".js-json-table table thead" do
+      headers = all("th").collect { |column| column.text.strip }
+
+      expect(headers).to eql(%w[AA BB CC])
+    end
+  end
+end
-- 
GitLab


From a510d42b7feb6201f3b1d3a04312e322db25ef9d Mon Sep 17 00:00:00 2001
From: Vishal Tak <vtak@gitlab.com>
Date: Thu, 28 Jul 2022 14:58:47 +0530
Subject: [PATCH 19/20] Refactor to not add sibling container when parsing is
 successful

---
 .../behaviors/markdown/render_json_table.js   | 28 ++++++++++---------
 1 file changed, 15 insertions(+), 13 deletions(-)

diff --git a/app/assets/javascripts/behaviors/markdown/render_json_table.js b/app/assets/javascripts/behaviors/markdown/render_json_table.js
index 9ae197e537c361..4d9ac1d266ba50 100644
--- a/app/assets/javascripts/behaviors/markdown/render_json_table.js
+++ b/app/assets/javascripts/behaviors/markdown/render_json_table.js
@@ -8,7 +8,13 @@ const JSONTable = memoize(() =>
   import(/* webpackChunkName: 'gfm_json_table' */ '../components/json_table.vue'),
 );
 
-const mountParseError = (container) => {
+const mountParseError = (element) => {
+  // Let the error container be a sibling to the element.
+  // Otherwise, dismissing the alert causes the copy button to be misplaced.
+  const container = document.createElement('div');
+  element.insertAdjacentElement('beforebegin', container);
+
+  // We need to create a child element with a known selector for `createAlert`
   const el = document.createElement('div');
   el.classList.add('js-json-table-error');
 
@@ -22,9 +28,13 @@ const mountParseError = (container) => {
   });
 };
 
-const mountJSONTableVueComponent = (userData, container) => {
+const mountJSONTableVueComponent = (userData, element) => {
   const { fields = [], items = [], filter, caption } = userData;
 
+  const container = document.createElement('div');
+  element.innerHTML = '';
+  element.appendChild(container);
+
   return new Vue({
     el: container,
     render(h) {
@@ -43,24 +53,16 @@ const mountJSONTableVueComponent = (userData, container) => {
 const renderTable = (element) => {
   // Avoid rendering multiple times
   if (!element || element.classList.contains('js-json-table')) {
-    return null;
+    return;
   }
 
   element.classList.add('js-json-table');
 
-  const container = document.createElement('div');
-  element.insertAdjacentElement('beforebegin', container);
-
   try {
-    mountJSONTableVueComponent(JSON.parse(element.textContent), container);
-
-    // Clear out existing content since we successfully replaced with component
-    element.innerHTML = '';
+    mountJSONTableVueComponent(JSON.parse(element.textContent), element);
   } catch (e) {
-    mountParseError(container);
+    mountParseError(element);
   }
-
-  return container;
 };
 
 export const renderJSONTable = (elements) => {
-- 
GitLab


From 318c459181fd8745b0bdd297505c59e6022dd105 Mon Sep 17 00:00:00 2001
From: Vishal Tak <vtak@gitlab.com>
Date: Thu, 28 Jul 2022 15:14:10 +0530
Subject: [PATCH 20/20] Add table column data assertion in feature spec

---
 spec/features/markdown/json_table_spec.rb | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/spec/features/markdown/json_table_spec.rb b/spec/features/markdown/json_table_spec.rb
index e36b5dbd0baebb..6b74dbac255bea 100644
--- a/spec/features/markdown/json_table_spec.rb
+++ b/spec/features/markdown/json_table_spec.rb
@@ -13,12 +13,11 @@
       {
         "fields" : [
             {"key": "a", "label": "AA"},
-            {"key": "b", "label": "BB"},
-            {"key": "c", "label": "CC"}
+            {"key": "b", "label": "BB"}
         ],
         "items" : [
-          {"a": "11", "b": "22", "c": "33"},
-          {"a": "211", "b": "222", "c": "233"}
+          {"a": "11", "b": "22"},
+          {"a": "211", "b": "222"}
         ]
       }
       ```
@@ -30,11 +29,12 @@
 
     wait_for_requests
 
-    # Body of table is tested in the unit test
-    within ".js-json-table table thead" do
-      headers = all("th").collect { |column| column.text.strip }
+    within ".js-json-table table" do
+      headers = all("thead th").collect { |column| column.text.strip }
+      data = all("tbody td").collect { |column| column.text.strip }
 
-      expect(headers).to eql(%w[AA BB CC])
+      expect(headers).to eql(%w[AA BB])
+      expect(data).to eql(%w[11 22 211 222])
     end
   end
 end
-- 
GitLab