Skip to content

Commit eb10e67

Browse files
Jo-LillieJo-Lillie
committed
(CISC-2409) Quick filter with no options
1 parent 6023820 commit eb10e67

File tree

8 files changed

+378
-15
lines changed

8 files changed

+378
-15
lines changed

‎package-lock.json

+5
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+3-1
Original file line numberDiff line numberDiff line change
@@ -19,5 +19,7 @@
1919
"engines": {
2020
"node": "12.4.0"
2121
},
22-
"dependencies": {}
22+
"dependencies": {
23+
"classnames": "^2.3.1"
24+
}
2325
}

‎packages/data-grid/src/__test__/__snapshots__/quickFitler.test.jsx.snap

+202-6
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22

33
exports[`Snapshot test Check component matches previous HTML snapshot 1`] = `
44
<QuickFilter
5+
emptyFilterLabel="test empty filter label"
56
filters={
67
Array [
78
Object {
@@ -46,6 +47,11 @@ exports[`Snapshot test Check component matches previous HTML snapshot 1`] = `
4647
},
4748
],
4849
},
50+
Object {
51+
"field": "Empty-array",
52+
"fieldLabel": "Empty filter",
53+
"options": Array [],
54+
},
4955
]
5056
}
5157
onFilterSelect={[MockFunction]}
@@ -57,7 +63,7 @@ exports[`Snapshot test Check component matches previous HTML snapshot 1`] = `
5763
className="dg-quick-filter-filters"
5864
>
5965
<ButtonSelect
60-
className="dg-quick-filter"
66+
className="dg-quick-filter-filter dg-quick-filter"
6167
id="quick-filter-All-Operating-System-0"
6268
key="1"
6369
onChange={[Function]}
@@ -86,7 +92,7 @@ exports[`Snapshot test Check component matches previous HTML snapshot 1`] = `
8692
<ButtonSelect
8793
anchor="bottom left"
8894
applyImmediately={false}
89-
className="dg-quick-filter"
95+
className="dg-quick-filter-filter dg-quick-filter"
9096
disabled={false}
9197
icon={null}
9298
id="quick-filter-All-Operating-System-0"
@@ -121,7 +127,7 @@ exports[`Snapshot test Check component matches previous HTML snapshot 1`] = `
121127
width={null}
122128
>
123129
<div
124-
className="rc-button-select rc-button-select-closed dg-quick-filter"
130+
className="rc-button-select rc-button-select-closed dg-quick-filter-filter dg-quick-filter"
125131
onBlur={[Function]}
126132
style={Object {}}
127133
>
@@ -409,7 +415,7 @@ exports[`Snapshot test Check component matches previous HTML snapshot 1`] = `
409415
</ButtonSelect>
410416
</ButtonSelect>
411417
<ButtonSelect
412-
className="dg-quick-filter"
418+
className="dg-quick-filter-filter dg-quick-filter"
413419
id="quick-filter-Puppet-installed-1"
414420
key="2"
415421
onChange={[Function]}
@@ -438,7 +444,7 @@ exports[`Snapshot test Check component matches previous HTML snapshot 1`] = `
438444
<ButtonSelect
439445
anchor="bottom left"
440446
applyImmediately={false}
441-
className="dg-quick-filter"
447+
className="dg-quick-filter-filter dg-quick-filter"
442448
disabled={false}
443449
icon={null}
444450
id="quick-filter-Puppet-installed-1"
@@ -473,7 +479,7 @@ exports[`Snapshot test Check component matches previous HTML snapshot 1`] = `
473479
width={null}
474480
>
475481
<div
476-
className="rc-button-select rc-button-select-closed dg-quick-filter"
482+
className="rc-button-select rc-button-select-closed dg-quick-filter-filter dg-quick-filter"
477483
onBlur={[Function]}
478484
style={Object {}}
479485
>
@@ -760,6 +766,196 @@ exports[`Snapshot test Check component matches previous HTML snapshot 1`] = `
760766
</div>
761767
</ButtonSelect>
762768
</ButtonSelect>
769+
<ButtonSelect
770+
className="dg-quick-filter-filter dg-quick-filter dg-quick-filter-empty"
771+
id="quick-filter-Empty-array-2"
772+
key="3"
773+
onChange={[Function]}
774+
options={
775+
Array [
776+
Object {
777+
"disabled": true,
778+
"label": "test empty filter label",
779+
"value": "",
780+
},
781+
]
782+
}
783+
placeholder="Empty filter"
784+
type="tertiary"
785+
>
786+
<ButtonSelect
787+
anchor="bottom left"
788+
applyImmediately={false}
789+
className="dg-quick-filter-filter dg-quick-filter dg-quick-filter-empty"
790+
disabled={false}
791+
icon={null}
792+
id="quick-filter-Empty-array-2"
793+
innerFocus={false}
794+
loading={false}
795+
multiple={false}
796+
onChange={[Function]}
797+
options={
798+
Array [
799+
Object {
800+
"disabled": true,
801+
"label": "test empty filter label",
802+
"value": "",
803+
},
804+
]
805+
}
806+
placeholder="Empty filter"
807+
style={Object {}}
808+
type="tertiary"
809+
value={null}
810+
weight="bold"
811+
width={null}
812+
>
813+
<div
814+
className="rc-button-select rc-button-select-closed dg-quick-filter-filter dg-quick-filter dg-quick-filter-empty"
815+
onBlur={[Function]}
816+
style={Object {}}
817+
>
818+
<Button
819+
aria-controls="quick-filter-Empty-array-2-menu"
820+
aria-expanded={false}
821+
aria-haspopup="true"
822+
as="button"
823+
className="rc-button-select-target"
824+
disabled={false}
825+
forwardRefAs="ref"
826+
icon={null}
827+
iconSize="medium"
828+
innerFocus={false}
829+
loading={false}
830+
onClick={[Function]}
831+
style={null}
832+
trailingIcon="chevron-down"
833+
type="tertiary"
834+
weight="bold"
835+
>
836+
<button
837+
aria-controls="quick-filter-Empty-array-2-menu"
838+
aria-expanded={false}
839+
aria-haspopup="true"
840+
aria-label="Empty filter"
841+
className="rc-button rc-button-tertiary rc-button-bold rc-button-trailing-icon rc-button-full rc-button-select-target"
842+
disabled={false}
843+
onClick={[Function]}
844+
style={null}
845+
type="button"
846+
>
847+
<span
848+
className="rc-button-content"
849+
>
850+
Empty filter
851+
</span>
852+
<Icon
853+
className="rc-button-icon-svg"
854+
size="medium"
855+
style={Object {}}
856+
svg={null}
857+
type="chevron-down"
858+
viewBox={null}
859+
>
860+
<svg
861+
className="rc-icon rc-icon-chevron-down rc-button-icon-svg"
862+
height="16px"
863+
style={
864+
Object {
865+
"height": "16px",
866+
"width": "16px",
867+
}
868+
}
869+
viewBox="0 0 16 16"
870+
width="16px"
871+
>
872+
<path
873+
d="M8,8.58578644 L10.2928932,6.29289322 C10.6834175,5.90236893 11.3165825,5.90236893 11.7071068,6.29289322 C12.0976311,6.68341751 12.0976311,7.31658249 11.7071068,7.70710678 L8.70710678,10.7071068 C8.31658249,11.0976311 7.68341751,11.0976311 7.29289322,10.7071068 L4.29289322,7.70710678 C3.90236893,7.31658249 3.90236893,6.68341751 4.29289322,6.29289322 C4.68341751,5.90236893 5.31658249,5.90236893 5.70710678,6.29289322 L8,8.58578644 Z"
874+
fillRule="evenodd"
875+
/>
876+
</svg>
877+
</Icon>
878+
</button>
879+
</Button>
880+
<OptionMenuList
881+
actionLabel="Apply"
882+
aria-labelledby="quick-filter-Empty-array-2"
883+
autocomplete={false}
884+
cancelLabel="Cancel"
885+
className=""
886+
focusedIndex={0}
887+
footer={null}
888+
id="quick-filter-Empty-array-2-menu"
889+
multiple={false}
890+
onActionClick={[Function]}
891+
onBlur={[Function]}
892+
onChange={[Function]}
893+
onClickItem={[Function]}
894+
onEscape={[Function]}
895+
onFocusItem={[Function]}
896+
options={
897+
Array [
898+
Object {
899+
"disabled": true,
900+
"label": "test empty filter label",
901+
"value": "",
902+
},
903+
]
904+
}
905+
selected={null}
906+
showCancel={false}
907+
style={Object {}}
908+
>
909+
<div
910+
className="rc-menu-list rc-option-menu-list-single"
911+
style={Object {}}
912+
>
913+
<ul
914+
aria-activedescendant="quick-filter-Empty-array-2-menu-"
915+
aria-labelledby="quick-filter-Empty-array-2"
916+
aria-multiselectable={false}
917+
className="rc-menu-list-inner"
918+
id="quick-filter-Empty-array-2-menu"
919+
onBlur={[Function]}
920+
onChange={[Function]}
921+
onFocus={[Function]}
922+
onKeyDown={[Function]}
923+
role="listbox"
924+
tabIndex={0}
925+
>
926+
<ForwardRef
927+
disabled={true}
928+
focused={true}
929+
icon={null}
930+
id="quick-filter-Empty-array-2-menu-"
931+
key=""
932+
onClick={[Function]}
933+
onMouseEnter={[Function]}
934+
selected={false}
935+
svg={null}
936+
type="option"
937+
>
938+
<li
939+
aria-selected={false}
940+
className="rc-menu-list-item rc-menu-list-item-disabled rc-menu-list-item-focused"
941+
id="quick-filter-Empty-array-2-menu-"
942+
onClick={[Function]}
943+
onMouseEnter={[Function]}
944+
role="option"
945+
>
946+
<span
947+
className="rc-menu-list-item-content"
948+
>
949+
test empty filter label
950+
</span>
951+
</li>
952+
</ForwardRef>
953+
</ul>
954+
</div>
955+
</OptionMenuList>
956+
</div>
957+
</ButtonSelect>
958+
</ButtonSelect>
763959
</div>
764960
</div>
765961
</QuickFilter>

‎packages/data-grid/src/__test__/quickFitler.test.jsx

+34-3
Original file line numberDiff line numberDiff line change
@@ -48,22 +48,53 @@ const filters = [
4848
},
4949
],
5050
},
51+
{
52+
fieldLabel: 'Empty filter',
53+
field: 'Empty-array',
54+
options: [],
55+
},
5156
];
5257

58+
const emptyFilterLabel = 'test empty filter label';
59+
5360
const mockfunc = jest.fn();
5461
const wrapper = mount(
55-
<QuickFilter filters={filters} onFilterSelect={mockfunc} />,
62+
<QuickFilter
63+
filters={filters}
64+
onFilterSelect={mockfunc}
65+
emptyFilterLabel={emptyFilterLabel}
66+
/>,
5667
);
57-
5868
describe('Snapshot test', () => {
5969
test('Check component matches previous HTML snapshot', () => {
6070
expect(wrapper).toMatchSnapshot();
6171
});
6272
});
6373

74+
describe('Check total number of quick filters', () => {
75+
test('Number of quick filters rendered', () => {
76+
expect(wrapper.find('div.dg-quick-filter-filter')).toHaveLength(3);
77+
});
78+
});
79+
80+
describe('Check number of empty quick filters', () => {
81+
test('Number of empty quick filters rendered', () => {
82+
expect(wrapper.find('div.dg-quick-filter-empty')).toHaveLength(1);
83+
});
84+
85+
test('Empty filter label text', () => {
86+
expect(
87+
wrapper
88+
.find('div.dg-quick-filter-empty')
89+
.find('span.rc-menu-list-item-content')
90+
.text(),
91+
).toEqual('test empty filter label');
92+
});
93+
});
94+
6495
describe('Check component', () => {
6596
test('Number of dropdowns rendered ', () => {
66-
expect(wrapper.find('ButtonSelect.dg-quick-filter')).toHaveLength(4);
97+
expect(wrapper.find('ButtonSelect.dg-quick-filter')).toHaveLength(6);
6798
});
6899

69100
test('onFilterSelect function gets called', () => {

0 commit comments

Comments
 (0)