Skip to content

Remove comment button cr #118

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Feb 10, 2023
Merged

Remove comment button cr #118

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
715beed
fixing schema model builder to show correct mode on save
KittyJose Feb 10, 2023
38835fd
fixing schema builder problem where schema is not in edit mode when e…
KittyJose Feb 10, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 1 addition & 9 deletions packages/tdb-dashboard/src/App.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1165,15 +1165,6 @@ pre.CodeMirror-line > span > span.cm-string {
border-color: #3450DC !important;
}

.model-builder-copy-button {
position: absolute;
z-index: 20;
text-align: right !important;
border: 1px solid blue;
right: 0;
margin-right: 60px !important;
}

/** to display status if not on latest version */
.tdb__status_latest__version {
color: #3450DC;
Expand Down Expand Up @@ -1202,3 +1193,4 @@ pre.CodeMirror-line > span > span.cm-string {
width: 100px;
height: 100px;
}

2 changes: 1 addition & 1 deletion packages/tdb-dashboard/src/components/DocumentSummary.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -90,7 +90,7 @@ export const DocumentSummary = () => {
<Nav.Item className="mb-4">
<Nav.Link as={RouterNavLink}
title={IconBarConfig.dataProductModal.title}
className="btn btn-lg btn-info d-inline text-white"
className="btn btn-lg btn-info p-2 d-inline text-white"
to={getUrl(IconBarConfig.dataProductModal.path)}

// onClick={(e) => setRoute(IconBarConfig.dataProductModal.path)}
Expand Down
114 changes: 64 additions & 50 deletions packages/tdb-dashboard/src/components/JSONModelBuilder.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,20 +5,24 @@ import 'codemirror/lib/codemirror.css'
import 'codemirror/theme/ayu-dark.css'
require('codemirror/mode/css/css')
require('codemirror/mode/javascript/javascript')
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 {MODEL_BUILDER_EDITOR_OPTIONS} from "./constants"
import {AiOutlineCloseCircle, AiOutlineEdit, AiOutlineSave} from "react-icons/ai"
import { BiUndo } from "react-icons/bi"
import {FaRegEdit} from 'react-icons/fa'
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"

export const JSONModelBuilder = ({tab,saveGraph,accessControlEditMode}) => {
export const JSONModelBuilder = ({tab,saveGraph,accessControlEditMode, setReportMessage}) => {

const {getSchemaGraph,mainGraphObj} = GraphContextObj();
const {dataProduct} = WOQLClientObj()
const [loading, setLoading] = useState(false)
Expand All @@ -28,6 +32,9 @@ export const JSONModelBuilder = ({tab,saveGraph,accessControlEditMode}) => {

const [jsonSchema, setJsonSchema]=useState(false)

const [editMode, setEditMode]=useState(false)
const [value, setValue]=useState(false)

let branch = "main"
let ref = ""

Expand All @@ -49,8 +56,7 @@ export const JSONModelBuilder = ({tab,saveGraph,accessControlEditMode}) => {
getJSONSchema()
}, [tab,dataProduct,mainGraphObj])

const [editMode, setEditMode]=useState(false)
const [value, setValue]=useState(false)



MODEL_BUILDER_EDITOR_OPTIONS.readOnly=!editMode
Expand All @@ -68,69 +74,77 @@ export const JSONModelBuilder = ({tab,saveGraph,accessControlEditMode}) => {
//save change in the server
await saveGraph(value, commitMsg)
setLoading(false)
setEditMode(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}/>)
else setReport(<Alerts message={err.toString()} type={TERMINUS_DANGER}/>)
}
}
}
const editStyle = editMode ? {className:"border rounded border-warning position-sticky"} : {}
const editMessage = editMode ? "Save schema or you will loose your changes" : ""

return <React.Fragment>
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>
<Card className={`border border-secondary mt-4`} {...editStyle}>
{loading && loading}

<div {...editStyle}>
<div className="d-flex align-items-center justify-content-between ml-4">
<label className="text-warning mt-4 pb-2">{editMessage}</label>
{accessControlEditMode && !editMode &&
<button type="button" className="btn-edit-json-model btn btn-sm btn-light text-dark border-0 col-md-1 mt-3" onClick={()=>{setEditMode(true)}}>
<FaRegEdit/> Edit Schema
<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}>
<BsSave className="small"/> {"Save"}
</button>
}
{editMode &&
<button type="button" className="btn btn-lg border-0 col-md-1 float-right" onClick={()=>{setEditMode(false)}}>
<AiOutlineCloseCircle className="float-right mr-2"/>
<button type="button"
title="Undo changes"
className="btn btn-sm bg-danger text-white mr-2" onClick={()=>{ handleUndo() }}>
<BiUndo className="h5"/> {"Undo"}
</button>
}
</div>

{editMode &&
<div role="group" className="btn-group w-100">
<div className="ml-4 flex-grow-1">
<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="col-md-1 btn btn-md bg-light text-dark mr-4" onClick={saveChange}>
<BsSave className="small"/> <label className="mt-1">Save</label>
</button>
</div>
}

<div className="h-100 m-4">
{report && <span className="w-100 m-4">{report}</span>}

}
{accessControlEditMode && !editMode &&
<button type="button" className="btn-edit-json-model btn btn-md btn-light text-dark float-right mr-2"
onClick={()=>{setEditMode(true)}}>
<FaRegEdit className="mb-1"/> Edit Schema
</button>
}
<CopyButton text={jsonSchema}
label={"Copy schema"}
label={""}
title={`Copy JSON schema`}
css={"btn btn-sm bg-light text-dark model-builder-copy-button"}/>
<CodeMirror
onBlur={(editor, data) => {
const editorValue =editor.doc.getValue()
onBlurHandler(editorValue)
}}
value={value}
options={MODEL_BUILDER_EDITOR_OPTIONS}
className="model-builder-code-mirror"
/>
{/*<div><pre>{schema}</pre></div>*/}
</div>
css={"btn btn-md bg-light text-dark float-right"}/>
</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()
onBlurHandler(editorValue)
}}
value={value}
options={MODEL_BUILDER_EDITOR_OPTIONS}
className="model-builder-code-mirror"
/>
{/*<div><pre>{schema}</pre></div>*/}
</div>
</React.Fragment>

</Card>
</>
}
8 changes: 5 additions & 3 deletions packages/tdb-dashboard/src/components/constants.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -439,14 +439,16 @@ export const EDITOR_READ = {
}

export const MODEL_BUILDER_EDITOR_OPTIONS = {
theme: "ayu-dark",
//theme: "ayu-dark",
theme: "material-darker",
height: "auto",
viewportMargin: Infinity,
mode: {
mode: "application/ld+json",
/*mode: {
name: "javascript",
json: true,
statementIndent: 2
},
},*/
lineNumbers: true,
lineWrapping: true,
indentWithTabs: false,
Expand Down
2 changes: 1 addition & 1 deletion packages/tdb-dashboard/src/pages/ModelBuilder.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -63,7 +63,7 @@ export const ModelBuilder = (props) =>{
{callServerLoading && <Loading message={`Fetching schema of ${dataProduct}...`}/>}

{!callServerLoading && dataProduct &&
<JSONModelBuilder accessControlEditMode={isEditMode} tab={tab} saveGraph={saveData} />
<JSONModelBuilder accessControlEditMode={isEditMode} tab={tab} saveGraph={saveData} setReportMessage={setReport}/>
}
</Tab>

Expand Down