feat(namespace): migrate create ns to react [EE-2226] (#10377)

app/react/kubernetes/annotations/AnnotationsForm.tsx

@@ -0,0 +1,91 @@
+import { ChangeEvent } from 'react';
+import { Trash2 } from 'lucide-react';
+
+import { FormError } from '@@/form-components/FormError';
+import { Button } from '@@/buttons';
+import { isArrayErrorType } from '@@/form-components/formikUtils';
+
+import { Annotation, AnnotationErrors } from './types';
+
+interface Props {
+  annotations: Annotation[];
+  handleAnnotationChange: (
+    index: number,
+    key: 'Key' | 'Value',
+    val: string
+  ) => void;
+  removeAnnotation: (index: number) => void;
+  errors: AnnotationErrors;
+  placeholder: string[];
+}
+
+export function AnnotationsForm({
+  annotations,
+  handleAnnotationChange,
+  removeAnnotation,
+  errors,
+  placeholder,
+}: Props) {
+  const annotationErrors = isArrayErrorType<Annotation>(errors)
+    ? errors
+    : undefined;
+
+  return (
+    <>
+      {annotations.map((annotation, i) => (
+        <div className="row" key={annotation.ID}>
+          <div className="form-group col-sm-4 !m-0 !pl-0">
+            <div className="input-group input-group-sm">
+              <span className="input-group-addon required">Key</span>
+              <input
+                name={`annotation_key_${i}`}
+                type="text"
+                className="form-control form-control-sm"
+                placeholder={placeholder[0]}
+                defaultValue={annotation.Key}
+                onChange={(e: ChangeEvent<HTMLInputElement>) =>
+                  handleAnnotationChange(i, 'Key', e.target.value)
+                }
+              />
+            </div>
+            {annotationErrors?.[i]?.Key && (
+              <FormError className="mt-1 !mb-0">
+                {annotationErrors[i]?.Key}
+              </FormError>
+            )}
+          </div>
+          <div className="form-group col-sm-4 !m-0 !pl-0">
+            <div className="input-group input-group-sm">
+              <span className="input-group-addon required">Value</span>
+              <input
+                name={`annotation_value_${i}`}
+                type="text"
+                className="form-control form-control-sm"
+                placeholder={placeholder[1]}
+                defaultValue={annotation.Value}
+                onChange={(e: ChangeEvent<HTMLInputElement>) =>
+                  handleAnnotationChange(i, 'Value', e.target.value)
+                }
+              />
+            </div>
+            {annotationErrors?.[i]?.Value && (
+              <FormError className="mt-1 !mb-0">
+                {annotationErrors[i]?.Value}
+              </FormError>
+            )}
+          </div>
+          <div className="col-sm-3 !m-0 !pl-0">
+            <Button
+              size="small"
+              color="dangerlight"
+              className="btn-only-icon !ml-0"
+              type="button"
+              onClick={() => removeAnnotation(i)}
+              icon={Trash2}
+            />
+          </div>
+        </div>
+      ))}
+    </>
+  );
+}

app/react/kubernetes/annotations/types.ts

@@ -0,0 +1,15 @@
+import { FormikErrors } from 'formik';
+
+export interface Annotation {
+  Key: string;
+  Value: string;
+  ID: string;
+}
+
+export type AnnotationsPayload = Record<string, string>;
+
+export type AnnotationErrors =
+  | string
+  | string[]
+  | FormikErrors<Annotation>[]
+  | undefined;

app/react/kubernetes/annotations/validation.ts

@@ -0,0 +1,68 @@
+import { SchemaOf, array, object, string } from 'yup';
+
+import { buildUniquenessTest } from '@@/form-components/validate-unique';
+
+import { Annotation } from './types';
+
+const re = /^([A-Za-z0-9][-A-Za-z0-9_.]*)?[A-Za-z0-9]$/;
+
+export const annotationsSchema: SchemaOf<Annotation[]> = array(
+  getAnnotationValidation()
+).test(
+  'unique',
+  'Duplicate keys are not allowed.',
+  buildUniquenessTest(() => 'Duplicate keys are not allowed.', 'Key')
+);
+
+function getAnnotationValidation(): SchemaOf<Annotation> {
+  return object({
+    Key: string()
+      .required('Key is required.')
+      .test('is-valid', (value, { createError }) => {
+        if (!value) {
+          return true;
+        }
+        const keySegments = value.split('/');
+        if (keySegments.length > 2) {
+          return createError({
+            message:
+              'Two segments are allowed, separated by a slash (/): a prefix (optional) and a name.',
+          });
+        }
+        if (keySegments.length === 2) {
+          if (keySegments[0].length > 253) {
+            return createError({
+              message: "Prefix (before the slash) can't exceed 253 characters.",
+            });
+          }
+          if (keySegments[1].length > 63) {
+            return createError({
+              message: "Name (after the slash) can't exceed 63 characters.",
+            });
+          }
+          if (!re.test(keySegments[1])) {
+            return createError({
+              message:
+                'Start and end with alphanumeric characters only, limiting characters in between to dashes, underscores, and alphanumerics.',
+            });
+          }
+        } else if (keySegments.length === 1) {
+          if (keySegments[0].length > 63) {
+            return createError({
+              message:
+                "Name (the segment after a slash (/), or only segment if no slash) can't exceed 63 characters.",
+            });
+          }
+          if (!re.test(keySegments[0])) {
+            return createError({
+              message:
+                'Start and end with alphanumeric characters only, limiting characters in between to dashes, underscores, and alphanumerics.',
+            });
+          }
+        }
+        return true;
+      }),
+    Value: string().required('Value is required.'),
+    ID: string().required('ID is required.'),
+  });
+}