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

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>
   );
 }