Skip to content

Commit 105c495

Browse files
dlabrecqdlabrecq
committed
Replace remaining deprecated PatternFly Select component
https://issues.redhat.com/browse/COST-4585
1 parent 546de84 commit 105c495

File tree

4 files changed

+83
-55
lines changed

4 files changed

+83
-55
lines changed

‎src/routes/components/selectWrapper/selectWrapper.tsx

+20-5
Original file line numberDiff line numberDiff line change
@@ -12,30 +12,40 @@ export interface SelectWrapperOption {
1212
}
1313

1414
interface SelectWrapperOwnProps {
15+
appendTo?: HTMLElement | (() => HTMLElement) | 'inline' | 'parent';
1516
ariaLabel?: string;
1617
className?: string;
18+
direction?: 'up' | 'down';
1719
id?: string;
1820
isDisabled?: boolean;
21+
maxMenuHeight?: string;
1922
onSelect?: (event, value: SelectWrapperOption) => void;
2023
placeholder?: string;
2124
options?: SelectWrapperOption[];
2225
position?: 'right' | 'left' | 'center' | 'start' | 'end';
2326
selection?: string | SelectWrapperOption;
27+
status?: 'success' | 'warning' | 'danger';
28+
toggleAriaLabel?: string;
2429
toggleIcon?: React.ReactNode;
2530
}
2631

2732
type SelectWrapperProps = SelectWrapperOwnProps;
2833

2934
const SelectWrapper: React.FC<SelectWrapperProps> = ({
35+
appendTo,
3036
ariaLabel,
3137
className,
38+
direction,
3239
id,
3340
isDisabled,
41+
maxMenuHeight,
3442
onSelect = () => {},
3543
options,
3644
placeholder = null,
3745
position,
3846
selection,
47+
status,
48+
toggleAriaLabel,
3949
toggleIcon,
4050
}) => {
4151
const [isOpen, setIsOpen] = useState(false);
@@ -72,11 +82,13 @@ const SelectWrapper: React.FC<SelectWrapperProps> = ({
7282

7383
const toggle = toggleRef => (
7484
<MenuToggle
85+
aria-label={toggleAriaLabel}
7586
icon={toggleIcon && <Icon>{toggleIcon}</Icon>}
7687
isDisabled={isDisabled}
7788
isExpanded={isOpen}
7889
onClick={handleOnToggle}
7990
ref={toggleRef}
91+
status={status}
8092
>
8193
{getPlaceholder()}
8294
</MenuToggle>
@@ -86,14 +98,17 @@ const SelectWrapper: React.FC<SelectWrapperProps> = ({
8698
<div className={className ? `selectWrapper ${className}` : 'selectWrapper'}>
8799
<Select
88100
id={id}
101+
isScrollable={maxMenuHeight !== undefined}
102+
maxMenuHeight={maxMenuHeight}
89103
onOpenChange={isExpanded => setIsOpen(isExpanded)}
90104
onSelect={handleOnSelect}
105+
ouiaId={id}
91106
isOpen={isOpen}
92-
popperProps={
93-
position && {
94-
position,
95-
}
96-
}
107+
popperProps={{
108+
appendTo: appendTo as any,
109+
direction,
110+
position,
111+
}}
97112
selected={selection}
98113
toggle={toggle}
99114
>

‎src/routes/settings/costModels/components/inputs/selector.tsx

+60-47
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,20 @@
11
import type { MessageDescriptor } from '@formatjs/intl/src/types';
2-
import type { FormGroupProps } from '@patternfly/react-core';
3-
import type { FormSelectProps } from '@patternfly/react-core';
2+
import type { FormGroupProps, FormSelectProps } from '@patternfly/react-core';
43
import { FormGroup, HelperText, HelperTextItem } from '@patternfly/react-core';
5-
import type { SelectOptionObject } from '@patternfly/react-core/deprecated';
6-
import { Select, SelectOption, SelectVariant } from '@patternfly/react-core/deprecated';
74
import { intl as defaultIntl } from 'components/i18n';
85
import React, { useEffect, useState } from 'react';
96
import type { WrappedComponentProps } from 'react-intl';
107
import { injectIntl } from 'react-intl';
8+
import type { SelectWrapperOption } from 'routes/components/selectWrapper';
9+
import { SelectWrapper } from 'routes/components/selectWrapper';
1110

1211
interface SelectorFormGroupOwnProps {
1312
helperTextInvalid?: MessageDescriptor | string;
1413
isInvalid?: boolean;
1514
label?: MessageDescriptor | string;
16-
appendMenuTo?: HTMLElement | 'parent' | 'inline' | (() => HTMLElement);
15+
appendMenuTo?: HTMLElement | (() => HTMLElement) | 'inline' | 'parent';
1716
toggleAriaLabel?: string;
18-
maxHeight?: string | number;
17+
maxMenuHeight?: string;
1918
placeholderText?: string;
2019
direction?: 'up' | 'down';
2120
options: {
@@ -25,12 +24,6 @@ interface SelectorFormGroupOwnProps {
2524
}[];
2625
}
2726

28-
interface SelectorOption extends SelectOptionObject {
29-
toString(): string; // label
30-
value?: string;
31-
description?: string;
32-
}
33-
3427
type SelectorFormGroupProps = Pick<FormGroupProps, 'style'>;
3528
type SelectorFormSelectProps = Pick<
3629
FormSelectProps,
@@ -43,25 +36,25 @@ type SelectorProps = SelectorFormGroupOwnProps &
4336
WrappedComponentProps;
4437

4538
const SelectorBase: React.FC<SelectorProps> = ({
39+
appendMenuTo,
4640
'aria-label': ariaLabel,
41+
direction = 'down',
4742
helperTextInvalid: helpText,
4843
id,
4944
intl = defaultIntl, // Default required for testing
50-
toggleAriaLabel,
51-
maxHeight,
52-
placeholderText,
53-
direction = 'down',
5445
isInvalid = false,
5546
isRequired = false,
56-
appendMenuTo = 'parent',
5747
label,
58-
value,
48+
maxMenuHeight,
5949
onChange,
6050
options,
51+
placeholderText,
52+
toggleAriaLabel,
53+
value,
54+
6155
style,
6256
}) => {
63-
const [isOpen, setIsOpen] = useState(false);
64-
const [selection, setSelection] = useState<SelectorOption>(null);
57+
const [selection, setSelection] = useState<SelectWrapperOption>(null);
6558

6659
useEffect(() => {
6760
if (!value) {
@@ -71,47 +64,67 @@ const SelectorBase: React.FC<SelectorProps> = ({
7164
}
7265
}, [value]);
7366

74-
const getSelectorOptions = (): SelectorOption[] => {
75-
const ret = options.map(option => {
67+
const getSelectOptions = (): SelectWrapperOption[] => {
68+
const selectOptions = options.map(option => {
7669
return {
70+
description: option.description,
7771
toString: () => (typeof option.label === 'object' ? intl.formatMessage(option.label) : option.label),
7872
value: option.value,
79-
description: option.description,
80-
} as SelectorOption;
73+
};
8174
});
82-
return ret;
75+
return selectOptions;
8376
};
77+
78+
const handleOnSelect = (_evt, sel: SelectWrapperOption) => {
79+
setSelection(sel);
80+
onChange(null, sel.value);
81+
};
82+
8483
return (
8584
<FormGroup
8685
isRequired={isRequired}
8786
style={style}
8887
fieldId={id}
8988
label={label !== null && typeof label === 'object' ? intl.formatMessage(label) : (label as string)}
9089
>
91-
<Select
90+
TEST
91+
<SelectWrapper
92+
appendTo={appendMenuTo}
93+
ariaLabel={ariaLabel}
94+
direction={direction}
9295
id={id}
93-
ouiaId={id}
94-
maxHeight={maxHeight}
96+
maxMenuHeight={maxMenuHeight}
97+
onSelect={handleOnSelect}
98+
options={getSelectOptions()}
99+
placeholder={placeholderText}
100+
selection={selection}
101+
status={isInvalid ? 'danger' : undefined}
95102
toggleAriaLabel={toggleAriaLabel}
96-
variant={SelectVariant.single}
97-
placeholderText={placeholderText}
98-
aria-label={ariaLabel}
99-
direction={direction}
100-
menuAppendTo={appendMenuTo}
101-
isOpen={isOpen}
102-
onSelect={(_evt, sel: SelectorOption) => {
103-
setSelection(sel);
104-
onChange(null, sel.value);
105-
setIsOpen(false);
106-
}}
107-
onToggle={() => setIsOpen(!isOpen)}
108-
selections={selection}
109-
validated={isInvalid ? 'error' : 'default'}
110-
>
111-
{getSelectorOptions().map(opt => (
112-
<SelectOption key={`${opt.value}`} value={opt} description={opt.description} />
113-
))}
114-
</Select>
103+
/>
104+
{/* <Select*/}
105+
{/* id={id}*/}
106+
{/* ouiaId={id}*/}
107+
{/* maxHeight={maxHeight}*/}
108+
{/* toggleAriaLabel={toggleAriaLabel}*/}
109+
{/* variant={SelectVariant.single}*/}
110+
{/* placeholderText={placeholderText}*/}
111+
{/* aria-label={ariaLabel}*/}
112+
{/* direction={direction}*/}
113+
{/* menuAppendTo={appendMenuTo}*/}
114+
{/* isOpen={isOpen}*/}
115+
{/* onSelect={(_evt, sel: SelectWrapperOption) => {*/}
116+
{/* setSelection(sel);*/}
117+
{/* onChange(null, sel.value);*/}
118+
{/* setIsOpen(false);*/}
119+
{/* }}*/}
120+
{/* onToggle={() => setIsOpen(!isOpen)}*/}
121+
{/* selections={selection}*/}
122+
{/* validated={isInvalid ? 'error' : 'default'}*/}
123+
{/* >*/}
124+
{/* {getSelectorOptions().map(opt => (*/}
125+
{/* <SelectOption key={`${opt.value}`} value={opt} description={opt.description} />*/}
126+
{/* ))}*/}
127+
{/* </Select>*/}
115128
{isInvalid && typeof helpText === 'object' && (
116129
<HelperText>
117130
<HelperTextItem variant="error">{intl.formatMessage(helpText)}</HelperTextItem>

‎src/routes/settings/costModels/costModel/updateCostModel.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -146,7 +146,7 @@ class UpdateCostModelBase extends React.Component<UpdateCostModelProps, UpdateCo
146146
label={messages.currency}
147147
direction="up"
148148
appendMenuTo="inline"
149-
maxHeight={styles.selector.maxHeight}
149+
maxMenuHeight={styles.selector.maxHeight as string}
150150
toggleAriaLabel={intl.formatMessage(messages.costModelsWizardCurrencyToggleLabel)}
151151
value={getValueLabel(this.state.currency, currencyOptions)}
152152
onChange={(_evt, value) => this.setState({ currency: value })}

‎src/routes/settings/costModels/costModelWizard/generalInformation.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -133,7 +133,7 @@ class GeneralInformation extends React.Component<GeneralInformationProps, any> {
133133
id="source-type-selector"
134134
direction="up"
135135
appendMenuTo="inline"
136-
maxHeight={styles.selector.maxHeight}
136+
maxMenuHeight={styles.selector.maxHeight as string}
137137
label={messages.sourceType}
138138
toggleAriaLabel={intl.formatMessage(messages.costModelsWizardEmptySourceTypeLabel)}
139139
placeholderText={intl.formatMessage(messages.costModelsWizardEmptySourceTypeLabel)}
@@ -145,7 +145,7 @@ class GeneralInformation extends React.Component<GeneralInformationProps, any> {
145145
label={messages.currency}
146146
direction="up"
147147
appendMenuTo="inline"
148-
maxHeight={styles.selector.maxHeight}
148+
maxMenuHeight={styles.selector.maxHeight as string}
149149
toggleAriaLabel={intl.formatMessage(messages.costModelsWizardCurrencyToggleLabel)}
150150
value={getValueLabel(currencyUnits, currencyOptions)}
151151
onChange={(_evt, value) => onCurrencyChange(value)}

0 commit comments

Comments
 (0)