feat(docker/stacks): fold env vars by default [EE-5575] (#9957)

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"
   ></environment-variables-panel>
 
   <option-panel ng-if="$ctrl.stack.Type === 1 && $ctrl.endpoint.apiVersion >= 1.27" ng-model="$ctrl.formValues.Option" on-change="($ctrl.onChangeOption)"></option-panel>

app/portainer/react/components/index.ts

@@ -239,6 +239,6 @@ withFormValidation(
   ngModule,
   EnvironmentVariablesPanel,
   'environmentVariablesPanel',
-  ['explanation', 'showHelpMessage'],
+  ['explanation', 'showHelpMessage', 'isFoldable'],
   envVarValidation
 );

app/portainer/views/stacks/edit/stack.html

@@ -164,20 +164,6 @@
                 </div>
               </div>
 
-              <div ng-if="isAdmin && applicationState.endpoint.type !== 4">
-                <div class="col-sm-12 form-section-title">
-                  Webhooks
-                  <por-switch-field
-                    name="EnableWebhook"
-                    checked="formValues.EnableWebhook"
-                    label-class="'col-sm-2'"
-                    tooltip="'Create a webhook (or callback URI) to automate the update of this stack. Sending a POST request to this callback URI (without requiring any authentication) will pull the most up-to-date version of the associated image and re-deploy this stack.'"
-                    label="'Create a Stack webhook'"
-                    feature-id="'stack-webhook'"
-                  ></por-switch-field>
-                </div>
-              </div>
-
               <!-- environment-variables -->
               <div ng-if="stack">
                 <environment-variables-panel
@@ -185,9 +171,25 @@
                   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="(handleEnvVarChange)"
                   show-help-message="true"
+                  is-foldable="true"
                 ></environment-variables-panel>
               </div>
               <!-- !environment-variables -->
+
+              <!-- webhook -->
+              <div ng-if="isAdmin && applicationState.endpoint.type !== 4">
+                <div class="form-section-title"> Webhooks</div>
+                <por-switch-field
+                  name="EnableWebhook"
+                  checked="formValues.EnableWebhook"
+                  label-class="'col-sm-2'"
+                  tooltip="'Create a webhook (or callback URI) to automate the update of this stack. Sending a POST request to this callback URI (without requiring any authentication) will pull the most up-to-date version of the associated image and re-deploy this stack.'"
+                  label="'Create a Stack webhook'"
+                  feature-id="'stack-webhook'"
+                ></por-switch-field>
+              </div>
+              <!-- !webhook -->
+
               <!-- options -->
               <div ng-if="stack.Type === 1 && applicationState.endpoint.apiVersion >= 1.27" authorization="PortainerStackUpdate">
                 <div class="col-sm-12 form-section-title"> Options </div>

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<Value>;
+  isFoldable?: boolean;
 }) {
   return (
-    <FormSection title="Environment variables">
+    <FormSection
+      title="Environment variables"
+      isFoldable={isFoldable}
+      defaultFolded={isFoldable}
+    >
       <div className="form-group">
         {!!explanation && (
           <div className="col-sm-12 environment-variables-panel--explanation">

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<Props>) {
-  const [isExpanded, setIsExpanded] = useState(!isFoldable);
+  const [isExpanded, setIsExpanded] = useState(!defaultFolded);
 
   return (
     <>