Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Bug 1795713: Fix labels and Enable typeahead filter for name filter #4140

Merged
merged 1 commit into from
Feb 15, 2020
Merged

Bug 1795713: Fix labels and Enable typeahead filter for name filter #4140

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
23 changes: 13 additions & 10 deletions frontend/public/components/search-filter-dropdown.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,9 +10,8 @@ export enum searchFilterValues {
export const SearchFilterDropdown: React.SFC<SearchFilterDropdownProps> = (props) => {
const [isOpen, setOpen] = React.useState(false);
const [selected, setSelected] = React.useState(searchFilterValues.Label);
const [inputValue, setInputValue] = React.useState('');

const { onChange } = props;
const { onChange, nameFilterInput, labelFilterInput } = props;

const onToggle = (open: boolean) => setOpen(open);
const onSelect = (event: React.SyntheticEvent) => {
Expand All @@ -29,11 +28,15 @@ export const SearchFilterDropdown: React.SFC<SearchFilterDropdownProps> = (props
];
const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
if (e.key === 'Enter') {
onChange(selected, inputValue);
setInputValue('');
const { value } = e.target as HTMLInputElement;
onChange(selected, value, true);
}
};

const handleInputValue = (value: string) => {
onChange(selected, value, false);
};

return (
<div className="form-group co-search-group__filter">
<div className="pf-c-input-group">
Expand All @@ -50,13 +53,11 @@ export const SearchFilterDropdown: React.SFC<SearchFilterDropdownProps> = (props
dropdownItems={dropdownItems}
/>
<TextInput
onChange={setInputValue}
placeholder={
selected === searchFilterValues.Label ? 'Filter by label...' : 'Filter by name...'
}
onChange={handleInputValue}
placeholder={selected === searchFilterValues.Label ? 'app=frontend' : 'my-resource'}
name="search-filter-input"
id="search-filter-input"
value={inputValue}
value={selected === searchFilterValues.Label ? labelFilterInput : nameFilterInput}
onKeyDown={handleKeyDown}
/>
</div>
Expand All @@ -65,5 +66,7 @@ export const SearchFilterDropdown: React.SFC<SearchFilterDropdownProps> = (props
};

export type SearchFilterDropdownProps = {
onChange: (type: string, value: string) => void;
onChange: (type: string, value: string, endOfString: boolean) => void;
nameFilterInput: string;
labelFilterInput: string;
};
55 changes: 29 additions & 26 deletions frontend/public/components/search.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,8 +56,9 @@ const ResourceList = connectToModel(({ kindObj, mock, namespace, selector, nameF
const SearchPage_: React.FC<SearchProps> = (props) => {
const [selectedItems, setSelectedItems] = React.useState(new Set<string>([]));
const [collapsedKinds, setCollapsedKinds] = React.useState(new Set<string>([]));
const [nameFilter, setNameFilter] = React.useState([]);
const [labelFilter, setLabelFilter] = React.useState([]);
const [labelFilterInput, setLabelFilterInput] = React.useState('');
const [typeaheadNameFilter, setTypeaheadNameFilter] = React.useState('');

const { namespace, noProjectsAvailable } = props;

Expand All @@ -77,11 +78,9 @@ const SearchPage_: React.FC<SearchProps> = (props) => {
setSelectedItems(new Set(kind.split(',')));
}
const tags = split(q || '');
const nameTags = split(name || '');
const validTags = _.reject(tags, (tag) => requirementFromString(tag) === undefined);
const validNameTags = _.reject(nameTags, (tag) => requirementFromString(tag) === undefined);
setLabelFilter(validTags);
setNameFilter(validNameTags);
setTypeaheadNameFilter(name || '');
}, []);

const updateSelectedItems = (selection: string) => {
Expand All @@ -97,7 +96,7 @@ const SearchPage_: React.FC<SearchProps> = (props) => {
};

const clearNameFilter = () => {
setNameFilter([]);
setTypeaheadNameFilter('');
setQueryArgument('name', '');
};

Expand All @@ -119,25 +118,25 @@ const SearchPage_: React.FC<SearchProps> = (props) => {
};

const updateNameFilter = (value: string) => {
setNameFilter([...nameFilter, value]);
setQueryArgument('name', [...nameFilter, value].join(','));
setTypeaheadNameFilter(value);
setQueryArgument('name', value);
};

const updateLabelFilter = (value: string) => {
const updateLabelFilter = (value: string, endOfString: boolean) => {
setLabelFilterInput(value);
if (requirementFromString(value) !== undefined) {
setLabelFilter([...labelFilter, value]);
setQueryArgument('q', [...labelFilter, value].join(','));
if (endOfString) {
setLabelFilter([...labelFilter, value]);
setQueryArgument('q', [...labelFilter, value].join(','));
setLabelFilterInput('');
}
}
};

const updateSearchFilter = (type: string, value: string) => {
type === searchFilterValues.Label ? updateLabelFilter(value) : updateNameFilter(value);
};

const removeNameFilter = (value: string) => {
const newNames = nameFilter.filter((keepItem: string) => keepItem !== value);
setNameFilter(newNames);
setQueryArgument('name', newNames.join(','));
const updateSearchFilter = (type: string, value: string, endOfString: boolean) => {
type === searchFilterValues.Label
? updateLabelFilter(value, endOfString)
: updateNameFilter(value);
};

const removeLabelFilter = (value: string) => {
Expand All @@ -163,7 +162,11 @@ const SearchPage_: React.FC<SearchProps> = (props) => {
onChange={updateSelectedItems}
className="co-search-group__resource"
/>
<SearchFilterDropdown onChange={updateSearchFilter} />
<SearchFilterDropdown
onChange={updateSearchFilter}
nameFilterInput={typeaheadNameFilter}
labelFilterInput={labelFilterInput}
/>
</div>
<div className="form-group">
<ChipGroup withToolbar defaultIsOpen={false}>
Expand Down Expand Up @@ -197,12 +200,12 @@ const SearchPage_: React.FC<SearchProps> = (props) => {
)}
</ChipGroupToolbarItem>
<ChipGroupToolbarItem key="name-category" categoryName={searchFilterValues.Name}>
{nameFilter.map((chip) => (
<Chip key={chip} onClick={() => removeNameFilter(chip)}>
{chip}
{typeaheadNameFilter !== '' && (
<Chip key="typehaed-chip" onClick={clearNameFilter}>
{typeaheadNameFilter}
</Chip>
))}
{nameFilter.length > 0 && (
)}
{typeaheadNameFilter !== '' && (
<span>
<Button variant="plain" aria-label="Close" onClick={clearNameFilter}>
<CloseIcon />
Expand All @@ -211,7 +214,7 @@ const SearchPage_: React.FC<SearchProps> = (props) => {
)}
</ChipGroupToolbarItem>
</ChipGroup>
{(selectedItems.size > 0 || labelFilter.length > 0 || nameFilter.length > 0) && (
{(selectedItems.size > 0 || labelFilter.length > 0 || typeaheadNameFilter !== '') && (
<Button variant="link" key="clear-filters" onClick={clearAll}>
Clear all filters
</Button>
Expand All @@ -236,7 +239,7 @@ const SearchPage_: React.FC<SearchProps> = (props) => {
<ResourceList
kind={item}
selector={selectorFromString(labelFilter.join(','))}
nameFilter={nameFilter.join(',')}
nameFilter={typeaheadNameFilter}
namespace={namespace}
mock={noProjectsAvailable}
key={item}
Expand Down