diff --git a/src/assets/styles/override.scss b/src/assets/styles/override.scss index 5a13a74fd..fd99a80bc 100644 --- a/src/assets/styles/override.scss +++ b/src/assets/styles/override.scss @@ -1,5 +1,5 @@ :root { - --surrealist-divider-size: 6px; + --surrealist-divider-size: 1rem; --surrealist-gradient: linear-gradient(135deg, var(--mantine-color-surreal-filled) 0%, #9600FF 100%); } diff --git a/src/components/CodePreview/index.tsx b/src/components/CodePreview/index.tsx index 49ada77fb..5a56b75a6 100644 --- a/src/components/CodePreview/index.tsx +++ b/src/components/CodePreview/index.tsx @@ -98,7 +98,7 @@ export function CodePreview({ top={9} right={9} onClick={copy} - style={{ zIndex: 1 }} + className={classes.copy} aria-label="Copy code to clipboard" > diff --git a/src/components/CodePreview/style.module.scss b/src/components/CodePreview/style.module.scss index 1a3138700..04ed63482 100644 --- a/src/components/CodePreview/style.module.scss +++ b/src/components/CodePreview/style.module.scss @@ -6,4 +6,13 @@ user-select: text; -webkit-user-select: text; } +} + +.copy { + z-index: 1; + display: none; +} + +.root:hover .copy { + display: block; } \ No newline at end of file diff --git a/src/components/Introduction/index.tsx b/src/components/Introduction/index.tsx index a5bb43c85..0e42cdbbe 100644 --- a/src/components/Introduction/index.tsx +++ b/src/components/Introduction/index.tsx @@ -1,4 +1,4 @@ -import { Box, Center, Group, Paper, Stack, Text, Title } from "@mantine/core"; +import { Box, Center, Divider, Group, Paper, Stack, Text, Title } from "@mantine/core"; import type { PropsWithChildren, ReactNode } from "react"; import { useIsLight } from "~/hooks/theme"; import { CodePreview } from "../CodePreview"; @@ -12,6 +12,7 @@ export interface IntroductionProps { title?: string; code: string; language: string; + dedent?: boolean; }; } @@ -22,8 +23,6 @@ export function Introduction({ snippet, children, }: PropsWithChildren) { - const isLight = useIsLight(); - return (
{snippet?.code && ( - - - {snippet.title ?? "Example"} - - - + <> + + + + {snippet.title ?? "Example"} + + + + )}
diff --git a/src/components/Pane/style.module.scss b/src/components/Pane/style.module.scss index 5f89b4ed3..70c1dab54 100644 --- a/src/components/Pane/style.module.scss +++ b/src/components/Pane/style.module.scss @@ -20,5 +20,5 @@ } .dragger { - flex: 0 0 0.5rem; + flex: 0 0 var(--surrealist-divider-size); } \ No newline at end of file diff --git a/src/screens/surrealist/cloud-panel/style.module.scss b/src/screens/surrealist/cloud-panel/style.module.scss index e5b14b952..d7cb2452b 100644 --- a/src/screens/surrealist/cloud-panel/style.module.scss +++ b/src/screens/surrealist/cloud-panel/style.module.scss @@ -18,6 +18,10 @@ padding: var(--mantine-spacing-md); border-radius: var(--mantine-radius-sm); border: 1px solid var(--mantine-color-slate-6); + + @include light { + border-color: var(--mantine-color-slate-1); + } } } diff --git a/src/screens/surrealist/views/designer/DesignerView/index.tsx b/src/screens/surrealist/views/designer/DesignerView/index.tsx index 8c3246875..4809092d3 100644 --- a/src/screens/surrealist/views/designer/DesignerView/index.tsx +++ b/src/screens/surrealist/views/designer/DesignerView/index.tsx @@ -1,8 +1,11 @@ -import { Box } from "@mantine/core"; +import { Box, Button, Group } from "@mantine/core"; +import { Text } from "@mantine/core"; import { ReactFlowProvider } from "@xyflow/react"; import { memo, useEffect } from "react"; import { Panel, PanelGroup } from "react-resizable-panels"; +import { adapter } from "~/adapter"; import { Icon } from "~/components/Icon"; +import { Introduction } from "~/components/Introduction"; import { PanelDragger } from "~/components/Pane/dragger"; import { useConnection, useIsConnected } from "~/hooks/connection"; import { usePanelMinSize } from "~/hooks/panels"; @@ -12,7 +15,8 @@ import { useStable } from "~/hooks/stable"; import { useDesigner } from "~/providers/Designer"; import { TablesPane } from "~/screens/surrealist/components/TablesPane"; import { useConfigStore } from "~/stores/config"; -import { iconDesigner, iconEye } from "~/util/icons"; +import { useInterfaceStore } from "~/stores/interface"; +import { iconDesigner, iconEye, iconOpen, iconPlus } from "~/util/icons"; import { dispatchIntent } from "~/util/intents"; import { syncConnectionSchema } from "~/util/schema"; import { TableGraphPane } from "../TableGraphPane"; @@ -20,11 +24,12 @@ import { TableGraphPane } from "../TableGraphPane"; const TableGraphPaneLazy = memo(TableGraphPane); export function DesignerView() { + const { openTableCreator } = useInterfaceStore.getState(); const { updateCurrentConnection } = useConfigStore.getState(); const { design, stopDesign, active, isDesigning } = useDesigner(); const designerTableList = useConnection((c) => c?.designerTableList); - const isOnline = useIsConnected(); + const isConnected = useIsConnected(); const tables = useTables(); const buildContextMenu = useStable((table: string) => [ @@ -49,10 +54,10 @@ export function DesignerView() { }); useEffect(() => { - if (!isOnline) { + if (!isConnected) { stopDesign(); } - }, [isOnline, stopDesign]); + }, [isConnected, stopDesign]); useIntent("design-table", ({ table }) => { design(table); @@ -62,6 +67,7 @@ export function DesignerView() { syncConnectionSchema(); }); + const emptySchema = tables.length === 0; const [minSize, ref] = usePanelMinSize(275); return ( @@ -74,7 +80,7 @@ export function DesignerView() { direction="horizontal" style={{ opacity: minSize === 0 ? 0 : 1 }} > - {designerTableList && ( + {(designerTableList || emptySchema) && ( <> - - - + {tables.length > 0 ? ( + + + + ) : ( + + + The designer view allows you to visually design your database + schema without writing queries. + + + + + + + )} - // ); } diff --git a/src/screens/surrealist/views/explorer/ExplorerView/index.tsx b/src/screens/surrealist/views/explorer/ExplorerView/index.tsx index 239d9c9bd..74fd87b19 100644 --- a/src/screens/surrealist/views/explorer/ExplorerView/index.tsx +++ b/src/screens/surrealist/views/explorer/ExplorerView/index.tsx @@ -40,14 +40,14 @@ export function ExplorerView() { const { updateCurrentConnection } = useConfigStore.getState(); const { openTableCreator } = useInterfaceStore.getState(); const { design } = useDesigner(); + + const isConnected = useIsConnected(); const explorerTableList = useConnection((c) => c?.explorerTableList); const [activeTable, setActiveTable] = useState(); const [isCreating, isCreatingHandle] = useDisclosure(); const [creatorTable, setCreatorTable] = useState(); - const isConnected = useIsConnected(); - const openCreator = useStable((table?: string) => { setCreatorTable(table || activeTable); isCreatingHandle.open(); @@ -164,6 +164,7 @@ export function ExplorerView() { icon={iconExplorer} snippet={{ language: "surrealql", + title: "SurrealQL", code: ` -- Declare a new table DEFINE TABLE person; diff --git a/src/screens/surrealist/views/functions/FunctionsView/index.tsx b/src/screens/surrealist/views/functions/FunctionsView/index.tsx index 1ef3b0901..aa5fe315c 100644 --- a/src/screens/surrealist/views/functions/FunctionsView/index.tsx +++ b/src/screens/surrealist/views/functions/FunctionsView/index.tsx @@ -204,6 +204,7 @@ export function FunctionsView() { icon={iconFunction} snippet={{ language: "surrealql", + title: "SurrealQL", code: ` -- Define your functions with ease DEFINE FUNCTION fn::greet($name: string) { diff --git a/src/screens/surrealist/views/graphql/GraphqlView/index.tsx b/src/screens/surrealist/views/graphql/GraphqlView/index.tsx index 57b57b647..8ddf27363 100644 --- a/src/screens/surrealist/views/graphql/GraphqlView/index.tsx +++ b/src/screens/surrealist/views/graphql/GraphqlView/index.tsx @@ -1,8 +1,8 @@ import type { EditorView } from "@codemirror/view"; -import { ActionIcon, Button, Center, Group, Paper, Stack } from "@mantine/core"; +import { ActionIcon, Alert, Button, Center, Group, Paper, Stack } from "@mantine/core"; import { Text } from "@mantine/core"; import clsx from "clsx"; -import { memo, useState } from "react"; +import { memo, useMemo, useState } from "react"; import { Panel, PanelGroup } from "react-resizable-panels"; import { adapter } from "~/adapter"; import { Icon } from "~/components/Icon"; @@ -18,6 +18,8 @@ import { useIsLight } from "~/hooks/theme"; import { checkGraphqlSupport } from "~/screens/surrealist/connection/connection"; import { useConfigStore } from "~/stores/config"; import { useDatabaseStore } from "~/stores/database"; +import { createBaseAuthentication } from "~/util/defaults"; +import { connectionUri } from "~/util/helpers"; import { iconCursor, iconGraphql, iconOpen, iconWarning } from "~/util/icons"; import { QueryPane } from "../QueryPane"; import { ResultPane } from "../ResultPane"; @@ -42,13 +44,15 @@ export function GraphqlView() { const isConnected = useIsConnected(); const [schema, introspectSchema] = useGraphqlIntrospection(); - const [id, showVariables, protocol] = useConnection((c) => [ + const [id, showVariables, namespace, database, authentication] = useConnection((c) => [ c?.id ?? "", c?.graphqlShowVariables ?? false, - c?.authentication.protocol ?? "http", + c?.lastNamespace ?? "", + c?.lastDatabase ?? "", + c?.authentication ?? createBaseAuthentication(), ]); - const isAvailable = GQL_SUPPORTED.has(protocol); + const isAvailable = GQL_SUPPORTED.has(authentication.protocol); const isSandbox = id === "sandbox"; const runQuery = useStable(() => { @@ -69,6 +73,23 @@ export function GraphqlView() { const isValid = queryValid && variablesValid && isEnabled; + const snippet = useMemo( + () => ({ + language: "bash", + title: "Using cURL", + code: ` + # Execute a curl request + curl -X POST -u "root:root" \\ + -H "Surreal-NS: ${namespace}" \\ + -H "Surreal-DB: ${database}" \\ + -H "Accept: application/json" \\ + -d '{"query": "{ person(filter: {age: {age_gt: 18}}) { id name age } }"}' \\ + http://surrealdb.example.com/graphql + `, + }), + [namespace, database], + ); + useViewFocus( "graphql", () => { @@ -169,6 +190,7 @@ export function GraphqlView() { The GraphQL view provides a fully interactive environment for executing GraphQL @@ -188,7 +210,9 @@ export function GraphqlView() { color="slate" variant="light" rightSection={} - onClick={() => adapter.openUrl("https://surrealdb.com/docs/surrealist")} + onClick={() => + adapter.openUrl("https://surrealdb.com/docs/surrealdb/querying/graphql") + } > Learn more diff --git a/src/screens/surrealist/views/models/ModelsView/index.tsx b/src/screens/surrealist/views/models/ModelsView/index.tsx index 8c5f4cbf3..3ba48190a 100644 --- a/src/screens/surrealist/views/models/ModelsView/index.tsx +++ b/src/screens/surrealist/views/models/ModelsView/index.tsx @@ -115,7 +115,7 @@ export function ModelsView() { # Upload your model directly to SurrealDB SurMlFile.upload( path="./model.surml", - url="${connectionUri(authentication, "ml/import")}", + url="${isAvailable ? connectionUri(authentication, "ml/import") : "http://surrealdb.example.com/ml/import"}", chunk_size=36864, namespace="${namespace}", database="${database}", @@ -124,7 +124,7 @@ export function ModelsView() { ) `, }), - [authentication, namespace, database], + [authentication, namespace, database, isAvailable], ); useViewFocus("models", () => { @@ -162,7 +162,7 @@ export function ModelsView() { Upload your SurrealML models directly to SurrealDB and use the power of diff --git a/src/util/mantine.tsx b/src/util/mantine.tsx index 2d6ed3440..f73572c76 100644 --- a/src/util/mantine.tsx +++ b/src/util/mantine.tsx @@ -126,9 +126,9 @@ export const MANTINE_THEME = createTheme({ "#A19FAC", "#878495", "#575466", - "#242133", + "#272438", "#1D1A28", - "#15131D", + "#16141F", "#0E0C14", ], },