fix(stacks): update info text for stack environment variables [EE-6902] (#11551)

app/portainer/components/forms/stack-redeploy-git-form/stack-redeploy-git-form.html

@@ -65,13 +65,12 @@
     <relative-path-fieldset value="$ctrl.stack" git-model="$ctrl.stack" is-editing="true" hide-edge-configs="true"></relative-path-fieldset>
   </div>
 
-  <environment-variables-panel
+  <stack-environment-variables-panel
     values="$ctrl.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="($ctrl.onChangeEnvVar)"
     show-help-message="true"
     is-foldable="true"
-  ></environment-variables-panel>
+  ></stack-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

@@ -13,6 +13,7 @@ import { withControlledInput } from '@/react-tools/withControlledInput';
 import {
   EnvironmentVariablesFieldset,
   EnvironmentVariablesPanel,
+  StackEnvironmentVariablesPanel,
   envVarValidation,
 } from '@@/form-components/EnvironmentVariablesFieldset';
 import { Icon } from '@@/Icon';
@@ -263,3 +264,13 @@ withFormValidation(
   ['explanation', 'showHelpMessage', 'isFoldable'],
   envVarValidation
 );
+
+withFormValidation(
+  ngModule,
+  withUIRouter(
+    withControlledInput(StackEnvironmentVariablesPanel, { values: 'onChange' })
+  ),
+  'stackEnvironmentVariablesPanel',
+  ['showHelpMessage', 'isFoldable'],
+  envVarValidation
+);

app/portainer/views/stacks/create/createstack.html

@@ -153,12 +153,7 @@
           </div>
 
           <!-- environment-variables -->
-          <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)"
-          >
-          </environment-variables-panel>
+          <stack-environment-variables-panel values="formValues.Env" on-change="(handleEnvVarChange)" show-alert="true"> </stack-environment-variables-panel>
           <!-- !environment-variables -->
           <por-access-control-form form-data="formValues.AccessControlData"></por-access-control-form>
           <!-- actions -->

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

@@ -169,13 +169,12 @@
 
               <!-- environment-variables -->
               <div ng-if="stack">
-                <environment-variables-panel
+                <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>
+                ></stack-environment-variables-panel>
               </div>
               <!-- !environment-variables -->