enhancement: ui fixes

Author: mahendraintelops

ui/src/components/diagram-maker/custom/context-node.tsx

@@ -9,79 +9,111 @@ interface ContextNodeProps {
 
 export const ContextNode = (props: ContextNodeProps) => {
     const parsedModifiedState = getParsedModifiedState();
-    const node: CompageNode = parsedModifiedState.nodes[props.id];
+    const currentNode: CompageNode = parsedModifiedState.nodes[props.id];
     const [payload] = React.useState({
-        name: node?.consumerData.name !== undefined ? node.consumerData.name : "",
-        language: node?.consumerData.language !== undefined ? node.consumerData.language : "",
+        name: currentNode?.consumerData.name !== undefined ? currentNode.consumerData.name : "",
+        language: currentNode?.consumerData.language !== undefined ? currentNode.consumerData.language : "",
         // restConfig to be generated
-        restConfig: node?.consumerData.restConfig !== undefined ? node.consumerData.restConfig : getEmptyRestConfig(),
+        restConfig: currentNode?.consumerData.restConfig !== undefined ? currentNode.consumerData.restConfig : getEmptyRestConfig(),
         // grpcConfig to be generated
-        grpcConfig: node?.consumerData.grpcConfig !== undefined ? node.consumerData.grpcConfig : getEmptyGrpcConfig(),
+        grpcConfig: currentNode?.consumerData.grpcConfig !== undefined ? currentNode.consumerData.grpcConfig : getEmptyGrpcConfig(),
         // wsServerType to be generated
-        wsConfig: node?.consumerData.wsConfig !== undefined ? node.consumerData.wsConfig : getEmptyWsConfig(),
+        wsConfig: currentNode?.consumerData.wsConfig !== undefined ? currentNode.consumerData.wsConfig : getEmptyWsConfig(),
     });
 
     if (!props.id) {
         return <React.Fragment/>;
     }
 
     const getName = () => {
-        if (payload.name) {
-            return <><strong>Name</strong> : {payload.name}</>;
+        if (payload?.name) {
+            return <><strong>Name</strong> : {payload?.name}</>;
         }
         return "";
     };
 
 
     const getLanguage = () => {
-        if (payload.language) {
-            return <><strong>Language</strong> : {payload.language}</>;
+        if (payload?.language) {
+            return <><strong>Language</strong> : {payload?.language}</>;
         }
         return "";
     };
 
     const getRestTemplate = () => {
-        if (payload.restConfig?.template) {
-            return <><strong>Template</strong>: {payload.restConfig?.template}</>;
+        if (payload?.restConfig?.template) {
+            return <><strong>Template</strong>: {payload?.restConfig?.template}</>;
         }
         return "";
     };
 
     const getRestFramework = () => {
-        if (payload.restConfig?.framework) {
-            return <><strong>Framework</strong>: {payload.restConfig?.framework}</>;
+        if (payload?.restConfig?.framework) {
+            return <><strong>Framework</strong>: {payload?.restConfig?.framework}</>;
         }
         return "";
     };
 
     const getRestServerPort = () => {
-        if (payload.restConfig?.server?.port) {
-            return <><strong>Port</strong>: {payload.restConfig?.server?.port}</>;
+        if (payload?.restConfig?.server?.port) {
+            return <><strong>Port</strong>: {payload?.restConfig?.server?.port}</>;
         }
         return "";
     };
 
     const getGrpcTemplate = () => {
-        if (payload.grpcConfig?.template) {
+        if (payload?.grpcConfig?.template) {
             return <><strong>Template</strong>: {payload.grpcConfig?.template}</>;
         }
         return "";
     };
 
     const getGrpcFramework = () => {
-        if (payload.grpcConfig?.framework) {
+        if (payload?.grpcConfig?.framework) {
             return <><strong>Framework</strong>: {payload.grpcConfig?.framework}</>;
         }
         return "";
     };
 
     const getGrpcServerPort = () => {
-        if (payload.grpcConfig?.server?.port) {
+        if (payload?.grpcConfig?.server?.port) {
             return <><strong>Port</strong>: {payload.grpcConfig?.server?.port}</>;
         }
         return "";
     };
 
+    const getGrpcDetails = () => {
+        if (payload?.grpcConfig?.server?.port) {
+            return <React.Fragment>
+                <Divider/>
+                <strong style={{color: "green"}}> gRPC Config </strong>
+                <Divider/>
+                {getGrpcTemplate()}
+                <br/>
+                {getGrpcFramework()}
+                <br/>
+                {getGrpcServerPort()}
+            </React.Fragment>;
+        }
+        return <React.Fragment></React.Fragment>;
+    };
+
+    const getRestDetails = () => {
+        if (payload?.restConfig?.server?.port) {
+            return <React.Fragment>
+                <Divider/>
+                <strong style={{color: "magenta"}}> REST Config </strong>
+                <Divider/>
+                {getRestTemplate()}
+                <br/>
+                {getRestFramework()}
+                <br/>
+                {getRestServerPort()}
+            </React.Fragment>;
+        }
+        return <React.Fragment></React.Fragment>;
+    };
+
     return <React.Fragment>
         <div className="contextMenu">
             <strong style={{color: "green"}}> Node </strong>: {props.id}
@@ -90,22 +122,8 @@ export const ContextNode = (props: ContextNodeProps) => {
             <br/>
             {getLanguage()}
             <br/>
-            <Divider/>
-            <strong style={{color: "green"}}> REST Config </strong>
-            <Divider/>
-            {getRestTemplate()}
-            <br/>
-            {getRestFramework()}
-            <br/>
-            {getRestServerPort()}
-            <Divider/>
-            <strong style={{color: "green"}}> gRPC Config </strong>
-            <Divider/>
-            {getGrpcTemplate()}
-            <br/>
-            {getGrpcFramework()}
-            <br/>
-            {getGrpcServerPort()}
+            {getRestDetails()}
+            {getGrpcDetails()}
         </div>
     </React.Fragment>;
 };

ui/src/components/diagram-maker/node-properties/new-node-properties.tsx

@@ -82,7 +82,7 @@ const getNodeTypesConfig = (currentNodeState: CompageNode): NodeTypesConfig => {
     const wsConfig: WsConfig = currentNodeState?.consumerData?.wsConfig;
     const nodeTypesConfig: NodeTypesConfig = {};
     if (restConfig && Object.keys(restConfig).length > 0) {
-        if (restConfig.server && Object.keys(restConfig?.server).length > 0) {
+        if (restConfig.server && Object.keys(restConfig?.server).length > 0 && restConfig?.server?.port) {
             nodeTypesConfig.isRestServer = true;
             nodeTypesConfig.restConfig = {
                 server: restConfig.server
@@ -101,7 +101,7 @@ const getNodeTypesConfig = (currentNodeState: CompageNode): NodeTypesConfig => {
         }
     }
     if (grpcConfig && Object.keys(grpcConfig).length > 0) {
-        if (grpcConfig.server && Object.keys(grpcConfig?.server).length > 0) {
+        if (grpcConfig.server && Object.keys(grpcConfig?.server).length > 0  && grpcConfig?.server?.port) {
             nodeTypesConfig.isGrpcServer = true;
             nodeTypesConfig.grpcConfig = {
                 server: grpcConfig.server
@@ -121,7 +121,7 @@ const getNodeTypesConfig = (currentNodeState: CompageNode): NodeTypesConfig => {
     }
     if (wsConfig && Object.keys(wsConfig).length > 0) {
         nodeTypesConfig.wsConfig = {template: wsConfig.template || getEmptyWsConfig().template};
-        if (wsConfig.server && Object.keys(wsConfig?.server).length > 0) {
+        if (wsConfig.server && Object.keys(wsConfig?.server).length > 0  && wsConfig?.server?.port) {
             nodeTypesConfig.isWsServer = true;
             nodeTypesConfig.wsConfig = {
                 server: wsConfig.server