feat(edge/templates): introduce edge specific settings [EE-6276] (#10609)

app/react/edge/edge-stacks/ItemView/EditEdgeStackForm/EditEdgeStackForm.tsx

@@ -20,6 +20,9 @@ import {
   envVarValidation,
 } from '@@/form-components/EnvironmentVariablesFieldset';
 
+import { PrePullToggle } from '../../components/PrePullToggle';
+import { RetryDeployToggle } from '../../components/RetryDeployToggle';
+
 import { PrivateRegistryFieldsetWrapper } from './PrivateRegistryFieldsetWrapper';
 import { FormValues } from './types';
 import { ComposeForm } from './ComposeForm';
@@ -175,46 +178,30 @@ function InnerForm({
           <PrivateRegistryFieldsetWrapper
             value={values.privateRegistryId}
             onChange={(value) => setFieldValue('privateRegistryId', value)}
-            isValid={isValid}
-            values={values}
-            stackName={edgeStack.Name}
+            values={{
+              fileContent: values.content,
+            }}
             onFieldError={(error) => setFieldError('privateRegistryId', error)}
             error={errors.privateRegistryId}
           />
 
-          <EnvironmentVariablesPanel
-            onChange={(value) => setFieldValue('envVars', value)}
-            values={values.envVars}
-            errors={errors.envVars}
-          />
-
           {values.deploymentType === DeploymentType.Compose && (
             <>
-              <div className="form-group">
-                <div className="col-sm-12">
-                  <SwitchField
-                    checked={values.prePullImage}
-                    name="prePullImage"
-                    label="Pre-pull images"
-                    tooltip="When enabled, redeployment will be executed when image(s) is pulled successfully"
-                    labelClass="col-sm-3 col-lg-2"
-                    onChange={(value) => setFieldValue('prePullImage', value)}
-                  />
-                </div>
-              </div>
+              <EnvironmentVariablesPanel
+                onChange={(value) => setFieldValue('envVars', value)}
+                values={values.envVars}
+                errors={errors.envVars}
+              />
 
-              <div className="form-group">
-                <div className="col-sm-12">
-                  <SwitchField
-                    checked={values.retryDeploy}
-                    name="retryDeploy"
-                    label="Retry deployment"
-                    tooltip="When enabled, this will allow the edge agent to retry deployment if failed to deploy initially"
-                    labelClass="col-sm-3 col-lg-2"
-                    onChange={(value) => setFieldValue('retryDeploy', value)}
-                  />
-                </div>
-              </div>
+              <PrePullToggle
+                onChange={(value) => setFieldValue('prePullImage', value)}
+                value={values.prePullImage}
+              />
+
+              <RetryDeployToggle
+                onChange={(value) => setFieldValue('retryDeploy', value)}
+                value={values.retryDeploy}
+              />
             </>
           )}
         </>

app/react/edge/edge-stacks/ItemView/EditEdgeStackForm/PrivateRegistryFieldsetWrapper.tsx

@@ -2,29 +2,32 @@ import _ from 'lodash';
 
 import { notifyError } from '@/portainer/services/notifications';
 import { PrivateRegistryFieldset } from '@/react/edge/edge-stacks/components/PrivateRegistryFieldset';
-import { useCreateEdgeStackFromFileContent } from '@/react/edge/edge-stacks/queries/useCreateEdgeStackFromFileContent';
 import { useRegistries } from '@/react/portainer/registries/queries/useRegistries';
+import { isBE } from '@/react/portainer/feature-flags/feature-flags.service';
+
+import { useParseRegistries } from '../../queries/useParseRegistries';
 
 import { FormValues } from './types';
 
 export function PrivateRegistryFieldsetWrapper({
   value,
-  isValid,
   error,
   onChange,
-  values,
-  stackName,
   onFieldError,
+  values,
+  isGit,
 }: {
   value: FormValues['privateRegistryId'];
-  isValid: boolean;
   error?: string;
   onChange: (value?: number) => void;
-  values: FormValues;
-  stackName: string;
+  values: {
+    fileContent?: string;
+    file?: File;
+  };
   onFieldError: (message: string) => void;
+  isGit?: boolean;
 }) {
-  const dryRunMutation = useCreateEdgeStackFromFileContent();
+  const dryRunMutation = useParseRegistries();
 
   const registriesQuery = useRegistries();
 
@@ -35,34 +38,37 @@ export function PrivateRegistryFieldsetWrapper({
   return (
     <PrivateRegistryFieldset
       value={value}
-      formInvalid={!isValid}
+      formInvalid={!values.file && !values.fileContent && !isGit}
       errorMessage={error}
       registries={registriesQuery.data}
-      onChange={() => matchRegistry()}
+      onChange={() => matchRegistry(values)}
       onSelect={(value) => onChange(value)}
       isActive={!!value}
       clearRegistries={() => onChange(undefined)}
+      method={isGit ? 'repository' : 'file'}
     />
   );
 
-  async function matchRegistry() {
-    try {
-      const response = await dryRunMutation.mutateAsync({
-        name: `${stackName}-dryrun`,
-        stackFileContent: values.content,
-        edgeGroups: values.edgeGroups,
-        deploymentType: values.deploymentType,
-        dryRun: true,
-      });
+  async function matchRegistry(values: { fileContent?: string; file?: File }) {
+    if (isGit) {
+      return;
+    }
 
-      if (response.Registries.length === 0) {
+    try {
+      if (!isBE) {
+        return;
+      }
+
+      const registries = await dryRunMutation.mutateAsync(values);
+
+      if (registries.length === 0) {
         onChange(undefined);
         return;
       }
 
-      const validRegistry = onlyOne(response.Registries);
+      const validRegistry = onlyOne(registries);
       if (validRegistry) {
-        onChange(response.Registries[0]);
+        onChange(registries[0]);
       } else {
         onChange(undefined);
         onFieldError(