Skip to content

Commit

Permalink
Adding error message in Search Comparison Tool (#267)
Browse files Browse the repository at this point in the history 
* adding error message in search comparison tool

Signed-off-by: Sean Li <lnse@amazon.com>

* updating test snapshots

Signed-off-by: Sean Li <lnse@amazon.com>

* adding tests for query error

Signed-off-by: Sean Li <lnse@amazon.com>

* updating tests

Signed-off-by: Sean Li <lnse@amazon.com>

* refactoring QueryError, adding error message to result panel

Signed-off-by: Sean Li <lnse@amazon.com>

* moving helper text to helpText prop

Signed-off-by: Sean Li <lnse@amazon.com>

* adding tests and addressing comments

Signed-off-by: Sean Li <lnse@amazon.com>

* adding more tests, fixing state management, addressing comments

Signed-off-by: Sean Li <lnse@amazon.com>

* reverting changes to validateQuery, addressing comments

Signed-off-by: Sean Li <lnse@amazon.com>

---------

Signed-off-by: Sean Li <lnse@amazon.com>
  • Loading branch information
@sejli
sejli authored Oct 4, 2023
1 parent 26f1ea0 commit 6fb31c8
Show file tree
Hide file tree
Showing 16 changed files with 1,225 additions and 124 deletions.
114 changes: 74 additions & 40 deletions public/components/query_compare/search_result/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,14 +6,20 @@
import React, { useState } from 'react';
import { EuiPageContentBody } from '@elastic/eui';

import { CoreStart, ChromeBreadcrumb } from '../../../../../../src/core/public';
import { CoreStart } from '../../../../../../src/core/public';
import { SearchConfigsPanel } from './search_components/search_configs/search_configs';
import { SearchInputBar } from './search_components/search_bar';
import { ServiceEndpoints } from '../../../../common';
import { Header } from '../../common/header';
import { SearchResults, QueryError, QueryStringError, SelectIndexError } from '../../../types/index';
import {
SearchResults,
QueryError,
QueryStringError,
SelectIndexError,
initialQueryErrorState,
} from '../../../types/index';
import { ResultComponents } from './result_components/result_components';
import { useSearchRelevanceContext, initialQueryErrorState } from '../../../contexts';
import { useSearchRelevanceContext } from '../../../contexts';

const DEFAULT_QUERY = '{}';

Expand All @@ -26,19 +32,22 @@ export const SearchResult = ({ http }: SearchResultProps) => {
const [queryString2, setQueryString2] = useState(DEFAULT_QUERY);
const [queryResult1, setQueryResult1] = useState<SearchResults>({} as any);
const [queryResult2, setQueryResult2] = useState<SearchResults>({} as any);
const [queryError1, setQueryError1] = useState<QueryError>(initialQueryErrorState);
const [queryError2, setQueryError2] = useState<QueryError>(initialQueryErrorState);
const [searchBarValue, setSearchBarValue] = useState('');

const {
updateComparedResult1,
updateComparedResult2,
selectedIndex1,
selectedIndex2,
setQueryError1,
setQueryError2,
} = useSearchRelevanceContext();

const onClickSearch = () => {
const queryErrors = [{ ...initialQueryErrorState }, { ...initialQueryErrorState }];
const queryErrors = [
{ ...initialQueryErrorState, errorResponse: { ...initialQueryErrorState.errorResponse } },
{ ...initialQueryErrorState, errorResponse: { ...initialQueryErrorState.errorResponse } },
];
const jsonQueries = [{}, {}];

validateQuery(selectedIndex1, queryString1, queryErrors[0]);
Expand All @@ -47,7 +56,7 @@ export const SearchResult = ({ http }: SearchResultProps) => {
validateQuery(selectedIndex2, queryString2, queryErrors[1]);
jsonQueries[1] = rewriteQuery(searchBarValue, queryString2, queryErrors[1]);

handleQuery(jsonQueries, queryErrors);
handleSearch(jsonQueries, queryErrors);
};

const validateQuery = (selectedIndex: string, queryString: string, queryError: QueryError) => {
Expand All @@ -59,45 +68,58 @@ export const SearchResult = ({ http }: SearchResultProps) => {
// Check if query string is empty
if (!queryString.length) {
queryError.queryString = QueryStringError.empty;
queryError.errorResponse.statusCode = 400;
}
};

const rewriteQuery = (searchBarValue: string, queryString: string, queryError: QueryError) => {
const rewriteQuery = (value: string, queryString: string, queryError: QueryError) => {
if (queryString.trim().length > 0) {
try {
return JSON.parse(queryString.replace(/%SearchText%/g, searchBarValue));
return JSON.parse(queryString.replace(/%SearchText%/g, value));
} catch {
queryError.queryString = QueryStringError.invalid;
queryError.errorResponse.statusCode = 400;
}
}
};

const handleQuery = (jsonQueries: any, queryErrors: QueryError[]) => {
let requestBody = {};

// Handle query1
if (queryErrors[0].queryString.length || queryErrors[0].selectIndex.length) {
setQueryError1(queryErrors[0]);
setQueryResult1({} as any);
updateComparedResult1({} as any);
} else if (!queryErrors[0].queryString.length && !queryErrors[0].selectIndex.length) {
requestBody = {
query1: { index: selectedIndex1, ...jsonQueries[0] },
};
}

// Handle query2
if (queryErrors[1].queryString.length || queryErrors[1].selectIndex.length) {
setQueryError2(queryErrors[1]);
setQueryResult2({} as any);
updateComparedResult2({} as any);
} else if (!queryErrors[1].queryString.length && !queryErrors[1].selectIndex.length) {
requestBody = {
...requestBody,
query2: { index: selectedIndex2, ...jsonQueries[1] },
};
const handleQuery = (
queryError: QueryError,
selectedIndex: string,
jsonQuery: any,
updateComparedResult: (result: SearchResults) => void,
setQueryResult: React.Dispatch<React.SetStateAction<SearchResults>>,
setQueryError: React.Dispatch<React.SetStateAction<QueryError>>
) => {
if (queryError.queryString.length || queryError.selectIndex.length) {
setQueryError(queryError);
setQueryResult({} as any);
updateComparedResult({} as any);
} else if (!queryError.queryString.length && !queryError.selectIndex) {
setQueryError(initialQueryErrorState);
return { index: selectedIndex, ...jsonQuery };
}
};

const handleSearch = (jsonQueries: any, queryErrors: QueryError[]) => {
const requestBody = {
query1: handleQuery(
queryErrors[0],
selectedIndex1,
jsonQueries[0],
updateComparedResult1,
setQueryResult1,
setQueryError1
),
query2: handleQuery(
queryErrors[1],
selectedIndex2,
jsonQueries[1],
updateComparedResult2,
setQueryResult2,
setQueryError2
),
};
if (Object.keys(requestBody).length !== 0) {
http
.post(ServiceEndpoints.GetSearchResults, {
Expand All @@ -115,20 +137,23 @@ export const SearchResult = ({ http }: SearchResultProps) => {
}

if (res.errorMessage1) {
setQueryError1({
...queryErrors[0],
setQueryError1((error: QueryError) => ({
...error,
queryString: res.errorMessage1,
});
errorResponse: res.errorMessage1,
}));
}

if (res.errorMessage2) {
setQueryError2({
...queryErrors[1],
setQueryError2((error: QueryError) => ({
...error,
queryString: res.errorMessage2,
});
errorResponse: res.errorMessage2,
}));
}
})
.catch((error: Error) => {
// eslint-disable-next-line no-console
console.error(error);
});
}
Expand All @@ -149,8 +174,17 @@ export const SearchResult = ({ http }: SearchResultProps) => {
queryString2={queryString2}
setQueryString1={setQueryString1}
setQueryString2={setQueryString2}
queryError1={queryError1}
queryError2={queryError2}
setQueryError1={setQueryError1}
setQueryError2={setQueryError2}
/>
<ResultComponents
queryResult1={queryResult1}
queryResult2={queryResult2}
queryError1={queryError1}
queryError2={queryError2}
/>
<ResultComponents queryResult1={queryResult1} queryResult2={queryResult2} />
</EuiPageContentBody>
</>
);
Expand Down
60 changes: 60 additions & 0 deletions ...are/search_result/result_components/__test__/__snapshots__/result_component.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,26 @@
exports[`Result component Renders result component 1`] = `
<SearchRelevanceContextProvider>
<ResultComponents
queryError1={
Object {
"errorResponse": Object {
"body": "",
"statusCode": 200,
},
"queryString": "",
"selectIndex": "",
}
}
queryError2={
Object {
"errorResponse": Object {
"body": "",
"statusCode": 200,
},
"queryString": "",
"selectIndex": "",
}
}
queryResult1={
Object {
"_shards": Object {
Expand Down Expand Up @@ -385,6 +405,26 @@ exports[`Result component Renders result component 1`] = `
}
>
<ResultPanels
queryError1={
Object {
"errorResponse": Object {
"body": "",
"statusCode": 200,
},
"queryString": "",
"selectIndex": "",
}
}
queryError2={
Object {
"errorResponse": Object {
"body": "",
"statusCode": 200,
},
"queryString": "",
"selectIndex": "",
}
}
queryResult1={
Object {
"_shards": Object {
Expand Down Expand Up @@ -782,6 +822,16 @@ exports[`Result component Renders result component 1`] = `
className="euiPanel euiPanel--borderRadiusMedium euiPanel--plain euiPanel--noShadow euiPanel--noBorder euiPanel--flexGrowZero euiSplitPanel euiSplitPanel--row"
>
<ResultPanel
queryError={
Object {
"errorResponse": Object {
"body": "",
"statusCode": 200,
},
"queryString": "",
"selectIndex": "",
}
}
queryResult={
Object {
"_shards": Object {
Expand Down Expand Up @@ -3749,6 +3799,16 @@ exports[`Result component Renders result component 1`] = `
</_EuiSplitPanelInner>
</ResultPanel>
<ResultPanel
queryError={
Object {
"errorResponse": Object {
"body": "",
"statusCode": 200,
},
"queryString": "",
"selectIndex": "",
}
}
queryResult={
Object {
"_shards": Object {
Expand Down
Loading

0 comments on commit 6fb31c8

Please sign in to comment.