Merge pull request #39 from nebula-contrib/fix_banner

fix: ui of banner, and lift studio 3.9.0

Author: wey-gu

Dockerfile

@@ -31,7 +31,7 @@ LABEL org.opencontainers.image.title="NebulaGraph" \
     com.docker.extension.detailed-description="NebulaGraph is a popular Open-Source, distributed Cloud Native Graph Database for trillion edges graph data volume." \
     com.docker.extension.publisher-url="https://github.com/vesoft-inc/nebula" \
     com.docker.extension.additional-urls='[{"title":"WebSite","url":"https://www.nebula-graph.io/"}, {"title":"GitHub","url":"https://github.com/vesoft-inc/nebula"}, {"title":"Slack","url":"http://community-chat.nebula-graph.io/"}, {"title":"Docker Extension Feedback","url":"https://github.com/nebula-contrib/nebulagraph-docker-ext/issues/new/choose"}]' \
-    com.docker.extension.changelog="Introduce NebulaGraph Jupyter" \
+    com.docker.extension.changelog="Studio lift to 3.9.0" \
     com.docker.desktop.extension.icon="https://user-images.githubusercontent.com/1651790/213339618-107d0e59-1b8b-4c89-bbae-5529aa4e2666.svg" \
     com.docker.extension.categories="database"
 

docker-compose.yaml

@@ -336,7 +336,7 @@ services:
     # profiles: ["studio"]
     labels:
       - "com.vesoft.scope=utils"
-    image: vesoft/nebula-graph-studio:v3.7.0
+    image: vesoft/nebula-graph-studio:v3.9.0
     environment:
       USER: root
     ports:

ui/src/App.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import Button from '@mui/material/Button';
 import { Insights, LibraryBooks, KeyboardArrowRight, AutoAwesome } from '@mui/icons-material';
 import { createDockerDesktopClient } from '@docker/extension-api-client';
@@ -18,63 +17,59 @@ export function App() {
     <>
 
       <AppBar position="relative" elevation={0}>
-      <Toolbar>
+      <Toolbar style={{ minHeight: '36px' }}>
         <Box display="flex" flexGrow={1} alignItems="center" flexWrap="wrap">
-          <img src="https://user-images.githubusercontent.com/1651790/213339618-107d0e59-1b8b-4c89-bbae-5529aa4e2666.svg" alt="NebulaGraph" height="35" />
+          <img src="https://user-images.githubusercontent.com/1651790/213339618-107d0e59-1b8b-4c89-bbae-5529aa4e2666.svg" alt="NebulaGraph" height="19" />
           <span style={{marginRight: 10}}></span>
           <Typography variant="h4" color={(theme) => theme.palette.text.primary} sx={{ my: 2, mr: 6 }}>
             <b>Nebula</b>Graph
           </Typography>
-          <Box>
+          <Box sx={{ height: '32px' }}>
             <Button
               variant="outlined"
               onClick={() =>
                 ddClient.host.openExternal('http://127.0.0.1:17001')
               }
-              endIcon={<Insights />}
+              endIcon={<Insights style={{ fontSize: 'small' }} />}
+              style={{ fontSize: '0.75rem', lineHeight: '1rem' }}
             >
               Studio
             </Button>
           </Box>
 
           <span style={{marginRight: 10}}></span>
-
-          <Box>
+          <Box sx={{ height: '32px' }}>
             <Button
               variant="outlined"
-              onClick={() =>
-                ddClient.host.openExternal('http://127.0.0.1:17005')
-              }
-              endIcon={<AutoAwesome />}
+              onClick={() => ddClient.host.openExternal('http://127.0.0.1:17005')}
+              endIcon={<AutoAwesome style={{ fontSize: 'small' }} />}
+              style={{ fontSize: '0.75rem', lineHeight: '1rem' }}
             >
               Gephi-Lite
             </Button>
           </Box>
 
           <span style={{marginRight: 10}}></span>
 
-          <Box>
+          <Box sx={{ height: '32px' }}>
             <Button
               variant="outlined"
-              onClick={() =>
-                ddClient.host.openExternal('http://127.0.0.1:28888?token=nebula')
-              }
-              endIcon={<LibraryBooks />}
+              onClick={() => ddClient.host.openExternal('http://127.0.0.1:28888?token=nebula')}
+              endIcon={<LibraryBooks style={{ fontSize: 'small' }} />}
+              style={{ fontSize: '0.75rem', lineHeight: '1rem' }}
             >
               Jupyter
             </Button>
           </Box>
 
-
           <span style={{marginRight: 10}}></span>
 
-          <Box>
+          <Box sx={{ height: '32px' }}>
             <Button
               variant="outlined"
-              onClick={() =>
-                ddClient.host.openExternal('http://127.0.0.1:8376')
-              }
-              endIcon={<KeyboardArrowRight />}
+              onClick={() => ddClient.host.openExternal('http://127.0.0.1:8376')}
+              endIcon={<KeyboardArrowRight style={{ fontSize: 'small' }} />}
+              style={{ fontSize: '0.75rem', lineHeight: '1rem' }}
             >
               Console
             </Button>
@@ -84,9 +79,7 @@ export function App() {
         <Box>
           <a
             href="#"
-            onClick={() =>
-              ddClient.host.openExternal('https://github.com/vesoft-inc/nebula')
-            }
+            onClick={() => ddClient.host.openExternal('https://github.com/vesoft-inc/nebula')}
           >
             <img src="https://shields.io/github/stars/vesoft-inc/nebula?style=social" alt=""/>
           </a>
@@ -102,7 +95,7 @@ export function App() {
     <Box sx={{ alignItems: 'left', flexDirection: 'column', height: 20, fontSize: 10, justifyContent: 'center'}}>
       <Typography variant="body2" color={(theme) => theme.palette.text.primary} sx={{ my: 2, mr: 6 }}>
       <span style={{marginRight: 10}}></span>
-        NebulaGraph for Docker Desktop Extension 0.4.18, NebulaGraph: v3.6.0, NebulaGraph Studio: v3.7.0
+        NebulaGraph for Docker Desktop Extension 0.4.19, NebulaGraph: v3.6.0, NebulaGraph Studio: v3.9.0
       </Typography>
     </Box>