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

Save filter experiments #1429

Closed
wants to merge 2 commits into from
Closed

Save filter experiments #1429

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
3d78d7f
Save filter experiments
timogasda Aug 9, 2023
545cf46
add match counter
timogasda Aug 10, 2023
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
262 changes: 146 additions & 116 deletions pages/app-layout/with-table-collection-select-filter.page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ import Input from '~components/input';
import Header from '~components/header';
import Button from '~components/button';
import Select from '~components/select';
import PropertyFilter, { PropertyFilterProps } from '~components/property-filter';
import { Navigation, Tools, Breadcrumbs } from './utils/content-blocks';
import * as toolsContent from './utils/tools-content';
import labels from './utils/labels';
Expand All @@ -21,6 +22,9 @@ import { useCollection } from '@cloudscape-design/collection-hooks';
import styles from './with-table-collection-select-filter.scss';
import CollectionPreferences from '~components/collection-preferences';
import { pageSizeOptions } from '../table/shared-configs';
import { I18nProvider } from '~components/i18n';
import messages from '~components/i18n/messages/all.en';
import { Checkbox } from '~components';

const instanceTypes = new Set(allItems.map(item => item.instancetype));
const instanceOptions = Array.from(instanceTypes).map(type => {
Expand All @@ -38,6 +42,12 @@ export const PAGE_SIZE_OPTIONS = [

export default function () {
const [toolsOpen, setToolsOpen] = useState(false);
const [usePropertyFilter, setUsePropertyFilter] = useState(true);
const [customControl, setCustomControl] = useState(true);
const [customAction, setCustomAction] = useState(true);
const [matches, setMatches] = useState(false);
const [textfilter, setTextfilter] = useState('');
const [query, setQuery] = useState<PropertyFilterProps.Query>({ operation: 'and', tokens: [] });

const { items, actions, paginationProps, propertyFilterProps } = useCollection(allItems, {
propertyFiltering: {
Expand All @@ -64,122 +74,142 @@ export default function () {
});

return (
<AppLayout
ariaLabels={labels}
breadcrumbs={<Breadcrumbs />}
navigation={<Navigation />}
contentType="table"
tools={<Tools>{toolsContent.small}</Tools>}
toolsOpen={toolsOpen}
onToolsChange={({ detail }) => setToolsOpen(detail.open)}
content={
<Table<TableItem>
stickyHeader={true}
header={
<Header
variant="awsui-h1-sticky"
info={<Link variant="info"> Info </Link>}
actions={
<SpaceBetween size="xs" direction="horizontal">
<Button data-testid="header-btn-view-details">View details</Button>
<Button data-testid="header-btn-edit" disabled={true}>
Edit
</Button>
<Button data-testid="header-btn-delete" disabled={true}>
Delete
</Button>
<Button data-testid="header-btn-create" variant="primary">
Create instance
</Button>
</SpaceBetween>
}
>
Instances
</Header>
}
items={items}
variant="full-page"
ariaLabels={{
selectionGroupLabel: 'group label',
allItemsSelectionLabel: ({ selectedItems }) => `${selectedItems.length} item selected`,
itemSelectionLabel: ({ selectedItems }, item) =>
`${item.instanceid} is ${selectedItems.indexOf(item) < 0 ? 'not ' : ''}selected`,
}}
filter={
<div className={styles['input-container']}>
<div className={styles['input-filter']}>
<Input
data-testid="input-filter"
type="search"
value={''}
onChange={() => {}}
placeholder="Find instances"
clearAriaLabel="clear"
/>
<I18nProvider messages={[messages]} locale="en">
<AppLayout
ariaLabels={labels}
breadcrumbs={<Breadcrumbs />}
navigation={<Navigation />}
contentType="table"
tools={<Tools>{toolsContent.small}</Tools>}
toolsOpen={toolsOpen}
onToolsChange={({ detail }) => setToolsOpen(detail.open)}
content={
<Table<TableItem>
stickyHeader={true}
header={
<Header
variant="awsui-h1-sticky"
info={<Link variant="info"> Info </Link>}
actions={
<SpaceBetween size="xs" direction="horizontal">
<Checkbox checked={usePropertyFilter} onChange={e => setUsePropertyFilter(e.detail.checked)}>
Use property filter
</Checkbox>
<Checkbox checked={customControl} onChange={e => setCustomControl(e.detail.checked)}>
Custom control slot
</Checkbox>
<Checkbox checked={customAction} onChange={e => setCustomAction(e.detail.checked)}>
Custom action
</Checkbox>
<Checkbox checked={matches} onChange={e => setMatches(e.detail.checked)}>
Show match count
</Checkbox>
</SpaceBetween>
}
>
Instances
</Header>
}
items={items}
variant="full-page"
ariaLabels={{
selectionGroupLabel: 'group label',
allItemsSelectionLabel: ({ selectedItems }) => `${selectedItems.length} item selected`,
itemSelectionLabel: ({ selectedItems }, item) =>
`${item.instanceid} is ${selectedItems.indexOf(item) < 0 ? 'not ' : ''}selected`,
}}
filter={
<div className={styles['input-container']}>
<div className={styles['input-filter']}>
{usePropertyFilter ? (
<PropertyFilter
data-testid="input-filter"
filteringPlaceholder="Find instances"
query={query}
onChange={e => {
setQuery(e.detail);
}}
filteringProperties={filteringProperties}
customControl={customControl && <Button>Filter action</Button>}
additionalActions={customAction && <Button>Filter action</Button>}
countText={matches ? '11 matches' : undefined}
/>
) : (
<Input
data-testid="input-filter"
type="search"
value={textfilter}
onChange={e => setTextfilter(e.detail.value)}
placeholder="Find instances"
clearAriaLabel="clear"
/>
)}
</div>
<div className="select-filter">
<FormField label={'Filter instance type'}>
<Select
data-testid="instance-type-filter"
options={instanceOptions}
selectedAriaLabel="Selected"
selectedOption={instanceOptions[0]}
onChange={() => {}}
expandToViewport={true}
/>
</FormField>
</div>
<div className="select-filter">
<FormField label={'Filter status'}>
<Select
data-testid="state-filter"
options={stateOptions}
selectedAriaLabel="Selected"
selectedOption={stateOptions[0]}
onChange={() => {}}
expandToViewport={true}
/>
</FormField>
</div>
{matches && !usePropertyFilter && <span style={{ lineHeight: '3rem' }}>11 matches</span>}
</div>
<div className="select-filter">
<FormField label={'Filter instance type'}>
<Select
data-testid="instance-type-filter"
options={instanceOptions}
selectedAriaLabel="Selected"
selectedOption={instanceOptions[0]}
onChange={() => {}}
expandToViewport={true}
/>
</FormField>
</div>
<div className="select-filter">
<FormField label={'Filter status'}>
<Select
data-testid="state-filter"
options={stateOptions}
selectedAriaLabel="Selected"
selectedOption={stateOptions[0]}
onChange={() => {}}
expandToViewport={true}
/>
</FormField>
</div>
</div>
}
columnDefinitions={columnDefinitions.slice(0, 7)}
pagination={
<Pagination
{...paginationProps}
ariaLabels={{
nextPageLabel: 'Next page',
paginationLabel: 'Table pagination',
previousPageLabel: 'Previous page',
pageLabel: pageNumber => `Page ${pageNumber}`,
}}
/>
}
preferences={
<CollectionPreferences
title="Preferences"
confirmLabel="Confirm"
cancelLabel="Cancel"
pageSizePreference={{
title: 'Select page size',
options: pageSizeOptions,
}}
visibleContentPreference={{
title: 'Select visible section',
options: [
{
label: 'Instance properties',
options: [
{ id: 'type', label: 'Type', editable: false },
{ id: 'dnsName', label: 'DNS name' },
],
},
],
}}
/>
}
/>
}
/>
}
columnDefinitions={columnDefinitions.slice(0, 7)}
pagination={
<Pagination
{...paginationProps}
ariaLabels={{
nextPageLabel: 'Next page',
paginationLabel: 'Table pagination',
previousPageLabel: 'Previous page',
pageLabel: pageNumber => `Page ${pageNumber}`,
}}
/>
}
preferences={
<CollectionPreferences
title="Preferences"
confirmLabel="Confirm"
cancelLabel="Cancel"
pageSizePreference={{
title: 'Select page size',
options: pageSizeOptions,
}}
visibleContentPreference={{
title: 'Select visible section',
options: [
{
label: 'Instance properties',
options: [
{ id: 'type', label: 'Type', editable: false },
{ id: 'dnsName', label: 'DNS name' },
],
},
],
}}
/>
}
/>
}
/>
</I18nProvider>
);
}
4 changes: 4 additions & 0 deletions src/__tests__/__snapshots__/documenter.test.ts.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10573,6 +10573,10 @@ it removes options that are not currently in view from the DOM.",
},
],
"regions": Array [
Object {
"isDefault": false,
"name": "additionalActions",
},
Object {
"description": "A slot located before the filtering input. Use it if for a Select component if your dataset supports property
filter queries only after an initial filter is applied.",
Expand Down
20 changes: 12 additions & 8 deletions src/property-filter/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,6 +64,7 @@ const PropertyFilter = React.forwardRef(
onLoadItems,
virtualScroll,
customControl,
additionalActions,
filteringPlaceholder,
filteringAriaLabel,
filteringEmpty,
Expand Down Expand Up @@ -388,14 +389,17 @@ const PropertyFilter = React.forwardRef(
limitShowMore: i18nStrings.tokenLimitShowMore,
}}
after={
<InternalButton
formAction="none"
onClick={removeAllTokens}
className={styles['remove-all']}
disabled={disabled}
>
{i18nStrings.clearFiltersText}
</InternalButton>
<>
<InternalButton
formAction="none"
onClick={removeAllTokens}
className={styles['remove-all']}
disabled={disabled}
>
{i18nStrings.clearFiltersText}
</InternalButton>
{additionalActions}
</>
}
removedItemIndex={removedTokenIndex}
/>
Expand Down
1 change: 1 addition & 0 deletions src/property-filter/interfaces.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -131,6 +131,7 @@ export interface PropertyFilterProps extends BaseComponentProps, ExpandToViewpor
* filter queries only after an initial filter is applied.
*/
customControl?: React.ReactNode;
additionalActions?: React.ReactNode;
/**
* Set `asyncProperties` if you need to load `filteringProperties` asynchronousely. This would cause extra `onLoadMore`
* events to fire calling for more properties.
Expand Down
Loading