refactor(containers): migrate create view to react [EE-2307] (#9175)

app/react/components/ImageConfigFieldset/AdvancedForm.tsx

@@ -1,4 +1,4 @@
-import { FormikErrors, useFormikContext } from 'formik';
+import { FormikErrors } from 'formik';
 
 import { FormControl } from '@@/form-components/FormControl';
 import { Input } from '@@/form-components/Input';
@@ -9,14 +9,14 @@ import { Values } from './types';
 export function AdvancedForm({
   values,
   errors,
-  fieldNamespace,
+  onChangeImage,
+  setFieldValue,
 }: {
   values: Values;
   errors?: FormikErrors<Values>;
-  fieldNamespace?: string;
+  onChangeImage?: (name: string) => void;
+  setFieldValue: <T>(field: string, value: T) => void;
 }) {
-  const { setFieldValue } = useFormikContext<Values>();
-
   return (
     <>
       <TextTip color="blue">
@@ -27,15 +27,15 @@ export function AdvancedForm({
         <Input
           id="image-field"
           value={values.image}
-          onChange={(e) => setFieldValue(namespaced('image'), e.target.value)}
+          onChange={(e) => {
+            const { value } = e.target;
+            setFieldValue('image', value);
+            onChangeImage?.(value);
+          }}
           placeholder="e.g. registry:port/my-image:my-tag"
           required
         />
       </FormControl>
     </>
   );
-
-  function namespaced(field: string) {
-    return fieldNamespace ? `${fieldNamespace}.${field}` : field;
-  }
 }

app/react/components/ImageConfigFieldset/ImageConfigFieldset.tsx

@@ -1,5 +1,5 @@
 import { Database, Globe } from 'lucide-react';
-import { FormikErrors, useFormikContext } from 'formik';
+import { FormikErrors } from 'formik';
 import { PropsWithChildren } from 'react';
 
 import { Button } from '@@/buttons';
@@ -10,32 +10,31 @@ import { AdvancedForm } from './AdvancedForm';
 import { RateLimits } from './RateLimits';
 
 export function ImageConfigFieldset({
-  checkRateLimits,
+  onRateLimit,
   children,
   autoComplete,
-  setValidity,
-  fieldNamespace,
   values,
   errors,
+  onChangeImage,
+  setFieldValue,
 }: PropsWithChildren<{
   values: Values;
   errors?: FormikErrors<Values>;
-  fieldNamespace?: string;
-  checkRateLimits?: boolean;
   autoComplete?: boolean;
-  setValidity: (error?: string) => void;
+  onRateLimit?: (limited?: boolean) => void;
+  onChangeImage?: (name: string) => void;
+  setFieldValue: <T>(field: string, value: T) => void;
 }>) {
-  const { setFieldValue } = useFormikContext<Values>();
-
   const Component = values.useRegistry ? SimpleForm : AdvancedForm;
 
   return (
     <div className="row">
       <Component
         autoComplete={autoComplete}
-        fieldNamespace={fieldNamespace}
         values={values}
         errors={errors}
+        onChangeImage={onChangeImage}
+        setFieldValue={setFieldValue}
       />
 
       <div className="form-group">
@@ -46,7 +45,7 @@ export function ImageConfigFieldset({
               color="link"
               icon={Globe}
               className="!ml-0 p-0 hover:no-underline"
-              onClick={() => setFieldValue(namespaced('useRegistry'), false)}
+              onClick={() => setFieldValue('useRegistry', false)}
             >
               Advanced mode
             </Button>
@@ -56,7 +55,7 @@ export function ImageConfigFieldset({
               color="link"
               icon={Database}
               className="!ml-0 p-0 hover:no-underline"
-              onClick={() => setFieldValue(namespaced('useRegistry'), true)}
+              onClick={() => setFieldValue('useRegistry', true)}
             >
               Simple mode
             </Button>
@@ -66,13 +65,9 @@ export function ImageConfigFieldset({
 
       {children}
 
-      {checkRateLimits && values.useRegistry && (
-        <RateLimits registryId={values.registryId} setValidity={setValidity} />
+      {onRateLimit && values.useRegistry && (
+        <RateLimits registryId={values.registryId} onRateLimit={onRateLimit} />
       )}
     </div>
   );
-
-  function namespaced(field: string) {
-    return fieldNamespace ? `${fieldNamespace}.${field}` : field;
-  }
 }

app/react/components/ImageConfigFieldset/RateLimits.tsx

@@ -1,5 +1,5 @@
-import { useEffect } from 'react';
 import { useQuery } from 'react-query';
+import { useEffect } from 'react';
 
 import axios, { parseAxiosError } from '@/portainer/services/axios';
 import { useCurrentEnvironment } from '@/react/hooks/useCurrentEnvironment';
@@ -23,10 +23,10 @@ import { getIsDockerHubRegistry } from './utils';
 
 export function RateLimits({
   registryId,
-  setValidity,
+  onRateLimit,
 }: {
   registryId?: RegistryId;
-  setValidity: (error?: string) => void;
+  onRateLimit: (limited?: boolean) => void;
 }) {
   const registryQuery = useRegistry(registryId);
 
@@ -48,7 +48,7 @@ export function RateLimits({
     <RateLimitsInner
       isAuthenticated={registry?.Authentication}
       registryId={registryId}
-      setValidity={setValidity}
+      onRateLimit={onRateLimit}
       environment={environmentQuery.data}
     />
   );
@@ -57,15 +57,15 @@ export function RateLimits({
 function RateLimitsInner({
   isAuthenticated = false,
   registryId = 0,
-  setValidity,
+  onRateLimit,
   environment,
 }: {
   isAuthenticated?: boolean;
   registryId?: RegistryId;
-  setValidity: (error?: string) => void;
+  onRateLimit: (limited?: boolean) => void;
   environment: Environment;
 }) {
-  const pullRateLimits = useRateLimits(registryId, environment, setValidity);
+  const pullRateLimits = useRateLimits(registryId, environment, onRateLimit);
   const { isAdmin } = useCurrentUser();
 
   if (!pullRateLimits) {
@@ -143,7 +143,7 @@ interface PullRateLimits {
 function useRateLimits(
   registryId: RegistryId,
   environment: Environment,
-  setValidity: (error?: string) => void
+  onRateLimit: (limited?: boolean) => void
 ) {
   const isValidForPull =
     isAgentEnvironment(environment.Type) || isLocalEnvironment(environment);
@@ -153,32 +153,20 @@ function useRateLimits(
     () => getRateLimits(environment, registryId),
     {
       enabled: isValidForPull,
-      onError(e) {
-        // eslint-disable-next-line no-console
-        console.error('Failed loading DockerHub pull rate limits', e);
-        setValidity();
-      },
-      onSuccess(data) {
-        setValidity(
-          data.limit === 0 || data.remaining >= 0
-            ? undefined
-            : 'Rate limit exceeded'
-        );
-      },
     }
   );
 
   useEffect(() => {
-    if (!isValidForPull) {
-      setValidity();
+    if (!isValidForPull || query.isError) {
+      onRateLimit();
     }
-  });
 
-  if (!isValidForPull) {
-    return null;
-  }
+    if (query.data) {
+      onRateLimit(query.data.limit > 0 && query.data.remaining === 0);
+    }
+  }, [isValidForPull, onRateLimit, query.data, query.isError]);
 
-  return query.data;
+  return isValidForPull ? query.data : undefined;
 }
 
 function getRateLimits(environment: Environment, registryId: RegistryId) {

app/react/components/ImageConfigFieldset/SimpleForm.tsx

@@ -1,4 +1,4 @@
-import { FormikErrors, useFormikContext } from 'formik';
+import { FormikErrors } from 'formik';
 import _ from 'lodash';
 import { useMemo } from 'react';
 
@@ -31,15 +31,15 @@ export function SimpleForm({
   autoComplete,
   values,
   errors,
-  fieldNamespace,
+  onChangeImage,
+  setFieldValue,
 }: {
   autoComplete?: boolean;
   values: Values;
   errors?: FormikErrors<Values>;
-  fieldNamespace?: string;
+  onChangeImage?: (name: string) => void;
+  setFieldValue: <T>(field: string, value: T) => void;
 }) {
-  const { setFieldValue } = useFormikContext<Values>();
-
   const registryQuery = useRegistry(values.registryId);
 
   const registry = registryQuery.data;
@@ -55,7 +55,7 @@ export function SimpleForm({
         errors={errors?.registryId}
       >
         <RegistrySelector
-          onChange={(value) => setFieldValue(namespaced('registryId'), value)}
+          onChange={(value) => setFieldValue('registryId', value)}
           value={values.registryId}
           inputId="registry-field"
         />
@@ -66,7 +66,10 @@ export function SimpleForm({
           <InputGroup.Addon>{registryUrl}</InputGroup.Addon>
 
           <ImageField
-            onChange={(value) => setFieldValue(namespaced('image'), value)}
+            onChange={(value) => {
+              setFieldValue('image', value);
+              onChangeImage?.(value);
+            }}
             value={values.image}
             registry={registry}
             autoComplete={autoComplete}
@@ -94,10 +97,6 @@ export function SimpleForm({
       </FormControl>
     </>
   );
-
-  function namespaced(field: string) {
-    return fieldNamespace ? `${fieldNamespace}.${field}` : field;
-  }
 }
 
 function getImagesForRegistry(

app/react/components/ImageConfigFieldset/validation.ts

@@ -2,10 +2,10 @@ import { bool, number, object, SchemaOf, string } from 'yup';
 
 import { Values } from './types';
 
-export function validation(): SchemaOf<Values> {
+export function validation(rateLimitExceeded: boolean): SchemaOf<Values> {
   return object({
     image: string().required('Image is required'),
     registryId: number().default(0),
     useRegistry: bool().default(false),
-  });
+  }).test('rate-limits', 'Rate limit exceeded', () => !rateLimitExceeded);
 }