Skip to content

Commit 9b20485

Browse files
jgyselovjgyselov
authored
Refactor LabelsField component (#3354)
1 parent 972258b commit 9b20485

File tree

4 files changed

+84
-107
lines changed

4 files changed

+84
-107
lines changed

‎libs/locales/lib/en/translation.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -318,13 +318,13 @@
318318
"ai:Enable in cluster": "Enable in cluster",
319319
"ai:Enabled for the installation": "Enabled for the installation",
320320
"ai:Ensure the host is running, responsive, and is able to contact the installer.": "Ensure the host is running, responsive, and is able to contact the installer.",
321+
"ai:Enter a key=value and then press 'enter' or 'space' or use a ',' to input the label.": "Enter a key=value and then press 'enter' or 'space' or use a ',' to input the label.",
321322
"ai:Enter a password for the BMC": "Enter a password for the BMC",
322323
"ai:Enter a username for the BMC": "Enter a username for the BMC",
323324
"ai:Enter an address": "Enter an address",
324325
"ai:Enter cluster name": "Enter cluster name",
325326
"ai:Enter geographic location for the environment": "Enter geographic location for the environment",
326327
"ai:Enter infrastructure environment name": "Enter infrastructure environment name",
327-
"ai:Enter key=value and then press 'enter' or 'space' or use a ',' to input the label.": "Enter key=value and then press 'enter' or 'space' or use a ',' to input the label.",
328328
"ai:Enter the hostname for the Host": "Enter the hostname for the Host",
329329
"ai:Enter the name for the Host": "Enter the name for the Host",
330330
"ai:Error": "Error",

‎libs/ui-lib/lib/cim/components/InfraEnv/EnvironmentDetails.tsx‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -12,14 +12,15 @@ import {
1212
ContentVariants,
1313
Title,
1414
TitleSizes,
15+
Label,
1516
} from '@patternfly/react-core';
1617
import { CheckCircleIcon } from '@patternfly/react-icons/dist/js/icons/check-circle-icon';
1718
import { ExclamationTriangleIcon } from '@patternfly/react-icons/dist/js/icons/exclamation-triangle-icon';
1819
import { PencilAltIcon } from '@patternfly/react-icons/dist/js/icons/pencil-alt-icon';
1920
import { t_global_color_status_success_default as okColor } from '@patternfly/react-tokens/dist/js/t_global_color_status_success_default';
2021
import { t_global_icon_color_status_warning_default as warningColor } from '@patternfly/react-tokens/dist/js/t_global_icon_color_status_warning_default';
2122

22-
import { architectureData, LabelValue } from '../../../common';
23+
import { architectureData } from '../../../common';
2324
import { InfraEnvK8sResource, SecretK8sResource } from '../../types';
2425
import { AGENT_LOCATION_LABEL_KEY } from '../common';
2526
import EditPullSecretModal, { EditPullSecretModalProps } from '../modals/EditPullSecretModal';
@@ -173,7 +174,9 @@ const EnvironmentDetails: React.FC<EnvironmentDetailsProps> = ({
173174
<DescriptionListTerm>{t('ai:Labels')}</DescriptionListTerm>
174175
<DescriptionListDescription>
175176
{Object.keys(infraEnv.metadata?.labels || {}).map((k) => (
176-
<LabelValue key={k} value={`${k}=${infraEnv.metadata?.labels?.[k] || ''}`} />
177+
<Label key={k}>
178+
{k}={infraEnv.metadata?.labels?.[k] || ''}
179+
</Label>
177180
))}
178181
</DescriptionListDescription>
179182
</DescriptionListGroup>
@@ -209,7 +212,7 @@ const EnvironmentDetails: React.FC<EnvironmentDetailsProps> = ({
209212
<DescriptionListDescription>
210213
{infraEnv.spec?.proxy?.noProxy
211214
?.split(',')
212-
.map((k) => <LabelValue key={k} value={`${k}`} />) || <NotConfigured />}
215+
.map((k) => <Label key={k}>{k}</Label>) || <NotConfigured />}
213216
</DescriptionListDescription>
214217
</>
215218
)}

‎libs/ui-lib/lib/common/components/ui/formik/LabelField.css‎

Lines changed: 0 additions & 43 deletions
This file was deleted.

‎libs/ui-lib/lib/common/components/ui/formik/LabelField.tsx‎

Lines changed: 77 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -6,32 +6,15 @@ import {
66
HelperText,
77
HelperTextItem,
88
Label,
9+
TextInput,
910
} from '@patternfly/react-core';
11+
import ExclamationCircleIcon from '@patternfly/react-icons/dist/js/icons/exclamation-circle-icon';
1012
import TagsInput from 'react-tagsinput';
1113
import { InputFieldProps } from './types';
1214
import { getFieldId } from './utils';
13-
14-
import './LabelField.css';
1515
import { useTranslation } from '../../../hooks/use-translation-wrapper';
16-
import ExclamationCircleIcon from '@patternfly/react-icons/dist/js/icons/exclamation-circle-icon';
17-
18-
type LabelValueProps = {
19-
value: React.ReactText;
20-
onClose?: () => void;
21-
};
22-
23-
export const LabelValue: React.FC<LabelValueProps> = ({ value, onClose }) => (
24-
<Label className="label-field__value" variant="outline" onClose={onClose}>
25-
{value}
26-
</Label>
27-
);
2816

29-
type LabelFieldProps = InputFieldProps & {
30-
// eslint-disable-next-line
31-
onChange?: (tags: any[]) => void;
32-
};
33-
34-
export const LabelField: React.FC<LabelFieldProps> = ({
17+
export const LabelField = ({
3518
label,
3619
labelIcon,
3720
helperText,
@@ -40,6 +23,9 @@ export const LabelField: React.FC<LabelFieldProps> = ({
4023
validate,
4124
idPostfix,
4225
...props
26+
}: InputFieldProps & {
27+
// eslint-disable-next-line
28+
onChange?: (tags: any[]) => void;
4329
}) => {
4430
const { t } = useTranslation();
4531
const [input, setInput] = React.useState('');
@@ -53,49 +39,80 @@ export const LabelField: React.FC<LabelFieldProps> = ({
5339

5440
return (
5541
<FormGroup fieldId={fieldId} label={label} isRequired={isRequired} labelHelp={labelIcon}>
56-
{t("ai:Enter key=value and then press 'enter' or 'space' or use a ',' to input the label.")}
57-
<div className="co-search-input pf-v6-c-form-control">
58-
<TagsInput
59-
{...field}
60-
onChange={(tags) => {
61-
setValue(tags);
62-
setInput('');
63-
onChange && onChange(tags);
64-
!touched && setTouched(true);
65-
}}
66-
addKeys={[13, 32, 188]}
67-
renderTag={({ tag, key, onRemove, getTagDisplayValue }) => (
68-
<LabelValue key={key} onClose={() => onRemove(key)} value={getTagDisplayValue(tag)} />
69-
)}
70-
addOnBlur
71-
inputProps={{
72-
autoFocus: false,
73-
className: 'label-field__input',
74-
// eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
75-
placeholder: field.value?.length ? '' : 'app=frontend',
76-
spellCheck: 'false',
77-
id: 'tags-input',
78-
value: input,
79-
// eslint-disable-next-line
80-
onChange: (e: any) => setInput(e.target.value),
81-
['data-test']: 'tags-input',
82-
}}
83-
/>
84-
</div>
85-
{(errorMessage || helperText) && (
86-
<FormHelperText>
87-
<HelperText>
42+
<TagsInput
43+
{...field}
44+
onChange={(tags) => {
45+
setValue(tags);
46+
setInput('');
47+
onChange && onChange(tags);
48+
!touched && setTouched(true);
49+
}}
50+
addKeys={[13, 32, 188]}
51+
renderTag={({ tag, key, onRemove, getTagDisplayValue }) => (
52+
<Label key={key} style={{ margin: 2 }} onClose={() => onRemove(key)}>
53+
{getTagDisplayValue(tag)}
54+
</Label>
55+
)}
56+
renderInput={({ value, onChange, ...rest }) => (
57+
<TextInput
58+
onChange={onChange as (e: unknown) => void}
59+
value={value as string}
60+
{...rest}
61+
/>
62+
)}
63+
renderLayout={(tagElements, inputElement) => (
64+
<div
65+
className="pf-v6-c-form-control"
66+
style={{
67+
padding: 0,
68+
paddingTop: '1px',
69+
display: 'flex',
70+
alignItems: 'start',
71+
flexWrap: 'wrap',
72+
height: 'unset',
73+
minHeight: '36px',
74+
}}
75+
>
76+
<div>{tagElements}</div>
77+
{inputElement}
78+
</div>
79+
)}
80+
addOnBlur
81+
inputProps={{
82+
autoFocus: false,
83+
// eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
84+
placeholder: field.value?.length ? '' : 'app=frontend',
85+
spellCheck: 'false',
86+
value: input,
87+
// eslint-disable-next-line
88+
onChange: (e: any) => setInput(e.target.value),
89+
['data-test']: fieldId,
90+
}}
91+
/>
92+
93+
<FormHelperText>
94+
<HelperText>
95+
<HelperTextItem
96+
id={`${fieldId}-helper-text`}
97+
data-testid={`input-label-${fieldId}-helper-text`}
98+
>
99+
{helperText ||
100+
t(
101+
"ai:Enter a key=value and then press 'enter' or 'space' or use a ',' to input the label.",
102+
)}
103+
</HelperTextItem>
104+
{errorMessage && (
88105
<HelperTextItem
89-
icon={errorMessage && <ExclamationCircleIcon />}
90-
variant={errorMessage ? 'error' : 'default'}
91-
id={errorMessage ? `${fieldId}-helper-error` : `${fieldId}-helper`}
92-
data-testid={`input-label-${fieldId}-helper-text`}
106+
icon={<ExclamationCircleIcon />}
107+
variant={'error'}
108+
id={`${fieldId}-helper-error`}
109+
data-testid={`input-label-${fieldId}-helper-error`}
93110
>
94-
{errorMessage ? errorMessage : helperText}
111+
{errorMessage}
95112
</HelperTextItem>
96-
</HelperText>
97-
</FormHelperText>
98-
)}
113+
)}
114+
</HelperText>
115+
</FormHelperText>
99116
</FormGroup>
100117
);
101118
};

0 commit comments

Comments
 (0)