fix(container): fix various creating container issues EE-6287 (#10595)

* fix(container): show placeholder for image field EE-6287

* fix(container): correct query params for search button field EE-6287

* fix(container): use btoa to encode registry credential EE-6287

* fix(container): allow creating non-existing option EE-6287

* fix(ui/forms): typeahead component

* fix(container): select the default registry EE-6287

* fix(container): always enable deploy button when always pull is off EE-6287

* fix(container): reset command fields outside current event to avoid validation on broken values EE-6287

* fix(container): query registry with endpoint ID param EE-6287

---------

Co-authored-by: Chaim Lev-Ari <chaim.levi-ari@portainer.io>

app/react/components/ImageConfigFieldset/AdvancedForm.tsx

@@ -30,7 +30,7 @@ export function AdvancedForm({
           onChange={(e) => {
             const { value } = e.target;
             setFieldValue('image', value);
-            onChangeImage?.(value);
+            setTimeout(() => onChangeImage?.(value), 0);
           }}
           placeholder="e.g. registry:port/my-image:my-tag"
           required

app/react/components/ImageConfigFieldset/InputSearch.tsx

@@ -1,52 +1,39 @@
+import { useMemo } from 'react';
+
 import { AutomationTestingProps } from '@/types';
 
+import { AutocompleteSelect } from '@@/form-components/AutocompleteSelect';
 import { Option } from '@@/form-components/PortainerSelect';
-import { Select } from '@@/form-components/ReactSelect';
 
 export function InputSearch({
   value,
   onChange,
   options,
   placeholder,
-  'data-cy': dataCy,
   inputId,
 }: {
   value: string;
   onChange: (value: string) => void;
   options: Option<string>[];
   placeholder?: string;
-  inputId?: string;
+  inputId: string;
 } & AutomationTestingProps) {
-  const selectValue = options.find((option) => option.value === value) || {
-    value: '',
-    label: value,
-  };
+  const searchResults = useMemo(() => {
+    if (!value) {
+      return [];
+    }
+    return options.filter((option) =>
+      option.value.toLowerCase().includes(value.toLowerCase())
+    );
+  }, [options, value]);
 
   return (
-    <Select
-      options={options}
-      value={selectValue}
-      onChange={(option) => option && onChange(option.value)}
+    <AutocompleteSelect
+      searchResults={searchResults}
+      value={value}
+      onChange={onChange}
       placeholder={placeholder}
-      data-cy={dataCy}
       inputId={inputId}
-      onInputChange={(value, actionMeta) => {
-        if (
-          actionMeta.action !== 'input-change' &&
-          actionMeta.action !== 'set-value'
-        ) {
-          return;
-        }
-
-        onChange(value);
-      }}
-      openMenuOnClick={false}
-      openMenuOnFocus={false}
-      components={{ DropdownIndicator: () => null }}
-      onBlur={(e) => {
-        e.preventDefault();
-        e.stopPropagation();
-      }}
     />
   );
 }

app/react/components/ImageConfigFieldset/SimpleForm.tsx

@@ -1,6 +1,7 @@
 import { FormikErrors } from 'formik';
 import _ from 'lodash';
 import { useMemo } from 'react';
+import { trimSHA, trimVersionTag } from 'Docker/filters/utils';
 
 import DockerIcon from '@/assets/ico/vendor/docker.svg?c';
 import { useImages } from '@/react/docker/proxy/queries/images/useImages';
@@ -83,7 +84,9 @@ export function SimpleForm({
                 title="Search image on Docker Hub"
                 color="default"
                 props={{
-                  href: 'https://hub.docker.com/search?type=image&q={ $ctrl.model.Image | trimshasum | trimversiontag }',
+                  href: `https://hub.docker.com/search?type=image&q=${trimVersionTag(
+                    trimSHA(values.image)
+                  )}`,
                   target: '_blank',
                   rel: 'noreferrer',
                 }}
@@ -140,6 +143,14 @@ function RegistrySelector({
           label: registry.Name,
           value: registry.Id,
         })),
+    onSuccess: (options) => {
+      if (options && options.length) {
+        const idx = options.findIndex((v) => v.value === value);
+        if (idx === -1) {
+          onChange(options[0].value);
+        }
+      }
+    },
   });
 
   return (
@@ -164,7 +175,7 @@ function ImageField({
   onChange: (value: string) => void;
   registry?: Registry;
   autoComplete?: boolean;
-  inputId?: string;
+  inputId: string;
 }) {
   return autoComplete ? (
     <ImageFieldAutoComplete
@@ -191,7 +202,7 @@ function ImageFieldAutoComplete({
   value: string;
   onChange: (value: string) => void;
   registry?: Registry;
-  inputId?: string;
+  inputId: string;
 }) {
   const environmentId = useEnvironmentId();
 

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(rateLimitExceeded: boolean): SchemaOf<Values> {
+export function validation(): 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);
+  });
 }