Creating dynamic form using ConnectorProperty (#60)

* Upgrade Formik * minor fix * adding formik in nohoist * Updating as per reviews
debezium · Sep 9, 2020 · aae9c23 · aae9c23
1 parent 06817d0
commit aae9c23
Show file tree

Hide file tree

Showing 10 changed files with 262 additions and 504 deletions.
diff --git a/ui/package.json b/ui/package.json
@@ -12,7 +12,8 @@
       "**/@patternfly/react-core/**",
       "**/patternfly",
       "**/react-router",
-      "**/react-router-dom"
+      "**/react-router-dom",
+      "**/formik"
     ]
   },
   "scripts": {

diff --git a/ui/packages/ui/package.json b/ui/packages/ui/package.json
@@ -68,7 +68,7 @@
     "@types/react-router-dom": "^5.1.5",
     "@types/yup": "^0.29.6",
     "autoprefixer": "^9.8.6",
-    "formik": "^1.5.7",
+    "formik": "^2.1.5",
     "lodash": "^4.17.20",
     "postcss-loader": "^3.0.0",
     "postcss-nested": "^4.2.3",

diff --git a/ui/packages/ui/src/app/pages/createConnector/CreateConnectorPage.tsx b/ui/packages/ui/src/app/pages/createConnector/CreateConnectorPage.tsx
@@ -1,9 +1,7 @@
 import {
   ConnectionValidationResult,
-  ConnectorConfiguration,
-  ConnectorType,
+  ConnectorConfiguration, ConnectorProperty, ConnectorType
 } from "@debezium/ui-models";
-import { ConnectorProperty } from "@debezium/ui-models";
 import { Services } from "@debezium/ui-services";
 import {
   Breadcrumb,
@@ -15,7 +13,7 @@ import {
   TextContent,
   Title,
   TitleSizes,
-  Wizard,
+  Wizard
 } from "@patternfly/react-core";
 import React from "react";
 import { useHistory } from "react-router-dom";
@@ -27,13 +25,13 @@ import {
   getFilterPropertyDefinitions,
   getOptionsPropertyDefinitions,
   mapToObject,
-  PropertyCategory,
+  PropertyCategory
 } from "src/app/shared";
 import {
   ConfigureConnectorTypeComponent,
   ConnectorTypeStepComponent,
   DataOptionsComponent,
-  FiltersStepComponent,
+  FiltersStepComponent
 } from "./connectorSteps";
 import "./CreateConnectorPage.css";
 
@@ -167,7 +165,7 @@ export const CreateConnectorPage: React.FunctionComponent = () => {
       category === PropertyCategory.ADVANCED_REPLICATION
     ) {
       connectorService
-        .validateConnection("postgres", mapToObject(propertyValues))
+        .validateConnection("postgres", propertyValues)
         .then((result: ConnectionValidationResult) => {
           if (result.status === "INVALID") {
             let resultStr = "";

diff --git a/...kages/ui/src/app/pages/createConnector/connectorSteps/ConfigureConnectorTypeComponent.tsx b/...kages/ui/src/app/pages/createConnector/connectorSteps/ConfigureConnectorTypeComponent.tsx
@@ -1,5 +1,5 @@
 import { ConnectorProperty } from "@debezium/ui-models";
-import { Button } from '@patternfly/react-core';
+import _ from 'lodash'
 import * as React from 'react';
 import { PropertyCategory } from 'src/app/shared';
 import './ConfigureConnectorTypeComponent.css'
@@ -14,20 +14,13 @@ export interface IConfigureConnectorTypeComponentProps{
 }
 
 export const ConfigureConnectorTypeComponent: React.FC<IConfigureConnectorTypeComponentProps> = (props) => {
-
-  const handleValidation =() => {
-    // TODO: This is just an example.  The form will supply the property values
-    const basicValueMap = new Map<string,string>();
-    basicValueMap.set("database.name", "aName");
-    basicValueMap.set("database.user", "aUser");
-
-    props.onValidateProperties(basicValueMap, PropertyCategory.BASIC);
-  }
-
   return (
-    <>
-      <Button onClick={handleValidation}>Validate</Button>
-      <ConfigureConnectorTypeForm />
-    </>
+    <ConfigureConnectorTypeForm 
+      basicPropertyDefinitions={props.basicPropertyDefinitions}
+      basicPropertyValues={props.basicPropertyValues}
+      advancedPropertyDefinitions={props.advancedPropertyDefinitions}
+      advancedPropertyValues={props.advancedPropertyValues}
+      onValidateProperties={props.onValidateProperties}
+    />
   );
 }