Skip to content
This repository has been archived by the owner on Aug 2, 2022. It is now read-only.

Fix workbench issue in backported 1.11 branch: error message cannot display #943

Merged
merged 4 commits into from
Dec 16, 2020
Merged

Fix workbench issue in backported 1.11 branch: error message cannot display #943

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
4585c69
fixed error message cannot display issue
chloe-zh Dec 16, 2020
c573b3c
Merge branch 'backport-7.9' into fix-error-msg
chloe-zh Dec 16, 2020
166d279
update
chloe-zh Dec 16, 2020
ce958d2
removed redundant lines
chloe-zh Dec 16, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion workbench/public/app.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -104,7 +104,7 @@
}

.error-message {
color: red;
color: black;
}

.successful-message{
Expand Down
21 changes: 11 additions & 10 deletions workbench/public/components/Main/main.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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();
});
Expand All @@ -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 = () => {
Expand All @@ -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 = () => {
Expand All @@ -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 = () => {
Expand All @@ -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 = () => {
Expand All @@ -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 = () => {
Expand Down
12 changes: 8 additions & 4 deletions workbench/public/components/Main/main.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -251,7 +251,7 @@ export class Main extends React.Component<MainProps, MainState> {
};
}

processQueryResponse(response: IHttpResponse<ResponseData>): ResponseDetail<string> {
processQueryResponse(response: any): ResponseDetail<string> {
if (!response) {
return {
fulfilled: false,
Expand All @@ -260,13 +260,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>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Do we need to leave these comments in?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes I added this comment here to remind us that the responses of success and error are of different types

return {
fulfilled: true,
data: response.data.resp
Expand Down Expand Up @@ -338,7 +342,7 @@ export class Main extends React.Component<MainProps, MainState> {

Promise.all([responsePromise]).then(([response]) => {
const results: ResponseDetail<string>[] = response.map(response =>
this.processQueryResponse(response as IHttpResponse<ResponseData>));
this.processQueryResponse(response));
const resultTable: ResponseDetail<QueryResult>[] = getQueryResultsForTable(results);
this.setState(
{
Expand Down
11 changes: 7 additions & 4 deletions workbench/test/mocks/mockData.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
}
}
};
}