refactor(app): migrate remaining form sections [EE-6231] (#10938)

app/react/kubernetes/applications/components/NamespaceSelector/NamespaceSelector.tsx

@@ -0,0 +1,53 @@
+import { FormikErrors } from 'formik';
+
+import { useEnvironmentId } from '@/react/hooks/useEnvironmentId';
+import { useNamespacesQuery } from '@/react/kubernetes/namespaces/queries/useNamespacesQuery';
+
+import { FormControl } from '@@/form-components/FormControl';
+import { PortainerSelect } from '@@/form-components/PortainerSelect';
+
+type Props = {
+  onChange: (value: string) => void;
+  values: string;
+  errors: FormikErrors<string>;
+  isEdit: boolean;
+};
+
+export function NamespaceSelector({
+  values: value,
+  onChange,
+  errors,
+  isEdit,
+}: Props) {
+  const environmentId = useEnvironmentId();
+  const { data: namespaces, ...namespacesQuery } =
+    useNamespacesQuery(environmentId);
+  const namespaceNames = Object.entries(namespaces ?? {})
+    .filter(([, ns]) => !ns.IsSystem)
+    .map(([nsName]) => ({
+      label: nsName,
+      value: nsName,
+    }));
+
+  return (
+    <FormControl
+      label="Namespace"
+      inputId="namespace-selector"
+      isLoading={namespacesQuery.isLoading}
+      errors={errors}
+    >
+      {namespaceNames.length > 0 && (
+        <PortainerSelect
+          value={value}
+          options={namespaceNames}
+          onChange={onChange}
+          disabled={isEdit}
+          noOptionsMessage={() => 'No namespaces found'}
+          placeholder="No namespaces found" // will only show when there are no options
+          inputId="namespace-selector"
+          data-cy="k8sAppCreate-nsSelect"
+        />
+      )}
+    </FormControl>
+  );
+}

app/react/kubernetes/applications/components/NamespaceSelector/index.ts

@@ -0,0 +1,2 @@
+export { NamespaceSelector } from './NamespaceSelector';
+export { namespaceSelectorValidation } from './namespaceSelectorValidation';

app/react/kubernetes/applications/components/NamespaceSelector/namespaceSelectorValidation.ts

@@ -0,0 +1,38 @@
+import { SchemaOf, string } from 'yup';
+
+type ValidationData = {
+  hasQuota: boolean;
+  isResourceQuotaCapacityExceeded: boolean;
+  namespaceOptionCount: number;
+  isAdmin: boolean;
+};
+
+const emptyValue =
+  'You do not have access to any namespace. Contact your administrator to get access to a namespace.';
+
+export function namespaceSelectorValidation(
+  validationData?: ValidationData
+): SchemaOf<string> {
+  const {
+    hasQuota,
+    isResourceQuotaCapacityExceeded,
+    namespaceOptionCount,
+    isAdmin,
+  } = validationData || {};
+  return string()
+    .required(emptyValue)
+    .typeError(emptyValue)
+    .test(
+      'resourceQuotaCapacityExceeded',
+      `This namespace has exhausted its resource capacity and you will not be able to deploy the application.${
+        isAdmin
+          ? ''
+          : ' Contact your administrator to expand the capacity of the namespace.'
+      }`,
+      () => {
+        const hasQuotaExceeded = hasQuota && isResourceQuotaCapacityExceeded;
+        return !hasQuotaExceeded;
+      }
+    )
+    .test('namespaceOptionCount', emptyValue, () => !!namespaceOptionCount);
+}