From 612cad7b3fcc188b74b1dd41bc537a24dc82887f Mon Sep 17 00:00:00 2001 From: Sean Li Date: Mon, 28 Aug 2023 13:57:33 -0700 Subject: [PATCH 1/9] adding error message in search comparison tool Signed-off-by: Sean Li --- .../result_components/result_components.tsx | 8 +++++--- .../result_components/result_panel.tsx | 16 +++++++++++++--- public/types/index.ts | 2 +- 3 files changed, 19 insertions(+), 7 deletions(-) diff --git a/public/components/query_compare/search_result/result_components/result_components.tsx b/public/components/query_compare/search_result/result_components/result_components.tsx index 02e1560..a01852b 100644 --- a/public/components/query_compare/search_result/result_components/result_components.tsx +++ b/public/components/query_compare/search_result/result_components/result_components.tsx @@ -6,10 +6,11 @@ import React, { useEffect, useState } from 'react'; import { EuiSplitPanel, EuiTitle, EuiFlexGroup, EuiPanel } from '@elastic/eui'; -import { SearchResults } from '../../../../types/index'; +import { QueryError, SearchResults } from '../../../../types/index'; import { ResultPanel } from './result_panel'; import './result_components.scss'; +import { useSearchRelevanceContext } from '../../../../contexts'; interface ResultComponentsProps { queryResult1: SearchResults; @@ -34,10 +35,11 @@ const InitialState = () => { }; const ResultPanels = ({ queryResult1, queryResult2 }: ResultComponentsProps) => { + const { queryError1, queryError2 } = useSearchRelevanceContext(); return ( - - + + ); }; diff --git a/public/components/query_compare/search_result/result_components/result_panel.tsx b/public/components/query_compare/search_result/result_components/result_panel.tsx index 49260da..f4f0c0e 100644 --- a/public/components/query_compare/search_result/result_components/result_panel.tsx +++ b/public/components/query_compare/search_result/result_components/result_panel.tsx @@ -14,7 +14,7 @@ import { } from '@elastic/eui'; import { ResultGridComponent } from './result_grid'; -import { SearchResults } from '../../../../types/index'; +import { QueryError, SearchResults } from '../../../../types/index'; import { useSearchRelevanceContext } from '../../../../contexts'; import './result_components.scss'; @@ -22,11 +22,19 @@ import './result_components.scss'; interface ResultPanelProps { resultNumber: number; queryResult: SearchResults; + queryError: QueryError; } -export const ResultPanel = ({ resultNumber, queryResult }: ResultPanelProps) => { +export const ResultPanel = ({ resultNumber, queryResult, queryError }: ResultPanelProps) => { const { comparedResult1, comparedResult2 } = useSearchRelevanceContext(); + const errorMessage = ( + <> + + Query Error + + ); + const getComparedDocumentsRank = () => { return resultNumber === 1 ? comparedResult2 : comparedResult1; }; @@ -47,7 +55,9 @@ export const ResultPanel = ({ resultNumber, queryResult }: ResultPanelProps) => - {queryResult?.hits?.hits?.length ? ( + {typeof queryError.queryString !== 'string' && queryError.queryString?.statusCode !== 200 ? ( + errorMessage + ) : queryResult?.hits?.hits?.length ? ( Date: Mon, 28 Aug 2023 14:14:52 -0700 Subject: [PATCH 2/9] updating test snapshots Signed-off-by: Sean Li --- .../__snapshots__/result_component.test.tsx.snap | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/public/components/query_compare/search_result/result_components/__test__/__snapshots__/result_component.test.tsx.snap b/public/components/query_compare/search_result/result_components/__test__/__snapshots__/result_component.test.tsx.snap index a18eaa5..1fdbc00 100644 --- a/public/components/query_compare/search_result/result_components/__test__/__snapshots__/result_component.test.tsx.snap +++ b/public/components/query_compare/search_result/result_components/__test__/__snapshots__/result_component.test.tsx.snap @@ -782,6 +782,12 @@ exports[`Result component Renders result component 1`] = ` className="euiPanel euiPanel--borderRadiusMedium euiPanel--plain euiPanel--noShadow euiPanel--noBorder euiPanel--flexGrowZero euiSplitPanel euiSplitPanel--row" > Date: Mon, 28 Aug 2023 16:23:14 -0700 Subject: [PATCH 3/9] adding tests for query error Signed-off-by: Sean Li --- .../__snapshots__/result_grid.test.tsx.snap | 3000 +++++++++++++++++ .../__test__/result_grid.test.tsx | 23 + test/constants.ts | 9 + 3 files changed, 3032 insertions(+) diff --git a/public/components/query_compare/search_result/result_components/__test__/__snapshots__/result_grid.test.tsx.snap b/public/components/query_compare/search_result/result_components/__test__/__snapshots__/result_grid.test.tsx.snap index 204ce7b..1b46fdc 100644 --- a/public/components/query_compare/search_result/result_components/__test__/__snapshots__/result_grid.test.tsx.snap +++ b/public/components/query_compare/search_result/result_components/__test__/__snapshots__/result_grid.test.tsx.snap @@ -2467,3 +2467,3003 @@ exports[`Result grid component Renders result grid component 1`] = ` `; + +exports[`Result panel query error Displays error message on query error 1`] = ` + + + <_EuiSplitPanelInner + className="search-relevance-result-panel" + > + +
+ +
+ +
+ +

+ Result 1 +

+ +
+ + +
+ +

+ 10 + results +

+ +
+ +
+ + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ +
+ +
+ +

+ 1 +

+ +
+ + +
+ +
+ + Not applicable + + + + Not in + + Results + 2 + + + } + size="m" + type="questionInCircle" + > + + Not in + + Results + 2 + + + } + delay="regular" + position="top" + > + + + + + + + + + + + +
+ +
+ +
+ + 		+
+ +
+
+ arr: +
+
+ + ["el1","el2","el3"] + + +
+
+ id: +
+
+ + 3920564 + + +
+
+ name: +
+
+ + 006R90321 + + +
+
+ title: +
+
+ + Xerox 006R90321 toner cartridge Original Black 6 pc(s) + + +
+
+ short_description: +
+
+ + Toner (6 Per Box) for CopyCentre C65 Digital Copier + + +
+
+ img_500x500: +
+
+ + http://images.icecat.biz/img/gallery_mediums/img_3920564_medium_1472618727_1445_7091.jpg + + +
+
+ date_released: +
+
+ + 2009-12-10T00:00:00Z + + +
+
+ supplier: +
+
+ + Xerox + + +
+
+ price: +
+
+ + 4995 + + +
+
+ +
+
+ +
+ +
+ +

+ 2 +

+ +
+ + +
+ +
+ + Not applicable + + + + Not in + + Results + 2 + + + } + size="m" + type="questionInCircle" + > + + Not in + + Results + 2 + + + } + delay="regular" + position="top" + > + + + + + + + + + + + +
+ +
+ +
+ + 		+
+ +
+
+ nestObj: +
+
+ + {"key1":[1,true,null],"key2":{"key21":"element"}} + + +
+
+ id: +
+
+ + 2101957 + + +
+
+ name: +
+
+ + dv7-1211ea + + +
+
+ title: +
+
+ + HP Pavilion dv7-1211ea Notebook Silver 43.2 cm (17") 1440 x 900 pixels Intel® Core™2 Duo 4 GB DDR2-SDRAM 250 GB HDD NVIDIA® GeForce® 9200M GS Windows Vista Home Premium + + +
+
+ short_description: +
+
+ + Intel Core 2 Duo Processor P7450 (3M Cache, 2.13 GHz, 1066 MHz FSB), 4GB DDR2, 250GB SATA HDD, 17" WXGA+ HD BrightView 1440 x 900, nVidia GeForce 9200M GS, DVD Super Multi DL, Gigabit Ethernet, WLAN 802.11 b/g, WebCam, Windows Vista Home Premium 32-bit + + +
+
+ img_500x500: +
+
+ + http://images.icecat.biz/img/gallery_mediums/2101957_8011415648.jpg + + +
+
+ date_released: +
+
+ + 2008-12-19T00:00:00Z + + +
+
+ supplier: +
+
+ + HP + + +
+
+ price: +
+
+ + 10995 + + +
+
+ attr_t_product_colour: +
+
+ + Silver + + +
+
+ +
+
+ +
+ +
+ +

+ 3 +

+ +
+ + +
+ +
+ + Not applicable + + + + Not in + + Results + 2 + + + } + size="m" + type="questionInCircle" + > + + Not in + + Results + 2 + + + } + delay="regular" + position="top" + > + + + + + + + + + + + +
+ +
+ +
+ + 		+
+ +
+
+ id: +
+
+ + 1128895 + + +
+
+ name: +
+
+ + DB9 RS232 Serial Null Modem Adapter - M/F + + +
+
+ title: +
+
+ + StarTech.com DB9 RS232 Serial Null Modem Adapter - M/F + + +
+
+ short_description: +
+
+ + StarTech.com DB9 RS232 Serial Null Modem Adapter - M/F + + +
+
+ img_500x500: +
+
+ + http://images.icecat.biz/img/gallery_mediums/1128895_4034494654.jpg + + +
+
+ date_released: +
+
+ + 2007-08-09T00:00:00Z + + +
+
+ supplier: +
+
+ + StarTech.com + + +
+
+ price: +
+
+ + 595 + + +
+
+ attr_t_product_colour: +
+
+ + Grey + + +
+
+ +
+
+ +
+ +
+ +

+ 4 +

+ +
+ + +
+ +
+ + Not applicable + + + + Not in + + Results + 2 + + + } + size="m" + type="questionInCircle" + > + + Not in + + Results + 2 + + + } + delay="regular" + position="top" + > + + + + + + + + + + + +
+ +
+ +
+ + 		+
+ +
+
+ id: +
+
+ + 1449722 + + +
+
+ name: +
+
+ + ProCurve 420 Wireless Access Point + + +
+
+ title: +
+
+ + HP ProCurve 420 Wireless Access Point + + +
+
+ short_description: +
+
+ + Refurbished A FULL-FEATURED IEEE 802.11G SINGLE-RADIO ACCESS POINT IDEALLY + + +
+
+ img_500x500: +
+
+ + http://images.icecat.biz/img/gallery_mediums/img_1449722_medium_1480997766_6498_5955.jpg + + +
+
+ date_released: +
+
+ + 2008-03-07T00:00:00Z + + +
+
+ supplier: +
+
+ + HP + + +
+
+ price: +
+
+ + 9495 + + +
+
+ +
+
+ +
+ +
+ +

+ 5 +

+ +
+ + +
+ +
+ + Not applicable + + + + Not in + + Results + 2 + + + } + size="m" + type="questionInCircle" + > + + Not in + + Results + 2 + + + } + delay="regular" + position="top" + > + + + + + + + + + + + +
+ +
+ +
+ + 		+
+ +
+
+ id: +
+
+ + 1625640 + + +
+
+ name: +
+
+ + 2GB SD Card + + +
+
+ title: +
+
+ + Integral 2GB SD Card memory card + + +
+
+ short_description: +
+
+ + 2GB SD Card + + +
+
+ img_500x500: +
+
+ + http://images.icecat.biz/img/gallery_mediums/img_1625640_medium_1480990774_7102_6217.jpg + + +
+
+ date_released: +
+
+ + 2008-06-23T00:00:00Z + + +
+
+ supplier: +
+
+ + Integral + + +
+
+ price: +
+
+ + 1195 + + +
+
+ +
+
+ +
+ +
+ +

+ 6 +

+ +
+ + +
+ +
+ + Not applicable + + + + Not in + + Results + 2 + + + } + size="m" + type="questionInCircle" + > + + Not in + + Results + 2 + + + } + delay="regular" + position="top" + > + + + + + + + + + + + +
+ +
+ +
+ + 		+
+ +
+
+ id: +
+
+ + 2067378 + + +
+
+ name: +
+
+ + LC51C + + +
+
+ title: +
+
+ + Brother LC51C Original Cyan + + +
+
+ short_description: +
+
+ + LC51C + + +
+
+ img_500x500: +
+
+ + http://images.icecat.biz/img/gallery_mediums/img_2067378_medium_1481020819_0464_12184.jpg + + +
+
+ date_released: +
+
+ + 2009-04-08T00:00:00Z + + +
+
+ supplier: +
+
+ + Brother + + +
+
+ price: +
+
+ + 1795 + + +
+
+ +
+
+ +
+ +
+ +

+ 7 +

+ +
+ + +
+ +
+ + Not applicable + + + + Not in + + Results + 2 + + + } + size="m" + type="questionInCircle" + > + + Not in + + Results + 2 + + + } + delay="regular" + position="top" + > + + + + + + + + + + + +
+ +
+ +
+ + 		+
+ +
+
+ id: +
+
+ + 636678 + + +
+
+ name: +
+
+ + Emergency Power Off (EPO) + + +
+
+ title: +
+
+ + APC Emergency Power Off (EPO) + + +
+
+ short_description: +
+
+ + Emergency Power Off (EPO) + + +
+
+ img_500x500: +
+
+ + http://images.icecat.biz/img/gallery_mediums/img_636678_medium_1480944064_4778_26509.jpg + + +
+
+ date_released: +
+
+ + 2006-11-15T00:00:00Z + + +
+
+ supplier: +
+
+ + APC + + +
+
+ price: +
+
+ + 69195 + + +
+
+ attr_t_product_colour: +
+
+ + Black + + +
+
+ +
+
+ +
+ +
+ +

+ 8 +

+ +
+ + +
+ +
+ + Not applicable + + + + Not in + + Results + 2 + + + } + size="m" + type="questionInCircle" + > + + Not in + + Results + 2 + + + } + delay="regular" + position="top" + > + + + + + + + + + + + +
+ +
+ +
+ + 		+
+ +
+
+ id: +
+
+ + 1570809 + + +
+
+ name: +
+
+ + IT Power Distribution Module 3 Pole 5 Wire 32A IEC309 620cm + + +
+
+ title: +
+
+ + APC IT Power Distribution Module 3 Pole 5 Wire 32A IEC309 620cm power distribution unit (PDU) + + +
+
+ short_description: +
+
+ + IT Power Distribution Module 3 Pole 5 Wire 32A IEC309 620cm + + +
+
+ img_500x500: +
+
+ + http://images.icecat.biz/img/gallery_mediums/img_1570809_medium_1480983343_7059_6217.jpg + + +
+
+ date_released: +
+
+ + 2008-04-11T00:00:00Z + + +
+
+ supplier: +
+
+ + APC + + +
+
+ price: +
+
+ + 53895 + + +
+
+ +
+
+ +
+ +
+ +

+ 9 +

+ +
+ + +
+ +
+ + Not applicable + + + + Not in + + Results + 2 + + + } + size="m" + type="questionInCircle" + > + + Not in + + Results + 2 + + + } + delay="regular" + position="top" + > + + + + + + + + + + + +
+ +
+ +
+ + 		+
+ +
+
+ id: +
+
+ + 148843 + + +
+
+ name: +
+
+ + Labels Premium A4 64.6x33.8 mm white paper matt 2400 pcs. + + +
+
+ title: +
+
+ + HERMA Labels Premium A4 64.6x33.8 mm white paper matt 2400 pcs. + + +
+
+ short_description: +
+
+ + Labels Premium A4 64.6x33.8 mm white paper matt 2400 pcs. + + +
+
+ img_500x500: +
+
+ + http://images.icecat.biz/img/gallery_mediums/148843_2449.jpg + + +
+
+ date_released: +
+
+ + 2005-07-15T00:00:00Z + + +
+
+ supplier: +
+
+ + HERMA + + +
+
+ price: +
+
+ + 3795 + + +
+
+ attr_t_product_colour: +
+
+ + White + + +
+
+ +
+
+ +
+ +
+ +

+ 10 +

+ +
+ + +
+ +
+ + Not applicable + + + + Not in + + Results + 2 + + + } + size="m" + type="questionInCircle" + > + + Not in + + Results + 2 + + + } + delay="regular" + position="top" + > + + + + + + + + + + + +
+ +
+ +
+ + 		+
+ +
+
+ id: +
+
+ + 968447 + + +
+
+ name: +
+
+ + Cyan Toner Cartridge for C7100/C7300/C7500 Series 'Type C4' + + +
+
+ title: +
+
+ + OKI Cyan Toner Cartridge for C7100/C7300/C7500 Series 'Type C4' Original + + +
+
+ short_description: +
+
+ + Cyan Toner Cartridge for C7100/C7300/C7500 Series 'Type C4' + + +
+
+ img_500x500: +
+
+ + http://images.icecat.biz/img/gallery_mediums/img_968447_medium_1480985748_8727_5647.jpg + + +
+
+ date_released: +
+
+ + 2007-08-09T00:00:00Z + + +
+
+ supplier: +
+
+ + OKI + + +
+
+ price: +
+
+ + 20395 + + +
+
+ +
+
+
+ +
+ + + + +`; diff --git a/public/components/query_compare/search_result/result_components/__test__/result_grid.test.tsx b/public/components/query_compare/search_result/result_components/__test__/result_grid.test.tsx index 4a8b689..86008af 100644 --- a/public/components/query_compare/search_result/result_components/__test__/result_grid.test.tsx +++ b/public/components/query_compare/search_result/result_components/__test__/result_grid.test.tsx @@ -11,8 +11,10 @@ import { ResultGridComponent } from '../result_grid'; import { TEST_QUERY_RESPONSE, TEST_COMPARED_DOCUMENTS_RANK, + TEST_QUERY_ERROR, } from '../../../../../../test/constants'; import { SearchRelevanceContextProvider } from '../../../../../contexts'; +import { ResultPanel } from '../result_panel'; describe('Result grid component', () => { configure({ adapter: new Adapter() }); @@ -34,3 +36,24 @@ describe('Result grid component', () => { }); }); }); + +describe('Result panel query error', () => { + configure({ adapter: new Adapter() }); + it('Displays error message on query error', async () => { + const wrapper = mount( + + + + ); + + wrapper.update(); + + await waitFor(() => { + expect(wrapper).toMatchSnapshot(); + }); + }); +}); diff --git a/test/constants.ts b/test/constants.ts index 80e7126..1cafce1 100644 --- a/test/constants.ts +++ b/test/constants.ts @@ -3,6 +3,8 @@ * SPDX-License-Identifier: Apache-2.0 */ +import { QueryError } from '../public/types'; + export const TEST_SEARCH_TEXT = 'basic'; export const TEST_QUERY_RESPONSE = { @@ -200,3 +202,10 @@ export const TEST_COMPARED_DOCUMENTS_RANK = { }; export const TEST_QUERY_STRING = '{}'; + +export const TEST_QUERY_ERROR: QueryError = { + selectIndex: '', + queryString: 'error', + statusCode: 400, + body: 'Error: parsing_exception - Unknown key for a VALUE_STRING in [this].', +}; From e99ce992151dfedd7221961fcd7da42fb6cef48c Mon Sep 17 00:00:00 2001 From: Sean Li Date: Mon, 28 Aug 2023 16:47:45 -0700 Subject: [PATCH 4/9] updating tests Signed-off-by: Sean Li --- .../__snapshots__/result_grid.test.tsx.snap | 2728 +---------------- test/constants.ts | 2 +- 2 files changed, 12 insertions(+), 2718 deletions(-) diff --git a/public/components/query_compare/search_result/result_components/__test__/__snapshots__/result_grid.test.tsx.snap b/public/components/query_compare/search_result/result_components/__test__/__snapshots__/result_grid.test.tsx.snap index 1b46fdc..d19effc 100644 --- a/public/components/query_compare/search_result/result_components/__test__/__snapshots__/result_grid.test.tsx.snap +++ b/public/components/query_compare/search_result/result_components/__test__/__snapshots__/result_grid.test.tsx.snap @@ -2474,7 +2474,7 @@ exports[`Result panel query error Displays error message on query error 1`] = ` queryError={ Object { "body": "Error: parsing_exception - Unknown key for a VALUE_STRING in [this].", - "queryString": "error", + "queryString": 1, "selectIndex": "", "statusCode": 400, } @@ -2741,2726 +2741,20 @@ exports[`Result panel query error Displays error message on query error 1`] = ` - +
+ +
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- -
- -
- -

- 1 -

- -
- - -
- -
- - Not applicable - - - - Not in - - Results - 2 - - - } - size="m" - type="questionInCircle" - > - - Not in - - Results - 2 - - - } - delay="regular" - position="top" - > - - - - - - - - - - - -
- -
- -
- - 		-
- -
-
- arr: -
-
- - ["el1","el2","el3"] - - -
-
- id: -
-
- - 3920564 - - -
-
- name: -
-
- - 006R90321 - - -
-
- title: -
-
- - Xerox 006R90321 toner cartridge Original Black 6 pc(s) - - -
-
- short_description: -
-
- - Toner (6 Per Box) for CopyCentre C65 Digital Copier - - -
-
- img_500x500: -
-
- - http://images.icecat.biz/img/gallery_mediums/img_3920564_medium_1472618727_1445_7091.jpg - - -
-
- date_released: -
-
- - 2009-12-10T00:00:00Z - - -
-
- supplier: -
-
- - Xerox - - -
-
- price: -
-
- - 4995 - - -
-
- -
-
- -
- -
- -

- 2 -

- -
- - -
- -
- - Not applicable - - - - Not in - - Results - 2 - - - } - size="m" - type="questionInCircle" - > - - Not in - - Results - 2 - - - } - delay="regular" - position="top" - > - - - - - - - - - - - -
- -
- -
- - 		-
- -
-
- nestObj: -
-
- - {"key1":[1,true,null],"key2":{"key21":"element"}} - - -
-
- id: -
-
- - 2101957 - - -
-
- name: -
-
- - dv7-1211ea - - -
-
- title: -
-
- - HP Pavilion dv7-1211ea Notebook Silver 43.2 cm (17") 1440 x 900 pixels Intel® Core™2 Duo 4 GB DDR2-SDRAM 250 GB HDD NVIDIA® GeForce® 9200M GS Windows Vista Home Premium - - -
-
- short_description: -
-
- - Intel Core 2 Duo Processor P7450 (3M Cache, 2.13 GHz, 1066 MHz FSB), 4GB DDR2, 250GB SATA HDD, 17" WXGA+ HD BrightView 1440 x 900, nVidia GeForce 9200M GS, DVD Super Multi DL, Gigabit Ethernet, WLAN 802.11 b/g, WebCam, Windows Vista Home Premium 32-bit - - -
-
- img_500x500: -
-
- - http://images.icecat.biz/img/gallery_mediums/2101957_8011415648.jpg - - -
-
- date_released: -
-
- - 2008-12-19T00:00:00Z - - -
-
- supplier: -
-
- - HP - - -
-
- price: -
-
- - 10995 - - -
-
- attr_t_product_colour: -
-
- - Silver - - -
-
- -
-
- -
- -
- -

- 3 -

- -
- - -
- -
- - Not applicable - - - - Not in - - Results - 2 - - - } - size="m" - type="questionInCircle" - > - - Not in - - Results - 2 - - - } - delay="regular" - position="top" - > - - - - - - - - - - - -
- -
- -
- - 		-
- -
-
- id: -
-
- - 1128895 - - -
-
- name: -
-
- - DB9 RS232 Serial Null Modem Adapter - M/F - - -
-
- title: -
-
- - StarTech.com DB9 RS232 Serial Null Modem Adapter - M/F - - -
-
- short_description: -
-
- - StarTech.com DB9 RS232 Serial Null Modem Adapter - M/F - - -
-
- img_500x500: -
-
- - http://images.icecat.biz/img/gallery_mediums/1128895_4034494654.jpg - - -
-
- date_released: -
-
- - 2007-08-09T00:00:00Z - - -
-
- supplier: -
-
- - StarTech.com - - -
-
- price: -
-
- - 595 - - -
-
- attr_t_product_colour: -
-
- - Grey - - -
-
- -
-
- -
- -
- -

- 4 -

- -
- - -
- -
- - Not applicable - - - - Not in - - Results - 2 - - - } - size="m" - type="questionInCircle" - > - - Not in - - Results - 2 - - - } - delay="regular" - position="top" - > - - - - - - - - - - - -
- -
- -
- - 		-
- -
-
- id: -
-
- - 1449722 - - -
-
- name: -
-
- - ProCurve 420 Wireless Access Point - - -
-
- title: -
-
- - HP ProCurve 420 Wireless Access Point - - -
-
- short_description: -
-
- - Refurbished A FULL-FEATURED IEEE 802.11G SINGLE-RADIO ACCESS POINT IDEALLY - - -
-
- img_500x500: -
-
- - http://images.icecat.biz/img/gallery_mediums/img_1449722_medium_1480997766_6498_5955.jpg - - -
-
- date_released: -
-
- - 2008-03-07T00:00:00Z - - -
-
- supplier: -
-
- - HP - - -
-
- price: -
-
- - 9495 - - -
-
- -
-
- -
- -
- -

- 5 -

- -
- - -
- -
- - Not applicable - - - - Not in - - Results - 2 - - - } - size="m" - type="questionInCircle" - > - - Not in - - Results - 2 - - - } - delay="regular" - position="top" - > - - - - - - - - - - - -
- -
- -
- - 		-
- -
-
- id: -
-
- - 1625640 - - -
-
- name: -
-
- - 2GB SD Card - - -
-
- title: -
-
- - Integral 2GB SD Card memory card - - -
-
- short_description: -
-
- - 2GB SD Card - - -
-
- img_500x500: -
-
- - http://images.icecat.biz/img/gallery_mediums/img_1625640_medium_1480990774_7102_6217.jpg - - -
-
- date_released: -
-
- - 2008-06-23T00:00:00Z - - -
-
- supplier: -
-
- - Integral - - -
-
- price: -
-
- - 1195 - - -
-
- -
-
- -
- -
- -

- 6 -

- -
- - -
- -
- - Not applicable - - - - Not in - - Results - 2 - - - } - size="m" - type="questionInCircle" - > - - Not in - - Results - 2 - - - } - delay="regular" - position="top" - > - - - - - - - - - - - -
- -
- -
- - 		-
- -
-
- id: -
-
- - 2067378 - - -
-
- name: -
-
- - LC51C - - -
-
- title: -
-
- - Brother LC51C Original Cyan - - -
-
- short_description: -
-
- - LC51C - - -
-
- img_500x500: -
-
- - http://images.icecat.biz/img/gallery_mediums/img_2067378_medium_1481020819_0464_12184.jpg - - -
-
- date_released: -
-
- - 2009-04-08T00:00:00Z - - -
-
- supplier: -
-
- - Brother - - -
-
- price: -
-
- - 1795 - - -
-
- -
-
- -
- -
- -

- 7 -

- -
- - -
- -
- - Not applicable - - - - Not in - - Results - 2 - - - } - size="m" - type="questionInCircle" - > - - Not in - - Results - 2 - - - } - delay="regular" - position="top" - > - - - - - - - - - - - -
- -
- -
- - 		-
- -
-
- id: -
-
- - 636678 - - -
-
- name: -
-
- - Emergency Power Off (EPO) - - -
-
- title: -
-
- - APC Emergency Power Off (EPO) - - -
-
- short_description: -
-
- - Emergency Power Off (EPO) - - -
-
- img_500x500: -
-
- - http://images.icecat.biz/img/gallery_mediums/img_636678_medium_1480944064_4778_26509.jpg - - -
-
- date_released: -
-
- - 2006-11-15T00:00:00Z - - -
-
- supplier: -
-
- - APC - - -
-
- price: -
-
- - 69195 - - -
-
- attr_t_product_colour: -
-
- - Black - - -
-
- -
-
- -
- -
- -

- 8 -

- -
- - -
- -
- - Not applicable - - - - Not in - - Results - 2 - - - } - size="m" - type="questionInCircle" - > - - Not in - - Results - 2 - - - } - delay="regular" - position="top" - > - - - - - - - - - - - -
- -
- -
- - 		-
- -
-
- id: -
-
- - 1570809 - - -
-
- name: -
-
- - IT Power Distribution Module 3 Pole 5 Wire 32A IEC309 620cm - - -
-
- title: -
-
- - APC IT Power Distribution Module 3 Pole 5 Wire 32A IEC309 620cm power distribution unit (PDU) - - -
-
- short_description: -
-
- - IT Power Distribution Module 3 Pole 5 Wire 32A IEC309 620cm - - -
-
- img_500x500: -
-
- - http://images.icecat.biz/img/gallery_mediums/img_1570809_medium_1480983343_7059_6217.jpg - - -
-
- date_released: -
-
- - 2008-04-11T00:00:00Z - - -
-
- supplier: -
-
- - APC - - -
-
- price: -
-
- - 53895 - - -
-
- -
-
- -
- -
- -

- 9 -

- -
- - -
- -
- - Not applicable - - - - Not in - - Results - 2 - - - } - size="m" - type="questionInCircle" - > - - Not in - - Results - 2 - - - } - delay="regular" - position="top" - > - - - - - - - - - - - -
- -
- -
- - 		-
- -
-
- id: -
-
- - 148843 - - -
-
- name: -
-
- - Labels Premium A4 64.6x33.8 mm white paper matt 2400 pcs. - - -
-
- title: -
-
- - HERMA Labels Premium A4 64.6x33.8 mm white paper matt 2400 pcs. - - -
-
- short_description: -
-
- - Labels Premium A4 64.6x33.8 mm white paper matt 2400 pcs. - - -
-
- img_500x500: -
-
- - http://images.icecat.biz/img/gallery_mediums/148843_2449.jpg - - -
-
- date_released: -
-
- - 2005-07-15T00:00:00Z - - -
-
- supplier: -
-
- - HERMA - - -
-
- price: -
-
- - 3795 - - -
-
- attr_t_product_colour: -
-
- - White - - -
-
- -
-
- -
- -
- -

- 10 -

- -
- - -
- -
- - Not applicable - - - - Not in - - Results - 2 - - - } - size="m" - type="questionInCircle" - > - - Not in - - Results - 2 - - - } - delay="regular" - position="top" - > - - - - - - - - - - - -
- -
- -
- - 		-
- -
-
- id: -
-
- - 968447 - - -
-
- name: -
-
- - Cyan Toner Cartridge for C7100/C7300/C7500 Series 'Type C4' - - -
-
- title: -
-
- - OKI Cyan Toner Cartridge for C7100/C7300/C7500 Series 'Type C4' Original - - -
-
- short_description: -
-
- - Cyan Toner Cartridge for C7100/C7300/C7500 Series 'Type C4' - - -
-
- img_500x500: -
-
- - http://images.icecat.biz/img/gallery_mediums/img_968447_medium_1480985748_8727_5647.jpg - - -
-
- date_released: -
-
- - 2007-08-09T00:00:00Z - - -
-
- supplier: -
-
- - OKI - - -
-
- price: -
-
- - 20395 - - -
-
- -
-
+ Query Error
- + diff --git a/test/constants.ts b/test/constants.ts index 1cafce1..4fd484d 100644 --- a/test/constants.ts +++ b/test/constants.ts @@ -205,7 +205,7 @@ export const TEST_QUERY_STRING = '{}'; export const TEST_QUERY_ERROR: QueryError = { selectIndex: '', - queryString: 'error', + queryString: 1, statusCode: 400, body: 'Error: parsing_exception - Unknown key for a VALUE_STRING in [this].', }; From d5cc342fade6a995eb001e22f780a3ef65e6a337 Mon Sep 17 00:00:00 2001 From: Sean Li Date: Wed, 13 Sep 2023 09:57:22 -0700 Subject: [PATCH 5/9] refactoring QueryError, adding error message to result panel Signed-off-by: Sean Li --- .../query_compare/search_result/index.tsx | 28 +++++++++-- .../result_component.test.tsx.snap | 48 +++++++++++++++++++ .../__snapshots__/result_grid.test.tsx.snap | 41 ++++++++++++++-- .../__test__/result_component.test.tsx | 9 +++- .../result_components/result_components.tsx | 25 ++++++++-- .../result_components/result_panel.tsx | 9 ++-- .../search_configs.test.tsx.snap | 30 ++++++++++++ .../__tests__/search_configs.test.tsx | 6 ++- .../search_configs/search_config.tsx | 24 +++++----- .../search_configs/search_configs.tsx | 13 +++-- public/contexts/index.tsx | 14 ++---- public/types/index.ts | 6 +++ test/constants.ts | 10 ++-- 13 files changed, 211 insertions(+), 52 deletions(-) diff --git a/public/components/query_compare/search_result/index.tsx b/public/components/query_compare/search_result/index.tsx index d5573b8..0be1ddd 100644 --- a/public/components/query_compare/search_result/index.tsx +++ b/public/components/query_compare/search_result/index.tsx @@ -6,12 +6,17 @@ 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, +} from '../../../types/index'; import { ResultComponents } from './result_components/result_components'; import { useSearchRelevanceContext, initialQueryErrorState } from '../../../contexts'; @@ -26,6 +31,8 @@ export const SearchResult = ({ http }: SearchResultProps) => { const [queryString2, setQueryString2] = useState(DEFAULT_QUERY); const [queryResult1, setQueryResult1] = useState({} as any); const [queryResult2, setQueryResult2] = useState({} as any); + const [queryError1, setQueryError1] = useState(initialQueryErrorState); + const [queryError2, setQueryError2] = useState(initialQueryErrorState); const [searchBarValue, setSearchBarValue] = useState(''); const { @@ -33,8 +40,6 @@ export const SearchResult = ({ http }: SearchResultProps) => { updateComparedResult2, selectedIndex1, selectedIndex2, - setQueryError1, - setQueryError2, } = useSearchRelevanceContext(); const onClickSearch = () => { @@ -81,6 +86,7 @@ export const SearchResult = ({ http }: SearchResultProps) => { setQueryResult1({} as any); updateComparedResult1({} as any); } else if (!queryErrors[0].queryString.length && !queryErrors[0].selectIndex.length) { + setQueryError1(initialQueryErrorState); requestBody = { query1: { index: selectedIndex1, ...jsonQueries[0] }, }; @@ -92,6 +98,7 @@ export const SearchResult = ({ http }: SearchResultProps) => { setQueryResult2({} as any); updateComparedResult2({} as any); } else if (!queryErrors[1].queryString.length && !queryErrors[1].selectIndex.length) { + setQueryError2(initialQueryErrorState); requestBody = { ...requestBody, query2: { index: selectedIndex2, ...jsonQueries[1] }, @@ -118,6 +125,7 @@ export const SearchResult = ({ http }: SearchResultProps) => { setQueryError1({ ...queryErrors[0], queryString: res.errorMessage1, + errorResponse: res.errorMessage1, }); } @@ -125,6 +133,7 @@ export const SearchResult = ({ http }: SearchResultProps) => { setQueryError2({ ...queryErrors[1], queryString: res.errorMessage2, + errorResponse: res.errorMessage2, }); } }) @@ -149,8 +158,17 @@ export const SearchResult = ({ http }: SearchResultProps) => { queryString2={queryString2} setQueryString1={setQueryString1} setQueryString2={setQueryString2} + queryError1={queryError1} + queryError2={queryError2} + setQueryError1={setQueryError1} + setQueryError2={setQueryError2} + /> + - ); diff --git a/public/components/query_compare/search_result/result_components/__test__/__snapshots__/result_component.test.tsx.snap b/public/components/query_compare/search_result/result_components/__test__/__snapshots__/result_component.test.tsx.snap index 1fdbc00..13b3f52 100644 --- a/public/components/query_compare/search_result/result_components/__test__/__snapshots__/result_component.test.tsx.snap +++ b/public/components/query_compare/search_result/result_components/__test__/__snapshots__/result_component.test.tsx.snap @@ -3,6 +3,26 @@ exports[`Result component Renders result component 1`] = ` - + +
+ +
+ Query Error +
+ +
+ +
- Query Error + +
+ Error: parsing_exception - Unknown key for a VALUE_STRING in [this]. +
+
diff --git a/public/components/query_compare/search_result/result_components/__test__/result_component.test.tsx b/public/components/query_compare/search_result/result_components/__test__/result_component.test.tsx index 85ac1aa..6c9ca22 100644 --- a/public/components/query_compare/search_result/result_components/__test__/result_component.test.tsx +++ b/public/components/query_compare/search_result/result_components/__test__/result_component.test.tsx @@ -9,14 +9,19 @@ import React from 'react'; import { waitFor } from '@testing-library/react'; import { ResultComponents } from '../result_components'; import { TEST_QUERY_RESPONSE } from '../../../../../../test/constants'; -import { SearchRelevanceContextProvider } from '../../../../../contexts'; +import { SearchRelevanceContextProvider, initialQueryErrorState } from '../../../../../contexts'; describe('Result component', () => { configure({ adapter: new Adapter() }); it('Renders result component', async () => { const wrapper = mount( - + ); diff --git a/public/components/query_compare/search_result/result_components/result_components.tsx b/public/components/query_compare/search_result/result_components/result_components.tsx index a01852b..0cba158 100644 --- a/public/components/query_compare/search_result/result_components/result_components.tsx +++ b/public/components/query_compare/search_result/result_components/result_components.tsx @@ -10,11 +10,12 @@ import { QueryError, SearchResults } from '../../../../types/index'; import { ResultPanel } from './result_panel'; import './result_components.scss'; -import { useSearchRelevanceContext } from '../../../../contexts'; interface ResultComponentsProps { queryResult1: SearchResults; queryResult2: SearchResults; + queryError1: QueryError; + queryError2: QueryError; } const InitialState = () => { @@ -34,8 +35,12 @@ const InitialState = () => { ); }; -const ResultPanels = ({ queryResult1, queryResult2 }: ResultComponentsProps) => { - const { queryError1, queryError2 } = useSearchRelevanceContext(); +const ResultPanels = ({ + queryResult1, + queryResult2, + queryError1, + queryError2, +}: ResultComponentsProps) => { return ( @@ -44,7 +49,12 @@ const ResultPanels = ({ queryResult1, queryResult2 }: ResultComponentsProps) => ); }; -export const ResultComponents = ({ queryResult1, queryResult2 }: ResultComponentsProps) => { +export const ResultComponents = ({ + queryResult1, + queryResult2, + queryError1, + queryError2, +}: ResultComponentsProps) => { const [initialState, setInitialState] = useState(true); // Set initial state @@ -61,7 +71,12 @@ export const ResultComponents = ({ queryResult1, queryResult2 }: ResultComponent {initialState === true ? ( ) : ( - + )} ); diff --git a/public/components/query_compare/search_result/result_components/result_panel.tsx b/public/components/query_compare/search_result/result_components/result_panel.tsx index f4f0c0e..203494b 100644 --- a/public/components/query_compare/search_result/result_components/result_panel.tsx +++ b/public/components/query_compare/search_result/result_components/result_panel.tsx @@ -28,10 +28,11 @@ interface ResultPanelProps { export const ResultPanel = ({ resultNumber, queryResult, queryError }: ResultPanelProps) => { const { comparedResult1, comparedResult2 } = useSearchRelevanceContext(); - const errorMessage = ( + const ErrorMessage = ( <> - Query Error + Query Error + {queryError.errorResponse.body} ); @@ -55,8 +56,8 @@ export const ResultPanel = ({ resultNumber, queryResult, queryError }: ResultPan - {typeof queryError.queryString !== 'string' && queryError.queryString?.statusCode !== 200 ? ( - errorMessage + {queryError.errorResponse.statusCode !== 200 || queryError.queryString.length ? ( + ErrorMessage ) : queryResult?.hits?.hits?.length ? ( @@ -41,6 +63,10 @@ exports[`Flyout component Renders flyout component 1`] = ` { @@ -22,6 +22,10 @@ describe('Flyout component', () => { queryString2={TEST_QUERY_STRING} setQueryString1={() => {}} setQueryString2={() => {}} + queryError1={initialQueryErrorState} + queryError2={initialQueryErrorState} + setQueryError1={() => {}} + setQueryError2={() => {}} /> ); diff --git a/public/components/query_compare/search_result/search_components/search_configs/search_config.tsx b/public/components/query_compare/search_result/search_components/search_configs/search_config.tsx index 5fc8cd1..ea73540 100644 --- a/public/components/query_compare/search_result/search_components/search_configs/search_config.tsx +++ b/public/components/query_compare/search_result/search_components/search_configs/search_config.tsx @@ -42,40 +42,40 @@ export const SearchConfig: FunctionComponent = ({ const onChangeSelectedIndex: React.ChangeEventHandler = (e) => { setSelectedIndex(e.target.value); - setQueryError({ - ...queryError, + setQueryError((error: QueryError) => ({ + ...error, selectIndex: '', - }); + })); }; // Select index on blur const selectIndexOnBlur = () => { // If Index Select on blur without selecting an index, show error if (!selectedIndex.length) { - setQueryError({ - ...queryError, + setQueryError((error: QueryError) => ({ + ...error, selectIndex: SelectIndexError.unselected, - }); + })); } }; // On change query string const onChangeQueryString = (value: string) => { setQueryString(value); - setQueryError({ - ...queryError, + setQueryError((error: QueryError) => ({ + ...error, queryString: '', - }); + })); }; // Code editor on blur const codeEditorOnBlur = () => { // If no query string on blur, show error if (!queryString.length) { - setQueryError({ - ...queryError, + setQueryError((error: QueryError) => ({ + ...error, queryString: QueryStringError.empty, - }); + })); } }; diff --git a/public/components/query_compare/search_result/search_components/search_configs/search_configs.tsx b/public/components/query_compare/search_result/search_components/search_configs/search_configs.tsx index c3e8f37..09d2800 100644 --- a/public/components/query_compare/search_result/search_components/search_configs/search_configs.tsx +++ b/public/components/query_compare/search_result/search_components/search_configs/search_configs.tsx @@ -11,12 +11,17 @@ import { SearchConfig } from './search_config'; import { useSearchRelevanceContext } from '../../../../../contexts'; import './search_configs.scss'; +import { QueryError } from '../../../../../../public/types/index'; interface SearchConfigsPanelProps { queryString1: string; queryString2: string; setQueryString1: React.Dispatch>; setQueryString2: React.Dispatch>; + queryError1: QueryError; + queryError2: QueryError; + setQueryError1: React.Dispatch>; + setQueryError2: React.Dispatch>; } export const SearchConfigsPanel = ({ @@ -24,16 +29,16 @@ export const SearchConfigsPanel = ({ queryString2, setQueryString1, setQueryString2, + queryError1, + queryError2, + setQueryError1, + setQueryError2, }: SearchConfigsPanelProps) => { const { selectedIndex1, setSelectedIndex1, selectedIndex2, setSelectedIndex2, - queryError1, - queryError2, - setQueryError1, - setQueryError2, } = useSearchRelevanceContext(); return ( diff --git a/public/contexts/index.tsx b/public/contexts/index.tsx index 4d0361f..d6ceef9 100644 --- a/public/contexts/index.tsx +++ b/public/contexts/index.tsx @@ -11,6 +11,10 @@ import { getDocumentRank, DocumentRank } from './utils'; export const initialQueryErrorState: QueryError = { selectIndex: '', queryString: '', + errorResponse: { + body: '', + statusCode: 200, + }, }; export interface SearchRelevanceContextProps { @@ -26,10 +30,6 @@ export interface SearchRelevanceContextProps { setSelectedIndex1: React.Dispatch>; selectedIndex2: string; setSelectedIndex2: React.Dispatch>; - queryError1: QueryError; - setQueryError1: React.Dispatch>; - queryError2: QueryError; - setQueryError2: React.Dispatch>; } export const SearchRelevanceContext = createContext(null); @@ -51,8 +51,6 @@ export const SearchRelevanceContextProvider = ({ children }: { children: React.R const [comparedResult2, setComparedResult2] = useState({}); const [selectedIndex1, setSelectedIndex1] = useState(''); const [selectedIndex2, setSelectedIndex2] = useState(''); - const [queryError1, setQueryError1] = useState(initialQueryErrorState); - const [queryError2, setQueryError2] = useState(initialQueryErrorState); const updateComparedResult1 = (result: SearchResults) => { setComparedResult1(getDocumentRank(result?.hits?.hits)); @@ -77,10 +75,6 @@ export const SearchRelevanceContextProvider = ({ children }: { children: React.R setSelectedIndex1, selectedIndex2, setSelectedIndex2, - queryError1, - setQueryError1, - queryError2, - setQueryError2, }} > {children} diff --git a/public/types/index.ts b/public/types/index.ts index bb682e5..4624282 100644 --- a/public/types/index.ts +++ b/public/types/index.ts @@ -54,7 +54,13 @@ export enum QueryStringError { invalid = 'Query syntax is invalid. Enter a valid query.', } +export interface ErrorResponse { + body: string; + statusCode: number; +} + export interface QueryError { selectIndex: SelectIndexError | string; queryString: QueryStringError | string; + errorResponse: ErrorResponse; } diff --git a/test/constants.ts b/test/constants.ts index 4fd484d..05926a0 100644 --- a/test/constants.ts +++ b/test/constants.ts @@ -3,7 +3,7 @@ * SPDX-License-Identifier: Apache-2.0 */ -import { QueryError } from '../public/types'; +import { QueryError } from '../public/types/index'; export const TEST_SEARCH_TEXT = 'basic'; @@ -205,7 +205,9 @@ export const TEST_QUERY_STRING = '{}'; export const TEST_QUERY_ERROR: QueryError = { selectIndex: '', - queryString: 1, - statusCode: 400, - body: 'Error: parsing_exception - Unknown key for a VALUE_STRING in [this].', + queryString: '', + errorResponse: { + statusCode: 400, + body: 'Error: parsing_exception - Unknown key for a VALUE_STRING in [this].', + }, }; From 2db847559eb143ddb7da5e18cbefaa7a68f0e4e7 Mon Sep 17 00:00:00 2001 From: Sean Li Date: Thu, 14 Sep 2023 11:40:58 -0700 Subject: [PATCH 6/9] moving helper text to helpText prop Signed-off-by: Sean Li --- .../search_configs.test.tsx.snap | 104 ++++++++++++------ .../search_configs/search_config.tsx | 13 ++- 2 files changed, 77 insertions(+), 40 deletions(-) diff --git a/public/components/query_compare/search_result/search_components/__tests__/__snapshots__/search_configs.test.tsx.snap b/public/components/query_compare/search_result/search_components/__tests__/__snapshots__/search_configs.test.tsx.snap index 2cde9a0..c52cfa8 100644 --- a/public/components/query_compare/search_result/search_components/__tests__/__snapshots__/search_configs.test.tsx.snap +++ b/public/components/query_compare/search_result/search_components/__tests__/__snapshots__/search_configs.test.tsx.snap @@ -256,6 +256,18 @@ exports[`Flyout component Renders flyout component 1`] = ` fullWidth={true} hasChildLabel={true} hasEmptyLabelSpace={false} + helpText={ +

+ Enter a query in + + + OpenSearch Query DSL + + . Use %SearchText% to refer to the text in the search bar +

+ } isInvalid={false} label="Query" labelAppend={ @@ -343,6 +355,7 @@ exports[`Flyout component Renders flyout component 1`] = ` className="euiFormRow__fieldWrapper" > + +
+

+ Enter a query in + + + OpenSearch Query DSL + + . Use %SearchText% to refer to the text in the search bar +

+
+ - -
-

- Enter a query in OpenSearch Query DSL. Use %SearchText% to refer to the text in the search bar. -

-
- @@ -702,6 +720,18 @@ exports[`Flyout component Renders flyout component 1`] = ` fullWidth={true} hasChildLabel={true} hasEmptyLabelSpace={false} + helpText={ +

+ Enter a query in + + + OpenSearch Query DSL + + . Use %SearchText% to refer to the text in the search bar +

+ } isInvalid={false} label="Query" labelAppend={ @@ -789,6 +819,7 @@ exports[`Flyout component Renders flyout component 1`] = ` className="euiFormRow__fieldWrapper" > + +
+

+ Enter a query in + + + OpenSearch Query DSL + + . Use %SearchText% to refer to the text in the search bar +

+
+ - -
-

- Enter a query in OpenSearch Query DSL. Use %SearchText% to refer to the text in the search bar. -

-
- diff --git a/public/components/query_compare/search_result/search_components/search_configs/search_config.tsx b/public/components/query_compare/search_result/search_components/search_configs/search_config.tsx index ea73540..14d7845 100644 --- a/public/components/query_compare/search_result/search_components/search_configs/search_config.tsx +++ b/public/components/query_compare/search_result/search_components/search_configs/search_config.tsx @@ -115,6 +115,13 @@ export const SearchConfig: FunctionComponent = ({ } + helpText={ +

+ Enter a query in{' '} + OpenSearch Query DSL. + Use %SearchText% to refer to the text in the search bar +

+ } > = ({ tabSize={2} /> - -

- Enter a query in OpenSearch Query DSL. Use %SearchText% to refer to the text in the search - bar. -

- ); }; From a07402ede701203c927dfa3a65f1dfa487ddcb0a Mon Sep 17 00:00:00 2001 From: Sean Li Date: Mon, 18 Sep 2023 17:08:16 -0700 Subject: [PATCH 7/9] adding tests and addressing comments Signed-off-by: Sean Li --- .../query_compare/search_result/index.tsx | 3 +- .../__snapshots__/result_grid.test.tsx.snap | 76 +-- .../__test__/result_component.test.tsx | 3 +- .../result_components/result_panel.tsx | 4 +- .../__snapshots__/search_config.test.tsx.snap | 462 ++++++++++++++++++ .../__tests__/search_config.test.tsx | 41 ++ .../__tests__/search_configs.test.tsx | 3 +- .../search_configs/search_config.tsx | 1 - public/types/index.ts | 9 + 9 files changed, 559 insertions(+), 43 deletions(-) create mode 100644 public/components/query_compare/search_result/search_components/__tests__/__snapshots__/search_config.test.tsx.snap create mode 100644 public/components/query_compare/search_result/search_components/__tests__/search_config.test.tsx diff --git a/public/components/query_compare/search_result/index.tsx b/public/components/query_compare/search_result/index.tsx index 0be1ddd..60223e0 100644 --- a/public/components/query_compare/search_result/index.tsx +++ b/public/components/query_compare/search_result/index.tsx @@ -16,9 +16,10 @@ import { 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 = '{}'; diff --git a/public/components/query_compare/search_result/result_components/__test__/__snapshots__/result_grid.test.tsx.snap b/public/components/query_compare/search_result/result_components/__test__/__snapshots__/result_grid.test.tsx.snap index c5b7942..26b1c5d 100644 --- a/public/components/query_compare/search_result/result_components/__test__/__snapshots__/result_grid.test.tsx.snap +++ b/public/components/query_compare/search_result/result_components/__test__/__snapshots__/result_grid.test.tsx.snap @@ -2743,49 +2743,51 @@ exports[`Result panel query error Displays error message on query error 1`] = ` - -
- - -
+ - + + +
-
- Query Error -
- -
- - -
+ Query Error +
+ +
+ + - -
- Error: parsing_exception - Unknown key for a VALUE_STRING in [this]. -
- - - +
+ Error: parsing_exception - Unknown key for a VALUE_STRING in [this]. +
+ + + + diff --git a/public/components/query_compare/search_result/result_components/__test__/result_component.test.tsx b/public/components/query_compare/search_result/result_components/__test__/result_component.test.tsx index 6c9ca22..148c91a 100644 --- a/public/components/query_compare/search_result/result_components/__test__/result_component.test.tsx +++ b/public/components/query_compare/search_result/result_components/__test__/result_component.test.tsx @@ -9,7 +9,8 @@ import React from 'react'; import { waitFor } from '@testing-library/react'; import { ResultComponents } from '../result_components'; import { TEST_QUERY_RESPONSE } from '../../../../../../test/constants'; -import { SearchRelevanceContextProvider, initialQueryErrorState } from '../../../../../contexts'; +import { SearchRelevanceContextProvider } from '../../../../../contexts'; +import { initialQueryErrorState } from '../../../../../../public/types/index'; describe('Result component', () => { configure({ adapter: new Adapter() }); diff --git a/public/components/query_compare/search_result/result_components/result_panel.tsx b/public/components/query_compare/search_result/result_components/result_panel.tsx index 203494b..a68c6b1 100644 --- a/public/components/query_compare/search_result/result_components/result_panel.tsx +++ b/public/components/query_compare/search_result/result_components/result_panel.tsx @@ -28,7 +28,7 @@ interface ResultPanelProps { export const ResultPanel = ({ resultNumber, queryResult, queryError }: ResultPanelProps) => { const { comparedResult1, comparedResult2 } = useSearchRelevanceContext(); - const ErrorMessage = ( + const ErrorMessage = () => ( <> Query Error @@ -57,7 +57,7 @@ export const ResultPanel = ({ resultNumber, queryResult, queryError }: ResultPan {queryError.errorResponse.statusCode !== 200 || queryError.queryString.length ? ( - ErrorMessage + ) : queryResult?.hits?.hits?.length ? ( + + +

+ Query + 1 +

+ + +
+ + +
+
+ + + +
+
+ + +
+
+ + + + +
+ + + + + +
+ +
+
+ + +
+
+ + + Enter a query in + + + OpenSearch Query DSL + + . Use %SearchText% to refer to the text in the search bar +

+ } + isInvalid={false} + label="Query" + labelAppend={ + + + Help + + + } + labelType="label" + > +
+
+ + + + + +
+ + + +
+ +
+
+ +
+ + +
+ +
+ + +
+

+ Enter a query in + + + OpenSearch Query DSL + + . Use %SearchText% to refer to the text in the search bar +

+
+ +
+
+ + + +`; diff --git a/public/components/query_compare/search_result/search_components/__tests__/search_config.test.tsx b/public/components/query_compare/search_result/search_components/__tests__/search_config.test.tsx new file mode 100644 index 0000000..6da7f32 --- /dev/null +++ b/public/components/query_compare/search_result/search_components/__tests__/search_config.test.tsx @@ -0,0 +1,41 @@ +/* + * Copyright OpenSearch Contributors + * SPDX-License-Identifier: Apache-2.0 + */ + +import { configure, mount } from 'enzyme'; +import Adapter from 'enzyme-adapter-react-16'; +import React from 'react'; +import { waitFor } from '@testing-library/react'; +import { SearchConfig } from '../search_configs/search_config'; +import { SearchRelevanceContextProvider } from '../../../../../contexts'; +import { TEST_QUERY_STRING } from '../../../../../../test/constants'; +import { initialQueryErrorState } from '../../../../../../public/types/index'; + +describe('Flyout component', () => { + configure({ adapter: new Adapter() }); + + it('Renders flyout component', async () => { + const setQueryString = jest.fn(); + const wrapper = mount( + + {}} + queryError={initialQueryErrorState} + setQueryError={() => {}} + /> + + ); + + wrapper.update(); + await waitFor(() => { + expect(wrapper).toMatchSnapshot(); + wrapper.find('EuiCodeEditor').prop('onChange')?.({ target: { value: '{ "a": "a" }' } }); + expect(setQueryString).toHaveBeenCalled(); + }); + }); +}); diff --git a/public/components/query_compare/search_result/search_components/__tests__/search_configs.test.tsx b/public/components/query_compare/search_result/search_components/__tests__/search_configs.test.tsx index 3ac025e..1efb59d 100644 --- a/public/components/query_compare/search_result/search_components/__tests__/search_configs.test.tsx +++ b/public/components/query_compare/search_result/search_components/__tests__/search_configs.test.tsx @@ -8,8 +8,9 @@ import Adapter from 'enzyme-adapter-react-16'; import React from 'react'; import { waitFor } from '@testing-library/react'; import { SearchConfigsPanel } from '../search_configs/search_configs'; -import { SearchRelevanceContextProvider, initialQueryErrorState } from '../../../../../contexts'; +import { SearchRelevanceContextProvider } from '../../../../../contexts'; import { TEST_QUERY_STRING } from '../../../../../../test/constants'; +import { initialQueryErrorState } from '../../../../../../public/types/index'; describe('Flyout component', () => { configure({ adapter: new Adapter() }); diff --git a/public/components/query_compare/search_result/search_components/search_configs/search_config.tsx b/public/components/query_compare/search_result/search_components/search_configs/search_config.tsx index 14d7845..d0663d3 100644 --- a/public/components/query_compare/search_result/search_components/search_configs/search_config.tsx +++ b/public/components/query_compare/search_result/search_components/search_configs/search_config.tsx @@ -37,7 +37,6 @@ export const SearchConfig: FunctionComponent = ({ setQueryError, }) => { const { documentsIndexes, setShowFlyout } = useSearchRelevanceContext(); - // On select index const onChangeSelectedIndex: React.ChangeEventHandler = (e) => { setSelectedIndex(e.target.value); diff --git a/public/types/index.ts b/public/types/index.ts index 4624282..7ea4f43 100644 --- a/public/types/index.ts +++ b/public/types/index.ts @@ -64,3 +64,12 @@ export interface QueryError { queryString: QueryStringError | string; errorResponse: ErrorResponse; } + +export const initialQueryErrorState: QueryError = { + selectIndex: '', + queryString: '', + errorResponse: { + body: '', + statusCode: 200, + }, +}; From db6699ee5d5325afc41b3d0fe6c1a673af1fec84 Mon Sep 17 00:00:00 2001 From: Sean Li Date: Wed, 20 Sep 2023 14:10:15 -0700 Subject: [PATCH 8/9] adding more tests, fixing state management, addressing comments Signed-off-by: Sean Li --- .../query_compare/search_result/index.tsx | 120 +++++++++++------- .../__snapshots__/result_grid.test.tsx.snap | 22 +++- .../result_components/result_panel.tsx | 5 +- .../__snapshots__/search_config.test.tsx.snap | 4 +- .../__tests__/search_config.test.tsx | 14 +- .../search_configs/search_config.tsx | 4 + 6 files changed, 118 insertions(+), 51 deletions(-) diff --git a/public/components/query_compare/search_result/index.tsx b/public/components/query_compare/search_result/index.tsx index 60223e0..a548c81 100644 --- a/public/components/query_compare/search_result/index.tsx +++ b/public/components/query_compare/search_result/index.tsx @@ -44,67 +44,100 @@ export const SearchResult = ({ http }: SearchResultProps) => { } = useSearchRelevanceContext(); const onClickSearch = () => { - const queryErrors = [{ ...initialQueryErrorState }, { ...initialQueryErrorState }]; const jsonQueries = [{}, {}]; - validateQuery(selectedIndex1, queryString1, queryErrors[0]); - jsonQueries[0] = rewriteQuery(searchBarValue, queryString1, queryErrors[0]); + validateQuery(selectedIndex1, queryString1, setQueryError1); + jsonQueries[0] = rewriteQuery(searchBarValue, queryString1, setQueryError1); - validateQuery(selectedIndex2, queryString2, queryErrors[1]); - jsonQueries[1] = rewriteQuery(searchBarValue, queryString2, queryErrors[1]); + validateQuery(selectedIndex2, queryString2, setQueryError2); + jsonQueries[1] = rewriteQuery(searchBarValue, queryString2, setQueryError2); - handleQuery(jsonQueries, queryErrors); + handleSearch(jsonQueries); }; - const validateQuery = (selectedIndex: string, queryString: string, queryError: QueryError) => { + const validateQuery = ( + selectedIndex: string, + queryString: string, + setQueryError: React.Dispatch> + ) => { // Check if select an index if (!selectedIndex.length) { - queryError.selectIndex = SelectIndexError.unselected; + setQueryError((error: QueryError) => ({ + ...error, + selectIndex: SelectIndexError.unselected, + })); } // Check if query string is empty if (!queryString.length) { - queryError.queryString = QueryStringError.empty; + setQueryError((error: QueryError) => ({ + ...error, + queryString: QueryStringError.empty, + errorRepsonse: { + body: '', + statusCode: 400, + }, + })); } }; - const rewriteQuery = (searchBarValue: string, queryString: string, queryError: QueryError) => { + const rewriteQuery = ( + value: string, + queryString: string, + setQueryError: React.Dispatch> + ) => { 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; + setQueryError((error: QueryError) => ({ + ...error, + queryString: QueryStringError.invalid, + errorRepsonse: { + body: '', + 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) { - setQueryError1(initialQueryErrorState); - requestBody = { - query1: { index: selectedIndex1, ...jsonQueries[0] }, - }; + const handleQuery = ( + queryError: QueryError, + selectedIndex: string, + jsonQuery: any, + updateComparedResult: (result: SearchResults) => void, + setQueryResult: React.Dispatch>, + setQueryError: React.Dispatch> + ) => { + if (queryError.queryString.length || queryError.selectIndex.length) { + setQueryResult({} as any); + updateComparedResult({} as any); + } else if (!queryError.queryString.length && !queryError.selectIndex) { + setQueryError(initialQueryErrorState); + return { index: selectedIndex, ...jsonQuery }; } + }; - // 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) { - setQueryError2(initialQueryErrorState); - requestBody = { - ...requestBody, - query2: { index: selectedIndex2, ...jsonQueries[1] }, - }; - } + const handleSearch = (jsonQueries: any) => { + const requestBody = { + query1: handleQuery( + queryError1, + selectedIndex1, + jsonQueries[0], + updateComparedResult1, + setQueryResult1, + setQueryError1 + ), + query2: handleQuery( + queryError2, + selectedIndex2, + jsonQueries[1], + updateComparedResult2, + setQueryResult2, + setQueryError2 + ), + }; if (Object.keys(requestBody).length !== 0) { http @@ -123,22 +156,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); }); } diff --git a/public/components/query_compare/search_result/result_components/__test__/__snapshots__/result_grid.test.tsx.snap b/public/components/query_compare/search_result/result_components/__test__/__snapshots__/result_grid.test.tsx.snap index 26b1c5d..b8e073d 100644 --- a/public/components/query_compare/search_result/result_components/__test__/__snapshots__/result_grid.test.tsx.snap +++ b/public/components/query_compare/search_result/result_components/__test__/__snapshots__/result_grid.test.tsx.snap @@ -2764,7 +2764,8 @@ exports[`Result panel query error Displays error message on query error 1`] = `
- Query Error + Query + Error
@@ -2787,6 +2788,25 @@ exports[`Result panel query error Displays error message on query error 1`] = `
+ +
+ +
+ Status Code: + 400 +
+ +
+ diff --git a/public/components/query_compare/search_result/result_components/result_panel.tsx b/public/components/query_compare/search_result/result_components/result_panel.tsx index a68c6b1..2731274 100644 --- a/public/components/query_compare/search_result/result_components/result_panel.tsx +++ b/public/components/query_compare/search_result/result_components/result_panel.tsx @@ -31,8 +31,11 @@ export const ResultPanel = ({ resultNumber, queryResult, queryError }: ResultPan const ErrorMessage = () => ( <> - Query Error + + {queryError.errorResponse.statusCode >= 500 ? 'Internal' : 'Query'} Error + {queryError.errorResponse.body} + Status Code: {queryError.errorResponse.statusCode} ); diff --git a/public/components/query_compare/search_result/search_components/__tests__/__snapshots__/search_config.test.tsx.snap b/public/components/query_compare/search_result/search_components/__tests__/__snapshots__/search_config.test.tsx.snap index b3bda22..3068541 100644 --- a/public/components/query_compare/search_result/search_components/__tests__/__snapshots__/search_config.test.tsx.snap +++ b/public/components/query_compare/search_result/search_components/__tests__/__snapshots__/search_config.test.tsx.snap @@ -16,9 +16,9 @@ exports[`Flyout component Renders flyout component 1`] = ` queryNumber={1} queryString="{}" selectedIndex="" - setQueryError={[Function]} + setQueryError={[MockFunction]} setQueryString={[MockFunction]} - setSelectedIndex={[Function]} + setSelectedIndex={[MockFunction]} > { it('Renders flyout component', async () => { const setQueryString = jest.fn(); + const setSelectedIndex = jest.fn(); + const setQueryError = jest.fn(); const wrapper = mount( { queryString={TEST_QUERY_STRING} setQueryString={setQueryString} selectedIndex={''} - setSelectedIndex={() => {}} + setSelectedIndex={setSelectedIndex} queryError={initialQueryErrorState} - setQueryError={() => {}} + setQueryError={setQueryError} /> ); @@ -34,8 +36,12 @@ describe('Flyout component', () => { wrapper.update(); await waitFor(() => { expect(wrapper).toMatchSnapshot(); - wrapper.find('EuiCodeEditor').prop('onChange')?.({ target: { value: '{ "a": "a" }' } }); - expect(setQueryString).toHaveBeenCalled(); + wrapper.find('EuiCodeEditor').prop('onChange')?.({ target: { value: '' } }); + wrapper.find('EuiSelect').prop('onChange')?.({ target: {} }); + wrapper.find('EuiSelect').prop('onBlur')?.({ target: {} }); }); + expect(setQueryString).toHaveBeenCalledTimes(1); + expect(setSelectedIndex).toHaveBeenCalledTimes(1); + expect(setQueryError).toHaveBeenCalledTimes(3); }); }); diff --git a/public/components/query_compare/search_result/search_components/search_configs/search_config.tsx b/public/components/query_compare/search_result/search_components/search_configs/search_config.tsx index d0663d3..391699c 100644 --- a/public/components/query_compare/search_result/search_components/search_configs/search_config.tsx +++ b/public/components/query_compare/search_result/search_components/search_configs/search_config.tsx @@ -73,6 +73,10 @@ export const SearchConfig: FunctionComponent = ({ if (!queryString.length) { setQueryError((error: QueryError) => ({ ...error, + errorResponse: { + body: '', + statusCode: 400, + }, queryString: QueryStringError.empty, })); } From fb1b670a959c666615bce8075b90853b0f6e4670 Mon Sep 17 00:00:00 2001 From: Sean Li Date: Fri, 22 Sep 2023 19:01:53 -0700 Subject: [PATCH 9/9] reverting changes to validateQuery, addressing comments Signed-off-by: Sean Li --- .../query_compare/search_result/index.tsx | 59 +++++++------------ public/contexts/index.tsx | 11 +--- 2 files changed, 21 insertions(+), 49 deletions(-) diff --git a/public/components/query_compare/search_result/index.tsx b/public/components/query_compare/search_result/index.tsx index a548c81..4d27fb1 100644 --- a/public/components/query_compare/search_result/index.tsx +++ b/public/components/query_compare/search_result/index.tsx @@ -44,60 +44,41 @@ export const SearchResult = ({ http }: SearchResultProps) => { } = useSearchRelevanceContext(); const onClickSearch = () => { + const queryErrors = [ + { ...initialQueryErrorState, errorResponse: { ...initialQueryErrorState.errorResponse } }, + { ...initialQueryErrorState, errorResponse: { ...initialQueryErrorState.errorResponse } }, + ]; const jsonQueries = [{}, {}]; - validateQuery(selectedIndex1, queryString1, setQueryError1); - jsonQueries[0] = rewriteQuery(searchBarValue, queryString1, setQueryError1); + validateQuery(selectedIndex1, queryString1, queryErrors[0]); + jsonQueries[0] = rewriteQuery(searchBarValue, queryString1, queryErrors[0]); - validateQuery(selectedIndex2, queryString2, setQueryError2); - jsonQueries[1] = rewriteQuery(searchBarValue, queryString2, setQueryError2); + validateQuery(selectedIndex2, queryString2, queryErrors[1]); + jsonQueries[1] = rewriteQuery(searchBarValue, queryString2, queryErrors[1]); - handleSearch(jsonQueries); + handleSearch(jsonQueries, queryErrors); }; - const validateQuery = ( - selectedIndex: string, - queryString: string, - setQueryError: React.Dispatch> - ) => { + const validateQuery = (selectedIndex: string, queryString: string, queryError: QueryError) => { // Check if select an index if (!selectedIndex.length) { - setQueryError((error: QueryError) => ({ - ...error, - selectIndex: SelectIndexError.unselected, - })); + queryError.selectIndex = SelectIndexError.unselected; } // Check if query string is empty if (!queryString.length) { - setQueryError((error: QueryError) => ({ - ...error, - queryString: QueryStringError.empty, - errorRepsonse: { - body: '', - statusCode: 400, - }, - })); + queryError.queryString = QueryStringError.empty; + queryError.errorResponse.statusCode = 400; } }; - const rewriteQuery = ( - value: string, - queryString: string, - setQueryError: React.Dispatch> - ) => { + const rewriteQuery = (value: string, queryString: string, queryError: QueryError) => { if (queryString.trim().length > 0) { try { return JSON.parse(queryString.replace(/%SearchText%/g, value)); } catch { - setQueryError((error: QueryError) => ({ - ...error, - queryString: QueryStringError.invalid, - errorRepsonse: { - body: '', - statusCode: 400, - }, - })); + queryError.queryString = QueryStringError.invalid; + queryError.errorResponse.statusCode = 400; } } }; @@ -111,6 +92,7 @@ export const SearchResult = ({ http }: SearchResultProps) => { setQueryError: React.Dispatch> ) => { if (queryError.queryString.length || queryError.selectIndex.length) { + setQueryError(queryError); setQueryResult({} as any); updateComparedResult({} as any); } else if (!queryError.queryString.length && !queryError.selectIndex) { @@ -119,10 +101,10 @@ export const SearchResult = ({ http }: SearchResultProps) => { } }; - const handleSearch = (jsonQueries: any) => { + const handleSearch = (jsonQueries: any, queryErrors: QueryError[]) => { const requestBody = { query1: handleQuery( - queryError1, + queryErrors[0], selectedIndex1, jsonQueries[0], updateComparedResult1, @@ -130,7 +112,7 @@ export const SearchResult = ({ http }: SearchResultProps) => { setQueryError1 ), query2: handleQuery( - queryError2, + queryErrors[1], selectedIndex2, jsonQueries[1], updateComparedResult2, @@ -138,7 +120,6 @@ export const SearchResult = ({ http }: SearchResultProps) => { setQueryError2 ), }; - if (Object.keys(requestBody).length !== 0) { http .post(ServiceEndpoints.GetSearchResults, { diff --git a/public/contexts/index.tsx b/public/contexts/index.tsx index d6ceef9..d15f1de 100644 --- a/public/contexts/index.tsx +++ b/public/contexts/index.tsx @@ -5,18 +5,9 @@ import React, { createContext, useContext, useState } from 'react'; -import { DocumentsIndex, SearchResults, QueryError } from '../types/index'; +import { DocumentsIndex, SearchResults } from '../types/index'; import { getDocumentRank, DocumentRank } from './utils'; -export const initialQueryErrorState: QueryError = { - selectIndex: '', - queryString: '', - errorResponse: { - body: '', - statusCode: 200, - }, -}; - export interface SearchRelevanceContextProps { documentsIndexes: DocumentsIndex[]; setDocumentsIndexes: React.Dispatch>;