diff --git a/src/action/action.ts b/src/action/action.ts new file mode 100644 index 0000000..27c4aec --- /dev/null +++ b/src/action/action.ts @@ -0,0 +1,21 @@ +import _, { useContext } from "react"; + +export const getUser = (state, dispatch) => { + fetch("/api/user", { + credentials: "include", + }) + .then((response) => { + if (response.ok) { + return response.text(); + } + }) + .then((body) => { + if (body === "") { + dispatch({ type: "setAuthentication", value: false }); + } else { + dispatch({ type: "setAuthentication", value: true }); + dispatch({ type: "setUserInfo", value: JSON.parse(body!) }); + } + }) + .catch((err) => console.error("Caught error: ", err)); +}; diff --git a/src/components/Dashboard.tsx b/src/components/Dashboard.tsx index eb5bcdc..728565c 100644 --- a/src/components/Dashboard.tsx +++ b/src/components/Dashboard.tsx @@ -1,6 +1,7 @@ import React, { useEffect, useContext } from "react"; import { withCookies } from "react-cookie"; import { store } from "../store/store"; +import { getUser } from "../action/action"; import MenuAppBar from "./layout/Header"; @@ -10,23 +11,9 @@ const Dashboard = (props) => { const userInfo = state.userInfo; useEffect(() => { - fetch("/api/user", { - credentials: "include", - }) - .then((response) => { - if (response.ok) { - return response.text(); - } - }) - .then((body) => { - if (body === "") { - dispatch({ type: "setAuthentication", value: false }); - } else { - dispatch({ type: "setAuthentication", value: true }); - dispatch({ type: "setUserInfo", value: JSON.parse(body!) }); - } - }) - .catch((err) => console.error("Caught error: ", err)); + if (Object.keys(userInfo).length == 0) { + getUser(state, dispatch); + } }, []); return (
diff --git a/src/components/admin/editform/AddLayout.tsx b/src/components/admin/editform/AddLayout.tsx index 7a332e1..d58d259 100644 --- a/src/components/admin/editform/AddLayout.tsx +++ b/src/components/admin/editform/AddLayout.tsx @@ -1,354 +1,491 @@ -import * as React from 'react'; -import {Button, Card, Grid, IconButton, Select, Tab} from "@material-ui/core"; -import {Field, FieldArray, Form, Formik, FormikProps, insert} from "formik"; -import {Checkbox, Switch, TextField} from "formik-material-ui"; -import DeleteIcon from '@material-ui/icons/Delete'; -import './../admin.css'; +import React, { useEffect, useContext } from "react"; +import { Button, Card, Grid, IconButton, Select, Tab } from "@material-ui/core"; +import { Field, FieldArray, Form, Formik, FormikProps, insert } from "formik"; +import { Checkbox, Switch, TextField } from "formik-material-ui"; +import DeleteIcon from "@material-ui/icons/Delete"; +import "./../admin.css"; import ShowDemo from "./ShowDemo"; -import './../../components.css'; +import "./../../components.css"; import FormControlLabel from "@material-ui/core/FormControlLabel"; -import DropDownOptions from './DropDownOptions'; +import DropDownOptions from "./DropDownOptions"; import Typography from "@material-ui/core/Typography"; import Tabs from "@material-ui/core/Tabs"; -import {initialValues} from "../../constant/editForm"; +import { initialValues } from "../../constant/editForm"; import MenuAppBar from "../../layout/Header"; +import { store } from "../../../store/store"; +import { getUser } from "../../../action/action"; + const handleSubmit = (values: any, {}) => { - // @ts-ignore - schema.properties[values.name] = { - "type": "string", - "minLength ": 1 - }; -} + // @ts-ignore + schema.properties[values.name] = { + type: "string", + "minLength ": 1, + }; +}; -const getFieldAttribute = (index: number, remove: (index: number) => (T | undefined), confirm: any, handleAddItem: any) => { - return ( - -
- - remove(index)} - style={{margin: "auto", float: "right"}}> - - - - - - - - - - - - - - - - +const getFieldAttribute = ( + index: number, + remove: (index: number) => T | undefined, + confirm: any, + handleAddItem: any +) => { + return ( + +
+ + remove(index)} + style={{ margin: "auto", float: "right" }} + > + + + + + + + + + + + + + + + + + } + style={{ margin: "auto", float: "right" }} + label="Select Field" + placeholder={"Dropdown"} + /> + + + +
+ + ); +}; - } - style={{margin: "auto", float: "right"}} - label="Select Field" - placeholder={"Dropdown"} - /> - - - -
- - ); -} +const getNestedField = ( + index: number, + remove: (index: number) => T | undefined, + confirm: any, + index12: string +) => { + console.log("................." + index12); + return ( + +
+ + remove(index)} + style={{ margin: "auto", float: "right" }} + > + + -const getNestedField = (index: number, remove: (index: number) => (T | undefined), confirm: any, index12: string) => { - console.log("................." + index12); - return ( - -
+ + + + - - - remove(index)} - style={{margin: "auto", float: "right"}}> - - - - - - - - - - - - - - - - - - - - - } - style={{margin: "auto", float: "left"}} - label="Select Field" - placeholder={"Dropdown"} - /> - - -
- - ); -} + + + + + + + + + + + + } + style={{ margin: "auto", float: "left" }} + label="Select Field" + placeholder={"Dropdown"} + /> + +
+ + ); +}; // @ts-ignore const AddLayout = () => { - const [control, setControl] = React.useState(false); - const [ind, setInd] = React.useState(0); - const [tabIdx, setTabIdx] = React.useState(0); - const [displayDataAsString, setDisplayDataAsString] = React.useState(''); - const [standaloneData, setStandaloneData] = React.useState({}) - const [schema, setSchema] = React.useState({jsonSchema:{},uiSchema:{}}); - const handleTabChange = React.useCallback( - (event: any, newValue: number) => { - setTabIdx(newValue); - // setDisplayDataAsString( - // newValue === 0 - // ? getDataAsStringFromStore(store) - // : JSON.stringify(standaloneData, null, 2) - // ); - }, - [standaloneData] - ); + const [control, setControl] = React.useState(false); + const [ind, setInd] = React.useState(0); + const [tabIdx, setTabIdx] = React.useState(0); + const [displayDataAsString, setDisplayDataAsString] = React.useState(""); + const [standaloneData, setStandaloneData] = React.useState({}); + const [schema, setSchema] = React.useState({ jsonSchema: {}, uiSchema: {} }); + const handleTabChange = React.useCallback( + (event: any, newValue: number) => { + setTabIdx(newValue); + // setDisplayDataAsString( + // newValue === 0 + // ? getDataAsStringFromStore(store) + // : JSON.stringify(standaloneData, null, 2) + // ); + }, + [standaloneData] + ); + const { state, dispatch } = useContext(store); + const isAuthenticated = state.isAuthenticated; + const userInfo = state.userInfo; - return ( -
- - - - - Rendered Form - - - - - - Add Form Layout - - - - - - - {(props: FormikProps) => ( -
- { + if (Object.keys(userInfo).length == 0) { + getUser(state, dispatch); + } + }, []); + + return ( +
+ + + + + Rendered Form + + + + + + Add Form Layout + + + + + + + {(props: FormikProps) => ( + + +
+
+ + ( +
+ {props.values.uiSchema.elements.length > 0 && + props.values.uiSchema.elements.map( + (element: any, index: number) => { + console.log( + "I am from field" + JSON.stringify(element), + index + ); + + const confirm = () => { + if (props.values.names.length > 0) { + props.values.jsonSchema.properties[ + props.values.names[ind - 1] + ] = { + type: "string", + minLength: 2, + }; + } + console.log( + JSON.stringify(props.values.jsonSchema) + ); + }; + const handleAddItem = (item: any) => { + if ( + props.values.names.length > 0 && + props.values.jsonSchema.properties[ + props.values.names[ind - 1] + ].enum === undefined + ) { + props.values.jsonSchema.properties[ + props.values.names[ind - 1] + ]["enum"] = []; + } + props.values.jsonSchema.properties[ + props.values.names[ind - 1] + ].enum.push(item); + console.log( + JSON.stringify(props.values.jsonSchema) + ); + }; + return ( + element.type === "Control" && + getFieldAttribute( + index, + remove, + confirm, + handleAddItem + ) + ); + } + )} + +
+
+
+ ( + +
+ -
-
- - ( -
- {props.values.uiSchema.elements.length > 0 && - props.values.uiSchema.elements.map((element: any, index: number) => { - console.log("I am from field" + JSON.stringify(element), index); - - const confirm = () => { - if (props.values.names.length > 0) { - props.values.jsonSchema.properties[props.values.names[ind - 1]] = { - type: "string", - minLength: 2 - } - } - console.log(JSON.stringify(props.values.jsonSchema)); - } - const handleAddItem = (item: any) => { - if (props.values.names.length > 0 && props.values.jsonSchema.properties[props.values.names[ind - 1]].enum === undefined) { - props.values.jsonSchema.properties[props.values.names[ind - 1]]["enum"] = []; - } - props.values.jsonSchema.properties[props.values.names[ind - 1]].enum.push(item); - console.log(JSON.stringify(props.values.jsonSchema)); - } - return element.type === "Control" && getFieldAttribute(index, remove, confirm, handleAddItem); - } - )} - -
-
-
- ( - -
- - - {props.values.uiSchema.elements.length > 0 && - props.values.uiSchema.elements[ind - 1].type === "Group" && - props.values.uiSchema.elements[ind - 1].elements.length > 0 && - props.values.uiSchema.elements[ind - 1].elements.map((element: any, index1: number) => { - console.log("it is" + JSON.stringify(element), index1, ind); - const confirm = () => { - console.log("I called", JSON.stringify(props.values.names)); - if (props.values.names.length > 0 && props.values.names[ind - 1].length > 0) { - console.log("again"); - if (props.values.jsonSchema.properties[props.values.uiSchema.elements[ind - 1].objectName] == undefined) { - props.values.jsonSchema.properties[props.values.uiSchema.elements[ind - 1].objectName] = { - type: "object", - properties: {} - } - } - props.values.jsonSchema.properties[props.values.uiSchema.elements[ind - 1].objectName].properties[props.values.names[ind - 1][index1]] = { - type: "string", - minLength: 2 - } - } - console.log("jsonSChema is" + JSON.stringify(props.values.jsonSchema)); - } - return getNestedField(index1, remove, confirm, String(ind - 1)); - } - )} - -
- - ) - }/> - -
- - - -
- - - )}/> - - + type={String} + label="Group Name" + component={TextField} + /> + {props.values.uiSchema.elements.length > 0 && + props.values.uiSchema.elements[ind - 1] + .type === "Group" && + props.values.uiSchema.elements[ind - 1] + .elements.length > 0 && + props.values.uiSchema.elements[ + ind - 1 + ].elements.map( + (element: any, index1: number) => { + console.log( + "it is" + JSON.stringify(element), + index1, + ind + ); + const confirm = () => { + console.log( + "I called", + JSON.stringify(props.values.names) + ); + if ( + props.values.names.length > 0 && + props.values.names[ind - 1].length > + 0 + ) { + console.log("again"); + if ( + props.values.jsonSchema + .properties[ + props.values.uiSchema.elements[ + ind - 1 + ].objectName + ] == undefined + ) { + props.values.jsonSchema.properties[ + props.values.uiSchema.elements[ + ind - 1 + ].objectName + ] = { + type: "object", + properties: {}, + }; + } + props.values.jsonSchema.properties[ + props.values.uiSchema.elements[ + ind - 1 + ].objectName + ].properties[ + props.values.names[ind - 1][ + index1 + ] + ] = { + type: "string", + minLength: 2, + }; + } + console.log( + "jsonSChema is" + + JSON.stringify( + props.values.jsonSchema + ) + ); + }; + return getNestedField( + index1, + remove, + confirm, + String(ind - 1) + ); + } + )} + +
+ + )} + /> +
+ +
- - ); + //console.log("?????" + JSON.stringify(schema)); + }} + > + Add Group + +
+ )} + /> + + + + )} +
+ + +
+ ); }; -export default AddLayout; \ No newline at end of file +export default AddLayout; diff --git a/src/components/manifest/Form.tsx b/src/components/manifest/Form.tsx index 7ec08c1..72e8fe4 100644 --- a/src/components/manifest/Form.tsx +++ b/src/components/manifest/Form.tsx @@ -8,7 +8,8 @@ import "./../components.css"; import Button from "@material-ui/core/Button"; import { store } from "../../store/store"; import { withCookies } from "react-cookie"; -import SchemaForm from './SchemaForm'; +import SchemaForm from "./SchemaForm"; +import { getUser } from "../../action/action"; const styles = createStyles({ container: { @@ -32,15 +33,19 @@ const styles = createStyles({ }); const Form = (props: any) => { - const [standaloneData, setStandaloneData] = useState({}) + const { state, dispatch } = useContext(store); + const isAuthenticated = state.isAuthenticated; + const userInfo = state.userInfo; + + const [standaloneData, setStandaloneData] = useState({}); // const [addedNew, setAddedNew] = useState({ success: true, data: "" }) - const [formInitData, setFormInitData] = useState({}) - const { cookies } = props - const manifestIdParam = props?.match?.params?.manifestId - const [csrfToken,] = useState(cookies.get("XSRF-TOKEN")) + const [formInitData, setFormInitData] = useState({}); + const { cookies } = props; + const manifestIdParam = props?.match?.params?.manifestId; + const [csrfToken] = useState(cookies.get("XSRF-TOKEN")); const getManifestData = async (manifestId: number): Promise => { - console.log(`Fetching manifest id ${manifestId}`) + console.log(`Fetching manifest id ${manifestId}`); return fetch(`/api/manifest/${manifestId}`, { method: "GET", credentials: "include", @@ -48,20 +53,25 @@ const Form = (props: any) => { "X-XSRF-TOKEN": props.csrfToken, Accept: "application/json", "Content-Type": "application/json", - } - }) - .then(res => res.json()) + }, + }).then((res) => res.json()); }; - useEffect(() => { - if(manifestIdParam) { - getManifestData(manifestIdParam).then(res => { setFormInitData(res) }) + useEffect(() => { + if (manifestIdParam) { + getManifestData(manifestIdParam).then((res) => { + setFormInitData(res); + }); + if (Object.keys(userInfo).length == 0) { + getUser(state, dispatch); + } // eslint-disable-next-line react-hooks/exhaustive-deps - }}, []) + } + }, []); const formatDisplayData = (standaloneData) => { return JSON.stringify(standaloneData, null, 2); - } + }; const handleSubmit = async (values: any): Promise => { console.log(values); @@ -74,25 +84,30 @@ const Form = (props: any) => { "Content-Type": "application/json", }, body: JSON.stringify(values), - }) - .then(res => res.json()) + }).then((res) => res.json()); }; return (
- + - - -
- + +
+ + manifestData={formInitData} + > @@ -104,8 +119,8 @@ const Form = (props: any) => { variant="contained" style={{ float: "right" }} onClick={() => { - handleSubmit(standaloneData).then(r => { - setFormInitData(r.manifest) + handleSubmit(standaloneData).then((r) => { + setFormInitData(r.manifest); }); }} > diff --git a/src/components/manifest/ShowDeploymentManifest.tsx b/src/components/manifest/ShowDeploymentManifest.tsx index 1595102..cd7776b 100644 --- a/src/components/manifest/ShowDeploymentManifest.tsx +++ b/src/components/manifest/ShowDeploymentManifest.tsx @@ -1,7 +1,9 @@ -import React, { useContext } from "react"; +import React, { useContext, useEffect } from "react"; import "./../components.css"; import { Button, Card, Select } from "@material-ui/core"; + import { store } from "../../store/store"; +import { getUser } from "../../action/action"; import CloudDownloadIcon from "@material-ui/icons/CloudDownload"; import Grid from "@material-ui/core/Grid"; @@ -26,6 +28,7 @@ export const PrettyPrintJson = (props: any) => { exportToJsonFile(props.manifestData); props.onClose(); }; + return (
@@ -36,25 +39,32 @@ export const PrettyPrintJson = (props: any) => { className="float-right" startIcon={} color="secondary" - variant="contained" > Download - + variant="contained" + > + {" "} + Download{" "} + + ) : ( - <> + <> + {" "} +

+ Manifest File +

+ - - )} + Close{" "} + + + )} 
             
{JSON.stringify(props.manifestData, null, 2)}

@@ -65,38 +75,47 @@ export const PrettyPrintJson = (props: any) => {
   );
 };
 
-function fetchListOfManifestsByEnvironment(environment: string): Promise {
-    return fetch(`/api/manifest/list/${environment}`, {
-      method: "GET",
-      credentials: "include",
+function fetchListOfManifestsByEnvironment(
+  environment: string
+): Promise {
+  return fetch(`/api/manifest/list/${environment}`, {
+    method: "GET",
+    credentials: "include",
+  })
+    .then((res) => res.json())
+    .then((response) => {
+      console.log(response);
+      return response;
     })
-      .then((res) => res.json())
-      .then((response) => {
-        console.log(response)
-        return response
-      })
-      .catch((error) => {
-        console.log(error)
-        return []
-      })
+    .catch((error) => {
+      console.log(error);
+      return [];
+    });
 }
 
 interface ManifestName {
-  [id: string]: string,
+  [id: string]: string;
 }
 
 const ShowDeploymentManifest = (props: any) => {
   const { useState } = React;
   const [manifestData, setManifestData] = useState({});
-  const [serviceName, setServiceName] = useState({name: "", id: ""});
+  const [serviceName, setServiceName] = useState({ name: "", id: "" });
   const [environment, setEnvironment] = useState("");
   const [isLoading, setIsLoading] = useState(false);
   const [manifestNameList, setManifestNameList] = useState({});
-  const { state } = useContext(store);
 
+  const { state, dispatch } = useContext(store);
   const isAuthenticated = state.isAuthenticated;
+  const userInfo = state.userInfo;
+
+  useEffect(() => {
+    if (Object.keys(userInfo).length == 0) {
+      getUser(state, dispatch);
+    }
+  }, []);
+
   const handleClick = () => {
-    console.log("inside handle click", isAuthenticated);
     if (isAuthenticated) {
       fetch(`/api/manifest/${serviceName.id}`, {
         method: "GET",
@@ -114,19 +133,24 @@ const ShowDeploymentManifest = (props: any) => {
 
   function handleEnvChange(e: any) {
     setEnvironment(e.target.value);
-    fetchListOfManifestsByEnvironment(e.target.value).then(manifestList => {
+    fetchListOfManifestsByEnvironment(e.target.value).then((manifestList) => {
       const manifestMap = manifestList.reduce((map, obj) => {
-        map[obj.id] = obj.name
-        return map
-      }, {})
-      setManifestNameList(manifestMap)
-      if (manifestList.length > 0) { setServiceName(manifestList[0]) }
-    })
+        map[obj.id] = obj.name;
+        return map;
+      }, {});
+      setManifestNameList(manifestMap);
+      if (manifestList.length > 0) {
+        setServiceName(manifestList[0]);
+      }
+    });
   }
 
   function handleNameChange(e: any) {
-    setServiceName({id: e.target.value, name: manifestNameList[e.target.value]})
-    console.log(serviceName)
+    setServiceName({
+      id: e.target.value,
+      name: manifestNameList[e.target.value],
+    });
+    console.log(serviceName);
   }
 
   return (
@@ -148,7 +172,11 @@ const ShowDeploymentManifest = (props: any) => {
                 value={serviceName.id}
                 onChange={handleNameChange}
               >
-                { Object.entries(manifestNameList).map(([k, v]) => {v})}
+                {Object.entries(manifestNameList).map(([k, v]) => (
+                  
+                    {v}
+                  
+                ))}
               
             
           
@@ -183,16 +211,16 @@ const ShowDeploymentManifest = (props: any) => {
             onClose={() => setIsLoading(false)}
           />
         ) : (
-            <>
-              
-            
+          <>
+            
+          
         )}