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 @@ +
+ +
+ ) => 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) => 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 ( <>
@@ -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 }); + }} />
@@ -53,8 +68,7 @@ export function RelativePathFieldset({
- For relative path volumes use with Docker Swarm, you must have a - network filesystem which all of your nodes can access. + {enableFsPath1 ? pathTip2 : pathTip0}
@@ -68,7 +82,7 @@ export function RelativePathFieldset({ innerOnChange({ FilesystemPath: e.target.value }) @@ -77,7 +91,11 @@ export function RelativePathFieldset({ + + )} + {!hideEdgeConfigs && ( + <>
@@ -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 }); + }} />
{value.SupportPerDeviceConfigs && ( <> + {!isEditing && ( +
+
+ + {enableFsPath0 ? pathTip1 : pathTip0} + +
+
+ )} + + {!isEditing && ( +
+
+ + + innerOnChange({ FilesystemPath: e.target.value }) + } + /> + +
+
+ )} +
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([]); + + 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', ]) );