From de59ea030a1b697dccc7e708f5b2e497e7b8d18d Mon Sep 17 00:00:00 2001
From: fhanportainer <79428273+fhanportainer@users.noreply.github.com>
Date: Sun, 10 Jul 2022 00:01:51 +1200
Subject: [PATCH] feat(stack): added ui label in env var section (#7010)

* feat(stack): added ui label in env var section

* feat(stack): added ui label in env var advanced section

* feat(stack): added showHelpMessage flag

* feat(stack): show help message when stack created from web editor.
---
 .../environment-variables-panel.html                         | 5 +++++
 .../environment-variables-simple-mode.css                    | 2 +-
 .../environment-variables-simple-mode.html                   | 4 ++++
 .../environment-variables-simple-mode/index.js               | 1 +
 .../components/environment-variables-panel/index.js          | 1 +
 .../stack-redeploy-git-form/stack-redeploy-git-form.html     | 1 +
 app/portainer/views/stacks/edit/stack.html                   | 1 +
 7 files changed, 14 insertions(+), 1 deletion(-)

diff --git a/app/portainer/components/environment-variables-panel/environment-variables-panel.html b/app/portainer/components/environment-variables-panel/environment-variables-panel.html
index 4dc97870c..06c0b7438 100644
--- a/app/portainer/components/environment-variables-panel/environment-variables-panel.html
+++ b/app/portainer/components/environment-variables-panel/environment-variables-panel.html
@@ -10,6 +10,7 @@
       ng-model="$ctrl.ngModel"
       on-change="($ctrl.handleSimpleChange)"
       on-switch-mode-click="($ctrl.switchEnvMode)"
+      show-help-message="$ctrl.showHelpMessage"
     ></environment-variables-simple-mode>
 
     <div ng-if="$ctrl.mode == 'advanced'" class="environment-variables-panel--advanced">
@@ -23,6 +24,10 @@
       <div class="form-group" style="margin-left: 1px">
         <code-editor identifier="environment-variables-editor" placeholder="e.g. key=value" value="$ctrl.editorText" yml="false" on-change="($ctrl.editorUpdate)"></code-editor>
       </div>
+      <div class="col-sm-12 small text-muted" ng-if="$ctrl.showHelpMessage">
+        <i class="fa fa-info-circle blue-icon space-right" aria-hidden="true"></i>
+        Environment changes will not take effect until redeployment occurs manually or via webhook.
+      </div>
     </div>
   </div>
 </ng-form>
diff --git a/app/portainer/components/environment-variables-panel/environment-variables-simple-mode/environment-variables-simple-mode.css b/app/portainer/components/environment-variables-panel/environment-variables-simple-mode/environment-variables-simple-mode.css
index 155c9684a..1cb932846 100644
--- a/app/portainer/components/environment-variables-panel/environment-variables-simple-mode/environment-variables-simple-mode.css
+++ b/app/portainer/components/environment-variables-panel/environment-variables-simple-mode/environment-variables-simple-mode.css
@@ -10,7 +10,7 @@
 }
 
 .env-items-list {
-  margin-top: 10px;
+  margin: 10px 0;
 }
 
 .env-items-list > * + * {
diff --git a/app/portainer/components/environment-variables-panel/environment-variables-simple-mode/environment-variables-simple-mode.html b/app/portainer/components/environment-variables-panel/environment-variables-simple-mode/environment-variables-simple-mode.html
index 66a6f0fe4..68156f806 100644
--- a/app/portainer/components/environment-variables-panel/environment-variables-simple-mode/environment-variables-simple-mode.html
+++ b/app/portainer/components/environment-variables-panel/environment-variables-simple-mode/environment-variables-simple-mode.html
@@ -33,4 +33,8 @@
       on-remove="($ctrl.remove)"
     ></environment-variables-simple-mode-item>
   </div>
+  <div class="col-sm-12 small text-muted" ng-if="$ctrl.ngModel.length > 0 && $ctrl.showHelpMessage">
+    <i class="fa fa-info-circle blue-icon space-right" aria-hidden="true"></i>
+    Environment changes will not take effect until redeployment occurs manually or via webhook.
+  </div>
 </div>
diff --git a/app/portainer/components/environment-variables-panel/environment-variables-simple-mode/index.js b/app/portainer/components/environment-variables-panel/environment-variables-simple-mode/index.js
index d51f2c11d..f21bfd967 100644
--- a/app/portainer/components/environment-variables-panel/environment-variables-simple-mode/index.js
+++ b/app/portainer/components/environment-variables-panel/environment-variables-simple-mode/index.js
@@ -11,5 +11,6 @@ angular.module('portainer.app').component('environmentVariablesSimpleMode', {
     ngModel: '<',
     onSwitchModeClick: '<',
     onChange: '<',
+    showHelpMessage: '<',
   },
 });
diff --git a/app/portainer/components/environment-variables-panel/index.js b/app/portainer/components/environment-variables-panel/index.js
index 9da15a489..64240ada4 100644
--- a/app/portainer/components/environment-variables-panel/index.js
+++ b/app/portainer/components/environment-variables-panel/index.js
@@ -11,5 +11,6 @@ angular.module('portainer.app').component('environmentVariablesPanel', {
     ngModel: '<',
     explanation: '@',
     onChange: '<',
+    showHelpMessage: '<',
   },
 });
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 273964a58..32cbfb54d 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
@@ -35,6 +35,7 @@
     ng-model="$ctrl.formValues.Env"
     explanation="These values will be used as substitutions in the stack file"
     on-change="($ctrl.onChangeEnvVar)"
+    show-help-message="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>
   <button
diff --git a/app/portainer/views/stacks/edit/stack.html b/app/portainer/views/stacks/edit/stack.html
index bd68213cf..2c7a4e318 100644
--- a/app/portainer/views/stacks/edit/stack.html
+++ b/app/portainer/views/stacks/edit/stack.html
@@ -180,6 +180,7 @@
                   ng-model="formValues.Env"
                   explanation="These values will be used as substitutions in the stack file"
                   on-change="(handleEnvVarChange)"
+                  show-help-message="true"
                 ></environment-variables-panel>
               </div>
               <!-- !environment-variables -->