Open ai UI (#256)

* review

* change color of button

* add package-lock

* open AI help message

* ui styling

* review dash

* add hasKey

* changes

* merge indexing

* ai changes ...

* progress ...

* review css

* add message

---------

Co-authored-by: Francesca-Bit <[email protected]>
Co-authored-by: Kitty Jose <[email protected]>

Author: Francesca-Bit

package-lock.json

@@ -296,17 +296,17 @@ div.progress-bar-container {
   min-width: "33.333333%"
 }
 
-.table {
+/*.table {
   border: 0px solid transparent !important;
   table-layout: fixed;
   margin-left: auto;
   margin-right: auto;
-  background-color: #303030;
+  background-color: transparent!important;
 }
 
 .table td, .table th {
   border-top: 0 !important;
-  /*word-wrap: break-word !important;*/
+
   word-break: break-all !important;
 }
 
@@ -316,7 +316,7 @@ div.progress-bar-container {
 
 .table > :not(:first-child) {
   border-top: 0 !important;
-}
+}*/
 
 .RRT__tab {
   background: transparent !important;
@@ -1093,6 +1093,20 @@ button.graphiql-tab-add>svg
   color:white;
 }
 
+
+.graphiql-query-editor{
+  width: 100%;
+  height: 100%;
+}
+.graphiql-editor{
+  width: 100%;
+  height: 100%;
+}
+.graphiql-query-editor-wrapper{
+  width: 100%;
+  height: 100%;
+}
+
 .mainGraphIql{
   height : calc(100vh - 80px);
 }
@@ -1106,21 +1120,22 @@ button.graphiql-tab-add>svg
 }
 
 .graphiql-container{
-  background-color: transparent;
+  background-color: transparent !important;
 }
 
 .graphiql-un-styled, .graphiql-toolbar-button{
   color:white !important;
 }
 
 .graphiql-container .graphiql-editors {
-  background-color: transparent;
+  background-color: transparent !important;
 }
 
 .graphiql-editor >.CodeMirror{
   height: 100%;
   position: absolute;
   width: 100%;
+  background-color: transparent !important;
 }
 
 .result-window >.CodeMirror{
@@ -1241,6 +1256,7 @@ button.graphiql-tab-add>svg
 }
 
 
+
 .table__columns__component > .form-check-label{
   margin-left: 10px;
 }
@@ -1427,15 +1443,10 @@ button.graphiql-tab-add>svg
   }
 }
 
-.graphiql-query-editor{
-  width: 100%;
-  height: 100%;
-}
-.graphiql-editor{
-  width: 100%;
-  height: 100%;
-}
-.graphiql-query-editor-wrapper{
-  width: 100%;
-  height: 100%;
+/** */
+.openai_checkbox .form-check-input {
+  width: "1.5rem";
+  height: "1.5rem"
 }
+
+

packages/tdb-dashboard/src/App.css

@@ -73,12 +73,8 @@ export function App (props){
                 </Routes>    
             </div>
 }
-
-function getRoutes(clientUser, isAdmin, woqlClient){
-    //const client = createApolloClient()
-
-    if(localSettings.connection_type==="LOCAL"){ 
-    return <React.Fragment>
+/*
+ <React.Fragment>
         <Route index element={<Home/>} />
             { clientUser.user === "admin" && <Route path="administrator" element={<UserManagement/>}/>}
             { clientUser.user !== "admin" && <Route path="administrator" element={<div><PageNotFound/></div >}/>}   
@@ -91,6 +87,52 @@ function getRoutes(clientUser, isAdmin, woqlClient){
                 </Route>
             </Route>             
             <Route path="*" element={<div><PageNotFound/></div >} />
+        </React.Fragment>*/
+
+function getRoutes(clientUser, isAdmin, woqlClient){
+    //const client = createApolloClient()
+
+    if(localSettings.connection_type==="LOCAL"){ 
+    return <React.Fragment>
+        <Route index element={<Home/>} />
+            { clientUser.user === "admin" && <Route path="administrator" element={<UserManagement/>}/>}
+            { clientUser.user !== "admin" && <Route path="administrator" element={<div><PageNotFound/></div >}/>}   
+            <Route path=":organization" >
+            <Route index element={<OrganizationHome/>}/>
+            {/*<Route path = {PATH.PROFILE} element = {<PrivateRoute component={Profile}/>} />  */}
+           {clientUser.user === "admin" &&  <Route path="administrator" element={<UserManagement/>}/>}
+           {clientUser.user !== "admin" &&  <Route path="administrator" element={<div><PageNotFound/></div >}/>}
+           
+            <Route path=":dataProduct"  >
+                <Route index element={<DataProductsHome/>}/>
+                <Route path={PATH.GRAPHIQL}  element={<GraphIqlEditor/>} />  
+
+                <Route path={PATH.OPENAI_CONF} element={<GraphqlHandlerbarsPage/>} />
+                <Route path={PATH.SEARCH} element={<FreeTextSearch/>} />
+                <Route path={PATH.ACTIONS}  element={<IndexingActionMonitor/>} />
+               
+
+                <Route path={PATH.CHANGE_REQUESTS} >
+                    <Route index  element={<ChangeRequestsPage/>} />    
+                    <Route path=":changeid" element={<ChangeDiff/>} /> 
+                </Route>
+                <Route path={PATH.DOCUMENT_EXPLORER} element={<DocumentTemplate/>}>
+                    <Route index element={<Documents/>} />
+                        <Route path=":type">                       
+                            {<Route index element={<DocumentsPageList/>} /> }
+                            <Route path={PATH.NEW_DOC} element={<DocumentNew/>}/> 
+
+                            <Route path=":docid" >
+                                <Route index element={<DocumentView/>} /> 
+                                <Route path={PATH.EDIT_DOC} element={<DocumentEdit/>} /> 
+                            </Route> 
+                    </Route>
+                </Route>
+                <Route path={PATH.PRODUCT_EXPLORER} element={<ProductsExplorer/>} />
+                <Route path={PATH.PRODUCT_MODELS} element={<ModelProductPage/>} />                  
+            </Route>
+        </Route>           
+            <Route path="*" element={<div><PageNotFound/></div >} />
         </React.Fragment>
     }
     return <React.Fragment>

packages/tdb-dashboard/src/App.js

@@ -119,4 +119,8 @@ span.bg-primary.note__badge {
 
 .bg-success {
     background-color: var(--color-pink) !important; 
+}
+
+thead>tr:first-child {
+    display: none;
 }

packages/tdb-dashboard/src/Colors.css

@@ -0,0 +1,40 @@
+.leaflet-control-fullscreen a {
+  background:#fff url(fullscreen.png) no-repeat 0 0;
+  background-size:26px 52px;
+  }
+  .leaflet-touch .leaflet-control-fullscreen a {
+    background-position: 2px 2px;
+    }
+  .leaflet-fullscreen-on .leaflet-control-fullscreen a {
+    background-position:0 -26px;
+    }
+  .leaflet-touch.leaflet-fullscreen-on .leaflet-control-fullscreen a {
+    background-position: 2px -24px;
+    }
+
+/* Do not combine these two rules; IE will break. */
+.leaflet-container:-webkit-full-screen {
+  width:100%!important;
+  height:100%!important;
+  }
+.leaflet-container.leaflet-fullscreen-on {
+  width:100%!important;
+  height:100%!important;
+  }
+
+.leaflet-pseudo-fullscreen {
+  position:fixed!important;
+  width:100%!important;
+  height:100%!important;
+  top:0!important;
+  left:0!important;
+  z-index:99999;
+  }
+
+@media
+  (-webkit-min-device-pixel-ratio:2),
+  (min-resolution:192dpi) {
+    .leaflet-control-fullscreen a {
+      background-image:url([email protected]);
+    }
+  }