From 97a880e6c1cb1ec3245497abeb655b7738f84338 Mon Sep 17 00:00:00 2001
From: Chaim Lev-Ari <chiptus@users.noreply.github.com>
Date: Thu, 16 Jun 2022 08:32:41 +0300
Subject: [PATCH] feat(custom-templates): hide variables [EE-2602] (#7068)

---
 .../kube-create-custom-template-view.controller.js         | 6 ++++++
 .../kube-create-custom-template-view.html                  | 1 +
 .../kube-edit-custom-template-view.controller.js           | 7 +++++++
 .../kube-edit-custom-template-view.html                    | 1 +
 app/kubernetes/views/deploy/deploy.html                    | 2 +-
 app/kubernetes/views/deploy/deployController.js            | 7 +++++++
 app/portainer/feature-flags/feature-flags.service.ts       | 1 +
 .../createCustomTemplateView.html                          | 1 +
 .../createCustomTemplateViewController.js                  | 7 +++++++
 .../custom-templates-view/customTemplatesView.html         | 1 +
 .../custom-templates-view/customTemplatesViewController.js | 7 +++++++
 .../edit-custom-template-view/editCustomTemplateView.html  | 1 +
 .../editCustomTemplateViewController.js                    | 7 +++++++
 13 files changed, 48 insertions(+), 1 deletion(-)

diff --git a/app/kubernetes/custom-templates/kube-create-custom-template-view/kube-create-custom-template-view.controller.js b/app/kubernetes/custom-templates/kube-create-custom-template-view/kube-create-custom-template-view.controller.js
index a12cc34c5..4e48a2152 100644
--- a/app/kubernetes/custom-templates/kube-create-custom-template-view/kube-create-custom-template-view.controller.js
+++ b/app/kubernetes/custom-templates/kube-create-custom-template-view/kube-create-custom-template-view.controller.js
@@ -1,6 +1,7 @@
 import { buildOption } from '@/portainer/components/BoxSelector';
 import { AccessControlFormData } from '@/portainer/components/accessControlForm/porAccessControlFormModel';
 import { getTemplateVariables, intersectVariables } from '@/react/portainer/custom-templates/components/utils';
+import { isBE } from '@/portainer/feature-flags/feature-flags.service';
 
 class KubeCreateCustomTemplateViewController {
   /* @ngInject */
@@ -13,6 +14,7 @@ class KubeCreateCustomTemplateViewController {
     ];
 
     this.templates = null;
+    this.isTemplateVariablesEnabled = isBE;
 
     this.state = {
       method: 'editor',
@@ -53,6 +55,10 @@ class KubeCreateCustomTemplateViewController {
   }
 
   parseTemplate(templateStr) {
+    if (!this.isTemplateVariablesEnabled) {
+      return;
+    }
+
     const variables = getTemplateVariables(templateStr);
 
     const isValid = !!variables;
diff --git a/app/kubernetes/custom-templates/kube-create-custom-template-view/kube-create-custom-template-view.html b/app/kubernetes/custom-templates/kube-create-custom-template-view/kube-create-custom-template-view.html
index da8e5d9dc..1707480c6 100644
--- a/app/kubernetes/custom-templates/kube-create-custom-template-view/kube-create-custom-template-view.html
+++ b/app/kubernetes/custom-templates/kube-create-custom-template-view/kube-create-custom-template-view.html
@@ -37,6 +37,7 @@
           </file-upload-form>
 
           <custom-templates-variables-definition-field
+            ng-if="$ctrl.isTemplateVariablesEnabled"
             value="$ctrl.formValues.Variables"
             on-change="($ctrl.onVariablesChange)"
             is-variables-names-from-parent="$ctrl.state.method === 'editor'"
diff --git a/app/kubernetes/custom-templates/kube-edit-custom-template-view/kube-edit-custom-template-view.controller.js b/app/kubernetes/custom-templates/kube-edit-custom-template-view/kube-edit-custom-template-view.controller.js
index 470b8287c..7f7dfeca1 100644
--- a/app/kubernetes/custom-templates/kube-edit-custom-template-view/kube-edit-custom-template-view.controller.js
+++ b/app/kubernetes/custom-templates/kube-edit-custom-template-view/kube-edit-custom-template-view.controller.js
@@ -1,5 +1,6 @@
 import { ResourceControlViewModel } from '@/portainer/access-control/models/ResourceControlViewModel';
 import { AccessControlFormData } from '@/portainer/components/accessControlForm/porAccessControlFormModel';
+import { isBE } from '@/portainer/feature-flags/feature-flags.service';
 import { getTemplateVariables, intersectVariables } from '@/react/portainer/custom-templates/components/utils';
 
 class KubeEditCustomTemplateViewController {
@@ -7,6 +8,8 @@ class KubeEditCustomTemplateViewController {
   constructor($async, $state, ModalService, Authentication, CustomTemplateService, FormValidator, Notifications, ResourceControlService) {
     Object.assign(this, { $async, $state, ModalService, Authentication, CustomTemplateService, FormValidator, Notifications, ResourceControlService });
 
+    this.isTemplateVariablesEnabled = isBE;
+
     this.formValues = null;
     this.state = {
       formValidationError: '',
@@ -60,6 +63,10 @@ class KubeEditCustomTemplateViewController {
   }
 
   parseTemplate(templateStr) {
+    if (!this.isTemplateVariablesEnabled) {
+      return;
+    }
+
     const variables = getTemplateVariables(templateStr);
 
     const isValid = !!variables;
diff --git a/app/kubernetes/custom-templates/kube-edit-custom-template-view/kube-edit-custom-template-view.html b/app/kubernetes/custom-templates/kube-edit-custom-template-view/kube-edit-custom-template-view.html
index d7fc54a55..ffb279b51 100644
--- a/app/kubernetes/custom-templates/kube-edit-custom-template-view/kube-edit-custom-template-view.html
+++ b/app/kubernetes/custom-templates/kube-edit-custom-template-view/kube-edit-custom-template-view.html
@@ -32,6 +32,7 @@
           </web-editor-form>
 
           <custom-templates-variables-definition-field
+            ng-if="$ctrl.isTemplateVariablesEnabled"
             value="$ctrl.formValues.Variables"
             on-change="($ctrl.onVariablesChange)"
             is-variables-names-from-parent="true"
diff --git a/app/kubernetes/views/deploy/deploy.html b/app/kubernetes/views/deploy/deploy.html
index c6acbd33d..e3f7bec03 100644
--- a/app/kubernetes/views/deploy/deploy.html
+++ b/app/kubernetes/views/deploy/deploy.html
@@ -93,7 +93,7 @@
                   ></custom-template-selector>
 
                   <custom-templates-variables-field
-                    ng-if="ctrl.state.template"
+                    ng-if="$ctrl.isTemplateVariablesEnabled && ctrl.state.template"
                     definitions="ctrl.state.template.Variables"
                     value="ctrl.formValues.Variables"
                     on-change="(ctrl.onChangeTemplateVariables)"
diff --git a/app/kubernetes/views/deploy/deployController.js b/app/kubernetes/views/deploy/deployController.js
index 9f7cb086a..2cb07002d 100644
--- a/app/kubernetes/views/deploy/deployController.js
+++ b/app/kubernetes/views/deploy/deployController.js
@@ -7,6 +7,7 @@ import PortainerError from '@/portainer/error';
 import { KubernetesDeployManifestTypes, KubernetesDeployBuildMethods, KubernetesDeployRequestMethods, RepositoryMechanismTypes } from 'Kubernetes/models/deploy';
 import { buildOption } from '@/portainer/components/BoxSelector';
 import { renderTemplate } from '@/react/portainer/custom-templates/components/utils';
+import { isBE } from '@/portainer/feature-flags/feature-flags.service';
 
 class KubernetesDeployController {
   /* @ngInject */
@@ -23,6 +24,8 @@ class KubernetesDeployController {
     this.CustomTemplateService = CustomTemplateService;
     this.DeployMethod = 'manifest';
 
+    this.isTemplateVariablesEnabled = isBE;
+
     this.deployOptions = [
       buildOption('method_kubernetes', 'fa fa-cubes', 'Kubernetes', 'Kubernetes manifest format', KubernetesDeployManifestTypes.KUBERNETES),
       buildOption('method_compose', 'fab fa-docker', 'Compose', 'docker-compose format', KubernetesDeployManifestTypes.COMPOSE),
@@ -83,6 +86,10 @@ class KubernetesDeployController {
   }
 
   renderTemplate() {
+    if (!this.isTemplateVariablesEnabled) {
+      return;
+    }
+
     const rendered = renderTemplate(this.state.templateContent, this.formValues.Variables, this.state.template.Variables);
     this.onChangeFormValues({ EditorContent: rendered });
   }
diff --git a/app/portainer/feature-flags/feature-flags.service.ts b/app/portainer/feature-flags/feature-flags.service.ts
index 95264ce48..b5429153d 100644
--- a/app/portainer/feature-flags/feature-flags.service.ts
+++ b/app/portainer/feature-flags/feature-flags.service.ts
@@ -1,5 +1,6 @@
 import { Edition, FeatureId, FeatureState } from './enums';
 
+export const isBE = process.env.PORTAINER_EDITION === 'BE';
 interface ServiceState {
   currentEdition: Edition;
   features: Record<FeatureId, Edition>;
diff --git a/app/portainer/views/custom-templates/create-custom-template-view/createCustomTemplateView.html b/app/portainer/views/custom-templates/create-custom-template-view/createCustomTemplateView.html
index bea6cdbcb..02ba30466 100644
--- a/app/portainer/views/custom-templates/create-custom-template-view/createCustomTemplateView.html
+++ b/app/portainer/views/custom-templates/create-custom-template-view/createCustomTemplateView.html
@@ -108,6 +108,7 @@
           </div>
 
           <custom-templates-variables-definition-field
+            ng-if="$ctrl.isTemplateVariablesEnabled"
             value="$ctrl.formValues.Variables"
             on-change="($ctrl.onVariablesChange)"
             is-variables-names-from-parent="$ctrl.state.Method === 'editor'"
diff --git a/app/portainer/views/custom-templates/create-custom-template-view/createCustomTemplateViewController.js b/app/portainer/views/custom-templates/create-custom-template-view/createCustomTemplateViewController.js
index ce05716fb..e0971784a 100644
--- a/app/portainer/views/custom-templates/create-custom-template-view/createCustomTemplateViewController.js
+++ b/app/portainer/views/custom-templates/create-custom-template-view/createCustomTemplateViewController.js
@@ -2,6 +2,7 @@ import _ from 'lodash';
 import { AccessControlFormData } from 'Portainer/components/accessControlForm/porAccessControlFormModel';
 import { TEMPLATE_NAME_VALIDATION_REGEX } from '@/constants';
 import { getTemplateVariables, intersectVariables } from '@/react/portainer/custom-templates/components/utils';
+import { isBE } from '@/portainer/feature-flags/feature-flags.service';
 
 class CreateCustomTemplateViewController {
   /* @ngInject */
@@ -20,6 +21,8 @@ class CreateCustomTemplateViewController {
       StateManager,
     });
 
+    this.isTemplateVariablesEnabled = isBE;
+
     this.formValues = {
       Title: '',
       FileContent: '',
@@ -176,6 +179,10 @@ class CreateCustomTemplateViewController {
   }
 
   parseTemplate(templateStr) {
+    if (!this.isTemplateVariablesEnabled) {
+      return;
+    }
+
     const variables = getTemplateVariables(templateStr);
 
     const isValid = !!variables;
diff --git a/app/portainer/views/custom-templates/custom-templates-view/customTemplatesView.html b/app/portainer/views/custom-templates/custom-templates-view/customTemplatesView.html
index 7fdd124ec..a88257502 100644
--- a/app/portainer/views/custom-templates/custom-templates-view/customTemplatesView.html
+++ b/app/portainer/views/custom-templates/custom-templates-view/customTemplatesView.html
@@ -18,6 +18,7 @@
   >
     <advanced-form>
       <custom-templates-variables-field
+        ng-if="$ctrl.isTemplateVariablesEnabled"
         definitions="$ctrl.state.selectedTemplate.Variables"
         value="$ctrl.formValues.variables"
         on-change="($ctrl.onChangeTemplateVariables)"
diff --git a/app/portainer/views/custom-templates/custom-templates-view/customTemplatesViewController.js b/app/portainer/views/custom-templates/custom-templates-view/customTemplatesViewController.js
index a81d03a64..48ee28352 100644
--- a/app/portainer/views/custom-templates/custom-templates-view/customTemplatesViewController.js
+++ b/app/portainer/views/custom-templates/custom-templates-view/customTemplatesViewController.js
@@ -2,6 +2,7 @@ import _ from 'lodash-es';
 import { AccessControlFormData } from 'Portainer/components/accessControlForm/porAccessControlFormModel';
 import { TEMPLATE_NAME_VALIDATION_REGEX } from '@/constants';
 import { renderTemplate } from '@/react/portainer/custom-templates/components/utils';
+import { isBE } from '@/portainer/feature-flags/feature-flags.service';
 
 class CustomTemplatesViewController {
   /* @ngInject */
@@ -34,6 +35,8 @@ class CustomTemplatesViewController {
     this.StateManager = StateManager;
     this.StackService = StackService;
 
+    this.isTemplateVariablesEnabled = isBE;
+
     this.DOCKER_STANDALONE = 'DOCKER_STANDALONE';
     this.DOCKER_SWARM_MODE = 'DOCKER_SWARM_MODE';
 
@@ -119,6 +122,10 @@ class CustomTemplatesViewController {
   }
 
   renderTemplate() {
+    if (!this.isTemplateVariablesEnabled) {
+      return;
+    }
+
     const fileContent = renderTemplate(this.state.templateContent, this.formValues.variables, this.state.selectedTemplate.Variables);
     this.onChangeFormValues({ fileContent });
   }
diff --git a/app/portainer/views/custom-templates/edit-custom-template-view/editCustomTemplateView.html b/app/portainer/views/custom-templates/edit-custom-template-view/editCustomTemplateView.html
index a051abcf5..1d9ad372f 100644
--- a/app/portainer/views/custom-templates/edit-custom-template-view/editCustomTemplateView.html
+++ b/app/portainer/views/custom-templates/edit-custom-template-view/editCustomTemplateView.html
@@ -46,6 +46,7 @@
           </div>
 
           <custom-templates-variables-definition-field
+            ng-if="$ctrl.isTemplateVariablesEnabled"
             value="$ctrl.formValues.Variables"
             on-change="($ctrl.onVariablesChange)"
             is-variables-names-from-parent="true"
diff --git a/app/portainer/views/custom-templates/edit-custom-template-view/editCustomTemplateViewController.js b/app/portainer/views/custom-templates/edit-custom-template-view/editCustomTemplateViewController.js
index 478372753..829afe54a 100644
--- a/app/portainer/views/custom-templates/edit-custom-template-view/editCustomTemplateViewController.js
+++ b/app/portainer/views/custom-templates/edit-custom-template-view/editCustomTemplateViewController.js
@@ -3,12 +3,15 @@ import { ResourceControlViewModel } from '@/portainer/access-control/models/Reso
 
 import { AccessControlFormData } from 'Portainer/components/accessControlForm/porAccessControlFormModel';
 import { getTemplateVariables, intersectVariables } from '@/react/portainer/custom-templates/components/utils';
+import { isBE } from '@/portainer/feature-flags/feature-flags.service';
 
 class EditCustomTemplateViewController {
   /* @ngInject */
   constructor($async, $state, $window, ModalService, Authentication, CustomTemplateService, FormValidator, Notifications, ResourceControlService) {
     Object.assign(this, { $async, $state, $window, ModalService, Authentication, CustomTemplateService, FormValidator, Notifications, ResourceControlService });
 
+    this.isTemplateVariablesEnabled = isBE;
+
     this.formValues = null;
     this.state = {
       formValidationError: '',
@@ -127,6 +130,10 @@ class EditCustomTemplateViewController {
   }
 
   parseTemplate(templateStr) {
+    if (!this.isTemplateVariablesEnabled) {
+      return;
+    }
+
     const variables = getTemplateVariables(templateStr);
 
     const isValid = !!variables;