fix issue #173 #170 #169 #168

Author: Francesca-Bit

packages/tdb-dashboard/src/App.css

@@ -1281,4 +1281,41 @@ button.graphiql-tab-add>svg
 
 .alert_expand_icons {
   margin-top: -20px;
+}
+
+.group {
+  background: transparent !important;
+  border: 1px solid #dee2e6;
+}
+
+.rule {
+  background: transparent !important;
+  border: 1px solid #dee2e6;
+  padding: 10px;
+}
+
+.rule--field > .dropdown > .form-select {
+    min-width: 200px;
+    line-height: 1.5 !important;
+    min-height: 40px !important;
+    /* background: transparent !important; */
+    color: black;
+}
+
+.rule--operator > .dropdown > .form-select {
+  min-width: 100px;
+  line-height: 1.5 !important;
+  min-height: 40px !important;
+  /* background: transparent !important; */
+  color: black;
+}
+
+.widget--widget > .form-control{
+  min-width: 250px;
+  line-height: 1.5 !important;
+  min-height: 40px !important;
+}
+
+.accordion{
+  --bs-accordion-bg: #303030 !important;
 }

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

@@ -4,7 +4,7 @@ import {ChangeRequest} from "../hooks/ChangeRequest"
 import {useNavigate} from "react-router-dom"
 
 export const CreateChangeRequestModal = ({showModal, setShowModal , updateViewMode, type}) => { 
-    const nameRef = useRef(null);
+    //const nameRef = useRef(null);
     const messageRef = useRef(null);
     const {loading,errorMessage,setError,createChangeRequest} =  ChangeRequest()
     const navigate = useNavigate()
@@ -14,17 +14,17 @@ export const CreateChangeRequestModal = ({showModal, setShowModal , updateViewMo
     }
 
     const runCreate = async () => {
-        const name = nameRef.current.value
+      //  const name = nameRef.current.value
         const message = messageRef.current.value
-        if(!name || name === "" || !message || message === "") {
-            setError("Change request name and message are mandatory")
+        if(!message || message === "") {
+            setError("Change request message is mandatory")
             return
         }else{
-            const changeReqId = await createChangeRequest(name, message)         
-            if(changeReqId){
-                nameRef.current.value = ""
+            const {changeRequestId,branchName} = await createChangeRequest(message)         
+            if(changeRequestId){
+                //nameRef.current.value = ""
                 messageRef.current.value = ""
-                updateViewMode(name,changeReqId)
+                updateViewMode(branchName,changeRequestId)
                 setShowModal(false)
             }                  
         }
@@ -40,15 +40,7 @@ export const CreateChangeRequestModal = ({showModal, setShowModal , updateViewMo
         <Modal.Body className="p-3">
             {errorMessage && 
              <Alert variant="danger"  onClose={() => setError(false)} dismissible>{errorMessage}</Alert>}
-            <Form>
-                <Form.Group className="mb-3 tdb__input">
-                    <Form.Control required  
-                        ref={nameRef}
-                        id="add_changerequest_name" 
-                        type="text"
-                        placeholder={`Please type the change request name`} />
-                   
-                </Form.Group>
+            <Form>              
                 <Form.Group className="tdb__input">
                     <Form.Control required 
                         ref={messageRef}
@@ -71,3 +63,12 @@ export const CreateChangeRequestModal = ({showModal, setShowModal , updateViewMo
     </Modal>
 }
 
+/*<Form.Group className="mb-3 tdb__input">
+                    <Form.Control required  
+                        ref={nameRef}
+                        id="add_changerequest_name" 
+                        type="text"
+                        placeholder={`Please type the change request name`} />
+                   
+                </Form.Group>*/
+

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

@@ -9,27 +9,28 @@ import 'codemirror/theme/material-darker.css'
 //import 'codemirror/addon/display/autorefresh.js'
 import {PROGRESS_BAR_COMPONENT, TERMINUS_SUCCESS} from "./constants"
 import {Loading} from "./Loading"
+import {Alert} from "react-bootstrap"
 import {MODEL_BUILDER_EDITOR_OPTIONS} from "./constants"
 import { BiUndo } from "react-icons/bi"
 import {FaRegEdit} from 'react-icons/fa'
-import {Alerts} from "./Alerts"
+//import {Alerts} from "./Alerts"
 import {TERMINUS_DANGER,DOCUMENT_PREFIX} from "./constants"
 import {GRAPH_TAB} from "../pages/constants"
 import {GraphContextObj} from "@terminusdb-live/tdb-react-components"
 import {CopyButton} from "./utils"
 import Card from "react-bootstrap/Card"
 import {BsSave} from "react-icons/bs"
 import Stack from "react-bootstrap/Stack"
+import {modelCallServerHook} from "@terminusdb-live/tdb-react-components"
 
-export const JSONModelBuilder = ({tab,saveGraph,accessControlEditMode, setReportMessage}) => {
+// we moved the save data at this level or we lost our change if there is an error
+export const JSONModelBuilder = ({tab,accessControlEditMode}) => {
 
-    const {getSchemaGraph,mainGraphObj} = GraphContextObj();
-    const {dataProduct} = WOQLClientObj()
-    const [loading, setLoading] = useState(false)
-    const [error, setError] = useState(false)
+    const {getSchemaGraph,mainGraphObj,updateMainGraphData} = GraphContextObj();
+    const {dataProduct,woqlClient} = WOQLClientObj()
+   // const [loading, setLoading] = useState(false)
     const [commitMsg, setCommitMessage]=useState("Add new schema")
-    const [report, setReport]=useState(false)
-
+    
     const [jsonSchema, setJsonSchema]=useState(false)
 
     const [editMode, setEditMode]=useState(false)
@@ -38,83 +39,81 @@ export const JSONModelBuilder = ({tab,saveGraph,accessControlEditMode, setReport
     let branch = "main"
     let ref = ""
 
+
+    const {saveGraphChanges,
+        reportMessage,
+        setReport,
+        callServerLoading:loading,
+    } = modelCallServerHook(woqlClient, branch, ref,dataProduct)
+    
     const onBlurHandler = (value) =>{
         setValue(value)
     }
 
-    async function getJSONSchema () {
+    async function loadSchema () {
+        setEditMode(false); 
+        setReport(false)
         //get the schema from the mainGraphObj
         //the result is the schema in json format
-        const resultJson = getSchemaGraph()// await woqlClient.getDocument(params, dataProduct)
+        const resultJson = await getSchemaGraph()// await woqlClient.getDocument(params, dataProduct)
         setJsonSchema(resultJson)
         setValue(resultJson)
     }
 
     useEffect(() => {
         if(tab == GRAPH_TAB) return
-        setEditMode(false)
-        getJSONSchema()
+        loadSchema()
     }, [tab,dataProduct,mainGraphObj])
 
 
 
-
     MODEL_BUILDER_EDITOR_OPTIONS.readOnly=!editMode
 
     function handleCommitMessage (e) {
         setCommitMessage(e.target.value)
     }
 
 
-    async function saveChange (){
-        setLoading(<Loading message={"Updating schema"} type={PROGRESS_BAR_COMPONENT}/>)
-
+    async function saveGraph (){
         if(value) {
-            try{
-                //save change in the server
-                await saveGraph(value, commitMsg)   
-                setLoading(false)
-                //setEditMode(false)
-             
-            }catch(err){
-                let jsonError= JSON.parse(JSON.stringify(err))
-                setLoading(false)
-                if(jsonError.data && jsonError.data["api:message"]) {
-                    setReport(<Alerts message={jsonError.data["api:message"]} type={TERMINUS_DANGER}/>)
-                }
-                else setReport(<Alerts message={err.toString()} type={TERMINUS_DANGER}/>) 
-            }       
+            const result = await saveGraphChanges(value, commitMsg)
+            if(result){
+                const resultJson = JSON.stringify(result,null,4)
+                updateMainGraphData(result)
+                setJsonSchema(resultJson)
+                setValue(resultJson)
+                setEditMode(false); 
+            }   
         }
     }
 
-    function handleUndo () {
-        // sets report messagen from modelCallServerHook to false
-        if(setReportMessage) setReportMessage(false)
-        setEditMode(false); 
-        getJSONSchema();
-    }
-
     const editStyle = editMode ? {className:"border rounded border-warning position-sticky"} : {}
     const editMessage = editMode ? "Save schema or you will lose your changes" : ""
 
     //console.log("editMode", editMode)
     return <>
         <label className="text-warning mt-4">{editMessage}</label>
+        {reportMessage && !loading &&
+                 <Alert className ="mt-3" variant="danger" dismissible onClose={() => setReport(false)}>
+                          <Alert.Heading>{reportMessage.message.title}</Alert.Heading>
+
+                        <p>{reportMessage.message.text}</p>
+        </Alert>}
         <Card className={`border border-secondary mt-4`} {...editStyle}>
-            {loading && loading} 
+            {loading && <Loading message={"Updating schema"} type={PROGRESS_BAR_COMPONENT}/>}       
             <Card.Header>
                 <Stack direction="horizontal" className="w-100 justify-content-end">
                     {editMode && <div className="w-100">
                         <div role="group" className="btn-group w-100">
                             <div className="col-md-10 pr-0 pl-0">
                                 <input id="schema_save_description" placeholder={"Enter a description to tag update"} type="text" className="form-control" onBlur={handleCommitMessage}/>
                             </div>
-                            <button  type="button" id="schema_save_button" className="btn btn-sm bg-light text-dark" onClick={saveChange}>
+                            <button  type="button" id="schema_save_button" className="btn btn-sm bg-light text-dark" onClick={saveGraph}>
                                 <BsSave className="small"/> {"Save"}
                             </button>
                             <button  type="button" 
                                 title="Undo changes"
-                                className="btn btn-sm bg-danger text-white mr-2" onClick={()=>{ handleUndo() }}>
+                                className="btn btn-sm bg-danger text-white mr-2" onClick={()=>{ loadSchema() }}>
                                 <BiUndo className="h5"/> {"Undo"}
                             </button>
                         </div>
@@ -133,7 +132,6 @@ export const JSONModelBuilder = ({tab,saveGraph,accessControlEditMode, setReport
                 </Stack>
             </Card.Header>
             <div className="h-100">
-                {report && <span className="w-100 m-4">{report}</span>}
                 <CodeMirror  
                     onBlur={(editor, data) => {
                         const editorValue =editor.doc.getValue()

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

@@ -11,16 +11,16 @@ import ToggleButton from 'react-bootstrap/ToggleButton';
 import {Loading} from "../components/Loading"
 import { MessageBox, MessageComponent } from "./Messages"
 import {AiOutlineCheck, AiOutlineClose} from "react-icons/ai"
+import {Alerts} from "./Alerts"
 
-const ToggleActions = ({ message }) => {
+const ToggleActions = ({ message, updateChangeRequestStatus , loading}) => {
     const { setCurrentCRObject, exitChangeRequestBranch }= WOQLClientObj()
-    const { updateChangeRequestStatus, loading, error } = ChangeRequest()
     const { organization, dataProduct , changeid} = useParams()
+    const  [loadingMessage,setLoadingMessage] = useState(`Approving Change Request ...`)
     const navigate = useNavigate() 
-    let action = CONST.APPROVE
 
     async function doAction(submitAction) {
-        action = submitAction
+        if(submitAction !== CONST.APPROVE ) setLoadingMessage(`Rejecting Change Request ...`)
         let status = submitAction === CONST.APPROVE ? CONST.MERGED : CONST.REJECTED
         let res=await updateChangeRequestStatus(message, status, changeid) 
         if(res){
@@ -35,7 +35,7 @@ const ToggleActions = ({ message }) => {
         { 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 ...`}/>
+    if(loading) return <Loading message={loadingMessage}/>
 
     return <Stack directtion="horizontal" className="float-right">
         <small className="text-muted fst-italic fw-light mr-2 ms-auto">
@@ -60,23 +60,13 @@ const ToggleActions = ({ message }) => {
     </Stack>
 }
 
-
-/**
- * @returns view based on CR actions
- */
-export const Review = ({ message, setMessage }) => {
-    return <React.Fragment>
-        <MessageBox setMessage={setMessage} message={message}/>
-        <ToggleActions message={message}/>
-    </React.Fragment>
-}
-
 export const ReviewComponent = () => {
     const {
         userHasMergeRole,
         currentCRObject
     }= WOQLClientObj()
 
+    const { updateChangeRequestStatus, loading, errorMessage, setError } = ChangeRequest()
     // feedback constants
     const [message, setMessage]=useState("")
 
@@ -86,17 +76,21 @@ export const ReviewComponent = () => {
         return <MessageComponent/>
     }*/
 
-    return <Card className="bg-transparent border border-dark m-3">
-        <Card.Header className="bg-transparent border border-dark">
-            <Stack direction="horizontal" gap={3} className="text-right w-100">
-                <h6>Submit your Review</h6>
-                <span className="text-light ms-auto">{`Status:`}</span>
-                {status[currentCRObject.status]}
-            </Stack>
-        </Card.Header>
-        <Card.Body>
-            <Review message={message} setMessage={setMessage}/>
-        </Card.Body>
-    </Card>
+    return <React.Fragment>
+           {errorMessage && <Alerts message={errorMessage} type={CONST.TERMINUS_DANGER} onCancel={setError}/>}
+            <Card className="bg-transparent border border-dark m-3">
+                <Card.Header className="bg-transparent border border-dark">
+                    <Stack direction="horizontal" gap={3} className="text-right w-100">
+                        <h6>Submit your Review</h6>
+                        <span className="text-light ms-auto">{`Status:`}</span>
+                        {status[currentCRObject.status]}
+                    </Stack>
+                </Card.Header>
+                <Card.Body>
+                    <MessageBox setMessage={setMessage} message={message}/>
+                    <ToggleActions message={message} loading={loading} updateChangeRequestStatus={updateChangeRequestStatus}/>
+                </Card.Body>
+            </Card>
+        </React.Fragment>
 
 }

packages/tdb-dashboard/src/hooks/ChangeRequest.js

@@ -18,15 +18,15 @@ export function ChangeRequest(){
         return client.connectionConfig.dbBase("changes")
     }
 
-    const createChangeRequest = async(branchName, message) =>{
+    const createChangeRequest = async(message) =>{
         try{
             setLoading(true)
-        const payload = {tracking_branch:branchName,
-                        original_branch:"main",
+        const payload = {original_branch:"main",
                         message:message,
                         author:woqlClient.user()}
         const result = await woqlClient.sendCustomRequest("POST", getUrl(),payload)
-        return result.change_request_id
+        //{changeRequestId,branchName}
+        return result
         }catch(err){
             const errMessage = formatErrorMessage(err)
             setError(errMessage)

packages/tdb-dashboard/src/hooks/DocumentControlContext.js

@@ -224,15 +224,19 @@ export const DocumentControlProvider = ({children}) => {
             const params={id:documentId}
             let commitMsg=`Deleting document ${documentId}` 
             const res = await woqlClient.deleteDocument(params, dataProduct, commitMsg)
-            return res
+            return true
         }catch(err){
             setError(`I can not delete the document ${err.message}`)
        }finally{setLoading(false)}
     }
 
 
     // check if the current change request is still open
-    async function checkStatus (){   
+    async function checkStatus (){ 
+        // I can decide to change a document 
+        // in a new branch without using the change request workflow
+        // in this case currentChangeRequest is false
+        if(!currentChangeRequest) return 
         const CRObject = await getChangeRequestByID(currentChangeRequest)
         if(CRObject.status !== "Open"){
             throw Error(`The current Change Request has been ${CRObject.status}.