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 1827086: Align list view toolbar with search using pf toolbar component #5294

Merged
merged 3 commits into from May 12, 2020
Merged

Bug 1827086: Align list view toolbar with search using pf toolbar component #5294

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
a724ad3
Bug 1827086: Align list view toolbar with search using pf toolbar com…
jcaianirh May 5, 2020
0b60b90
update mobile experience
jcaianirh May 5, 2020
803eeec
fix alignment, and name filter null console error
jcaianirh May 11, 2020
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
21 changes: 5 additions & 16 deletions frontend/public/components/_filter-toolbar.scss
View file
Open in desktop
@@ -1,21 +1,5 @@
.co-list-filter-block {
display: flex;
margin: 0 0 var(--pf-global--spacer--md) 0;
}

.co-list-filter-block__row-dropdown {
margin-right: var(--pf-global--spacer--lg);
}

.co-list-fliter-block__user-input-filter {
display: inline-flex;
}

.co-filter-dropdown__item {
display: inline-flex;
}

.co-filter-dropdown__item {
pointer-events: none;
}

Expand All @@ -37,3 +21,8 @@
.co-filter-dropdown-item__name {
padding: 0 var(--pf-global--spacer--xs);
}

.co-filter-search--full-width {
flex-grow: 1;
max-width: 90vw;
}
198 changes: 88 additions & 110 deletions frontend/public/components/filter-toolbar.tsx
View file
Open in desktop
Expand Up @@ -5,21 +5,21 @@ import { compose } from 'redux';
import { connect } from 'react-redux';
import {
Checkbox,
DataToolbar,
DataToolbarContent,
DataToolbarFilter,
DataToolbarChip,
DataToolbarItem,
DropdownItem,
Dropdown,
DropdownToggle,
DropdownGroup,
ChipGroup,
Chip,
ChipGroupToolbarItem,
Button,
Badge,
} from '@patternfly/react-core';
import { CaretDownIcon, CloseIcon, FilterIcon } from '@patternfly/react-icons';
import { CaretDownIcon, FilterIcon } from '@patternfly/react-icons';
import { Dropdown as DropdownInternal } from '@console/internal/components/utils';
import { setQueryArgument, removeQueryArgument } from './utils';
import { filterList } from '../actions/k8s';
import { searchFilterValues } from './search-filter-dropdown';
import AutocompleteInput from './autocomplete';
import { storagePrefix } from './row-filter';

Expand Down Expand Up @@ -237,117 +237,95 @@ const FilterToolbar_: React.FC<FilterToolbarProps & RouteComponentProps> = (prop

const switchFilter = (type: FilterType) => {
setFilterType(FilterType[type]);
setInputText('');
setInputText(nameFilter && FilterType[type] === FilterType.NAME ? nameFilter : '');
};

const dropdownItems = getDropdownItems(rowFilters, selectedRowFilters, data, props);

return (
<>
<div className="co-search-group co-search-group__filter co-filter__block">
<DataToolbar id="filter-toolbar" clearAllFilters={clearAll}>
<DataToolbarContent>
{rowFilters.length > 0 && (
<Dropdown
dropdownItems={dropdownItems}
className="co-list-filter-block__row-dropdown co-search-group__resource"
onSelect={onRowFilterSelect}
isOpen={isOpen}
toggle={
<DropdownToggle
data-test-id="filter-dropdown-toggle"
onToggle={() => setOpen(!isOpen)}
iconComponent={CaretDownIcon}
>
<FilterIcon className="span--icon__right-margin" />
Filter
</DropdownToggle>
}
/>
<DataToolbarItem>
{_.reduce(
Object.keys(filters),
(acc, key) => (
<DataToolbarFilter
key={key}
chips={_.intersection(selectedRowFilters, filters[key]).map((item) => {
return { key: item, node: filtersNameMap[item] };
})}
deleteChip={(filter, chip: DataToolbarChip) =>
updateRowFilterSelected([chip.key])
}
categoryName={key}
deleteChipGroup={() => clearAllRowFilter(key)}
>
{acc}
</DataToolbarFilter>
),
<Dropdown
dropdownItems={dropdownItems}
onSelect={onRowFilterSelect}
isOpen={isOpen}
toggle={
<DropdownToggle
data-test-id="filter-dropdown-toggle"
onToggle={() => setOpen(!isOpen)}
iconComponent={CaretDownIcon}
>
<FilterIcon className="span--icon__right-margin" />
Filter
</DropdownToggle>
}
/>,
)}
</DataToolbarItem>
)}
<div className="pf-c-input-group co-search-group__filters co-search-group__resource">
{!hideLabelFilter && (
<DropdownInternal
items={FilterType}
onChange={switchFilter}
selectedKey={filterType}
title={filterType}
/>
)}
{!hideNameFilter && (
<AutocompleteInput
className="co-text-node"
onSuggestionSelect={(selected) => {
updateLabelFilter(_.uniq([...labelFilters, selected]));
}}
showSuggestions={FilterType.LABEL === filterType}
textValue={inputText}
setTextValue={updateSearchFilter}
placeholder={FilterType.NAME === filterType ? 'Search by name...' : 'app=frontend'}
data={data}
/>
)}
</div>
</div>
<ChipGroup className="co-filter__chips" withToolbar defaultIsOpen={false} numChips={8}>
<ChipGroupToolbarItem key="name-category" categoryName={searchFilterValues.Name}>
{!hideNameFilter && nameFilter && (
<Chip key="typehaed-chip" onClick={() => updateNameFilter('')}>
{nameFilter}
</Chip>
)}
{!hideNameFilter && nameFilter && (
<span>
<Button variant="plain" aria-label="Close" onClick={() => updateNameFilter('')}>
<CloseIcon />
</Button>
</span>
)}
</ChipGroupToolbarItem>
{Object.keys(filters).map((key) => {
const selected = _.intersection(selectedRowFilters, filters[key]);
return (
<ChipGroupToolbarItem key={key} categoryName={key}>
{selected.map((item) => (
<Chip key={item} onClick={() => updateRowFilterSelected([item])}>
{filtersNameMap[item]}
</Chip>
))}
{selected.length > 0 && (
<span>
<Button variant="plain" aria-label="Close" onClick={() => clearAllRowFilter(key)}>
<CloseIcon />
</Button>
</span>
)}
</ChipGroupToolbarItem>
);
})}
<ChipGroupToolbarItem key="label-category" categoryName={searchFilterValues.Label}>
{!hideLabelFilter &&
labelFilters.map((chip) => (
<Chip
key={chip}
onClick={() => updateLabelFilter(_.difference(labelFilters, [chip]))}
>
{chip}
</Chip>
))}
{!hideLabelFilter && labelFilters.length > 0 && (
<span>
<Button variant="plain" aria-label="Close" onClick={() => updateLabelFilter([])}>
<CloseIcon />
</Button>
</span>
)}
</ChipGroupToolbarItem>
</ChipGroup>
{((labelFilters.length > 0 && !hideLabelFilter) ||
selectedRowFilters.length > 0 ||
(nameFilter && !hideLabelFilter)) && (
<Button variant="link" key="clear-filters" onClick={clearAll}>
Clear all filters
</Button>
)}
</>
<DataToolbarItem className="co-filter-search--full-width">
<DataToolbarFilter
deleteChipGroup={() => updateLabelFilter([])}
chips={[...labelFilters]}
deleteChip={(filter, chip: string) =>
updateLabelFilter(_.difference(labelFilters, [chip]))
}
categoryName="Label"
>
<DataToolbarFilter
chips={nameFilter && nameFilter.length > 0 ? [nameFilter] : []}
deleteChip={() => updateNameFilter('')}
categoryName="Name"
>
<div className="pf-c-input-group">
{!hideLabelFilter && (
<DropdownInternal
items={FilterType}
onChange={switchFilter}
selectedKey={filterType}
title={filterType}
/>
)}
{!hideNameFilter && (
<AutocompleteInput
className="co-text-node"
onSuggestionSelect={(selected) => {
updateLabelFilter(_.uniq([...labelFilters, selected]));
}}
showSuggestions={FilterType.LABEL === filterType}
textValue={inputText}
setTextValue={updateSearchFilter}
placeholder={
FilterType.NAME === filterType ? 'Search by name...' : 'app=frontend'
}
data={data}
/>
)}
</div>
</DataToolbarFilter>
</DataToolbarFilter>
</DataToolbarItem>
</DataToolbarContent>
</DataToolbar>
);
};

Expand Down