From b265810b95f37a77081c249314f398292988027b Mon Sep 17 00:00:00 2001
From: Prabhat Khera <91852476+prabhat-portainer@users.noreply.github.com>
Date: Tue, 16 Apr 2024 08:03:40 +1200
Subject: [PATCH] fix(stacks): update info text for stack environment variables
 [EE-6902] (#11551)

---
 .../stack-redeploy-git-form.html              |  5 +-
 app/portainer/react/components/index.ts       | 11 +++
 .../views/stacks/create/createstack.html      |  7 +-
 app/portainer/views/stacks/edit/stack.html    |  5 +-
 .../EnvironmentVariablesPanel.tsx             |  9 ++-
 .../StackEnvironmentVariablesPanel.tsx        | 67 +++++++++++++++++++
 .../EnvironmentVariablesFieldset/index.ts     |  1 +
 .../FormSection/FormSection.tsx               |  6 +-
 8 files changed, 95 insertions(+), 16 deletions(-)
 create mode 100644 app/react/components/form-components/EnvironmentVariablesFieldset/StackEnvironmentVariablesPanel.tsx

diff --git a/app/portainer/components/forms/stack-redeploy-git-form/stack-redeploy-git-form.html b/app/portainer/components/forms/stack-redeploy-git-form/stack-redeploy-git-form.html
index 170b7dd05..e4c883c76 100644
--- a/app/portainer/components/forms/stack-redeploy-git-form/stack-redeploy-git-form.html
+++ b/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>
 
diff --git a/app/portainer/react/components/index.ts b/app/portainer/react/components/index.ts
index a16b10b91..f1721d100 100644
--- a/app/portainer/react/components/index.ts
+++ b/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
+);
diff --git a/app/portainer/views/stacks/create/createstack.html b/app/portainer/views/stacks/create/createstack.html
index 9799f349c..c7e9ffd77 100644
--- a/app/portainer/views/stacks/create/createstack.html
+++ b/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 -->
diff --git a/app/portainer/views/stacks/edit/stack.html b/app/portainer/views/stacks/edit/stack.html
index 0ebc3401f..2cdf107d3 100644
--- a/app/portainer/views/stacks/edit/stack.html
+++ b/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 -->
 
diff --git a/app/react/components/form-components/EnvironmentVariablesFieldset/EnvironmentVariablesPanel.tsx b/app/react/components/form-components/EnvironmentVariablesFieldset/EnvironmentVariablesPanel.tsx
index 5f090f33f..74d8ba25b 100644
--- a/app/react/components/form-components/EnvironmentVariablesFieldset/EnvironmentVariablesPanel.tsx
+++ b/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}
diff --git a/app/react/components/form-components/EnvironmentVariablesFieldset/StackEnvironmentVariablesPanel.tsx b/app/react/components/form-components/EnvironmentVariablesFieldset/StackEnvironmentVariablesPanel.tsx
new file mode 100644
index 000000000..39cb8c912
--- /dev/null
+++ b/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>
+      }
+    />
+  );
+}
diff --git a/app/react/components/form-components/EnvironmentVariablesFieldset/index.ts b/app/react/components/form-components/EnvironmentVariablesFieldset/index.ts
index 03d1f4c59..3e2e0e201 100644
--- a/app/react/components/form-components/EnvironmentVariablesFieldset/index.ts
+++ b/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';
diff --git a/app/react/components/form-components/FormSection/FormSection.tsx b/app/react/components/form-components/FormSection/FormSection.tsx
index ec09cdcea..38f7f56f7 100644
--- a/app/react/components/form-components/FormSection/FormSection.tsx
+++ b/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>
   );
 }