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
+          <stack-environment-variables-panel values="formValues.Env" on-change="(handleEnvVarChange)" show-alert="true"> </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)"
-          >
-          </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 -->
 

app/react/components/form-components/EnvironmentVariablesFieldset/EnvironmentVariablesPanel.tsx

@@ -1,4 +1,4 @@
-import { ComponentProps } from 'react';
+import React, { ComponentProps } from 'react';
 
 import { FormSection } from '@@/form-components/FormSection';
 import { TextTip } from '@@/Tip/TextTip';
@@ -14,16 +14,19 @@ export function EnvironmentVariablesPanel({
   showHelpMessage,
   errors,
   isFoldable = false,
+  alertMessage,
 }: {
-  explanation?: string;
+  explanation?: React.ReactNode;
   showHelpMessage?: boolean;
   isFoldable?: boolean;
+  alertMessage?: React.ReactNode;
 } & FieldsetProps) {
   return (
     <FormSection
       title="Environment variables"
       isFoldable={isFoldable}
       defaultFolded={isFoldable}
+      className="flex flex-col w-full"
     >
       <div className="form-group">
         {!!explanation && (
@@ -32,6 +35,8 @@ export function EnvironmentVariablesPanel({
           </div>
         )}
 
+        {alertMessage}
+
         <div className="col-sm-12">
           <EnvironmentVariablesFieldset
             values={values}

app/react/components/form-components/EnvironmentVariablesFieldset/StackEnvironmentVariablesPanel.tsx

@@ -0,0 +1,67 @@
+import { ComponentProps } from 'react';
+
+import { Alert } from '@@/Alert';
+import { Link } from '@@/Link';
+
+import { EnvironmentVariablesFieldset } from './EnvironmentVariablesFieldset';
+import { EnvironmentVariablesPanel } from './EnvironmentVariablesPanel';
+
+type FieldsetProps = ComponentProps<typeof EnvironmentVariablesFieldset>;
+
+export function StackEnvironmentVariablesPanel({
+  onChange,
+  values,
+  errors,
+  isFoldable = false,
+  showHelpMessage,
+}: {
+  isFoldable?: boolean;
+  showHelpMessage?: boolean;
+} & FieldsetProps) {
+  return (
+    <EnvironmentVariablesPanel
+      explanation={
+        <div>
+          You may use{' '}
+          <Link
+            to="https://docs.portainer.io/v/2.20/user/docker/stacks/add#environment-variables"
+            target="_blank"
+            data-cy="stack-env-vars-help-link"
+          >
+            environment variables in your compose file
+          </Link>
+          . The environment variable values set below will be used as
+          substitutions in the compose file. Note that you may also reference a
+          stack.env file in your compose file. A stack.env file contains the
+          environment variables and their values (e.g. TAG=v1.5).
+        </div>
+      }
+      onChange={onChange}
+      values={values}
+      errors={errors}
+      isFoldable={isFoldable}
+      showHelpMessage={showHelpMessage}
+      alertMessage={
+        <div className="flex p-4">
+          <Alert color="info" className="col-sm-12">
+            <div>
+              <p>
+                <strong>stack.env file operation</strong>
+              </p>
+              <div>
+                When deploying via <strong>Repository</strong>, the stack.env
+                file must already reside in the Git repo.
+              </div>
+              <div>
+                When deploying via <strong>Web editor</strong>,{' '}
+                <strong>Upload</strong> or{' '}
+                <strong>Custom template deployment</strong>, the stack.env file
+                is auto created from what you set below.
+              </div>
+            </div>
+          </Alert>
+        </div>
+      }
+    />
+  );
+}

app/react/components/form-components/EnvironmentVariablesFieldset/index.ts

@@ -4,5 +4,6 @@ export {
 } from './EnvironmentVariablesFieldset';
 
 export { EnvironmentVariablesPanel } from './EnvironmentVariablesPanel';
+export { StackEnvironmentVariablesPanel } from './StackEnvironmentVariablesPanel';
 
 export { type Values as EnvVarValues } from './types';

app/react/components/form-components/FormSection/FormSection.tsx

@@ -11,6 +11,7 @@ interface Props {
   isFoldable?: boolean;
   defaultFolded?: boolean;
   titleClassName?: string;
+  className?: string;
 }
 
 export function FormSection({
@@ -20,11 +21,12 @@ export function FormSection({
   isFoldable = false,
   defaultFolded = isFoldable,
   titleClassName,
+  className,
 }: PropsWithChildren<Props>) {
   const [isExpanded, setIsExpanded] = useState(!defaultFolded);
 
   return (
-    <>
+    <div className={className}>
       <FormSectionTitle
         htmlFor={isFoldable ? `foldingButton${title}` : ''}
         titleSize={titleSize}
@@ -52,6 +54,6 @@ export function FormSection({
       </FormSectionTitle>
 
       {isExpanded && children}
-    </>
+    </div>
   );
 }