fix json editor in doc interface

Author: KittyJose

packages/tdb-dashboard/src/App.css

@@ -194,7 +194,8 @@ div.progress-bar-container {
 
 
 
-.navbar-dark .navbar-nav .nav-link:hover, .navbar-dark .navbar-nav .nav-link:focus {
+.navbar-dark .navbar-nav .nav-link:hover, .navbar-dark .navbar-nav .nav-link:focus, 
+.success__color {
     color:  #00bc8c !important;
 }
 
@@ -768,6 +769,18 @@ pre.CodeMirror-line  > span > span.cm-string {
   padding-top: 20px;
 }
 
+/** Setting heigt of code mirror in doc interface */
+.document__interface__main .CodeMirror,
+.tdb__frame__display .CodeMirror {
+  min-height: 400px !important;
+  height: auto !important;
+}
+
+.document__interface__main .CodeMirror-scroll,
+.tdb__frame__display .CodeMirror-scroll {
+  min-height: 400px !important;
+}
+
 
 /*** Pink: de7dd8, Purple: 855afc, Blue: 4c58d2, Yellow: f9d891  ***/
 

packages/tdb-dashboard/src/components/JsonFrameViewer.js

@@ -49,7 +49,7 @@ export const JsonFrameViewer = ({jsonData, mode, setExtracted}) => {
         lineNumbers: true,
         lineWrapping: true,
         //lint: true,
-        matchBrackets: true,
+        matchBrackets: true, 
         autoCloseBrackets: true,
         height: "auto", 
         //viewportMargin: Infinity,
@@ -65,18 +65,27 @@ export const JsonFrameViewer = ({jsonData, mode, setExtracted}) => {
     function handleSubmit(data) {
         if(setExtracted) setExtracted(data)
     }
+
+    const onBlurHandler = (value) =>{
+        //setValue(value)
+        setData(JSON.parse(value))
+    }
 
     // onBlur 
     return <React.Fragment>
         <CodeMirror
             value={JSON.stringify(data, null, 2)}
             options={cmOptions}
-            onChange={(editor, data, value) => {
+            onBlur={(editor, data, value) => {
+                const editorValue =editor.doc.getValue()
+                onBlurHandler(editorValue)
+            }}
+            /*onChange={(editor, data, value) => {
                 console.log("value", value, typeof value)
                 setData(JSON.parse(value))
                 // setting constant to maintain value between form & json view
                 if(mode !== CONST.VIEW_DOCUMENT && setJsonContent) setJsonContent(JSON.parse(value))
-            }}
+            }}*/
         />
         {mode!==CONST.VIEW_DOCUMENT && 
             <Button className="btn mt-2 float-left" variant="info" onClick={(e) => handleSubmit(data)}>

packages/tdb-dashboard/src/components/ReviewComponent.js

@@ -34,7 +34,7 @@ const ToggleActions = ({ message }) => {
     }, [action])
 
     const reviewButtons = [
-        { name: CONST.APPROVE, value: CONST.APPROVE, className: "rounded-left", variant: "outline-success", icon: <AiOutlineCheck className="mr-1 mb-1 text-success"/> },
+        { name: CONST.APPROVE, value: CONST.APPROVE, className: "rounded-left", variant: "outline-success", icon: <AiOutlineCheck className="mr-1 mb-1 success__color"/> },
         { name: CONST.REJECT, value: CONST.REJECT , className: "rounded-right", variant: "outline-danger", icon: <AiOutlineClose className="mr-1 mb-1 text-danger"/> }
     ];
 

packages/tdb-dashboard/src/components/UserMenu.js

@@ -3,7 +3,7 @@ import {Button, Dropdown,Nav} from 'react-bootstrap';
 import {PROFILE,PLANS} from "../routing/constants"
 import {NavLink as RouterNavLink} from "react-router-dom"
 import {AiOutlineUser, AiOutlinePoweroff,AiOutlineUsergroupAdd} from "react-icons/ai"
-import {FaExchangeAlt} from "react-icons/fa"
+import {BsPersonCheck} from "react-icons/bs"
 import {WOQLClientObj} from '../init-woql-client'
 
 export const UserMenu = ({organization}) => {
@@ -81,11 +81,11 @@ export const UserMenu = ({organization}) => {
                 <Dropdown.Menu >
                <Dropdown.Item>
                     <Nav.Link  as={RouterNavLink}
-                        title={"View Profile Page"}  
+                        title={"View Subscription"}  
                         to={`/${PLANS}`} 
 
                         id={"plans"}>
-                            <AiOutlineUser className="mr-3 mb-1" />Subscription
+                            <BsPersonCheck className="mr-3 mb-1" />Subscription
                     </Nav.Link>
                 </Dropdown.Item>
                 {organization && <Dropdown.Item>

packages/tdb-dashboard/src/components/utils.js

@@ -5,6 +5,7 @@ import {format, subSeconds} from "date-fns"
 import {FiCopy} from "react-icons/fi"
 import React, {useState} from "react"
 import {VscGitPullRequestDraft} from "react-icons/vsc"
+import {AiOutlineDeleteRow} from "react-icons/ai"
 import {VscGitPullRequest} from "react-icons/vsc"
 import {VscCheck} from "react-icons/vsc" 
 import {AiOutlineCheck} from "react-icons/ai"
@@ -286,9 +287,9 @@ export const getDays = (timestamp) =>{
 
 export const iconTypes={
 	[OPEN]:<VscGitPullRequestDraft className="text-muted mb-1 mr-1"/>,
-	[SUBMITTED]:<VscGitPullRequest className="text-success mb-1 mr-1"/>,
-	[REJECTED]:<VscGitPullRequest className="text-danger mb-1 mr-1"/>,
-    [MERGED] :<VscCheck className="text-success mb-1 mr-1"/>
+	[SUBMITTED]:<VscGitPullRequest className="text-warning mb-1 mr-1"/>,
+	[REJECTED]:<AiOutlineDeleteRow className="text-danger mb-1 mr-1"/>,
+    [MERGED] :<VscCheck className="success__color mb-1 mr-1"/>
 }