Skip to content

Commit 79f777f

Browse files
Francesca-BitFrancesca-Bit
committed
fix the look and feel
1 parent 0572f4d commit 79f777f

File tree

8 files changed

+65
-92
lines changed

8 files changed

+65
-92
lines changed

‎packages/tdb-dashboard/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -63,7 +63,7 @@
6363
"codemirror-graphql": "^2.0.2",
6464
"console-browserify": "^1.2.0",
6565
"date-fns": "^2.27.0",
66-
"graphiql": "^2.2.0",
66+
"graphiql": "^3.0.0",
6767
"graphql": "^15.8.0",
6868
"graphql-formatter": "^1.0.3",
6969
"graphql-react": "^20.0.0",

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

Lines changed: 44 additions & 70 deletions
Original file line numberDiff line numberDiff line change
@@ -145,7 +145,7 @@ div.SplitPane .horizontal {
145145

146146
.pro-sidebar-content {
147147
border-right: 1px solid #303030;
148-
background: #000000;
148+
background: #1a1919;
149149
}
150150
/* ---------- Split Pane resizing css ---------- */
151151

@@ -161,7 +161,7 @@ div.progress-bar-container {
161161
}
162162
/* ---------- progress bar css ---------- */
163163

164-
/* ---------- icon bar css ---------- */
164+
/* ---------- icon bar css ---------- */x
165165
.nav-bar-row {
166166
height: -webkit-fill-available;
167167
}
@@ -296,28 +296,6 @@ div.progress-bar-container {
296296
min-width: "33.333333%"
297297
}
298298

299-
/*.table {
300-
border: 0px solid transparent !important;
301-
table-layout: fixed;
302-
margin-left: auto;
303-
margin-right: auto;
304-
background-color: transparent!important;
305-
}
306-
307-
.table td, .table th {
308-
border-top: 0 !important;
309-
310-
word-break: break-all !important;
311-
}
312-
313-
.table thead th, .member-headers {
314-
color: #a3b6ca !important;
315-
}
316-
317-
.table > :not(:first-child) {
318-
border-top: 0 !important;
319-
}*/
320-
321299
.RRT__tab {
322300
background: transparent !important;
323301
border-style: solid;
@@ -1072,14 +1050,19 @@ pre.CodeMirror-line > span > span.cm-string {
10721050
max-width: 100%;
10731051
}
10741052

1053+
.mainGraphIql{
1054+
height : calc(100vh - 80px);
1055+
}
10751056

1076-
.table td{
1077-
white-space: nowrap;
1078-
overflow: hidden;
1079-
text-overflow: ellipsis;
1080-
max-width: 200px;
1057+
.mainGraphIqlCR{
1058+
height : calc(100vh - 150px);
1059+
}
1060+
1061+
.graphiql-container{
1062+
background-color: transparent !important;
10811063
}
10821064

1065+
/*
10831066
.graphiql-container .graphiql-chevron-icon{
10841067
color:white;
10851068
}
@@ -1107,14 +1090,6 @@ button.graphiql-tab-add>svg
11071090
height: 100%;
11081091
}
11091092
1110-
.mainGraphIql{
1111-
height : calc(100vh - 80px);
1112-
}
1113-
1114-
.mainGraphIqlCR{
1115-
height : calc(100vh - 150px);
1116-
}
1117-
11181093
.graphiql-session{
11191094
height : 100%;
11201095
}
@@ -1144,6 +1119,8 @@ button.graphiql-tab-add>svg
11441119
width: 100%;
11451120
}
11461121
1122+
/* ---- end ---*/
1123+
11471124
#json_type_field-warning-box svg {
11481125
height: 15px;
11491126
width: 15px;
@@ -1201,44 +1178,12 @@ button.graphiql-tab-add>svg
12011178
background-color: #adb5bd !important;
12021179
}
12031180

1204-
/*.MuiButton-contained {
1205-
background-color: #a9a7a5;
1206-
}
1207-
.MuiButton-containedPrimary {
1208-
color: #fff;
1209-
background-color: #3f51b5;
1210-
}
1211-
.MuiButton-containedSecondary {
1212-
color: #fff;
1213-
background-color: #f50057;
1214-
}
1215-
1216-
.group {
1217-
background: transparent !important;
1218-
border: 1px solid #dee2e6 !important;
1219-
}
1220-
1221-
.rule_group{
1222-
background-color: white;
1223-
}
1224-
1225-
.MuiButton-text{
1226-
color: rgb(0, 188, 140)!important;
1227-
margin-right: 20px;
1228-
}
1229-
.MuiInputBase-input{
1230-
min-height: 20px !important;
1231-
}*/
1232-
1233-
/*.qb-lite .group--drag-handler, .qb-lite .group--actions {
1234-
transition: opacity 0.2s;
1235-
}*/
12361181
.qb-lite .group--header:hover .group--header .group--drag-handler, .qb-lite .group--header:hover .group--header .group--actions,
12371182
.qb-lite .group--header:not(:hover) .group--drag-handler,
12381183
.qb-lite .group--header:not(:hover) .group--actions,
12391184
.qb-lite .rule_group:not(:hover) .group--drag-handler,
12401185
.qb-lite .rule_group:not(:hover) .group--actions {
1241-
opacity: 1;https://github.com/terminusdb/terminusdb-dashboard/blob/main/packages/tdb-dashboard/src/App.css
1186+
opacity: 1;
12421187
}
12431188

12441189
.accordion{
@@ -1449,4 +1394,33 @@ button.graphiql-tab-add>svg
14491394
height: "1.5rem"
14501395
}
14511396

1397+
/* table CSS */
1398+
.table td{
1399+
white-space: nowrap;
1400+
overflow: hidden;
1401+
text-overflow: ellipsis;
1402+
max-width: 200px ;
1403+
}
1404+
1405+
.table {
1406+
border: 0px solid transparent !important;
1407+
table-layout: fixed;
1408+
margin-left: auto;
1409+
margin-right: auto;
1410+
background-color: transparent!important;
1411+
}
1412+
1413+
.table td, .table th {
1414+
border-top: 0 !important;
1415+
word-break: break-all !important;
1416+
}
1417+
1418+
.table thead th, .member-headers {
1419+
color: #a3b6ca !important;
1420+
}
1421+
1422+
.table > :not(:first-child) {
1423+
border-top: 0 !important;
1424+
}
1425+
14521426

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

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React, { useEffect } from "react";
2-
import {Container , Card, Button, Col,Row} from "react-bootstrap"
2+
import {Container , Card, Button, Col,Row,Alert} from "react-bootstrap"
33
import Stack from "react-bootstrap/Stack"
44
import { useParams, NavLink} from "react-router-dom";
55
import { RiUserFollowFill } from "react-icons/ri"
@@ -8,6 +8,7 @@ import {SiHandlebarsdotjs} from "react-icons/si"
88
import { useOpenAI } from "../hooks/useOpenAI";
99
import { RxCheckbox } from "react-icons/rx"
1010
import {WOQLClientObj} from '../init-woql-client'
11+
import {FiAlertTriangle} from 'react-icons/fi'
1112

1213
const StepDetail = ({ stepNumber, stepComponent, icon}) => {
1314

@@ -62,6 +63,8 @@ export const DisplayNoIndexingAction = ({ helpDescription }) => {
6263
const connection_type = clientUser.connection_type==="LOCAL" ? "LOCAL" : "REMOTE"
6364

6465
return <div className="text-center justify-content-center">
66+
<Alert variant="primary bg-dark text-warning" className="mx-4 ml-4 mr-4"><span className="d-flex justify-content-center"><FiAlertTriangle size={24} className="mr-3"/><h5>
67+
Experimental Feature</h5></span></Alert>
6568
<h4 className="text-light fw-bold">Get started with Indexing Actions</h4>
6669
<h5 className="text-light fw-bold">{helpDescription}</h5>
6770
<Container className="my-5">

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

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,10 +23,13 @@ export function GraphqlEditor(props) {
2323
const client = woqlClient.copy()
2424
const url = client.connectionConfig.branchBase("graphql")
2525

26+
const authorization = woqlClient.localAuth().type === "jwt" ? 'Bearer '+ woqlClient.localAuth().key : 'Basic '+ btoa(`${woqlClient.localAuth().user}:${woqlClient.localAuth().key}`)
27+
28+
2629
const fetcher = createGraphiQLFetcher({
2730
url:url,
2831
headers: {
29-
authorization: 'Bearer '+ woqlClient.localAuth().key
32+
authorization: authorization
3033
}});
3134

3235
/*

‎packages/tdb-dashboard/src/index.html‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,6 @@
33
<head>
44
<title><%= htmlWebpackPlugin.options.title %></title>
55
<meta charset="UTF-8">
6-
<link href="/assets/graphiql.min.css" rel="stylesheet">
7-
86
<!-- <link type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" />
97
-->
108
<link rel="icon" type="image/png" href="https://assets.terminusdb.com/images/terminusx-color.png"/>
@@ -13,7 +11,7 @@
1311
<link href='/assets/leaflet.fullscreenv1.0.1.css' rel='stylesheet' />
1412
</style>
1513
</head>
16-
<body>
14+
<body class="graphiql-dark">
1715
<div id="root" class="h-100">
1816
</div>
1917
<style>

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

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,6 @@ import InputGroup from 'react-bootstrap/InputGroup';
1919

2020

2121
export function FreeTextSearch() {
22-
2322
const {resetSearch,hasOpenAIKEY,
2423
getSearchableCommit, searchableCommit,
2524
searchResult,
@@ -88,8 +87,11 @@ export function FreeTextSearch() {
8887

8988
let page = Math.ceil(start/5)
9089

91-
92-
return <Layout showLeftSideBar={true} mainClassName={"h-view mt-4"}>
90+
// <Alert variant="warning" className="mx-4 ml-4 mr-4"><h5>This is an experimental feature</h5></Alert>
91+
// <h3 className="text-warning text-upper text-center">Experimental Feature</h3>
92+
return <Layout showLeftSideBar={true} mainClassName={"mt-4"}>
93+
94+
9395
{commit && <div className="d-flex">
9496
<InputGroup className="mb-3">
9597
<Form.Control ref={search} style={{maxWidth:"500px"}} type="text" placeholder="Search" className="ml-auto"/>

‎packages/tdb-dashboard/src/pages/GraphIqlEditor.js‎

Lines changed: 5 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -6,21 +6,21 @@ import { GraphiQL } from "graphiql";
66
import { Layout } from "./Layout";
77
import {WOQLClientObj} from '../init-woql-client'
88
require( "graphiql/graphiql.min.css");
9-
require('codemirror/lib/codemirror.css');
10-
require('codemirror/theme/shadowfox.css');
9+
//require('codemirror/lib/codemirror.css');
10+
//require('codemirror/theme/shadowfox.css');
1111

1212
export function GraphIqlEditor({}) {
1313
const {woqlClient,currentChangeRequest} = WOQLClientObj()
1414
if(!woqlClient) return
1515
const client = woqlClient.copy()
1616
const url = client.connectionConfig.branchBase("graphql")
17-
const autorization = woqlClient.localAuth().type === "jwt" ? 'Bearer '+ woqlClient.localAuth().key : 'Basic '+ btoa(`${woqlClient.localAuth().user}:${woqlClient.localAuth().key}`)
17+
const authorization = woqlClient.localAuth().type === "jwt" ? 'Bearer '+ woqlClient.localAuth().key : 'Basic '+ btoa(`${woqlClient.localAuth().user}:${woqlClient.localAuth().key}`)
1818

1919
// TO BE REVIEW!!!!
2020
const fetcher = createGraphiQLFetcher({
2121
url:url,
2222
headers: {
23-
authorization: autorization
23+
authorization: authorization
2424
}
2525
});
2626

@@ -29,14 +29,7 @@ export function GraphIqlEditor({}) {
2929

3030
return (
3131
<Layout mainClassName={layoutClass} showLeftSideBar={false}>
32-
33-
<GraphiQL
34-
editorTheme="shadowfox"
35-
defaultQuery={'query{}'}
36-
fetcher={fetcher}
37-
/>
38-
39-
32+
<GraphiQL defaultQuery={'query{}'} fetcher={fetcher} />
4033
</Layout>
4134
);
4235
}

‎packages/tdb-dashboard/src/pages/IndexingActionMonitor.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@ export const IndexingActionMonitor=(props)=>{
3232

3333
return <Layout>
3434
<div className="content mr-3 ml-5">
35-
<div className="mt-5 mb-5 mr-5">
35+
<div className="mb-5">
3636
{!searchableCommit.length && <DisplayNoIndexingAction helpDescription={`You need to index your data before any index actions appear on this page`}/>}
3737
{searchableCommit.length>0 && <Card>
3838
<Card.Header>

0 commit comments

Comments
 (0)