Skip to content

Commit c9526fb

Browse files
mcanoymcanoy
authored
fix double click on engagement status. add filter by engagement list (#588)
1 parent 6928c37 commit c9526fb

File tree

11 files changed

+426
-31
lines changed

11 files changed

+426
-31
lines changed

‎deployment/templates/buildconfig.yaml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ spec:
2020
uri: {{ .Values.git.uri }}
2121
type: Git
2222
dockerfile: |
23-
FROM node:12.2.0-alpine AS builder
23+
FROM quay.io/jitesoft/node:12 AS builder
2424
WORKDIR /app
2525
COPY . /app
2626
RUN ./build.sh

‎src/common/engagement_filter_factory.ts‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -48,6 +48,13 @@ export const engagementFilterFactory = (
4848
filter.engagementRegions.includes(engagement.engagement_region)
4949
);
5050
}
51+
52+
if(filter.engagementTypes && filter.engagementTypes.length > 0) {
53+
filterTestResults.push(
54+
filter.engagementTypes.includes(engagement.engagement_type)
55+
);
56+
}
57+
5158
/**
5259
* If filterTestResult has a length of 0, this means no tests were performed.
5360
* The default behavior of the filter should be to show engagements.

‎src/components/engagement_filter_bar/__tests__/__snapshots__/engagement_filter_bar.spec.tsx.snap‎

Lines changed: 158 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -106,7 +106,7 @@ Object {
106106
<span
107107
class="pf-c-select__toggle-text"
108108
>
109-
Engagement Status
109+
Status
110110
</span>
111111
</div>
112112
<span
@@ -138,12 +138,85 @@ Object {
138138
>
139139
<button
140140
aria-disabled="false"
141-
aria-label="engagement regions"
141+
aria-label="engagement types"
142142
class="pf-c-button pf-m-control"
143143
data-ouia-component-id="OUIA-Generated-Button-control-3"
144144
data-ouia-component-type="PF4/Button"
145145
data-ouia-safe="true"
146146
type="button"
147+
>
148+
<svg
149+
aria-hidden="true"
150+
fill="currentColor"
151+
height="1em"
152+
role="img"
153+
style="vertical-align: -0.125em;"
154+
viewBox="0 0 512 512"
155+
width="1em"
156+
>
157+
<path
158+
d="M487.976 0H24.028C2.71 0-8.047 25.866 7.058 40.971L192 225.941V432c0 7.831 3.821 15.17 10.237 19.662l80 55.98C298.02 518.69 320 507.493 320 487.98V225.941l184.947-184.97C520.021 25.896 509.338 0 487.976 0z"
159+
/>
160+
</svg>
161+
</button>
162+
<div
163+
class="pf-c-select"
164+
data-ouia-component-id="OUIA-Generated-Select-checkbox-1"
165+
data-ouia-component-type="PF4/Select"
166+
data-ouia-safe="true"
167+
>
168+
<button
169+
aria-expanded="false"
170+
aria-label="Options menu"
171+
aria-labelledby=" type_dropdown"
172+
class="pf-c-select__toggle"
173+
id="type_dropdown"
174+
type="button"
175+
>
176+
<div
177+
class="pf-c-select__toggle-wrapper"
178+
>
179+
<span
180+
class="pf-c-select__toggle-text"
181+
>
182+
Type
183+
</span>
184+
</div>
185+
<span
186+
class="pf-c-select__toggle-arrow"
187+
>
188+
<svg
189+
aria-hidden="true"
190+
fill="currentColor"
191+
height="1em"
192+
role="img"
193+
style="vertical-align: -0.125em;"
194+
viewBox="0 0 320 512"
195+
width="1em"
196+
>
197+
<path
198+
d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
199+
/>
200+
</svg>
201+
</span>
202+
</button>
203+
</div>
204+
</div>
205+
</div>
206+
<div
207+
class=""
208+
>
209+
<div
210+
class="pf-c-input-group"
211+
>
212+
<button
213+
aria-disabled="false"
214+
aria-label="engagement regions"
215+
class="pf-c-button pf-m-control"
216+
data-ouia-component-id="OUIA-Generated-Button-control-4"
217+
data-ouia-component-type="PF4/Button"
218+
data-ouia-safe="true"
219+
type="button"
147220
>
148221
<svg
149222
aria-hidden="true"
@@ -161,7 +234,7 @@ Object {
161234
</button>
162235
<div
163236
class="pf-c-select"
164-
data-ouia-component-id="OUIA-Generated-Select-checkbox-1"
237+
data-ouia-component-id="OUIA-Generated-Select-checkbox-2"
165238
data-ouia-component-type="PF4/Select"
166239
data-ouia-safe="true"
167240
>
@@ -179,7 +252,7 @@ Object {
179252
<span
180253
class="pf-c-select__toggle-text"
181254
>
182-
Engagement Region
255+
Region
183256
</span>
184257
</div>
185258
<span
@@ -213,7 +286,7 @@ Object {
213286
aria-disabled="false"
214287
aria-label="search button for search input"
215288
class="pf-c-button pf-m-control"
216-
data-ouia-component-id="OUIA-Generated-Button-control-4"
289+
data-ouia-component-id="OUIA-Generated-Button-control-5"
217290
data-ouia-component-type="PF4/Button"
218291
data-ouia-safe="true"
219292
type="button"
@@ -253,7 +326,7 @@ Object {
253326
<span
254327
class="pf-c-select__toggle-text"
255328
>
256-
Sort by
329+
Sort
257330
</span>
258331
</div>
259332
<span
@@ -398,7 +471,7 @@ Object {
398471
<span
399472
class="pf-c-select__toggle-text"
400473
>
401-
Engagement Status
474+
Status
402475
</span>
403476
</div>
404477
<span
@@ -430,12 +503,85 @@ Object {
430503
>
431504
<button
432505
aria-disabled="false"
433-
aria-label="engagement regions"
506+
aria-label="engagement types"
434507
class="pf-c-button pf-m-control"
435508
data-ouia-component-id="OUIA-Generated-Button-control-3"
436509
data-ouia-component-type="PF4/Button"
437510
data-ouia-safe="true"
438511
type="button"
512+
>
513+
<svg
514+
aria-hidden="true"
515+
fill="currentColor"
516+
height="1em"
517+
role="img"
518+
style="vertical-align: -0.125em;"
519+
viewBox="0 0 512 512"
520+
width="1em"
521+
>
522+
<path
523+
d="M487.976 0H24.028C2.71 0-8.047 25.866 7.058 40.971L192 225.941V432c0 7.831 3.821 15.17 10.237 19.662l80 55.98C298.02 518.69 320 507.493 320 487.98V225.941l184.947-184.97C520.021 25.896 509.338 0 487.976 0z"
524+
/>
525+
</svg>
526+
</button>
527+
<div
528+
class="pf-c-select"
529+
data-ouia-component-id="OUIA-Generated-Select-checkbox-1"
530+
data-ouia-component-type="PF4/Select"
531+
data-ouia-safe="true"
532+
>
533+
<button
534+
aria-expanded="false"
535+
aria-label="Options menu"
536+
aria-labelledby=" type_dropdown"
537+
class="pf-c-select__toggle"
538+
id="type_dropdown"
539+
type="button"
540+
>
541+
<div
542+
class="pf-c-select__toggle-wrapper"
543+
>
544+
<span
545+
class="pf-c-select__toggle-text"
546+
>
547+
Type
548+
</span>
549+
</div>
550+
<span
551+
class="pf-c-select__toggle-arrow"
552+
>
553+
<svg
554+
aria-hidden="true"
555+
fill="currentColor"
556+
height="1em"
557+
role="img"
558+
style="vertical-align: -0.125em;"
559+
viewBox="0 0 320 512"
560+
width="1em"
561+
>
562+
<path
563+
d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
564+
/>
565+
</svg>
566+
</span>
567+
</button>
568+
</div>
569+
</div>
570+
</div>
571+
<div
572+
class=""
573+
>
574+
<div
575+
class="pf-c-input-group"
576+
>
577+
<button
578+
aria-disabled="false"
579+
aria-label="engagement regions"
580+
class="pf-c-button pf-m-control"
581+
data-ouia-component-id="OUIA-Generated-Button-control-4"
582+
data-ouia-component-type="PF4/Button"
583+
data-ouia-safe="true"
584+
type="button"
439585
>
440586
<svg
441587
aria-hidden="true"
@@ -453,7 +599,7 @@ Object {
453599
</button>
454600
<div
455601
class="pf-c-select"
456-
data-ouia-component-id="OUIA-Generated-Select-checkbox-1"
602+
data-ouia-component-id="OUIA-Generated-Select-checkbox-2"
457603
data-ouia-component-type="PF4/Select"
458604
data-ouia-safe="true"
459605
>
@@ -471,7 +617,7 @@ Object {
471617
<span
472618
class="pf-c-select__toggle-text"
473619
>
474-
Engagement Region
620+
Region
475621
</span>
476622
</div>
477623
<span
@@ -505,7 +651,7 @@ Object {
505651
aria-disabled="false"
506652
aria-label="search button for search input"
507653
class="pf-c-button pf-m-control"
508-
data-ouia-component-id="OUIA-Generated-Button-control-4"
654+
data-ouia-component-id="OUIA-Generated-Button-control-5"
509655
data-ouia-component-type="PF4/Button"
510656
data-ouia-safe="true"
511657
type="button"
@@ -545,7 +691,7 @@ Object {
545691
<span
546692
class="pf-c-select__toggle-text"
547693
>
548-
Sort by
694+
Sort
549695
</span>
550696
</div>
551697
<span

‎src/components/engagement_filter_bar/components/engagement_status_select.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@ export function EngagementStatusSelect({
3737
<FilterIcon />
3838
</Button>
3939
<Select
40-
placeholderText="Engagement Status"
40+
placeholderText="Status"
4141
toggleId={'filter_dropdown'}
4242
isOpen={isStatusSelectOpen}
4343
onToggle={() => setIsStatusSelectOpen(!isStatusSelectOpen)}

‎src/components/engagement_filter_bar/components/region_select.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ export function EngagementRegionSelect(props: EngagementRegionSelectProps) {
2323
</Button>
2424
<Select
2525
data-testid="region"
26-
placeholderText="Engagement Region"
26+
placeholderText="Region"
2727
isOpen={isOpen}
2828
onToggle={() => setIsOpen(!isOpen)}
2929
variant={SelectVariant.checkbox}

‎src/components/engagement_filter_bar/components/sort_select.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -71,7 +71,7 @@ export function SortSelect({ filter, onChange }: EngagementFilterProps) {
7171
<SortAmountDownIcon />
7272
</Button>
7373
<Select
74-
placeholderText="Sort by"
74+
placeholderText="Sort"
7575
isOpen={isSortSelectOpen}
7676
onToggle={() => setIsSortSelectOpen(!isSortSelectOpen)}
7777
toggleId={'sort_dropdown'}

‎src/components/engagement_filter_bar/components/type_select.tsx‎

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
import React, { useState } from 'react';
2+
import {
3+
InputGroup,
4+
Button,
5+
Select,
6+
SelectOption,
7+
SelectOptionObject,
8+
SelectVariant,
9+
} from '@patternfly/react-core';
10+
import { FilterIcon } from '@patternfly/react-icons';
11+
12+
export interface EngagementTypeSelectProps {
13+
selectedOptions: string[];
14+
types: Array<{ label: string; value: string }>;
15+
onChange: (option: string) => void;
16+
}
17+
export function EngagementTypeSelect(props: EngagementTypeSelectProps) {
18+
const [isOpen, setIsOpen] = useState<boolean>(false);
19+
return (
20+
<InputGroup>
21+
<Button variant="control" aria-label="engagement types">
22+
<FilterIcon />
23+
</Button>
24+
<Select
25+
data-testid="type"
26+
placeholderText="Type"
27+
isOpen={isOpen}
28+
onToggle={() => setIsOpen(!isOpen)}
29+
variant={SelectVariant.checkbox}
30+
toggleId="type_dropdown"
31+
selections={props?.selectedOptions}
32+
onSelect={(_, selection: string | SelectOptionObject) => {
33+
setIsOpen(!isOpen);
34+
props.onChange(selection as string);
35+
}}
36+
>
37+
{[
38+
<SelectOption key="any" value="any">
39+
Any
40+
</SelectOption>,
41+
...props.types.map(type => {
42+
return (
43+
<SelectOption
44+
key={type.value}
45+
data-testid={`engagement_type`}
46+
value={type.value}
47+
>
48+
{type.label}
49+
</SelectOption>
50+
);
51+
}),
52+
]}
53+
</Select>
54+
</InputGroup>
55+
);
56+
}

0 commit comments

Comments
 (0)