Skip to content

Commit 3fb2ace

Browse files
ohltylerohltyler
committed
Move state to parent tools component
Signed-off-by: Tyler Ohlsen <ohltyler@amazon.com>
1 parent 3ff7b00 commit 3fb2ace

File tree

2 files changed

+65
-47
lines changed

2 files changed

+65
-47
lines changed

‎public/pages/workflow_detail/tools/query/query.tsx

+31-46
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,6 @@ import {
2020
import {
2121
CONFIG_STEP,
2222
customStringify,
23-
FETCH_ALL_QUERY,
2423
QueryParam,
2524
SearchResponse,
2625
SearchResponseVerbose,
@@ -47,6 +46,12 @@ interface QueryProps {
4746
hasSearchPipeline: boolean;
4847
hasIngestResources: boolean;
4948
selectedStep: CONFIG_STEP;
49+
queryRequest: string;
50+
setQueryRequest: (queryRequest: string) => void;
51+
queryResponse: SearchResponse | undefined;
52+
setQueryResponse: (queryResponse: SearchResponse | undefined) => void;
53+
queryParams: QueryParam[];
54+
setQueryParams: (queryParams: QueryParam[]) => void;
5055
}
5156

5257
const SEARCH_OPTIONS = [
@@ -66,61 +71,34 @@ export function Query(props: QueryProps) {
6671
const dispatch = useAppDispatch();
6772
const dataSourceId = getDataSourceId();
6873
const dataSourceVersion = useDataSourceVersion(dataSourceId);
69-
7074
const { loading } = useSelector((state: AppState) => state.opensearch);
71-
72-
// Form state
7375
const { values } = useFormikContext<WorkflowFormValues>();
7476

75-
// query response state
76-
const [queryResponse, setQueryResponse] = useState<
77-
SearchResponse | undefined
78-
>(undefined);
79-
80-
// Standalone / sandboxed search request state. Users can test things out
81-
// without updating the base form / persisted value.
82-
// Update if the parent form values are changed, or if a newly-created search pipeline is detected.
83-
const [tempRequest, setTempRequest] = useState<string>('');
84-
useEffect(() => {
85-
if (!isEmpty(values?.search?.request)) {
86-
setTempRequest(values?.search?.request);
87-
} else {
88-
setTempRequest(customStringify(FETCH_ALL_QUERY));
89-
}
90-
}, [values?.search?.request]);
91-
9277
// state for if to execute search w/ or w/o any configured search pipeline.
9378
// default based on if there is an available search pipeline or not.
9479
const [includePipeline, setIncludePipeline] = useState<boolean>(false);
9580
useEffect(() => {
9681
setIncludePipeline(props.hasSearchPipeline);
9782
}, [props.hasSearchPipeline]);
9883

99-
// query params state
100-
const [queryParams, setQueryParams] = useState<QueryParam[]>([]);
101-
102-
// Do a few things when the request is changed:
103-
// 1. Check if there is a new set of query parameters, and if so,
104-
// reset the form.
105-
// 2. Clear any stale results
84+
// Check if there is a new set of query parameters, and if so, reset the form
10685
useEffect(() => {
107-
const placeholders = getPlaceholdersFromQuery(tempRequest);
86+
const placeholders = getPlaceholdersFromQuery(props.queryRequest);
10887
if (
10988
!containsSameValues(
11089
placeholders,
111-
queryParams.map((queryParam) => queryParam.name)
90+
props.queryParams.map((queryParam) => queryParam.name)
11291
)
11392
) {
114-
setQueryParams(
93+
props.setQueryParams(
11594
placeholders.map((placeholder) => ({
11695
name: placeholder,
11796
type: 'Text',
11897
value: '',
11998
}))
12099
);
121100
}
122-
setQueryResponse(undefined);
123-
}, [tempRequest]);
101+
}, [props.queryRequest]);
124102

125103
// empty states
126104
const noSearchIndex = isEmpty(values?.search?.index?.name);
@@ -192,15 +170,18 @@ export function Query(props: QueryProps) {
192170
fill={true}
193171
isLoading={loading}
194172
disabled={
195-
containsEmptyValues(queryParams) ||
173+
containsEmptyValues(props.queryParams) ||
196174
isEmpty(indexToSearch)
197175
}
198176
onClick={() => {
199177
dispatch(
200178
searchIndex({
201179
apiBody: {
202180
index: indexToSearch,
203-
body: injectParameters(queryParams, tempRequest),
181+
body: injectParameters(
182+
props.queryParams,
183+
props.queryRequest
184+
),
204185
searchPipeline: includePipeline
205186
? values?.search?.pipelineName
206187
: '_none',
@@ -230,11 +211,11 @@ export function Query(props: QueryProps) {
230211
setSearchPipelineErrors({ errors: {} });
231212
}
232213

233-
setQueryResponse(resp);
214+
props.setQueryResponse(resp);
234215
}
235216
)
236217
.catch((error: any) => {
237-
setQueryResponse(undefined);
218+
props.setQueryResponse(undefined);
238219
setSearchPipelineErrors({ errors: {} });
239220
console.error('Error running query: ', error);
240221
});
@@ -252,12 +233,12 @@ export function Query(props: QueryProps) {
252233
</EuiFlexItem>
253234
{props.selectedStep === CONFIG_STEP.SEARCH &&
254235
!isEmpty(values?.search?.request) &&
255-
values?.search?.request !== tempRequest && (
236+
values?.search?.request !== props.queryRequest && (
256237
<EuiFlexItem grow={false} style={{ marginBottom: '0px' }}>
257238
<EuiSmallButtonEmpty
258239
disabled={false}
259240
onClick={() => {
260-
setTempRequest(values?.search?.request);
241+
props.setQueryRequest(values?.search?.request);
261242
}}
262243
>
263244
Revert to original query
@@ -272,13 +253,16 @@ export function Query(props: QueryProps) {
272253
theme="textmate"
273254
width="100%"
274255
height={'100%'}
275-
value={tempRequest}
256+
value={props.queryRequest}
276257
onChange={(input) => {
277-
setTempRequest(input);
258+
props.setQueryRequest(input);
278259
}}
260+
// format the JSON on blur
279261
onBlur={() => {
280262
try {
281-
setTempRequest(customStringify(JSON.parse(tempRequest)));
263+
props.setQueryRequest(
264+
customStringify(JSON.parse(props.queryRequest))
265+
);
282266
} catch (error) {}
283267
}}
284268
readOnly={false}
@@ -299,8 +283,8 @@ export function Query(props: QueryProps) {
299283
* This may return nothing if the list of params are empty
300284
*/}
301285
<QueryParamsList
302-
queryParams={queryParams}
303-
setQueryParams={setQueryParams}
286+
queryParams={props.queryParams}
287+
setQueryParams={props.setQueryParams}
304288
/>
305289
</EuiFlexItem>
306290
</EuiFlexGroup>
@@ -311,7 +295,8 @@ export function Query(props: QueryProps) {
311295
<EuiText size="m">Results</EuiText>
312296
</EuiFlexItem>
313297
<EuiFlexItem>
314-
{queryResponse === undefined || isEmpty(queryResponse) ? (
298+
{props.queryResponse === undefined ||
299+
isEmpty(props.queryResponse) ? (
315300
<EuiEmptyPrompt
316301
title={<h2>No results</h2>}
317302
titleSize="s"
@@ -324,7 +309,7 @@ export function Query(props: QueryProps) {
324309
}
325310
/>
326311
) : (
327-
<Results response={queryResponse} />
312+
<Results response={props.queryResponse} />
328313
)}
329314
</EuiFlexItem>
330315
</EuiFlexGroup>

‎public/pages/workflow_detail/tools/tools.tsx

+34-1
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55

66
import React, { ReactNode, useEffect, useState } from 'react';
77
import { useSelector } from 'react-redux';
8-
import { AppState } from '../../../store';
8+
import { useFormikContext } from 'formik';
99
import { isEmpty } from 'lodash';
1010
import {
1111
EuiFlexGroup,
@@ -15,11 +15,17 @@ import {
1515
EuiTabs,
1616
EuiText,
1717
} from '@elastic/eui';
18+
import { AppState } from '../../../store';
1819
import {
1920
CONFIG_STEP,
21+
customStringify,
22+
FETCH_ALL_QUERY,
2023
INSPECTOR_TAB_ID,
2124
INSPECTOR_TABS,
25+
QueryParam,
26+
SearchResponse,
2227
Workflow,
28+
WorkflowFormValues,
2329
} from '../../../../common';
2430
import { Resources } from './resources';
2531
import { Query } from './query';
@@ -56,6 +62,27 @@ export function Tools(props: ToolsProps) {
5662
const [curErrorMessages, setCurErrorMessages] = useState<
5763
(string | ReactNode)[]
5864
>([]);
65+
const { values } = useFormikContext<WorkflowFormValues>();
66+
67+
// Standalone / sandboxed search request state. Users can test things out
68+
// without updating the base form / persisted value.
69+
// Update if the parent form values are changed, or if a newly-created search pipeline is detected.
70+
const [queryRequest, setQueryRequest] = useState<string>('');
71+
useEffect(() => {
72+
if (!isEmpty(values?.search?.request)) {
73+
setQueryRequest(values?.search?.request);
74+
} else {
75+
setQueryRequest(customStringify(FETCH_ALL_QUERY));
76+
}
77+
}, [values?.search?.request]);
78+
79+
// query response state
80+
const [queryResponse, setQueryResponse] = useState<
81+
SearchResponse | undefined
82+
>(undefined);
83+
84+
// query params state
85+
const [queryParams, setQueryParams] = useState<QueryParam[]>([]);
5986

6087
// Propagate any errors coming from opensearch API calls, including ingest/search pipeline verbose calls.
6188
useEffect(() => {
@@ -160,6 +187,12 @@ export function Tools(props: ToolsProps) {
160187
props.workflow
161188
)}
162189
selectedStep={props.selectedStep}
190+
queryRequest={queryRequest}
191+
setQueryRequest={setQueryRequest}
192+
queryResponse={queryResponse}
193+
setQueryResponse={setQueryResponse}
194+
queryParams={queryParams}
195+
setQueryParams={setQueryParams}
163196
/>
164197
)}
165198
{props.selectedTabId === INSPECTOR_TAB_ID.ERRORS && (

0 commit comments

Comments
 (0)