fix(edge/stacks): fix ui issues [EE-5578] (#9070)

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

@@ -183,23 +183,31 @@ function InnerForm({
           />
           {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"
-                label-Class="col-sm-3 col-lg-2"
+                    labelClass="col-sm-3 col-lg-2"
                     onChange={(value) => setFieldValue('prePullImage', value)}
                   />
+                </div>
+              </div>
 
+              <div className="form-group">
+                <div className="col-sm-12">
                   <SwitchField
                     checked={values.retryDeploy}
                     name="retryDeploy"
                     label="Retry deployment"
                     tooltip="When enabled, this will allow edge agent keep retrying deployment if failure occur"
-                label-Class="col-sm-3 col-lg-2"
+                    labelClass="col-sm-3 col-lg-2"
                     onChange={(value) => setFieldValue('retryDeploy', value)}
                   />
+                </div>
+              </div>
             </>
           )}
         </>

app/react/edge/edge-stacks/components/PrivateRegistryFieldset.tsx

@@ -1,4 +1,5 @@
 import { useState, useEffect } from 'react';
+import { RefreshCw } from 'lucide-react';
 
 import { Registry } from '@/react/portainer/registries/types';
 
@@ -75,17 +76,15 @@ export function PrivateRegistryFieldset({
       {checked && (
         <>
           {method !== 'repository' && (
-            <>
             <TextTip color="blue">
               If you make any changes to the image urls in your yaml, please
               reload or select registry manually
             </TextTip>
-
-              <Button onClick={reload}>Reload</Button>
-            </>
           )}
+
           {!errorMessage ? (
             <FormControl label="Registry" inputId="users-selector">
+              <div className="flex">
                 <Select
                   value={registries.filter(
                     (registry) => registry.Id === selected
@@ -94,7 +93,17 @@ export function PrivateRegistryFieldset({
                   getOptionLabel={(registry) => registry.Name}
                   getOptionValue={(registry) => registry.Id.toString()}
                   onChange={(value) => onSelect(value?.Id)}
+                  className="w-full"
                 />
+                {method !== 'repository' && (
+                  <Button
+                    onClick={reload}
+                    title="Reload"
+                    icon={RefreshCw}
+                    color="light"
+                  />
+                )}
+              </div>
             </FormControl>
           ) : (
             <FormError>{errorMessage}</FormError>

app/react/edge/edge-stacks/queries/useCreateStackFromFileContent.ts

@@ -31,9 +31,13 @@ export async function createStackFromFileContent({
   ...payload
 }: FileContentPayload) {
   try {
-    const { data } = await axios.post<EdgeStack>(buildUrl(), payload, {
+    const { data } = await axios.post<EdgeStack>(
-      params: { method: 'string', dryrun: dryRun ? 'true' : 'false' },
+      buildUrl(undefined, 'create/string'),
-    });
+      payload,
+      {
+        params: { dryrun: dryRun ? 'true' : 'false' },
+      }
+    );
     return data;
   } catch (e) {
     throw parseAxiosError(e as Error);