feat(custom-templates): hide variables [EE-2602] (#7068)

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;

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

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;

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"

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

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

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

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

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;

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

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

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"

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;