Skip to content

Commit 33f7eef

Browse files
Francesca-BitFrancesca-Bit
authored
Merge pull request #40 from terminusdb/dashboard-review
add login/logout in local dashboard
2 parents 3860f93 + 80f49e7 commit 33f7eef

File tree

16 files changed

+136
-69
lines changed

16 files changed

+136
-69
lines changed

‎README.md‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,34 @@
11
# terminusdb-dashboard
22
Dashboard for TerminusDB
3+
How to use the terminusdb dashboard source code with your local terminusdb instance.
4+
5+
**Clone the repository**
6+
```sh
7+
git clone https://github.com/terminusdb/terminusdb-dashboard.git
8+
```
9+
10+
**Install all the dependency**
11+
```sh
12+
cd terminusdb-dashboard
13+
npm install
14+
```
15+
16+
**Build the dashboard**
17+
Rename ENV.local to .env
18+
```sh
19+
cd terminusdb-dashboard/packages/tdb-dashboard
20+
cp ENV.local .env
21+
22+
npm run build
23+
```
24+
You can find the builded version into terminusdb-dashboard/packages/tdb-dashboard/dist
25+
26+
27+
28+
29+
30+
31+
32+
33+
34+

‎packages/tdb-dashboard/ENV.local‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
TERMINUSDB_SERVER=http://127.0.0.1:6363/
2+
CONNECTION_TYPE=LOCAL
3+
FEEDBACK_URL=https://cloud-dev.terminusdb.com/
4+
BASE_URL=dashboard

‎packages/tdb-dashboard/localSettings.js‎

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,17 @@
11
const server = localStorage.getItem("terminusdb-server-override") || process.env.TERMINUSDB_SERVER
22

3-
let key= localStorage.getItem("terminusdb-key-override") || process.env.TERMINUSDB_KEY
3+
//there is no default key
4+
//let key= localStorage.getItem("terminusdb-key-override") || process.env.TERMINUSDB_KEY
45

5-
const userName= localStorage.getItem("terminusdb-user-override") || process.env.TERMINUSDB_USER
6+
//const userName= localStorage.getItem("terminusdb-user-override") || process.env.TERMINUSDB_USER
67

78
const connection_type = process.env.CONNECTION_TYPE
89

910

10-
export const localSettings = {server : server,
11-
key : key,
12-
user: userName,
11+
export const localSettings = {
12+
server : server,
13+
//key : key,
14+
//user: userName,
1315
connection_type :connection_type
1416
}
1517

‎packages/tdb-dashboard/src/App.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@ export function App (props){
3434
}
3535

3636
if(connectionError) {
37-
return <ServerError>{connectionError}</ServerError>
37+
return <ServerError message={connectionError}/>
3838
}
3939

4040
if(loading || loadingServer) {

‎packages/tdb-dashboard/src/clientUtils.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ export function createClientUser(useAuth0,params){
1414
clientUser.user = clientUser.agentName
1515
clientUser.serverType = "TerminusX"
1616
}catch(err){
17-
const lastuser = localStorage.getItem("User") || params.user
17+
const lastuser = localStorage.getItem("Terminusdb-USER") //|| params.user
1818
clientUser = {email: lastuser }
1919
clientUser.user = lastuser
2020
clientUser.serverType = "TerminusDB"

‎packages/tdb-dashboard/src/components/ChangeUser.js‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,8 @@ import {Button} from "react-bootstrap"
33
import {RiUser3Fill} from "react-icons/ri"
44
import { LoginModal } from "./LoginModal";
55

6-
export const ChangeUser = ({css, label}) => {
7-
const [showModal, setShowModal] = useState(false)
6+
export const ChangeUser = ({css, label, showModalDefault, isClosable=true}) => {
7+
const [showModal, setShowModal] = useState(showModalDefault || false)
88

99
function handleNew (evt) {
1010
setShowModal(true)
@@ -15,9 +15,9 @@ export const ChangeUser = ({css, label}) => {
1515
const labelStr = label || "Change User"
1616

1717
return <React.Fragment>
18-
<Button id="new_data_product" variant="info" className={`mr-1 ml-1 pt-2 pb-2 pr-4 pl-4 btn ${extracss}`} title="Create New Data Product" onClick={handleNew}>
18+
{!isClosable && <Button id="new_data_product" variant="info" className={`mr-1 ml-1 pt-2 pb-2 pr-4 pl-4 btn ${extracss}`} title="Create New Data Product" onClick={handleNew}>
1919
<RiUser3Fill className="me-2"/>{labelStr}
20-
</Button>
21-
<LoginModal setShowModal={setShowModal} showModal={showModal}/>
22-
</React.Fragment>
20+
</Button>}
21+
<LoginModal setShowModal={setShowModal} showModal={showModal} isClosable/>
22+
</React.Fragment>
2323
}

‎packages/tdb-dashboard/src/components/LoginModal.js‎

Lines changed: 41 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,63 +1,79 @@
1-
import React, {useRef} from "react"
1+
import React, {useRef,useState} from "react"
22
import {Modal, Button, Form} from "react-bootstrap"
3+
import { WOQLClient } from "@terminusdb/terminusdb-client";
4+
import {localSettings} from "../../localSettings"
5+
import {formatErrorMessage } from '../hooks/hookUtils'
6+
import { Alert } from "react-bootstrap";
37

4-
export const LoginModal = ({showModal, setShowModal }) => {
8+
export const LoginModal = ({showModal, setShowModal, isCloseble }) => {
9+
const [errorMessage,setErrorMessage] = useState(false)
510
const nameRef = useRef(null);
611
const passwordRef = useRef(null);
7-
const orgRef = useRef(null);
12+
// const orgRef = useRef(null);
813
// to be review
914
const loading = false
10-
const handleClose = () => setShowModal(false);
15+
const handleClose = () => {
16+
if(setShowModal)setShowModal(false);
17+
}
1118

1219
const changeLoggeduser = async () => {
1320
const name = nameRef.current.value
1421
const password = passwordRef.current.value
15-
const organization = orgRef.current.value
22+
//const organization = orgRef.current.value
1623
if(!name || name === "" || !password || password === "") {
1724
setError("Team name and password are mandatory")
1825
return
1926
}else{
20-
localStorage.setItem("User",name)
21-
localStorage.setItem("Key",password)
22-
localStorage.setItem("Org",organization)
23-
// to be review using routing
24-
const base = process.env.BASE_URL ? `/${process.env.BASE_URL}` : ""
25-
window.location.replace(`${base}/${organization}`)
27+
const client = new WOQLClient(localSettings.server,{user:name,key:password})
28+
client.info().then(response=>{
29+
if(response["api:info"] && response["api:info"]['authority'] === "anonymous"){
30+
setErrorMessage("Incorrect authentication information, please enter your username and password again")
31+
}else{
32+
localStorage.setItem("Terminusdb-USER",name)
33+
localStorage.setItem("Terminusdb-KEY",password)
34+
//localStorage.setItem("Org",organization)
35+
// to be review using routing
36+
const base = process.env.BASE_URL ? `/${process.env.BASE_URL}` : ""
37+
window.location.replace(`${base}`)
38+
}
39+
}).catch(err=>{
40+
const message = formatErrorMessage(err)
41+
setErrorMessage(message)
42+
})
43+
44+
2645
}
2746
}
2847

48+
const onHide = isCloseble ? {onHide:handleClose} : {}
49+
2950

3051
//<Loading message={`Deleting Data Product ${dataProductDetails.label} ...`} type={PROGRESS_BAR_COMPONENT}/>}
31-
return <Modal size="lg" className="modal-dialog-right" show={showModal} onHide={handleClose}>
52+
return <Modal size="lg" className="modal-dialog-right" show={showModal} {...onHide}>
3253
<Modal.Header>
33-
<Modal.Title className="h6">Login</Modal.Title>
34-
<Button variant="close" aria-label="Close" onClick={handleClose} />
54+
<Modal.Title className="h6">Login to TerminusDB</Modal.Title>
55+
{isCloseble && <Button variant="close" aria-label="Close" onClick={handleClose} />}
3556
</Modal.Header>
3657
<Modal.Body className="p-5">
37-
{/*errorMessage &&
38-
<Alert variant="danger" onClose={() => setError(false)} dismissible>{errorMessage}</Alert>*/}
58+
{errorMessage &&
59+
<Alert variant="danger" onClose={() => setErrorMessage(false)} dismissible>{errorMessage}</Alert>}
3960
<Form>
4061
<Form.Group className="mb-3">
41-
<Form.Control required
62+
<Form.Control required
63+
onBlur={()=>setErrorMessage(false)}
4264
ref={nameRef}
4365
id="add_element_name"
4466
type="text"
4567
placeholder={`Please type the user name`} />
4668
</Form.Group>
4769
<Form.Group className="mb-3">
4870
<Form.Control required
71+
onBlur={()=>setErrorMessage(false)}
4972
ref={passwordRef}
5073
id="add_element_password"
5174
type="password"
5275
placeholder={`Please type the user password`} />
5376
</Form.Group>
54-
<Form.Group className="mb-3">
55-
<Form.Control required
56-
ref={orgRef}
57-
id="add_element_organization"
58-
type="text"
59-
placeholder={`Please type the user organization`} />
60-
</Form.Group>
6177
</Form>
6278
</Modal.Body>
6379
<Modal.Footer>
@@ -66,7 +82,7 @@ export const LoginModal = ({showModal, setShowModal }) => {
6682
id ="add_element_button"
6783
variant="info"
6884
title={`Login With a different user`}
69-
onClick={changeLoggeduser}>{loading ? 'Loading ...' : "Connect with the User"}
85+
onClick={changeLoggeduser}>{loading ? 'Loading ...' : "Login"}
7086
</Button>
7187
</Modal.Footer>
7288
</Modal>

‎packages/tdb-dashboard/src/components/NewTeamModal.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -22,8 +22,8 @@ export const NewTeamModal = ({show, setShow}) => {
2222
createNewTeam().then(done=>{
2323
if(done === true){
2424
setTeamCreated(true)
25-
const basename = process.env.BASE_URL
26-
window.location.replace(`${window.location.origin}/${basename}/${teamName}`)
25+
const base = process.env.BASE_URL ? `/${process.env.BASE_URL}` : ""
26+
window.location.replace(`${window.location.origin}${base}/${teamName}`)
2727
}
2828
})
2929
}

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -96,7 +96,7 @@ export const QueryPane = ({queryObj}) => {
9696
<div className="query-pane-pallet mb-3 mt-3" >
9797
<Row className="w-100">
9898
<Col md={12}>
99-
{queryError && <Alert variant="danger" onClose={() => setShowAlert(false)} dismissible>{queryError}</Alert>}
99+
{queryError && <Alert className = "text-break" variant="danger" onClose={() => setShowAlert(false)} dismissible>{queryError}</Alert>}
100100
</Col>
101101
{/*<Col md={10}>
102102
<h1 className="h5 ml-3">

‎packages/tdb-dashboard/src/components/ServerError.js‎

Lines changed: 21 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React from "react"
2-
import {Col} from "react-bootstrap"
2+
import {Col,Button} from "react-bootstrap"
33
import {NoDataProductSelectedStyle} from "./constants"
44
import {WOQLClientObj} from '../init-woql-client'
55
import { ChangeUser } from "./ChangeUser"
@@ -8,25 +8,34 @@ export const ServerError = (props) => {
88
const {clientUser } = WOQLClientObj()
99
const serverType = clientUser ? clientUser.serverType : "TerminusX"
1010

11+
const gotoMainPage= ()=>{
12+
const base = process.env.BASE_URL ? `/${process.env.BASE_URL}` : "/"
13+
window.location.replace(`${base}`)
14+
}
15+
16+
let returnToMainPage = false
17+
if(props.message.startsWith("There is no organization with the name")){
18+
returnToMainPage=true
19+
}
20+
1121
return <div style={NoDataProductSelectedStyle}>
1222
<Col xs={12} className="text-center d-block align-items-center justify-content-center">
1323
<div className="card card-fil m-5 p-5">
14-
<h4 className="text-muted mt-5 mb-3">
15-
<p>Connection Server Error</p>
16-
<p>{props.children}</p>
17-
<a href="https://discuss.terminusdb.com/" targert="_blank">
18-
{`Please contact the ${serverType} Team`}
19-
</a>
24+
<h4 className="text-white mt-5 mb-3">
25+
<p>{props.message}</p>
26+
{<Button id="go_to_team_list" variant="info" className={`mr-1 ml-1 pt-2 pb-2 pr-4 pl-4 btn `} title="Go to the team list" onClick={gotoMainPage}>
27+
Go to Teams
28+
</Button>}
29+
{clientUser.connection_type !=="LOCAL" &&
30+
<a href="https://discuss.terminusdb.com/" targert="_blank">
31+
{`Please contact the ${serverType} Team`}
32+
</a>
33+
}
2034
</h4>
2135
{clientUser && clientUser.logout &&
2236
<button title="Create New Data Product" type="button" onClick={()=>{ clientUser.logout()}}
2337
className="mr-auto ml-auto pt-2 pb-2 pr-4 pl-4 btn btn-sm btn btn-info">Logout</button>
2438
}
25-
{clientUser && clientUser.connection_type ==="LOCAL" &&
26-
<div>
27-
<ChangeUser label="Login to TerminusDB"/>
28-
</div>
29-
}
3039
</div>
3140
</Col>
3241
</div>

0 commit comments

Comments
 (0)