add ui config

tomatool · nasyaoris · Jul 2, 2020 · Jul 2, 2020 · Jul 8, 2020 · Jul 11, 2020
commit 3b8d6c29630230b944a41d93733e0f12583cd43a
diff --git a/ui/src/App.tsx b/ui/src/App.tsx
@@ -1,12 +1,34 @@
 import React from 'react';
 import './App.css';
-import Config from './Config';
+import Config from './containers/Config';
 import 'antd/dist/antd.css';
+import dictionary from './dictionary';
 
 function App() {
+  let config = {
+      features_path: [
+          "test.feature"
+      ],
+      resources: [
+          {
+            name: "http-cli",
+            type: "httpclient",
+            parameters: {
+                base_url: "http://example.com"
+            }
+          },
+          {
+            name: "shell",
+            type: "shell",
+            parameters: {}
+          }
+      ]
+  }
+
+
   return (
     <div className="App">
-      <Config />
+      <Config dictionary={dictionary} config={config} />
     </div>
   );
 }

diff --git a/ui/src/Config.tsx b/ui/src/Config.tsx
diff --git a/ui/src/containers/Config.tsx b/ui/src/containers/Config.tsx
@@ -0,0 +1,103 @@
+import React, { useState, useEffect } from 'react';
+import { Input, List, Button } from 'antd';
+import ConfigResourceContainer from './ConfigResource'
+import { IDictionary, IResource, IConfig } from '../interfaces'
+import { getResourceParams } from '../dictionary'
+
+interface IProps {
+    dictionary: IDictionary;
+    config: IConfig;
+}
+
+function ConfigContainer({ dictionary, config }:IProps) {
+  const [configState, setConfig] = useState<IConfig>(config);
+
+  let handleFeaturesPathChange = () => {}
+
+  let handleResourceItemChange = (selectedName: string, newItem: IResource) => {
+    const newResourceItem = configState.resources.map((item: IResource) => {
+        if (item.name === selectedName) {
+            return newItem;
+        }
+        return item;
+    }); 
+
+    setConfig({
+        features_path: configState.features_path,
+        resources: newResourceItem
+    });
+  }
+
+  let handleNewResourceItem = () => {
+    const newResourceItem = {
+        name: "new",
+        type: "httpclient",
+        parameters: {}
+    }; 
+
+    getResourceParams(dictionary, "httpclient").forEach((param) => {
+      newResourceItem.parameters[param.name] = ""
+    }) 
+
+    console.log(newResourceItem)
+
+    setConfig({
+        features_path: configState.features_path,
+        resources: [...configState.resources, newResourceItem]
+    });
+  }
+
+//   useEffect(() => 
+
+//   ,[configState])
+
+
+
+  let validateConfig = (config: IConfig) => {
+      // validate & return error
+  }
+
+  const handleSave = () => {
+
+  }  
+
+  return (
+    <div className="App">
+        <label htmlFor="">Features Path</label>
+        <List
+            itemLayout="horizontal"
+            dataSource={configState.features_path}
+            renderItem={item => (
+            <List.Item>
+                <Input placeholder="Features path" value={item}/>
+            </List.Item>
+            )}
+        />
+
+        <label htmlFor="">Resources</label>
+        <List
+            itemLayout="horizontal"
+            dataSource={configState.resources}
+            renderItem={item => (
+            <List.Item>
+                <ConfigResourceContainer 
+                    dictionary={dictionary} 
+                    item={item} 
+                    handleResourceItemChange={handleResourceItemChange} 
+                />          
+            </List.Item>
+            )}
+        />
+        <Button onClick={handleNewResourceItem} type="primary">
+          New Resource
+        </Button>
+        <Button onClick={handleSave} type="primary">
+          Save
+        </Button>
+
+        <div>{JSON.stringify(configState)}</div>
+    </div>
+  );
+}
+
+export default ConfigContainer;
diff --git a/ui/src/containers/ConfigResource.tsx b/ui/src/containers/ConfigResource.tsx
@@ -0,0 +1,65 @@
+import React from 'react';
+import { Input, Select } from 'antd';
+import { IDictionary, IResource } from '../interfaces';
+import { getListOfResources, getResourceParams } from '../dictionary';
+
+const { Option } = Select;
+
+
+interface IProps{
+  dictionary: IDictionary;
+  item: IResource;
+  handleResourceItemChange: any;
+}
+
+function ConfigResourceContainer({ dictionary, item, handleResourceItemChange }:IProps) {
+  let handleNameChange = (e) => {
+    let copy = Object.assign({}, item); 
+    copy.name = e.target.value;
+
+    handleResourceItemChange(item.name, copy);
+  }
+
+  let handleTypeChange = (value) => {
+    let copy = Object.assign({}, item); 
+    copy.type = value;
+
+    handleResourceItemChange(item.name, copy);
+  }
+
+  let handleParameterChange = (e) => {
+    let copy = Object.assign({}, item); 
+
+    copy.parameters[e.target.name] = e.target.value;
+
+    handleResourceItemChange(item.name, copy);
+  }
+
+  return (
+    <div className="Resource">
+        <div>
+          <Input placeholder="Name" value={item.name} onChange={handleNameChange}/>
+          <Select defaultValue={item.type} style={{ width: 120 }} onChange={handleTypeChange}>
+              <Option value="">-- select resource --</Option>
+              {getListOfResources(dictionary).map((resource, index) => {
+                  return (<Option key={index} value={resource}>{resource}</Option>);
+              })}
+          </Select>
+        </div>
+        <div>
+          <label htmlFor="">Parameters</label>
+          {getResourceParams(dictionary, item.type).map((param, index) => {
+            return <Input 
+                       key={index} 
+                       name={param.name} 
+                       placeholder={param.name}
+                       value={item.parameters[param.name]}
+                       onChange={handleParameterChange} 
+                    />
+          })}            
+        </div>
+    </div>
+  );
+}
+
+export default ConfigResourceContainer;
diff --git a/ui/src/dictionary.test.ts b/ui/src/dictionary.test.ts
@@ -0,0 +1,11 @@
+import dictionary, { getResourceParams } from './dictionary';
+
+test('test getResourceParams', () => {
+    const httpcliParams = getResourceParams(dictionary, 'httpclient');
+
+    expect(httpcliParams.length).toBe(3);
+
+    const postgresParams = getResourceParams(dictionary, 'postgres');
+
+    expect(postgresParams.length).toBe(2);
+});
diff --git a/ui/src/dictionary.ts b/ui/src/dictionary.ts
@@ -1,3 +1,27 @@
+import { IDictionary, IParameter } from './interfaces';
+
+export function getListOfResources(dictionary: IDictionary): Array<string> {
+   return dictionary.handlers.map((handler) => {
+        return handler.resources.map((resource) => {
+            return resource;
+        });
+   }).flat();
+}
+
+export function getResourceParams(dictionary: IDictionary, resourceType: string): Array<IParameter> {
+   const handler = dictionary.handlers.find(handler => {
+        const selectedHandler = handler.resources.find((resource) => resource === resourceType);
+
+        if (selectedHandler) return true;
+
+        return false;
+   });
+
+   if (handler === undefined) return [];
+
+   return handler.options;
+}
+
 export default {
    "handlers": [
       {

diff --git a/ui/src/interfaces.ts b/ui/src/interfaces.ts
@@ -0,0 +1,27 @@
+export interface IResource {
+    name: string;
+    type: string;
+    parameters: any;
+}
+
+export interface IConfig {
+    features_path: string[];
+    resources: IResource[];
+}
+
+export interface IDictionary {
+   handlers: Array<IHandler>
+}
+
+export interface IHandler {
+   name: string;
+   description: string;
+   resources: Array<string>;
+   options: Array<IParameter>;
+}
+
+export interface IParameter {
+   name: string;
+   type: string;
+   description: string;
+}