Skip to content
This repository was archived by the owner on Jan 19, 2025. It is now read-only.

feat(gui): improved saving of filters #775

Merged
merged 2 commits into from
Jun 24, 2022
Merged

feat(gui): improved saving of filters #775

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
f7240b7
feat(gui): improved saving of filters
lars-reimann Jun 24, 2022
b881aa4
feat(gui): allow saving empty filter
lars-reimann Jun 24, 2022
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
77 changes: 52 additions & 25 deletions api-editor/gui/src/features/filter/SaveFilterDialog.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,24 +13,31 @@ import {
ModalFooter,
ModalHeader,
ModalOverlay,
Text as ChakraText,
Textarea,
VStack,
} from '@chakra-ui/react';
import React, { useState } from 'react';
import { useAppDispatch, useAppSelector } from '../../app/hooks';
import { addFilter, selectFilterList, selectFilterString, toggleAddFilterDialog } from '../ui/uiSlice';
import { selectFilterList, selectFilterString, toggleAddFilterDialog, upsertFilter } from '../ui/uiSlice';
import { isValidFilterToken } from './model/filterFactory';

export const SaveFilterDialog: React.FC = function () {
const dispatch = useAppDispatch();
const filter = useAppSelector(selectFilterString);
const savedFilters = useAppSelector(selectFilterList);

const [filterName, setFilterName] = useState('');
const [filterString, setFilterString] = useState(useAppSelector(selectFilterString));

const alreadyIncluded: boolean = savedFilters.some((it) => {
const alreadyIncluded = savedFilters.some((it) => {
return it.name === filterName;
});
const invalidTokens = filterString.split(' ').filter((token) => token !== '' && !isValidFilterToken(token));
const filterStringIsValid = invalidTokens.length === 0;

const submit = () => {
if (filterName !== '' && !alreadyIncluded) {
dispatch(addFilter({ filter, name: filterName }));
if (filterName.trim() !== '' && filterStringIsValid) {
dispatch(upsertFilter({ filter: filterString, name: filterName }));
dispatch(toggleAddFilterDialog());
}
};
Expand All @@ -46,33 +53,53 @@ export const SaveFilterDialog: React.FC = function () {
<Heading>Save Filter</Heading>
</ModalHeader>
<ModalBody>
<FormControl isInvalid={alreadyIncluded || filterName.trim() === ''}>
<FormLabel htmlFor="newFilterName">
Name for the current filter <Code>{filter}</Code>:
</FormLabel>
<Input
type="text"
id="newFilterName"
value={filterName}
onChange={(event) => setFilterName(event.target.value)}
spellCheck={false}
/>
{alreadyIncluded && (
<FormErrorMessage>A filter with this name is saved already.</FormErrorMessage>
)}
{filterName.trim() === '' && (
<FormErrorMessage>The filter name must not be blank.</FormErrorMessage>
)}
</FormControl>
<VStack spacing={4}>
<FormControl isInvalid={filterName.trim() === ''}>
<FormLabel htmlFor="newFilterName">Filter Name:</FormLabel>
<Input
type="text"
id="newFilterName"
value={filterName}
onChange={(event) => setFilterName(event.target.value)}
spellCheck={false}
/>
{filterName.trim() === '' && (
<FormErrorMessage>The filter name must not be blank.</FormErrorMessage>
)}
</FormControl>

<FormControl isInvalid={!filterStringIsValid}>
<FormLabel htmlFor="newFilterString">Filter String:</FormLabel>
<Textarea
id="newFilterString"
value={filterString}
onChange={(event) => setFilterString(event.target.value)}
spellCheck={false}
/>
{!filterStringIsValid && (
<FormErrorMessage>
<ChakraText>
Filter has invalid tokens:{' '}
{invalidTokens.map((token, index) => (
<>
<Code>{token}</Code>
{index < invalidTokens.length - 1 && ', '}
</>
))}
</ChakraText>
</FormErrorMessage>
)}
</FormControl>
</VStack>
</ModalBody>
<ModalFooter>
<HStack spacing={4}>
<Button
colorScheme="blue"
onClick={submit}
isDisabled={alreadyIncluded || filterName.trim() === ''}
isDisabled={filterName.trim() === '' || !filterStringIsValid}
>
Submit
{alreadyIncluded ? 'Replace' : 'Add'}
</Button>
<Button colorScheme="red" onClick={close}>
Cancel
Expand Down
9 changes: 6 additions & 3 deletions api-editor/gui/src/features/ui/uiSlice.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -320,8 +320,11 @@ const uiSlice = createSlice({
setFilterString(state, action: PayloadAction<string>) {
state.filterString = action.payload;
},
addFilter(state, action: PayloadAction<Filter>) {
state.filterList.push(action.payload);
upsertFilter(state, action: PayloadAction<Filter>) {
state.filterList = [
...state.filterList.filter((filter) => filter.name !== action.payload.name),
action.payload,
];
},
removeFilter(state, action: PayloadAction<string>) {
state.filterList = state.filterList.filter((filter) => filter.filter !== action.payload);
Expand Down Expand Up @@ -372,7 +375,7 @@ export const {
setTreeViewScrollOffset,
setHeatMapMode,
setFilterString,
addFilter,
upsertFilter,
removeFilter,
setSortingMode,
setBatchMode,
Expand Down