refactor(ui/image-config): create react component [EE-5342] (#8856)

app/docker/helpers/imageHelper.js

@@ -1,5 +1,4 @@
-import _ from 'lodash-es';
+import { buildImageFullURI, imageContainsURL } from '@/react/docker/images/utils';
-import { RegistryTypes } from 'Portainer/models/registryTypes';
 
 angular.module('portainer.docker').factory('ImageHelper', ImageHelperFactory);
 function ImageHelperFactory() {
@@ -29,67 +28,13 @@ function ImageHelperFactory() {
    * @param {PorImageRegistryModel} registry
    */
   function createImageConfigForContainer(imageModel) {
+    const registry = imageModel.UseRegistry ? imageModel.Registry : undefined;
     return {
-      fromImage: buildImageFullURI(imageModel),
+      fromImage: buildImageFullURI(imageModel.Image, registry),
     };
   }
 
-  function imageContainsURL(image) {
-    const split = _.split(image, '/');
-    const url = split[0];
-    if (split.length > 1) {
-      return _.includes(url, '.') || _.includes(url, ':');
-    }
-    return false;
-  }
-
   function removeDigestFromRepository(repository) {
     return repository.split('@sha')[0];
   }
 }
-/**
- * builds the complete uri for an image based on its registry
- * @param {PorImageRegistryModel} imageModel
- */
-export function buildImageFullURI(imageModel) {
-  if (!imageModel.UseRegistry) {
-    return ensureTag(imageModel.Image);
-  }
-
-  const imageName = buildImageFullURIWithRegistry(imageModel);
-
-  return ensureTag(imageName);
-
-  function ensureTag(image, defaultTag = 'latest') {
-    return image.includes(':') ? image : `${image}:${defaultTag}`;
-  }
-}
-
-function buildImageFullURIWithRegistry(imageModel) {
-  switch (imageModel.Registry.Type) {
-    case RegistryTypes.GITLAB:
-      return buildImageURIForGitLab(imageModel);
-    case RegistryTypes.QUAY:
-      return buildImageURIForQuay(imageModel);
-    case RegistryTypes.ANONYMOUS:
-      return imageModel.Image;
-    default:
-      return buildImageURIForOtherRegistry(imageModel);
-  }
-
-  function buildImageURIForGitLab(imageModel) {
-    const slash = imageModel.Image.startsWith(':') ? '' : '/';
-    return `${imageModel.Registry.URL}/${imageModel.Registry.Gitlab.ProjectPath}${slash}${imageModel.Image}`;
-  }
-
-  function buildImageURIForQuay(imageModel) {
-    const name = imageModel.Registry.Quay.UseOrganisation ? imageModel.Registry.Quay.OrganisationName : imageModel.Registry.Username;
-    const url = imageModel.Registry.URL ? imageModel.Registry.URL + '/' : '';
-    return `${url}${name}/${imageModel.Image}`;
-  }
-
-  function buildImageURIForOtherRegistry(imageModel) {
-    const url = imageModel.Registry.URL ? imageModel.Registry.URL + '/' : '';
-    return url + imageModel.Image;
-  }
-}

app/docker/services/imageService.js

@@ -1,4 +1,4 @@
-import _ from 'lodash-es';
+import { getUniqueTagListFromImages } from '@/react/docker/images/utils';
 import { ImageViewModel } from '../models/image';
 import { ImageDetailsViewModel } from '../models/imageDetails';
 import { ImageLayerViewModel } from '../models/imageLayer';
@@ -200,16 +200,7 @@ angular.module('portainer.docker').factory('ImageService', [
       return deferred.promise;
     };
 
-    service.getUniqueTagListFromImages = function (availableImages) {
+    service.getUniqueTagListFromImages = getUniqueTagListFromImages;
-      return _.uniq(
-        _.flatMap(availableImages, function (image) {
-          _.remove(image.RepoTags, function (item) {
-            return item.indexOf('<none>') !== -1;
-          });
-          return image.RepoTags ? _.uniqWith(image.RepoTags, _.isEqual) : [];
-        })
-      );
-    };
 
     return service;
   },

app/kubernetes/converters/daemonSet.js

@@ -10,7 +10,7 @@ import {
 import KubernetesApplicationHelper from 'Kubernetes/helpers/application';
 import KubernetesResourceReservationHelper from 'Kubernetes/helpers/resourceReservationHelper';
 import KubernetesCommonHelper from 'Kubernetes/helpers/commonHelper';
-import { buildImageFullURI } from 'Docker/helpers/imageHelper';
+import { buildImageFullURI } from '@/react/docker/images/utils';
 
 class KubernetesDaemonSetConverter {
   /**

app/kubernetes/converters/deployment.js

@@ -11,7 +11,7 @@ import {
 import KubernetesApplicationHelper from 'Kubernetes/helpers/application';
 import KubernetesResourceReservationHelper from 'Kubernetes/helpers/resourceReservationHelper';
 import KubernetesCommonHelper from 'Kubernetes/helpers/commonHelper';
-import { buildImageFullURI } from 'Docker/helpers/imageHelper';
+import { buildImageFullURI } from '@/react/docker/images/utils';
 
 class KubernetesDeploymentConverter {
   /**

app/kubernetes/converters/statefulSet.js

@@ -12,7 +12,7 @@ import {
 import KubernetesApplicationHelper from 'Kubernetes/helpers/application';
 import KubernetesResourceReservationHelper from 'Kubernetes/helpers/resourceReservationHelper';
 import KubernetesCommonHelper from 'Kubernetes/helpers/commonHelper';
-import { buildImageFullURI } from 'Docker/helpers/imageHelper';
+import { buildImageFullURI } from '@/react/docker/images/utils';
 import KubernetesPersistentVolumeClaimConverter from './persistentVolumeClaim';
 
 class KubernetesStatefulSetConverter {

app/react/components/ImageConfigFieldset/AdvancedForm.tsx

@@ -0,0 +1,41 @@
+import { FormikErrors, useFormikContext } from 'formik';
+
+import { FormControl } from '@@/form-components/FormControl';
+import { Input } from '@@/form-components/Input';
+import { TextTip } from '@@/Tip/TextTip';
+
+import { Values } from './types';
+
+export function AdvancedForm({
+  values,
+  errors,
+  fieldNamespace,
+}: {
+  values: Values;
+  errors?: FormikErrors<Values>;
+  fieldNamespace?: string;
+}) {
+  const { setFieldValue } = useFormikContext<Values>();
+
+  return (
+    <>
+      <TextTip color="blue">
+        When using advanced mode, image and repository <b>must be</b> publicly
+        available.
+      </TextTip>
+      <FormControl label="Image" inputId="image-field" errors={errors?.image}>
+        <Input
+          id="image-field"
+          value={values.image}
+          onChange={(e) => setFieldValue(namespaced('image'), e.target.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

@@ -0,0 +1,78 @@
+import { Database, Globe } from 'lucide-react';
+import { FormikErrors, useFormikContext } from 'formik';
+import { PropsWithChildren } from 'react';
+
+import { Button } from '@@/buttons';
+
+import { SimpleForm } from './SimpleForm';
+import { Values } from './types';
+import { AdvancedForm } from './AdvancedForm';
+import { RateLimits } from './RateLimits';
+
+export function ImageConfigFieldset({
+  checkRateLimits,
+  children,
+  autoComplete,
+  setValidity,
+  fieldNamespace,
+  values,
+  errors,
+}: PropsWithChildren<{
+  values: Values;
+  errors?: FormikErrors<Values>;
+  fieldNamespace?: string;
+  checkRateLimits?: boolean;
+  autoComplete?: boolean;
+  setValidity: (error?: string) => void;
+}>) {
+  const { setFieldValue } = useFormikContext<Values>();
+
+  const Component = values.useRegistry ? SimpleForm : AdvancedForm;
+
+  return (
+    <div className="row">
+      <Component
+        autoComplete={autoComplete}
+        fieldNamespace={fieldNamespace}
+        values={values}
+        errors={errors}
+      />
+
+      <div className="form-group">
+        <div className="col-sm-12">
+          {values.useRegistry ? (
+            <Button
+              size="small"
+              color="link"
+              icon={Globe}
+              className="!ml-0 p-0 hover:no-underline"
+              onClick={() => setFieldValue(namespaced('useRegistry'), false)}
+            >
+              Advanced mode
+            </Button>
+          ) : (
+            <Button
+              size="small"
+              color="link"
+              icon={Database}
+              className="!ml-0 p-0 hover:no-underline"
+              onClick={() => setFieldValue(namespaced('useRegistry'), true)}
+            >
+              Simple mode
+            </Button>
+          )}
+        </div>
+      </div>
+
+      {children}
+
+      {checkRateLimits && values.useRegistry && (
+        <RateLimits registryId={values.registryId} setValidity={setValidity} />
+      )}
+    </div>
+  );
+
+  function namespaced(field: string) {
+    return fieldNamespace ? `${fieldNamespace}.${field}` : field;
+  }
+}

app/react/components/ImageConfigFieldset/InputSearch.tsx

@@ -0,0 +1,52 @@
+import { AutomationTestingProps } from '@/types';
+
+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;
+} & AutomationTestingProps) {
+  const selectValue = options.find((option) => option.value === value) || {
+    value: '',
+    label: value,
+  };
+
+  return (
+    <Select
+      options={options}
+      value={selectValue}
+      onChange={(option) => option && onChange(option.value)}
+      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/RateLimits.tsx

@@ -0,0 +1,240 @@
+import { useEffect } from 'react';
+import { useQuery } from 'react-query';
+
+import axios, { parseAxiosError } from '@/portainer/services/axios';
+import { useCurrentEnvironment } from '@/react/hooks/useCurrentEnvironment';
+import { useCurrentUser } from '@/react/hooks/useUser';
+import { buildUrl } from '@/react/portainer/environments/environment.service/utils';
+import {
+  Environment,
+  EnvironmentType,
+} from '@/react/portainer/environments/types';
+import {
+  isAgentEnvironment,
+  isLocalEnvironment,
+} from '@/react/portainer/environments/utils';
+import { RegistryId } from '@/react/portainer/registries/types/registry';
+import { useRegistry } from '@/react/portainer/registries/queries/useRegistry';
+
+import { Link } from '@@/Link';
+import { TextTip } from '@@/Tip/TextTip';
+
+import { getIsDockerHubRegistry } from './utils';
+
+export function RateLimits({
+  registryId,
+  setValidity,
+}: {
+  registryId?: RegistryId;
+  setValidity: (error?: string) => void;
+}) {
+  const registryQuery = useRegistry(registryId);
+
+  const registry = registryQuery.data;
+
+  const isDockerHubRegistry = getIsDockerHubRegistry(registry);
+
+  const environmentQuery = useCurrentEnvironment();
+
+  if (
+    !environmentQuery.data ||
+    registryQuery.isLoading ||
+    !isDockerHubRegistry
+  ) {
+    return null;
+  }
+
+  return (
+    <RateLimitsInner
+      isAuthenticated={registry?.Authentication}
+      registryId={registryId}
+      setValidity={setValidity}
+      environment={environmentQuery.data}
+    />
+  );
+}
+
+function RateLimitsInner({
+  isAuthenticated = false,
+  registryId = 0,
+  setValidity,
+  environment,
+}: {
+  isAuthenticated?: boolean;
+  registryId?: RegistryId;
+  setValidity: (error?: string) => void;
+  environment: Environment;
+}) {
+  const pullRateLimits = useRateLimits(registryId, environment, setValidity);
+  const { isAdmin } = useCurrentUser();
+
+  if (!pullRateLimits) {
+    return null;
+  }
+
+  return (
+    <div className="form-group">
+      <div className="col-sm-12">
+        {pullRateLimits.remaining > 0 ? (
+          <TextTip color="blue">
+            {isAuthenticated ? (
+              <>
+                You are currently using a free account to pull images from
+                DockerHub and will be limited to 200 pulls every 6 hours.
+                Remaining pulls:
+                <span className="font-bold">
+                  {pullRateLimits.remaining}/{pullRateLimits.limit}
+                </span>
+              </>
+            ) : (
+              <>
+                {isAdmin ? (
+                  <>
+                    You are currently using an anonymous account to pull images
+                    from DockerHub and will be limited to 100 pulls every 6
+                    hours. You can configure DockerHub authentication in the{' '}
+                    <Link to="portainer.registries">Registries View</Link>.
+                    Remaining pulls:{' '}
+                    <span className="font-bold">
+                      {pullRateLimits.remaining}/{pullRateLimits.limit}
+                    </span>
+                  </>
+                ) : (
+                  <>
+                    You are currently using an anonymous account to pull images
+                    from DockerHub and will be limited to 100 pulls every 6
+                    hours. Contact your administrator to configure DockerHub
+                    authentication. Remaining pulls:{' '}
+                    <span className="font-bold">
+                      {pullRateLimits.remaining}/{pullRateLimits.limit}
+                    </span>
+                  </>
+                )}
+              </>
+            )}
+          </TextTip>
+        ) : (
+          <TextTip>
+            {isAuthenticated ? (
+              <>
+                Your authorized pull count quota as a free user is now exceeded.
+                You will not be able to pull any image from the DockerHub
+                registry.
+              </>
+            ) : (
+              <>
+                Your authorized pull count quota as an anonymous user is now
+                exceeded. You will not be able to pull any image from the
+                DockerHub registry.
+              </>
+            )}
+          </TextTip>
+        )}
+      </div>
+    </div>
+  );
+}
+
+interface PullRateLimits {
+  remaining: number;
+  limit: number;
+}
+
+function useRateLimits(
+  registryId: RegistryId,
+  environment: Environment,
+  setValidity: (error?: string) => void
+) {
+  const isValidForPull =
+    isAgentEnvironment(environment.Type) || isLocalEnvironment(environment);
+
+  const query = useQuery(
+    ['dockerhub', environment.Id, registryId],
+    () => 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) {
+    return null;
+  }
+
+  return query.data;
+}
+
+function getRateLimits(environment: Environment, registryId: RegistryId) {
+  if (isLocalEnvironment(environment)) {
+    return getLocalEnvironmentRateLimits(environment.Id, registryId);
+  }
+
+  const envType = getEnvType(environment.Type);
+
+  return getAgentEnvironmentRateLimits(environment.Id, envType, registryId);
+}
+
+async function getLocalEnvironmentRateLimits(
+  environmentId: Environment['Id'],
+  registryId: RegistryId
+) {
+  try {
+    const { data } = await axios.get<PullRateLimits>(
+      buildUrl(environmentId, `dockerhub/${registryId}`)
+    );
+    return data;
+  } catch (e) {
+    throw parseAxiosError(
+      e as Error,
+      'Unable to retrieve DockerHub pull rate limits'
+    );
+  }
+}
+
+function getEnvType(type: Environment['Type']) {
+  switch (type) {
+    case EnvironmentType.AgentOnKubernetes:
+    case EnvironmentType.EdgeAgentOnKubernetes:
+      return 'kubernetes';
+
+    case EnvironmentType.AgentOnDocker:
+    case EnvironmentType.EdgeAgentOnDocker:
+    default:
+      return 'docker';
+  }
+}
+
+async function getAgentEnvironmentRateLimits(
+  environmentId: Environment['Id'],
+  envType: 'kubernetes' | 'docker',
+  registryId: RegistryId
+) {
+  try {
+    const { data } = await axios.get<PullRateLimits>(
+      buildUrl(environmentId, `${envType}/v2/dockerhub/${registryId}`)
+    );
+    return data;
+  } catch (e) {
+    throw parseAxiosError(
+      e as Error,
+      'Unable to retrieve DockerHub pull rate limits'
+    );
+  }
+}

app/react/components/ImageConfigFieldset/SimpleForm.tsx

@@ -0,0 +1,257 @@
+import { FormikErrors, useFormikContext } from 'formik';
+import _ from 'lodash';
+import { useMemo } from 'react';
+
+import DockerIcon from '@/assets/ico/vendor/docker.svg?c';
+import { useImages } from '@/react/docker/images/queries/useImages';
+import {
+  imageContainsURL,
+  getUniqueTagListFromImages,
+} from '@/react/docker/images/utils';
+import { useEnvironmentId } from '@/react/hooks/useEnvironmentId';
+import { useEnvironmentRegistries } from '@/react/portainer/environments/queries/useEnvironmentRegistries';
+import {
+  Registry,
+  RegistryId,
+  RegistryTypes,
+} from '@/react/portainer/registries/types/registry';
+import { useRegistry } from '@/react/portainer/registries/queries/useRegistry';
+
+import { Button } from '@@/buttons';
+import { FormControl } from '@@/form-components/FormControl';
+import { InputGroup } from '@@/form-components/InputGroup';
+import { PortainerSelect } from '@@/form-components/PortainerSelect';
+import { Input } from '@@/form-components/Input';
+
+import { Values } from './types';
+import { InputSearch } from './InputSearch';
+import { getIsDockerHubRegistry } from './utils';
+
+export function SimpleForm({
+  autoComplete,
+  values,
+  errors,
+  fieldNamespace,
+}: {
+  autoComplete?: boolean;
+  values: Values;
+  errors?: FormikErrors<Values>;
+  fieldNamespace?: string;
+}) {
+  const { setFieldValue } = useFormikContext<Values>();
+
+  const registryQuery = useRegistry(values.registryId);
+
+  const registry = registryQuery.data;
+
+  const registryUrl = getRegistryURL(registry) || 'docker.io';
+  const isDockerHubRegistry = getIsDockerHubRegistry(registry);
+
+  return (
+    <>
+      <FormControl
+        label="Registry"
+        inputId="registry-field"
+        errors={errors?.registryId}
+      >
+        <RegistrySelector
+          onChange={(value) => setFieldValue(namespaced('registryId'), value)}
+          value={values.registryId}
+          inputId="registry-field"
+        />
+      </FormControl>
+
+      <FormControl label="Image" inputId="image-field" errors={errors?.image}>
+        <InputGroup>
+          <InputGroup.Addon>{registryUrl}</InputGroup.Addon>
+
+          <ImageField
+            onChange={(value) => setFieldValue(namespaced('image'), value)}
+            value={values.image}
+            registry={registry}
+            autoComplete={autoComplete}
+            inputId="image-field"
+          />
+
+          {isDockerHubRegistry && (
+            <InputGroup.ButtonWrapper>
+              <Button
+                as="a"
+                title="Search image on Docker Hub"
+                color="default"
+                props={{
+                  href: 'https://hub.docker.com/search?type=image&q={ $ctrl.model.Image | trimshasum | trimversiontag }',
+                  target: '_blank',
+                  rel: 'noreferrer',
+                }}
+                icon={DockerIcon}
+              >
+                Search
+              </Button>
+            </InputGroup.ButtonWrapper>
+          )}
+        </InputGroup>
+      </FormControl>
+    </>
+  );
+
+  function namespaced(field: string) {
+    return fieldNamespace ? `${fieldNamespace}.${field}` : field;
+  }
+}
+
+function getImagesForRegistry(
+  images: string[],
+  registries: Array<Registry>,
+  registry?: Registry
+) {
+  if (isKnownRegistry(registry)) {
+    const url = getRegistryURL(registry);
+    const registryImages = images.filter((image) => image.includes(url));
+    return registryImages.map((image) =>
+      image.replace(new RegExp(`${url}/?`), '')
+    );
+  }
+
+  const knownRegistries = registries.filter((reg) => isKnownRegistry(reg));
+  const registryImages = knownRegistries.flatMap((registry) =>
+    images.filter((image) => image.includes(registry.URL))
+  );
+  return _.difference(images, registryImages).filter(
+    (image) => !imageContainsURL(image)
+  );
+}
+
+function RegistrySelector({
+  value,
+  onChange,
+  inputId,
+}: {
+  value: RegistryId | undefined;
+  onChange: (value: RegistryId | undefined) => void;
+  inputId?: string;
+}) {
+  const environmentId = useEnvironmentId();
+
+  const registriesQuery = useEnvironmentRegistries(environmentId, {
+    select: (registries) =>
+      registries
+        .sort((a, b) => a.Name.localeCompare(b.Name))
+        .map((registry) => ({
+          label: registry.Name,
+          value: registry.Id,
+        })),
+  });
+
+  return (
+    <PortainerSelect
+      inputId={inputId}
+      options={registriesQuery.data || []}
+      value={value}
+      onChange={onChange}
+      data-cy="component-registrySelect"
+    />
+  );
+}
+
+function ImageField({
+  value,
+  onChange,
+  registry,
+  autoComplete,
+  inputId,
+}: {
+  value: string;
+  onChange: (value: string) => void;
+  registry?: Registry;
+  autoComplete?: boolean;
+  inputId?: string;
+}) {
+  return autoComplete ? (
+    <ImageFieldAutoComplete
+      value={value}
+      onChange={onChange}
+      registry={registry}
+      inputId={inputId}
+    />
+  ) : (
+    <Input
+      value={value}
+      onChange={(e) => onChange(e.target.value)}
+      id={inputId}
+    />
+  );
+}
+
+function ImageFieldAutoComplete({
+  value,
+  onChange,
+  registry,
+  inputId,
+}: {
+  value: string;
+  onChange: (value: string) => void;
+  registry?: Registry;
+  inputId?: string;
+}) {
+  const environmentId = useEnvironmentId();
+
+  const registriesQuery = useEnvironmentRegistries(environmentId);
+
+  const imagesQuery = useImages(environmentId, {
+    select: (images) => getUniqueTagListFromImages(images),
+  });
+
+  const imageOptions = useMemo(() => {
+    const images = getImagesForRegistry(
+      imagesQuery.data || [],
+      registriesQuery.data || [],
+      registry
+    );
+    return images.map((image) => ({
+      label: image,
+      value: image,
+    }));
+  }, [registry, imagesQuery.data, registriesQuery.data]);
+
+  return (
+    <InputSearch
+      value={value}
+      onChange={(value) => onChange(value)}
+      data-cy="component-imageInput"
+      placeholder="e.g. my-image:my-tag"
+      options={imageOptions}
+      inputId={inputId}
+    />
+  );
+}
+
+function isKnownRegistry(registry?: Registry) {
+  return registry && registry.Type !== RegistryTypes.ANONYMOUS && registry.URL;
+}
+
+function getRegistryURL(registry?: Registry) {
+  if (!registry) {
+    return '';
+  }
+
+  if (
+    registry.Type !== RegistryTypes.GITLAB &&
+    registry.Type !== RegistryTypes.GITHUB
+  ) {
+    return registry.URL;
+  }
+
+  if (registry.Type === RegistryTypes.GITLAB) {
+    return `${registry.URL}/${registry.Gitlab?.ProjectPath}`;
+  }
+
+  if (registry.Type === RegistryTypes.GITHUB) {
+    const namespace = registry.Github?.UseOrganisation
+      ? registry.Github?.OrganisationName
+      : registry.Username;
+    return `${registry.URL}/${namespace}`;
+  }
+
+  return '';
+}

app/react/components/ImageConfigFieldset/index.ts

@@ -0,0 +1,3 @@
+export { ImageConfigFieldset } from './ImageConfigFieldset';
+export { type Values as ImageConfigValues } from './types';
+export { validation as imageConfigValidation } from './validation';

app/react/components/ImageConfigFieldset/types.ts

@@ -0,0 +1,7 @@
+import { Registry } from '@/react/portainer/registries/types/registry';
+
+export interface Values {
+  useRegistry: boolean;
+  registryId?: Registry['Id'];
+  image: string;
+}

app/react/components/ImageConfigFieldset/utils.ts

@@ -0,0 +1,12 @@
+import {
+  Registry,
+  RegistryTypes,
+} from '@/react/portainer/registries/types/registry';
+
+export function getIsDockerHubRegistry(registry?: Registry | null) {
+  return (
+    !registry ||
+    registry.Type === RegistryTypes.DOCKERHUB ||
+    registry.Type === RegistryTypes.ANONYMOUS
+  );
+}

app/react/components/ImageConfigFieldset/validation.ts

@@ -0,0 +1,11 @@
+import { bool, number, object, SchemaOf, string } from 'yup';
+
+import { Values } from './types';
+
+export function validation(): SchemaOf<Values> {
+  return object({
+    image: string().required('Image is required'),
+    registryId: number().default(0),
+    useRegistry: bool().default(false),
+  });
+}

app/react/docker/images/queries/encodeRegistryCredentials.ts

@@ -0,0 +1,15 @@
+import { Registry } from '@/react/portainer/registries/types/registry';
+
+/**
+ * Encodes the registry credentials in base64
+ * @param registryId
+ * @returns
+ */
+export function encodeRegistryCredentials(registryId: Registry['Id']) {
+  const credentials = {
+    registryId,
+  };
+
+  const buf = Buffer.from(JSON.stringify(credentials));
+  return buf.toString('base64url');
+}

app/react/docker/images/queries/queryKeys.ts

@@ -0,0 +1,9 @@
+import { EnvironmentId } from '@/react/portainer/environments/types';
+
+import { queryKeys as dockerQueryKeys } from '../../queries/utils';
+
+export const queryKeys = {
+  base: (environmentId: EnvironmentId) =>
+    [dockerQueryKeys.root(environmentId), 'images'] as const,
+  list: (environmentId: EnvironmentId) => queryKeys.base(environmentId),
+};

app/react/docker/images/queries/useImages.ts

@@ -0,0 +1,124 @@
+import { useQuery } from 'react-query';
+
+import axios, { parseAxiosError } from '@/portainer/services/axios';
+import { EnvironmentId } from '@/react/portainer/environments/types';
+
+import { buildUrl } from '../../proxy/queries/build-url';
+
+import { queryKeys } from './queryKeys';
+
+interface ImageSummary {
+  /**
+   * Number of containers using this image. Includes both stopped and running	containers.
+   *
+   * This size is not calculated by default, and depends on which API endpoint is used.
+   * `-1` indicates that the value has not been set / calculated.
+   *
+   * Required: true
+   */
+  Containers: number;
+
+  /**
+   * Date and time at which the image was created as a Unix timestamp
+   * (number of seconds sinds EPOCH).
+   *
+   * Required: true
+   */
+  Created: number;
+
+  /**
+   * ID is the content-addressable ID of an image.
+   *
+   * This identifier is a content-addressable digest calculated from the
+   * image's configuration (which includes the digests of layers used by
+   * the image).
+   *
+   * Note that this digest differs from the `RepoDigests` below, which
+   * holds digests of image manifests that reference the image.
+   *
+   * 	Required: true
+   */
+  Id: string;
+
+  /**
+   * User-defined key/value metadata.
+   * Required: true
+   */
+  Labels: { [key: string]: string };
+
+  /**
+   * ID of the parent image.
+   *
+   * Depending on how the image was created, this field may be empty and
+   * is only set for images that were built/created locally. This field
+   * is empty if the image was pulled from an image registry.
+   *
+   * Required: true
+   */
+  ParentId: string;
+
+  /**
+   * List of content-addressable digests of locally available image manifests
+   * that the image is referenced from. Multiple manifests can refer to the
+   * same image.
+   *
+   * These digests are usually only available if the image was either pulled
+   * from a registry, or if the image was pushed to a registry, which is when
+   * the manifest is generated and its digest calculated.
+   *
+   * Required: true
+   */
+  RepoDigests: string[];
+
+  /**
+   * List of image names/tags in the local image cache that reference this
+   * image.
+   *
+   * Multiple image tags can refer to the same image, and this list may be
+   * empty if no tags reference the image, in which case the image is
+   * "untagged", in which case it can still be referenced by its ID.
+   *
+   * Required: true
+   */
+  RepoTags: string[];
+
+  /**
+   * Total size of image layers that are shared between this image and other
+   * images.
+   *
+   * This size is not calculated by default. `-1` indicates that the value
+   * has not been set / calculated.
+   *
+   * Required: true
+   */
+  SharedSize: number;
+  Size: number;
+  VirtualSize: number;
+}
+
+type ImagesListResponse = ImageSummary[];
+
+export function useImages<T = ImagesListResponse>(
+  environmentId: EnvironmentId,
+  {
+    select,
+    enabled,
+  }: { select?(data: ImagesListResponse): T; enabled?: boolean } = {}
+) {
+  return useQuery(
+    queryKeys.list(environmentId),
+    () => getImages(environmentId),
+    { select, enabled }
+  );
+}
+
+async function getImages(environmentId: EnvironmentId) {
+  try {
+    const { data } = await axios.get<ImagesListResponse>(
+      buildUrl(environmentId, 'images', 'json')
+    );
+    return data;
+  } catch (err) {
+    throw parseAxiosError(err as Error, 'Unable to retrieve images');
+  }
+}

app/react/docker/images/types.ts

@@ -0,0 +1,22 @@
+import { DockerImageResponse } from './types/response';
+
+type Status = 'outdated' | 'updated' | 'inprocess' | string;
+
+export enum ResourceType {
+  CONTAINER,
+  SERVICE,
+}
+
+export interface ImageStatus {
+  Status: Status;
+  Message: string;
+}
+
+export type ResourceID = string;
+
+type DecoratedDockerImage = {
+  Used: boolean;
+};
+
+export type DockerImage = DecoratedDockerImage &
+  Omit<DockerImageResponse, keyof DecoratedDockerImage>;

app/react/docker/images/types/response.ts

@@ -0,0 +1,12 @@
+export type DockerImageResponse = {
+  Containers: number;
+  Created: number;
+  Id: string;
+  Labels: { [key: string]: string };
+  ParentId: string;
+  RepoDigests: string[];
+  RepoTags: string[];
+  SharedSize: number;
+  Size: number;
+  VirtualSize: number;
+};

app/react/docker/images/utils.ts

@@ -0,0 +1,101 @@
+import _ from 'lodash';
+
+import { trimSHA } from '@/docker/filters/utils';
+import {
+  Registry,
+  RegistryTypes,
+} from '@/react/portainer/registries/types/registry';
+
+import { DockerImage } from './types';
+import { DockerImageResponse } from './types/response';
+
+export function parseViewModel(response: DockerImageResponse): DockerImage {
+  return {
+    ...response,
+    Used: false,
+    RepoTags:
+      response.RepoTags ??
+      response.RepoDigests.map((digest) => `${trimSHA(digest)}:<none>`),
+  };
+}
+
+export function getUniqueTagListFromImages(
+  images: Array<{ RepoTags?: string[] }>
+) {
+  return _.uniq(
+    images.flatMap((image) =>
+      image.RepoTags
+        ? image.RepoTags.filter((item) => !item.includes('<none>'))
+        : []
+    )
+  );
+}
+
+export function imageContainsURL(image: string) {
+  const split = image.split('/');
+  const url = split[0];
+  if (split.length > 1) {
+    return url.includes('.') || url.includes(':');
+  }
+  return false;
+}
+
+/**
+ * builds the complete uri for an image based on its registry
+ * @param {PorImageRegistryModel} imageModel
+ */
+export function buildImageFullURI(image: string, registry?: Registry) {
+  if (!registry) {
+    return ensureTag(image);
+  }
+
+  const imageName = buildImageFullURIWithRegistry(image, registry);
+
+  return ensureTag(imageName);
+
+  function ensureTag(image: string, defaultTag = 'latest') {
+    return image.includes(':') ? image : `${image}:${defaultTag}`;
+  }
+}
+
+function buildImageFullURIWithRegistry(image: string, registry: Registry) {
+  switch (registry.Type) {
+    case RegistryTypes.GITHUB:
+      return buildImageURIForGithub(image, registry);
+    case RegistryTypes.GITLAB:
+      return buildImageURIForGitLab(image, registry);
+    case RegistryTypes.QUAY:
+      return buildImageURIForQuay(image, registry);
+    case RegistryTypes.ANONYMOUS:
+      return image;
+    default:
+      return buildImageURIForOtherRegistry(image, registry);
+  }
+
+  function buildImageURIForGithub(image: string, registry: Registry) {
+    const imageName = image.split('/').pop();
+
+    const namespace = registry.Github.UseOrganisation
+      ? registry.Github.OrganisationName
+      : registry.Username;
+    return `${registry.URL}/${namespace}/${imageName}`;
+  }
+
+  function buildImageURIForGitLab(image: string, registry: Registry) {
+    const slash = image.startsWith(':') ? '' : '/';
+    return `${registry.URL}/${registry.Gitlab.ProjectPath}${slash}${image}`;
+  }
+
+  function buildImageURIForQuay(image: string, registry: Registry) {
+    const name = registry.Quay.UseOrganisation
+      ? registry.Quay.OrganisationName
+      : registry.Username;
+    const url = registry.URL ? `${registry.URL}/` : '';
+    return `${url}${name}/${image}`;
+  }
+
+  function buildImageURIForOtherRegistry(image: string, registry: Registry) {
+    const url = registry.URL ? `${registry.URL}/` : '';
+    return url + image;
+  }
+}

app/react/docker/proxy/queries/build-url.ts

@@ -0,0 +1,15 @@
+import { EnvironmentId } from '@/react/portainer/environments/types';
+
+export function buildUrl(
+  environmentId: EnvironmentId,
+  action: string,
+  subAction = ''
+) {
+  let url = `/endpoints/${environmentId}/docker/${action}`;
+
+  if (subAction) {
+    url += `/${subAction}`;
+  }
+
+  return url;
+}

app/react/portainer/environments/queries/query-keys.ts

@@ -3,4 +3,6 @@ import { EnvironmentId } from '../types';
 export const queryKeys = {
   base: () => ['environments'] as const,
   item: (id: EnvironmentId) => [...queryKeys.base(), id] as const,
+  registries: (environmentId: EnvironmentId) =>
+    [...queryKeys.base(), environmentId, 'registries'] as const,
 };

app/react/portainer/environments/queries/useEnvironmentRegistries.ts

@@ -0,0 +1,30 @@
+import axios, { parseAxiosError } from '@/portainer/services/axios';
+
+import { buildUrl } from '../environment.service/utils';
+import { EnvironmentId } from '../types';
+import { Registry } from '../../registries/types/registry';
+import { useGenericRegistriesQuery } from '../../registries/queries/useRegistries';
+
+import { queryKeys } from './query-keys';
+
+export function useEnvironmentRegistries<T = Array<Registry>>(
+  environmentId: EnvironmentId,
+  queryOptions: { select?(data: Array<Registry>): T; enabled?: boolean } = {}
+) {
+  return useGenericRegistriesQuery(
+    queryKeys.registries(environmentId),
+    () => getEnvironmentRegistries(environmentId),
+    queryOptions
+  );
+}
+
+async function getEnvironmentRegistries(environmentId: EnvironmentId) {
+  try {
+    const { data } = await axios.get<Array<Registry>>(
+      buildUrl(environmentId, 'registries')
+    );
+    return data;
+  } catch (err) {
+    throw parseAxiosError(err as Error, 'Unable to retrieve registries');
+  }
+}

app/react/portainer/registries/queries/build-url.ts

@@ -0,0 +1,11 @@
+import { RegistryId } from '../types/registry';
+
+export function buildUrl(registryId: RegistryId) {
+  const base = '/registries';
+
+  if (registryId) {
+    return `${base}/${registryId}`;
+  }
+
+  return base;
+}

app/react/portainer/registries/queries/query-keys.ts

@@ -0,0 +1,6 @@
+import { RegistryId } from '../types/registry';
+
+export const queryKeys = {
+  base: () => ['registries'] as const,
+  item: (registryId: RegistryId) => [...queryKeys.base(), registryId] as const,
+};

app/react/portainer/registries/queries/useRegistries.ts

@@ -1,20 +1,82 @@
-import { useQuery } from 'react-query';
+import { QueryKey, useQuery } from 'react-query';
 
+import { withError } from '@/react-tools/react-query';
 import axios, { parseAxiosError } from '@/portainer/services/axios';
 
-import { Registry } from '../types';
+import { Registry, RegistryTypes } from '../types/registry';
+import { usePublicSettings } from '../../settings/queries';
 
-import { queryKeys } from './queryKeys';
+import { queryKeys } from './query-keys';
 
-export function useRegistries() {
+export function useRegistries<T = Registry[]>(
-  return useQuery(queryKeys.registries(), getRegistries);
+  queryOptions: {
+    enabled?: boolean;
+    select?: (registries: Registry[]) => T;
+    onSuccess?: (data: T) => void;
+  } = {}
+) {
+  return useGenericRegistriesQuery(
+    queryKeys.base(),
+    getRegistries,
+    queryOptions
+  );
 }
 
-async function getRegistries() {
+export function useGenericRegistriesQuery<T = Registry[]>(
+  queryKey: QueryKey,
+  fetcher: () => Promise<Array<Registry>>,
+  {
+    enabled,
+    select,
+    onSuccess,
+  }: {
+    enabled?: boolean;
+    select?: (registries: Registry[]) => T;
+    onSuccess?: (data: T) => void;
+  } = {}
+) {
+  const hideDefaultRegistryQuery = usePublicSettings({
+    select: (settings) => settings.DefaultRegistry?.Hide,
+    enabled,
+  });
+
+  const hideDefault = !!hideDefaultRegistryQuery.data;
+
+  return useQuery(
+    queryKey,
+    async () => {
+      const registries = await fetcher();
+
+      if (
+        hideDefault ||
+        registries.some((r) => r.Type === RegistryTypes.DOCKERHUB)
+      ) {
+        return registries;
+      }
+
+      return [
+        {
+          Name: 'Docker Hub (anonymous)',
+          Id: 0,
+          Type: RegistryTypes.DOCKERHUB,
+        } as Registry,
+        ...registries,
+      ];
+    },
+    {
+      select,
+      ...withError('Unable to retrieve registries'),
+      enabled: hideDefaultRegistryQuery.isSuccess && enabled,
+      onSuccess,
+    }
+  );
+}
+
+export async function getRegistries() {
   try {
-    const response = await axios.get<Array<Registry>>('/registries');
+    const { data } = await axios.get<Registry[]>('/registries');
-    return response.data;
+    return data;
-  } catch (err) {
+  } catch (e) {
-    throw parseAxiosError(err as Error, 'Unable to retrieve registries');
+    throw parseAxiosError(e as Error, 'Unable to retrieve registries');
   }
 }

app/react/portainer/registries/queries/useRegistry.ts

@@ -0,0 +1,27 @@
+import { useQuery } from 'react-query';
+
+import axios, { parseAxiosError } from '@/portainer/services/axios';
+
+import { Registry } from '../types/registry';
+
+import { buildUrl } from './build-url';
+import { queryKeys } from './query-keys';
+
+export function useRegistry(registryId?: Registry['Id']) {
+  return useQuery(
+    registryId ? queryKeys.item(registryId) : [],
+    () => (registryId ? getRegistry(registryId) : undefined),
+    {
+      enabled: !!registryId,
+    }
+  );
+}
+
+async function getRegistry(registryId: Registry['Id']) {
+  try {
+    const { data } = await axios.get<Registry>(buildUrl(registryId));
+    return data;
+  } catch (err) {
+    throw parseAxiosError(err as Error, 'Unable to retrieve registry');
+  }
+}

app/react/portainer/registries/registry.service.ts

@@ -0,0 +1,32 @@
+import axios, { parseAxiosError } from '@/portainer/services/axios';
+
+import { Catalog, Repository } from './types/registry';
+
+export async function listRegistryCatalogs(registryId: number) {
+  try {
+    const { data } = await axios.get<Catalog>(
+      `/registries/${registryId}/v2/_catalog`
+    );
+    return data;
+  } catch (err) {
+    throw parseAxiosError(err as Error, 'Failed to get catalog of registry');
+  }
+}
+
+export async function listRegistryCatalogsRepository(
+  registryId: number,
+  repositoryName: string
+) {
+  try {
+    const { data } = await axios.get<Repository>(
+      `/registries/${registryId}/v2/${repositoryName}/tags/list`,
+      {}
+    );
+    return data;
+  } catch (err) {
+    throw parseAxiosError(
+      err as Error,
+      'Failed to get catelog repository of regisry'
+    );
+  }
+}

app/react/portainer/registries/types/registry.ts

@@ -0,0 +1,79 @@
+import { TeamId } from '@/react/portainer/users/teams/types';
+import { UserId } from '@/portainer/users/types';
+
+export type Catalog = {
+  repositories: string[];
+};
+
+export type Repository = {
+  name: string;
+  tags: string[];
+};
+
+export enum RegistryTypes {
+  ANONYMOUS,
+  QUAY,
+  AZURE,
+  CUSTOM,
+  GITLAB,
+  PROGET,
+  DOCKERHUB,
+  ECR,
+  GITHUB,
+}
+
+export type RoleId = number;
+interface AccessPolicy {
+  RoleId: RoleId;
+}
+
+type UserAccessPolicies = Record<UserId, AccessPolicy>; // map[UserID]AccessPolicy
+type TeamAccessPolicies = Record<TeamId, AccessPolicy>;
+
+export interface RegistryAccess {
+  UserAccessPolicies: UserAccessPolicies;
+  TeamAccessPolicies: TeamAccessPolicies;
+  Namespaces: string[];
+}
+
+export interface RegistryAccesses {
+  [key: string]: RegistryAccess;
+}
+
+export interface Gitlab {
+  ProjectId: number;
+  InstanceURL: string;
+  ProjectPath: string;
+}
+
+export interface Quay {
+  UseOrganisation: boolean;
+  OrganisationName: string;
+}
+
+export interface Github {
+  UseOrganisation: boolean;
+  OrganisationName: string;
+}
+
+export interface Ecr {
+  Region: string;
+}
+
+export type RegistryId = number;
+export interface Registry {
+  Id: RegistryId;
+  Type: number;
+  Name: string;
+  URL: string;
+  BaseURL: string;
+  Authentication: boolean;
+  Username: string;
+  Password: string;
+  RegistryAccesses: RegistryAccesses;
+  Checked: boolean;
+  Gitlab: Gitlab;
+  Quay: Quay;
+  Github: Github;
+  Ecr: Ecr;
+}

app/react/portainer/registries/utils/findRegistryMatch.test.ts

@@ -0,0 +1,83 @@
+import { Registry, RegistryId, RegistryTypes } from '../types/registry';
+
+import { findBestMatchRegistry } from './findRegistryMatch';
+
+function buildTestRegistry(
+  id: RegistryId,
+  type: RegistryTypes,
+  name: string,
+  url: string
+): Registry {
+  return {
+    Id: id,
+    Type: type,
+    URL: url,
+    Name: name,
+    Username: '',
+    Authentication: false,
+    Password: '',
+    BaseURL: '',
+    Checked: false,
+    Ecr: { Region: '' },
+    Github: { OrganisationName: '', UseOrganisation: false },
+    Quay: { OrganisationName: '', UseOrganisation: false },
+    Gitlab: { InstanceURL: '', ProjectId: 0, ProjectPath: '' },
+    RegistryAccesses: {},
+  };
+}
+
+describe('findBestMatchRegistry', () => {
+  const registries: Array<Registry> = [
+    buildTestRegistry(
+      1,
+      RegistryTypes.DOCKERHUB,
+      'DockerHub',
+      'hub.docker.com'
+    ),
+    buildTestRegistry(
+      2,
+      RegistryTypes.DOCKERHUB,
+      'DockerHub2',
+      'https://registry2.com'
+    ),
+    buildTestRegistry(
+      3,
+      RegistryTypes.GITHUB,
+      'GitHub',
+      'https://registry3.com'
+    ),
+  ];
+
+  it('should return the registry with the given ID', () => {
+    const registryId = 2;
+    const result = findBestMatchRegistry('repository', registries, registryId);
+    expect(result).toEqual(registries[1]);
+  });
+
+  it('should return the DockerHub registry with matching username and URL', () => {
+    const repository = 'user1/repository';
+    const result = findBestMatchRegistry(repository, registries);
+    expect(result).toEqual(registries[0]);
+  });
+
+  it('should return the registry with a matching URL', () => {
+    const repository = 'https://registry2.com/repository';
+    const result = findBestMatchRegistry(repository, registries);
+    expect(result).toEqual(registries[1]);
+  });
+
+  it('should return the default DockerHub registry if no matches are found', () => {
+    const repository = 'repository';
+    const result = findBestMatchRegistry(repository, registries);
+    expect(result).toEqual(registries[0]);
+  });
+
+  it('when using something:latest, shouldn\'t choose "tes" docker', () => {
+    const repository = 'something:latest';
+    const result = findBestMatchRegistry(repository, [
+      ...registries,
+      buildTestRegistry(4, RegistryTypes.CUSTOM, 'Test', 'tes'),
+    ]);
+    expect(result).toEqual(registries[0]);
+  });
+});

app/react/portainer/registries/utils/findRegistryMatch.ts

@@ -0,0 +1,40 @@
+import { Registry, RegistryId, RegistryTypes } from '../types/registry';
+
+import { getURL } from './getUrl';
+
+/**
+ *  findBestMatchRegistry finds out the best match registry for repository
+ * matching precedence:
+ * 1. registryId matched
+ * 2. both domain name and username matched (for dockerhub only)
+ * 3. only URL matched
+ * 4. pick up the first dockerhub registry
+ */
+export function findBestMatchRegistry(
+  repository: string,
+  registries: Array<Registry>,
+  registryId?: RegistryId
+) {
+  if (registryId) {
+    return registries.find((r) => r.Id === registryId);
+  }
+
+  const matchDockerByUserAndUrl = registries.find(
+    (r) =>
+      r.Type === RegistryTypes.DOCKERHUB &&
+      (repository.startsWith(`${r.Username}/`) ||
+        repository.startsWith(`${getURL(r)}/${r.Username}/`))
+  );
+
+  if (matchDockerByUserAndUrl) {
+    return matchDockerByUserAndUrl;
+  }
+
+  const matchByUrl = registries.find((r) => repository.startsWith(getURL(r)));
+
+  if (matchByUrl) {
+    return matchByUrl;
+  }
+
+  return registries.find((r) => r.Type === RegistryTypes.DOCKERHUB);
+}

app/react/portainer/registries/utils/getImageConfig.ts

@@ -0,0 +1,43 @@
+import { imageContainsURL } from '@/react/docker/images/utils';
+
+import { ImageConfigValues } from '@@/ImageConfigFieldset';
+
+import { Registry, RegistryId } from '../types/registry';
+
+import { findBestMatchRegistry } from './findRegistryMatch';
+import { getURL } from './getUrl';
+
+export function getDefaultImageConfig(): ImageConfigValues {
+  return {
+    registryId: 0,
+    image: '',
+    useRegistry: true,
+  };
+}
+
+export function getImageConfig(
+  repository: string,
+  registries: Registry[],
+  registryId?: RegistryId
+): ImageConfigValues {
+  const registry = findBestMatchRegistry(repository, registries, registryId);
+  if (registry) {
+    const url = getURL(registry);
+    let lastIndex = repository.lastIndexOf(url);
+    lastIndex = lastIndex === -1 ? 0 : lastIndex + url.length;
+    let image = repository.substring(lastIndex);
+    if (image.startsWith('/')) {
+      image = image.substring(1);
+    }
+
+    return {
+      useRegistry: true,
+      image,
+      registryId: registry.Id,
+    };
+  }
+  return {
+    image: repository,
+    useRegistry: imageContainsURL(repository),
+  };
+}

app/react/portainer/registries/utils/getUrl.ts

@@ -0,0 +1,31 @@
+import { Registry, RegistryTypes } from '../types/registry';
+
+export function getURL(registry: Registry) {
+  switch (registry.Type) {
+    case RegistryTypes.GITLAB:
+      return `${registry.URL}/${registry.Gitlab.ProjectPath}`;
+
+    case RegistryTypes.QUAY:
+      return getQuayUrl(registry);
+
+    case RegistryTypes.GITHUB:
+      return getGithubUrl(registry);
+
+    default:
+      return registry.URL;
+  }
+
+  function getGithubUrl(registry: Registry) {
+    const name = registry.Github.UseOrganisation
+      ? registry.Github.OrganisationName
+      : registry.Username;
+    return `${registry.URL}/${name}`;
+  }
+
+  function getQuayUrl(registry: Registry) {
+    const name = registry.Quay.UseOrganisation
+      ? registry.Quay.OrganisationName
+      : registry.Username;
+    return `${registry.URL}/${name}`;
+  }
+}

app/react/portainer/settings/types.ts

@@ -185,9 +185,8 @@ export interface PublicSettingsResponse {
   IsFDOEnabled: boolean;
   /** Whether AMT is enabled */
   IsAMTEnabled: boolean;
-
   /** Whether to hide default registry (only on BE) */
-  DefaultRegistry: {
+  DefaultRegistry?: {
     Hide: boolean;
   };
   Edge: {