Mirror of https://github.com/roostorg/osprey
github.com/roostorg/osprey
ui: fix loss of WIP query after changing interval (#77)
+24
-7
+24
-7
osprey_ui/src/components/query_view/QueryInput.tsx
+24
-7
osprey_ui/src/components/query_view/QueryInput.tsx
···
37
37
onIntervalChange: (interval: DefaultIntervals) => void;
38
38
}
39
39
40
-
const QueryInput = ({ interval, dateRange, onIntervalChange }: QueryInputProps) => {
40
+
const QueryInput = ({
41
+
interval: executedQueryInterval,
42
+
onIntervalChange: onExecutedQueryIntervalChange,
43
+
dateRange,
44
+
}: QueryInputProps) => {
41
45
const [executedQuery, updateExecutedQuery] = useQueryStore(
42
46
(state) => [state.executedQuery, state.updateExecutedQuery],
43
47
shallow
···
50
54
const [searchOptions, setSearchOptions] = React.useState<OptionData[]>([]);
51
55
const [filteredOptions, setFilteredOptions] = React.useState<OptionData[]>([]);
52
56
57
+
// store the selected interval state separate from the current query's interval, so that changes
58
+
// to the interval can be made without losing WIP in the query input field
59
+
const [selectedInterval, setSelectedInterval] = React.useState(executedQueryInterval);
60
+
53
61
const [isLoading, setIsLoading] = React.useState(false);
54
62
55
63
const handleSelectChange = (value: DefaultIntervals) => {
56
-
onIntervalChange(value);
64
+
// only update the active query's interval if the user has not made any changes to their query input
65
+
if (executedQuery.queryFilter === queryFilter) {
66
+
onExecutedQueryIntervalChange(value);
67
+
}
68
+
setSelectedInterval(value);
57
69
};
58
70
59
71
React.useEffect(() => {
···
67
79
68
80
React.useEffect(() => {
69
81
setQueryFilter(executedQuery.queryFilter);
70
-
}, [executedQuery]);
82
+
// if the user has selected a new query to execute from the saved queries list, make sure that
83
+
// we update the selected interval to reflect the correct one
84
+
if (executedQuery.interval !== selectedInterval) {
85
+
setSelectedInterval(executedQuery.interval);
86
+
}
87
+
}, [executedQuery, selectedInterval]);
71
88
72
89
const handleSelectAutoComplete = (value: SelectValue) => {
73
90
let insertValue = String(value);
···
91
108
const isValid = queryFilter === '' ? true : await validateQuery(queryFilter);
92
109
93
110
if (isValid) {
94
-
const { start, end } = getQueryDateRange(interval, dateRange);
95
-
updateExecutedQuery({ start, end, queryFilter, interval });
111
+
const { start, end } = getQueryDateRange(selectedInterval, dateRange);
112
+
updateExecutedQuery({ start, end, queryFilter, interval: selectedInterval });
96
113
}
97
114
98
115
setIsLoading(false);
···
150
167
onChange={handleSelectChange}
151
168
placeholder="Select date range"
152
169
style={{ width: 180 }}
153
-
value={interval ?? undefined}
170
+
value={selectedInterval ?? undefined}
154
171
>
155
172
{SelectOptions.map((option) => (
156
173
<Select.Option value={option.value} key={option.value}>
···
160
177
</Select>
161
178
</div>
162
179
<OspreyButton
163
-
disabled={interval === CUSTOM_RANGE_OPTION && isEmptyDateRange(dateRange.start, dateRange.end)}
180
+
disabled={selectedInterval === CUSTOM_RANGE_OPTION && isEmptyDateRange(dateRange.start, dateRange.end)}
164
181
color={ButtonColors.DARK_BLUE}
165
182
className={styles.submitButton}
166
183
onClick={handleSubmitQuery}