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

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 /**
- * CustomTemplate represents a custom template.
- */
-interface CustomTemplate {
-  /**
-   * CustomTemplate Identifier.
-   * @example 1
-   */
+export type CustomTemplate = {
   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;