From 4585c69bc89803f1278697c1a88a474ebfc6b18b Mon Sep 17 00:00:00 2001
From: chloe-zh <chloezh1102@gmail.com>
Date: Wed, 16 Dec 2020 13:08:50 -0800
Subject: [PATCH 1/3] fixed error message cannot display issue

---
 workbench/public/app.scss                     |  2 +-
 .../public/components/Main/main.test.tsx      | 21 ++++++++++---------
 workbench/public/components/Main/main.tsx     | 14 +++++++++----
 workbench/test/mocks/mockData.ts              | 11 ++++++----
 4 files changed, 29 insertions(+), 19 deletions(-)

diff --git a/workbench/public/app.scss b/workbench/public/app.scss
index f32c2f32c5..888d245dc8 100644
--- a/workbench/public/app.scss
+++ b/workbench/public/app.scss
@@ -104,7 +104,7 @@
 }
 
 .error-message {
-  color: red;
+  color: black;
 }
 
 .successful-message{
diff --git a/workbench/public/components/Main/main.test.tsx b/workbench/public/components/Main/main.test.tsx
index 12fc1e685e..80bc136c8a 100644
--- a/workbench/public/components/Main/main.test.tsx
+++ b/workbench/public/components/Main/main.test.tsx
@@ -19,16 +19,17 @@ import { render, fireEvent } from "@testing-library/react";
 import { httpClientMock } from "../../../test/mocks";
 import {
   mockQueryResultJDBCResponse,
-  mockNotOkQueryResultResponse,
-  mockQueryTranslationResponse
+  mockQueryTranslationResponse,
+  mockErrorMessageInResponse
 } from "../../../test/mocks/mockData";
 import Main from "./main";
 
 describe("<Main /> spec", () => {
+  const onChange = jest.fn();
 
   it("renders the component", () => {
     render(
-      <Main httpClient={httpClientMock} />
+      <Main httpClient={httpClientMock} onChange={onChange} />
     );
     expect(document.body.children[0]).toMatchSnapshot();
   });
@@ -38,7 +39,7 @@ describe("<Main /> spec", () => {
     client.post = jest.fn().mockResolvedValue(mockQueryResultJDBCResponse);
 
     const { getByText } = render(
-      <Main httpClient={client} sqlQueriesString={'test\ntest\ntest\ntest'} />
+      <Main httpClient={client} onChange={onChange} />
     );
     const onRunButton = getByText('Run');
     const asyncTest = () => {
@@ -50,10 +51,10 @@ describe("<Main /> spec", () => {
 
   it("click run button, and response causes an error", async () => {
     const client = httpClientMock;
-    client.post = jest.fn().mockRejectedValue('err');
+    client.post = jest.fn().mockRejectedValue("err");
 
     const { getByText } = render(
-      <Main httpClient={client} sqlQueriesString={'test'} />
+      <Main httpClient={client} onChange={onChange} />
     );
     const onRunButton = getByText('Run');
     const asyncTest = () => {
@@ -65,10 +66,10 @@ describe("<Main /> spec", () => {
 
   it("click run button, and response is not ok", async () => {
     const client = httpClientMock;
-    client.post = jest.fn().mockResolvedValue(mockNotOkQueryResultResponse);
+    client.post = jest.fn().mockResolvedValue(mockErrorMessageInResponse);
 
     const { getByText } = render(
-      <Main httpClient={client} sqlQueriesString={'test'} />
+      <Main httpClient={client} onChange={onChange} />
     );
     const onRunButton = getByText('Run');
     const asyncTest = () => {
@@ -82,7 +83,7 @@ describe("<Main /> spec", () => {
     const client = httpClientMock;
     client.post = jest.fn().mockResolvedValue(mockQueryTranslationResponse);
     const { getByText } = render(
-      <Main httpClient={client} sqlQueriesString={'test'} />
+      <Main httpClient={client} onChange={onChange} />
     );
     const onTranslateButton = getByText('Explain');
     const asyncTest = () => {
@@ -95,7 +96,7 @@ describe("<Main /> spec", () => {
   it("click clear button", async () => {
     const client = httpClientMock;
     const { getByText } = render(
-      <Main httpClient={client} sqlQueriesString={'test'} />
+      <Main httpClient={client} onChange={onChange} />
     );
     const onClearButton = getByText('Clear');
     const asyncTest = () => {
diff --git a/workbench/public/components/Main/main.tsx b/workbench/public/components/Main/main.tsx
index 96b0a85ce8..2482d81a8e 100644
--- a/workbench/public/components/Main/main.tsx
+++ b/workbench/public/components/Main/main.tsx
@@ -251,7 +251,8 @@ export class Main extends React.Component<MainProps, MainState> {
     };
   }
 
-  processQueryResponse(response: IHttpResponse<ResponseData>): ResponseDetail<string> {
+  processQueryResponse(response: any): ResponseDetail<string> {
+    console.log(response)
     if (!response) {
       return {
         fulfilled: false,
@@ -260,13 +261,17 @@ export class Main extends React.Component<MainProps, MainState> {
       }
     }
     if (!response.data.ok) {
+      // Error message in JSON format from backend is wrapped in response data
+      // response.data: IHttpResponse<ResponseData> 
+      const error: IHttpResponse<ResponseData> = response.data;
       return {
         fulfilled: false,
-        errorMessage: response.data.resp,
-        data: response.data.body,
+        errorMessage: error.data.resp,
+        data: error.data.body,
       };
     }
 
+    // response: IHttpResponse<ResponseData> 
     return {
       fulfilled: true,
       data: response.data.resp
@@ -337,8 +342,9 @@ export class Main extends React.Component<MainProps, MainState> {
       );
 
       Promise.all([responsePromise]).then(([response]) => {
+        console.log(responsePromise)
         const results: ResponseDetail<string>[] = response.map(response =>
-          this.processQueryResponse(response as IHttpResponse<ResponseData>));
+          this.processQueryResponse(response));
         const resultTable: ResponseDetail<QueryResult>[] = getQueryResultsForTable(results);
         this.setState(
           {
diff --git a/workbench/test/mocks/mockData.ts b/workbench/test/mocks/mockData.ts
index 7c16780345..ace3bfca45 100644
--- a/workbench/test/mocks/mockData.ts
+++ b/workbench/test/mocks/mockData.ts
@@ -2328,10 +2328,13 @@ export const mockQueryTranslationResponse =
   }
 };
 
-export const mockNotOkQueryResultResponse =
+export const mockErrorMessageInResponse =
 {
   "data": {
-    "ok": false,
-    "resp": ""
+    "data": {
+      "body": "{\"error\": {\"reason\": \"Error occurred\",\"details\": \"IndexNotFoundException\",\"type\": \"IndexNotFoundException\"},\"status\": 404}",
+      "ok": false,
+      "resp": "Bad Request"
+    }
   }
-};
+}

From 166d2795cccb1e418881297d76361c76944f6f9a Mon Sep 17 00:00:00 2001
From: chloe-zh <chloezh1102@gmail.com>
Date: Wed, 16 Dec 2020 13:13:06 -0800
Subject: [PATCH 2/3] update

---
 workbench/public/components/Main/main.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/workbench/public/components/Main/main.tsx b/workbench/public/components/Main/main.tsx
index 2482d81a8e..ef45f372f4 100644
--- a/workbench/public/components/Main/main.tsx
+++ b/workbench/public/components/Main/main.tsx
@@ -342,7 +342,6 @@ export class Main extends React.Component<MainProps, MainState> {
       );
 
       Promise.all([responsePromise]).then(([response]) => {
-        console.log(responsePromise)
         const results: ResponseDetail<string>[] = response.map(response =>
           this.processQueryResponse(response));
         const resultTable: ResponseDetail<QueryResult>[] = getQueryResultsForTable(results);

From ce958d2971edd9016e387ed125a95d5546a3d5ec Mon Sep 17 00:00:00 2001
From: chloe-zh <chloezh1102@gmail.com>
Date: Wed, 16 Dec 2020 13:28:19 -0800
Subject: [PATCH 3/3] removed redundant lines

---
 workbench/public/components/Main/main.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/workbench/public/components/Main/main.tsx b/workbench/public/components/Main/main.tsx
index ef45f372f4..59daf9dc99 100644
--- a/workbench/public/components/Main/main.tsx
+++ b/workbench/public/components/Main/main.tsx
@@ -252,7 +252,6 @@ export class Main extends React.Component<MainProps, MainState> {
   }
 
   processQueryResponse(response: any): ResponseDetail<string> {
-    console.log(response)
     if (!response) {
       return {
         fulfilled: false,