make change request workflow optional

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

@@ -1,7 +1,7 @@
 import React, {useState, useEffect, Fragment, useRef} from "react"
 import {WOQLClientObj} from '../init-woql-client'
 import {timeConverter, } from "../pages/utils"
-import {Button,Alert} from "react-bootstrap"
+import {Button,Alert,ButtonGroup,ToggleButton} from "react-bootstrap"
 import {DATA_PRODUCT_HEALTHY} from "../pages/constants"
 import {HealthModal} from "./HealthModal"
 import {localSettings} from "../../localSettings"
@@ -20,9 +20,9 @@ export const AboutDataProduct = ({dataProductDetails, setShowDeleteModal, setSho
     const {dataProduct,organization} =useParams()
     const [showHealth, setShowHealth]=useState(false)
     const [branchCount, setBranchCount]= useState(0)
-    const {woqlClient, accessControlDashboard} = WOQLClientObj()
+    const {woqlClient, accessControlDashboard, updateChangeRequestStatus, useChangeRequest,clientUser} = WOQLClientObj()
     const {documentClasses,getDocumentClasses} = useTDBDocuments(woqlClient)
-
+    const [radioValue, setRadioValue] = useState(useChangeRequest===false ? "Inactive" : "Active");
 
     const {cloneDatabase, loading:loadingClone, error:errorClone , setError:setCloneError} =  ManageDatabase()
 
@@ -90,9 +90,43 @@ export const AboutDataProduct = ({dataProductDetails, setShowDeleteModal, setSho
     const showUpdateHandler = () =>{
         setShowUpdate(dataProductDetails)
     }
+
+    const radios = [
+        { name: 'Change Request Mode Active', value: 'Active' , title:'manage your documents using the change request mode'},
+        { name: 'Change Request Mode Inactive', value: 'Inactive' , title:'manage your documents directly in the current branch'},
+      ];
+
+
+    const updateChangeRequestStatusHandler = function(value){
+        setRadioValue(value)
+        updateChangeRequestStatus(value)
+    }
 
     return <React.Fragment> 
         <HealthModal dataProduct={dataProduct} showHealth={showHealth} setShowHealth={setShowHealth}/>
+        {clientUser.serverType !== "TerminusDB" &&
+        <Card className="bg-transparent p-1 mb-5 tdb__align__container" border="muted">
+            <Card.Body>
+            <ButtonGroup>
+                {radios.map((radio, idx) => (
+                <ToggleButton
+                    key={idx}
+                    id={`radio-${idx}`}
+                    type="radio"
+                    title={radio.title}
+                    variant={idx === 0 ? 'outline-success' : 'outline-warning'}
+                    name="radio"
+                    value={radio.value}
+                    checked={radioValue === radio.value}
+                    onChange={(e) => updateChangeRequestStatusHandler(e.currentTarget.value)}
+                >
+                    {radio.name}
+                </ToggleButton>
+                ))}
+            </ButtonGroup>
+            </Card.Body>
+        </Card>
+        }
         <Card className="bg-transparent p-1 mb-5 tdb__align__container" border="muted">
             <Card.Body>
                 <h4 className="text-light mb-3 fw-bold">About</h4>

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

@@ -7,7 +7,7 @@ import {
     Legend,
     ResponsiveContainer,
     AreaChart, Area } from 'recharts'
-import {TimeTravelControl} from "../hooks/TimeTravelControl"
+import {useTimeTravel} from "../hooks/useTimeTravel"
 import {printtsDate, printtsTime} from "./utils"
 import {Loading} from "./Loading"
 import {PROGRESS_BAR_COMPONENT} from "./constants"
@@ -16,7 +16,7 @@ import {Col} from "react-bootstrap"
 export const DataProductActivityStatus = ()=>{
     const {
         dataProvider
-    } = TimeTravelControl(50)
+    } = useTimeTravel(50)
 
     return  <React.Fragment>
                 <Col md={12}>

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

@@ -11,6 +11,10 @@ export const DatePickerComponent = ({currentDay, setStartTime}) => {
         // convert to ISO timeStamp 
       if(setStartTime)setStartTime(data)
     }
+
+    useEffect(()=>{
+      setCurrentDate(currentDay)
+    },[currentDay])
 
     return <DatePicker onChange={handleOnChange} 
             value={selected} 

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

@@ -8,7 +8,7 @@ import {useParams} from 'react-router-dom'
 
 export const IconBar =  ({setShowFeedbackForm}) => {
 
-     const {currentChangeRequest} = WOQLClientObj()
+     const {currentChangeRequest,useChangeRequest} = WOQLClientObj()
 
     const { organization, dataProduct } = useParams();
 
@@ -101,18 +101,18 @@ export const IconBar =  ({setShowFeedbackForm}) => {
                     {IconBarConfig.graphiql.icon}
                 </Nav.Link>
             </Nav.Item>
-            <Nav.Item>
+            {useChangeRequest && <Nav.Item>
                 <Nav.Link  as={RouterNavLink}
                     title={IconBarConfig.changes.title} 
-                    className="nav-icon nav-product-expolorer" 
+                    className="nav-icon nav-product-explorer" 
                     {...disabled}
                     to={getUrl(IconBarConfig.changes.path)} 
 
                     id={IconBarConfig.changes.key}>
                     {IconBarConfig.changes.icon}
                 </Nav.Link>
-            </Nav.Item>
-            {!currentChangeRequest &&
+            </Nav.Item>}
+            {useChangeRequest && !currentChangeRequest &&
                 <Nav.Item>
                     <Nav.Link  as={RouterNavLink}
                         title={IconBarConfig.openAI.title} 
@@ -125,7 +125,7 @@ export const IconBar =  ({setShowFeedbackForm}) => {
                     </Nav.Link>
                 </Nav.Item>
             }
-            {!currentChangeRequest  && 
+            {useChangeRequest && !currentChangeRequest  && 
                 <Nav.Item>
                     <Nav.Link  as={RouterNavLink}
                         title={IconBarConfig.search.title} 
@@ -138,7 +138,7 @@ export const IconBar =  ({setShowFeedbackForm}) => {
                     </Nav.Link>
                 </Nav.Item>
             }
-             {!currentChangeRequest  && 
+             {useChangeRequest && !currentChangeRequest  && 
                 <Nav.Item>
                     <Nav.Link  as={RouterNavLink}
                         title={IconBarConfig.actions.title} 

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

@@ -59,7 +59,8 @@ export const MessageComponent = ({setKey}) => {
     async function handleMessage(comment) {
         let id=extractID(currentCRObject["@id"])
         // this call return the changeRequestObj Updated
-        let res=await addNewMessage(comment, id)
+        let res=await addNewMessage(comment,id)
+
         // we'll see if add need rebase check every time
         res.needRebase = currentCRObject.needRebase
         setCurrentCRObject(res)

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

@@ -112,6 +112,7 @@ export const QueryPane = ({queryObj}) => {
                                 <Col md={size}> 
                                 <div className="editor-pallet">
                                 <WOQLEditor
+                                    language={queryObj.editorObj.language}
                                     editorObject={queryObj.editorObj}
                                     editable={true}
                                     theme="dark"/>

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

@@ -1,12 +1,10 @@
 import React, {useState, useEffect, useRef} from "react"
 import {BiTimer, BiTime, BiMessageAltDetail} from "react-icons/bi"
-import {BsFillCircleFill, BsCalendar} from"react-icons/bs"
+import {BsFillCircleFill} from"react-icons/bs"
 import { VerticalTimeline, VerticalTimelineElement }  from 'react-vertical-timeline-component'
 import 'react-vertical-timeline-component/style.min.css'
-import {TimeTravelControl} from "../hooks/TimeTravelControl"
+import {useTimeTravel} from "../hooks/useTimeTravel"
 import {Button, Card, Row, Col} from "react-bootstrap"
-import {TERMINUS_SUCCESS} from "./constants"
-import {Alerts} from "./Alerts"
 import {AiOutlineUser} from "react-icons/ai"
 import {printtsDate, printtsTime} from "./utils"
 import {WOQLClientObj} from '../init-woql-client'
@@ -16,31 +14,30 @@ import {PROGRESS_BAR_COMPONENT} from "./constants"
 import {DatePickerComponent} from "./DatePicker"
 import {FaInfoCircle} from "react-icons/fa"
 
-
-export const TimeTravel = ({show}) => {
-
+export const TimeTravel = ({refreshTime}) => {
     let cardColor = "#303030", transparantColor = "transparent", activeColor = "#00bc8c"
-    const  {branch, chosenCommit,setHead, currentChangeRequest} = WOQLClientObj()
-
-    const {currentItem, 
+    const {setHead,chosenCommit,branch} = WOQLClientObj()
+    const {
         dataProvider, 
-        //setSelectedValue, 
-        setCurrentDay,
         loadNextPage,
         olderCommit, 
-        loadPreviousPage,
-        setReloadQuery,
         currentDay,
         setStartTime,
         loading,
         setLoading,
-        } = TimeTravelControl() 
+        } = useTimeTravel() 
 
     useEffect(() => { // when new commit logs are loaded on click of previous or next 
         if(dataProvider.length > 0) {
             setLoading(false)
         }
     }, [dataProvider])
+
+    useEffect(()=>{
+      if(refreshTime){
+        setStartTime(refreshTime,true)
+      }
+    },[refreshTime])
 
     //const [reportAlert, setReportAlert] = useState(false)
 
@@ -53,20 +50,6 @@ export const TimeTravel = ({show}) => {
          }
     }
 
-   /* useEffect(() => {
-        if(chosenCommit && setHead){
-            setHead(branch, chosenCommit)
-            let message = `The state of data product has been set to date ${chosenCommit.label}`
-            setReportAlert(<Alerts message={message} type={TERMINUS_SUCCESS} onCancel={setReportAlert}/>)
-         }
-    }, [chosenCommit])*/
-
-    // useEffect(() => {
-    //     if(show){
-    //         setReloadQuery(Date.now())
-    //     }
-    // }, [show])
-
 
     const TimelineElements = () => {
         if(!dataProvider) return <div/>

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

@@ -1,14 +1,15 @@
-import React from "react"
+import React, {useState} from "react"
 import {Card, Button} from "react-bootstrap"
 import {WOQLClientObj} from '../init-woql-client'
 import {AiOutlineClose, AiOutlineRollback} from "react-icons/ai"
 import {TimeTravel} from "./TimeTravel"
 
 export const TimeTravelContainer = ({show, setShowTimeTravel}) => { 
     const {branch,setHead}=WOQLClientObj()
-
+    const [needRefresh,setNeedrefresh] = useState(false)
     const goToLatestCommit = () => {
-      setHead("main", { commit: false, time: false });
+      setHead(branch, { commit: false, time: false });
+      setNeedrefresh(Date.now())
     };
 
     let sliderClass = 'time-travel-slider'
@@ -21,7 +22,7 @@ export const TimeTravelContainer = ({show, setShowTimeTravel}) => {
                 <Card.Header className="d-flex">
                     <h6 className="mr-4 mt-2 w-100 float-left">Time travel on branch  -  <strong className="text-success">{branch}</strong></h6>
                     <div className="float-right w-100 text-right">
-                        <Button variant="light" className="mr-3" title={"Go to the latest commit of main branch"} onClick={(e) => goToLatestCommit()}>
+                        <Button variant="light" className="mr-3" title={`Go to the latest commit of ${branch} branch`} onClick={(e) => goToLatestCommit()}>
                             <AiOutlineRollback />
                         </Button>
                         <Button variant="light" className="mr-3" title={"Close Time Travel View"} onClick={(e) => setShowTimeTravel(false)}>
@@ -30,7 +31,7 @@ export const TimeTravelContainer = ({show, setShowTimeTravel}) => {
                     </div>
                 </Card.Header>
                 <Card.Body>
-                   {show && <TimeTravel show={show}/>}
+                   {show && <TimeTravel refreshTime={needRefresh}/>}
                 </Card.Body>
         </Card>
     </div>

packages/tdb-dashboard/src/components/layout/TDBToggleButtonGroup.js

@@ -14,7 +14,7 @@ export const TDBToggleButtonGroup = (props) => {
 
     return <ToggleButtonGroup type="radio" name="options" value={props.selected} >
             {config.buttons.map((item) => 
-                  <ToggleButton key={`item__${item.id}`} value={item.id} key={item.id}
+                  <ToggleButton key={`item__${item.id}`} value={item.id}
                     id={item.id} className="btn-light btn-sm mt-1" onClick={(e)=>handleOnClick(item.id)} >
                     {item.icon && <i className={item.icon}/>}
                     {item.label}

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

@@ -303,8 +303,11 @@ export const status = {
 
 /** just get change request ID, remove "Changerequest/" from ID */
 export function extractID(id) {
-    let str= id.split("/") 
-    return str[1]
+    if(typeof id === "string"){
+        let str= id.split("/") 
+        return str[1]
+    }
+    return ""
 }
 
 /** sorts alphabetically  */

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

@@ -129,6 +129,7 @@ export function ChangeRequest(){
     return {
         loading,
         setError,
+        addNewMessage,
         errorMessage,
         changeRequestList,
         createChangeRequest,

packages/tdb-dashboard/src/hooks/TimeTravelControl.js → packages/tdb-dashboard/src/hooks/useTimeTravel.js

@@ -10,19 +10,22 @@ const QUERY_TYPE_LOAD = 'QUERY_TYPE_LOAD';
 const QUERY_TYPE_PREVIOUS = 'QUERY_TYPE_PREVIOUS';
 const QUERY_TYPE_NEXT = 'QUERY_TYPE_NEXT';
 
-export const TimeTravelControl = (limit=5) => {
+export const useTimeTravel = (limit=5) => {
     const {woqlClient, branch, chosenCommit,setHead} = WOQLClientObj()
     if(!woqlClient) return ""
      const dataProduct = woqlClient.db()
 
     const [report, setError] = useState(false)
     // type Date 
-    const currentDay =  new Date()
-    if(chosenCommit && chosenCommit.time)currentDay.setTime(chosenCommit.time*1000) 
+    const startcurrentDay =  new Date()
+    // If there is a commit selected I add 6 second to the time
+    // because the query is less then or he not get the selected one
+    if(chosenCommit && chosenCommit.time)startcurrentDay.setTime((chosenCommit.time*1000)+6000)
    //Unix timestamp (in seconds)
-    const currentStartTime = Math.floor(+currentDay/1000) //currentDay.unix();
+    const currentStartTime = Math.floor(+startcurrentDay/1000)
     const [olderCommit,setOlderCommit] = useState(true);
     const [currentPage, setCurrentPage] = useState(0);
+    const [currentDay, setUpdateCurrentDay] = useState(startcurrentDay);
     const [startTime, setUpdateStartTime] = useState(currentStartTime);
     const [gotoPosition,setGotoPosition] = useState(null);
     const [reloadQuery,setReloadQuery] = useState(0);
@@ -87,6 +90,8 @@ export const TimeTravelControl = (limit=5) => {
                     else queryObj = WOQL.lib().commits(branch, limit,currentPage);
             } 
             const tmpWoqlClient =  woqlClient.copy()
+            // I should reset the commit or I see only a subset of commits 
+            tmpWoqlClient.ref(null)
 
             tmpWoqlClient.query(queryObj).then((result) => {
                 if (result.bindings) {
@@ -214,16 +219,21 @@ export const TimeTravelControl = (limit=5) => {
     //    setReloadQuery(Date.now());
     }
 
-    const setStartTime=(date)=>{
+    const setStartTime=(date,resetday)=>{
         setCurrentPage(0);
         setGotoPosition(null)
         //setCurrentCommit(null)
-        const unixTime = (Math.floor(+date/1000)+86400) //time.add(1,'day').unix();
+        const unixTime = (Math.floor(+date/1000)+86400)
         if(unixTime !==startTime) setDataProviderValues({dataProvider:[],selectedValue:0});
         if(chosenCommit && chosenCommit.time){
             //reset the commit
             setHead(branch, {})
         }
+        if(resetday){
+            const tmpCurrentDay = new Date()
+            tmpCurrentDay.setTime(date)
+            setUpdateCurrentDay(tmpCurrentDay+6000)
+        }
         setUpdateStartTime(unixTime)
     }
 

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

@@ -1,4 +1,25 @@
 
+export function storeChangeRequestDBStatus(orgName,dbName,status,setStatus){
+    const cr_name = `TERMINUSCMS_CR_STATUS.${orgName}_____${dbName}`
+    localStorage.setItem(cr_name,status)
+    setStatus(status==="Inactive" ? false : true)
+}
+
+export function getStoreChangeRequestDBStatus(orgName,dbName,setStatus){
+    const cr_name = `TERMINUSCMS_CR_STATUS.${orgName}_____${dbName}`
+    const item = localStorage.getItem(cr_name)
+    let status = true
+    if(item) status = item==="Inactive" ? false : true
+    setStatus(status)
+    return status
+}
+
+export function deleteStoreChangeRequestDBStatus(orgName,dbName){
+    const cr_name = `TERMINUSCMS_CR_STATUS.${orgName}_____${dbName}`
+    localStorage.removeItem(cr_name)
+}
+
+
 export function graphStructureFromBindings(bindings) {
     let gs = {}
     for (var i = 0; i < bindings.length; i++) {