From 17a5566c7ff709c6f13d9f0860a69b6daff29454 Mon Sep 17 00:00:00 2001 From: Celia Amador Date: Wed, 10 Jun 2026 13:47:54 +0200 Subject: [PATCH 1/2] EDM-4145: Common helperText for unique Name field Made-with: Cursor --- libs/i18n/locales/en/translation.json | 8 +++++--- .../CreateAuthProviderForm.tsx | 1 - .../CreateCatalogModal.tsx | 7 ++++++- .../steps/GeneralInfoStep.tsx | 7 ++++++- .../steps/TypeConfigStep.tsx | 5 ++--- .../ImagePromotion/ImagePromotionForm.tsx | 16 +++++++++++----- .../src/components/form/NameField.tsx | 19 ++++++++++++++----- .../form/RichValidationTextField.tsx | 6 +++++- 8 files changed, 49 insertions(+), 20 deletions(-) diff --git a/libs/i18n/locales/en/translation.json b/libs/i18n/locales/en/translation.json index e45250668..17e09582b 100644 --- a/libs/i18n/locales/en/translation.json +++ b/libs/i18n/locales/en/translation.json @@ -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", @@ -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", @@ -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", @@ -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", @@ -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", diff --git a/libs/ui-components/src/components/AuthProvider/CreateAuthProvider/CreateAuthProviderForm.tsx b/libs/ui-components/src/components/AuthProvider/CreateAuthProvider/CreateAuthProviderForm.tsx index 61b8c72f4..5b933dcc2 100644 --- a/libs/ui-components/src/components/AuthProvider/CreateAuthProvider/CreateAuthProviderForm.tsx +++ b/libs/ui-components/src/components/AuthProvider/CreateAuthProvider/CreateAuthProviderForm.tsx @@ -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")} /> diff --git a/libs/ui-components/src/components/Catalog/AddCatalogItemWizard/CreateCatalogModal.tsx b/libs/ui-components/src/components/Catalog/AddCatalogItemWizard/CreateCatalogModal.tsx index d795cd36d..0de5ec7be 100644 --- a/libs/ui-components/src/components/Catalog/AddCatalogItemWizard/CreateCatalogModal.tsx +++ b/libs/ui-components/src/components/Catalog/AddCatalogItemWizard/CreateCatalogModal.tsx @@ -111,7 +111,12 @@ const CreateCatalogModal = ({ onClose, onSuccess, catalog }: CreateCatalogModalP validations={getDnsSubdomainValidations(t)} /> - + diff --git a/libs/ui-components/src/components/Catalog/AddCatalogItemWizard/steps/GeneralInfoStep.tsx b/libs/ui-components/src/components/Catalog/AddCatalogItemWizard/steps/GeneralInfoStep.tsx index efe3d9778..2ab3821b9 100644 --- a/libs/ui-components/src/components/Catalog/AddCatalogItemWizard/steps/GeneralInfoStep.tsx +++ b/libs/ui-components/src/components/Catalog/AddCatalogItemWizard/steps/GeneralInfoStep.tsx @@ -97,7 +97,12 @@ const GeneralInfoStep = ({ isEdit, isReadOnly }: { isEdit?: boolean; isReadOnly? validations={getDnsSubdomainValidations(t)} /> - + diff --git a/libs/ui-components/src/components/Catalog/AddCatalogItemWizard/steps/TypeConfigStep.tsx b/libs/ui-components/src/components/Catalog/AddCatalogItemWizard/steps/TypeConfigStep.tsx index 30bd080a1..b236e4fd9 100644 --- a/libs/ui-components/src/components/Catalog/AddCatalogItemWizard/steps/TypeConfigStep.tsx +++ b/libs/ui-components/src/components/Catalog/AddCatalogItemWizard/steps/TypeConfigStep.tsx @@ -135,11 +135,10 @@ const TypeConfigStep = ({ isEdit, isReadOnly }: { isEdit?: boolean; isReadOnly?: placeholder={t('e.g. https://example.com/image.qcow2', { nsSeparator: '|' })} /> - + diff --git a/libs/ui-components/src/components/ImagePromotion/ImagePromotionForm.tsx b/libs/ui-components/src/components/ImagePromotion/ImagePromotionForm.tsx index e2fa57721..8f0ed55d7 100644 --- a/libs/ui-components/src/components/ImagePromotion/ImagePromotionForm.tsx +++ b/libs/ui-components/src/components/ImagePromotion/ImagePromotionForm.tsx @@ -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'; @@ -32,14 +32,20 @@ const NewItemForm = ({ isDisabled }: { isDisabled?: boolean }) => { validations={getDnsSubdomainValidations(t)} /> - + - + diff --git a/libs/ui-components/src/components/form/NameField.tsx b/libs/ui-components/src/components/form/NameField.tsx index ed8c97d54..d00929c3b 100644 --- a/libs/ui-components/src/components/form/NameField.tsx +++ b/libs/ui-components/src/components/form/NameField.tsx @@ -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(name); @@ -69,21 +69,30 @@ const NameField = ({ name, validations, resourceType, ...rest }: NameFieldProps) ...validations, ]; - return ; + return ; }; -const NameFieldWrapper = ({ name, isDisabled, validations, resourceType, helperText, ...rest }: NameFieldProps) => { +const NameFieldWrapper = ({ name, isDisabled, validations, resourceType, ...rest }: NameFieldProps) => { + const { t } = useTranslation(); const [{ value }] = useField(name); if (isDisabled) { return ( - {helperText && } + ); } - return ; + return ( + + ); }; export default NameFieldWrapper; diff --git a/libs/ui-components/src/components/form/RichValidationTextField.tsx b/libs/ui-components/src/components/form/RichValidationTextField.tsx index 1167cd600..36d95ace5 100644 --- a/libs/ui-components/src/components/form/RichValidationTextField.tsx +++ b/libs/ui-components/src/components/form/RichValidationTextField.tsx @@ -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; @@ -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; @@ -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, ) => { const [popoverOpen, setPopoverOpen] = React.useState(false); @@ -151,6 +154,7 @@ const RichValidationTextField = React.forwardRef( + ); }, From 6882310eba6b00690cc493387c8da2c19bf2d77d Mon Sep 17 00:00:00 2001 From: Celia Amador Date: Mon, 29 Jun 2026 11:37:31 +0200 Subject: [PATCH 2/2] Ensure unified text is displayed for NameField Made-with: Cursor --- libs/ui-components/src/components/form/NameField.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/libs/ui-components/src/components/form/NameField.tsx b/libs/ui-components/src/components/form/NameField.tsx index d00929c3b..223dbc8ea 100644 --- a/libs/ui-components/src/components/form/NameField.tsx +++ b/libs/ui-components/src/components/form/NameField.tsx @@ -89,8 +89,8 @@ const NameFieldWrapper = ({ name, isDisabled, validations, resourceType, ...rest name={name} validations={validations} resourceType={resourceType} - helperText={t('A unique system identifier. Cannot be changed after creation.')} {...rest} + helperText={t('A unique system identifier. Cannot be changed after creation.')} /> ); };