From 13d1fc63ff6ceb93c8956142d89350863e19aef1 Mon Sep 17 00:00:00 2001
From: cmeng <cmenginnz@gmail.com>
Date: Thu, 23 Nov 2023 09:17:12 +1300
Subject: [PATCH] fix(stack): sync ee code to ce EE-5960 (#10642)

---
 .../stack-redeploy-git-form.html              |  4 ++
 app/react/docker/stacks/view-models/stack.ts  |  7 ++
 .../RelativePathFieldset.tsx                  | 64 +++++++++++++++++--
 .../RelativePathFieldset/useEnableFsPath.ts   | 18 ++++++
 app/react/portainer/gitops/index.ts           |  1 +
 5 files changed, 87 insertions(+), 7 deletions(-)
 create mode 100644 app/react/portainer/gitops/RelativePathFieldset/useEnableFsPath.ts

diff --git a/app/portainer/components/forms/stack-redeploy-git-form/stack-redeploy-git-form.html b/app/portainer/components/forms/stack-redeploy-git-form/stack-redeploy-git-form.html
index 8f4b137af..5b8124435 100644
--- a/app/portainer/components/forms/stack-redeploy-git-form/stack-redeploy-git-form.html
+++ b/app/portainer/components/forms/stack-redeploy-git-form/stack-redeploy-git-form.html
@@ -61,6 +61,10 @@
     </div>
   </div>
 
+  <div ng-if="$ctrl.state.showConfig">
+    <relative-path-fieldset value="$ctrl.stack" git-model="$ctrl.stack" is-editing="true" hide-edge-configs="true"></relative-path-fieldset>
+  </div>
+
   <environment-variables-panel
     values="$ctrl.formValues.Env"
     explanation="'These values will be used as substitutions in the stack file. To reference the .env file in your compose file, use ‘stack.env’.'"
diff --git a/app/react/docker/stacks/view-models/stack.ts b/app/react/docker/stacks/view-models/stack.ts
index 1e90dd835..63770900d 100644
--- a/app/react/docker/stacks/view-models/stack.ts
+++ b/app/react/docker/stacks/view-models/stack.ts
@@ -59,6 +59,10 @@ export class StackViewModel implements IResource {
 
   PreviousDeploymentInfo: unknown;
 
+  SupportRelativePath: boolean;
+
+  FilesystemPath: string;
+
   constructor(stack: Stack, orphaned = false) {
     this.Id = stack.Id;
     this.Type = stack.Type;
@@ -95,5 +99,8 @@ export class StackViewModel implements IResource {
     this.External = false;
     this.Orphaned = orphaned;
     this.OrphanedRunning = false;
+
+    this.SupportRelativePath = stack.SupportRelativePath;
+    this.FilesystemPath = stack.FilesystemPath;
   }
 }
diff --git a/app/react/portainer/gitops/RelativePathFieldset/RelativePathFieldset.tsx b/app/react/portainer/gitops/RelativePathFieldset/RelativePathFieldset.tsx
index 2787091bf..d457cba16 100644
--- a/app/react/portainer/gitops/RelativePathFieldset/RelativePathFieldset.tsx
+++ b/app/react/portainer/gitops/RelativePathFieldset/RelativePathFieldset.tsx
@@ -4,6 +4,7 @@ import { GitFormModel } from '@/react/portainer/gitops/types';
 import { PathSelector } from '@/react/portainer/gitops/ComposePathField/PathSelector';
 import { dummyGitForm } from '@/react/portainer/gitops/RelativePathFieldset/utils';
 import { useValidation } from '@/react/portainer/gitops/RelativePathFieldset/useValidation';
+import { useEnableFsPath } from '@/react/portainer/gitops/RelativePathFieldset/useEnableFsPath';
 
 import { SwitchField } from '@@/form-components/SwitchField';
 import { TextTip } from '@@/Tip/TextTip';
@@ -17,6 +18,7 @@ interface Props {
   gitModel?: GitFormModel;
   onChange?: (value: Partial<RelativePathModel>) => void;
   isEditing?: boolean;
+  hideEdgeConfigs?: boolean;
 }
 
 export function RelativePathFieldset({
@@ -24,6 +26,7 @@ export function RelativePathFieldset({
   gitModel,
   onChange,
   isEditing,
+  hideEdgeConfigs,
 }: Props) {
   const innerOnChange = useCallback(
     (value: Partial<RelativePathModel>) => onChange && onChange(value),
@@ -32,6 +35,15 @@ export function RelativePathFieldset({
 
   const { errors } = useValidation(value);
 
+  const { enableFsPath0, enableFsPath1, toggleFsPath } = useEnableFsPath();
+
+  const pathTip0 =
+    'For relative path volumes use with Docker Swarm, you must have a network filesystem which all of your nodes can access.';
+  const pathTip1 =
+    'Relative path is active. When you set the ‘local filesystem path’, it will also be utilzed for GitOps Edge configuration.';
+  const pathTip2 =
+    'GitOps Edge configurations is active. When you set the ‘local filesystem path’, it will also be utilized for relative paths.';
+
   return (
     <>
       <div className="form-group">
@@ -43,7 +55,10 @@ export function RelativePathFieldset({
             tooltip="Enabling this means you can specify relative path volumes in your Compose files, with Portainer pulling the content from your git repository to the environment the stack is deployed to."
             disabled={isEditing}
             checked={value.SupportRelativePath}
-            onChange={(value) => innerOnChange({ SupportRelativePath: value })}
+            onChange={(value) => {
+              toggleFsPath(0, value);
+              innerOnChange({ SupportRelativePath: value });
+            }}
           />
         </div>
       </div>
@@ -53,8 +68,7 @@ export function RelativePathFieldset({
           <div className="form-group">
             <div className="col-sm-12">
               <TextTip color="blue">
-                For relative path volumes use with Docker Swarm, you must have a
-                network filesystem which all of your nodes can access.
+                {enableFsPath1 ? pathTip2 : pathTip0}
               </TextTip>
             </div>
           </div>
@@ -68,7 +82,7 @@ export function RelativePathFieldset({
                 <Input
                   name="FilesystemPath"
                   placeholder="/mnt"
-                  disabled={isEditing}
+                  disabled={isEditing || !enableFsPath0}
                   value={value.FilesystemPath}
                   onChange={(e) =>
                     innerOnChange({ FilesystemPath: e.target.value })
@@ -77,7 +91,11 @@ export function RelativePathFieldset({
               </FormControl>
             </div>
           </div>
+        </>
+      )}
 
+      {!hideEdgeConfigs && (
+        <>
           <div className="form-group">
             <div className="col-sm-12">
               <TextTip color="blue">
@@ -96,15 +114,47 @@ export function RelativePathFieldset({
                 tooltip="By enabling the GitOps Edge Configurations feature, you gain the ability to define relative path volumes in your configuration files. Portainer will then automatically fetch the content from your git repository by matching the folder name or file name with the Portainer Edge ID, and apply it to the environment where the stack is deployed"
                 disabled={isEditing}
                 checked={!!value.SupportPerDeviceConfigs}
-                onChange={(value) =>
-                  innerOnChange({ SupportPerDeviceConfigs: value })
-                }
+                onChange={(value) => {
+                  toggleFsPath(1, value);
+                  innerOnChange({ SupportPerDeviceConfigs: value });
+                }}
               />
             </div>
           </div>
 
           {value.SupportPerDeviceConfigs && (
             <>
+              {!isEditing && (
+                <div className="form-group">
+                  <div className="col-sm-12">
+                    <TextTip color="blue">
+                      {enableFsPath0 ? pathTip1 : pathTip0}
+                    </TextTip>
+                  </div>
+                </div>
+              )}
+
+              {!isEditing && (
+                <div className="form-group">
+                  <div className="col-sm-12">
+                    <FormControl
+                      label="Local filesystem path"
+                      errors={errors.FilesystemPath}
+                    >
+                      <Input
+                        name="FilesystemPath"
+                        placeholder="/mnt"
+                        disabled={isEditing || !enableFsPath1}
+                        value={value.FilesystemPath}
+                        onChange={(e) =>
+                          innerOnChange({ FilesystemPath: e.target.value })
+                        }
+                      />
+                    </FormControl>
+                  </div>
+                </div>
+              )}
+
               <div className="form-group">
                 <div className="col-sm-12">
                   <TextTip color="blue">
diff --git a/app/react/portainer/gitops/RelativePathFieldset/useEnableFsPath.ts b/app/react/portainer/gitops/RelativePathFieldset/useEnableFsPath.ts
new file mode 100644
index 000000000..f811cff7f
--- /dev/null
+++ b/app/react/portainer/gitops/RelativePathFieldset/useEnableFsPath.ts
@@ -0,0 +1,18 @@
+import { useState } from 'react';
+
+export function useEnableFsPath() {
+  const [state, setState] = useState<number[]>([]);
+
+  const enableFsPath0 = state.length && state[0] === 0;
+  const enableFsPath1 = state.length && state[0] === 1;
+
+  function toggleFsPath(idx: number, enable: boolean) {
+    if (enable) {
+      setState([...state, idx]);
+    } else {
+      setState(state.filter((e) => e !== idx));
+    }
+  }
+
+  return { enableFsPath0, enableFsPath1, toggleFsPath };
+}
diff --git a/app/react/portainer/gitops/index.ts b/app/react/portainer/gitops/index.ts
index 80042d4a5..4f76bbf97 100644
--- a/app/react/portainer/gitops/index.ts
+++ b/app/react/portainer/gitops/index.ts
@@ -15,6 +15,7 @@ export const ngModule = angular
       'gitModel',
       'onChange',
       'isEditing',
+      'hideEdgeConfigs',
     ])
   );