Merge pull request #292 from terminusdb/add-change-request-optional

Add change request optional

Author: KittyJose

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

@@ -26,13 +26,12 @@ const StepDetail = ({ stepNumber, stepComponent, icon}) => {
 }
 
 
+
 function getStep(stepNumber,supMode) {
   let { organization,dataProduct } = useParams()
   const stepOptions= {
-    "step1":<>
-              Visit <NavLink href="https://platform.openai.com/account/api-keys" className={"mr-1"}>Open AI</NavLink>
-              and create a your Secret API Key
-            </>,
+    "step1":<>Visit <a href="https://platform.openai.com/account/api-keys" target="_blank" className={"mr-1"}>Open AI</a>
+              and create a your Secret API Key</>,
     "step2": {"LOCAL":<>
                 Copy and paste your generated OpenAI API Key in your environment variables, restart the application
               </>,
@@ -42,12 +41,17 @@ function getStep(stepNumber,supMode) {
               },
     "step3":<>
             Go to <NavLink to={`/${organization}/${dataProduct}/openai_configuration`} className={"mr-1"}>Open AI configuration </NavLink> page
-            to add a graphql query and an handlebar template for every Document
+            to add a graphql query and an handlebar template for every Document you like to index
             </>,
-    "step4": <>
+    "step4":  {"REMOTE":<>
               In your profile turn on the Indexing button next to the OpenAI Key field.
               All data products in your team will begin to index.
               </>,
+              "LOCAL":<>
+              Use VectorLink to Semantically search your data products and use the vector embeddings to talk to OpenAI.
+              Click <NavLink href="https://terminusdb.com/docs/" className={"mr-1"}>here</NavLink>for more info on how to use VectorLink.
+              </>},
+
     "step5": <>
               Use VectorLink to Semantically search your data products and use the vector embeddings to talk to OpenAI.
               Click <NavLink href="https://terminusdb.com/docs/" className={"mr-1"}>here</NavLink>for more info on how to use VectorLink.
@@ -77,8 +81,8 @@ export const DisplayNoIndexingAction = ({ helpDescription }) => {
           <StepDetail stepNumber={1} stepComponent={getStep(1)} icon={<BsKey/>}/>
           <StepDetail stepNumber={2} stepComponent={getStep(2, connection_type)} icon={<RiUserFollowFill/>}/>
           <StepDetail stepNumber={3} stepComponent={getStep(3)} icon={<SiHandlebarsdotjs/>}/>
-          <StepDetail stepNumber={4} stepComponent={getStep(4)} icon={<RxCheckbox/>}/>
-          <StepDetail stepNumber={5} stepComponent={getStep(5)} icon={<BsSearch/>}/>
+          <StepDetail stepNumber={4} stepComponent={getStep(4, connection_type)} icon={<RxCheckbox/>}/>
+          {connection_type === "REMOTE" && <StepDetail stepNumber={5} stepComponent={getStep(5)} icon={<BsSearch/>}/>}
         </Col>
         <Col md={3}></Col>
       </Row>

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

@@ -1,9 +1,9 @@
 import React, {useEffect} from "react"
 import {DocumentsGraphqlTable} from "@terminusdb/terminusdb-documents-ui-template"
-import {gql} from "@apollo/client"
 import {useTDBDocuments} from "@terminusdb/terminusdb-documents-ui-template"
 import {WOQLClientObj} from '../init-woql-client'
 import { Loading } from "./Loading"
+import {getGqlQuery} from "../pages/utils"
 /**
  * 
  * @param {*} setSelected function to get selected document link by user 
@@ -22,7 +22,7 @@ export const DocumentSearchComponent = ({setSelected, doctype}) => {
         }
      },[doctype]);
     const querystr  = documentTablesConfig && documentTablesConfig.objQuery ? documentTablesConfig.objQuery[doctype].query : null
-    const gqlQuery = querystr ? gql`${querystr}` : null
+    const gqlQuery = querystr ? getGqlQuery(querystr) : null
     const tableConfig =  documentTablesConfig && documentTablesConfig.tablesColumnsConfig ? documentTablesConfig.tablesColumnsConfig[doctype] : []
     const advancedSearchConfig = documentTablesConfig && documentTablesConfig.advancedSearchObj ? documentTablesConfig.advancedSearchObj[doctype] : null
 

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

@@ -8,8 +8,12 @@ export const SubmitChangeRequestModal = ({showModal, setShowModal , updateParent
 
     const closeModal = () => setShowModal(false)
 
+    const titleObj= {"Submitted":'Submit the Change Request for review',
+                     "Open" : "Reopen the change request",
+                     "Close" : <Alert variant="danger">You are Closing this change request. You can not undo this operation</Alert>}
+
     const statusUpdate = operation || "Submitted"
-    const title = statusUpdate === "Submitted" ? 'Submit the Change Request for review' : `Reopen the change request`
+    const title = titleObj[statusUpdate]
 
     const runCreate = async () => {
         const message = messageRef.current.value

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

@@ -492,6 +492,7 @@ export const OPEN="Open"
 export const MERGED="Merged"
 export const SUBMITTED="Submitted"
 export const REJECTED="Rejected"
+export const CLOSE = "Close"
 
 // CR actions
 export const COMMENT="Comment"

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

@@ -5,18 +5,17 @@ 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 {AiOutlineDeleteRow,AiOutlineClose} from "react-icons/ai"
 import {VscGitPullRequest} from "react-icons/vsc"
 import {VscCheck} from "react-icons/vsc" 
-import {AiOutlineCheck} from "react-icons/ai"
-import Stack from 'react-bootstrap/Stack';
 import Badge from "react-bootstrap/Badge"
 import Button from "react-bootstrap/Button"
 import {
 	OPEN,
 	REJECTED,
 	MERGED, 
-	SUBMITTED
+	SUBMITTED,
+    CLOSE
 } from "./constants"
 
 export const isArray = (arr) => {
@@ -290,7 +289,8 @@ export const iconTypes={
 	[OPEN]:<VscGitPullRequestDraft className="text-muted 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"/>
+    [MERGED] :<VscCheck className="success__color mb-1 mr-1"/>,
+    [CLOSE] :<AiOutlineClose className="text-danger mb-1 mr-1"/>
 }
 
 
@@ -299,6 +299,7 @@ export const status = {
     [SUBMITTED]: <Badge bg="warning text-dark">Review required</Badge>,
     [REJECTED]: <Badge bg="danger text-dark">{REJECTED}</Badge>,
     [MERGED]:  <Badge bg="success text-dark">{MERGED}</Badge>,
+    [CLOSE]:  <Badge bg="danger text-dark">{CLOSE}</Badge>
 }
 
 /** just get change request ID, remove "Changerequest/" from ID */

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

@@ -101,7 +101,9 @@ export function useOpenAI(){
                 localStorage.setItem(`${location.pathname}___SEARCH__RESULT`,JSON.stringify(result))
                 setSearchResult(result)
             }catch(err){
-               setError(err.data || err.message)              
+                console.log(err.data)
+                const errValue = err.data && err.data.error ? err.data.error : err.message
+               setError(errValue)              
             }finally{
                 setLoading(false)
             }

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

@@ -12,7 +12,8 @@ import {
 	OPEN,
 	REJECTED,
 	MERGED, 
-	SUBMITTED
+	SUBMITTED,
+	CLOSE
 } from "../components/constants"
 import ProgressBar from 'react-bootstrap/ProgressBar'
 import {extractID, status, iconTypes, getDays} from "../components/utils"
@@ -71,12 +72,13 @@ export const ChangeRequestsPage = () => {
     }
 
 
-    const countType = {[OPEN] : 0 , [SUBMITTED]:0, [REJECTED]:0, [MERGED]:0 }
+    const countType = {[OPEN] : 0 , [SUBMITTED]:0, [REJECTED]:0, [MERGED]:0, [CLOSE]:0 }
 	const activeClassNameType = { 
 		[OPEN] : "text-decoration-underline text-light" , 
 		[SUBMITTED]: "text-decoration-underline text-warning",  
 		[REJECTED]: "text-decoration-underline text-danger", 
-		[MERGED]: "text-decoration-underline success__color"
+		[MERGED]: "text-decoration-underline success__color",
+		[CLOSE]: "text-decoration-underline text-danger",
 	}
 
 	function getActiveClassName (filter, status) {
@@ -120,6 +122,12 @@ export const ChangeRequestsPage = () => {
 						<span className={`${getActiveClassName (filter, REJECTED)}`}>{countType[REJECTED]} {REJECTED}</span>
 					</small>
 				</Button>
+				<Button variant="dark" onClick={(e) => displayCRs(CLOSE)} className="btn bg-transparent border-0 text-gray">   
+					<small className="text-gray fw-bold">
+						{iconTypes[CLOSE]} 
+						<span className={`${getActiveClassName (filter, CLOSE)}`}>{countType[CLOSE]} {CLOSE}</span>
+					</small>
+				</Button>
 			</Stack>
 		</React.Fragment>
    }
@@ -142,6 +150,11 @@ export const ChangeRequestsPage = () => {
 		setShowUpdateChangeRequestID(id)
 	}
 
+	const closeCR = (id)=>{
+		setUpdateOperation(CLOSE)
+		setShowUpdateChangeRequestID(id)
+	}
+
 	const reopenCR = (id)=>{
 		setUpdateOperation(OPEN)
 		setShowUpdateChangeRequestID(id)
@@ -165,12 +178,14 @@ export const ChangeRequestsPage = () => {
 						</Button>
 						<Button className="bg-success text-dark mr-4 btn btn-sm" onClick={()=>goToDiffPage(item)}>
 							View Diff</Button>
+						<Button className="bg-danger text-dark mr-4 btn btn-sm" title="you are closing your CR" onClick={()=>closeCR(id)}>Close</Button>
 
 					</React.Fragment> 
 			case SUBMITTED: 
 				return <React.Fragment>
 					<Button title="go to diff page to review" className="btn btn-warning mr-2 btn-sm text-dark"  onClick={()=>goToDiffPage(item)} >Review</Button>
 					<Button className="bg-light text-dark mr-4 btn btn-sm" onClick={()=>reopenCR(id)}>Reopen</Button>
+					<Button className="bg-danger text-dark mr-4 btn btn-sm" title="you are closing your CR"  onClick={()=>closeCR(id)}>Close</Button>
 				</React.Fragment>
 			case REJECTED: 
 				return <React.Fragment>
@@ -182,6 +197,8 @@ export const ChangeRequestsPage = () => {
 							<Button className="bg-success text-dark mr-4 btn btn-sm" onClick={()=>goToDiffPage(item)}>View Approved Diff</Button>
 							<Button className="bg-light text-dark mr-4 btn btn-sm" onClick={()=>reopenCR(id)}>Reopen</Button>
 					  </React.Fragment>
+			case CLOSE :
+				return ""
 		}
 	}
 

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

@@ -1,12 +1,12 @@
 import React, {useState} from "react";
 import {useParams, useNavigate} from "react-router-dom";
 import {NEW_DOC,EDIT_DOC, EXAMPLES_PRODUCTS} from "../routing/constants"
-import {gql} from "@apollo/client";
 import { ListDocumentsComponent, useTDBDocuments } from "@terminusdb/terminusdb-documents-ui-template";
 import {WOQLClientObj} from '../init-woql-client'
 import {CreateChangeRequestModal} from '../components/CreateChangeRequestModal'
 import { DeleteDocumentModal } from "../components/DeleteDocumentModal";
 import {ErrorMessageReport} from "../components/ErrorMessageReport"
+import {getGqlQuery} from "./utils"
 
 // I pass this so I'm sure it exists before loading the component
 export const DocumentsGraphqlList = ({documentTablesConfig}) => {    
@@ -20,7 +20,7 @@ export const DocumentsGraphqlList = ({documentTablesConfig}) => {
     const navigate = useNavigate()
 
     const querystr  = documentTablesConfig.objQuery[type].query
-    const query = gql`${querystr}`
+    const query = getGqlQuery(querystr,setError)
     const tableConfig = documentTablesConfig.tablesColumnsConfig[type]
     const advancedSearchConfig = documentTablesConfig.advancedSearchObj[type]
 

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

@@ -17,6 +17,9 @@ import { BsSearch } from "react-icons/bs"
 import InputGroup from 'react-bootstrap/InputGroup';
 import {FiAlertTriangle} from 'react-icons/fi'
 import { WOQLClientObj } from "../init-woql-client";
+import { formatError } from "./utils";
+import {Alerts} from "../components/Alerts"
+import {TERMINUS_DANGER} from "../components/constants"
 
 export function FreeTextSearch() {
     const {branch} = WOQLClientObj()
@@ -106,8 +109,7 @@ export function FreeTextSearch() {
                     <p>if you haven't already done it, Go to <NavLink to={`/${organization}/profile`}>Profile page</NavLink> and add an OpenAi Key to your team,</p> 
                     after you can start to index your data using the change request workflow
                 </Alert>*/}
-                {error &&  <ErrorMessageReport error={error} setError={setError}/> }
-               
+                {error &&  <Alerts message={formatError(error,organization,dataProduct)} type={TERMINUS_DANGER} onCancel={setError}/>}
                 {searchResult && 
                     <React.Fragment>
                     <div className="w-100 d-flex justify-content-center">

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

@@ -8,7 +8,6 @@ import Form from "react-bootstrap/Form";
 import ListGroup from "react-bootstrap/ListGroup";
 import Card from "react-bootstrap/Card"
 import { format } from 'graphql-formatter'
-import {gql} from "@apollo/client"
 import { useParams, NavLink } from "react-router-dom"
 import { useTDBDocuments } from "@terminusdb/terminusdb-documents-ui-template";
 import {WOQLClientObj} from '../init-woql-client'
@@ -25,6 +24,7 @@ import {CopyButton} from "../components/utils"
 import {ErrorMessageReport} from "../components/ErrorMessageReport"
 import { Loading } from "../components/Loading";
 import {PROGRESS_BAR_COMPONENT} from "../components/constants"
+import {getGqlQuery} from "./utils"
 
 export function GraphqlHandlerbarsPage({}) {
     const {woqlClient} = WOQLClientObj()
@@ -67,8 +67,10 @@ export function GraphqlHandlerbarsPage({}) {
         const classObj= documentClasses.find(item=>item['@id']===classId)
         if(classObj){
             if(classObj['@metadata'] && classObj['@metadata']['embedding']){
-            const query = gql(`${classObj['@metadata']['embedding']['query']}`)
-                setGraphqlQuery(format(query.loc.source.body))      
+            const query = getGqlQuery(classObj['@metadata']['embedding']['query'],setError)
+            const value = query ? format(query.loc.source.body) : ''
+                setGraphqlQuery(value)
+
                 setHandlebarTemplate(classObj['@metadata']['embedding']['template'])
             }else if(documentTablesConfig && documentTablesConfig.objQueryOpenAI && documentTablesConfig.objQueryOpenAI[classId]){
                 setGraphqlQuery(format(documentTablesConfig.objQueryOpenAI[classId].query))
@@ -96,8 +98,8 @@ export function GraphqlHandlerbarsPage({}) {
             return <Alert type="Info">There are no document of type {currentType}</Alert>
         }
         return <ListGroup >
-              {queryResultPreview && queryResultPreview.map(item=>{
-                    return <ListGroup.Item><pre className="preview_pre">{item}</pre></ListGroup.Item>
+              {queryResultPreview && queryResultPreview.map((item, key)=>{
+                    return <ListGroup.Item key={`item__${key}`}><pre className="preview_pre">{item}</pre></ListGroup.Item>
                 })}
             </ListGroup>
     }