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 @@ -
-
- Webhooks - -
-
-
+ + +
+
Webhooks
+ +
+ +
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 ( <>