Skip to content

Commit 012672f

Browse files
jpinsonneaujpinsonneau
committed
fix dropdown events
1 parent c3e60d2 commit 012672f

23 files changed

+283
-338
lines changed

‎web/package-lock.json‎

Lines changed: 0 additions & 49 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎web/package.json‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,6 @@
4545
"@types/port-numbers": "^5.0.0",
4646
"@types/react": "^17.0.1",
4747
"@types/react-dom": "^17.0.1",
48-
"@types/react-modal": "^3.13.1",
4948
"@types/react-router": "5.1.20",
5049
"@types/react-router-dom": "^5.3.3",
5150
"@types/react-transition-group": "^4.4.4",
@@ -125,7 +124,6 @@
125124
"react": "^17.0.2",
126125
"react-dom": "^17.0.2",
127126
"react-i18next": "^11.8.11",
128-
"react-modal": "^3.14.4",
129127
"react-router": "^5.3.0",
130128
"react-router-dom": "^5.3.0",
131129
"victory": "^37.3.6"

‎web/src/components/dropdowns/group-dropdown.tsx‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ export interface GroupDropdownProps {
1212
setGroupType: (v: TopologyGroupTypes) => void;
1313
id?: string;
1414
scopes: ScopeConfigDef[];
15+
appendTo?: () => HTMLElement;
1516
}
1617

1718
export const GroupDropdown: React.FC<GroupDropdownProps> = ({
@@ -20,7 +21,8 @@ export const GroupDropdown: React.FC<GroupDropdownProps> = ({
2021
selected,
2122
setGroupType,
2223
id,
23-
scopes
24+
scopes,
25+
appendTo
2426
}) => {
2527
const { t } = useTranslation('plugin__netobserv-plugin');
2628
const [isOpen, setOpen] = React.useState(false);
@@ -30,6 +32,9 @@ export const GroupDropdown: React.FC<GroupDropdownProps> = ({
3032
data-test={id}
3133
id={id}
3234
isOpen={isOpen}
35+
popperProps={{
36+
appendTo
37+
}}
3338
toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
3439
<MenuToggle
3540
ref={toggleRef}

‎web/src/components/dropdowns/layout-dropdown.tsx‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,9 +8,10 @@ export interface LayoutDropdownProps {
88
selected: LayoutName;
99
setLayout: (l: LayoutName) => void;
1010
id?: string;
11+
appendTo?: () => HTMLElement;
1112
}
1213

13-
export const LayoutDropdown: React.FC<LayoutDropdownProps> = ({ selected, setLayout, id }) => {
14+
export const LayoutDropdown: React.FC<LayoutDropdownProps> = ({ selected, setLayout, id, appendTo }) => {
1415
const { t } = useTranslation('plugin__netobserv-plugin');
1516
const [isOpen, setOpen] = React.useState(false);
1617

@@ -46,6 +47,9 @@ export const LayoutDropdown: React.FC<LayoutDropdownProps> = ({ selected, setLay
4647
data-test={id}
4748
id={id}
4849
isOpen={isOpen}
50+
popperProps={{
51+
appendTo
52+
}}
4953
toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
5054
<MenuToggle
5155
ref={toggleRef}

‎web/src/components/dropdowns/metric-function-dropdown.tsx‎

Lines changed: 37 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -12,12 +12,14 @@ export interface MetricFunctionDropdownProps {
1212
setMetricFunction: (v: StatFunction) => void;
1313
metricType?: MetricType;
1414
id?: string;
15+
appendTo?: () => HTMLElement;
1516
}
1617

1718
export const MetricFunctionDropdown: React.FC<MetricFunctionDropdownProps> = ({
1819
selected,
1920
setMetricFunction,
2021
metricType,
22+
appendTo,
2123
id
2224
}) => {
2325
const { t } = useTranslation('plugin__netobserv-plugin');
@@ -60,42 +62,42 @@ export const MetricFunctionDropdown: React.FC<MetricFunctionDropdownProps> = ({
6062
);
6163

6264
return (
63-
<div id={`${id}-container`} ref={ref}>
64-
<Dropdown
65-
data-test={id}
66-
id={id}
67-
isOpen={isOpen}
68-
popperProps={{
69-
position: 'right'
70-
}}
71-
toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
72-
<MenuToggle
73-
ref={toggleRef}
74-
data-test={`${id}-dropdown`}
75-
id={`${id}-dropdown`}
76-
isExpanded={isOpen}
77-
onClick={() => setOpen(!isOpen)}
65+
<Dropdown
66+
data-test={id}
67+
id={id}
68+
ref={ref}
69+
isOpen={isOpen}
70+
popperProps={{
71+
position: 'right',
72+
appendTo
73+
}}
74+
toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
75+
<MenuToggle
76+
ref={toggleRef}
77+
data-test={`${id}-dropdown`}
78+
id={`${id}-dropdown`}
79+
isExpanded={isOpen}
80+
onClick={() => setOpen(!isOpen)}
81+
>
82+
{getMetricDisplay(selected as StatFunction)}
83+
</MenuToggle>
84+
)}
85+
>
86+
{isOpen &&
87+
getAvailableFunctions().map(v => (
88+
<DropdownItem
89+
data-test={v}
90+
id={v}
91+
key={v}
92+
onClick={() => {
93+
setOpen(false);
94+
setMetricFunction(v);
95+
}}
7896
>
79-
{getMetricDisplay(selected as StatFunction)}
80-
</MenuToggle>
81-
)}
82-
>
83-
{isOpen &&
84-
getAvailableFunctions().map(v => (
85-
<DropdownItem
86-
data-test={v}
87-
id={v}
88-
key={v}
89-
onClick={() => {
90-
setOpen(false);
91-
setMetricFunction(v);
92-
}}
93-
>
94-
{getMetricDisplay(v)}
95-
</DropdownItem>
96-
))}
97-
</Dropdown>
98-
</div>
97+
{getMetricDisplay(v)}
98+
</DropdownItem>
99+
))}
100+
</Dropdown>
99101
);
100102
};
101103

‎web/src/components/dropdowns/metric-type-dropdown.tsx‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,13 +8,15 @@ export interface MetricTypeDropdownProps {
88
setMetricType: (v: MetricType) => void;
99
allowedTypes: MetricType[];
1010
id?: string;
11+
appendTo?: () => HTMLElement;
1112
}
1213

1314
export const MetricTypeDropdown: React.FC<MetricTypeDropdownProps> = ({
1415
selected,
1516
setMetricType,
1617
id,
17-
allowedTypes
18+
allowedTypes,
19+
appendTo
1820
}) => {
1921
const { t } = useTranslation('plugin__netobserv-plugin');
2022
const [isOpen, setOpen] = React.useState(false);
@@ -47,7 +49,8 @@ export const MetricTypeDropdown: React.FC<MetricTypeDropdownProps> = ({
4749
id={id}
4850
isOpen={isOpen}
4951
popperProps={{
50-
position: 'right'
52+
position: 'right',
53+
appendTo
5154
}}
5255
toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
5356
<MenuToggle

‎web/src/components/dropdowns/overview-display-dropdown.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
.display-dropdown-padding {
22
display: block !important;
3-
padding-top: 1rem !important;
43
padding-left: 2rem !important;
54
padding-right: 1rem !important;
65
}
@@ -18,4 +17,5 @@
1817

1918
#overview-display-dropdown {
2019
min-width: 230px;
20+
overflow: visible;
2121
}

‎web/src/components/dropdowns/overview-display-dropdown.tsx‎

Lines changed: 23 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -30,31 +30,32 @@ export const OverviewDisplayDropdown: React.FC<OverviewDisplayDropdownProps> = (
3030
scopes
3131
}) => {
3232
const { t } = useTranslation('plugin__netobserv-plugin');
33+
const id = 'overview-display-dropdown';
3334
const ref = useOutsideClickEvent(() => setOpen(false));
3435
const [isOpen, setOpen] = React.useState<boolean>(false);
3536
return (
36-
<div id="display-dropdown-container" data-test="display-dropdown-container" ref={ref}>
37-
<Select
38-
id="overview-display-dropdown"
39-
placeholder={t('Display options')}
40-
isOpen={isOpen}
41-
toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
42-
<MenuToggle ref={toggleRef} onClick={() => setOpen(!isOpen)} isExpanded={isOpen}>
43-
{t('Display options')}
44-
</MenuToggle>
45-
)}
46-
>
47-
<OverviewDisplayOptions
48-
metricScope={metricScope}
49-
setMetricScope={setMetricScope}
50-
truncateLength={truncateLength}
51-
setTruncateLength={setTruncateLength}
52-
focus={focus}
53-
setFocus={setFocus}
54-
scopes={scopes}
55-
/>
56-
</Select>
57-
</div>
37+
<Select
38+
id={id}
39+
placeholder={t('Display options')}
40+
ref={ref}
41+
isOpen={isOpen}
42+
toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
43+
<MenuToggle ref={toggleRef} onClick={() => setOpen(!isOpen)} isExpanded={isOpen}>
44+
{t('Display options')}
45+
</MenuToggle>
46+
)}
47+
>
48+
<OverviewDisplayOptions
49+
metricScope={metricScope}
50+
setMetricScope={setMetricScope}
51+
truncateLength={truncateLength}
52+
setTruncateLength={setTruncateLength}
53+
focus={focus}
54+
setFocus={setFocus}
55+
scopes={scopes}
56+
appendTo={() => document.getElementById(id)!}
57+
/>
58+
</Select>
5859
);
5960
};
6061

‎web/src/components/dropdowns/overview-display-options.tsx‎

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ export interface OverviewDisplayOptionsProps {
1818
focus: boolean;
1919
setFocus: (v: boolean) => void;
2020
scopes: ScopeConfigDef[];
21+
appendTo?: () => HTMLElement;
2122
}
2223

2324
export const OverviewDisplayOptions: React.FC<OverviewDisplayOptionsProps> = ({
@@ -27,7 +28,8 @@ export const OverviewDisplayOptions: React.FC<OverviewDisplayOptionsProps> = ({
2728
setTruncateLength,
2829
focus,
2930
setFocus,
30-
scopes
31+
scopes,
32+
appendTo
3133
}) => {
3234
const { t } = useTranslation('plugin__netobserv-plugin');
3335

@@ -48,6 +50,7 @@ export const OverviewDisplayOptions: React.FC<OverviewDisplayOptionsProps> = ({
4850
selected={metricScope}
4951
setScopeType={setMetricScope}
5052
scopes={scopes}
53+
appendTo={appendTo}
5154
/>
5255
</div>
5356
</div>
@@ -60,7 +63,12 @@ export const OverviewDisplayOptions: React.FC<OverviewDisplayOptionsProps> = ({
6063
</div>
6164
</Tooltip>
6265
<div className="display-dropdown-padding">
63-
<TruncateDropdown id="truncate" selected={truncateLength} setTruncateLength={setTruncateLength} />
66+
<TruncateDropdown
67+
id="truncate"
68+
selected={truncateLength}
69+
setTruncateLength={setTruncateLength}
70+
appendTo={appendTo}
71+
/>
6472
</div>
6573
</div>
6674
<div className="pf-v6-c-menu__group">

0 commit comments

Comments
 (0)