Skip to content

EDM-4145: Common helperText for unique Name field #704

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
celdrake merged 2 commits into from
Jun 29, 2026
Merged

EDM-4145: Common helperText for unique Name field #704

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
17a5566
EDM-4145: Common helperText for unique Name field
celdrake Jun 10, 2026
6882310
Ensure unified text is displayed for NameField
celdrake Jun 29, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 5 additions & 3 deletions libs/i18n/locales/en/translation.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -146,7 +146,6 @@
"You can turn it off anytime without losing your settings.": "You can turn it off anytime without losing your settings.",
"Enabled provider": "Enabled provider",
"Provider name": "Provider name",
"You can't change the provider name after it's created": "You can't change the provider name after it's created",
"Display name for this provider": "Display name for this provider",
"OIDC": "OIDC",
"Client secret": "Client secret",
Expand Down Expand Up @@ -211,6 +210,7 @@
"View catalog": "View catalog",
"Edit catalog": "Edit catalog",
"Create catalog": "Create catalog",
"The name shown to users in the catalog.": "The name shown to users in the catalog.",
"Short description": "Short description",
"Provider": "Provider",
"Support": "Support",
Expand Down Expand Up @@ -240,8 +240,6 @@
"URI": "URI",
"Artifact URI": "Artifact URI",
"e.g. https://example.com/image.qcow2": "e.g. https://example.com/image.qcow2",
"Artifact name": "Artifact name",
"Optional display name": "Optional display name",
"Remove artifact": "Remove artifact",
"Add artifact": "Add artifact",
"Default configuration": "Default configuration",
Expand Down Expand Up @@ -1091,6 +1089,7 @@
"File must be an image under 256 KB.": "File must be an image under 256 KB.",
"Resolved": "Resolved",
"Name must be unique": "Name must be unique",
"A unique system identifier. Cannot be changed after creation.": "A unique system identifier. Cannot be changed after creation.",
"Available": "Available",
"Missing repository": "Missing repository",
"Repository": "Repository",
Expand Down Expand Up @@ -1358,6 +1357,9 @@
"The existing catalog item will be unaffected.": "The existing catalog item will be unaffected.",
"Failed to delete Image promotion": "Failed to delete Image promotion",
"Catalog item name": "Catalog item name",
"Catalog item display name": "Catalog item display name",
"Catalog item version": "Catalog item version",
"Catalog item readme": "Catalog item readme",
"Markdown documentation for this catalog item": "Markdown documentation for this catalog item",
"Failed to load catalogs": "Failed to load catalogs",
"Failed to load catalog items": "Failed to load catalog items",
Expand Down
1 change: 0 additions & 1 deletion libs/ui-components/src/components/AuthProvider/CreateAuthProvider/CreateAuthProviderForm.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -87,7 +87,6 @@ export const AuthProviderForm = ({ isEdit }: { isEdit?: boolean }) => {
isDisabled={isEdit}
resourceType="authproviders"
validations={getDnsSubdomainValidations(t)}
helperText={t("You can't change the provider name after it's created")}
/>

<FormGroup label={t('Display name')}>
Expand Down
7 changes: 6 additions & 1 deletion libs/ui-components/src/components/Catalog/AddCatalogItemWizard/CreateCatalogModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -111,7 +111,12 @@ const CreateCatalogModal = ({ onClose, onSuccess, catalog }: CreateCatalogModalP
validations={getDnsSubdomainValidations(t)}
/>
<FormGroup label={t('Display name')}>
<TextField name="displayName" aria-label={t('Display name')} isDisabled={isReadOnly} />
<TextField
name="displayName"
aria-label={t('Display name')}
helperText={t('The name shown to users in the catalog.')}
isDisabled={isReadOnly}
/>
</FormGroup>
<FormGroup label={t('Short description')}>
<TextAreaField name="shortDescription" aria-label={t('Short description')} isDisabled={isReadOnly} />
Expand Down
7 changes: 6 additions & 1 deletion libs/ui-components/src/components/Catalog/AddCatalogItemWizard/steps/GeneralInfoStep.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -97,7 +97,12 @@ const GeneralInfoStep = ({ isEdit, isReadOnly }: { isEdit?: boolean; isReadOnly?
validations={getDnsSubdomainValidations(t)}
/>
<FormGroup label={t('Display name')}>
<TextField name="displayName" aria-label={t('Display name')} isDisabled={isReadOnly} />
<TextField
name="displayName"
aria-label={t('Display name')}
helperText={t('The name shown to users in the catalog.')}
isDisabled={isReadOnly}
/>
</FormGroup>
<FormGroup label={t('Icon')}>
<IconUploadField name="icon" isDisabled={isReadOnly} />
Expand Down
5 changes: 2 additions & 3 deletions libs/ui-components/src/components/Catalog/AddCatalogItemWizard/steps/TypeConfigStep.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -135,11 +135,10 @@ const TypeConfigStep = ({ isEdit, isReadOnly }: { isEdit?: boolean; isReadOnly?:
placeholder={t('e.g. https://example.com/image.qcow2', { nsSeparator: '|' })}
/>
</FormGroup>
<FormGroup label={t('Name')}>
<FormGroup label={t('Display name')}>
<TextField
name={`artifacts.${index}.name`}
aria-label={t('Artifact name')}
helperText={t('Optional display name')}
aria-label={t('Display name')}
isDisabled={isReadOnly}
/>
</FormGroup>
Expand Down
16 changes: 11 additions & 5 deletions libs/ui-components/src/components/ImagePromotion/ImagePromotionForm.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,16 +1,16 @@
import * as React from 'react';
import { Alert, Button, FormGroup, FormSection, Spinner, Stack, StackItem } from '@patternfly/react-core';
import { useFormikContext } from 'formik';

import { CatalogItem, CatalogList } from '@flightctl/types/alpha';
import { ExportFormatType } from '@flightctl/types/imagebuilder';
import FlightCtlForm from '../form/FlightCtlForm';
import { useTranslation } from '../../hooks/useTranslation';
import { useFetchPeriodically } from '../../hooks/useFetchPeriodically';
import { CatalogItem, CatalogList } from '@flightctl/types/alpha';
import { ExportFormatType } from '@flightctl/types/imagebuilder';
import FormSelect, { SelectItem } from '../form/FormSelect';
import RadioField from '../form/RadioField';
import TextField from '../form/TextField';
import TextAreaField from '../form/TextAreaField';
import { useFormikContext } from 'formik';
import NameField from '../form/NameField';
import { getDnsSubdomainValidations } from '../form/validations';
import { useCatalogItems } from '../Catalog/useCatalogs';
Expand All @@ -32,14 +32,20 @@ const NewItemForm = ({ isDisabled }: { isDisabled?: boolean }) => {
validations={getDnsSubdomainValidations(t)}
/>
<FormGroup label={t('Display name')}>
<TextField name="newItem.displayName" isDisabled={isDisabled} />
<TextField
name="newItem.displayName"
aria-label={t('Catalog item display name')}
helperText={t('The name shown to users in the catalog.')}
isDisabled={isDisabled}
/>
</FormGroup>
<FormGroup label={t('Version')} isRequired>
<TextField name="newItem.version" isDisabled={isDisabled} />
<TextField name="newItem.version" aria-label={t('Catalog item version')} isDisabled={isDisabled} />
</FormGroup>
<FormGroup label={t('Readme')}>
<TextAreaField
name="newItem.readme"
aria-label={t('Catalog item readme')}
isDisabled={isDisabled}
helperText={t('Markdown documentation for this catalog item')}
/>
Expand Down
19 changes: 14 additions & 5 deletions libs/ui-components/src/components/form/NameField.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ type NameFieldProps = TextFieldProps & {
validations: RichValidationTextFieldProps['validations'];
};

const NameField = ({ name, validations, resourceType, ...rest }: NameFieldProps) => {
const NameField = ({ name, validations, resourceType, helperText, ...rest }: NameFieldProps) => {
const { t } = useTranslation();
const { get } = useFetch();
const [{ value }, { error }, { setError }] = useField<string>(name);
Expand Down Expand Up @@ -69,21 +69,30 @@ const NameField = ({ name, validations, resourceType, ...rest }: NameFieldProps)
...validations,
];

return <RichValidationTextField fieldName={name} validations={allValidations} {...rest} />;
return <RichValidationTextField fieldName={name} validations={allValidations} helperText={helperText} {...rest} />;
};

const NameFieldWrapper = ({ name, isDisabled, validations, resourceType, helperText, ...rest }: NameFieldProps) => {
const NameFieldWrapper = ({ name, isDisabled, validations, resourceType, ...rest }: NameFieldProps) => {
const { t } = useTranslation();
const [{ value }] = useField<string>(name);

if (isDisabled) {
return (
<FormGroup label={rest?.['aria-label']} isRequired={rest.isRequired}>
<TextInput value={value} {...rest} isDisabled />
{helperText && <DefaultHelperText helperText={helperText} />}
<DefaultHelperText helperText={t('A unique system identifier. Cannot be changed after creation.')} />
</FormGroup>
);
}
return <NameField name={name} validations={validations} resourceType={resourceType} {...rest} />;
return (
<NameField
name={name}
validations={validations}
resourceType={resourceType}
{...rest}

@jkilzi jkilzi Jun 21, 2026

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

{...rest} is spread after the explicit helperText prop, so any caller that passes helperText through rest will override the standardised string — defeating the purpose of this PR.

Move {...rest} before helperText so the hardcoded text always wins:

<NameField
  name={name}
  validations={validations}
  resourceType={resourceType}
  {...rest}
  helperText={t('A unique system identifier. Cannot be changed after creation.')}
/>

@celdrake celdrake Jun 29, 2026

Copy link
Copy Markdown
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You are right, fixed now.

helperText={t('A unique system identifier. Cannot be changed after creation.')}
/>
);
};

export default NameFieldWrapper;
6 changes: 5 additions & 1 deletion libs/ui-components/src/components/form/RichValidationTextField.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,8 @@ import dangerColor from '@patternfly/react-tokens/dist/js/t_global_icon_color_st
import successColor from '@patternfly/react-tokens/dist/js/t_global_icon_color_status_success_default';
import infoColor from '@patternfly/react-tokens/dist/js/t_global_color_nonstatus_blue_300';

import { DefaultHelperText } from './FieldHelperText';

interface RichValidationStatusProps {
validations: RichValidationTextFieldProps['validations'];
metaError?: string | Record<string, string>;
Expand Down Expand Up @@ -66,6 +68,7 @@ const RichValidationStatus = ({ isRequired, hasValue, validations, metaError }:
export interface RichValidationTextFieldProps extends TextInputProps {
fieldName: string;
isRequired?: boolean;
helperText?: React.ReactNode;
validations: {
key: string;
message: string;
Expand All @@ -74,7 +77,7 @@ export interface RichValidationTextFieldProps extends TextInputProps {

const RichValidationTextField = React.forwardRef(
(
{ fieldName, validations, isRequired, onBlur, ...rest }: RichValidationTextFieldProps,
{ fieldName, validations, isRequired, helperText, onBlur, ...rest }: RichValidationTextFieldProps,
ref: React.Ref<HTMLInputElement>,
) => {
const [popoverOpen, setPopoverOpen] = React.useState(false);
Expand Down Expand Up @@ -151,6 +154,7 @@ const RichValidationTextField = React.forwardRef(
</Popover>
</InputGroupItem>
</InputGroup>
<DefaultHelperText helperText={helperText} />
</FormGroup>
);
},
Expand Down
Loading