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 cafd75c9b..61d4887fa 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
@@ -66,6 +66,7 @@
explanation="'These values will be used as substitutions in the stack file. To reference the .env file in your compose file, use ‘stack.env’.'"
on-change="($ctrl.onChangeEnvVar)"
show-help-message="true"
+ is-foldable="true"
>
diff --git a/app/portainer/react/components/index.ts b/app/portainer/react/components/index.ts
index 490d0b486..5e4d42e43 100644
--- a/app/portainer/react/components/index.ts
+++ b/app/portainer/react/components/index.ts
@@ -239,6 +239,6 @@ withFormValidation(
ngModule,
EnvironmentVariablesPanel,
'environmentVariablesPanel',
- ['explanation', 'showHelpMessage'],
+ ['explanation', 'showHelpMessage', 'isFoldable'],
envVarValidation
);
diff --git a/app/portainer/views/stacks/edit/stack.html b/app/portainer/views/stacks/edit/stack.html
index e0ecd6cdd..d278e43d4 100644
--- a/app/portainer/views/stacks/edit/stack.html
+++ b/app/portainer/views/stacks/edit/stack.html
@@ -164,20 +164,6 @@
-
-
+
+
+
+
+
Options
diff --git a/app/react/components/form-components/EnvironmentVariablesFieldset/EnvironmentVariablesPanel.tsx b/app/react/components/form-components/EnvironmentVariablesFieldset/EnvironmentVariablesPanel.tsx
index 3eed62246..05a844e91 100644
--- a/app/react/components/form-components/EnvironmentVariablesFieldset/EnvironmentVariablesPanel.tsx
+++ b/app/react/components/form-components/EnvironmentVariablesFieldset/EnvironmentVariablesPanel.tsx
@@ -12,15 +12,21 @@ export function EnvironmentVariablesPanel({
values,
showHelpMessage,
errors,
+ isFoldable = false,
}: {
explanation?: string;
values: Value;
onChange(value: Value): void;
showHelpMessage?: boolean;
errors?: ArrayError
;
+ isFoldable?: boolean;
}) {
return (
-
+
{!!explanation && (
diff --git a/app/react/components/form-components/FormSection/FormSection.tsx b/app/react/components/form-components/FormSection/FormSection.tsx
index 6bcee02d4..319ecdfa9 100644
--- a/app/react/components/form-components/FormSection/FormSection.tsx
+++ b/app/react/components/form-components/FormSection/FormSection.tsx
@@ -9,6 +9,7 @@ interface Props {
title: ReactNode;
titleSize?: 'sm' | 'md' | 'lg';
isFoldable?: boolean;
+ defaultFolded?: boolean;
}
export function FormSection({
@@ -16,8 +17,9 @@ export function FormSection({
titleSize = 'md',
children,
isFoldable = false,
+ defaultFolded = isFoldable,
}: PropsWithChildren
) {
- const [isExpanded, setIsExpanded] = useState(!isFoldable);
+ const [isExpanded, setIsExpanded] = useState(!defaultFolded);
return (
<>