From 791dd3831689f16dbd95098c7df4374bba5c976b Mon Sep 17 00:00:00 2001
From: Chloe <chloezh1102@gmail.com>
Date: Fri, 1 May 2020 21:30:42 -0700
Subject: [PATCH] Remove JSON formatter for csv and txt responses from the sql
 plugin; added asynchronous method for download functionality (#50)

---
 .../QueryResults/QueryResultsBody.tsx         |  28 +--
 .../__snapshots__/QueryResults.test.tsx.snap  |  84 ++++++++-
 .../QueryResultsBody.test.tsx.snap            | 161 +++++++++++++++++-
 server/services/QueryService.ts               |  17 +-
 4 files changed, 258 insertions(+), 32 deletions(-)

diff --git a/public/components/QueryResults/QueryResultsBody.tsx b/public/components/QueryResults/QueryResultsBody.tsx
index e3df8c0..46d39d7 100644
--- a/public/components/QueryResults/QueryResultsBody.tsx
+++ b/public/components/QueryResults/QueryResultsBody.tsx
@@ -175,34 +175,42 @@ class QueryResultsBody extends React.Component<QueryResultsBodyProps, QueryResul
     if (!this.props.queryResultsJSON) {
       this.props.getJson(this.props.queries);
     }
-    const jsonObject = JSON.parse(this.props.queryResultsJSON);
-    const data = JSON.stringify(jsonObject, undefined, 4);
-    onDownloadFile(data, "json", this.props.selectedTabName + ".json");
+    setTimeout(() => {
+      const jsonObject = JSON.parse(this.props.queryResultsJSON);
+      const data = JSON.stringify(jsonObject, undefined, 4);
+      onDownloadFile(data, "json", this.props.selectedTabName + ".json");
+    }, 2000);
   };
 
   onDownloadJDBC = (): void => {
     if (!this.props.queryResultsJDBC) {
       this.props.getJdbc(this.props.queries);
     }
-    const jsonObject = JSON.parse(this.props.queryResultsJDBC);
-    const data = JSON.stringify(jsonObject, undefined, 4);
-    onDownloadFile(data, "json", this.props.selectedTabName + ".json");
+    setTimeout(() => {
+      const jsonObject = JSON.parse(this.props.queryResultsJDBC);
+      const data = JSON.stringify(jsonObject, undefined, 4);
+      onDownloadFile(data, "json", this.props.selectedTabName + ".json");
+    }, 2000);
   };
 
   onDownloadCSV = (): void => {
     if (!this.props.queryResultsCSV) {
       this.props.getCsv(this.props.queries);
     }
-    const data = this.props.queryResultsCSV;
-    onDownloadFile(data, "csv", this.props.selectedTabName + ".csv");
+    setTimeout(() => {
+      const data = this.props.queryResultsCSV;
+      onDownloadFile(data, "csv", this.props.selectedTabName + ".csv");
+    }, 2000);
   };
 
   onDownloadText = (): void => {
     if (!this.props.queryResultsTEXT) {
       this.props.getText(this.props.queries);
     }
-    const data = this.props.queryResultsTEXT;
-    onDownloadFile(data, "plain", this.props.selectedTabName + ".txt");
+    setTimeout(() => {
+      const data = this.props.queryResultsTEXT;
+      onDownloadFile(data, "plain", this.props.selectedTabName + ".txt");
+    }, 2000);
   };
 
   // Actions for Downloads Button
diff --git a/public/components/QueryResults/__snapshots__/QueryResults.test.tsx.snap b/public/components/QueryResults/__snapshots__/QueryResults.test.tsx.snap
index 56dcca8..4ec5bda 100644
--- a/public/components/QueryResults/__snapshots__/QueryResults.test.tsx.snap
+++ b/public/components/QueryResults/__snapshots__/QueryResults.test.tsx.snap
@@ -645,7 +645,7 @@ exports[`<QueryResults with data/> spec renders the component to test tabs down
                     class="table-header"
                   >
                     <tr>
-                      <th
+                      <td
                         aria-live="polite"
                         aria-sort="none"
                         class="euiTableHeaderCell"
@@ -671,7 +671,7 @@ exports[`<QueryResults with data/> spec renders the component to test tabs down
                             </span>
                           </span>
                         </button>
-                      </th>
+                      </td>
                       <th
                         aria-live="polite"
                         aria-sort="ascending"
@@ -690,6 +690,7 @@ exports[`<QueryResults with data/> spec renders the component to test tabs down
                           >
                             <span
                               class="euiTableCellContent__text"
+                              title="id; Sorted in ascending order"
                             >
                               id
                             </span>
@@ -720,6 +721,7 @@ exports[`<QueryResults with data/> spec renders the component to test tabs down
                           >
                             <span
                               class="euiTableCellContent__text"
+                              title="category"
                             >
                               category
                             </span>
@@ -749,6 +751,7 @@ exports[`<QueryResults with data/> spec renders the component to test tabs down
                           >
                             <span
                               class="euiTableCellContent__text"
+                              title="currency"
                             >
                               currency
                             </span>
@@ -778,6 +781,7 @@ exports[`<QueryResults with data/> spec renders the component to test tabs down
                           >
                             <span
                               class="euiTableCellContent__text"
+                              title="customer_first_name"
                             >
                               customer_first_name
                             </span>
@@ -807,6 +811,7 @@ exports[`<QueryResults with data/> spec renders the component to test tabs down
                           >
                             <span
                               class="euiTableCellContent__text"
+                              title="customer_full_name"
                             >
                               customer_full_name
                             </span>
@@ -836,6 +841,7 @@ exports[`<QueryResults with data/> spec renders the component to test tabs down
                           >
                             <span
                               class="euiTableCellContent__text"
+                              title="customer_gender"
                             >
                               customer_gender
                             </span>
@@ -865,6 +871,7 @@ exports[`<QueryResults with data/> spec renders the component to test tabs down
                           >
                             <span
                               class="euiTableCellContent__text"
+                              title="customer_id"
                             >
                               customer_id
                             </span>
@@ -894,6 +901,7 @@ exports[`<QueryResults with data/> spec renders the component to test tabs down
                           >
                             <span
                               class="euiTableCellContent__text"
+                              title="customer_last_name"
                             >
                               customer_last_name
                             </span>
@@ -923,6 +931,7 @@ exports[`<QueryResults with data/> spec renders the component to test tabs down
                           >
                             <span
                               class="euiTableCellContent__text"
+                              title="customer_phone"
                             >
                               customer_phone
                             </span>
@@ -952,6 +961,7 @@ exports[`<QueryResults with data/> spec renders the component to test tabs down
                           >
                             <span
                               class="euiTableCellContent__text"
+                              title="day_of_week"
                             >
                               day_of_week
                             </span>
@@ -981,6 +991,7 @@ exports[`<QueryResults with data/> spec renders the component to test tabs down
                           >
                             <span
                               class="euiTableCellContent__text"
+                              title="day_of_week_i"
                             >
                               day_of_week_i
                             </span>
@@ -1010,6 +1021,7 @@ exports[`<QueryResults with data/> spec renders the component to test tabs down
                           >
                             <span
                               class="euiTableCellContent__text"
+                              title="email"
                             >
                               email
                             </span>
@@ -1039,6 +1051,7 @@ exports[`<QueryResults with data/> spec renders the component to test tabs down
                           >
                             <span
                               class="euiTableCellContent__text"
+                              title="manufacturer"
                             >
                               manufacturer
                             </span>
@@ -1068,6 +1081,7 @@ exports[`<QueryResults with data/> spec renders the component to test tabs down
                           >
                             <span
                               class="euiTableCellContent__text"
+                              title="order_date"
                             >
                               order_date
                             </span>
@@ -1097,6 +1111,7 @@ exports[`<QueryResults with data/> spec renders the component to test tabs down
                           >
                             <span
                               class="euiTableCellContent__text"
+                              title="order_id"
                             >
                               order_id
                             </span>
@@ -1126,6 +1141,7 @@ exports[`<QueryResults with data/> spec renders the component to test tabs down
                           >
                             <span
                               class="euiTableCellContent__text"
+                              title="products"
                             >
                               products
                             </span>
@@ -1155,6 +1171,7 @@ exports[`<QueryResults with data/> spec renders the component to test tabs down
                           >
                             <span
                               class="euiTableCellContent__text"
+                              title="sku"
                             >
                               sku
                             </span>
@@ -1184,6 +1201,7 @@ exports[`<QueryResults with data/> spec renders the component to test tabs down
                           >
                             <span
                               class="euiTableCellContent__text"
+                              title="taxful_total_price"
                             >
                               taxful_total_price
                             </span>
@@ -1213,6 +1231,7 @@ exports[`<QueryResults with data/> spec renders the component to test tabs down
                           >
                             <span
                               class="euiTableCellContent__text"
+                              title="taxless_total_price"
                             >
                               taxless_total_price
                             </span>
@@ -1242,6 +1261,7 @@ exports[`<QueryResults with data/> spec renders the component to test tabs down
                           >
                             <span
                               class="euiTableCellContent__text"
+                              title="total_quantity"
                             >
                               total_quantity
                             </span>
@@ -1271,6 +1291,7 @@ exports[`<QueryResults with data/> spec renders the component to test tabs down
                           >
                             <span
                               class="euiTableCellContent__text"
+                              title="total_unique_products"
                             >
                               total_unique_products
                             </span>
@@ -1300,6 +1321,7 @@ exports[`<QueryResults with data/> spec renders the component to test tabs down
                           >
                             <span
                               class="euiTableCellContent__text"
+                              title="type"
                             >
                               type
                             </span>
@@ -1329,6 +1351,7 @@ exports[`<QueryResults with data/> spec renders the component to test tabs down
                           >
                             <span
                               class="euiTableCellContent__text"
+                              title="user"
                             >
                               user
                             </span>
@@ -1358,6 +1381,7 @@ exports[`<QueryResults with data/> spec renders the component to test tabs down
                           >
                             <span
                               class="euiTableCellContent__text"
+                              title="geoip"
                             >
                               geoip
                             </span>
@@ -5721,7 +5745,7 @@ exports[`<QueryResults with data/> spec renders the component to test tabs right
                     class="table-header"
                   >
                     <tr>
-                      <th
+                      <td
                         aria-live="polite"
                         aria-sort="none"
                         class="euiTableHeaderCell"
@@ -5747,7 +5771,7 @@ exports[`<QueryResults with data/> spec renders the component to test tabs right
                             </span>
                           </span>
                         </button>
-                      </th>
+                      </td>
                       <th
                         aria-live="polite"
                         aria-sort="ascending"
@@ -5766,6 +5790,7 @@ exports[`<QueryResults with data/> spec renders the component to test tabs right
                           >
                             <span
                               class="euiTableCellContent__text"
+                              title="id; Sorted in ascending order"
                             >
                               id
                             </span>
@@ -5796,6 +5821,7 @@ exports[`<QueryResults with data/> spec renders the component to test tabs right
                           >
                             <span
                               class="euiTableCellContent__text"
+                              title="category"
                             >
                               category
                             </span>
@@ -5825,6 +5851,7 @@ exports[`<QueryResults with data/> spec renders the component to test tabs right
                           >
                             <span
                               class="euiTableCellContent__text"
+                              title="currency"
                             >
                               currency
                             </span>
@@ -5854,6 +5881,7 @@ exports[`<QueryResults with data/> spec renders the component to test tabs right
                           >
                             <span
                               class="euiTableCellContent__text"
+                              title="customer_first_name"
                             >
                               customer_first_name
                             </span>
@@ -5883,6 +5911,7 @@ exports[`<QueryResults with data/> spec renders the component to test tabs right
                           >
                             <span
                               class="euiTableCellContent__text"
+                              title="customer_full_name"
                             >
                               customer_full_name
                             </span>
@@ -5912,6 +5941,7 @@ exports[`<QueryResults with data/> spec renders the component to test tabs right
                           >
                             <span
                               class="euiTableCellContent__text"
+                              title="customer_gender"
                             >
                               customer_gender
                             </span>
@@ -5941,6 +5971,7 @@ exports[`<QueryResults with data/> spec renders the component to test tabs right
                           >
                             <span
                               class="euiTableCellContent__text"
+                              title="customer_id"
                             >
                               customer_id
                             </span>
@@ -5970,6 +6001,7 @@ exports[`<QueryResults with data/> spec renders the component to test tabs right
                           >
                             <span
                               class="euiTableCellContent__text"
+                              title="customer_last_name"
                             >
                               customer_last_name
                             </span>
@@ -5999,6 +6031,7 @@ exports[`<QueryResults with data/> spec renders the component to test tabs right
                           >
                             <span
                               class="euiTableCellContent__text"
+                              title="customer_phone"
                             >
                               customer_phone
                             </span>
@@ -6028,6 +6061,7 @@ exports[`<QueryResults with data/> spec renders the component to test tabs right
                           >
                             <span
                               class="euiTableCellContent__text"
+                              title="day_of_week"
                             >
                               day_of_week
                             </span>
@@ -6057,6 +6091,7 @@ exports[`<QueryResults with data/> spec renders the component to test tabs right
                           >
                             <span
                               class="euiTableCellContent__text"
+                              title="day_of_week_i"
                             >
                               day_of_week_i
                             </span>
@@ -6086,6 +6121,7 @@ exports[`<QueryResults with data/> spec renders the component to test tabs right
                           >
                             <span
                               class="euiTableCellContent__text"
+                              title="email"
                             >
                               email
                             </span>
@@ -6115,6 +6151,7 @@ exports[`<QueryResults with data/> spec renders the component to test tabs right
                           >
                             <span
                               class="euiTableCellContent__text"
+                              title="manufacturer"
                             >
                               manufacturer
                             </span>
@@ -6144,6 +6181,7 @@ exports[`<QueryResults with data/> spec renders the component to test tabs right
                           >
                             <span
                               class="euiTableCellContent__text"
+                              title="order_date"
                             >
                               order_date
                             </span>
@@ -6173,6 +6211,7 @@ exports[`<QueryResults with data/> spec renders the component to test tabs right
                           >
                             <span
                               class="euiTableCellContent__text"
+                              title="order_id"
                             >
                               order_id
                             </span>
@@ -6202,6 +6241,7 @@ exports[`<QueryResults with data/> spec renders the component to test tabs right
                           >
                             <span
                               class="euiTableCellContent__text"
+                              title="products"
                             >
                               products
                             </span>
@@ -6231,6 +6271,7 @@ exports[`<QueryResults with data/> spec renders the component to test tabs right
                           >
                             <span
                               class="euiTableCellContent__text"
+                              title="sku"
                             >
                               sku
                             </span>
@@ -6260,6 +6301,7 @@ exports[`<QueryResults with data/> spec renders the component to test tabs right
                           >
                             <span
                               class="euiTableCellContent__text"
+                              title="taxful_total_price"
                             >
                               taxful_total_price
                             </span>
@@ -6289,6 +6331,7 @@ exports[`<QueryResults with data/> spec renders the component to test tabs right
                           >
                             <span
                               class="euiTableCellContent__text"
+                              title="taxless_total_price"
                             >
                               taxless_total_price
                             </span>
@@ -6318,6 +6361,7 @@ exports[`<QueryResults with data/> spec renders the component to test tabs right
                           >
                             <span
                               class="euiTableCellContent__text"
+                              title="total_quantity"
                             >
                               total_quantity
                             </span>
@@ -6347,6 +6391,7 @@ exports[`<QueryResults with data/> spec renders the component to test tabs right
                           >
                             <span
                               class="euiTableCellContent__text"
+                              title="total_unique_products"
                             >
                               total_unique_products
                             </span>
@@ -6376,6 +6421,7 @@ exports[`<QueryResults with data/> spec renders the component to test tabs right
                           >
                             <span
                               class="euiTableCellContent__text"
+                              title="type"
                             >
                               type
                             </span>
@@ -6405,6 +6451,7 @@ exports[`<QueryResults with data/> spec renders the component to test tabs right
                           >
                             <span
                               class="euiTableCellContent__text"
+                              title="user"
                             >
                               user
                             </span>
@@ -6434,6 +6481,7 @@ exports[`<QueryResults with data/> spec renders the component to test tabs right
                           >
                             <span
                               class="euiTableCellContent__text"
+                              title="geoip"
                             >
                               geoip
                             </span>
@@ -10797,7 +10845,7 @@ exports[`<QueryResults with data/> spec renders the component with mock query re
                     class="table-header"
                   >
                     <tr>
-                      <th
+                      <td
                         aria-live="polite"
                         aria-sort="none"
                         class="euiTableHeaderCell"
@@ -10823,7 +10871,7 @@ exports[`<QueryResults with data/> spec renders the component with mock query re
                             </span>
                           </span>
                         </button>
-                      </th>
+                      </td>
                       <th
                         aria-live="polite"
                         aria-sort="ascending"
@@ -10842,6 +10890,7 @@ exports[`<QueryResults with data/> spec renders the component with mock query re
                           >
                             <span
                               class="euiTableCellContent__text"
+                              title="id; Sorted in ascending order"
                             >
                               id
                             </span>
@@ -10872,6 +10921,7 @@ exports[`<QueryResults with data/> spec renders the component with mock query re
                           >
                             <span
                               class="euiTableCellContent__text"
+                              title="category"
                             >
                               category
                             </span>
@@ -10901,6 +10951,7 @@ exports[`<QueryResults with data/> spec renders the component with mock query re
                           >
                             <span
                               class="euiTableCellContent__text"
+                              title="currency"
                             >
                               currency
                             </span>
@@ -10930,6 +10981,7 @@ exports[`<QueryResults with data/> spec renders the component with mock query re
                           >
                             <span
                               class="euiTableCellContent__text"
+                              title="customer_first_name"
                             >
                               customer_first_name
                             </span>
@@ -10959,6 +11011,7 @@ exports[`<QueryResults with data/> spec renders the component with mock query re
                           >
                             <span
                               class="euiTableCellContent__text"
+                              title="customer_full_name"
                             >
                               customer_full_name
                             </span>
@@ -10988,6 +11041,7 @@ exports[`<QueryResults with data/> spec renders the component with mock query re
                           >
                             <span
                               class="euiTableCellContent__text"
+                              title="customer_gender"
                             >
                               customer_gender
                             </span>
@@ -11017,6 +11071,7 @@ exports[`<QueryResults with data/> spec renders the component with mock query re
                           >
                             <span
                               class="euiTableCellContent__text"
+                              title="customer_id"
                             >
                               customer_id
                             </span>
@@ -11046,6 +11101,7 @@ exports[`<QueryResults with data/> spec renders the component with mock query re
                           >
                             <span
                               class="euiTableCellContent__text"
+                              title="customer_last_name"
                             >
                               customer_last_name
                             </span>
@@ -11075,6 +11131,7 @@ exports[`<QueryResults with data/> spec renders the component with mock query re
                           >
                             <span
                               class="euiTableCellContent__text"
+                              title="customer_phone"
                             >
                               customer_phone
                             </span>
@@ -11104,6 +11161,7 @@ exports[`<QueryResults with data/> spec renders the component with mock query re
                           >
                             <span
                               class="euiTableCellContent__text"
+                              title="day_of_week"
                             >
                               day_of_week
                             </span>
@@ -11133,6 +11191,7 @@ exports[`<QueryResults with data/> spec renders the component with mock query re
                           >
                             <span
                               class="euiTableCellContent__text"
+                              title="day_of_week_i"
                             >
                               day_of_week_i
                             </span>
@@ -11162,6 +11221,7 @@ exports[`<QueryResults with data/> spec renders the component with mock query re
                           >
                             <span
                               class="euiTableCellContent__text"
+                              title="email"
                             >
                               email
                             </span>
@@ -11191,6 +11251,7 @@ exports[`<QueryResults with data/> spec renders the component with mock query re
                           >
                             <span
                               class="euiTableCellContent__text"
+                              title="manufacturer"
                             >
                               manufacturer
                             </span>
@@ -11220,6 +11281,7 @@ exports[`<QueryResults with data/> spec renders the component with mock query re
                           >
                             <span
                               class="euiTableCellContent__text"
+                              title="order_date"
                             >
                               order_date
                             </span>
@@ -11249,6 +11311,7 @@ exports[`<QueryResults with data/> spec renders the component with mock query re
                           >
                             <span
                               class="euiTableCellContent__text"
+                              title="order_id"
                             >
                               order_id
                             </span>
@@ -11278,6 +11341,7 @@ exports[`<QueryResults with data/> spec renders the component with mock query re
                           >
                             <span
                               class="euiTableCellContent__text"
+                              title="products"
                             >
                               products
                             </span>
@@ -11307,6 +11371,7 @@ exports[`<QueryResults with data/> spec renders the component with mock query re
                           >
                             <span
                               class="euiTableCellContent__text"
+                              title="sku"
                             >
                               sku
                             </span>
@@ -11336,6 +11401,7 @@ exports[`<QueryResults with data/> spec renders the component with mock query re
                           >
                             <span
                               class="euiTableCellContent__text"
+                              title="taxful_total_price"
                             >
                               taxful_total_price
                             </span>
@@ -11365,6 +11431,7 @@ exports[`<QueryResults with data/> spec renders the component with mock query re
                           >
                             <span
                               class="euiTableCellContent__text"
+                              title="taxless_total_price"
                             >
                               taxless_total_price
                             </span>
@@ -11394,6 +11461,7 @@ exports[`<QueryResults with data/> spec renders the component with mock query re
                           >
                             <span
                               class="euiTableCellContent__text"
+                              title="total_quantity"
                             >
                               total_quantity
                             </span>
@@ -11423,6 +11491,7 @@ exports[`<QueryResults with data/> spec renders the component with mock query re
                           >
                             <span
                               class="euiTableCellContent__text"
+                              title="total_unique_products"
                             >
                               total_unique_products
                             </span>
@@ -11452,6 +11521,7 @@ exports[`<QueryResults with data/> spec renders the component with mock query re
                           >
                             <span
                               class="euiTableCellContent__text"
+                              title="type"
                             >
                               type
                             </span>
@@ -11481,6 +11551,7 @@ exports[`<QueryResults with data/> spec renders the component with mock query re
                           >
                             <span
                               class="euiTableCellContent__text"
+                              title="user"
                             >
                               user
                             </span>
@@ -11510,6 +11581,7 @@ exports[`<QueryResults with data/> spec renders the component with mock query re
                           >
                             <span
                               class="euiTableCellContent__text"
+                              title="geoip"
                             >
                               geoip
                             </span>
diff --git a/public/components/QueryResults/__snapshots__/QueryResultsBody.test.tsx.snap b/public/components/QueryResults/__snapshots__/QueryResultsBody.test.tsx.snap
index 3bec6fb..315ecdc 100644
--- a/public/components/QueryResults/__snapshots__/QueryResultsBody.test.tsx.snap
+++ b/public/components/QueryResults/__snapshots__/QueryResultsBody.test.tsx.snap
@@ -129,7 +129,28 @@ exports[`<QueryResultsBody /> spec renders component with mock QueryResults data
         <div
           class="euiFlexItem euiFlexItem--flexGrowZero"
         >
-          <span />
+          <div
+            class="euiPagination"
+            role="group"
+          >
+            <button
+              aria-label="Previous page"
+              class="euiButtonIcon euiButtonIcon--text"
+              data-test-subj="pagination-button-previous"
+              disabled=""
+              type="button"
+            >
+              EuiIconMock
+            </button>
+            <button
+              aria-label="Next page"
+              class="euiButtonIcon euiButtonIcon--text"
+              data-test-subj="pagination-button-next"
+              type="button"
+            >
+              EuiIconMock
+            </button>
+          </div>
         </div>
       </div>
     </div>
@@ -165,7 +186,7 @@ exports[`<QueryResultsBody /> spec renders component with mock QueryResults data
                   class="table-header"
                 >
                   <tr>
-                    <th
+                    <td
                       aria-live="polite"
                       aria-sort="none"
                       class="euiTableHeaderCell"
@@ -191,7 +212,7 @@ exports[`<QueryResultsBody /> spec renders component with mock QueryResults data
                           </span>
                         </span>
                       </button>
-                    </th>
+                    </td>
                     <th
                       aria-live="polite"
                       aria-sort="none"
@@ -210,6 +231,7 @@ exports[`<QueryResultsBody /> spec renders component with mock QueryResults data
                         >
                           <span
                             class="euiTableCellContent__text"
+                            title="id"
                           >
                             id
                           </span>
@@ -239,6 +261,7 @@ exports[`<QueryResultsBody /> spec renders component with mock QueryResults data
                         >
                           <span
                             class="euiTableCellContent__text"
+                            title="category"
                           >
                             category
                           </span>
@@ -268,6 +291,7 @@ exports[`<QueryResultsBody /> spec renders component with mock QueryResults data
                         >
                           <span
                             class="euiTableCellContent__text"
+                            title="currency"
                           >
                             currency
                           </span>
@@ -297,6 +321,7 @@ exports[`<QueryResultsBody /> spec renders component with mock QueryResults data
                         >
                           <span
                             class="euiTableCellContent__text"
+                            title="customer_first_name"
                           >
                             customer_first_name
                           </span>
@@ -326,6 +351,7 @@ exports[`<QueryResultsBody /> spec renders component with mock QueryResults data
                         >
                           <span
                             class="euiTableCellContent__text"
+                            title="customer_full_name"
                           >
                             customer_full_name
                           </span>
@@ -355,6 +381,7 @@ exports[`<QueryResultsBody /> spec renders component with mock QueryResults data
                         >
                           <span
                             class="euiTableCellContent__text"
+                            title="customer_gender"
                           >
                             customer_gender
                           </span>
@@ -384,6 +411,7 @@ exports[`<QueryResultsBody /> spec renders component with mock QueryResults data
                         >
                           <span
                             class="euiTableCellContent__text"
+                            title="customer_id"
                           >
                             customer_id
                           </span>
@@ -413,6 +441,7 @@ exports[`<QueryResultsBody /> spec renders component with mock QueryResults data
                         >
                           <span
                             class="euiTableCellContent__text"
+                            title="customer_last_name"
                           >
                             customer_last_name
                           </span>
@@ -442,6 +471,7 @@ exports[`<QueryResultsBody /> spec renders component with mock QueryResults data
                         >
                           <span
                             class="euiTableCellContent__text"
+                            title="customer_phone"
                           >
                             customer_phone
                           </span>
@@ -471,6 +501,7 @@ exports[`<QueryResultsBody /> spec renders component with mock QueryResults data
                         >
                           <span
                             class="euiTableCellContent__text"
+                            title="day_of_week"
                           >
                             day_of_week
                           </span>
@@ -500,6 +531,7 @@ exports[`<QueryResultsBody /> spec renders component with mock QueryResults data
                         >
                           <span
                             class="euiTableCellContent__text"
+                            title="day_of_week_i"
                           >
                             day_of_week_i
                           </span>
@@ -529,6 +561,7 @@ exports[`<QueryResultsBody /> spec renders component with mock QueryResults data
                         >
                           <span
                             class="euiTableCellContent__text"
+                            title="email"
                           >
                             email
                           </span>
@@ -558,6 +591,7 @@ exports[`<QueryResultsBody /> spec renders component with mock QueryResults data
                         >
                           <span
                             class="euiTableCellContent__text"
+                            title="manufacturer"
                           >
                             manufacturer
                           </span>
@@ -587,6 +621,7 @@ exports[`<QueryResultsBody /> spec renders component with mock QueryResults data
                         >
                           <span
                             class="euiTableCellContent__text"
+                            title="order_date"
                           >
                             order_date
                           </span>
@@ -616,6 +651,7 @@ exports[`<QueryResultsBody /> spec renders component with mock QueryResults data
                         >
                           <span
                             class="euiTableCellContent__text"
+                            title="order_id"
                           >
                             order_id
                           </span>
@@ -645,6 +681,7 @@ exports[`<QueryResultsBody /> spec renders component with mock QueryResults data
                         >
                           <span
                             class="euiTableCellContent__text"
+                            title="products"
                           >
                             products
                           </span>
@@ -674,6 +711,7 @@ exports[`<QueryResultsBody /> spec renders component with mock QueryResults data
                         >
                           <span
                             class="euiTableCellContent__text"
+                            title="sku"
                           >
                             sku
                           </span>
@@ -703,6 +741,7 @@ exports[`<QueryResultsBody /> spec renders component with mock QueryResults data
                         >
                           <span
                             class="euiTableCellContent__text"
+                            title="taxful_total_price"
                           >
                             taxful_total_price
                           </span>
@@ -732,6 +771,7 @@ exports[`<QueryResultsBody /> spec renders component with mock QueryResults data
                         >
                           <span
                             class="euiTableCellContent__text"
+                            title="taxless_total_price"
                           >
                             taxless_total_price
                           </span>
@@ -761,6 +801,7 @@ exports[`<QueryResultsBody /> spec renders component with mock QueryResults data
                         >
                           <span
                             class="euiTableCellContent__text"
+                            title="total_quantity"
                           >
                             total_quantity
                           </span>
@@ -790,6 +831,7 @@ exports[`<QueryResultsBody /> spec renders component with mock QueryResults data
                         >
                           <span
                             class="euiTableCellContent__text"
+                            title="total_unique_products"
                           >
                             total_unique_products
                           </span>
@@ -819,6 +861,7 @@ exports[`<QueryResultsBody /> spec renders component with mock QueryResults data
                         >
                           <span
                             class="euiTableCellContent__text"
+                            title="type"
                           >
                             type
                           </span>
@@ -848,6 +891,7 @@ exports[`<QueryResultsBody /> spec renders component with mock QueryResults data
                         >
                           <span
                             class="euiTableCellContent__text"
+                            title="user"
                           >
                             user
                           </span>
@@ -877,6 +921,7 @@ exports[`<QueryResultsBody /> spec renders component with mock QueryResults data
                         >
                           <span
                             class="euiTableCellContent__text"
+                            title="geoip"
                           >
                             geoip
                           </span>
@@ -5128,7 +5173,28 @@ exports[`<QueryResultsBody /> spec renders component with mock QueryResults data
         <div
           class="euiFlexItem euiFlexItem--flexGrowZero"
         >
-          <span />
+          <div
+            class="euiPagination"
+            role="group"
+          >
+            <button
+              aria-label="Previous page"
+              class="euiButtonIcon euiButtonIcon--text"
+              data-test-subj="pagination-button-previous"
+              disabled=""
+              type="button"
+            >
+              EuiIconMock
+            </button>
+            <button
+              aria-label="Next page"
+              class="euiButtonIcon euiButtonIcon--text"
+              data-test-subj="pagination-button-next"
+              type="button"
+            >
+              EuiIconMock
+            </button>
+          </div>
         </div>
       </div>
     </div>
@@ -5213,7 +5279,7 @@ exports[`<QueryResultsBody /> spec renders component with mock QueryResults data
                   class="euiFieldSearch euiFieldSearch--fullWidth"
                   placeholder="Search"
                   type="search"
-                  value=""
+                  value="Test"
                 />
                 <div
                   class="euiFormControlLayoutIcons"
@@ -5224,6 +5290,17 @@ exports[`<QueryResultsBody /> spec renders component with mock QueryResults data
                     EuiIconMock
                   </span>
                 </div>
+                <div
+                  class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
+                >
+                  <button
+                    aria-label="Clear input"
+                    class="euiFormControlLayoutClearButton"
+                    type="button"
+                  >
+                    EuiIconMock
+                  </button>
+                </div>
               </div>
             </div>
           </div>
@@ -5265,7 +5342,28 @@ exports[`<QueryResultsBody /> spec renders component with mock QueryResults data
         <div
           class="euiFlexItem euiFlexItem--flexGrowZero"
         >
-          <span />
+          <div
+            class="euiPagination"
+            role="group"
+          >
+            <button
+              aria-label="Previous page"
+              class="euiButtonIcon euiButtonIcon--text"
+              data-test-subj="pagination-button-previous"
+              disabled=""
+              type="button"
+            >
+              EuiIconMock
+            </button>
+            <button
+              aria-label="Next page"
+              class="euiButtonIcon euiButtonIcon--text"
+              data-test-subj="pagination-button-next"
+              type="button"
+            >
+              EuiIconMock
+            </button>
+          </div>
         </div>
       </div>
     </div>
@@ -5301,7 +5399,7 @@ exports[`<QueryResultsBody /> spec renders component with mock QueryResults data
                   class="table-header"
                 >
                   <tr>
-                    <th
+                    <td
                       aria-live="polite"
                       aria-sort="none"
                       class="euiTableHeaderCell"
@@ -5327,7 +5425,7 @@ exports[`<QueryResultsBody /> spec renders component with mock QueryResults data
                           </span>
                         </span>
                       </button>
-                    </th>
+                    </td>
                     <th
                       aria-live="polite"
                       aria-sort="none"
@@ -5346,6 +5444,7 @@ exports[`<QueryResultsBody /> spec renders component with mock QueryResults data
                         >
                           <span
                             class="euiTableCellContent__text"
+                            title="id"
                           >
                             id
                           </span>
@@ -5375,6 +5474,7 @@ exports[`<QueryResultsBody /> spec renders component with mock QueryResults data
                         >
                           <span
                             class="euiTableCellContent__text"
+                            title="category"
                           >
                             category
                           </span>
@@ -5404,6 +5504,7 @@ exports[`<QueryResultsBody /> spec renders component with mock QueryResults data
                         >
                           <span
                             class="euiTableCellContent__text"
+                            title="currency"
                           >
                             currency
                           </span>
@@ -5433,6 +5534,7 @@ exports[`<QueryResultsBody /> spec renders component with mock QueryResults data
                         >
                           <span
                             class="euiTableCellContent__text"
+                            title="customer_first_name"
                           >
                             customer_first_name
                           </span>
@@ -5462,6 +5564,7 @@ exports[`<QueryResultsBody /> spec renders component with mock QueryResults data
                         >
                           <span
                             class="euiTableCellContent__text"
+                            title="customer_full_name"
                           >
                             customer_full_name
                           </span>
@@ -5491,6 +5594,7 @@ exports[`<QueryResultsBody /> spec renders component with mock QueryResults data
                         >
                           <span
                             class="euiTableCellContent__text"
+                            title="customer_gender"
                           >
                             customer_gender
                           </span>
@@ -5520,6 +5624,7 @@ exports[`<QueryResultsBody /> spec renders component with mock QueryResults data
                         >
                           <span
                             class="euiTableCellContent__text"
+                            title="customer_id"
                           >
                             customer_id
                           </span>
@@ -5549,6 +5654,7 @@ exports[`<QueryResultsBody /> spec renders component with mock QueryResults data
                         >
                           <span
                             class="euiTableCellContent__text"
+                            title="customer_last_name"
                           >
                             customer_last_name
                           </span>
@@ -5578,6 +5684,7 @@ exports[`<QueryResultsBody /> spec renders component with mock QueryResults data
                         >
                           <span
                             class="euiTableCellContent__text"
+                            title="customer_phone"
                           >
                             customer_phone
                           </span>
@@ -5607,6 +5714,7 @@ exports[`<QueryResultsBody /> spec renders component with mock QueryResults data
                         >
                           <span
                             class="euiTableCellContent__text"
+                            title="day_of_week"
                           >
                             day_of_week
                           </span>
@@ -5636,6 +5744,7 @@ exports[`<QueryResultsBody /> spec renders component with mock QueryResults data
                         >
                           <span
                             class="euiTableCellContent__text"
+                            title="day_of_week_i"
                           >
                             day_of_week_i
                           </span>
@@ -5665,6 +5774,7 @@ exports[`<QueryResultsBody /> spec renders component with mock QueryResults data
                         >
                           <span
                             class="euiTableCellContent__text"
+                            title="email"
                           >
                             email
                           </span>
@@ -5694,6 +5804,7 @@ exports[`<QueryResultsBody /> spec renders component with mock QueryResults data
                         >
                           <span
                             class="euiTableCellContent__text"
+                            title="manufacturer"
                           >
                             manufacturer
                           </span>
@@ -5723,6 +5834,7 @@ exports[`<QueryResultsBody /> spec renders component with mock QueryResults data
                         >
                           <span
                             class="euiTableCellContent__text"
+                            title="order_date"
                           >
                             order_date
                           </span>
@@ -5752,6 +5864,7 @@ exports[`<QueryResultsBody /> spec renders component with mock QueryResults data
                         >
                           <span
                             class="euiTableCellContent__text"
+                            title="order_id"
                           >
                             order_id
                           </span>
@@ -5781,6 +5894,7 @@ exports[`<QueryResultsBody /> spec renders component with mock QueryResults data
                         >
                           <span
                             class="euiTableCellContent__text"
+                            title="products"
                           >
                             products
                           </span>
@@ -5810,6 +5924,7 @@ exports[`<QueryResultsBody /> spec renders component with mock QueryResults data
                         >
                           <span
                             class="euiTableCellContent__text"
+                            title="sku"
                           >
                             sku
                           </span>
@@ -5839,6 +5954,7 @@ exports[`<QueryResultsBody /> spec renders component with mock QueryResults data
                         >
                           <span
                             class="euiTableCellContent__text"
+                            title="taxful_total_price"
                           >
                             taxful_total_price
                           </span>
@@ -5868,6 +5984,7 @@ exports[`<QueryResultsBody /> spec renders component with mock QueryResults data
                         >
                           <span
                             class="euiTableCellContent__text"
+                            title="taxless_total_price"
                           >
                             taxless_total_price
                           </span>
@@ -5897,6 +6014,7 @@ exports[`<QueryResultsBody /> spec renders component with mock QueryResults data
                         >
                           <span
                             class="euiTableCellContent__text"
+                            title="total_quantity"
                           >
                             total_quantity
                           </span>
@@ -5926,6 +6044,7 @@ exports[`<QueryResultsBody /> spec renders component with mock QueryResults data
                         >
                           <span
                             class="euiTableCellContent__text"
+                            title="total_unique_products"
                           >
                             total_unique_products
                           </span>
@@ -5955,6 +6074,7 @@ exports[`<QueryResultsBody /> spec renders component with mock QueryResults data
                         >
                           <span
                             class="euiTableCellContent__text"
+                            title="type"
                           >
                             type
                           </span>
@@ -5984,6 +6104,7 @@ exports[`<QueryResultsBody /> spec renders component with mock QueryResults data
                         >
                           <span
                             class="euiTableCellContent__text"
+                            title="user"
                           >
                             user
                           </span>
@@ -6013,6 +6134,7 @@ exports[`<QueryResultsBody /> spec renders component with mock QueryResults data
                         >
                           <span
                             class="euiTableCellContent__text"
+                            title="geoip"
                           >
                             geoip
                           </span>
@@ -10520,7 +10642,28 @@ exports[`<QueryResultsBody /> spec renders component with mock QueryResults data
         <div
           class="euiFlexItem euiFlexItem--flexGrowZero"
         >
-          <span />
+          <div
+            class="euiPagination"
+            role="group"
+          >
+            <button
+              aria-label="Previous page"
+              class="euiButtonIcon euiButtonIcon--text"
+              data-test-subj="pagination-button-previous"
+              disabled=""
+              type="button"
+            >
+              EuiIconMock
+            </button>
+            <button
+              aria-label="Next page"
+              class="euiButtonIcon euiButtonIcon--text"
+              data-test-subj="pagination-button-next"
+              type="button"
+            >
+              EuiIconMock
+            </button>
+          </div>
         </div>
       </div>
     </div>
diff --git a/server/services/QueryService.ts b/server/services/QueryService.ts
index 8be4a41..e94468e 100644
--- a/server/services/QueryService.ts
+++ b/server/services/QueryService.ts
@@ -17,6 +17,7 @@ import "core-js/stable";
 import "regenerator-runtime/runtime";
 import { Request, ResponseToolkit } from 'hapi-latest';
 import { CLUSTER } from './utils/constants';
+import _ from "lodash";
 
 export default class QueryService {
   private client: any;
@@ -24,14 +25,16 @@ export default class QueryService {
     this.client = client;
   }
 
-  describeQueryInternal = async (request: Request, h: ResponseToolkit, format: string, err?: Error) => {
+  describeQueryInternal = async (request: Request, h: ResponseToolkit, format: string, responseFormat: string, err?: Error) => {
     try {
       const params = {
         body: JSON.stringify(request.payload),
       };
       const { callWithRequest } = await this.client.getCluster(CLUSTER.SQL);
       const createResponse = await callWithRequest(request, format, params);
-      return h.response({ ok: true, resp: JSON.stringify(createResponse) });
+      return h.response({ ok: true, resp:
+          _.isEqual(responseFormat, "json") ? JSON.stringify(createResponse) : createResponse
+      });
     } catch (err) {
       console.log(err);
     }
@@ -39,22 +42,22 @@ export default class QueryService {
   };
 
   describeQuery = async (request: Request, h: ResponseToolkit, err?: Error) => {
-    return this.describeQueryInternal(request, h, "sql.query", err)
+    return this.describeQueryInternal(request, h, "sql.query", "json", err)
   };
 
   describeQueryCsv = async (request: Request, h: ResponseToolkit, err?: Error) => {
-    return this.describeQueryInternal(request, h, "sql.getCsv", err)
+    return this.describeQueryInternal(request, h, "sql.getCsv", null, err)
   };
 
   describeQueryJson = async (request: Request, h: ResponseToolkit, err?: Error) => {
-    return this.describeQueryInternal(request, h, "sql.getJson", err)
+    return this.describeQueryInternal(request, h, "sql.getJson", "json", err)
   };
 
   describeQueryJdbc = async (request: Request, h: ResponseToolkit, err?: Error) => {
-    return this.describeQueryInternal(request, h, "sql.getJdbc", err)
+    return this.describeQueryInternal(request, h, "sql.getJdbc", "json", err)
   };
 
   describeQueryText = async (request: Request, h: ResponseToolkit, err?: Error) => {
-    return this.describeQueryInternal(request, h, "sql.getText", err)
+    return this.describeQueryInternal(request, h, "sql.getText", null, err)
   };
 }