Skip to content

Commit daedcc2

Browse files
rhamiltorhamilto
committed
CONSOLE-4496: Replace custom Checkbox filter with PatternFly Switch
1 parent 9d09302 commit daedcc2

4 files changed

Lines changed: 58 additions & 125 deletions

File tree

‎frontend/public/components/_row-filter.scss‎

Lines changed: 3 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -1,70 +1,12 @@
1-
@import '~@patternfly/patternfly/sass-utilities/index';
2-
31
.co-row-filter {
4-
margin-bottom: var(--pf-t--global--spacer--xl);
5-
position: relative;
6-
7-
// use pseudo element for border so that .pf-v6-c-toggle-group__item(s) overlap
82
@media screen and (min-width: $pf-v6-global--breakpoint--md) {
9-
&::before {
10-
border: var(--pf-t--global--border--width--regular) solid
11-
var(--pf-t--global--border--color--default);
12-
border-radius: var(--pf-t--global--border--radius--tiny);
13-
bottom: 0;
14-
content: '';
15-
left: 0;
16-
position: absolute;
17-
right: 0;
18-
top: 0;
19-
}
20-
}
21-
22-
.pf-v6-c-toggle-group {
23-
overflow: auto;
24-
}
25-
26-
.pf-v6-c-toggle-group__button {
27-
align-items: baseline;
28-
display: flex;
29-
text-decoration: none;
30-
}
31-
32-
.pf-v6-c-toggle-group__item:first-child .pf-v6-c-toggle-group__button {
33-
&,
34-
&::before {
35-
border-bottom-left-radius: var(--pf-t--global--border--radius--tiny);
36-
border-top-left-radius: var(--pf-t--global--border--radius--tiny);
37-
}
38-
}
39-
}
40-
41-
// .pf-v6-c-toggle-group has a default border-radius
42-
// Since .co-row-filter wraps both .pf-v6-c-toggle-group and .co-row-filter__items with a boxed border at > 768px,
43-
// we move the top-right & bottom-right radius from .pf-v6-c-toggle-group__item:list-child to the right side of the .co-row-filter box.
44-
@media screen and (min-width: $pf-v6-global--breakpoint--md) {
45-
.co-row-filter .pf-v6-c-toggle-group__item:last-child .pf-v6-c-toggle-group__button,
46-
.co-row-filter .pf-v6-c-toggle-group__item:last-child .pf-v6-c-toggle-group__button::before {
47-
border-bottom-right-radius: 0;
48-
border-top-right-radius: 0;
3+
border: var(--pf-t--global--border--width--regular) solid
4+
var(--pf-t--global--border--color--default);
5+
border-radius: var(--pf-t--global--border--radius--tiny);
496
}
507
}
518

529
.co-row-filter__items {
5310
font-weight: var(--pf-t--global--font--weight--body--bold);
5411
white-space: nowrap;
55-
56-
@media screen and (min-width: $pf-v6-global--breakpoint--md) {
57-
padding: 0 var(--pf-t--global--spacer--md);
58-
}
59-
}
60-
61-
.co-row-filter__number-bubble {
62-
border: var(--pf-t--global--border--width--regular) solid var(--pf-t--global--border--color--default);
63-
border-radius: var(--pf-t--global--border--radius--tiny);
64-
margin-right: var(--pf-t--global--spacer--sm);
65-
padding: 0 3px;
66-
67-
&.co-row-filter__number-bubble--active {
68-
border-color: var(--pf-t--color--blue--40);
69-
}
7012
}

‎frontend/public/components/api-explorer.tsx‎

Lines changed: 41 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,9 @@ import {
1313
ToolbarContent,
1414
ToolbarItem,
1515
ToolbarToggleGroup,
16+
Switch,
17+
FlexItem,
18+
Flex,
1619
} from '@patternfly/react-core';
1720
import { FilterIcon } from '@patternfly/react-icons/dist/esm/icons/filter-icon';
1821
import { sortable } from '@patternfly/react-table';
@@ -38,7 +41,7 @@ import {
3841
} from '../module/k8s';
3942
import { connectToFlags } from '../reducers/connectToFlags';
4043
import { RootState } from '../redux';
41-
import { CheckBox, CheckBoxControls } from './row-filter';
44+
import { RowFilter } from './row-filter';
4245
import { DefaultPage } from './default-resource';
4346
import { Table, TextFilter } from './factory';
4447
import { exactMatch, fuzzyCaseInsensitive } from './factory/table-filters';
@@ -586,17 +589,14 @@ const APIResourceAccessReview: React.FC<APIResourceTabProps> = ({
586589
]);
587590

588591
// event handlers
589-
const toggleShowUsers = (e: React.MouseEvent<HTMLAnchorElement>) => {
590-
e.preventDefault();
591-
setShowUsers(!showUsers);
592+
const toggleShowUsers = (e: React.FormEvent<HTMLInputElement>, checked: boolean) => {
593+
setShowUsers(checked);
592594
};
593-
const toggleShowGroups = (e: React.MouseEvent<HTMLAnchorElement>) => {
594-
e.preventDefault();
595-
setShowGroups(!showGroups);
595+
const toggleShowGroups = (e: React.FormEvent<HTMLInputElement>, checked: boolean) => {
596+
setShowGroups(checked);
596597
};
597-
const toggleShowServiceAccounts = (e: React.MouseEvent<HTMLAnchorElement>) => {
598-
e.preventDefault();
599-
setShowServiceAccounts(!showServiceAccounts);
598+
const toggleShowServiceAccounts = (e: React.FormEvent<HTMLInputElement>, checked: boolean) => {
599+
setShowServiceAccounts(checked);
600600
};
601601
const onSelectAll = (e: React.MouseEvent<HTMLButtonElement>) => {
602602
e.preventDefault();
@@ -625,31 +625,42 @@ const APIResourceAccessReview: React.FC<APIResourceTabProps> = ({
625625
</div>
626626
</div>
627627
<div className="co-m-pane__body">
628-
<CheckBoxControls
628+
<RowFilter
629629
allSelected={allSelected}
630630
itemCount={itemCount}
631631
selectedCount={selectedCount}
632632
onSelectAll={onSelectAll}
633633
>
634-
<CheckBox
635-
title={t('public~User')}
636-
active={showUsers}
637-
number={users.length}
638-
toggle={toggleShowUsers}
639-
/>
640-
<CheckBox
641-
title={t('public~Group')}
642-
active={showGroups}
643-
number={groups.length}
644-
toggle={toggleShowGroups}
645-
/>
646-
<CheckBox
647-
title={t('public~ServiceAccount')}
648-
active={showServiceAccounts}
649-
number={serviceAccounts.length}
650-
toggle={toggleShowServiceAccounts}
651-
/>
652-
</CheckBoxControls>
634+
<Flex>
635+
<FlexItem>
636+
<Switch
637+
id="user-switch"
638+
label={t('public~{{count}} User', { count: users.length })}
639+
isChecked={showUsers}
640+
onChange={toggleShowUsers}
641+
ouiaId="UserSwitch"
642+
/>
643+
</FlexItem>
644+
<FlexItem>
645+
<Switch
646+
id="group-switch"
647+
label={t('public~{{count}} Group', { count: groups.length })}
648+
isChecked={showGroups}
649+
onChange={toggleShowGroups}
650+
ouiaId="GroupSwitch"
651+
/>
652+
</FlexItem>
653+
<FlexItem>
654+
<Switch
655+
id="service-account-switch"
656+
label={t('public~{{count}} ServiceAccount', { count: serviceAccounts.length })}
657+
isChecked={showServiceAccounts}
658+
onChange={toggleShowServiceAccounts}
659+
ouiaId="ServiceAccountSwitch"
660+
/>
661+
</FlexItem>
662+
</Flex>
663+
</RowFilter>
653664
<p className="co-m-pane__explanation">
654665
{namespaced &&
655666
namespace &&

‎frontend/public/components/row-filter.jsx‎

Lines changed: 8 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,45 +1,19 @@
11
/* eslint-disable tsdoc/syntax */
22
import * as React from 'react';
3-
import * as classNames from 'classnames';
4-
import { Button, Divider, Flex, FlexItem, ToggleGroup } from '@patternfly/react-core';
3+
import { Button, Divider, Flex, FlexItem } from '@patternfly/react-core';
54
import { useTranslation } from 'react-i18next';
65

7-
export const CheckBox = ({ title, active, number, toggle }) => {
8-
const klass = classNames('pf-v6-c-toggle-group__button', {
9-
'pf-m-selected co-row-filter__box--active': active,
10-
'pf-m-disabled': !number,
11-
});
12-
13-
return (
14-
<div className="pf-v6-c-toggle-group__item">
15-
<a href="#" onClick={toggle} className={klass}>
16-
<span
17-
className={classNames('co-row-filter__number-bubble', {
18-
'co-row-filter__number-bubble--active': active,
19-
})}
20-
>
21-
{number}
22-
</span>
23-
{title}
24-
</a>
25-
</div>
26-
);
27-
};
28-
29-
export const CheckBoxControls = ({
30-
allSelected,
31-
itemCount,
32-
selectedCount,
33-
onSelectAll,
34-
children,
35-
}) => {
6+
export const RowFilter = ({ allSelected, itemCount, selectedCount, onSelectAll, children }) => {
367
const { t } = useTranslation();
378
return (
38-
<Flex className="co-row-filter" direction={{ default: 'column', md: 'row' }}>
39-
<ToggleGroup>{children}</ToggleGroup>
9+
<Flex
10+
className="co-row-filter pf-v6-u-mb-lg pf-v6-u-px-sm-on-md pf-v6-u-py-sm-on-md"
11+
direction={{ default: 'column', md: 'row' }}
12+
>
13+
{children}
4014
<Divider className="pf-v6-u-hidden-on-md" />
4115
<Flex flex={{ default: 'flex_1' }}>
42-
<FlexItem>
16+
<FlexItem className="pf-v6-u-ml-md-on-md">
4317
<Button
4418
disabled={allSelected}
4519
type="button"

‎frontend/public/locales/en/public.json‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,12 @@
4444
"ServiceAccount": "ServiceAccount",
4545
"Verb": "Verb",
4646
"by subject": "by subject",
47+
"{{count}} User_one": "{{count}} User",
48+
"{{count}} User_other": "{{count}} Users",
49+
"{{count}} Group_one": "{{count}} Group",
50+
"{{count}} Group_other": "{{count}} Groups",
51+
"{{count}} ServiceAccount_one": "{{count}} ServiceAccount",
52+
"{{count}} ServiceAccount_other": "{{count}} ServiceAccounts",
4753
"The following subjects can {{verb}} {{plural}} in namespace {{ namespace }}": "The following subjects can {{verb}} {{plural}} in namespace {{ namespace }}",
4854
"The following subjects can {{verb}} {{plural}} in all namespaces": "The following subjects can {{verb}} {{plural}} in all namespaces",
4955
"The following subjects can {{verb}} {{plural}} at the cluster scope": "The following subjects can {{verb}} {{plural}} at the cluster scope",

0 commit comments

Comments
 (0)