= (props) => {
const { t } = useForkliftTranslation();
- const urlValidationHook: ValidationHookType = (value) => {
- const isValidURL = validateURL(value.toString().trim());
+ const helperTextMsgs = {
+ error: (
+
+
+ Error: The format of the provided URL is invalid. Ensure the URL includes a scheme, a
+ domain name, and a path. For example:{' '}
+ https://identity_service.com:5000/v3.
+
+
+ ),
+ warning: (
+
+
+ Warning: The provided URL does not end with the API endpoint path:
+
+ {'"'}/v3{'"'}
+
+ {'. '}
+ Ensure the URL includes the correct path. For example:{' '}
+ https://identity_service.com:5000/v3.
+
+
+ ),
+ success: (
+
+
+ For example: https://identity_service.com:5000/v3.
+
+
+ ),
+ default: (
+
+
+ For example: https://identity_service.com:5000/v3.
+
+
+ ),
+ };
- return isValidURL
- ? {
- validationHelpText: undefined,
- validated: 'success',
- }
- : {
- validationHelpText: t(
- 'URL must start with https:// or http:// and contain valid hostname and path',
- ),
- validated: 'error',
- };
+ const urlValidationHook: ValidationHookType = (value) => {
+ const trimmedUrl: string = value.toString().trim();
+ const isValidURL = validateURL(trimmedUrl);
+ // error
+ if (!isValidURL)
+ return {
+ validationHelpText: helperTextMsgs.error,
+ validated: 'error',
+ };
+ // warning
+ if (!trimmedUrl.endsWith('v3') && !trimmedUrl.endsWith('v3/'))
+ return {
+ validationHelpText: helperTextMsgs.warning,
+ validated: 'warning',
+ };
+ // success
+ return {
+ validationHelpText: helperTextMsgs.success,
+ validated: 'success',
+ };
};
return (
@@ -37,10 +83,8 @@ export const OpenstackEditURLModal: React.FC = (props
label={props?.label || t('URL')}
model={ProviderModel}
variant={ModalVariant.large}
- body={t(
- 'Specify OpenStack Identity (Keystone) endpoint, for example, http://controller:5000/v3.',
- )}
- helperText={t('Please enter URL for OpenStack services REST APIs.')}
+ body={t('URL of the OpenStack Identity (Keystone) endpoint.')}
+ helperText={helperTextMsgs.default}
onConfirmHook={patchProviderURL}
validationHook={urlValidationHook}
/>
diff --git a/packages/forklift-console-plugin/src/modules/Providers/views/create/components/OpenstackProviderCreateForm.tsx b/packages/forklift-console-plugin/src/modules/Providers/views/create/components/OpenstackProviderCreateForm.tsx
index df202099f..da9fe8988 100644
--- a/packages/forklift-console-plugin/src/modules/Providers/views/create/components/OpenstackProviderCreateForm.tsx
+++ b/packages/forklift-console-plugin/src/modules/Providers/views/create/components/OpenstackProviderCreateForm.tsx
@@ -1,4 +1,5 @@
import React, { useCallback, useReducer } from 'react';
+import { Trans } from 'react-i18next';
import { validateURL, Validation } from 'src/modules/Providers/utils';
import { useForkliftTranslation } from 'src/utils/i18n';
@@ -18,9 +19,50 @@ export const OpenstackProviderCreateForm: React.FC
+
+ Error: The format of the provided URL is invalid. Ensure the URL includes a scheme, a
+ domain name, and a path. For example:{' '}
+ https://identity_service.com:5000/v3.
+
+
+ ),
+ warning: (
+
+
+ Warning: The provided URL does not end with the API endpoint path:{' '}
+
+ {'"'}/v3{'"'}
+
+ . Ensure the URL includes the correct path. For example:{' '}
+ https://identity_service.com:5000/v3.
+
+
+ ),
+ success: (
+
+
+ URL of the OpenStack Identity (Keystone) endpoint. For example:{' '}
+ https://identity_service.com:5000/v3.
+
+
+ ),
+ default: (
+
+
+ URL of the OpenStack Identity (Keystone) endpoint. For example: {''}
+ https://identity_service.com:5000/v3{''}.
+
+
+ ),
+ };
+
const initialState = {
validation: {
url: 'default' as Validation,
+ urlHelperText: urlHelperTextMsgs.default,
},
};
@@ -43,27 +85,44 @@ export const OpenstackProviderCreateForm: React.FC {
- const trimmedValue = value.trim();
+ if (id !== 'url') return;
+
+ const trimmedValue: string = value.trim();
+ const validationState = getURLValidationState(trimmedValue);
- if (id === 'url') {
- const validationState = validateURL(trimmedValue) ? 'success' : 'error';
- dispatch({ type: 'SET_FIELD_VALIDATED', payload: { field: id, validationState } });
+ dispatch({
+ type: 'SET_FIELD_VALIDATED',
+ payload: { field: 'url', validationState },
+ });
- onChange({ ...provider, spec: { ...provider.spec, url: trimmedValue } });
- }
+ dispatch({
+ type: 'SET_FIELD_VALIDATED',
+ payload: {
+ field: 'urlHelperText',
+ validationState: urlHelperTextMsgs[validationState],
+ },
+ });
+
+ onChange({ ...provider, spec: { ...provider.spec, url: trimmedValue } });
},
[provider],
);
+ const getURLValidationState = (url: string): Validation => {
+ if (!validateURL(url)) return 'error';
+ if (!url.endsWith('v3') && !url.endsWith('v3/')) return 'warning';
+ return 'success';
+ };
+
return (