From 2cd5d55b00930d68b84fd959cc1b327a8c4d2675 Mon Sep 17 00:00:00 2001
From: Chaim Lev-Ari <chiptus@users.noreply.github.com>
Date: Thu, 22 Jun 2023 21:08:04 +0700
Subject: [PATCH] fix(edge/stacks): fix ui issues [EE-5578] (#9070)

---
 .../EditEdgeStackForm/EditEdgeStackForm.tsx   | 40 ++++++++++--------
 .../components/PrivateRegistryFieldset.tsx    | 41 +++++++++++--------
 .../queries/useCreateStackFromFileContent.ts  | 10 +++--
 3 files changed, 56 insertions(+), 35 deletions(-)

diff --git a/app/react/edge/edge-stacks/ItemView/EditEdgeStackForm/EditEdgeStackForm.tsx b/app/react/edge/edge-stacks/ItemView/EditEdgeStackForm/EditEdgeStackForm.tsx
index 24d277547..0bae932ac 100644
--- a/app/react/edge/edge-stacks/ItemView/EditEdgeStackForm/EditEdgeStackForm.tsx
+++ b/app/react/edge/edge-stacks/ItemView/EditEdgeStackForm/EditEdgeStackForm.tsx
@@ -183,23 +183,31 @@ function InnerForm({
           />
           {values.deploymentType === DeploymentType.Compose && (
             <>
-              <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"
-                onChange={(value) => setFieldValue('prePullImage', value)}
-              />
+              <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>
 
-              <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"
-                onChange={(value) => setFieldValue('retryDeploy', value)}
-              />
+              <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"
+                    labelClass="col-sm-3 col-lg-2"
+                    onChange={(value) => setFieldValue('retryDeploy', value)}
+                  />
+                </div>
+              </div>
             </>
           )}
         </>
diff --git a/app/react/edge/edge-stacks/components/PrivateRegistryFieldset.tsx b/app/react/edge/edge-stacks/components/PrivateRegistryFieldset.tsx
index 6a50d3e19..0eb3ea908 100644
--- a/app/react/edge/edge-stacks/components/PrivateRegistryFieldset.tsx
+++ b/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,26 +76,34 @@ 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>
-            </>
+            <TextTip color="blue">
+              If you make any changes to the image urls in your yaml, please
+              reload or select registry manually
+            </TextTip>
           )}
+
           {!errorMessage ? (
             <FormControl label="Registry" inputId="users-selector">
-              <Select
-                value={registries.filter(
-                  (registry) => registry.Id === selected
+              <div className="flex">
+                <Select
+                  value={registries.filter(
+                    (registry) => registry.Id === selected
+                  )}
+                  options={registries}
+                  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"
+                  />
                 )}
-                options={registries}
-                getOptionLabel={(registry) => registry.Name}
-                getOptionValue={(registry) => registry.Id.toString()}
-                onChange={(value) => onSelect(value?.Id)}
-              />
+              </div>
             </FormControl>
           ) : (
             <FormError>{errorMessage}</FormError>
diff --git a/app/react/edge/edge-stacks/queries/useCreateStackFromFileContent.ts b/app/react/edge/edge-stacks/queries/useCreateStackFromFileContent.ts
index 52281339c..adcff0432 100644
--- a/app/react/edge/edge-stacks/queries/useCreateStackFromFileContent.ts
+++ b/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, {
-      params: { method: 'string', dryrun: dryRun ? 'true' : 'false' },
-    });
+    const { data } = await axios.post<EdgeStack>(
+      buildUrl(undefined, 'create/string'),
+      payload,
+      {
+        params: { dryrun: dryRun ? 'true' : 'false' },
+      }
+    );
     return data;
   } catch (e) {
     throw parseAxiosError(e as Error);