diff --git a/README.md b/README.md index 747465d8..bfa8047f 100644 --- a/README.md +++ b/README.md @@ -1,21 +1,21 @@ -# EdgeDB UI +# Gel UI -This monorepo is the home of EdgeDB UI and all related UI components -that it shares with the EdgeDB website and cloud. +This monorepo is the home of Gel UI and all related UI components +that it shares with the Gel website and cloud. -If you are just looking to use EdgeDB UI: it already comes bundled with -the EdgeDB server, and opening it is as simple as running the command -`edgedb ui` from your project directory. +If you are just looking to use Gel UI: it already comes bundled with +the Gel server, and opening it is as simple as running the command +`gel ui` from your project directory. ## Contributing This repo is organised using yarn workspaces as follows: -- `/web`: This is the main workspace of EdgeDB UI that is bundled with the - EdgeDB server. Refer to <./web/readme.md> for instructions on how to build - and develop EdgeDB UI. +- `/web`: This is the main workspace of Gel UI that is bundled with the + Gel server. Refer to <./web/readme.md> for instructions on how to build + and develop Gel UI. -- `/shared`: This directory contains all the shared components used by EdgeDB +- `/shared`: This directory contains all the shared components used by Gel UI and across the website and cloud. Each subdirectory is it's own workspace; the most notable being `studio`, which contains the REPL, schema viewer and data viewer/editor components. diff --git a/shared/common/components/infoCards/index.tsx b/shared/common/components/infoCards/index.tsx index 13316c53..4fc485df 100644 --- a/shared/common/components/infoCards/index.tsx +++ b/shared/common/components/infoCards/index.tsx @@ -36,12 +36,12 @@ export function InfoCards({ priority: 0, card: ( } link="https://docs.edgedb.com" > Check out our docs for to learn everything you need to know about - EdgeDB, from helpful guides to full API reference docs. + Gel, from helpful guides to full API reference docs. ), }, @@ -56,7 +56,7 @@ export function InfoCards({ priority: 1, card: ( } link={data.latestUpdate.url} > @@ -75,11 +75,11 @@ export function InfoCards({ priority: 3, card: ( } link={`https://docs.edgedb.com/changelog/${data.latestEdgeDBVersion.major}_x`} > - This instance is ready to update to the latest version of EdgeDB.{" "} + This instance is ready to update to the latest version of Gel.{" "} Find out what's new in the changelog. ), diff --git a/shared/common/newui/logo.module.scss b/shared/common/newui/logo.module.scss new file mode 100644 index 00000000..9342e2fb --- /dev/null +++ b/shared/common/newui/logo.module.scss @@ -0,0 +1,25 @@ +@import "@edgedb/common/mixins.scss"; + +.cloudLogo { + @include isMobile { + width: 37px; + } +} +.gel { + fill: var(--Grey30); + @include darkTheme { + fill: var(--Grey65); + } +} +.cloud { + fill: var(--Grey65); + @include darkTheme { + fill: var(--Grey40); + } +} +.beta { + fill: #08b985; + @include darkTheme { + fill: #358b6c; + } +} diff --git a/shared/common/newui/logo.tsx b/shared/common/newui/logo.tsx index c3b37c0c..00d3d355 100644 --- a/shared/common/newui/logo.tsx +++ b/shared/common/newui/logo.tsx @@ -1,22 +1,23 @@ -export function EdgeDBCloudLogo({className}: {className?: string}) { +import styles from "./logo.module.scss"; + +export function CloudLogo({className}: {className?: string}) { return ( ); diff --git a/shared/common/ui/icons/logo.tsx b/shared/common/ui/icons/logo.tsx index eecf9534..7f221d34 100644 --- a/shared/common/ui/icons/logo.tsx +++ b/shared/common/ui/icons/logo.tsx @@ -1,24 +1,14 @@ export const LogoLocal = ({className}: {className?: string}) => ( - - - - - - - - + + ); diff --git a/shared/studio/tabs/auth/config.tsx b/shared/studio/tabs/auth/config.tsx index dd58ba55..cee74083 100644 --- a/shared/studio/tabs/auth/config.tsx +++ b/shared/studio/tabs/auth/config.tsx @@ -30,7 +30,7 @@ export const ConfigTab = observer(function ConfigTab() {
- Need help integrating EdgeDB Auth into your app? + Need help integrating Gel Auth into your app?
Check out the{" "} diff --git a/shared/studio/tabs/auth/providers.tsx b/shared/studio/tabs/auth/providers.tsx index 4b756dab..79824792 100644 --- a/shared/studio/tabs/auth/providers.tsx +++ b/shared/studio/tabs/auth/providers.tsx @@ -274,7 +274,7 @@ const DraftProviderConfigForm = observer(function DraftProviderConfigForm({ <> The full origin of the sign-in page including protocol and port of the application. If using the - built-in UI, this should be the origin of the EdgeDB + built-in UI, this should be the origin of the Gel server. } diff --git a/shared/studio/tabs/dashboard/index.tsx b/shared/studio/tabs/dashboard/index.tsx index 0b3cbf94..44dae19f 100644 --- a/shared/studio/tabs/dashboard/index.tsx +++ b/shared/studio/tabs/dashboard/index.tsx @@ -197,7 +197,7 @@ const FirstRunDashboard = observer(function FirstRunDashboard() {
-

First time using EdgeDB?

+

First time using Gel?

{exampleDBExists ? "Switch to the" : "Create an"} example{" "} {dbOrBranch} with our "movies" schema and data set, and play with @@ -209,8 +209,8 @@ const FirstRunDashboard = observer(function FirstRunDashboard() { instanceState.creatingExampleDB ? `Creating example ${dbOrBranch}...` : exampleDBExists - ? `Switch to example ${dbOrBranch}` - : `Create example ${dbOrBranch}` + ? `Switch to example ${dbOrBranch}` + : `Create example ${dbOrBranch}` } loading={instanceState.creatingExampleDB} disabled={instanceState.creatingExampleDB} diff --git a/shared/studio/tabs/repl/index.tsx b/shared/studio/tabs/repl/index.tsx index 25325c52..5e2fc9ef 100644 --- a/shared/studio/tabs/repl/index.tsx +++ b/shared/studio/tabs/repl/index.tsx @@ -159,7 +159,7 @@ const ReplList = observer(function ReplList({ const isMobile = useIsMobile(); const headerHeight = - (isMobile ? 320 : 330) + (replState._hasUnfetchedHistory ? 34 : 0); + (isMobile ? 360 : 275) + (replState._hasUnfetchedHistory ? 34 : 0); useEffect(() => { replState.scrollRef = ref.current; @@ -995,20 +995,21 @@ const QueryCodeBlock = observer(function QueryCodeBlock({ }); const headerASCII = ` - /$$ - | $$ - | $$ - /$$$$$$$$ /$$$$$$$ /$$$$$$ /$$$$$$$$ | $$ /$$$$$$$ /$$$$$$$ -| $$_____/| $$__ $$ /$$__ $$| $$_____/ | $$ | $$__ $$| $$__ $$ -| $$ | $$ \\ $$| $$ \\__/| $$ | $$ | $$ \\ $$| $$ \\ $$ -| $$$$$$ | $$ | $$| $$ /$$$$| $$$$$$ | $$ | $$ | $$| $$$$$$$ -| $$___/ | $$ | $$| $$|_ $$| $$___/ | $$ | $$ | $$| $$__ $$ -| $$ | $$ | $$| $$ \\ $$| $$ | $$ | $$ | $$| $$ \\ $$ -| $$$$$$$$| $$$$$$$/| $$$$$$/| $$$$$$$$ | $$ | $$$$$$$/| $$$$$$$/ -|________/|_______/ \\______/ |________/ | $$ |_______/ |_______/ - | $$ - | $$ - |__/ + /$$$ + /$$$$$ + | $$$$$ + /$$$$$$$$$ /$$$$$$$$ | $$$$$ + /$$$$$$$$$$$ /$$$$$$$$$$$| $$$$$ + /$$$$$$$$$$$$$ /$$$$$$$$$$$$| $$$$$ +| $$$$$$$$$$$$$| $$$$$$$$$$/ | $$$$$ +| $$$$$$$$$$$$$| $$$$$$$$/ | $$$$$ +| $$$$$$$$$$$ | $$$$$$$$$ | $$$$$ + \\ $$$$$$$ \\ $$$$$$ | $$$ + / $$$$$$$$$ \\______/ \\___/ + | $$$$$$$$$ + | $$$$$$$$$ + \\ $$$$$$$ + \\_______/ `.replace(/\$+/g, "$&"); const ReplHeader = observer(function ReplHeader() { @@ -1031,10 +1032,11 @@ const ReplHeader = observer(function ReplHeader() { dangerouslySetInnerHTML={{__html: headerASCII}} />

- Welcome to EdgeDB repl, type{" "} + Welcome to Gel repl, type{" "} replState.runQuery("\\help")}>\help for commands list
+
Shortcuts: {ctrlKey}+Enter to run query,{" "} {ctrlKey}+ArrowUp/Down to navigate history,{" "} replState.runQuery("\\clear")}>\clear to diff --git a/shared/studio/tabs/repl/repl.module.scss b/shared/studio/tabs/repl/repl.module.scss index 552bee5a..f0a95b39 100644 --- a/shared/studio/tabs/repl/repl.module.scss +++ b/shared/studio/tabs/repl/repl.module.scss @@ -65,11 +65,12 @@ .replHeader { padding: 0 32px; + padding-bottom: 16px; .headerAscii { white-space: pre; font-size: 14px; - line-height: 16px; + line-height: 15px; color: #cc960a; span { @@ -78,14 +79,16 @@ } .headerMsg { - margin-top: 32px; - line-height: 26px; - color: var(--grey60); + margin-top: 15px * -3; + margin-left: 16ch; + padding-bottom: 16px; + line-height: 20px; + color: var(--tertiary_text_color); span { text-decoration: underline; cursor: pointer; - color: var(--baseTextLightTheme); + color: var(--main_text_color); } @include darkTheme { @@ -95,31 +98,20 @@ color: var(--grey75); } } - - @include breakpoint(mobile) { - margin-top: 24px; - color: var(--baseTextLightTheme); - - span { - color: var(--grey50); - } - - @include darkTheme { - color: var(--grey60); - - span { - color: var(--baseTextDarkTheme); - } - } - } } @include breakpoint(mobile) { - padding: 24px; + padding: 0 16px; .headerAscii { - font-size: 8px; - line-height: 9px; + font-size: 12px; + line-height: 13px; + } + + .headerMsg { + margin-left: 8px; + margin-top: 16px; + line-height: 20px; } } } diff --git a/web/README.md b/web/README.md index 78962daa..cb457633 100644 --- a/web/README.md +++ b/web/README.md @@ -1,7 +1,7 @@ -# EdgeDB UI web app +# Gel UI web app -Note: If you are just looking to use EdgeDB UI, then you don't need to do any of -these steps, just run the `edgedb ui` command from your project directory. +Note: If you are just looking to use Gel UI, then you don't need to do any of +these steps, just run the `gel ui` command from your project directory. ## Development @@ -16,7 +16,7 @@ yarn dev The app is served at `http://localhost:3002/ui`. -The EdgeDB server needs to be run separately with `cors_allow_origins` +The Gel server needs to be run separately with `cors_allow_origins` configured to allow the UI's `localhost:3002` origin: ```sh @@ -27,11 +27,11 @@ edb cli configure set cors_allow_origins '*' ``` -To customize the EdgeDB server address (if it's not running at the +To customize the Gel server address (if it's not running at the default of `localhost:5656`): ```sh -env VITE_EDGEDB_SERVER_URL="192.168.0.123:5656" yarn dev +env VITE_GEL_SERVER_URL="192.168.0.123:5656" yarn dev ``` ## UI Tests @@ -48,7 +48,7 @@ To run the UI tests: yarn test ``` -If there is already an instance of an EdgeDB dev server running on port 5656, +If there is already an instance of an Gel dev server running on port 5656, or the UI dev server running on port 3000, then they will be used by the tests. If not (or the tests are running in CI), the test runner will start temporary instances of them for the duration of the tests. diff --git a/web/index.html b/web/index.html index a184132f..e89a678e 100644 --- a/web/index.html +++ b/web/index.html @@ -4,8 +4,8 @@ - - EdgeDB Local + + Gel Local
diff --git a/web/public/manifest.json b/web/public/manifest.json index 8281868e..5764dcb0 100644 --- a/web/public/manifest.json +++ b/web/public/manifest.json @@ -1,6 +1,6 @@ { - "short_name": "EdgeDB Studio", - "name": "EdgeDB Studio", + "short_name": "Gel UI", + "name": "Gel UI", "icons": [ { "src": "favicon.ico", diff --git a/web/src/components/header/header.module.scss b/web/src/components/header/header.module.scss index 20e11986..97bbe202 100644 --- a/web/src/components/header/header.module.scss +++ b/web/src/components/header/header.module.scss @@ -2,10 +2,10 @@ .header { flex-shrink: 0; - height: 56px; + height: 54px; display: flex; align-items: center; - padding: 0 16px 0 19px; + padding: 0 16px 0 22px; .themeSwitcher { margin-left: auto; @@ -28,16 +28,17 @@ } .logo { - fill: #4f4f4f; + fill: var(--Grey30); - g { - fill: #848484; + path:nth-child(2) { + fill: var(--Grey65); } @include darkTheme { - fill: #f7f7f7; - g { - fill: #c1c1c1; + fill: var(--Grey60); + + path:nth-child(2) { + fill: var(--Grey40); } } } diff --git a/web/src/components/main/index.tsx b/web/src/components/main/index.tsx index d9edd634..b560b9d6 100644 --- a/web/src/components/main/index.tsx +++ b/web/src/components/main/index.tsx @@ -23,8 +23,8 @@ const Main = observer(function Main() { document.title = instanceName ? `${instanceName}${ match ? ` / ${match.params.databaseName}` : "" - } | EdgeDB Local` - : "EdgeDB Local"; + } | Gel Local` + : "Gel Local"; }, [instanceName, match]); return ( diff --git a/web/src/state/models/app.ts b/web/src/state/models/app.ts index 93640e32..58034dc5 100644 --- a/web/src/state/models/app.ts +++ b/web/src/state/models/app.ts @@ -3,8 +3,8 @@ import {createContext, Model, model, prop} from "mobx-keystone"; import {InstanceState} from "@edgedb/studio/state/instance"; export const serverUrl = import.meta.env.DEV - ? import.meta.env.VITE_EDGEDB_SERVER_URL - ? `http://${import.meta.env.VITE_EDGEDB_SERVER_URL}` + ? import.meta.env.VITE_GEL_SERVER_URL + ? `http://${import.meta.env.VITE_GEL_SERVER_URL}` : "http://localhost:5656" : window.location.origin; diff --git a/web/tests/_globalSetup.ts b/web/tests/_globalSetup.ts index 7731d15e..cb816b5a 100644 --- a/web/tests/_globalSetup.ts +++ b/web/tests/_globalSetup.ts @@ -15,7 +15,7 @@ const sleep = (ms: number) => }, ms) ); -function checkEdgeDBServerAlive() { +function checkGelServerAlive() { return new Promise((resolve) => { const req = http.get( "http://localhost:5656/server/status/alive", @@ -87,16 +87,16 @@ async function checkConfigApplied() { export default async function globalSetup() { console.log("\n"); - let edbServerProc: ChildProcess | null = null; - const edbServerAlive = new Event(); + let gelServerProc: ChildProcess | null = null; + const gelServerAlive = new Event(); let usingExistingDevServer = false; - if (await checkEdgeDBServerAlive()) { - console.log("Re-using EdgeDB server already running on 5656"); + if (await checkGelServerAlive()) { + console.log("Re-using Gel server already running on 5656"); usingExistingDevServer = true; - edbServerAlive.set(); + gelServerAlive.set(); } else { - console.log("Starting EdgeDB server..."); + console.log("Starting Gel server..."); const srvcmd = process.env.EDGEDB_SERVER_BIN ?? "edgedb-server"; @@ -109,18 +109,18 @@ export default async function globalSetup() { ] : ["--devmode"]; - edbServerProc = spawn(srvcmd, args) as ChildProcess; - edbServerProc.once("close", (code) => { - if (!edbServerAlive.done) { - edbServerAlive.setError( - `EdgeDB server failed to start with exit code: ${code}` + gelServerProc = spawn(srvcmd, args) as ChildProcess; + gelServerProc.once("close", (code) => { + if (!gelServerAlive.done) { + gelServerAlive.setError( + `Gel server failed to start with exit code: ${code}` ); } }); waitUntilAlive( - checkEdgeDBServerAlive, - "EdgeDB server startup timed out", - edbServerAlive + checkGelServerAlive, + "Gel server startup timed out", + gelServerAlive ); } @@ -153,8 +153,8 @@ export default async function globalSetup() { uiServerAlive.wait().then(() => { if (uiServerProc) console.log("...UI server running"); }), - edbServerAlive.wait().then(() => { - if (edbServerProc) console.log("...EdgeDB server running"); + gelServerAlive.wait().then(() => { + if (gelServerProc) console.log("...Gel server running"); }), ]); @@ -192,7 +192,7 @@ export default async function globalSetup() { console.log("... Done"); globalThis.uiServerProc = uiServerProc; - globalThis.edgedbServerProc = edbServerProc; + globalThis.gelServerProc = gelServerProc; console.log("\n"); } diff --git a/web/tests/_globalTeardown.ts b/web/tests/_globalTeardown.ts index f31220b2..9caf2847 100644 --- a/web/tests/_globalTeardown.ts +++ b/web/tests/_globalTeardown.ts @@ -23,13 +23,13 @@ export default async function globalTeardown() { ); } - const edbServerProc: ChildProcess = globalThis.edgedbServerProc; + const gelServerProc: ChildProcess = globalThis.gelServerProc; - if (edbServerProc) { - console.log("Closing EdgeDB server..."); + if (gelServerProc) { + console.log("Closing Gel server..."); waits.push( - killProcess(edbServerProc).then(() => - console.log("...EdgeDB server closed") + killProcess(gelServerProc).then(() => + console.log("...Gel server closed") ) ); }