refactor(custom-templates): migrate common-fields to react [EE-6207] (#10445)

app/kubernetes/custom-templates/kube-create-custom-template-view/kube-create-custom-template-view.controller.js

@@ -21,7 +21,6 @@ class KubeCreateCustomTemplateViewController {
       formValidationError: '',
       isEditorDirty: false,
       isTemplateValid: true,
-      templateNameRegex: KUBE_TEMPLATE_NAME_VALIDATION_REGEX,
     };
 
     this.formValues = {
@@ -42,12 +41,30 @@ class KubeCreateCustomTemplateViewController {
       ComposeFilePathInRepository: 'manifest.yml',
     };
 
+    this.validationData = {
+      title: {
+        pattern: KUBE_TEMPLATE_NAME_VALIDATION_REGEX,
+        error:
+          "This field must consist of lower-case alphanumeric characters, '.', '_' or '-', must start and end with an alphanumeric character and must be 63 characters or less (e.g. 'my-name', or 'abc-123').",
+      },
+    };
+
     this.onChangeFile = this.onChangeFile.bind(this);
     this.onChangeFileContent = this.onChangeFileContent.bind(this);
     this.onChangeMethod = this.onChangeMethod.bind(this);
     this.onBeforeOnload = this.onBeforeOnload.bind(this);
     this.handleChange = this.handleChange.bind(this);
     this.onVariablesChange = this.onVariablesChange.bind(this);
+    this.onChangePlatform = this.onChangePlatform.bind(this);
+    this.onChangeType = this.onChangeType.bind(this);
+  }
+
+  onChangePlatform(value) {
+    this.handleChange({ Platform: value });
+  }
+
+  onChangeType(value) {
+    this.handleChange({ Type: value });
   }
 
   onChangeMethod(method) {

app/kubernetes/custom-templates/kube-create-custom-template-view/kube-create-custom-template-view.html

@@ -5,11 +5,7 @@
     <rd-widget>
       <rd-widget-body>
         <form class="form-horizontal" name="$ctrl.form">
-          <custom-template-common-fields
+          <custom-templates-common-fields values="$ctrl.formValues" on-change="($ctrl.handleChange)" validation-data="$ctrl.validationData"></custom-templates-common-fields>
-            form-values="$ctrl.formValues"
-            name-regex="$ctrl.state.templateNameRegex"
-            name-regex-error="'This field must consist of lower-case alphanumeric characters, \'.\', \'_\' or \'-\', must start and end with an alphanumeric character and must be 63 characters or less (e.g. \'my-name\', or \'abc-123\').'"
-          ></custom-template-common-fields>
 
           <!-- build-method -->
           <div class="col-sm-12 form-section-title"> Build method </div>

app/kubernetes/custom-templates/kube-edit-custom-template-view/kube-edit-custom-template-view.controller.js

@@ -16,6 +16,10 @@ class KubeEditCustomTemplateViewController {
     this.formValues = {
       Variables: [],
       TLSSkipVerify: false,
+      Title: '',
+      Description: '',
+      Note: '',
+      Logo: '',
     };
     this.state = {
       formValidationError: '',
@@ -25,10 +29,17 @@ class KubeEditCustomTemplateViewController {
       templateLoadFailed: false,
       templatePreviewFailed: false,
       templatePreviewError: '',
-      templateNameRegex: KUBE_TEMPLATE_NAME_VALIDATION_REGEX,
     };
     this.templates = [];
 
+    this.validationData = {
+      title: {
+        pattern: KUBE_TEMPLATE_NAME_VALIDATION_REGEX,
+        error:
+          "This field must consist of lower-case alphanumeric characters, '.', '_' or '-', must start and end with an alphanumeric character and must be 63 characters or less (e.g. 'my-name', or 'abc-123').",
+      },
+    };
+
     this.getTemplate = this.getTemplate.bind(this);
     this.submitAction = this.submitAction.bind(this);
     this.onChangeFileContent = this.onChangeFileContent.bind(this);
@@ -36,6 +47,16 @@ class KubeEditCustomTemplateViewController {
     this.handleChange = this.handleChange.bind(this);
     this.onVariablesChange = this.onVariablesChange.bind(this);
     this.previewFileFromGitRepository = this.previewFileFromGitRepository.bind(this);
+    this.onChangePlatform = this.onChangePlatform.bind(this);
+    this.onChangeType = this.onChangeType.bind(this);
+  }
+
+  onChangePlatform(value) {
+    this.handleChange({ Platform: value });
+  }
+
+  onChangeType(value) {
+    this.handleChange({ Type: value });
   }
 
   getTemplate() {

app/kubernetes/custom-templates/kube-edit-custom-template-view/kube-edit-custom-template-view.html

@@ -5,11 +5,7 @@
     <rd-widget>
       <rd-widget-body>
         <form class="form-horizontal" name="$ctrl.form">
-          <custom-template-common-fields
+          <custom-templates-common-fields values="$ctrl.formValues" on-change="($ctrl.handleChange)" validation-data="$ctrl.validationData"></custom-templates-common-fields>
-            form-values="$ctrl.formValues"
-            name-regex="$ctrl.state.templateNameRegex"
-            name-regex-error="'This field must consist of lower-case alphanumeric characters, \'.\', \'_\' or \'-\', must start and end with an alphanumeric character and must be 63 characters or less (e.g. \'my-name\', or \'abc-123\').'"
-          ></custom-template-common-fields>
 
           <git-form value="$ctrl.formValues" on-change="($ctrl.handleChange)" ng-if="$ctrl.formValues.GitConfig"></git-form>
 

app/portainer/components/custom-template-common-fields/customTemplateCommonFields.html

@@ -1,87 +0,0 @@
-<ng-form name="commonCustomTemplateForm">
-  <!-- title-input -->
-  <div class="form-group mb-0">
-    <label for="template_title" class="col-sm-3 col-lg-2 control-label required text-left"> Title </label>
-    <div class="col-sm-8">
-      <input
-        type="text"
-        class="form-control"
-        ng-model="$ctrl.formValues.Title"
-        ng-pattern="$ctrl.nameRegex"
-        id="template_title"
-        name="template_title"
-        placeholder="e.g. mytemplate"
-        auto-focus
-        required
-      />
-      <span class="help-block">
-        <div ng-show="commonCustomTemplateForm.template_title.$invalid">
-          <div class="small text-warning mt-2">
-            <div ng-messages="commonCustomTemplateForm.template_title.$error">
-              <p class="vertical-center" ng-message="required"> <pr-icon icon="'alert-triangle'" mode="'warning'"></pr-icon> Title is required. </p>
-              <p class="vertical-center" ng-message="pattern">
-                <pr-icon icon="'alert-triangle'" mode="'warning'"></pr-icon>
-                {{ $ctrl.nameRegexError }}
-              </p>
-            </div>
-          </div>
-        </div>
-      </span>
-    </div>
-  </div>
-  <!-- !title-input -->
-
-  <!-- description-input -->
-  <div class="form-group mb-0">
-    <label for="description" class="col-sm-3 col-lg-2 control-label required text-left">Description</label>
-    <div class="col-sm-8">
-      <input type="text" class="form-control" id="description" ng-model="$ctrl.formValues.Description" name="description" required />
-      <span class="help-block">
-        <div class="small text-warning mt-2">
-          <div ng-show="commonCustomTemplateForm.description.$invalid">
-            <div ng-messages="commonCustomTemplateForm.description.$error">
-              <p class="vertical-center" ng-message="required"> <pr-icon icon="'alert-triangle'" mode="'warning'"></pr-icon> Description is required.</p>
-            </div>
-          </div>
-        </div>
-      </span>
-    </div>
-  </div>
-  <!-- !description-input -->
-
-  <!-- note-input -->
-  <div class="form-group">
-    <label for="note" class="col-sm-3 col-lg-2 control-label text-left">Note</label>
-    <div class="col-sm-8">
-      <input type="text" class="form-control" id="note" ng-model="$ctrl.formValues.Note" />
-    </div>
-  </div>
-  <!-- !note-input -->
-
-  <!-- icon-url-input -->
-  <div class="form-group">
-    <label for="icon-url" class="col-sm-3 col-lg-2 control-label text-left">Icon URL</label>
-    <div class="col-sm-8">
-      <input type="text" class="form-control" id="icon-url" ng-model="$ctrl.formValues.Logo" />
-    </div>
-  </div>
-  <!-- !icon-url-input -->
-
-  <!-- platform-input -->
-  <div ng-if="$ctrl.showPlatformField" class="form-group">
-    <label for="platform" class="col-sm-3 col-lg-2 control-label text-left">Platform</label>
-    <div class="col-sm-8">
-      <select class="form-control" ng-model="$ctrl.formValues.Platform" ng-options="+(opt.value) as opt.label for opt in $ctrl.platformTypes"> </select>
-    </div>
-  </div>
-  <!-- !platform-input -->
-
-  <!-- platform-input -->
-  <div ng-if="$ctrl.showTypeField" class="form-group">
-    <label for="platform" class="col-sm-3 col-lg-2 control-label text-left">Type</label>
-    <div class="col-sm-8">
-      <select class="form-control" ng-model="$ctrl.formValues.Type" ng-options="+(opt.value) as opt.label for opt in $ctrl.templateTypes"> </select>
-    </div>
-  </div>
-  <!-- !platform-input -->
-</ng-form>

app/portainer/components/custom-template-common-fields/customTemplateCommonFieldsController.js

@@ -1,16 +0,0 @@
-class CustomTemplateCommonFieldsController {
-  /* @ngInject */
-  constructor() {
-    this.platformTypes = [
-      { label: 'Linux', value: 1 },
-      { label: 'Windows', value: 2 },
-    ];
-
-    this.templateTypes = [
-      { label: 'Swarm', value: 1 },
-      { label: 'Standalone', value: 2 },
-    ];
-  }
-}
-
-export default CustomTemplateCommonFieldsController;

app/portainer/components/custom-template-common-fields/index.js

@@ -1,13 +0,0 @@
-import CustomTemplateCommonFieldsController from './customTemplateCommonFieldsController.js';
-
-angular.module('portainer.app').component('customTemplateCommonFields', {
-  templateUrl: './customTemplateCommonFields.html',
-  controller: CustomTemplateCommonFieldsController,
-  bindings: {
-    formValues: '=',
-    showPlatformField: '<',
-    showTypeField: '<',
-    nameRegex: '<',
-    nameRegexError: '<',
-  },
-});

app/portainer/react/components/custom-templates/index.ts

@@ -8,10 +8,17 @@ import { CustomTemplatesListItem } from '@/react/portainer/templates/custom-temp
 import { withCurrentUser } from '@/react-tools/withCurrentUser';
 import { withUIRouter } from '@/react-tools/withUIRouter';
 import { AppTemplatesListItem } from '@/react/portainer/templates/app-templates/AppTemplatesListItem';
+import {
+  CommonFields,
+  validation as commonFieldsValidation,
+} from '@/react/portainer/custom-templates/components/CommonFields';
+import { PlatformField } from '@/react/portainer/custom-templates/components/PlatformSelector';
+import { TemplateTypeSelector } from '@/react/portainer/custom-templates/components/TemplateTypeSelector';
+import { withFormValidation } from '@/react-tools/withFormValidation';
 
 import { VariablesFieldAngular } from './variables-field';
 
-export const customTemplatesModule = angular
+export const ngModule = angular
   .module('portainer.app.react.components.custom-templates', [])
   .component(
     'customTemplatesVariablesFieldReact',
@@ -48,4 +55,22 @@ export const customTemplatesModule = angular
       'isSelected',
       'onDuplicate',
     ])
-  ).name;
+  )
+  .component(
+    'customTemplatesPlatformSelector',
+    r2a(PlatformField, ['onChange', 'value'])
+  )
+  .component(
+    'customTemplatesTypeSelector',
+    r2a(TemplateTypeSelector, ['onChange', 'value'])
+  );
+
+withFormValidation(
+  ngModule,
+  withControlledInput(CommonFields, { values: 'onChange' }),
+  'customTemplatesCommonFields',
+  [],
+  commonFieldsValidation
+);
+
+export const customTemplatesModule = ngModule.name;

app/portainer/views/custom-templates/create-custom-template-view/createCustomTemplateView.html

@@ -5,13 +5,11 @@
     <rd-widget>
       <rd-widget-body>
         <form class="form-horizontal" name="customTemplateForm">
-          <custom-template-common-fields
+          <custom-templates-common-fields values="$ctrl.formValues" on-change="($ctrl.handleChange)" validation-data="$ctrl.validationData"></custom-templates-common-fields>
-            form-values="$ctrl.formValues"
+
-            show-platform-field="true"
+          <custom-templates-platform-selector value="$ctrl.formValues.Platform" on-change="($ctrl.onChangePlatform)"></custom-templates-platform-selector>
-            show-type-field="true"
+
-            name-regex="$ctrl.state.templateNameRegex"
+          <custom-templates-type-selector value="$ctrl.formValues.Type" on-change="($ctrl.onChangeType)"></custom-templates-type-selector>
-            name-regex-error="'This field must consist of lower-case alphanumeric characters, \'_\' or \'-\' (e.g. \'my-name\', or \'abc-123\').'"
-          ></custom-template-common-fields>
 
           <!-- build-method -->
           <div ng-if="!$ctrl.state.fromStack">

app/portainer/views/custom-templates/create-custom-template-view/createCustomTemplateViewController.js

@@ -54,10 +54,16 @@ class CreateCustomTemplateViewController {
       fromStack: false,
       loading: true,
       isEditorDirty: false,
-      templateNameRegex: TEMPLATE_NAME_VALIDATION_REGEX,
       isTemplateValid: true,
     };
 
+    this.validationData = {
+      title: {
+        pattern: TEMPLATE_NAME_VALIDATION_REGEX,
+        error: "This field must consist of lower-case alphanumeric characters, '_' or '-' (e.g. 'my-name', or 'abc-123').",
+      },
+    };
+
     this.templates = [];
 
     this.createCustomTemplate = this.createCustomTemplate.bind(this);
@@ -71,12 +77,22 @@ class CreateCustomTemplateViewController {
     this.onChangeMethod = this.onChangeMethod.bind(this);
     this.onVariablesChange = this.onVariablesChange.bind(this);
     this.handleChange = this.handleChange.bind(this);
+    this.onChangePlatform = this.onChangePlatform.bind(this);
+    this.onChangeType = this.onChangeType.bind(this);
   }
 
   onVariablesChange(value) {
     this.handleChange({ Variables: value });
   }
 
+  onChangePlatform(value) {
+    this.handleChange({ Platform: value });
+  }
+
+  onChangeType(value) {
+    this.handleChange({ Type: value });
+  }
+
   handleChange(values) {
     return this.$async(async () => {
       this.formValues = {

app/portainer/views/custom-templates/edit-custom-template-view/editCustomTemplateView.html

@@ -5,13 +5,11 @@
     <rd-widget>
       <rd-widget-body>
         <form class="form-horizontal" name="customTemplateForm">
-          <custom-template-common-fields
+          <custom-templates-common-fields values="$ctrl.formValues" on-change="($ctrl.handleChange)" validation-data="$ctrl.validationData"></custom-templates-common-fields>
-            form-values="$ctrl.formValues"
+
-            show-platform-field="true"
+          <custom-templates-platform-selector value="$ctrl.formValues.Platform" on-change="($ctrl.onChangePlatform)"></custom-templates-platform-selector>
-            show-type-field="true"
+
-            name-regex="$ctrl.state.templateNameRegex"
+          <custom-templates-type-selector value="$ctrl.formValues.Type" on-change="($ctrl.onChangeType)"></custom-templates-type-selector>
-            name-regex-error="'This field must consist of lower-case alphanumeric characters, \'_\' or \'-\' (e.g. \'my-name\', or \'abc-123\').'"
-          ></custom-template-common-fields>
 
           <git-form value="$ctrl.formValues" on-change="($ctrl.handleChange)" ng-if="$ctrl.formValues.GitConfig"></git-form>
 

app/portainer/views/custom-templates/edit-custom-template-view/editCustomTemplateViewController.js

@@ -18,7 +18,12 @@ class EditCustomTemplateViewController {
     this.formValues = {
       Variables: [],
       TLSSkipVerify: false,
+      Title: '',
+      Description: '',
+      Note: '',
+      Logo: '',
     };
+
     this.state = {
       formValidationError: '',
       isEditorDirty: false,
@@ -27,8 +32,15 @@ class EditCustomTemplateViewController {
       templateLoadFailed: false,
       templatePreviewFailed: false,
       templatePreviewError: '',
-      templateNameRegex: TEMPLATE_NAME_VALIDATION_REGEX,
     };
+
+    this.validationData = {
+      title: {
+        pattern: TEMPLATE_NAME_VALIDATION_REGEX,
+        error: "This field must consist of lower-case alphanumeric characters, '_' or '-' (e.g. 'my-name', or 'abc-123').",
+      },
+    };
+
     this.templates = [];
 
     this.getTemplate = this.getTemplate.bind(this);
@@ -39,6 +51,16 @@ class EditCustomTemplateViewController {
     this.onVariablesChange = this.onVariablesChange.bind(this);
     this.handleChange = this.handleChange.bind(this);
     this.previewFileFromGitRepository = this.previewFileFromGitRepository.bind(this);
+    this.onChangePlatform = this.onChangePlatform.bind(this);
+    this.onChangeType = this.onChangeType.bind(this);
+  }
+
+  onChangePlatform(value) {
+    this.handleChange({ Platform: value });
+  }
+
+  onChangeType(value) {
+    this.handleChange({ Type: value });
   }
 
   getTemplate() {

app/react/portainer/custom-templates/components/CommonFields.tsx

@@ -0,0 +1,106 @@
+import { SchemaOf, object, string } from 'yup';
+import { FormikErrors } from 'formik';
+
+import { FormControl } from '@@/form-components/FormControl';
+import { Input } from '@@/form-components/Input';
+
+interface Values {
+  Title: string;
+  Description: string;
+  Note: string;
+  Logo: string;
+}
+
+export function CommonFields({
+  values,
+  onChange,
+  errors,
+}: {
+  values: Values;
+  onChange: (values: Values) => void;
+  errors?: FormikErrors<Values>;
+}) {
+  return (
+    <>
+      <FormControl
+        label="Title"
+        required
+        inputId="template-title"
+        errors={errors?.Title}
+      >
+        <Input
+          name="title"
+          placeholder="e.g. mytemplate"
+          id="template-title"
+          required
+          value={values.Title}
+          onChange={(e) => {
+            handleChange({ Title: e.target.value });
+          }}
+        />
+      </FormControl>
+
+      <FormControl
+        label="Description"
+        required
+        inputId="template-description"
+        errors={errors?.Description}
+      >
+        <Input
+          name="description"
+          id="template-description"
+          required
+          value={values.Description}
+          onChange={(e) => {
+            handleChange({ Description: e.target.value });
+          }}
+        />
+      </FormControl>
+
+      <FormControl label="Note" inputId="template-note" errors={errors?.Note}>
+        <Input
+          name="note"
+          id="template-note"
+          value={values.Note}
+          onChange={(e) => {
+            handleChange({ Note: e.target.value });
+          }}
+        />
+      </FormControl>
+
+      <FormControl label="Logo" inputId="template-logo" errors={errors?.Logo}>
+        <Input
+          name="logo"
+          id="template-logo"
+          value={values.Logo}
+          onChange={(e) => {
+            handleChange({ Logo: e.target.value });
+          }}
+        />
+      </FormControl>
+    </>
+  );
+
+  function handleChange(change: Partial<Values>) {
+    onChange({ ...values, ...change });
+  }
+}
+
+export function validation({
+  title,
+}: {
+  title?: { pattern: string; error: string };
+} = {}): SchemaOf<Values> {
+  let titleSchema = string().required('Title is required.');
+  if (title?.pattern) {
+    const pattern = new RegExp(title.pattern);
+    titleSchema = titleSchema.matches(pattern, title.error);
+  }
+
+  return object({
+    Title: titleSchema,
+    Description: string().required('Description is required.'),
+    Note: string().default(''),
+    Logo: string().default(''),
+  });
+}

app/react/portainer/custom-templates/components/CustomTemplatesVariablesDefinitionField/index.ts

@@ -1 +1,2 @@
 export { CustomTemplatesVariablesDefinitionField } from './CustomTemplatesVariablesDefinitionField';
+export type { VariableDefinition } from './CustomTemplatesVariablesDefinitionField';

app/react/portainer/custom-templates/components/PlatformSelector.tsx

@@ -0,0 +1,30 @@
+import { FormControl } from '@@/form-components/FormControl';
+import { Select } from '@@/form-components/Input';
+
+import { Platform } from '../types';
+
+const platformOptions = [
+  { label: 'Linux', value: Platform.LINUX },
+  { label: 'Windows', value: Platform.WINDOWS },
+];
+
+export function PlatformField({
+  onChange,
+  value,
+}: {
+  onChange: (platform: Platform) => void;
+  value: Platform;
+}) {
+  return (
+    <FormControl label="Platform" required inputId="template-platform">
+      <Select
+        name="platform"
+        id="template-platform"
+        required
+        options={platformOptions}
+        value={value}
+        onChange={(e) => onChange(parseInt(e.target.value, 10))}
+      />
+    </FormControl>
+  );
+}

app/react/portainer/custom-templates/components/TemplateTypeSelector.tsx

@@ -0,0 +1,30 @@
+import { StackType } from '@/react/common/stacks/types';
+
+import { FormControl } from '@@/form-components/FormControl';
+import { Select } from '@@/form-components/Input';
+
+const typeOptions = [
+  { label: 'Swarm', value: StackType.DockerSwarm },
+  { label: 'Standalone', value: StackType.DockerCompose },
+];
+
+export function TemplateTypeSelector({
+  onChange,
+  value,
+}: {
+  onChange: (type: StackType) => void;
+  value: StackType;
+}) {
+  return (
+    <FormControl label="Type" required inputId="template-type">
+      <Select
+        name="type"
+        id="template-type"
+        required
+        options={typeOptions}
+        value={value}
+        onChange={(e) => onChange(parseInt(e.target.value, 10))}
+      />
+    </FormControl>
+  );
+}

app/react/portainer/custom-templates/types.ts

@@ -4,19 +4,14 @@ import { StackType } from '@/react/common/stacks/types';
 import { ResourceControlResponse } from '../access-control/types';
 import { RepoConfigResponse } from '../gitops/types';
 
+import { VariableDefinition } from './components/CustomTemplatesVariablesDefinitionField';
+
 export enum Platform {
   LINUX = 1,
   WINDOWS,
 }
 
-export /**
+export type CustomTemplate = {
- * CustomTemplate represents a custom template.
- */
-interface CustomTemplate {
-  /**
-   * CustomTemplate Identifier.
-   * @example 1
-   */
   Id: number;
 
   /**
@@ -82,6 +77,8 @@ interface CustomTemplate {
    */
   ResourceControl?: ResourceControlResponse;
 
+  Variables: VariableDefinition[];
+
   /**
    * GitConfig for the template.
    */
@@ -92,7 +89,7 @@ interface CustomTemplate {
    * @example false
    */
   IsComposeFormat: boolean;
-}
+};
 
 export type CustomTemplateFileContent = {
   FileContent: string;