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

app/react/kubernetes/namespaces/components/RegistriesFormSection/RegistriesFormSection.tsx

@@ -0,0 +1,47 @@
+import { FormikErrors } from 'formik';
+import { MultiValue } from 'react-select';
+
+import { Registry } from '@/react/portainer/registries/types';
+import { useEnvironmentRegistries } from '@/react/portainer/environments/queries/useEnvironmentRegistries';
+import { useEnvironmentId } from '@/react/hooks/useEnvironmentId';
+
+import { InlineLoader } from '@@/InlineLoader';
+import { FormControl } from '@@/form-components/FormControl';
+import { FormSection } from '@@/form-components/FormSection';
+
+import { RegistriesSelector } from './RegistriesSelector';
+
+type Props = {
+  values: MultiValue<Registry>;
+  onChange: (value: MultiValue<Registry>) => void;
+  errors?: string | string[] | FormikErrors<Registry>[];
+};
+
+export function RegistriesFormSection({ values, onChange, errors }: Props) {
+  const environmentId = useEnvironmentId();
+  const registriesQuery = useEnvironmentRegistries(environmentId, {
+    hideDefault: true,
+  });
+  return (
+    <FormSection title="Registries">
+      <FormControl
+        inputId="registries"
+        label="Select registries"
+        required
+        errors={errors}
+      >
+        {registriesQuery.isLoading && (
+          <InlineLoader>Loading registries...</InlineLoader>
+        )}
+        {registriesQuery.data && (
+          <RegistriesSelector
+            value={values}
+            onChange={(registries) => onChange(registries)}
+            options={registriesQuery.data}
+            inputId="registries"
+          />
+        )}
+      </FormControl>
+    </FormSection>
+  );
+}

app/react/kubernetes/namespaces/components/RegistriesFormSection/RegistriesSelector.tsx

@@ -0,0 +1,34 @@
+import { MultiValue } from 'react-select';
+
+import { Registry } from '@/react/portainer/registries/types';
+
+import { Select } from '@@/form-components/ReactSelect';
+
+interface Props {
+  value: MultiValue<Registry>;
+  onChange(value: MultiValue<Registry>): void;
+  options: Registry[];
+  inputId?: string;
+}
+
+export function RegistriesSelector({
+  value,
+  onChange,
+  options,
+  inputId,
+}: Props) {
+  return (
+    <Select
+      isMulti
+      getOptionLabel={(option) => option.Name}
+      getOptionValue={(option) => String(option.Id)}
+      options={options}
+      value={value}
+      closeMenuOnSelect={false}
+      onChange={onChange}
+      inputId={inputId}
+      data-cy="namespaceCreate-registrySelect"
+      placeholder="Select one or more registries"
+    />
+  );
+}

app/react/kubernetes/namespaces/components/RegistriesFormSection/index.ts

@@ -0,0 +1 @@
+export { RegistriesFormSection } from './RegistriesFormSection';

app/react/kubernetes/namespaces/components/RegistriesFormSection/registriesValidationSchema.ts

@@ -0,0 +1,10 @@
+import { SchemaOf, array, object, number, string } from 'yup';
+
+import { Registry } from '@/react/portainer/registries/types';
+
+export const registriesValidationSchema: SchemaOf<Registry[]> = array(
+  object({
+    Id: number().required('Registry ID is required.'),
+    Name: string().required('Registry name is required.'),
+  })
+);