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.

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>

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 > * + * {

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>

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: '<',
   },
 });

app/portainer/components/environment-variables-panel/index.js

@@ -11,5 +11,6 @@ angular.module('portainer.app').component('environmentVariablesPanel', {
     ngModel: '<',
     explanation: '@',
     onChange: '<',
+    showHelpMessage: '<',
   },
 });

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

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 -->