From 91d69fb801aec50cdfaceaad35dc0be3b9df3b91 Mon Sep 17 00:00:00 2001 From: Joshen Lim Date: Fri, 23 Sep 2022 15:40:35 +0800 Subject: [PATCH] Update GetStartedPanel --- .../Home/NewProjectPanel/APIKeys.tsx | 20 ++ .../Home/NewProjectPanel/GetStartedHero.tsx | 172 ++++++++++++ .../Home/NewProjectPanel/GetStartedPanel.tsx | 127 --------- .../Home/NewProjectPanel/NewProjectPanel.tsx | 255 ++++++++++++++++-- .../NavigationBar/NavigationBar.utils.tsx | 2 - 5 files changed, 428 insertions(+), 148 deletions(-) create mode 100644 studio/components/interfaces/Home/NewProjectPanel/APIKeys.tsx create mode 100644 studio/components/interfaces/Home/NewProjectPanel/GetStartedHero.tsx delete mode 100644 studio/components/interfaces/Home/NewProjectPanel/GetStartedPanel.tsx diff --git a/studio/components/interfaces/Home/NewProjectPanel/APIKeys.tsx b/studio/components/interfaces/Home/NewProjectPanel/APIKeys.tsx new file mode 100644 index 00000000000..be15452cdae --- /dev/null +++ b/studio/components/interfaces/Home/NewProjectPanel/APIKeys.tsx @@ -0,0 +1,20 @@ +import Panel from 'components/ui/Panel' + +const APIKeys = () => { + return ( + +
Project API
+

+ Your API is secured behind an API gateway which requires an API Key for every request. +
+ You can use the keys below to use Supabase client libraries. +

+ + } + > + ) +} + +export default APIKeys diff --git a/studio/components/interfaces/Home/NewProjectPanel/GetStartedHero.tsx b/studio/components/interfaces/Home/NewProjectPanel/GetStartedHero.tsx new file mode 100644 index 00000000000..4ff1c2bf385 --- /dev/null +++ b/studio/components/interfaces/Home/NewProjectPanel/GetStartedHero.tsx @@ -0,0 +1,172 @@ +const GetStartedHero = () => { + return ( +
+
+
+
+ 1 +

+ create table countries {`(`} +

+
+
+ 2 +

+ id bigint generated by default +

+
+
+ 3 +

+ name text +

+
+
+ 4 +

+ iso2 text not null +

+
+
+ 5 +

+ iso3 text +

+
+
+ 6 +

+ local_name text +

+
+
+ 7 +

+ continent continents +

+
+
+ 8 +

{`);`}

+
+
+
+
+
+
+
+
+

id

+
+
+

name

+
+
+

iso2

+
+
+
+
+
+
+
+

1

+
+
+

Angola

+
+
+

AO

+
+
+
+
+
+
+
+

2

+
+
+

Timor-Leste

+
+
+

TL

+
+
+
+
+
+
+
+

3

+
+
+

Serbia

+
+
+

RS

+
+
+
+
+
+
+
+

4

+
+
+

Bahamas

+
+
+

BS

+
+
+
+
+
+
+
+

5

+
+
+

Chile

+
+
+

CL

+
+
+
+
+
+
+
+

6

+
+
+

Denmark

+
+
+

DK

+
+
+
+
+
+
+
+

7

+
+
+

Singapore

+
+
+

SG

+
+
+
+
+
+ ) +} + +export default GetStartedHero diff --git a/studio/components/interfaces/Home/NewProjectPanel/GetStartedPanel.tsx b/studio/components/interfaces/Home/NewProjectPanel/GetStartedPanel.tsx deleted file mode 100644 index b83016a2b6f..00000000000 --- a/studio/components/interfaces/Home/NewProjectPanel/GetStartedPanel.tsx +++ /dev/null @@ -1,127 +0,0 @@ -import { FC } from 'react' -import Link from 'next/link' -import { useRouter } from 'next/router' -import { Button, IconDatabase, IconKey, IconArchive } from '@supabase/ui' -import Panel from 'components/ui/Panel' - -interface Props {} - -const GetStartedPanel: FC = ({}) => { - const router = useRouter() - const { ref } = router.query - return ( - <> -
-
-
-

Welcome to your new project

-

- Your project has been deployed on its own instance, with its own API all set up and - ready to use. -

-
-
- -
-
-

Get started by building out your database

-

- Start building your app by creating tables and inserting some data. Our table editor - makes Postgres as easy to use as a spreadsheet, but there's also our SQL editor if you - need something more. -

-
-
-
Hello
-
- -
- - -
-
- -
-
Database
-
-
-

- Supabase is built on top of Postgres, an extremely scalable Relational Database. -

-
- - - - - - -
-
- -
-
Auth
-
-
-

- Supabase makes it simple to manage your users. -

-
- - - - - - -
-
- -
-
Storage
-
-
-

- Store and serve large files from multiple buckets. -

-
- - - -
-
- - ) -} - -export default GetStartedPanel diff --git a/studio/components/interfaces/Home/NewProjectPanel/NewProjectPanel.tsx b/studio/components/interfaces/Home/NewProjectPanel/NewProjectPanel.tsx index 0658a231e89..9564a3d16d3 100644 --- a/studio/components/interfaces/Home/NewProjectPanel/NewProjectPanel.tsx +++ b/studio/components/interfaces/Home/NewProjectPanel/NewProjectPanel.tsx @@ -1,28 +1,245 @@ -import { DisplayApiSettings, DisplayConfigSettings } from 'components/ui/ProjectSettings' +import Link from 'next/link' import { FC } from 'react' -import GetStartedPanel from './GetStartedPanel' +import SVG from 'react-inlinesvg' +import { useRouter } from 'next/router' +import { Button, IconKey, IconArchive, IconExternalLink, IconCode } from '@supabase/ui' + +import Panel from 'components/ui/Panel' +import APIKeys from './APIKeys' +import GetStartedHero from './GetStartedHero' +import { DisplayApiSettings, DisplayConfigSettings } from 'components/ui/ProjectSettings' interface Props {} -const NewProjectPanel: FC = ({}) => ( -
-
- -
-
-
-

Connecting to your new project

+const NewProjectPanel: FC = ({}) => { + const router = useRouter() + const { ref } = router.query -

- Your project has API keys for interacting with the database via Supabase client libraries. -

+ return ( +
+
+
+
+
+

Welcome to your new project

+

+ Your project has been deployed on its own instance, with its own API all set up and + ready to use. +

+
+
+ +
+
+
+

+ Get started by building out your database +

+

+ Start building your app by creating tables and inserting data. Our table editor + makes Postgres as easy to use as a spreadsheet, but there's also our SQL editor if + you need something more. +

+
+ +
+ +
+ +
+
+

Explore our other products

+

+ Supabase provides all the backend features you need to build a product. You can use + it completely, or just the features you need. +

+
+
+ + +
+
+ +
+
Authentication
+
+
+

+ A complete user management system that works without any additional tools. +

+
+ + + + + + +
+
+ +
+
Storage
+
+
+

+ Store, organize, and serve any file types of any size from multiple buckets. +

+
+ + + + + + +
+
+ +
+
Edge Functions
+
+
+

+ Write custom code without deploying or scaling servers, with fast deploy times + and low latency. +

+
+ + + +
+
+
+
+
+
+
+

Connecting to your new project

+

+ Interact with your database through the Supabase client libraries with your API keys. +

+

+ More information about your project's keys can be found in your project's API + settings. +

+
+ +
+
+
+ + +
-
- - -
-
-) + ) +} export default NewProjectPanel diff --git a/studio/components/layouts/ProjectLayout/NavigationBar/NavigationBar.utils.tsx b/studio/components/layouts/ProjectLayout/NavigationBar/NavigationBar.utils.tsx index 80d494395fa..dfd54a394f4 100644 --- a/studio/components/layouts/ProjectLayout/NavigationBar/NavigationBar.utils.tsx +++ b/studio/components/layouts/ProjectLayout/NavigationBar/NavigationBar.utils.tsx @@ -9,10 +9,8 @@ import { IconUsers, } from '@supabase/ui' import SVG from 'react-inlinesvg' -import { PermissionAction } from '@supabase/shared-types/out/constants' import { ProjectBase } from 'types' -import { checkPermissions } from 'hooks' import { Route } from 'components/ui/ui.types' import { IS_PLATFORM, PROJECT_STATUS } from 'lib/constants'