Merge pull request #1527 from avivtur/unique-chars-plan-name

MTV-2197: Plan name error text wrong for special characters

Author: metalice

packages/forklift-console-plugin/locales/en/plugin__forklift-console-plugin.json

@@ -334,7 +334,6 @@
   "Multiple NICs on the same network": "Multiple NICs on the same network",
   "Name": "Name",
   "Name is primarily intended for creation idempotence and configuration definition. Cannot be updated.": "Name is primarily intended for creation idempotence and configuration definition. Cannot be updated.",
-  "Name is required and must be a unique within a namespace and valid Kubernetes name.": "Name is required and must be a unique within a namespace and valid Kubernetes name.",
   "Namespace": "Namespace",
   "Namespace defines the space within which each name must be unique.\n               An empty namespace is equivalent to the \"default\" namespace, but \"default\" is the canonical representation.\n               Not all objects are required to be scoped to a namespace - the value of this field for those objects will be empty.": "Namespace defines the space within which each name must be unique.\n               An empty namespace is equivalent to the \"default\" namespace, but \"default\" is the canonical representation.\n               Not all objects are required to be scoped to a namespace - the value of this field for those objects will be empty.",
   "Namespace defines the space within which each name must be unique.\n     An empty namespace is equivalent to the \"default\" namespace, but \"default\" is the canonical representation.\n     Not all objects are required to be scoped to a namespace -\n     the value of this field for those objects will be empty.": "Namespace defines the space within which each name must be unique.\n     An empty namespace is equivalent to the \"default\" namespace, but \"default\" is the canonical representation.\n     Not all objects are required to be scoped to a namespace -\n     the value of this field for those objects will be empty.",
@@ -429,6 +428,9 @@
   "Pipeline status": "Pipeline status",
   "Plan details": "Plan details",
   "Plan name": "Plan name",
+  "Plan name must be a unique within a namespace.": "Plan name must be a unique within a namespace.",
+  "Plan name must contain only lowercase alphanumeric characters or '-'": "Plan name must contain only lowercase alphanumeric characters or '-'",
+  "Plan name must not be empty": "Plan name must not be empty",
   "Plans": "Plans",
   "Plans for virtualization": "Plans for virtualization",
   "Plans wizard": "Plans wizard",

packages/forklift-console-plugin/package.json

@@ -53,6 +53,7 @@
   "devDependencies": {
     "@openshift-console/dynamic-plugin-sdk-webpack": "1.3.0",
     "@types/ejs": "^3.1.5",
+    "@types/i18next": "^11.9.3",
     "@types/jsonpath": "^0.2.4",
     "@types/jsrsasign": "10.5.14",
     "@types/luxon": "^3.4.2",

packages/forklift-console-plugin/src/modules/Plans/views/create/components/PlanCreateForm.tsx

@@ -27,10 +27,10 @@ import {
 
 import { PlanCreatePageState } from '../states';
 
+import { PlanNameTextField } from './PlanName/PlanNameTextField';
 import { ChipsToolbarProviders } from './ChipsToolbarProviders';
 import { createProviderCardItems } from './createProviderCardItems';
 import { FiltersToolbarProviders } from './FiltersToolbarProviders';
-import { PlanNameTextField } from './PlanNameTextField';
 import { ProviderCardEmptyState } from './ProvidersEmptyState';
 
 export type PlanCreateFormProps = {

packages/forklift-console-plugin/src/modules/Plans/views/create/components/PlanNameTextField.tsx packages/forklift-console-plugin/src/modules/Plans/views/create/components/PlanName/PlanNameTextField.tsx

@@ -5,6 +5,8 @@ import { useForkliftTranslation } from 'src/utils';
 import { FormGroupWithHelpText } from '@kubev2v/common';
 import { TextInput } from '@patternfly/react-core';
 
+import { getInvalidHelperText } from './utils/utils';
+
 interface PlanNameTextFieldProps {
   value: string;
   validated: Validation;
@@ -30,9 +32,7 @@ export const PlanNameTextField: React.FC<PlanNameTextFieldProps> = ({
       fieldId="planName"
       {...(isUpdated && {
         validated: validated,
-        helperTextInvalid: t(
-          'Name is required and must be a unique within a namespace and valid Kubernetes name.',
-        ),
+        helperTextInvalid: getInvalidHelperText(validated, value),
       })}
     >
       <TextInput

packages/forklift-console-plugin/src/modules/Plans/views/create/components/PlanName/utils/utils.ts

@@ -0,0 +1,18 @@
+import { Validation } from 'src/modules/Providers/utils/types/Validation';
+import { validateK8sName } from 'src/modules/Providers/utils/validators/common';
+
+import { ValidatedOptions } from '@patternfly/react-core';
+import { t } from '@utils/i18n';
+
+export const getInvalidHelperText = (validated: Validation, nameInput: string) => {
+  if (validated !== ValidatedOptions.error) return null;
+
+  if (!nameInput) {
+    return t('Plan name must not be empty');
+  }
+  if (!validateK8sName(nameInput)) {
+    return t("Plan name must contain only lowercase alphanumeric characters or '-'");
+  }
+
+  return t('Plan name must be a unique within a namespace.');
+};

packages/forklift-console-plugin/src/utils/i18n.tsx

@@ -1,5 +1,6 @@
 import React, { ReactNode } from 'react';
-import { Trans, useTranslation } from 'react-i18next';
+import { getI18n, Trans, useTranslation } from 'react-i18next';
+import { TranslationOptions } from 'i18next';
 
 export function useForkliftTranslation() {
   return useTranslation('plugin__forklift-console-plugin');
@@ -14,3 +15,11 @@ export const ForkliftTrans: React.FC<{ children?: ReactNode }> = ({ children })
     </Trans>
   );
 };
+
+/**
+ * Performs translation to 'plugin__forklift-console-plugin' namespace for usage outside of component functions.
+ * @param value string to translate
+ * @param options (optional) options for translations
+ */
+export const t = (value: string, options?: TranslationOptions) =>
+  getI18n().t(value, { ns: 'plugin__forklift-console-plugin', ...options });

packages/forklift-console-plugin/tsconfig.json

@@ -24,6 +24,7 @@
     "outDir": "./dist",
 
     "paths": {
+      "@utils/*": ["./src/utils/*"],
       "src/*": ["./src/*"],
       "common/src/*": ["../common/src/*"]
     }

yarn.lock

@@ -2433,6 +2433,11 @@
   dependencies:
     "@types/node" "*"
 
+"@types/i18next@^11.9.3":
+  version "11.9.3"
+  resolved "https://registry.yarnpkg.com/@types/i18next/-/i18next-11.9.3.tgz#04d84c6539908ad69665d26d8967f942d1638550"
+  integrity sha512-snM7bMKy6gt7UYdpjsxycqSCAy0fr2JVPY0B8tJ2vp9bN58cE7C880k20PWFM4KXxQ3KsstKM8DLCawGCIH0tg==
+
 "@types/istanbul-lib-coverage@*", "@types/istanbul-lib-coverage@^2.0.0", "@types/istanbul-lib-coverage@^2.0.1":
   version "2.0.6"
   resolved "https://registry.yarnpkg.com/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.6.tgz#7739c232a1fee9b4d3ce8985f314c0c6d33549d7"