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,9 +164,21 @@
                 </div>
               </div>
 
+              <!-- environment-variables -->
+              <div ng-if="stack">
+                <environment-variables-panel
+                  values="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’.'"
+                  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="col-sm-12 form-section-title">
-                  Webhooks
+                <div class="form-section-title"> Webhooks</div>
                 <por-switch-field
                   name="EnableWebhook"
                   checked="formValues.EnableWebhook"
@@ -176,18 +188,8 @@
                   feature-id="'stack-webhook'"
                 ></por-switch-field>
               </div>
-              </div>
+              <!-- !webhook -->
 
-              <!-- environment-variables -->
-              <div ng-if="stack">
-                <environment-variables-panel
-                  values="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’.'"
-                  on-change="(handleEnvVarChange)"
-                  show-help-message="true"
-                ></environment-variables-panel>
-              </div>
-              <!-- !environment-variables -->
               <!-- 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 (
     <>