Merge branch 'main' of https://github.com/terminusdb/terminusdb-dashboard

Author: KittyJose

packages/tdb-dashboard/src/App.css

@@ -1101,8 +1101,8 @@ pre.CodeMirror-line  > span > span.cm-string {
 }
 
 .group {
-  background: transparent;
-  border: 0px solid #DCC896;
+  background: transparent !important;
+  border: 1px solid #dee2e6 !important;
 }
 
 .rule_group{

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

@@ -61,6 +61,7 @@ export const DocumentsGraphqlTable = ({type,onRowClick,showGraphqlTab=true}) =>
     let extractedResults = documentResults ? extractDocuments(documentResults[type]) : []
 
     function cleanIdValue(keyName, keyValue){
+        if(keyValue === "null") return ""
         if(keyName!=="_id") return keyValue
         try{
             const regexp =/(?:\/+.*?\/)(.*$)/g

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

@@ -1,6 +1,10 @@
 import React, {useState, useEffect} from "react"
 import {WOQLClientObj} from '../init-woql-client' 
 import Card from 'react-bootstrap/Card'
+import Form from 'react-bootstrap/Form'
+import {Button} from "react-bootstrap"
+import {ChangeRequest} from "../hooks/ChangeRequest"
+import { useParams } from "react-router-dom"
 import {
     extractID, 
     getDays

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

@@ -6,122 +6,62 @@ import {WOQLClientObj} from "../init-woql-client"
 import Stack from "react-bootstrap/Stack"
 import {status} from "./utils" 
 import {ChangeRequest} from "../hooks/ChangeRequest"
-import Spinner from 'react-bootstrap/Spinner';
-
-const ActionButton = ({variant, title, content, onClick, loading, icon}) => {
-    return <Button
-        className="text-dark btn btn-sm fw-bold d-flex mt-3 float-end" 
-        variant={variant}
-        title={title}
-        onClick={onClick}> 
-            {loading && <Spinner
-                as="span"
-                animation="border"
-                size="sm"
-                role="status"
-                className="mr-1 mt-1"
-                aria-hidden="true"
-            />}
-            <div className="d-flex">
-                {icon}
-                <label>{content}</label>
-            </div>
-    </Button>
-}
-
-/**
- * @returns buttons to reject commit or approve based on user action 
- */
-const Actions = ({checked, message, setKey, setMessage}) => {
-
-    const {
-        woqlClient,
-        currentCRObject,
-        setCurrentCRObject,
-        exitChangeRequestBranch
-    }= WOQLClientObj()
-
-    const {
-        updateChangeRequestStatus,
-        getChangeRequestList,
-		loading
-    } = ChangeRequest(woqlClient)
-
-    const {organization,dataProduct,id} = useParams()
-    const navigate = useNavigate() // to navigate
-
-    /** handle Message */
-    async function handleMessage() {
-        let id=extractID(currentCRObject["@id"])
-        // this call return the changeRequestObj Updated
-        let res=await updateChangeRequestStatus(message, currentCRObject.status, id)
-        // we'll see if add need rebase check every time
-        res.needRebase = currentCRObject.needRebase
-        setCurrentCRObject(res)
-        if(setKey) setKey(CONST.MESSAGES)
-        if(setMessage) setMessage("")
-    }
-
-    /** handle Merge */
-    async function handleMerge () { 
-        let res=await updateChangeRequestStatus(message, CONST.MERGED, id)
-		if(res){
-            setCurrentCRObject(false)
-			exitChangeRequestBranch()
-			navigate(`/${organization}/${dataProduct}`)
-		}
-    }
-
-    /** handle Reject */
-    async function handleReject () {
-        let res=await updateChangeRequestStatus(message, CONST.REJECTED, id)
-        if(res){
-            setCurrentCRObject(false)
-			exitChangeRequestBranch()
-			navigate(`/${organization}/${dataProduct}`)
-		}
-    }
-
-    let chosen = CONST.REVIEW_OPTIONS.filter(arr => arr.title === checked)
-
-    if(checked === CONST.APPROVE) {
-        return <ActionButton variant="success" 
-            loading={loading}
-            title={"Approve Changes"} 
-            content={checked} 
-            icon={chosen[0].icon}
-            onClick={handleMerge}/>
-    }
-    else if (checked === CONST.COMMENT) {
-        return <ActionButton variant="light" 
-            title={"Leave a Comment or message"} 
-            content={checked} 
-            loading={loading}
-            icon={chosen[0].icon}
-            onClick={handleMessage}/>
-    }
-    else if(checked ===CONST.REJECT) {
-        return <ActionButton variant="danger" 
-            title={"Reject Changes"} 
-            content={checked} 
-            loading={loading}
-            icon={chosen[0].icon}
-            onClick={handleReject}/>
-    }
-    return <div/>
-}
-
-/**
- * @returns help texts 
- */
-function getHelpText (checked) {
-    const arr = CONST.REVIEW_OPTIONS.filter(arr => arr.title === checked)
-    if (!arr) return <div/>
-    return <small className="fw-light">{arr[0].helpText}</small>
-}
- 
-function getChecked (checked, id) {
-    return checked === id ? true : false
+import ButtonGroup from 'react-bootstrap/ButtonGroup';
+import ToggleButton from 'react-bootstrap/ToggleButton';
+import {Loading} from "../components/Loading"
+import { MessageBox, MessageComponent } from "./Messages"
+import {AiOutlineCheck, AiOutlineClose} from "react-icons/ai"
+
+const ToggleActions = ({ message }) => {
+    const [action, setAction] = useState(false);
+    const { setCurrentCRObject, exitChangeRequestBranch }= WOQLClientObj()
+    const { updateChangeRequestStatus, loading } = ChangeRequest()
+    const { organization, dataProduct , id} = useParams()
+    const navigate = useNavigate() 
+    
+
+    useEffect(() => {
+        async function doAction() {
+            let status = action === CONST.APPROVE ? CONST.MERGED : CONST.REJECTED
+            let res=await updateChangeRequestStatus(message, status, id) 
+            if(res){
+                setCurrentCRObject(false)
+                exitChangeRequestBranch()
+                navigate(`/${organization}/${dataProduct}`)
+            }
+        }
+        if(action) doAction()
+    }, [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.REJECT, value: CONST.REJECT , className: "rounded-right", variant: "outline-danger", icon: <AiOutlineClose className="mr-1 mb-1 text-danger"/> }
+    ];
+
+    if(loading) return <Loading message={action === CONST.APPROVE ? `Approving Change Request ...` : `Rejecting Change Request ...`}/>
+
+    return <Stack directtion="horizontal" className="float-right">
+        <small className="text-muted fst-italic fw-light mr-2 ms-auto">
+            {`Approve or Reject Change Request`}
+        </small>
+        <ButtonGroup>
+            {reviewButtons.map((button) => (
+            <ToggleButton
+                key={button.name}
+                id={button.name}
+                type="radio"
+                variant={button.variant}
+                name={button.name}
+                value={button.value}
+                className={button.className}
+                checked={action === button.value}
+                onChange={(e) => setAction(e.currentTarget.value)}
+            >
+                {button.icon}{button.name}
+            </ToggleButton>
+            ))}
+        </ButtonGroup>
+    </Stack>
 }
 
 

packages/tdb-dashboard/src/pages/Layout.js

@@ -47,7 +47,7 @@ export const Layout = (props) => {
 
     //defaultSize={340} 
     return <Container fluid className="p-0 flex-row">
-        {showModal && <SubmitChangeRequestModal showModal={showModal} setShowModal={setShowModal} updateParent={updateParent}/>}            
+        {showModal && <SubmitChangeRequestModal updateChangeRequestID={currentChangeRequest} showModal={showModal} setShowModal={setShowModal} updateParent={updateParent}/>}            
         <SplitPane split="vertical" minSize={70} defaultSize={defaultSize} primary="first" allowResize={false}>
             <div className="side-black h-100 d-flex">
                 <IconBar setShowFeedbackForm={setShowFeedbackForm} />

packages/tdb-documents-ui/src/documentTypeFrames/documentTypeFrames.js

@@ -87,6 +87,15 @@ function checkIfCycleExists(property, linked_to_frames, linked_to, docType) {
 		// checks if linked to is same as the parent document class
 		if(linked_to === docType) return true
 	}
+	for(let props in linked_to_frames) {
+		if(typeof linked_to_frames[props] === CONST.OBJECT_TYPE && 
+			linked_to_frames[props].hasOwnProperty("@class")) {
+				// cycle exists with linked_to document class
+				if(linked_to_frames[props]["@class"] === linked_to) return true
+				// cycle exists with docType class
+				if(linked_to_frames[props]["@class"] === docType) return true
+			}
+	}
 	return false 
 }