From ebd559d9c9a7d2a722b7ca5b39195d3057e01bc9 Mon Sep 17 00:00:00 2001 From: Joshen Lim Date: Tue, 10 Jan 2023 16:07:08 +0800 Subject: [PATCH 01/48] Update text for RLS in table editor --- .../SidePanelEditor/TableEditor/TableEditor.tsx | 15 +++++++-------- studio/pages/project/[ref]/auth/policies.tsx | 2 +- 2 files changed, 8 insertions(+), 9 deletions(-) diff --git a/studio/components/interfaces/TableGridEditor/SidePanelEditor/TableEditor/TableEditor.tsx b/studio/components/interfaces/TableGridEditor/SidePanelEditor/TableEditor/TableEditor.tsx index 09928532ab9..6329a56ae4c 100644 --- a/studio/components/interfaces/TableGridEditor/SidePanelEditor/TableEditor/TableEditor.tsx +++ b/studio/components/interfaces/TableGridEditor/SidePanelEditor/TableEditor/TableEditor.tsx @@ -17,6 +17,7 @@ import { generateTableFieldFromPostgresTable, formatImportedContentToColumnFields, } from './TableEditor.utils' +import InformationBox from 'components/ui/InformationBox' interface Props { table?: PostgresTable @@ -215,9 +216,9 @@ const TableEditor: FC = ({

Restrict access to your table by enabling RLS and writing Postgres policies.

-

- If RLS is not enabled, anyone with the anon key can modify and delete your data. + RLS is secure by default - all normal access to this table must be allowed by a + policy.

{!tableFields.isRLSEnabled && ( = ({ variant="warning" className="!px-4 !py-3 mt-3" // @ts-ignore - title={ - - Turning off RLS means that you are allowing anonymous access to your table - - } - /> + title="Turning off RLS means that you are allowing anonymous access to your table" + > + As such, anyone with the anonymous key can modify or delete your data. + )} } diff --git a/studio/pages/project/[ref]/auth/policies.tsx b/studio/pages/project/[ref]/auth/policies.tsx index 14fc0d2a805..26a0ceb74ea 100644 --- a/studio/pages/project/[ref]/auth/policies.tsx +++ b/studio/pages/project/[ref]/auth/policies.tsx @@ -242,7 +242,7 @@ const AuthPoliciesTables: FC = observer(({ tables, hasP

This is also known as Row-Level Security (RLS). Each policy is attached to a - table, and the policy is executed everytime a time is accessed. + table, and the policy is executed each time its accessed.

} From a258844ba622a50db6ea2c48a013028f754a444d Mon Sep 17 00:00:00 2001 From: Joshen Lim Date: Tue, 10 Jan 2023 16:26:33 +0800 Subject: [PATCH 02/48] Refactor policies page --- .../interfaces/Auth/Policies/Policies.tsx | 215 ++++++++++++++++ .../interfaces/Auth/Policies/index.tsx | 3 +- .../TableEditor/TableEditor.tsx | 1 - .../TableEditorLayout/TableEditorMenu.tsx | 28 +-- studio/pages/project/[ref]/auth/policies.tsx | 236 ++---------------- 5 files changed, 251 insertions(+), 232 deletions(-) create mode 100644 studio/components/interfaces/Auth/Policies/Policies.tsx diff --git a/studio/components/interfaces/Auth/Policies/Policies.tsx b/studio/components/interfaces/Auth/Policies/Policies.tsx new file mode 100644 index 00000000000..d734e40500d --- /dev/null +++ b/studio/components/interfaces/Auth/Policies/Policies.tsx @@ -0,0 +1,215 @@ +import { useState, FC } from 'react' +import { isEmpty } from 'lodash' +import { IconHelpCircle } from 'ui' +import { useRouter } from 'next/router' +import { observer } from 'mobx-react-lite' +import { useParams, useStore } from 'hooks' +import { PolicyEditorModal, PolicyTableRow } from 'components/interfaces/Auth/Policies' +import { PostgresRole } from '@supabase/postgres-meta' + +import ConfirmModal from 'components/ui/Dialogs/ConfirmDialog' +import NoTableState from 'components/ui/States/NoTableState' +import NoSearchResults from 'components/to-be-cleaned/NoSearchResults' +import ProductEmptyState from 'components/to-be-cleaned/ProductEmptyState' +import InformationBox from 'components/ui/InformationBox' + +interface Props { + tables: any[] + hasPublicTables: boolean +} + +const Policies: FC = ({ tables, hasPublicTables }) => { + const router = useRouter() + const { ref } = useParams() + + const { ui, meta } = useStore() + const roles = meta.roles.list((role: PostgresRole) => !meta.roles.systemRoles.includes(role.name)) + + const [selectedSchemaAndTable, setSelectedSchemaAndTable] = useState({}) + const [selectedTableToToggleRLS, setSelectedTableToToggleRLS] = useState({}) + const [selectedPolicyToEdit, setSelectedPolicyToEdit] = useState({}) + const [selectedPolicyToDelete, setSelectedPolicyToDelete] = useState({}) + + const closePolicyEditorModal = () => { + setSelectedPolicyToEdit({}) + setSelectedSchemaAndTable({}) + } + + const closeConfirmModal = () => { + setSelectedPolicyToDelete({}) + setSelectedTableToToggleRLS({}) + } + + const onSelectToggleRLS = (table: any) => { + setSelectedTableToToggleRLS(table) + } + + const onSelectCreatePolicy = (table: any) => { + setSelectedSchemaAndTable({ schema: table.schema, table: table.name }) + } + + const onSelectEditPolicy = (policy: any) => { + setSelectedPolicyToEdit(policy) + setSelectedSchemaAndTable({ schema: policy.schema, table: policy.table }) + } + + const onSelectDeletePolicy = (policy: any) => { + setSelectedPolicyToDelete(policy) + } + + const onSavePolicySuccess = async () => { + ui.setNotification({ category: 'success', message: 'Policy successfully saved!' }) + closePolicyEditorModal() + } + + // Methods that involve some API + const onToggleRLS = async () => { + const payload = { + id: selectedTableToToggleRLS.id, + rls_enabled: !selectedTableToToggleRLS.rls_enabled, + } + + const res: any = await meta.tables.update(payload.id, payload) + if (res.error) { + ui.setNotification({ + category: 'error', + message: `Failed to toggle RLS: ${res.error.message}`, + }) + } + closeConfirmModal() + } + + const onCreatePolicy = async (payload: any) => { + const res = await meta.policies.create(payload) + if (res.error) { + ui.setNotification({ + category: 'error', + message: `Error adding policy: ${res.error.message}`, + }) + return true + } + return false + } + + const onUpdatePolicy = async (payload: any) => { + const res = await meta.policies.update(payload.id, payload) + if (res.error) { + ui.setNotification({ + category: 'error', + message: `Error updating policy: ${res.error.message}`, + }) + return true + } + return false + } + + const onDeletePolicy = async () => { + const res = await meta.policies.del(selectedPolicyToDelete.id) + if (typeof res !== 'boolean' && res.error) { + ui.setNotification({ + category: 'error', + message: `Error deleting policy: ${res.error.message}`, + }) + } else { + ui.setNotification({ category: 'success', message: 'Successfully deleted policy!' }) + } + closeConfirmModal() + } + + if (!hasPublicTables) + return + + return ( + <> + {tables.length > 0 ? ( + tables.map((table: any) => ( +
+ +
+ )) + ) : hasPublicTables ? ( + + ) : ( +
+ router.push(`/project/${ref}/editor`)} + > +
+ } + description={ +
+

+ Policies restrict, on a per-user basis, which rows can be returned by normal + queries, or inserted, updated, or deleted by data modification commands. +

+

+ This is also known as Row-Level Security (RLS). Each policy is attached to a + table, and the policy is executed each time its accessed. +

+
+ } + /> +

+ A table within the public schema is required before you can create a Row-Level + Security policy. +

+
+ +
+ )} + + + + + + + + ) +} + +export default observer(Policies) diff --git a/studio/components/interfaces/Auth/Policies/index.tsx b/studio/components/interfaces/Auth/Policies/index.tsx index f1cd35fac60..129075d7344 100644 --- a/studio/components/interfaces/Auth/Policies/index.tsx +++ b/studio/components/interfaces/Auth/Policies/index.tsx @@ -1,7 +1,8 @@ +import Policies from './Policies' import PolicyEditorModal from './PolicyEditorModal' import PolicyTableRow from './PolicyTableRow' import PolicySelection from './PolicySelection' import PolicyTemplates from './PolicyTemplates' export * from './Policies.constants' -export { PolicyEditorModal, PolicyTableRow, PolicySelection, PolicyTemplates } +export { Policies, PolicyEditorModal, PolicyTableRow, PolicySelection, PolicyTemplates } diff --git a/studio/components/interfaces/TableGridEditor/SidePanelEditor/TableEditor/TableEditor.tsx b/studio/components/interfaces/TableGridEditor/SidePanelEditor/TableEditor/TableEditor.tsx index 6329a56ae4c..b9a68c8aa27 100644 --- a/studio/components/interfaces/TableGridEditor/SidePanelEditor/TableEditor/TableEditor.tsx +++ b/studio/components/interfaces/TableGridEditor/SidePanelEditor/TableEditor/TableEditor.tsx @@ -225,7 +225,6 @@ const TableEditor: FC = ({ withIcon variant="warning" className="!px-4 !py-3 mt-3" - // @ts-ignore title="Turning off RLS means that you are allowing anonymous access to your table" > As such, anyone with the anonymous key can modify or delete your data. diff --git a/studio/components/layouts/TableEditorLayout/TableEditorMenu.tsx b/studio/components/layouts/TableEditorLayout/TableEditorMenu.tsx index 1bc51c408ae..65ca74e668a 100644 --- a/studio/components/layouts/TableEditorLayout/TableEditorMenu.tsx +++ b/studio/components/layouts/TableEditorLayout/TableEditorMenu.tsx @@ -1,5 +1,4 @@ import { FC, useEffect, useState } from 'react' -import { useRouter } from 'next/router' import Link from 'next/link' import { partition } from 'lodash' import { observer } from 'mobx-react-lite' @@ -10,6 +9,7 @@ import { IconCopy, IconEdit, IconLoader, + IconLock, IconRefreshCw, IconSearch, IconTrash, @@ -23,7 +23,7 @@ import { PermissionAction } from '@supabase/shared-types/out/constants' import { PostgresSchema, PostgresTable } from '@supabase/postgres-meta' import Base64 from 'lib/base64' -import { checkPermissions, useStore } from 'hooks' +import { checkPermissions, useStore, useParams } from 'hooks' import { SchemaView } from './TableEditorLayout.types' import ProductMenuItem from 'components/ui/ProductMenu/ProductMenuItem' @@ -44,11 +44,9 @@ const TableEditorMenu: FC = ({ onDeleteTable = () => {}, onDuplicateTable = () => {}, }) => { - const { meta, ui } = useStore() - const router = useRouter() - const { id } = router.query + const { meta } = useStore() + const { id, ref } = useParams() - const projectRef = ui.selectedProject?.ref const schemas: PostgresSchema[] = meta.schemas.list() const tables: PostgresTable[] = meta.tables.list( (table: PostgresTable) => table.schema === selectedSchema @@ -67,15 +65,10 @@ const TableEditorMenu: FC = ({ // We may need to shift this to the schema store and do something like meta.schema.loadViews() // I don't need we need a separate store for views useEffect(() => { - let cancel = false const fetchViews = async (selectedSchema: string) => { await meta.schemas.loadViews(selectedSchema) } if (selectedSchema) fetchViews(selectedSchema) - - return () => { - cancel = true - } }, [selectedSchema]) const refreshTables = async () => { @@ -258,7 +251,7 @@ const TableEditorMenu: FC = ({ return ( = ({ > Duplicate Table , + + + }> + View Policies + + + , , = ({ const viewId = Base64.encode(JSON.stringify(view)) const isActive = id === viewId return ( - +
@@ -356,7 +356,7 @@ const TableEditorMenu: FC = ({ {filteredForeignTables.map((table: Partial) => { const isActive = Number(id) === table.id return ( - +
diff --git a/studio/pages/project/[ref]/auth/policies.tsx b/studio/pages/project/[ref]/auth/policies.tsx index 26a0ceb74ea..9d52be5eee7 100644 --- a/studio/pages/project/[ref]/auth/policies.tsx +++ b/studio/pages/project/[ref]/auth/policies.tsx @@ -1,22 +1,14 @@ -import React, { useState, FC } from 'react' -import { isEmpty } from 'lodash' -import { Button, IconSearch, Input, IconHelpCircle, IconExternalLink } from 'ui' -import { useRouter } from 'next/router' +import { useState, useEffect } from 'react' +import { Button, IconSearch, Input, IconExternalLink } from 'ui' import { observer } from 'mobx-react-lite' -import { checkPermissions, useStore } from 'hooks' -import { AuthLayout } from 'components/layouts' -import { NextPageWithLayout } from 'types' -import { PolicyEditorModal, PolicyTableRow } from 'components/interfaces/Auth/Policies' -import { PostgresRole } from '@supabase/postgres-meta' import { PostgresTable, PostgresPolicy } from '@supabase/postgres-meta' - -import ConfirmModal from 'components/ui/Dialogs/ConfirmDialog' -import NoTableState from 'components/ui/States/NoTableState' -import NoSearchResults from 'components/to-be-cleaned/NoSearchResults' import { PermissionAction } from '@supabase/shared-types/out/constants' + +import { NextPageWithLayout } from 'types' +import { checkPermissions, useParams, useStore } from 'hooks' +import { AuthLayout } from 'components/layouts' +import { Policies } from 'components/interfaces/Auth/Policies' import NoPermission from 'components/ui/NoPermission' -import ProductEmptyState from 'components/to-be-cleaned/ProductEmptyState' -import InformationBox from 'components/ui/InformationBox' /** * Filter tables by table name and policy name @@ -39,13 +31,15 @@ const onFilterTables = ( const findSearchString = (s: string) => s.toLowerCase().includes(filter) // @ts-ignore Type instantiation is excessively deep and possibly infinite const filteredPolicies = policies.filter((p: PostgresPolicy) => findSearchString(p.name)) + return tables .slice() .filter((x: PostgresTable) => { - const searchTableName = findSearchString(x.name) - if (searchTableName) return true - const searchPolicyName = filteredPolicies.some((p: PostgresPolicy) => p.table === x.name) - return searchPolicyName + return ( + x.name.toLowerCase().includes(filter) || + x.id.toString() === filter || + filteredPolicies.some((p: PostgresPolicy) => p.table === x.name) + ) }) .sort((a: PostgresTable, b: PostgresTable) => a.name.localeCompare(b.name)) } @@ -53,8 +47,13 @@ const onFilterTables = ( const AuthPoliciesPage: NextPageWithLayout = () => { const { meta } = useStore() + const { search } = useParams() + const [policiesFilter, setPoliciesFilter] = useState('') + + useEffect(() => { + if (search) setPoliciesFilter(search) + }, [search]) - const [policiesFilter, setPoliciesFilter] = useState(undefined) const publicTables = meta.tables.list((table: { schema: string }) => table.schema === 'public') const policies = meta.policies.list() const filteredTables = onFilterTables(publicTables, policies, policiesFilter) @@ -89,7 +88,7 @@ const AuthPoliciesPage: NextPageWithLayout = () => {
)} - 0} tables={filteredTables} /> + 0} tables={filteredTables} /> ) } @@ -101,198 +100,3 @@ AuthPoliciesPage.getLayout = (page) => ( ) export default observer(AuthPoliciesPage) - -interface AuthPoliciesTablesProps { - hasPublicTables: boolean - tables: any[] -} -const AuthPoliciesTables: FC = observer(({ tables, hasPublicTables }) => { - const router = useRouter() - const { ref } = router.query - - const { ui, meta } = useStore() - const roles = meta.roles.list((role: PostgresRole) => !meta.roles.systemRoles.includes(role.name)) - - const [selectedSchemaAndTable, setSelectedSchemaAndTable] = useState({}) - const [selectedTableToToggleRLS, setSelectedTableToToggleRLS] = useState({}) - const [selectedPolicyToEdit, setSelectedPolicyToEdit] = useState({}) - const [selectedPolicyToDelete, setSelectedPolicyToDelete] = useState({}) - - const closePolicyEditorModal = () => { - setSelectedPolicyToEdit({}) - setSelectedSchemaAndTable({}) - } - - const closeConfirmModal = () => { - setSelectedPolicyToDelete({}) - setSelectedTableToToggleRLS({}) - } - - const onSelectToggleRLS = (table: any) => { - setSelectedTableToToggleRLS(table) - } - - const onSelectCreatePolicy = (table: any) => { - setSelectedSchemaAndTable({ schema: table.schema, table: table.name }) - } - - const onSelectEditPolicy = (policy: any) => { - setSelectedPolicyToEdit(policy) - setSelectedSchemaAndTable({ schema: policy.schema, table: policy.table }) - } - - const onSelectDeletePolicy = (policy: any) => { - setSelectedPolicyToDelete(policy) - } - - const onSavePolicySuccess = async () => { - ui.setNotification({ category: 'success', message: 'Policy successfully saved!' }) - closePolicyEditorModal() - } - - // Methods that involve some API - const onToggleRLS = async () => { - const payload = { - id: selectedTableToToggleRLS.id, - rls_enabled: !selectedTableToToggleRLS.rls_enabled, - } - - const res: any = await meta.tables.update(payload.id, payload) - if (res.error) { - ui.setNotification({ - category: 'error', - message: `Failed to toggle RLS: ${res.error.message}`, - }) - } - closeConfirmModal() - } - - const onCreatePolicy = async (payload: any) => { - const res = await meta.policies.create(payload) - if (res.error) { - ui.setNotification({ - category: 'error', - message: `Error adding policy: ${res.error.message}`, - }) - return true - } - return false - } - - const onUpdatePolicy = async (payload: any) => { - const res = await meta.policies.update(payload.id, payload) - if (res.error) { - ui.setNotification({ - category: 'error', - message: `Error updating policy: ${res.error.message}`, - }) - return true - } - return false - } - - const onDeletePolicy = async () => { - const res = await meta.policies.del(selectedPolicyToDelete.id) - if (typeof res !== 'boolean' && res.error) { - ui.setNotification({ - category: 'error', - message: `Error deleting policy: ${res.error.message}`, - }) - } else { - ui.setNotification({ category: 'success', message: 'Successfully deleted policy!' }) - } - closeConfirmModal() - } - - return ( - <> - {tables.length > 0 ? ( - tables.map((table: any) => ( -
- -
- )) - ) : hasPublicTables ? ( - - ) : ( -
- router.push(`/project/${ref}/editor`)} - > -
- } - description={ -
-

- Policies restrict, on a per-user basis, which rows can be returned by normal - queries, or inserted, updated, or deleted by data modification commands. -

-

- This is also known as Row-Level Security (RLS). Each policy is attached to a - table, and the policy is executed each time its accessed. -

-
- } - /> -

- A table within the public schema is required before you can create a Row-Level - Security policy. -

-
- -
- )} - - - - - - - - ) -}) From 64fd4034b33f99b7dcbe439c23bfb8e7af5d4d8e Mon Sep 17 00:00:00 2001 From: Joshen Lim Date: Tue, 10 Jan 2023 17:13:21 +0800 Subject: [PATCH 03/48] Allow selection of schema in auth policies page --- .../interfaces/Auth/Policies/Policies.tsx | 20 ++-- .../PolicyTableRow/PolicyTableRowHeader.tsx | 112 +++++++++--------- .../Auth/Policies/PolicyTableRow/index.tsx | 80 +++++++------ .../interfaces/Database/Tables/TableList.tsx | 2 +- .../layouts/AuthLayout/AuthLayout.tsx | 1 + studio/pages/project/[ref]/auth/policies.tsx | 100 ++++++++++++---- 6 files changed, 190 insertions(+), 125 deletions(-) diff --git a/studio/components/interfaces/Auth/Policies/Policies.tsx b/studio/components/interfaces/Auth/Policies/Policies.tsx index d734e40500d..81669a1a6f5 100644 --- a/studio/components/interfaces/Auth/Policies/Policies.tsx +++ b/studio/components/interfaces/Auth/Policies/Policies.tsx @@ -5,20 +5,20 @@ import { useRouter } from 'next/router' import { observer } from 'mobx-react-lite' import { useParams, useStore } from 'hooks' import { PolicyEditorModal, PolicyTableRow } from 'components/interfaces/Auth/Policies' -import { PostgresRole } from '@supabase/postgres-meta' +import { PostgresRole, PostgresTable } from '@supabase/postgres-meta' import ConfirmModal from 'components/ui/Dialogs/ConfirmDialog' -import NoTableState from 'components/ui/States/NoTableState' import NoSearchResults from 'components/to-be-cleaned/NoSearchResults' import ProductEmptyState from 'components/to-be-cleaned/ProductEmptyState' import InformationBox from 'components/ui/InformationBox' interface Props { - tables: any[] - hasPublicTables: boolean + tables: PostgresTable[] + hasTables: boolean + isLocked: boolean } -const Policies: FC = ({ tables, hasPublicTables }) => { +const Policies: FC = ({ tables, hasTables, isLocked }) => { const router = useRouter() const { ref } = useParams() @@ -116,9 +116,6 @@ const Policies: FC = ({ tables, hasPublicTables }) => { closeConfirmModal() } - if (!hasPublicTables) - return - return ( <> {tables.length > 0 ? ( @@ -126,6 +123,7 @@ const Policies: FC = ({ tables, hasPublicTables }) => {
= ({ tables, hasPublicTables }) => { />
)) - ) : hasPublicTables ? ( + ) : hasTables ? ( ) : (
@@ -163,8 +161,8 @@ const Policies: FC = ({ tables, hasPublicTables }) => { } />

- A table within the public schema is required before you can create a Row-Level - Security policy. + A table within this schema is required before you can create a Row-Level Security + policy.

diff --git a/studio/components/interfaces/Auth/Policies/PolicyTableRow/PolicyTableRowHeader.tsx b/studio/components/interfaces/Auth/Policies/PolicyTableRow/PolicyTableRowHeader.tsx index e985b6af5db..1e2d975e7a4 100644 --- a/studio/components/interfaces/Auth/Policies/PolicyTableRow/PolicyTableRowHeader.tsx +++ b/studio/components/interfaces/Auth/Policies/PolicyTableRow/PolicyTableRowHeader.tsx @@ -9,12 +9,14 @@ import { checkPermissions } from 'hooks' interface Props { table: PostgresTable + isLocked: boolean onSelectToggleRLS: (table: PostgresTable) => void onSelectCreatePolicy: (table: PostgresTable) => void } const PolicyTableRowHeader: FC = ({ table, + isLocked, onSelectToggleRLS = () => {}, onSelectCreatePolicy = () => {}, }) => { @@ -35,63 +37,65 @@ const PolicyTableRowHeader: FC = ({ {table.rls_enabled ? 'RLS enabled' : 'RLS disabled'} -
-
- - - - - {!canCreatePolicies && ( - - -
+
+ + +
- - )} - - - - - - {!canToggleRLS && ( - - -
+ + {!canCreatePolicies && ( + + +
+ + You need additional permissions to create RLS policies + +
+ + )} + + + +
- - )} - + {table.rls_enabled ? 'Disable RLS' : 'Enable RLS'} + + + {!canToggleRLS && ( + + +
+ + You need additional permissions to toggle RLS + +
+ + )} + +
-
+ )} ) } diff --git a/studio/components/interfaces/Auth/Policies/PolicyTableRow/index.tsx b/studio/components/interfaces/Auth/Policies/PolicyTableRow/index.tsx index d181c0d6463..b3f53cd0df6 100644 --- a/studio/components/interfaces/Auth/Policies/PolicyTableRow/index.tsx +++ b/studio/components/interfaces/Auth/Policies/PolicyTableRow/index.tsx @@ -9,50 +9,52 @@ import Panel from 'components/ui/Panel' interface Props { table: PostgresTable + isLocked: boolean onSelectToggleRLS: (table: PostgresTable) => void onSelectCreatePolicy: (table: PostgresTable) => void onSelectEditPolicy: (policy: PostgresPolicy) => void onSelectDeletePolicy: (policy: PostgresPolicy) => void } -const PolicyTableRow: FC = observer( - ({ - table, - onSelectToggleRLS = () => {}, - onSelectCreatePolicy = () => {}, - onSelectEditPolicy = () => {}, - onSelectDeletePolicy = () => {}, - }) => { - const { meta } = useStore() - const policies = meta.policies.list((x: PostgresPolicy) => x.table === table.name) - return ( - - } - > - {policies.length === 0 && ( -
-

No policies created yet

-
- )} +const PolicyTableRow: FC = ({ + table, + isLocked, + onSelectToggleRLS = () => {}, + onSelectCreatePolicy = () => {}, + onSelectEditPolicy = () => {}, + onSelectDeletePolicy = () => {}, +}) => { + const { meta } = useStore() + const policies = meta.policies.list((x: PostgresPolicy) => x.table === table.name) - {/* @ts-ignore */} - {policies.map((policy) => ( - - ))} - - ) - } -) + return ( + + } + > + {policies.length === 0 && ( +
+

No policies created yet

+
+ )} -export default PolicyTableRow + {/* @ts-ignore */} + {policies.map((policy) => ( + + ))} + + ) +} + +export default observer(PolicyTableRow) diff --git a/studio/components/interfaces/Database/Tables/TableList.tsx b/studio/components/interfaces/Database/Tables/TableList.tsx index 2c4b60c1acb..002c788aa95 100644 --- a/studio/components/interfaces/Database/Tables/TableList.tsx +++ b/studio/components/interfaces/Database/Tables/TableList.tsx @@ -67,7 +67,7 @@ const TableList: FC = ({ size="small" value={selectedSchema} onChange={onSelectSchema} - icon={isLocked && } + icon={isLocked && } >

Schemas

diff --git a/studio/components/layouts/AuthLayout/AuthLayout.tsx b/studio/components/layouts/AuthLayout/AuthLayout.tsx index 8fa69472d88..f747c9adf22 100644 --- a/studio/components/layouts/AuthLayout/AuthLayout.tsx +++ b/studio/components/layouts/AuthLayout/AuthLayout.tsx @@ -28,6 +28,7 @@ const AuthLayout: FC = ({ title, children }) => { meta.policies.load() meta.tables.load() meta.roles.load() + meta.schemas.load() } }, [ui.selectedProject?.ref]) diff --git a/studio/pages/project/[ref]/auth/policies.tsx b/studio/pages/project/[ref]/auth/policies.tsx index 9d52be5eee7..42562e4bc55 100644 --- a/studio/pages/project/[ref]/auth/policies.tsx +++ b/studio/pages/project/[ref]/auth/policies.tsx @@ -1,5 +1,6 @@ import { useState, useEffect } from 'react' -import { Button, IconSearch, Input, IconExternalLink } from 'ui' +import { partition } from 'lodash' +import { Button, Listbox, IconSearch, Input, IconExternalLink, IconLock } from 'ui' import { observer } from 'mobx-react-lite' import { PostgresTable, PostgresPolicy } from '@supabase/postgres-meta' import { PermissionAction } from '@supabase/shared-types/out/constants' @@ -48,15 +49,25 @@ const onFilterTables = ( const AuthPoliciesPage: NextPageWithLayout = () => { const { meta } = useStore() const { search } = useParams() - const [policiesFilter, setPoliciesFilter] = useState('') + const [selectedSchema, setSelectedSchema] = useState('public') + const [searchString, setSearchString] = useState('') useEffect(() => { - if (search) setPoliciesFilter(search) + if (search) setSearchString(search) }, [search]) - const publicTables = meta.tables.list((table: { schema: string }) => table.schema === 'public') + const schemas = meta.schemas.list() + const [protectedSchemas, openSchemas] = partition(schemas, (schema) => + meta.excludedSchemas.includes(schema?.name ?? '') + ) + // @ts-ignore + const schema = schemas.find((schema) => schema.name === selectedSchema) + const isLocked = protectedSchemas.some((s) => s.id === schema?.id) + const policies = meta.policies.list() - const filteredTables = onFilterTables(publicTables, policies, policiesFilter) + + const tables = meta.tables.list((table: { schema: string }) => table.schema === selectedSchema) + const filteredTables = onFilterTables(tables, policies, searchString) const canReadPolicies = checkPermissions(PermissionAction.TENANT_SQL_ADMIN_READ, 'policies') @@ -66,29 +77,78 @@ const AuthPoliciesPage: NextPageWithLayout = () => { return (
- {(publicTables || []).length > 0 && ( -
- ) } From 455e2684f40aa9b3b8d6b568b7435e6f2605b15b Mon Sep 17 00:00:00 2001 From: Joshen Lim Date: Tue, 10 Jan 2023 17:18:21 +0800 Subject: [PATCH 04/48] Improve clarity of RLS in auth policies page --- .../interfaces/Auth/Policies/PolicyTableRow/index.tsx | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/studio/components/interfaces/Auth/Policies/PolicyTableRow/index.tsx b/studio/components/interfaces/Auth/Policies/PolicyTableRow/index.tsx index b3f53cd0df6..5caf05d60fe 100644 --- a/studio/components/interfaces/Auth/Policies/PolicyTableRow/index.tsx +++ b/studio/components/interfaces/Auth/Policies/PolicyTableRow/index.tsx @@ -39,8 +39,13 @@ const PolicyTableRow: FC = ({ } > {policies.length === 0 && ( -
-

No policies created yet

+
+

No policies created yet

+ {table.rls_enabled && ( +

+ As RLS has been enabled, all normal access to this table must be allowed by a policy. +

+ )}
)} From de37a51ad2d00d70191fa663a1336fd9d48f8649 Mon Sep 17 00:00:00 2001 From: Ollie Halliday <22655069+Hallidayo@users.noreply.github.com> Date: Wed, 11 Jan 2023 15:24:35 +0000 Subject: [PATCH 05/48] change styling and flow of tabs --- .../reference/RefFunctionSection.tsx | 55 ++++++++++--------- 1 file changed, 30 insertions(+), 25 deletions(-) diff --git a/apps/docs/components/reference/RefFunctionSection.tsx b/apps/docs/components/reference/RefFunctionSection.tsx index 5cdacd0d458..0b50bb219be 100644 --- a/apps/docs/components/reference/RefFunctionSection.tsx +++ b/apps/docs/components/reference/RefFunctionSection.tsx @@ -158,18 +158,24 @@ const RefFunctionSection: React.FC = (props) => { label={example.name} className="flex flex-col gap-3" > - {example.description && ( -
- - {example.description} - -
- )} + + {exampleString + + (example.code && + example.code + .replace(/```/g, '') + .replace('js', '') + .replace('ts', '') + .replace('dart', ''))} + {((tables && tables.length > 0) || sql) && ( <> @@ -204,29 +210,14 @@ const RefFunctionSection: React.FC = (props) => { )} - - - {exampleString + - (example.code && - example.code - .replace(/```/g, '') - .replace('js', '') - .replace('ts', '') - .replace('dart', ''))} - - {response && ( @@ -234,6 +225,20 @@ const RefFunctionSection: React.FC = (props) => { )} + + {example.description && ( + +
+ + {example.description} + +
+ + )} ) })} From 4fad729f9704deaab1eb36570285434a3d838541 Mon Sep 17 00:00:00 2001 From: Ollie Halliday <22655069+Hallidayo@users.noreply.github.com> Date: Wed, 11 Jan 2023 15:24:52 +0000 Subject: [PATCH 06/48] ran prettier --- apps/docs/components/reference/RefFunctionSection.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/apps/docs/components/reference/RefFunctionSection.tsx b/apps/docs/components/reference/RefFunctionSection.tsx index 0b50bb219be..1c4e9668a23 100644 --- a/apps/docs/components/reference/RefFunctionSection.tsx +++ b/apps/docs/components/reference/RefFunctionSection.tsx @@ -232,10 +232,10 @@ const RefFunctionSection: React.FC = (props) => { label="Notes" defaultOpen={false} > -
- - {example.description} - +
+ + {example.description} +
)} From 36c366b5641a200a4757fad156c1c6821639c9ad Mon Sep 17 00:00:00 2001 From: thorwebdev Date: Thu, 12 Jan 2023 16:05:08 +0800 Subject: [PATCH 07/48] feat: reorg function docs and add videos. --- .../NavigationMenu.constants.ts | 20 +- .../pages/guides/functions/cicd-workflow.mdx | 9 + apps/docs/pages/guides/functions/cors.mdx | 59 +++++ .../examples/cloudflare-turnstile.mdx | 96 ++++++++ .../functions/examples/github-actions.mdx | 49 ++++ .../guides/functions/examples/og-image.mdx | 6 + .../functions/examples/storage-caching.mdx | 22 ++ .../functions/examples/stripe-webhooks.mdx | 22 ++ .../functions/examples/telegram-bot.mdx | 22 ++ apps/docs/pages/guides/functions/overview.mdx | 84 +++++++ .../pages/guides/functions/quickstart.mdx | 210 ------------------ apps/docs/pages/guides/functions/secrets.mdx | 89 ++++++++ .../guides/functions/testing-debugging.mdx | 55 +++++ .../{best-practices.mdx => tips.mdx} | 26 +-- 14 files changed, 533 insertions(+), 236 deletions(-) create mode 100644 apps/docs/pages/guides/functions/cors.mdx create mode 100644 apps/docs/pages/guides/functions/examples/cloudflare-turnstile.mdx create mode 100644 apps/docs/pages/guides/functions/examples/github-actions.mdx create mode 100644 apps/docs/pages/guides/functions/examples/storage-caching.mdx create mode 100644 apps/docs/pages/guides/functions/examples/stripe-webhooks.mdx create mode 100644 apps/docs/pages/guides/functions/examples/telegram-bot.mdx create mode 100644 apps/docs/pages/guides/functions/overview.mdx delete mode 100644 apps/docs/pages/guides/functions/quickstart.mdx create mode 100644 apps/docs/pages/guides/functions/secrets.mdx create mode 100644 apps/docs/pages/guides/functions/testing-debugging.mdx rename apps/docs/pages/guides/functions/{best-practices.mdx => tips.mdx} (71%) diff --git a/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.constants.ts b/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.constants.ts index 7abe1bea978..75d54fb2afb 100644 --- a/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.constants.ts +++ b/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.constants.ts @@ -421,14 +421,28 @@ export const functions = { label: 'Edge Functions', url: '/guides/functions', items: [ + { name: 'Overview', url: '/guides/functions/overview', items: [] }, { name: 'Auth', url: '/guides/functions/auth', items: [] }, + { name: 'CORS', url: '/guides/functions/cors', items: [] }, { name: 'CI/CD Workflow', url: '/guides/functions/cicd-workflow', items: [] }, - { name: 'Best Practices', url: '/guides/functions/best-practices', items: [] }, - { name: 'Quickstart', url: '/guides/functions/quickstart', items: [] }, + { name: 'Managing Secrets', url: '/guides/functions/secrets', items: [] }, + { name: 'Testing & Debugging', url: '/guides/functions/testing-debugging', items: [] }, + { name: 'Tips', url: '/guides/functions/tips', items: [] }, { name: 'Examples', url: '/guides/functions/examples', - items: [{ name: 'OG Image', url: '/guides/functions/examples/og-image', items: [] }], + items: [ + { + name: 'Cloudflare Turnstile', + url: '/guides/functions/examples/cloudflare-turnstile', + items: [], + }, + { name: 'GitHub Actions', url: '/guides/functions/examples/github-actions', items: [] }, + { name: 'OG Image', url: '/guides/functions/examples/og-image', items: [] }, + { name: 'Storage Caching', url: '/guides/functions/examples/storage-caching', items: [] }, + { name: 'Stripe Webhooks', url: '/guides/functions/examples/stripe-webhooks', items: [] }, + { name: 'Telegram Bot', url: '/guides/functions/examples/telegram-bot', items: [] }, + ], }, ], } diff --git a/apps/docs/pages/guides/functions/cicd-workflow.mdx b/apps/docs/pages/guides/functions/cicd-workflow.mdx index e902f140370..fd7826ddf0e 100644 --- a/apps/docs/pages/guides/functions/cicd-workflow.mdx +++ b/apps/docs/pages/guides/functions/cicd-workflow.mdx @@ -35,6 +35,15 @@ jobs: - run: supabase functions deploy your-function-name --project-ref $PROJECT_ID ``` +
+ +
+ See the [example on GitHub](https://github.com/supabase/supabase/blob/master/examples/edge-functions/.github/workflows/deploy.yaml). export const Page = ({ children }) => diff --git a/apps/docs/pages/guides/functions/cors.mdx b/apps/docs/pages/guides/functions/cors.mdx new file mode 100644 index 00000000000..fca25fa4933 --- /dev/null +++ b/apps/docs/pages/guides/functions/cors.mdx @@ -0,0 +1,59 @@ +import Layout from '~/layouts/DefaultGuideLayout' + +export const meta = { + id: 'functions-cors', + title: 'CORS (Cross-Origin Resource Sharing)', + description: 'Add CORS headers to invoke functions from the browser.', +} + +To invoke the functions from the browser, you need to handle [CORS Preflight](https://developer.mozilla.org/en-US/docs/Glossary/Preflight_request) requests. + +See the [example on GitHub](https://github.com/supabase/supabase/blob/master/examples/edge-functions/supabase/functions/browser-with-cors/index.ts). + +### Recommended setup + +We recommend adding a `corst.ts` file within a `_shared` folder which makes it easy to reuse the CORS headers across functions: + +```ts cors.ts +export const corsHeaders = { + 'Access-Control-Allow-Origin': '*', + 'Access-Control-Allow-Headers': 'authorization, x-client-info, apikey, content-type', +} +``` + +You can then import and use the CORS headers within your functions: + +```ts index.ts +import { serve } from 'https://deno.land/std@0.131.0/http/server.ts' +import { corsHeaders } from '../_shared/cors.ts' + +console.log(`Function "browser-with-cors" up and running!`) + +serve(async (req) => { + // This is needed if you're planning to invoke your function from a browser. + if (req.method === 'OPTIONS') { + return new Response('ok', { headers: corsHeaders }) + } + + try { + const { name } = await req.json() + const data = { + message: `Hello ${name}!`, + } + + return new Response(JSON.stringify(data), { + headers: { ...corsHeaders, 'Content-Type': 'application/json' }, + status: 200, + }) + } catch (error) { + return new Response(JSON.stringify({ error: error.message }), { + headers: { ...corsHeaders, 'Content-Type': 'application/json' }, + status: 400, + }) + } +}) +``` + +export const Page = ({ children }) => + +export default Page diff --git a/apps/docs/pages/guides/functions/examples/cloudflare-turnstile.mdx b/apps/docs/pages/guides/functions/examples/cloudflare-turnstile.mdx new file mode 100644 index 00000000000..560b3d9e454 --- /dev/null +++ b/apps/docs/pages/guides/functions/examples/cloudflare-turnstile.mdx @@ -0,0 +1,96 @@ +import Layout from '~/layouts/DefaultGuideLayout' + +export const meta = { + id: 'examples-cloudflare-turnstile', + title: 'Cloudflare Turnstile', + description: 'Protecting Forms with Cloudflare Turnstile.', +} + +
+ +
+ +[Clouflare Turnstile](https://www.cloudflare.com/products/turnstile/) is a friendly, free CAPTCHA replacement, and it works seamlessly with Supabase Edge Functions to protect your forms. [View on GitHub](https://github.com/supabase/supabase/tree/master/examples/edge-functions/supabase/functions/cloudflare-turnstile). + +## Setup + +- Follow these steps to set up a new site: https://developers.cloudflare.com/turnstile/get-started/ +- Add the Cloudflare Turnstile widget to your site: https://developers.cloudflare.com/turnstile/get-started/client-side-rendering/ + +## Code + +Create a new function in your project: + +```bash +supabase functions new cloudflare-turnstile +``` + +And add the code to the `index.ts` file: + +```ts index.ts +import { serve } from 'https://deno.land/std@0.131.0/http/server.ts' +import { corsHeaders } from '../_shared/cors.ts' + +console.log('Hello from Cloudflare Trunstile!') + +function ips(req: Request) { + return req.headers.get('x-forwarded-for')?.split(/\s*,\s*/) +} + +serve(async (req) => { + // This is needed if you're planning to invoke your function from a browser. + if (req.method === 'OPTIONS') { + return new Response('ok', { headers: corsHeaders }) + } + + const { token } = await req.json() + const clientIps = ips(req) || [''] + const ip = clientIps[0] + + // Validate the token by calling the + // "/siteverify" API endpoint. + let formData = new FormData() + formData.append('secret', Deno.env.get('CLOUDFLARE_SECRET_KEY') ?? '') + formData.append('response', token) + formData.append('remoteip', ip) + + const url = 'https://challenges.cloudflare.com/turnstile/v0/siteverify' + const result = await fetch(url, { + body: formData, + method: 'POST', + }) + + const outcome = await result.json() + console.log(outcome) + if (outcome.success) { + return new Response('success', { headers: corsHeaders }) + } + return new Response('failure', { headers: corsHeaders }) +}) +``` + +## Deploy the server-side validation Edge Functions + +- https://developers.cloudflare.com/turnstile/get-started/server-side-validation/ + +```bash +supabase functions deploy cloudflare-turnstile +supabase secrets set CLOUDFLARE_TURNSTILE_SECRET_KEY=your_secret_key +``` + +## Invoke the function from your site + +```js +const { data, error } = await supabase.functions.invoke('cloudflare-turnstile', { + body: { token }, +}) +``` + +export const Page = ({ children }) => + +export default Page diff --git a/apps/docs/pages/guides/functions/examples/github-actions.mdx b/apps/docs/pages/guides/functions/examples/github-actions.mdx new file mode 100644 index 00000000000..97456f33767 --- /dev/null +++ b/apps/docs/pages/guides/functions/examples/github-actions.mdx @@ -0,0 +1,49 @@ +import Layout from '~/layouts/DefaultGuideLayout' + +export const meta = { + id: 'examples-github-actions', + title: 'GitHub Actions', + description: 'Deploying Edge Functions with GitHub Actions.', +} + +
+ +
+ +Use the Supabase CLI together with GitHub Actions to automatically deploy our Supabase Edge Functions. [View on GitHub](https://github.com/supabase/supabase/tree/master/examples/edge-functions/supabase/functions/github-action-deploy). + +```yaml deploy.yaml +name: Deploy Function + +on: + push: + branches: + - main + workflow_dispatch: + +jobs: + deploy: + runs-on: ubuntu-latest + + env: + SUPABASE_ACCESS_TOKEN: ${{ secrets.SUPABASE_ACCESS_TOKEN }} + PROJECT_ID: zdtdtxajzydjqzuktnqx + + steps: + - uses: actions/checkout@v3 + + - uses: supabase/setup-cli@v1 + with: + version: 1.0.0 + + - run: supabase functions deploy github-action-deploy --project-ref $PROJECT_ID +``` + +export const Page = ({ children }) => + +export default Page diff --git a/apps/docs/pages/guides/functions/examples/og-image.mdx b/apps/docs/pages/guides/functions/examples/og-image.mdx index 2974d5ef853..e4be6c85796 100644 --- a/apps/docs/pages/guides/functions/examples/og-image.mdx +++ b/apps/docs/pages/guides/functions/examples/og-image.mdx @@ -17,6 +17,10 @@ export const meta = { Generate Open Graph images with Deno and Supabase Edge Functions. [View on GitHub](https://github.com/supabase/supabase/tree/master/examples/edge-functions/supabase/functions/opengraph). +## Code + +Create a `handler.tsx` file to construct the OG image in React: + ```tsx handler.tsx import React from 'https://esm.sh/react@18.2.0' import { ImageResponse } from 'https://deno.land/x/og_edge@0.0.4/mod.ts' @@ -42,6 +46,8 @@ export default function handler(req: Request) { } ``` +Create an `index.ts` file to execute the handler on incoming requests: + ```ts index.ts import { serve } from 'https://deno.land/std@0.131.0/http/server.ts' import handler from './handler.tsx' diff --git a/apps/docs/pages/guides/functions/examples/storage-caching.mdx b/apps/docs/pages/guides/functions/examples/storage-caching.mdx new file mode 100644 index 00000000000..6e4b6ff604e --- /dev/null +++ b/apps/docs/pages/guides/functions/examples/storage-caching.mdx @@ -0,0 +1,22 @@ +import Layout from '~/layouts/DefaultGuideLayout' + +export const meta = { + id: 'examples-storage-caching', + title: 'Caching Images with Supabase Storage CDN', + description: 'Integrate Edge Functions with Supabase Storage to cache images on the Edge (CDN).', +} + +
+ +
+ +Integrate Edge Functions with Supabase Storage to cache images on the Edge (CDN). [View on GitHub](https://github.com/supabase/supabase/tree/master/examples/edge-functions/supabase/functions/og-image-with-storage-cdn). + +export const Page = ({ children }) => + +export default Page diff --git a/apps/docs/pages/guides/functions/examples/stripe-webhooks.mdx b/apps/docs/pages/guides/functions/examples/stripe-webhooks.mdx new file mode 100644 index 00000000000..5b75bb48878 --- /dev/null +++ b/apps/docs/pages/guides/functions/examples/stripe-webhooks.mdx @@ -0,0 +1,22 @@ +import Layout from '~/layouts/DefaultGuideLayout' + +export const meta = { + id: 'examples-stripe-webhooks', + title: 'Handling Stripe Webhooks', + description: 'Handling signed Stripe Webhooks with Edge Functions.', +} + +
+ +
+ +Handling signed Stripe Webhooks with Edge Functions. [View on GitHub](https://github.com/supabase/supabase/blob/master/examples/edge-functions/supabase/functions/stripe-webhooks/index.ts). + +export const Page = ({ children }) => + +export default Page diff --git a/apps/docs/pages/guides/functions/examples/telegram-bot.mdx b/apps/docs/pages/guides/functions/examples/telegram-bot.mdx new file mode 100644 index 00000000000..bac6a45eba2 --- /dev/null +++ b/apps/docs/pages/guides/functions/examples/telegram-bot.mdx @@ -0,0 +1,22 @@ +import Layout from '~/layouts/DefaultGuideLayout' + +export const meta = { + id: 'examples-telegram-bot', + title: 'Telegram Bot', + description: 'Building a Telegram Bot with Edge Functions.', +} + +
+ +
+ +Handle Telegram Bot Webhooks with the [grammY framework](https://grammy.dev/). grammY is an open source Telegram Bot Framework which makes it easy to handle and respond to incoming messages. [View on GitHub](https://github.com/supabase/supabase/tree/master/examples/edge-functions/supabase/functions/telegram-bot). + +export const Page = ({ children }) => + +export default Page diff --git a/apps/docs/pages/guides/functions/overview.mdx b/apps/docs/pages/guides/functions/overview.mdx new file mode 100644 index 00000000000..49935c280bf --- /dev/null +++ b/apps/docs/pages/guides/functions/overview.mdx @@ -0,0 +1,84 @@ +import Layout from '~/layouts/DefaultGuideLayout' + +export const meta = { + id: 'functions-overview', + title: 'Edge Functions Overview', + description: 'Globally distributed TypeScript Functions.', + sidebar_label: 'Overview', +} + +Learn how to build an Edge Function locally and deploy it to the Supabase Platform in less than 7 minutes. + +
+ +
+ +## Prerequisites + +Follow the steps to prepare your Supabase project on your local machine. + +- Install the Supabase CLI. [Docs](/docs/guides/cli). +- Login to the CLI using the command: `supabase login`. [Docs](/docs/reference/cli/usage#supabase-login). +- Initialize Supabase inside your project using the command: `supabase init`. [Docs](/docs/guides/cli/local-development#getting-started). +- Link to your Remote Project using the command `supabase link --project-ref your-project-ref`. [Docs](/docs/reference/cli/usage#supabase-link). +- Optional: Setup your environment: Follow [this setup guide](https://deno.land/manual/getting_started/setup_your_environment) to integrate the Deno language server with your editor. + +## Create a function + +Let's create a new Edge Function called `hello-world` inside your project: + +```bash +supabase functions new hello-world +``` + +This creates a function stub in your `supabase` folder at `./functions/hello-world/index.ts`. + +## Deploy to production + +```bash +supabase functions deploy hello-world +``` + +This command bundles your Edge Function from `./functions/hello-world/index.ts` and deploys it to the Supabase platform. +The command outputs a URL to the Supabase Dashboard which you can open to find view more details. Let's open the link to find the execution command. + + + +By default, Edge Functions require a valid JWT in the authorization header. This header is automatically set when invoking your function via a Supabase client library. + +If you want to use Edge Functions to handle webhooks (e.g. [Stripe payment webhooks](https://github.com/supabase/supabase/tree/master/examples/edge-functions/supabase/functions/stripe-webhooks) etc.), you need to pass the `--no-verify-jwt` flag when deploying your function. + + + +## Execute remote functions + +You can execute Edge Functions using curl. Copy the curl command from the Dashboard. It should look like this: + +```bash +curl --request POST 'https://.functions.supabase.co/hello-world' \ + --header 'Authorization: Bearer ANON_KEY' \ + --header 'Content-Type: application/json' \ + --data '{ "name":"Functions" }' +``` + +If you receive an error `Invalid JWT`, find the `ANON_KEY` of your project in the Dashboard under `Settings > API`. + +After invoking your Edge Function you should see the response `{ "message":"Hello Functions!" }`. + +## Limitations + +- Deno Deploy limitations + - Deno does not support outgoing connections to ports `25`, `465`, and `587`. + - Cannot write to File System +- Edge Functions + - Local development - only one function at a time + - Serving of HTML content is not supported (`GET` requests that return `text/html` will be rewritten to `text/plain`). + +export const Page = ({ children }) => + +export default Page diff --git a/apps/docs/pages/guides/functions/quickstart.mdx b/apps/docs/pages/guides/functions/quickstart.mdx deleted file mode 100644 index 55b9ed617c6..00000000000 --- a/apps/docs/pages/guides/functions/quickstart.mdx +++ /dev/null @@ -1,210 +0,0 @@ -import Layout from '~/layouts/DefaultGuideLayout' - -export const meta = { - id: 'functions-quickstart', - title: 'Edge Functions Quickstart', - description: 'Globally distributed TypeScript functions.', - sidebar_label: 'Quickstart', -} - -Learn how to build an Edge Function locally and deploy it to the Supabase Platform in less than 7 minutes. - -
- -
- -## Prerequisites - -Follow the steps to prepare your Supabase project on your local machine. - -- Install the Supabase CLI. [Docs](/docs/guides/cli). -- Login to the CLI using the command: `supabase login`. [Docs](/docs/reference/cli/usage#supabase-login). -- Initialize Supabase inside your project using the command: `supabase init`. [Docs](/docs/guides/cli/local-development#getting-started). -- Link to your Remote Project using the command `supabase link --project-ref your-project-ref`. [Docs](/docs/reference/cli/usage#supabase-link). -- Optional: Setup your environment: Follow [this setup guide](https://deno.land/manual/getting_started/setup_your_environment) to integrate the Deno language server with your editor. - -## Create a function - -Let's create a new Edge Function called `hello-world` inside your project: - -```bash -supabase functions new hello-world -``` - -This creates a function stub in your `supabase` folder at `./functions/hello-world/index.ts`. - -## Deploy to production - -```bash -supabase functions deploy hello-world -``` - -This command bundles your Edge Function from `./functions/hello-world/index.ts` and deploys it to the Supabase platform. -The command outputs a URL to the Supabase Dashboard which you can open to find view more details. Let's open the link to find the execution command. - - - -By default, Edge Functions require a valid JWT in the authorization header. This header is automatically set when invoking your function via a Supabase client library. - -If you want to use Edge Functions to handle webhooks (e.g. [Stripe payment webhooks](https://github.com/supabase/supabase/tree/master/examples/edge-functions/supabase/functions/stripe-webhooks) etc.), you need to pass the `--no-verify-jwt` flag when deploying your function. - - - -## Execute remote functions - -You can execute Edge Functions using curl. Copy the curl command from the Dashboard. It should look like this: - -```bash -curl --request POST 'https://.functions.supabase.co/hello-world' \ - --header 'Authorization: Bearer ANON_KEY' \ - --header 'Content-Type: application/json' \ - --data '{ "name":"Functions" }' -``` - -If you receive an error `Invalid JWT`, find the `ANON_KEY` of your project in the Dashboard under `Settings > API`. - -After invoking your Edge Function you should see the response `{ "message":"Hello Functions!" }`. - -## Debug functions - -You can debug your deployed Edge Functions using the "Functions" section of the Dashboard. There are two types debugging tools available: - -- Invocations: shows the Request and Response for each execution. -- Logs: shows any platform events, including deployments and errors. - -![Function invocations.](/docs/img/guides/functions/function-logs.png) - -## Develop locally - -You can run your Edge Function locally using [`supabase functions serve`](/docs/reference/cli/usage#supabase-functions-serve): - -```bash -supabase start # start the supabase stack -supabase functions serve hello-world # start the Function watcher -``` - -The `functions serve` command has hot-reloading capabilities. It will watch for any changes to your files and restart the Deno server. - -### Invoke functions locally - -While serving your local Function, you can execute it using curl: - -```bash -curl --request POST 'http://localhost:54321/functions/v1/hello-world' \ - --header 'Authorization: Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZS1kZW1vIiwicm9sZSI6ImFub24ifQ.625_WdcF3KHqz5amU0x2X5WWHP-OEs_4qj0ssLNHzTs' \ - --header 'Content-Type: application/json' \ - --data '{ "name":"Functions" }' -``` - -You should see the response `{ "message":"Hello Functions!" }`. - -
-Implementation details - -- Edge Functions don't serve HTML content (`GET` requests that return `text/html` are rewritten to `text/plain`). -- The `Authorization` header is required. You can use either the `ANON` key, the `SERVICE_ROLE` key, or a logged-in user's JWT. -- The Function is proxied through the local API (`http://localhost:54321`) - -
-
- -If you execute Function with a different payload the response will change.
-Modify the `--data '{"name":"Functions"}'` line to `--data '{"name":"World"}'` and try invoking the command again! - -## Secrets and Environment Variables - -It's common that you will need to use sensitive information or environment-specific variables inside your Edge Functions. You can access these using Deno's built-in handler - -```js -Deno.env.get(MY_SECRET_NAME) -``` - -### Default secrets - -By default, Edge Functions have access to these secrets: - -- `SUPABASE_URL`: The API gateway for your Supabase project. -- `SUPABASE_ANON_KEY`: The `anon` key for your Supabase API. This is safe to use in a browser when you have [Row Level Security](/docs/guides/auth/row-level-security) enabled. -- `SUPABASE_SERVICE_ROLE_KEY`: The `service_role` key for your Supabase API. This is safe to use in Edge Functions, but it should NEVER be used in a browser. This key will bypass [Row Level Security](/docs/guides/auth/row-level-security). -- `SUPABASE_DB_URL`: The URL for your [PostgreSQL database](/docs/guides/database). You can use this to connect directly to your database. - -### Local secrets - -Let's create a local file for storing our secrets, and inside it we can store a secret `MY_NAME`: - -```jsx -echo "MY_NAME=Yoda" >> ./supabase/.env.local -``` - -This creates a new file `./supabase/.env.local` for storing your local development secrets. - - - -Never check your .env files into Git! - - - -Now let's access this environment variable `MY_NAME` inside our Function. Anywhere in your function, add this line: - -```jsx -console.log(Deno.env.get('MY_NAME')) -``` - -Now we can invoke our function locally, by serving it with our new `.env.local` file: - -```bash -supabase functions serve hello-world --env-file ./supabase/.env.local -``` - -When the function starts you should see the name “Yoda” output to the terminal. - -### Production secrets - -Let's create a `.env` for production. In this case we'll just use the same as our local secrets: - -```bash -cp ./supabase/.env.local ./supabase/.env -``` - -This creates a new file `./supabase/.env` for storing your production secrets. - - - -Never check your `.env` files into Git! - - - -Let's push all the secrets from the `.env` file to our remote project using [`supabase secrets set`](/docs/reference/cli/usage#supabase-secrets-set): - -```bash -supabase secrets set --env-file ./supabase/.env - -# You can also set secrets individually using: -supabase secrets set MY_NAME=Chewbacca -``` - -You don't need to re-deploy after setting your secrets. - -To see all the secrets which you have set remotely, use [`supabase secrets list`](/docs/reference/cli/usage#supabase-secrets-list): - -```bash -supabase secrets list -``` - -## Limitations - -- Deno Deploy limitations - - Deno does not support outgoing connections to ports `25`, `465`, and `587`. - - Cannot write to File System -- Edge Functions - - Local development - only one function at a time - - Serving of HTML content is not supported (`GET` requests that return `text/html` will be rewritten to `text/plain`). - -export const Page = ({ children }) => - -export default Page diff --git a/apps/docs/pages/guides/functions/secrets.mdx b/apps/docs/pages/guides/functions/secrets.mdx new file mode 100644 index 00000000000..dd51094d374 --- /dev/null +++ b/apps/docs/pages/guides/functions/secrets.mdx @@ -0,0 +1,89 @@ +import Layout from '~/layouts/DefaultGuideLayout' + +export const meta = { + id: 'functions-secrets', + title: 'Secrets and Environment Variables', + description: 'Managing secrets and environment variables.', +} + +It's common that you will need to use sensitive information or environment-specific variables inside your Edge Functions. You can access these using Deno's built-in handler + +```js +Deno.env.get(MY_SECRET_NAME) +``` + +### Default secrets + +By default, Edge Functions have access to these secrets: + +- `SUPABASE_URL`: The API gateway for your Supabase project. +- `SUPABASE_ANON_KEY`: The `anon` key for your Supabase API. This is safe to use in a browser when you have [Row Level Security](/docs/guides/auth/row-level-security) enabled. +- `SUPABASE_SERVICE_ROLE_KEY`: The `service_role` key for your Supabase API. This is safe to use in Edge Functions, but it should NEVER be used in a browser. This key will bypass [Row Level Security](/docs/guides/auth/row-level-security). +- `SUPABASE_DB_URL`: The URL for your [PostgreSQL database](/docs/guides/database). You can use this to connect directly to your database. + +### Local secrets + +Let's create a local file for storing our secrets, and inside it we can store a secret `MY_NAME`: + +```jsx +echo "MY_NAME=Yoda" >> ./supabase/.env.local +``` + +This creates a new file `./supabase/.env.local` for storing your local development secrets. + + + +Never check your .env files into Git! + + + +Now let's access this environment variable `MY_NAME` inside our Function. Anywhere in your function, add this line: + +```jsx +console.log(Deno.env.get('MY_NAME')) +``` + +Now we can invoke our function locally, by serving it with our new `.env.local` file: + +```bash +supabase functions serve hello-world --env-file ./supabase/.env.local +``` + +When the function starts you should see the name “Yoda” output to the terminal. + +### Production secrets + +Let's create a `.env` for production. In this case we'll just use the same as our local secrets: + +```bash +cp ./supabase/.env.local ./supabase/.env +``` + +This creates a new file `./supabase/.env` for storing your production secrets. + + + +Never check your `.env` files into Git! + + + +Let's push all the secrets from the `.env` file to our remote project using [`supabase secrets set`](/docs/reference/cli/usage#supabase-secrets-set): + +```bash +supabase secrets set --env-file ./supabase/.env + +# You can also set secrets individually using: +supabase secrets set MY_NAME=Chewbacca +``` + +You don't need to re-deploy after setting your secrets. + +To see all the secrets which you have set remotely, use [`supabase secrets list`](/docs/reference/cli/usage#supabase-secrets-list): + +```bash +supabase secrets list +``` + +export const Page = ({ children }) => + +export default Page diff --git a/apps/docs/pages/guides/functions/testing-debugging.mdx b/apps/docs/pages/guides/functions/testing-debugging.mdx new file mode 100644 index 00000000000..b0b4cc468dd --- /dev/null +++ b/apps/docs/pages/guides/functions/testing-debugging.mdx @@ -0,0 +1,55 @@ +import Layout from '~/layouts/DefaultGuideLayout' + +export const meta = { + id: 'functions-testing-debugging', + title: 'Testing and Debugging Functions', + description: 'Test and debug functions locally and in production.', +} + +You can debug your deployed Edge Functions using the "Functions" section of the Dashboard. There are two types debugging tools available: + +- Invocations: shows the Request and Response for each execution. +- Logs: shows any platform events, including deployments and errors. + +![Function invocations.](/docs/img/guides/functions/function-logs.png) + +## Develop locally + +You can run your Edge Function locally using [`supabase functions serve`](/docs/reference/cli/usage#supabase-functions-serve): + +```bash +supabase start # start the supabase stack +supabase functions serve hello-world # start the Function watcher +``` + +The `functions serve` command has hot-reloading capabilities. It will watch for any changes to your files and restart the Deno server. + +### Invoke functions locally + +While serving your local Function, you can execute it using curl: + +```bash +curl --request POST 'http://localhost:54321/functions/v1/hello-world' \ + --header 'Authorization: Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZS1kZW1vIiwicm9sZSI6ImFub24ifQ.625_WdcF3KHqz5amU0x2X5WWHP-OEs_4qj0ssLNHzTs' \ + --header 'Content-Type: application/json' \ + --data '{ "name":"Functions" }' +``` + +You should see the response `{ "message":"Hello Functions!" }`. + +
+Implementation details + +- Edge Functions don't serve HTML content (`GET` requests that return `text/html` are rewritten to `text/plain`). +- The `Authorization` header is required. You can use either the `ANON` key, the `SERVICE_ROLE` key, or a logged-in user's JWT. +- The Function is proxied through the local API (`http://localhost:54321`) + +
+
+ +If you execute Function with a different payload the response will change.
+Modify the `--data '{"name":"Functions"}'` line to `--data '{"name":"World"}'` and try invoking the command again! + +export const Page = ({ children }) => + +export default Page diff --git a/apps/docs/pages/guides/functions/best-practices.mdx b/apps/docs/pages/guides/functions/tips.mdx similarity index 71% rename from apps/docs/pages/guides/functions/best-practices.mdx rename to apps/docs/pages/guides/functions/tips.mdx index b670cd73a05..8d11169805a 100644 --- a/apps/docs/pages/guides/functions/best-practices.mdx +++ b/apps/docs/pages/guides/functions/tips.mdx @@ -1,9 +1,9 @@ import Layout from '~/layouts/DefaultGuideLayout' export const meta = { - id: 'functions-best-practices', - title: 'Edge Functions Best Practices', - description: 'Globally distributed TypeScript functions.', + id: 'functions-tips', + title: 'Edge Functions Tips', + description: 'Misc Tips for Supabase Edge Functions.', } ## Database Functions vs Edge Functions @@ -35,26 +35,6 @@ We recommend developing “fat functions”. This means that you should develop We recommend using hyphens to name functions because hyphens are the most URL-friendly of all the naming conventions (snake_case, camelCase, PascalCase). -## CORS (Cross-Origin Resource Sharing) - -We recommend adding a check to handle [CORS Preflight](https://developer.mozilla.org/en-US/docs/Glossary/Preflight_request) requests in your edge function to be able to invoke the function from browsers. - -See the [example on GitHub](https://github.com/supabase/supabase/blob/master/examples/edge-functions/supabase/functions/browser-with-cors/index.ts). - -```ts -export const corsHeaders = { - 'Access-Control-Allow-Origin': '*', - 'Access-Control-Allow-Headers': 'authorization, x-client-info, apikey', -} - -serve(async (req) => { - if (req.method === 'OPTIONS') { - return new Response('ok', { headers: corsHeaders }) - } - ... -}) -``` - ## Using HTTP Methods Edge Functions supports `GET`, `POST`, `PUT`, `PATCH`, `DELETE`, and `OPTIONS`. A function can be designed to perform different actions based on a request's HTTP method. See the [example on building a RESTful service](https://github.com/supabase/supabase/tree/master/examples/edge-functions/supabase/functions/restful-tasks) to learn how to handle different HTTP methods in your function. From 6a09b850a799e8a14f7fd3fe0d95032fc6608f23 Mon Sep 17 00:00:00 2001 From: thorwebdev Date: Thu, 12 Jan 2023 16:59:39 +0800 Subject: [PATCH 08/48] fix: get started link --- apps/docs/pages/guides/functions.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/docs/pages/guides/functions.mdx b/apps/docs/pages/guides/functions.mdx index 9c970cb6bfe..792972fe630 100644 --- a/apps/docs/pages/guides/functions.mdx +++ b/apps/docs/pages/guides/functions.mdx @@ -18,7 +18,7 @@ Edge Functions are server-side TypeScript functions, distributed globally at the - Edge Functions are globally distributed for low-latency.
-
From d4a38f7feb414facb2db19fed2fbe08c8f7b4aac Mon Sep 17 00:00:00 2001 From: thorwebdev Date: Fri, 13 Jan 2023 10:56:19 +0800 Subject: [PATCH 09/48] fix: functions invoke reference slug. --- spec/common-client-libs-sections.json | 2 +- spec/common-client-libs.yml | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/spec/common-client-libs-sections.json b/spec/common-client-libs-sections.json index 14606af13be..c97a764bc2a 100644 --- a/spec/common-client-libs-sections.json +++ b/spec/common-client-libs-sections.json @@ -730,7 +730,7 @@ { "id": "invoke", "title": "Invoke a function", - "slug": "auth-admin-invoke", + "slug": "functions-invoke", "product": "functions", "type": "function", "libs": ["js", "js_v1", "dart", "dart_v0"] diff --git a/spec/common-client-libs.yml b/spec/common-client-libs.yml index 1d2a2b713c6..d7f01a169c9 100644 --- a/spec/common-client-libs.yml +++ b/spec/common-client-libs.yml @@ -361,7 +361,7 @@ functions: - id: invoke title: invoke() - slug: auth-admin-invoke + slug: functions-invoke product: 'functions' - id: stream From 5037ee95e5e476d93c0077c2921dc4d1efdb2c97 Mon Sep 17 00:00:00 2001 From: thorwebdev Date: Fri, 13 Jan 2023 10:57:35 +0800 Subject: [PATCH 10/48] fix: review changes. --- .../NavigationMenu.constants.ts | 5 ++- apps/docs/pages/guides/functions.mdx | 2 +- apps/docs/pages/guides/functions/cors.mdx | 2 +- .../docs/pages/guides/functions/debugging.mdx | 20 +++++++++ ...ng-debugging.mdx => local-development.mdx} | 45 ++++++++++--------- .../{overview.mdx => quickstart.mdx} | 6 +-- apps/docs/pages/guides/functions/tips.mdx | 11 ++--- 7 files changed, 59 insertions(+), 32 deletions(-) create mode 100644 apps/docs/pages/guides/functions/debugging.mdx rename apps/docs/pages/guides/functions/{testing-debugging.mdx => local-development.mdx} (64%) rename apps/docs/pages/guides/functions/{overview.mdx => quickstart.mdx} (97%) diff --git a/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.constants.ts b/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.constants.ts index 75d54fb2afb..e46dafbf7df 100644 --- a/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.constants.ts +++ b/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.constants.ts @@ -421,12 +421,13 @@ export const functions = { label: 'Edge Functions', url: '/guides/functions', items: [ - { name: 'Overview', url: '/guides/functions/overview', items: [] }, + { name: 'Quickstart', url: '/guides/functions/quickstart', items: [] }, { name: 'Auth', url: '/guides/functions/auth', items: [] }, { name: 'CORS', url: '/guides/functions/cors', items: [] }, { name: 'CI/CD Workflow', url: '/guides/functions/cicd-workflow', items: [] }, + { name: 'Debugging', url: '/guides/functions/debugging', items: [] }, + { name: 'Local Development', url: '/guides/functions/local-development', items: [] }, { name: 'Managing Secrets', url: '/guides/functions/secrets', items: [] }, - { name: 'Testing & Debugging', url: '/guides/functions/testing-debugging', items: [] }, { name: 'Tips', url: '/guides/functions/tips', items: [] }, { name: 'Examples', diff --git a/apps/docs/pages/guides/functions.mdx b/apps/docs/pages/guides/functions.mdx index 792972fe630..9c970cb6bfe 100644 --- a/apps/docs/pages/guides/functions.mdx +++ b/apps/docs/pages/guides/functions.mdx @@ -18,7 +18,7 @@ Edge Functions are server-side TypeScript functions, distributed globally at the - Edge Functions are globally distributed for low-latency.
-
diff --git a/apps/docs/pages/guides/functions/cors.mdx b/apps/docs/pages/guides/functions/cors.mdx index fca25fa4933..e991ad181a9 100644 --- a/apps/docs/pages/guides/functions/cors.mdx +++ b/apps/docs/pages/guides/functions/cors.mdx @@ -12,7 +12,7 @@ See the [example on GitHub](https://github.com/supabase/supabase/blob/master/exa ### Recommended setup -We recommend adding a `corst.ts` file within a `_shared` folder which makes it easy to reuse the CORS headers across functions: +We recommend adding a `corst.ts` file within a [`_shared` folder](/docs/guides/functions/tips#organizing-your-edge-functions) which makes it easy to reuse the CORS headers across functions: ```ts cors.ts export const corsHeaders = { diff --git a/apps/docs/pages/guides/functions/debugging.mdx b/apps/docs/pages/guides/functions/debugging.mdx new file mode 100644 index 00000000000..62c93035b2a --- /dev/null +++ b/apps/docs/pages/guides/functions/debugging.mdx @@ -0,0 +1,20 @@ +import Layout from '~/layouts/DefaultGuideLayout' + +export const meta = { + id: 'functions-debugging', + title: 'Debugging Functions', + description: 'Debug functions in production.', +} + +You can debug your deployed Edge Functions using the ["Functions" section](https://app.supabase.com/project/_/functions) of the Dashboard. There are two debugging tools available: + +- Invocations: shows the Request and Response for each execution. +- Logs: shows any platform events, including deployments and errors. + +![Function invocations.](/docs/img/guides/functions/function-logs.png) + +When [developing locally](/docs/guides/functions/local-development) you will see error messages and console log statements printed to your local terminal window. + +export const Page = ({ children }) => + +export default Page diff --git a/apps/docs/pages/guides/functions/testing-debugging.mdx b/apps/docs/pages/guides/functions/local-development.mdx similarity index 64% rename from apps/docs/pages/guides/functions/testing-debugging.mdx rename to apps/docs/pages/guides/functions/local-development.mdx index b0b4cc468dd..01bd0f88a4d 100644 --- a/apps/docs/pages/guides/functions/testing-debugging.mdx +++ b/apps/docs/pages/guides/functions/local-development.mdx @@ -1,20 +1,11 @@ import Layout from '~/layouts/DefaultGuideLayout' export const meta = { - id: 'functions-testing-debugging', - title: 'Testing and Debugging Functions', - description: 'Test and debug functions locally and in production.', + id: 'functions-local-development', + title: 'Local Development', + description: 'Run your functions locally.', } -You can debug your deployed Edge Functions using the "Functions" section of the Dashboard. There are two types debugging tools available: - -- Invocations: shows the Request and Response for each execution. -- Logs: shows any platform events, including deployments and errors. - -![Function invocations.](/docs/img/guides/functions/function-logs.png) - -## Develop locally - You can run your Edge Function locally using [`supabase functions serve`](/docs/reference/cli/usage#supabase-functions-serve): ```bash @@ -26,7 +17,7 @@ The `functions serve` command has hot-reloading capabilities. It will watch for ### Invoke functions locally -While serving your local Function, you can execute it using curl: +While serving your local Function, you can invoke it using curl: ```bash curl --request POST 'http://localhost:54321/functions/v1/hello-world' \ @@ -35,20 +26,34 @@ curl --request POST 'http://localhost:54321/functions/v1/hello-world' \ --data '{ "name":"Functions" }' ``` +or using one of the [client libraries](/docs#reference-documentation), e.g. using [supabase-js](/docs/reference/javascript/functions-invoke): + +```js +import { createClient } from '@supabase/supabase-js' + +// Use the credentials outputted in your terminal when running `supabase start` +const supabase = createClient( + 'http://localhost:54321', + 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZS1kZW1vIiwicm9sZSI6ImFub24iLCJleHAiOjE5ODM4MTI5OTZ9.CRXP1A7WOeoJeXxjNni43kdQwgnWNReilDMblYTn_I0' +) + +const { data, error } = await supabase.functions.invoke('hello-world', { + body: { name: 'Functions' }, +}) +``` + You should see the response `{ "message":"Hello Functions!" }`. -
-Implementation details +If you execute Function with a different payload the response will change.
+Modify the `--data '{"name":"Functions"}'` line to `--data '{"name":"World"}'` and try invoking the command again! + + - Edge Functions don't serve HTML content (`GET` requests that return `text/html` are rewritten to `text/plain`). - The `Authorization` header is required. You can use either the `ANON` key, the `SERVICE_ROLE` key, or a logged-in user's JWT. - The Function is proxied through the local API (`http://localhost:54321`) -
-
- -If you execute Function with a different payload the response will change.
-Modify the `--data '{"name":"Functions"}'` line to `--data '{"name":"World"}'` and try invoking the command again! + export const Page = ({ children }) => diff --git a/apps/docs/pages/guides/functions/overview.mdx b/apps/docs/pages/guides/functions/quickstart.mdx similarity index 97% rename from apps/docs/pages/guides/functions/overview.mdx rename to apps/docs/pages/guides/functions/quickstart.mdx index 49935c280bf..7b489f2009e 100644 --- a/apps/docs/pages/guides/functions/overview.mdx +++ b/apps/docs/pages/guides/functions/quickstart.mdx @@ -1,10 +1,10 @@ import Layout from '~/layouts/DefaultGuideLayout' export const meta = { - id: 'functions-overview', - title: 'Edge Functions Overview', + id: 'functions-quickstart', + title: 'Edge Functions Quickstart', description: 'Globally distributed TypeScript Functions.', - sidebar_label: 'Overview', + sidebar_label: 'Quickstart', } Learn how to build an Edge Function locally and deploy it to the Supabase Platform in less than 7 minutes. diff --git a/apps/docs/pages/guides/functions/tips.mdx b/apps/docs/pages/guides/functions/tips.mdx index 8d11169805a..9c96998db4a 100644 --- a/apps/docs/pages/guides/functions/tips.mdx +++ b/apps/docs/pages/guides/functions/tips.mdx @@ -21,11 +21,12 @@ We recommend developing “fat functions”. This means that you should develop └── supabase ├── functions │ ├── _shared - │ | ├── supabaseAdmin.ts # Supabase client with SERVICE_ROLE key - │ │ └── supabaseClient.ts # Supabase client with ANON key - │ ├── function-one # use hyphens to name functions - │ │ └── index.ts - │ └── function-two + │ │ ├── supabaseAdmin.ts # Supabase client with SERVICE_ROLE key + │ │ └── supabaseClient.ts # Supabase client with ANON key + │ │ └── cors.ts # Reusable CORS headers + │ ├── function-one # use hyphens to name functions + │ │ └── index.ts + │ └── function-two │ └── index.ts ├── migrations └── config.toml From 17aa997ffe60dc85e21cc1874202678a7e4d32d1 Mon Sep 17 00:00:00 2001 From: Joshen Lim Date: Fri, 13 Jan 2023 14:04:06 +0800 Subject: [PATCH 11/48] Updates based as per PR comments --- studio/components/interfaces/Auth/Policies/Policies.tsx | 5 ++--- .../interfaces/Auth/Policies/PolicyTableRow/index.tsx | 8 ++++++-- 2 files changed, 8 insertions(+), 5 deletions(-) diff --git a/studio/components/interfaces/Auth/Policies/Policies.tsx b/studio/components/interfaces/Auth/Policies/Policies.tsx index 81669a1a6f5..550bd59f740 100644 --- a/studio/components/interfaces/Auth/Policies/Policies.tsx +++ b/studio/components/interfaces/Auth/Policies/Policies.tsx @@ -137,7 +137,7 @@ const Policies: FC = ({ tables, hasTables, isLocked }) => {
= ({ tables, hasTables, isLocked }) => { } />

- A table within this schema is required before you can create a Row-Level Security - policy. + Create a table in this schema first before creating a policy.

diff --git a/studio/components/interfaces/Auth/Policies/PolicyTableRow/index.tsx b/studio/components/interfaces/Auth/Policies/PolicyTableRow/index.tsx index 5caf05d60fe..b9eafb7e119 100644 --- a/studio/components/interfaces/Auth/Policies/PolicyTableRow/index.tsx +++ b/studio/components/interfaces/Auth/Policies/PolicyTableRow/index.tsx @@ -41,9 +41,13 @@ const PolicyTableRow: FC = ({ {policies.length === 0 && (

No policies created yet

- {table.rls_enabled && ( + {table.rls_enabled ? (

- As RLS has been enabled, all normal access to this table must be allowed by a policy. + RLS is enabled - create a policy to allow access to this table. +

+ ) : ( +

+ Warning: RLS is disabled - anonymous access is allowed to this table

)}
From 8dc866897e870f76040bfcab799c56c3d4842fce Mon Sep 17 00:00:00 2001 From: Joshen Lim Date: Wed, 11 Jan 2023 15:57:21 +0800 Subject: [PATCH 12/48] Support loadBySchema in meta store and loading tables in table editor based on selected schema --- .../TableEditorLayout/TableEditorLayout.tsx | 7 +- .../TableEditorLayout/TableEditorMenu.tsx | 300 +++++++++--------- studio/stores/common/PostgresMetaInterface.ts | 28 ++ studio/stores/pgmeta/ExtensionsStore.ts | 5 + studio/stores/pgmeta/ForeignTableStore.ts | 5 + studio/stores/pgmeta/MetaStore.ts | 2 +- studio/stores/pgmeta/PublicationStore.ts | 5 + studio/stores/pgmeta/RolesStore.ts | 5 + studio/stores/pgmeta/SchemaStore.ts | 5 + 9 files changed, 215 insertions(+), 147 deletions(-) diff --git a/studio/components/layouts/TableEditorLayout/TableEditorLayout.tsx b/studio/components/layouts/TableEditorLayout/TableEditorLayout.tsx index af9ac5edeec..2f44c5c7870 100644 --- a/studio/components/layouts/TableEditorLayout/TableEditorLayout.tsx +++ b/studio/components/layouts/TableEditorLayout/TableEditorLayout.tsx @@ -41,7 +41,6 @@ const TableEditorLayout: FC = ({ useEffect(() => { if (ui.selectedProject?.ref) { meta.schemas.load() - meta.tables.load() meta.types.load() meta.policies.load() meta.publications.load() @@ -50,6 +49,12 @@ const TableEditorLayout: FC = ({ } }, [ui.selectedProject?.ref]) + useEffect(() => { + if (selectedSchema && ui.selectedProject?.ref) { + meta.tables.loadBySchema(selectedSchema) + } + }, [ui.selectedProject?.ref, selectedSchema]) + useEffect(() => { if (isEnabled) { vault.load() diff --git a/studio/components/layouts/TableEditorLayout/TableEditorMenu.tsx b/studio/components/layouts/TableEditorLayout/TableEditorMenu.tsx index 1bc51c408ae..d016fbc6816 100644 --- a/studio/components/layouts/TableEditorLayout/TableEditorMenu.tsx +++ b/studio/components/layouts/TableEditorLayout/TableEditorMenu.tsx @@ -58,6 +58,9 @@ const TableEditorMenu: FC = ({ ) // @ts-ignore + const isFetchingTables = + tables.filter((t) => t.schema === selectedSchema).length === 0 && meta.tables.isLoading + const schema = schemas.find((schema) => schema.name === selectedSchema) const canCreateTables = checkPermissions(PermissionAction.TENANT_SQL_ADMIN_WRITE, 'tables') @@ -79,10 +82,12 @@ const TableEditorMenu: FC = ({ }, [selectedSchema]) const refreshTables = async () => { - setIsRefreshing(true) - await meta.tables.load() - if (selectedSchema) await meta.schemas.loadViews(selectedSchema) - setIsRefreshing(false) + if (selectedSchema) { + setIsRefreshing(true) + await meta.tables.loadBySchema(selectedSchema) + await meta.schemas.loadViews(selectedSchema) + setIsRefreshing(false) + } } const filteredTables = @@ -229,147 +234,159 @@ const TableEditorMenu: FC = ({
-
- {/* List of tables belonging to selected schema */} - {filteredTables.length > 0 && ( - - -
-
-

Tables

-

- ({filteredTables.length}) -

+ {isFetchingTables ? ( +
+ +

Loading tables...

+
+ ) : searchText.length === 0 && filteredTables.length === 0 && filteredViews.length === 0 ? ( +
+

No tables available

+

This schema has no tables available yet

+
+ ) : ( +
+ {/* List of tables belonging to selected schema */} + {filteredTables.length > 0 && ( + + +
+
+

Tables

+

+ ({filteredTables.length}) +

+
+
- -
- - } - /> + + } + /> -
- {filteredTables.map((table) => { - const isActive = Number(id) === table.id +
+ {filteredTables.map((table) => { + const isActive = Number(id) === table.id + return ( + } + onClick={() => onEditTable(table)} + > + Edit Table + , + } + onClick={() => onDuplicateTable(table)} + > + Duplicate Table + , + , + } + onClick={() => onDeleteTable(table)} + > + Delete Table + , + ]} + > +
+ +
+ + ) + } + /> + ) + })} +
+
+ )} + + {/* List of views belonging to selected schema */} + {filteredViews.length > 0 && ( + + +

Views

+

({filteredViews.length})

+
+ } + /> + + {filteredViews.map((view: SchemaView) => { + const viewId = Base64.encode(JSON.stringify(view)) + const isActive = id === viewId return ( - } - onClick={() => onEditTable(table)} - > - Edit Table - , - } - onClick={() => onDuplicateTable(table)} - > - Duplicate Table - , - , - } - onClick={() => onDeleteTable(table)} - > - Delete Table - , - ]} - > -
- -
- - ) - } - /> + + + +
+

{view.name}

+
+ + + ) })} -
- - )} + + )} - {/* List of views belonging to selected schema */} - {filteredViews.length > 0 && ( - - -

Views

-

({filteredViews.length})

-
- } - /> + {/* List of foreign tables belonging to selected schema */} + {filteredForeignTables.length > 0 && ( + + +

Foreign Tables

+

+ ({filteredForeignTables.length}) +

+ + } + /> - {filteredViews.map((view: SchemaView) => { - const viewId = Base64.encode(JSON.stringify(view)) - const isActive = id === viewId - return ( - - - -
-

{view.name}

-
- - - - ) - })} - - )} - - {/* List of foreign tables belonging to selected schema */} - {filteredForeignTables.length > 0 && ( - - -

Foreign Tables

-

- ({filteredForeignTables.length}) -

- - } - /> - - {filteredForeignTables.map((table: Partial) => { - const isActive = Number(id) === table.id - return ( - - - -
-

{table.name}

-
- - - - ) - })} - - )} - + {filteredForeignTables.map((table: Partial) => { + const isActive = Number(id) === table.id + return ( + + + +
+

{table.name}

+
+ + + + ) + })} + + )} + + )} {searchText.length > 0 && filteredTables.length === 0 && filteredViews.length === 0 && (
@@ -379,13 +396,6 @@ const TableEditorMenu: FC = ({

)} - - {searchText.length === 0 && filteredTables.length === 0 && filteredViews.length === 0 && ( -
-

No tables available

-

This schema has no tables available yet

-
- )} ) } diff --git a/studio/stores/common/PostgresMetaInterface.ts b/studio/stores/common/PostgresMetaInterface.ts index 5345022f277..07445b75e46 100644 --- a/studio/stores/common/PostgresMetaInterface.ts +++ b/studio/stores/common/PostgresMetaInterface.ts @@ -15,6 +15,7 @@ export interface IPostgresMetaInterface { isInitialized: boolean load: () => void + loadBySchema: (schema: string) => Promise create: (payload: any) => Promise update: (id: number | string, updates: any) => Promise del: (id: number | string, cascade?: boolean) => Promise @@ -116,6 +117,33 @@ export default class PostgresMetaInterface implements IPostgresMetaInterface< } } + async loadBySchema(schema: string) { + let { LOADING, ERROR, LOADED } = this.STATES + try { + this.setError(null) + this.setState(LOADING) + + const url = this.url.includes('?') + ? `${this.url}&included_schemas=${schema}` + : `${this.url}?included_schemas=${schema}` + const response = await get(url, { headers: this.headers }) + if (response.error) throw response.error + + const data = response as T[] + const formattedData = keyBy(data, this.identifier) + + this.data = { ...this.data, ...formattedData } + this.setState(LOADED) + + return data + } catch (error: any) { + console.error('Error in loadBySchema:', error.message) + this.setError(error) + this.setState(ERROR) + return { error } + } + } + initialDataArray(value: T[]) { if (this.state === this.STATES.INITIAL) { this.data = keyBy(value, this.identifier) diff --git a/studio/stores/pgmeta/ExtensionsStore.ts b/studio/stores/pgmeta/ExtensionsStore.ts index 9df35a1ab4e..fbb26f7d5e8 100644 --- a/studio/stores/pgmeta/ExtensionsStore.ts +++ b/studio/stores/pgmeta/ExtensionsStore.ts @@ -13,4 +13,9 @@ export default class ExtensionsStore extends PostgresMetaInterface { ) { super(rootStore, dataUrl, headers, options) } + + // loadBySchema is not supported in this store + async loadBySchema(schema: string) { + return [] + } } diff --git a/studio/stores/pgmeta/RolesStore.ts b/studio/stores/pgmeta/RolesStore.ts index 5bd5d59fc1b..b4bb4d0c055 100644 --- a/studio/stores/pgmeta/RolesStore.ts +++ b/studio/stores/pgmeta/RolesStore.ts @@ -28,4 +28,9 @@ export default class RolesStore extends PostgresMetaInterface { 'pg_read_all_data', 'pg_write_all_data', ] + + // loadBySchema is not supported in this store + async loadBySchema(schema: string) { + return [] + } } diff --git a/studio/stores/pgmeta/SchemaStore.ts b/studio/stores/pgmeta/SchemaStore.ts index 1fd1ff89ac5..ffa9554e200 100644 --- a/studio/stores/pgmeta/SchemaStore.ts +++ b/studio/stores/pgmeta/SchemaStore.ts @@ -45,4 +45,9 @@ export default class SchemaStore extends PostgresMetaInterface { this.views = views return views } + + // loadBySchema is not supported in this store + async loadBySchema(schema: string) { + return [] + } } From e34989cbf2d66b0c763d7970091af08b9244de5a Mon Sep 17 00:00:00 2001 From: Joshen Lim Date: Wed, 11 Jan 2023 17:00:21 +0800 Subject: [PATCH 13/48] Add ViewStore --- .../SidePanelEditor/SidePanelEditor.tsx | 4 +-- .../TableGridEditor/TableGridEditor.tsx | 4 +-- .../TableEditorLayout/TableEditorLayout.tsx | 1 + .../TableEditorLayout.types.ts | 4 --- .../TableEditorLayout/TableEditorMenu.tsx | 31 ++++++------------- studio/pages/project/[ref]/editor/[id].tsx | 4 +-- studio/pages/project/[ref]/editor/index.tsx | 2 +- studio/stores/pgmeta/MetaStore.ts | 14 +++++++-- studio/stores/pgmeta/SchemaStore.ts | 31 +------------------ studio/stores/pgmeta/ViewStore.ts | 16 ++++++++++ studio/stores/project/VaultStore.ts | 8 ++--- studio/types/ui.ts | 6 ++++ 12 files changed, 55 insertions(+), 70 deletions(-) delete mode 100644 studio/components/layouts/TableEditorLayout/TableEditorLayout.types.ts create mode 100644 studio/stores/pgmeta/ViewStore.ts diff --git a/studio/components/interfaces/TableGridEditor/SidePanelEditor/SidePanelEditor.tsx b/studio/components/interfaces/TableGridEditor/SidePanelEditor/SidePanelEditor.tsx index 7e410f7d2ab..1c4f3fa1a55 100644 --- a/studio/components/interfaces/TableGridEditor/SidePanelEditor/SidePanelEditor.tsx +++ b/studio/components/interfaces/TableGridEditor/SidePanelEditor/SidePanelEditor.tsx @@ -144,8 +144,8 @@ const SidePanelEditor: FC = ({ closePanel() } - if (configuration.isEncrypted) { - await meta.schemas.loadViews(selectedTable?.schema ?? '') + if (configuration.isEncrypted && selectedTable?.schema) { + await meta.views.loadBySchema(selectedTable.schema) } resolve() diff --git a/studio/components/interfaces/TableGridEditor/TableGridEditor.tsx b/studio/components/interfaces/TableGridEditor/TableGridEditor.tsx index 58e2adba72d..36798d285ea 100644 --- a/studio/components/interfaces/TableGridEditor/TableGridEditor.tsx +++ b/studio/components/interfaces/TableGridEditor/TableGridEditor.tsx @@ -5,11 +5,11 @@ import { find, isUndefined } from 'lodash' import { PostgresColumn, PostgresTable } from '@supabase/postgres-meta' import { PermissionAction } from '@supabase/shared-types/out/constants' +import { SchemaView } from 'types' import { checkPermissions, useFlag, useStore } from 'hooks' import GridHeaderActions from './GridHeaderActions' import NotFoundState from './NotFoundState' import SidePanelEditor from './SidePanelEditor' -import { SchemaView } from 'components/layouts/TableEditorLayout/TableEditorLayout.types' import { Dictionary, parseSupaTable, SupabaseGrid, SupabaseGridRef } from 'components/grid' interface Props { @@ -81,7 +81,7 @@ const TableGridEditor: FC = ({ // @ts-ignore const schema = meta.schemas.list().find((schema) => schema.name === selectedSchema) - const isViewSelected = Object.keys(selectedTable).length === 2 + const isViewSelected = !Object.keys(selectedTable).includes('rls_enabled') const isForeignTableSelected = meta.foreignTables.byId(selectedTable.id) !== undefined const isLocked = meta.excludedSchemas.includes(schema?.name ?? '') const canUpdateTables = checkPermissions(PermissionAction.TENANT_SQL_ADMIN_WRITE, 'tables') diff --git a/studio/components/layouts/TableEditorLayout/TableEditorLayout.tsx b/studio/components/layouts/TableEditorLayout/TableEditorLayout.tsx index 2f44c5c7870..9791b01dfa1 100644 --- a/studio/components/layouts/TableEditorLayout/TableEditorLayout.tsx +++ b/studio/components/layouts/TableEditorLayout/TableEditorLayout.tsx @@ -52,6 +52,7 @@ const TableEditorLayout: FC = ({ useEffect(() => { if (selectedSchema && ui.selectedProject?.ref) { meta.tables.loadBySchema(selectedSchema) + meta.views.loadBySchema(selectedSchema) } }, [ui.selectedProject?.ref, selectedSchema]) diff --git a/studio/components/layouts/TableEditorLayout/TableEditorLayout.types.ts b/studio/components/layouts/TableEditorLayout/TableEditorLayout.types.ts deleted file mode 100644 index 636a06056a8..00000000000 --- a/studio/components/layouts/TableEditorLayout/TableEditorLayout.types.ts +++ /dev/null @@ -1,4 +0,0 @@ -export interface SchemaView { - schema: string - name: string -} diff --git a/studio/components/layouts/TableEditorLayout/TableEditorMenu.tsx b/studio/components/layouts/TableEditorLayout/TableEditorMenu.tsx index d016fbc6816..a832e6643f4 100644 --- a/studio/components/layouts/TableEditorLayout/TableEditorMenu.tsx +++ b/studio/components/layouts/TableEditorLayout/TableEditorMenu.tsx @@ -1,4 +1,4 @@ -import { FC, useEffect, useState } from 'react' +import { FC, useState } from 'react' import { useRouter } from 'next/router' import Link from 'next/link' import { partition } from 'lodash' @@ -23,8 +23,8 @@ import { PermissionAction } from '@supabase/shared-types/out/constants' import { PostgresSchema, PostgresTable } from '@supabase/postgres-meta' import Base64 from 'lib/base64' +import { SchemaView } from 'types' import { checkPermissions, useStore } from 'hooks' -import { SchemaView } from './TableEditorLayout.types' import ProductMenuItem from 'components/ui/ProductMenu/ProductMenuItem' interface Props { @@ -53,12 +53,13 @@ const TableEditorMenu: FC = ({ const tables: PostgresTable[] = meta.tables.list( (table: PostgresTable) => table.schema === selectedSchema ) + const views: SchemaView[] = meta.views.list((view: SchemaView) => view.schema === selectedSchema) const foreignTables: Partial[] = meta.foreignTables.list( - (table: PostgresTable) => table.schema === selectedSchema + (table: Partial) => table.schema === selectedSchema ) - // @ts-ignore const isFetchingTables = + // @ts-ignore tables.filter((t) => t.schema === selectedSchema).length === 0 && meta.tables.isLoading const schema = schemas.find((schema) => schema.name === selectedSchema) @@ -67,25 +68,11 @@ const TableEditorMenu: FC = ({ const [searchText, setSearchText] = useState('') const [isRefreshing, setIsRefreshing] = useState(false) - // We may need to shift this to the schema store and do something like meta.schema.loadViews() - // I don't need we need a separate store for views - useEffect(() => { - let cancel = false - const fetchViews = async (selectedSchema: string) => { - await meta.schemas.loadViews(selectedSchema) - } - if (selectedSchema) fetchViews(selectedSchema) - - return () => { - cancel = true - } - }, [selectedSchema]) - const refreshTables = async () => { if (selectedSchema) { setIsRefreshing(true) await meta.tables.loadBySchema(selectedSchema) - await meta.schemas.loadViews(selectedSchema) + await meta.views.loadBySchema(selectedSchema) setIsRefreshing(false) } } @@ -98,9 +85,9 @@ const TableEditorMenu: FC = ({ const filteredViews = searchText.length === 0 - ? meta.schemas.views || [] - : (meta.schemas.views || []).filter((view) => - view.name.toLowerCase().includes(searchText.toLowerCase()) + ? views || [] + : (views || []).filter((view: Partial) => + (view?.name ?? '').toLowerCase().includes(searchText.toLowerCase()) ) const filteredForeignTables = diff --git a/studio/pages/project/[ref]/editor/[id].tsx b/studio/pages/project/[ref]/editor/[id].tsx index e273343bcd9..2b191faf79a 100644 --- a/studio/pages/project/[ref]/editor/[id].tsx +++ b/studio/pages/project/[ref]/editor/[id].tsx @@ -140,7 +140,7 @@ const TableEditorPage: NextPage = () => { }) await meta.tables.loadById(selectedColumnToDelete!.table_id) - if (selectedSchema) await meta.schemas.loadViews(selectedSchema) + if (selectedSchema) await meta.views.loadBySchema(selectedSchema) } catch (error: any) { ui.setNotification({ category: 'error', @@ -171,7 +171,7 @@ const TableEditorPage: NextPage = () => { category: 'success', message: `Successfully deleted table "${selectedTableToDelete.name}"`, }) - if (selectedSchema) await meta.schemas.loadViews(selectedSchema) + if (selectedSchema) await meta.views.loadBySchema(selectedSchema) } catch (error: any) { ui.setNotification({ error, diff --git a/studio/pages/project/[ref]/editor/index.tsx b/studio/pages/project/[ref]/editor/index.tsx index 7532dd7fc3c..ee5e4ffc1cf 100644 --- a/studio/pages/project/[ref]/editor/index.tsx +++ b/studio/pages/project/[ref]/editor/index.tsx @@ -55,7 +55,7 @@ const Editor: NextPage = () => { category: 'success', message: `Successfully deleted ${selectedTableToDelete!.name}`, }) - await meta.schemas.loadViews(selectedSchema) + await meta.views.loadBySchema(selectedSchema) } catch (error: any) { ui.setNotification({ category: 'error', diff --git a/studio/stores/pgmeta/MetaStore.ts b/studio/stores/pgmeta/MetaStore.ts index 282732007a4..dc599292ab5 100644 --- a/studio/stores/pgmeta/MetaStore.ts +++ b/studio/stores/pgmeta/MetaStore.ts @@ -8,16 +8,17 @@ import { PostgresTable, PostgresRelationship, PostgresPrimaryKey, + PostgresSchema, } from '@supabase/postgres-meta' import { IS_PLATFORM, API_URL } from 'lib/constants' import { post } from 'lib/common/fetch' import { timeout } from 'lib/helpers' -import { ResponseError } from 'types' +import { ResponseError, SchemaView } from 'types' import { IRootStore } from '../RootStore' import ColumnStore from './ColumnStore' -import SchemaStore, { ISchemaStore } from './SchemaStore' +import SchemaStore from './SchemaStore' import TableStore, { ITableStore } from './TableStore' import OpenApiStore, { IOpenApiStore } from './OpenApiStore' import { IPostgresMetaInterface } from '../common/PostgresMetaInterface' @@ -41,6 +42,7 @@ import HooksStore from './HooksStore' import ExtensionsStore from './ExtensionsStore' import TypesStore from './TypesStore' import ForeignTableStore from './ForeignTableStore' +import ViewStore from './ViewStore' const BATCH_SIZE = 1000 const CHUNK_SIZE = 1024 * 1024 * 0.1 // 0.1MB @@ -51,7 +53,8 @@ export interface IMetaStore { openApi: IOpenApiStore tables: ITableStore columns: IPostgresMetaInterface - schemas: ISchemaStore + schemas: IPostgresMetaInterface + views: IPostgresMetaInterface foreignTables: IPostgresMetaInterface> hooks: IPostgresMetaInterface @@ -132,6 +135,7 @@ export default class MetaStore implements IMetaStore { tables: TableStore columns: ColumnStore schemas: SchemaStore + views: ViewStore foreignTables: ForeignTableStore hooks: HooksStore @@ -184,6 +188,7 @@ export default class MetaStore implements IMetaStore { this.tables = new TableStore(this.rootStore, `${this.baseUrl}/tables`, this.headers) this.columns = new ColumnStore(this.rootStore, `${this.baseUrl}/columns`, this.headers) this.schemas = new SchemaStore(this.rootStore, `${this.baseUrl}/schemas`, this.headers) + this.views = new ViewStore(this.rootStore, `${this.baseUrl}/views`, this.headers) this.foreignTables = new ForeignTableStore( this.rootStore, `${this.baseUrl}/foreign-tables`, @@ -903,6 +908,9 @@ export default class MetaStore implements IMetaStore { this.schemas.setUrl(`${this.baseUrl}/schemas`) this.schemas.setHeaders(this.headers) + this.views.setUrl(`${this.baseUrl}/views`) + this.views.setHeaders(this.headers) + this.foreignTables.setUrl(`${this.baseUrl}/foreign-tables`) this.foreignTables.setHeaders(this.headers) diff --git a/studio/stores/pgmeta/SchemaStore.ts b/studio/stores/pgmeta/SchemaStore.ts index ffa9554e200..09236d13166 100644 --- a/studio/stores/pgmeta/SchemaStore.ts +++ b/studio/stores/pgmeta/SchemaStore.ts @@ -1,17 +1,8 @@ -import { observable, makeObservable } from 'mobx' import { PostgresSchema } from '@supabase/postgres-meta' - -import PostgresMetaInterface, { IPostgresMetaInterface } from '../common/PostgresMetaInterface' +import PostgresMetaInterface from '../common/PostgresMetaInterface' import { IRootStore } from '../RootStore' -import { SchemaView, ResponseError } from 'types' -export interface ISchemaStore extends IPostgresMetaInterface { - views: SchemaView[] - loadViews: (schema: string) => Promise -} export default class SchemaStore extends PostgresMetaInterface { - views: SchemaView[] = [] - constructor( rootStore: IRootStore, dataUrl: string, @@ -21,10 +12,6 @@ export default class SchemaStore extends PostgresMetaInterface { options?: { identifier: string } ) { super(rootStore, dataUrl, headers, options) - makeObservable(this, { - views: observable, - }) - this.views = [] } // Dashboard to hide schemas with pg_ prefix @@ -34,20 +21,4 @@ export default class SchemaStore extends PostgresMetaInterface { return super.list(schemasFilter) } - - async loadViews(schema: string) { - const query = ` - select schemaname as schema, viewname as name from pg_catalog.pg_views - where schemaname = '${schema}' - order by schemaname, viewname; - ` - const views = await this.rootStore.meta.query(query) - this.views = views - return views - } - - // loadBySchema is not supported in this store - async loadBySchema(schema: string) { - return [] - } } diff --git a/studio/stores/pgmeta/ViewStore.ts b/studio/stores/pgmeta/ViewStore.ts new file mode 100644 index 00000000000..63b74701e42 --- /dev/null +++ b/studio/stores/pgmeta/ViewStore.ts @@ -0,0 +1,16 @@ +import { SchemaView } from 'types' +import PostgresMetaInterface from '../common/PostgresMetaInterface' +import { IRootStore } from '../RootStore' + +export default class ViewStore extends PostgresMetaInterface { + constructor( + rootStore: IRootStore, + dataUrl: string, + headers?: { + [prop: string]: any + }, + options?: { identifier: string } + ) { + super(rootStore, dataUrl, headers, options) + } +} diff --git a/studio/stores/project/VaultStore.ts b/studio/stores/project/VaultStore.ts index a470a864470..166f59bf7fe 100644 --- a/studio/stores/project/VaultStore.ts +++ b/studio/stores/project/VaultStore.ts @@ -1,7 +1,7 @@ import { PostgresColumn } from '@supabase/postgres-meta' import { Query } from 'components/grid' import { makeAutoObservable } from 'mobx' -import { VaultSecret } from 'types' +import { SchemaView, VaultSecret } from 'types' import { IRootStore } from '../RootStore' export interface IVaultStore { @@ -211,9 +211,9 @@ export default class VaultStore implements IVaultStore { async listEncryptedColumns(schema: string, table: string) { if (!table) return [] - await this.rootStore.meta.schemas.loadViews(schema) - const decryptedView = this.rootStore.meta.schemas.views.find( - (view) => view.name === `decrypted_${table}` + await this.rootStore.meta.views.loadBySchema(schema) + const decryptedView = this.rootStore.meta.views.find( + (view: SchemaView) => view.name === `decrypted_${table}` ) if (!decryptedView) return [] diff --git a/studio/types/ui.ts b/studio/types/ui.ts index f8d5308ac25..edeb42ec9ac 100644 --- a/studio/types/ui.ts +++ b/studio/types/ui.ts @@ -1,3 +1,5 @@ +import { PostgresColumn } from '@supabase/postgres-meta' + export interface Notification { category: 'info' | 'error' | 'success' | 'loading' message: string // Readable message for users to understand @@ -33,6 +35,10 @@ export interface VaultSecret { } export interface SchemaView { + id: number name: string schema: string + is_updatable: boolean + comment?: string + columns: PostgresColumn[] } From 633f296eeeef3fe9798be9c7276d5fc6313e54b7 Mon Sep 17 00:00:00 2001 From: Joshen Lim Date: Wed, 11 Jan 2023 22:23:17 +0800 Subject: [PATCH 14/48] Fix tables not loading in table editor on [id] route after new refactor --- .../TableEditorLayout/TableEditorLayout.tsx | 25 ++++++++++++++++--- .../TableEditorLayout/TableEditorMenu.tsx | 19 +++++++------- studio/pages/project/[ref]/editor/[id].tsx | 17 +++++++------ 3 files changed, 40 insertions(+), 21 deletions(-) diff --git a/studio/components/layouts/TableEditorLayout/TableEditorLayout.tsx b/studio/components/layouts/TableEditorLayout/TableEditorLayout.tsx index 9791b01dfa1..19178db155f 100644 --- a/studio/components/layouts/TableEditorLayout/TableEditorLayout.tsx +++ b/studio/components/layouts/TableEditorLayout/TableEditorLayout.tsx @@ -4,7 +4,7 @@ import { observer } from 'mobx-react-lite' import { PostgresTable } from '@supabase/postgres-meta' import { PermissionAction } from '@supabase/shared-types/out/constants' -import { checkPermissions, useStore } from 'hooks' +import { checkPermissions, useParams, useStore } from 'hooks' import Error from 'components/ui/Error' import ProjectLayout from '../ProjectLayout/ProjectLayout' import TableEditorMenu from './TableEditorMenu' @@ -30,13 +30,14 @@ const TableEditorLayout: FC = ({ children, }) => { const { vault, meta, ui } = useStore() + const { id, type } = useParams() const { isInitialized, isLoading, error } = meta.tables const [loaded, setLoaded] = useState(isInitialized) const canReadTables = checkPermissions(PermissionAction.TENANT_SQL_ADMIN_READ, 'tables') const vaultExtension = meta.extensions.byId('supabase_vault') - const isEnabled = vaultExtension !== undefined && vaultExtension?.installed_version !== null + const isVaultEnabled = vaultExtension !== undefined && vaultExtension?.installed_version !== null useEffect(() => { if (ui.selectedProject?.ref) { @@ -45,6 +46,12 @@ const TableEditorLayout: FC = ({ meta.policies.load() meta.publications.load() meta.extensions.load() + + // [Joshen] pg-meta doesn't support loading views nor foreign tables by a specific ID yet + // Separately, Alaister and I chatted that perhaps we leverage on pg-catalog's pg-class + // table directly, so we can fetch the schema of tables/views/foreign-tables in one call + // rather than trying to discern if the ID is a view, or foreign table (refer to below) + meta.views.load() meta.foreignTables.load() } }, [ui.selectedProject?.ref]) @@ -57,10 +64,20 @@ const TableEditorLayout: FC = ({ }, [ui.selectedProject?.ref, selectedSchema]) useEffect(() => { - if (isEnabled) { + if (ui.selectedProject?.ref && id) { + // [Joshen] This is a little silly, but because fetching tables/views/foreign-tables + // are all through different endpoints, we need to discern them + if (type !== 'view' && type !== 'foreign') { + meta.tables.loadById(Number(id)) + } + } + }, [ui.selectedProject?.ref, id]) + + useEffect(() => { + if (isVaultEnabled) { vault.load() } - }, [ui.selectedProject?.ref, isEnabled]) + }, [ui.selectedProject?.ref, isVaultEnabled]) useEffect(() => { let cancel = false diff --git a/studio/components/layouts/TableEditorLayout/TableEditorMenu.tsx b/studio/components/layouts/TableEditorLayout/TableEditorMenu.tsx index a832e6643f4..be30f4d81f6 100644 --- a/studio/components/layouts/TableEditorLayout/TableEditorMenu.tsx +++ b/studio/components/layouts/TableEditorLayout/TableEditorMenu.tsx @@ -1,5 +1,4 @@ import { FC, useState } from 'react' -import { useRouter } from 'next/router' import Link from 'next/link' import { partition } from 'lodash' import { observer } from 'mobx-react-lite' @@ -22,9 +21,8 @@ import * as Tooltip from '@radix-ui/react-tooltip' import { PermissionAction } from '@supabase/shared-types/out/constants' import { PostgresSchema, PostgresTable } from '@supabase/postgres-meta' -import Base64 from 'lib/base64' import { SchemaView } from 'types' -import { checkPermissions, useStore } from 'hooks' +import { checkPermissions, useParams, useStore } from 'hooks' import ProductMenuItem from 'components/ui/ProductMenu/ProductMenuItem' interface Props { @@ -45,8 +43,7 @@ const TableEditorMenu: FC = ({ onDuplicateTable = () => {}, }) => { const { meta, ui } = useStore() - const router = useRouter() - const { id } = router.query + const { id } = useParams() const projectRef = ui.selectedProject?.ref const schemas: PostgresSchema[] = meta.schemas.list() @@ -324,12 +321,11 @@ const TableEditorMenu: FC = ({ /> {filteredViews.map((view: SchemaView) => { - const viewId = Base64.encode(JSON.stringify(view)) - const isActive = id === viewId + const isActive = Number(id) === view.id return ( - + - +

{view.name}

@@ -359,7 +355,10 @@ const TableEditorMenu: FC = ({ {filteredForeignTables.map((table: Partial) => { const isActive = Number(id) === table.id return ( - +
diff --git a/studio/pages/project/[ref]/editor/[id].tsx b/studio/pages/project/[ref]/editor/[id].tsx index 2b191faf79a..32893d76bec 100644 --- a/studio/pages/project/[ref]/editor/[id].tsx +++ b/studio/pages/project/[ref]/editor/[id].tsx @@ -7,17 +7,16 @@ import { isUndefined, isNaN } from 'lodash' import { Alert, Button, Checkbox, IconExternalLink, Modal } from 'ui' import { PostgresTable, PostgresColumn } from '@supabase/postgres-meta' -import Base64 from 'lib/base64' -import { tryParseJson } from 'lib/helpers' -import { useStore, withAuth, useUrlState } from 'hooks' +import { useStore, withAuth, useUrlState, useParams } from 'hooks' import { Dictionary } from 'components/grid' import { TableEditorLayout } from 'components/layouts' import { TableGridEditor } from 'components/interfaces' import ConfirmationModal from 'components/ui/ConfirmationModal' +import { SchemaView } from 'types' const TableEditorPage: NextPage = () => { const router = useRouter() - const { id }: any = router.query + const { id } = useParams() const [_, setParams] = useUrlState({ arrayKeys: ['filter', 'sort'] }) const { meta, ui } = useStore() @@ -37,13 +36,17 @@ const TableEditorPage: NextPage = () => { const projectRef = ui.selectedProject?.ref const tables: PostgresTable[] = meta.tables.list() + const views: SchemaView[] = meta.views.list() const foreignTables: Partial[] = meta.foreignTables.list() const selectedTable = !isNaN(Number(id)) ? // @ts-ignore - tables.concat(foreignTables).find((table) => table.id === Number(id)) - : id !== undefined - ? tryParseJson(Base64.decode(id)) + tables + // @ts-ignore + .concat(views) + // @ts-ignore + .concat(foreignTables) + .find((table) => table.id === Number(id)) : undefined useEffect(() => { From d739a011f62cfaddafbf2b53490873a4c3659b69 Mon Sep 17 00:00:00 2001 From: thorwebdev Date: Fri, 13 Jan 2023 16:52:44 +0800 Subject: [PATCH 15/48] feat: add import maps guide. --- .../NavigationMenu.constants.ts | 4 +- apps/docs/pages/guides/functions/cors.mdx | 2 +- .../pages/guides/functions/import-maps.mdx | 53 ++++++++++++++++++ .../guides/functions/local-development.mdx | 2 +- .../pages/guides/functions/quickstart.mdx | 56 ++++++++++++++++++- apps/docs/pages/guides/functions/tips.mdx | 45 --------------- apps/www/lib/redirects.js | 5 ++ 7 files changed, 116 insertions(+), 51 deletions(-) create mode 100644 apps/docs/pages/guides/functions/import-maps.mdx delete mode 100644 apps/docs/pages/guides/functions/tips.mdx diff --git a/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.constants.ts b/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.constants.ts index e46dafbf7df..8fa5333d8d0 100644 --- a/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.constants.ts +++ b/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.constants.ts @@ -423,12 +423,12 @@ export const functions = { items: [ { name: 'Quickstart', url: '/guides/functions/quickstart', items: [] }, { name: 'Auth', url: '/guides/functions/auth', items: [] }, - { name: 'CORS', url: '/guides/functions/cors', items: [] }, { name: 'CI/CD Workflow', url: '/guides/functions/cicd-workflow', items: [] }, + { name: 'CORS', url: '/guides/functions/cors', items: [] }, { name: 'Debugging', url: '/guides/functions/debugging', items: [] }, + { name: 'Import Maps', url: '/guides/functions/import-maps', items: [] }, { name: 'Local Development', url: '/guides/functions/local-development', items: [] }, { name: 'Managing Secrets', url: '/guides/functions/secrets', items: [] }, - { name: 'Tips', url: '/guides/functions/tips', items: [] }, { name: 'Examples', url: '/guides/functions/examples', diff --git a/apps/docs/pages/guides/functions/cors.mdx b/apps/docs/pages/guides/functions/cors.mdx index e991ad181a9..14f1a1208d9 100644 --- a/apps/docs/pages/guides/functions/cors.mdx +++ b/apps/docs/pages/guides/functions/cors.mdx @@ -12,7 +12,7 @@ See the [example on GitHub](https://github.com/supabase/supabase/blob/master/exa ### Recommended setup -We recommend adding a `corst.ts` file within a [`_shared` folder](/docs/guides/functions/tips#organizing-your-edge-functions) which makes it easy to reuse the CORS headers across functions: +We recommend adding a `corst.ts` file within a [`_shared` folder](/docs/guides/functions/quickstart#organizing-your-edge-functions) which makes it easy to reuse the CORS headers across functions: ```ts cors.ts export const corsHeaders = { diff --git a/apps/docs/pages/guides/functions/import-maps.mdx b/apps/docs/pages/guides/functions/import-maps.mdx new file mode 100644 index 00000000000..1509a9cd8a9 --- /dev/null +++ b/apps/docs/pages/guides/functions/import-maps.mdx @@ -0,0 +1,53 @@ +import Layout from '~/layouts/DefaultGuideLayout' + +export const meta = { + id: 'functions-import-maps', + title: 'Import Maps', + description: 'Using Import Maps.', +} + +Since [Supabase CLI](https://supabase.com/docs/guides/resources/supabase-cli) version `1.33.0` [import maps](https://deno.land/manual@v1.29.2/node/import_maps) can be used with Supabase Edge Functions. + +[Import maps](https://github.com/WICG/import-maps#the-import-map) is a web-platform standard that allows you to use bare specifiers with Deno without having to install the Node.js package locally. + +So if we want to do the following in our code: + +```ts, ignore +import lodash from "lodash"; +``` + +We can accomplish this using an import map, and we don't even have to install the `lodash` package locally. We would want to create a JSON file (for example **import_map.json**) with the following: + +```json +{ + "imports": { + "lodash": "https://cdn.skypack.dev/lodash" + } +} +``` + +## Import Map Placement + +We recommend creating one `import_map.json` within the `/supabase/functions` folder (see [Organizing your Edge Functions](/docs/guides/functions/quickstart#organizing-your-edge-functions)), similar to a `package.json` file, to define imports that can be used across all of your project's functions. + +Alternatively, you can create one `import_map.json` file in each function folder, which will take priority over a top-level file. + +Lastly, you can override this default behaviour by providing the `--import-map ` flag to the `serve` and `deploy` commands. + +## Visual Studio Code Configuration + +In order for vscode to understand the imports correctly, you need to specify the `deno.importMap` flag in your `.vscode/settings.json` file: + +```json settings.json +{ + "deno.enable": true, + "deno.unstable": true, + "deno.importMap": "./supabase/functions/import_map.json" +} +``` + +For a full guide on developing with Deno in Visual Studio Code, see [this guide](https://deno.land/manual@v1.25.4/vscode_deno). + +export const Page = ({ children }) => + +export default Page diff --git a/apps/docs/pages/guides/functions/local-development.mdx b/apps/docs/pages/guides/functions/local-development.mdx index 01bd0f88a4d..fffd6ac7072 100644 --- a/apps/docs/pages/guides/functions/local-development.mdx +++ b/apps/docs/pages/guides/functions/local-development.mdx @@ -15,7 +15,7 @@ supabase functions serve hello-world # start the Function watcher The `functions serve` command has hot-reloading capabilities. It will watch for any changes to your files and restart the Deno server. -### Invoke functions locally +### Invoking functions locally While serving your local Function, you can invoke it using curl: diff --git a/apps/docs/pages/guides/functions/quickstart.mdx b/apps/docs/pages/guides/functions/quickstart.mdx index 7b489f2009e..e4e17a3a708 100644 --- a/apps/docs/pages/guides/functions/quickstart.mdx +++ b/apps/docs/pages/guides/functions/quickstart.mdx @@ -55,9 +55,9 @@ If you want to use Edge Functions to handle webhooks (e.g. [Stripe payment webho -## Execute remote functions +## Invoking remote functions -You can execute Edge Functions using curl. Copy the curl command from the Dashboard. It should look like this: +You can invoke Edge Functions using curl: ```bash curl --request POST 'https://.functions.supabase.co/hello-world' \ @@ -66,10 +66,62 @@ curl --request POST 'https://.functions.supabase.co/hello-world' \ --data '{ "name":"Functions" }' ``` + + If you receive an error `Invalid JWT`, find the `ANON_KEY` of your project in the Dashboard under `Settings > API`. + + +or using one of the [client libraries](/docs#reference-documentation), e.g. using [supabase-js](/docs/reference/javascript/functions-invoke): + +```js +import { createClient } from '@supabase/supabase-js' + +// Create a single supabase client for interacting with your database +const supabase = createClient('https://xyzcompany.supabase.co', 'public-anon-key') + +const { data, error } = await supabase.functions.invoke('hello-world', { + body: { name: 'Functions' }, +}) +``` + After invoking your Edge Function you should see the response `{ "message":"Hello Functions!" }`. +## Database Functions vs Edge Functions + +For data-intensive operations we recommend using [Database Functions](/docs/guides/database/functions), which are executed within your database +and can be called remotely using the [REST and GraphQL API](/docs/guides/api). + +For use-cases which require low-latency we recommend [Edge Functions](/docs/guides/functions), which are globally-distributed and can be written in TypeScript. + +## Organizing your Edge Functions + +We recommend developing “fat functions”. This means that you should develop few large functions, rather than many small functions. One common pattern when developing Functions is that you need to share code between two or more Functions. To do this, you can store any shared code in a folder prefixed with an underscore (`_`). We recommend this folder structure: + +```bash +└── supabase + ├── functions + │ ├── import_map.json # A top-level import map to use across functions. + │ ├── _shared + │ │ ├── supabaseAdmin.ts # Supabase client with SERVICE_ROLE key. + │ │ └── supabaseClient.ts # Supabase client with ANON key. + │ │ └── cors.ts # Reusable CORS headers. + │ ├── function-one # Use hyphens to name functions. + │ │ └── index.ts + │ └── function-two + │ └── index.ts + ├── migrations + └── config.toml +``` + +## Naming Edge Functions + +We recommend using hyphens to name functions because hyphens are the most URL-friendly of all the naming conventions (snake_case, camelCase, PascalCase). + +## Using HTTP Methods + +Edge Functions supports `GET`, `POST`, `PUT`, `PATCH`, `DELETE`, and `OPTIONS`. A function can be designed to perform different actions based on a request's HTTP method. See the [example on building a RESTful service](https://github.com/supabase/supabase/tree/master/examples/edge-functions/supabase/functions/restful-tasks) to learn how to handle different HTTP methods in your function. + ## Limitations - Deno Deploy limitations diff --git a/apps/docs/pages/guides/functions/tips.mdx b/apps/docs/pages/guides/functions/tips.mdx deleted file mode 100644 index 9c96998db4a..00000000000 --- a/apps/docs/pages/guides/functions/tips.mdx +++ /dev/null @@ -1,45 +0,0 @@ -import Layout from '~/layouts/DefaultGuideLayout' - -export const meta = { - id: 'functions-tips', - title: 'Edge Functions Tips', - description: 'Misc Tips for Supabase Edge Functions.', -} - -## Database Functions vs Edge Functions - -For data-intensive operations we recommend using [Database Functions](/docs/guides/database/functions), which are executed within your database -and can be called remotely using the [REST and GraphQL API](/docs/guides/api). - -For use-cases which require low-latency we recommend [Edge Functions](/docs/guides/functions), which are globally-distributed and can be written in TypeScript. - -## Organizing your Edge Functions - -We recommend developing “fat functions”. This means that you should develop few large functions, rather than many small functions. One common pattern when developing Functions is that you need to share code between two or more Functions. To do this, you can store any shared code in a folder prefixed with an underscore (`_`). We recommend this folder structure: - -```bash -└── supabase - ├── functions - │ ├── _shared - │ │ ├── supabaseAdmin.ts # Supabase client with SERVICE_ROLE key - │ │ └── supabaseClient.ts # Supabase client with ANON key - │ │ └── cors.ts # Reusable CORS headers - │ ├── function-one # use hyphens to name functions - │ │ └── index.ts - │ └── function-two - │ └── index.ts - ├── migrations - └── config.toml -``` - -## Naming Edge Functions - -We recommend using hyphens to name functions because hyphens are the most URL-friendly of all the naming conventions (snake_case, camelCase, PascalCase). - -## Using HTTP Methods - -Edge Functions supports `GET`, `POST`, `PUT`, `PATCH`, `DELETE`, and `OPTIONS`. A function can be designed to perform different actions based on a request's HTTP method. See the [example on building a RESTful service](https://github.com/supabase/supabase/tree/master/examples/edge-functions/supabase/functions/restful-tasks) to learn how to handle different HTTP methods in your function. - -export const Page = ({ children }) => - -export default Page diff --git a/apps/www/lib/redirects.js b/apps/www/lib/redirects.js index 1e992b67d9e..108782dcb29 100644 --- a/apps/www/lib/redirects.js +++ b/apps/www/lib/redirects.js @@ -1554,6 +1554,11 @@ module.exports = [ source: '/docs/guides/functions/examples', destination: '/docs/guides/functions', }, + { + permanent: true, + source: '/docs/guides/functions/best-practices', + destination: '/docs/guides/functions/quickstart', + }, { permanent: true, source: '/projects', From 25fb445fb96ecbf57bf012ce4d7566e2ebb0421a Mon Sep 17 00:00:00 2001 From: Joshen Lim Date: Fri, 13 Jan 2023 17:00:20 +0800 Subject: [PATCH 16/48] Storage preview pane support getting signed url of files from private buckets with custom expiry --- .../Storage/StorageExplorer/PreviewPane.tsx | 263 ++++++++++++------ .../storageExplorer/StorageExplorerStore.js | 12 +- 2 files changed, 190 insertions(+), 85 deletions(-) diff --git a/studio/components/to-be-cleaned/Storage/StorageExplorer/PreviewPane.tsx b/studio/components/to-be-cleaned/Storage/StorageExplorer/PreviewPane.tsx index 49066467eae..855bd029827 100644 --- a/studio/components/to-be-cleaned/Storage/StorageExplorer/PreviewPane.tsx +++ b/studio/components/to-be-cleaned/Storage/StorageExplorer/PreviewPane.tsx @@ -1,12 +1,18 @@ import { isEmpty } from 'lodash' +import { useState } from 'react' import { Button, + Dropdown, + Form, IconX, IconLoader, IconClipboard, IconDownload, IconTrash2, IconAlertCircle, + IconChevronDown, + Modal, + Input, } from 'ui' import SVG from 'react-inlinesvg' import { formatBytes } from 'lib/helpers' @@ -90,12 +96,15 @@ const PreviewFile = ({ mimeType, previewUrl }: { mimeType: string; previewUrl: s const PreviewPane = () => { const storageExplorerStore = useStorageStore() const { + selectedBucket, selectedFilePreview: file, copyFileURLToClipboard, closeFilePreview, setSelectedItemsToDelete, } = storageExplorerStore + const [showExpiryInput, setShowExpiryInput] = useState(false) + const width = 450 const isOpen = !isEmpty(file) const size = file.metadata ? formatBytes(file.metadata.size) : null @@ -104,104 +113,200 @@ const PreviewPane = () => { const updatedAt = file.updated_at ? new Date(file.updated_at).toLocaleString() : 'Unknown' return ( - -
+
- {/* Preview Header */} -
- closeFilePreview()} - /> -
- - {/* Preview Thumbnail*/} -
-
- + style={{ width }} + > + {/* Preview Header */} +
+ closeFilePreview()} + />
-
-
- {/* Preview Information */} -
-
{file.name}
- {file.isCorrupted && ( -
- + {/* Preview Thumbnail*/} +
+
+ +
+
+ +
+ {/* Preview Information */} +
+
{file.name}
+ {file.isCorrupted && ( +
+ +

+ File is corrupted, please delete and reupload this file again +

+
+ )} + {mimeType && (

- File is corrupted, please delete and reupload this file again + {mimeType} + {size && - {size}}

+ )} +
+ + {/* Preview Metadata */} +
+
+ +

{createdAt}

+
+
+ +

{updatedAt}

- )} - {mimeType && ( -

- {mimeType} - {size && - {size}} -

- )} -
- - {/* Preview Metadata */} -
-
- -

{createdAt}

-
- -

{updatedAt}

-
-
- {/* Actions */} -
- - + {/* Actions */} +
+ + + + + + {selectedBucket.public ? ( - - + ) : ( + await copyFileURLToClipboard(file, 60 * 60 * 24 * 7)} + > + Expire in 1 week + , + await copyFileURLToClipboard(file, 60 * 60 * 24 * 30)} + > + Expire in 1 month + , + await copyFileURLToClipboard(file, 60 * 60 * 24 * 365)} + > + Expire in 1 year + , + setShowExpiryInput(true)}> + Custom expiry + , + ]} + > + + + )} +
-
-
- + + setShowExpiryInput(false)} + > +
{ + setSubmitting(true) + await copyFileURLToClipboard(file, values.expiresIn) + setSubmitting(false) + setShowExpiryInput(false) + }} + validate={(values: any) => { + const errors: any = {} + if (values.expiresIn !== '' && values.expiresIn <= 0) + errors.expiresIn = 'Expiry duration cannot be less than 0' + return errors + }} + > + {({ values, isSubmitting }: { values: any; isSubmitting: boolean }) => ( + <> +
+ + seconds

} + /> + +
+ + +
+ + +
+ + + )} + +
+ ) } diff --git a/studio/localStores/storageExplorer/StorageExplorerStore.js b/studio/localStores/storageExplorer/StorageExplorerStore.js index 5e11d3c234c..323a51d10ca 100644 --- a/studio/localStores/storageExplorer/StorageExplorerStore.js +++ b/studio/localStores/storageExplorer/StorageExplorerStore.js @@ -37,7 +37,7 @@ export const useStorageExplorerStore = () => { const CORRUPTED_THRESHOLD_MS = 15 * 60 * 1000 // 15 minutes const LIMIT = 200 const OFFSET = 0 -const DEFAULT_EXPIRY = 10 * 365 * 24 * 60 * 60 // in seconds, default to 1 year +const DEFAULT_EXPIRY = 10 * 365 * 24 * 60 * 60 // in seconds, default to 10 years const PREVIEW_SIZE_LIMIT = 10000000 // 10MB const BATCH_SIZE = 2 const EMPTY_FOLDER_PLACEHOLDER_FILE_NAME = '.emptyFolderPlaceholder' @@ -397,9 +397,9 @@ class StorageExplorerStore { this.selectedFilePreview = {} } - copyFileURLToClipboard = async (file) => { + copyFileURLToClipboard = async (file, expiresIn = 0) => { const filePreview = find(this.filePreviewCache, { id: file.id }) - if (filePreview) { + if (filePreview && expiresIn === 0) { // Already generated signed URL copyToClipboard(filePreview.url, () => { this.ui.setNotification({ @@ -410,7 +410,7 @@ class StorageExplorerStore { }) } else { // Need to generate signed URL, and might as well save it to cache as well - const signedUrl = await this.fetchFilePreview(file.name) + const signedUrl = await this.fetchFilePreview(file.name, expiresIn) try { let formattedUrl = new URL(signedUrl) @@ -840,7 +840,7 @@ class StorageExplorerStore { this.clearSelectedItemsToMove() } - fetchFilePreview = async (fileName) => { + fetchFilePreview = async (fileName, expiresIn = 0) => { const includeBucket = false const pathToFile = this.getPathAlongOpenedFolders(includeBucket) const formattedPathToFile = pathToFile.length > 0 ? `${pathToFile}/${fileName}` : fileName @@ -857,7 +857,7 @@ class StorageExplorerStore { const { data, error } = await this.supabaseClient.storage .from(this.selectedBucket.name) - .createSignedUrl(formattedPathToFile, DEFAULT_EXPIRY) + .createSignedUrl(formattedPathToFile, expiresIn || DEFAULT_EXPIRY) if (!error) { return data.signedUrl From 210f7b7e1891909d9627bfd7eaf0227c8ad852e9 Mon Sep 17 00:00:00 2001 From: Joshen Lim Date: Fri, 13 Jan 2023 17:04:39 +0800 Subject: [PATCH 17/48] Ensure that payment summary panel is loading when confirming payment --- .../interfaces/Billing/EnterpriseUpdate.tsx | 12 ------------ studio/components/interfaces/Billing/ProUpgrade.tsx | 1 + studio/components/interfaces/Billing/TeamUpgrade.tsx | 1 + 3 files changed, 2 insertions(+), 12 deletions(-) diff --git a/studio/components/interfaces/Billing/EnterpriseUpdate.tsx b/studio/components/interfaces/Billing/EnterpriseUpdate.tsx index 969b5d58993..2c234c62fae 100644 --- a/studio/components/interfaces/Billing/EnterpriseUpdate.tsx +++ b/studio/components/interfaces/Billing/EnterpriseUpdate.tsx @@ -158,18 +158,6 @@ const EnterpriseUpdate: FC = ({ // Last todo to support enterprise billing on dashboard + E2E test const onConfirmPayment = async () => { setIsSubmitting(true) - let token = captchaToken - - try { - if (!token) { - const captchaResponse = await captchaRef.current?.execute({ async: true }) - token = captchaResponse?.response ?? null - } - } catch (error) { - setIsSubmitting(false) - return - } - const payload = { ...formSubscriptionUpdatePayload( currentSubscription, diff --git a/studio/components/interfaces/Billing/ProUpgrade.tsx b/studio/components/interfaces/Billing/ProUpgrade.tsx index b4cf2635051..81d991fe5a0 100644 --- a/studio/components/interfaces/Billing/ProUpgrade.tsx +++ b/studio/components/interfaces/Billing/ProUpgrade.tsx @@ -177,6 +177,7 @@ const ProUpgrade: FC = ({ } const onConfirmPayment = async () => { + setIsSubmitting(true) const payload = formSubscriptionUpdatePayload( currentSubscription, selectedTier, diff --git a/studio/components/interfaces/Billing/TeamUpgrade.tsx b/studio/components/interfaces/Billing/TeamUpgrade.tsx index 7cc18e7847a..fcfef76cd0d 100644 --- a/studio/components/interfaces/Billing/TeamUpgrade.tsx +++ b/studio/components/interfaces/Billing/TeamUpgrade.tsx @@ -169,6 +169,7 @@ const TeamUpgrade: FC = ({ message: 'Team Plan is not enabled yet.', }) } + setIsSubmitting(true) const payload = formSubscriptionUpdatePayload( currentSubscription, selectedTier, From 00ac93d2ee0529bb264f3acc6a0cb042adbfae60 Mon Sep 17 00:00:00 2001 From: Wen Bo Xie <5532241+w3b6x9@users.noreply.github.com> Date: Fri, 13 Jan 2023 13:56:23 -0800 Subject: [PATCH 18/48] fix: set Realtime Docker DB_USER to supabase_admin (#11653) --- docker/docker-compose.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docker/docker-compose.yml b/docker/docker-compose.yml index db91090408e..74bd0f1e828 100644 --- a/docker/docker-compose.yml +++ b/docker/docker-compose.yml @@ -114,7 +114,7 @@ services: PORT: 4000 DB_HOST: ${POSTGRES_HOST} DB_PORT: ${POSTGRES_PORT} - DB_USER: ${POSTGRES_USER} + DB_USER: supabase_admin DB_PASSWORD: ${POSTGRES_PASSWORD} DB_NAME: ${POSTGRES_DB} DB_AFTER_CONNECT_QUERY: 'SET search_path TO _realtime' From 648bbd322bedb9f18de43c9e5f6801a441c46eec Mon Sep 17 00:00:00 2001 From: dannykng Date: Fri, 13 Jan 2023 17:11:36 -0800 Subject: [PATCH 19/48] Dart -> Flutter --- .../Navigation/NavigationMenu/NavigationMenu.constants.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.constants.ts b/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.constants.ts index 8fa5333d8d0..2cb41f3a054 100644 --- a/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.constants.ts +++ b/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.constants.ts @@ -763,13 +763,13 @@ export const reference_javascript_v2 = { export const reference_dart_v0 = { icon: 'reference-dart', - title: 'dart', + title: 'Flutter', url: '/guides/reference/dart', parent: '/reference', } export const reference_dart_v1 = { icon: 'reference-dart', - title: 'dart', + title: 'Flutter', url: '/guides/reference/dart', parent: '/reference', } From 031d3ba11df4351c916253f04f1cf7d0f9eb5c7d Mon Sep 17 00:00:00 2001 From: dannykng Date: Fri, 13 Jan 2023 17:12:44 -0800 Subject: [PATCH 20/48] Update reference docs introductions --- apps/docs/docs/ref/dart/introduction.mdx | 15 +++++----- apps/docs/docs/ref/dart/v0/introduction.mdx | 28 +++++++++++++++++++ .../docs/ref/javascript/v1/introduction.mdx | 16 ++++++++--- 3 files changed, 48 insertions(+), 11 deletions(-) create mode 100644 apps/docs/docs/ref/dart/v0/introduction.mdx diff --git a/apps/docs/docs/ref/dart/introduction.mdx b/apps/docs/docs/ref/dart/introduction.mdx index 8dabccf22b2..e183e37889e 100644 --- a/apps/docs/docs/ref/dart/introduction.mdx +++ b/apps/docs/docs/ref/dart/introduction.mdx @@ -13,11 +13,12 @@ hideTitle: true
- This reference documents every object and method available in Supabase's Flutter - library, [supabase-flutter](https://pub.dev/packages/supabase_flutter). You can - use supabase-flutter to interact with your Postgres database, listen to database changes, invoke - Deno Edge Functions, build login and user management functionality, and manage large files. -
-
- We also provide [supabase](https://pub.dev/packages/supabase) package for non-Flutter projects. + +This reference documents every object and method available in Supabase's Flutter +library, [supabase-flutter](https://pub.dev/packages/supabase_flutter). You can +use supabase-flutter to interact with your Postgres database, listen to database changes, invoke +Deno Edge Functions, build login and user management functionality, and manage large files. + +We also provide a [supabase](https://pub.dev/packages/supabase) package for non-Flutter projects. +
diff --git a/apps/docs/docs/ref/dart/v0/introduction.mdx b/apps/docs/docs/ref/dart/v0/introduction.mdx new file mode 100644 index 00000000000..fdbb9d766a5 --- /dev/null +++ b/apps/docs/docs/ref/dart/v0/introduction.mdx @@ -0,0 +1,28 @@ +--- +id: introduction +title: Introduction +hideTitle: true +--- + +
+ +
+

Flutter Client Library

+

supabase-flutter

+
+
+ +
+ + + You're viewing the docs for an older version of the `supabase-flutter` library. Learn how to + [upgrade to the latest version](/docs/reference/dart/v0/upgrade-guide). + + +This reference documents every object and method available in Supabase's Flutter library, [supabase-flutter](https://pub.dev/packages/supabase_flutter). +You can use supabase-flutter to interact with your Postgres database, listen to database changes, invoke +Deno Edge Functions, build login and user management functionality, and manage large files. + +We also provide a [supabase](https://pub.dev/packages/supabase) package for non-Flutter projects. + +
diff --git a/apps/docs/docs/ref/javascript/v1/introduction.mdx b/apps/docs/docs/ref/javascript/v1/introduction.mdx index 3e1af1ff9dd..6d050a1f668 100644 --- a/apps/docs/docs/ref/javascript/v1/introduction.mdx +++ b/apps/docs/docs/ref/javascript/v1/introduction.mdx @@ -13,8 +13,16 @@ hideTitle: true
- This reference documents every object and method available in Supabase's isomorphic JavaScript - library, supabase-js. You can use supabase-js to interact with your Postgres database, listen to - database changes, invoke Deno Edge Functions, build login and user management functionality, and - manage large files. + + + You're viewing the docs for an older version of the `supabase-js` library. View the [latest + version](/docs/reference/javascript/introduction) or follow the [supabase-js v2 + guide](/docs/reference/javascript/v1/upgrade-guide) to upgrade to the latest version. + + +This reference documents every object and method available in Supabase's isomorphic JavaScript +library, supabase-js. You can use supabase-js to interact with your Postgres database, listen to +database changes, invoke Deno Edge Functions, build login and user management functionality, and +manage large files. +
From 679de08aa14b8d60cec0a5a8d34e3549aef0340e Mon Sep 17 00:00:00 2001 From: dannykng Date: Fri, 13 Jan 2023 17:14:05 -0800 Subject: [PATCH 21/48] Move upgrade guides --- .../dart => ref/dart/v0}/upgrade-guide.mdx | 177 ++++++- .../ref/javascript/{ => v1}/upgrade-guide.mdx | 0 .../reference/javascript/upgrade-guide.mdx | 439 ------------------ 3 files changed, 167 insertions(+), 449 deletions(-) rename apps/docs/docs/{reference/dart => ref/dart/v0}/upgrade-guide.mdx (68%) rename apps/docs/docs/ref/javascript/{ => v1}/upgrade-guide.mdx (100%) delete mode 100644 apps/docs/docs/reference/javascript/upgrade-guide.mdx diff --git a/apps/docs/docs/reference/dart/upgrade-guide.mdx b/apps/docs/docs/ref/dart/v0/upgrade-guide.mdx similarity index 68% rename from apps/docs/docs/reference/dart/upgrade-guide.mdx rename to apps/docs/docs/ref/dart/v0/upgrade-guide.mdx index 707cdd06129..6da7b0c0fe5 100644 --- a/apps/docs/docs/reference/dart/upgrade-guide.mdx +++ b/apps/docs/docs/ref/dart/v0/upgrade-guide.mdx @@ -4,23 +4,35 @@ title: Upgrade to supabase-flutter v1 description: 'Learn how to upgrade to supabase-flutter v1.' --- -import Tabs from '@theme/Tabs' -import TabItem from '@theme/TabItem' - -supabase-flutter focuses on improving the developer experience and making it easier to use. This guide will help you upgrade from supabase-flutter v0 to v1. +supabase-flutter focuses on improving the developer experience and making it easier to use. This guide demonstrates how to upgrade from supabase-flutter v0 to v1. ## Upgrade the client library + + + Update the package in your pubspec.yaml file. + + + ```yaml supabase_flutter: ^1.0.0 ``` + + + ## Error handling + + + The way supabase-flutter throws error has changed in v1. In v0, errors were returned as a response. In v1, errors are thrown as exceptions. This makes it more intuitive as a Flutter developer to handle errors. + + + -## Auth classes / methods + + + +## Auth classes and methods ### Usage of `SupabaseAuthState` and `SupabaseAuthRequiredState` classes -In v0, `SupabaseAuthState` and `SupabaseAuthRequiredState` were required to handle automatic token refresh and to listen to auth state change. In v1, `SupabaseAuthState` and `SupabaseAuthRequiredState` are deprecated, and token refresh will happen automatically just by initializing Supabase. [`onAuthStateChange`](/docs/reference/dart/upgrade-guide#listening-to-auth-state-change) can be used to action on auth state change. + + + +In v0, `SupabaseAuthState` and `SupabaseAuthRequiredState` were required to handle automatic token refresh and to listen to auth state change. In v1, `SupabaseAuthState` and `SupabaseAuthRequiredState` are deprecated, and token refresh will happen automatically just by initializing Supabase. [`onAuthStateChange`](#listening-to-auth-state-change) can be used to action on auth state change. + + + + + + ### Listening to auth state change + + + `onAuthStateChange` now returns a `Stream`. + + + + + + ### Sign in with email and password -The signIn() method has been deprecated in favor of more explicit method signatures to help with type hinting. Previously it was difficult for developers to know what they were missing (e.g., a lot of developers didn't realize they could use passwordless magic links). + + + +`signIn()` has been deprecated in favor of more explicit method signatures to help with type hinting. Previously it was difficult for developers to know what they were missing (e.g., a lot of developers didn't realize they could use passwordless magic links). + + + + + + + + + ### Sign in with magic link + + + + + + + + + ### Sign in with a third-party OAuth provider + + + + + + + + + ### Sign in with phone + + + + + + + + + ### Sign in with phone using OTP + + + + + + + + + ### Reset password for email + + + + + + + + + ### Get the user's current session + + + + + + + + + ### Get the logged-in user + + + + + + + + + ### Update user data for a logged-in user + + + + + + ## Data methods -`.insert()` / `.upsert()` / `.update()` / `.delete()` don't return rows by default. +`.insert()` / `.upsert()` / `.update()` / `.delete()` no longer return rows by default. Previously, these methods return inserted/updated/deleted rows by default (which caused [some confusion](https://github.com/supabase/supabase/discussions/1548)), and you can opt to not return it by specifying `returning: 'minimal'`. Now the default behavior is to not return rows. To return inserted/updated/deleted rows, add a `.select()` call at the end. -Previously, these methods return inserted/updated/deleted rows by default (which caused [some confusion](https://github.com/supabase/supabase/discussions/1548)), and you can opt to not return it by specifying `returning: 'minimal'`. Now the default behavior is to not return rows. To return inserted/updated/deleted rows, add a `.select()` call at the end. +Also, calling `.execute()` at the end of the query was a requirement in v0, but deprecated in v1. -Also, calling `.execute()` at the end of the query was a requirement in v0, but in v1 `.execute` is deperecated. + + ### Insert without returning inserted data + + + + + + + + + ### Insert with returning inserted data + + + + + + ## Realtime methods + + + ### Stream `.stream()` no longer needs the `.execute()` at the end. Also, filtering by `eq` is a lot easier now. `primaryKey` is now a named parameter to make it more obvious what to pass. + + + + + + + + + ### Subscribe + + + + + + + + + ### Unsubscribe + + + + + + diff --git a/apps/docs/docs/ref/javascript/upgrade-guide.mdx b/apps/docs/docs/ref/javascript/v1/upgrade-guide.mdx similarity index 100% rename from apps/docs/docs/ref/javascript/upgrade-guide.mdx rename to apps/docs/docs/ref/javascript/v1/upgrade-guide.mdx diff --git a/apps/docs/docs/reference/javascript/upgrade-guide.mdx b/apps/docs/docs/reference/javascript/upgrade-guide.mdx deleted file mode 100644 index 282d66d4966..00000000000 --- a/apps/docs/docs/reference/javascript/upgrade-guide.mdx +++ /dev/null @@ -1,439 +0,0 @@ ---- -id: upgrade-guide -title: Upgrade to supabase-js v2 -description: 'Learn how to upgrade to supabase-js v2.' ---- - -import Tabs from '@theme/Tabs' -import TabItem from '@theme/TabItem' - -supabase-js v2 focuses on "quality-of-life" improvements for developers and addresses some of the largest pain points in v1. v2 includes type support, a rebuilt Auth library with async methods, improved errors, and more. - -No new features will be added to supabase-js v1 , but we'll continuing merging security fixes to v1, with maintenance patches for the next 3 months. - -## Upgrade the client library - -```sh -npm install @supabase/supabase-js@2 -``` - -_Optionally_ if you are using custom configuration with `createClient` then follow below: - - - - -```ts title=src/supabaseClient.ts -const supabase = createClient(SUPABASE_URL, SUPABASE_ANON_KEY, { - schema: 'custom', - persistSession: false, -}) -``` - - - - -```ts title=src/supabaseClient.ts -const supabase = createClient(SUPABASE_URL, SUPABASE_ANON_KEY, { - db: { - schema: 'custom', - }, - auth: { - persistSession: true, - }, -}) -``` - - - - -Read more about the [constructor options](/docs/reference/javascript/release-notes#explicit-constructor-options). - -### Auth methods - -The signIn() method has been deprecated in favor of more explicit method signatures to help with type hinting. Previously it was difficult for developers to know what they were missing (e.g., a lot of developers didn't realize they could use passwordless magic links). - -#### Sign in with email and password - - - - -```ts -const { user, error } = await supabase.auth.signIn({ email, password }) -``` - - - - -```ts -const { - data: { user }, - error, -} = await supabase.auth.signInWithPassword({ email, password }) -``` - - - - -#### Sign in with magic link - - - - -```ts -const { error } = await supabase.auth.signIn({ email }) -``` - - - - -```ts -const { error } = await supabase.auth.signInWithOtp({ email }) -``` - - - - -#### Sign in with a third-party provider - - - - -```ts -const { error } = await supabase.auth.signIn({ provider }) -``` - - - - -```ts -const { error } = await supabase.auth.signInWithOAuth({ provider }) -``` - - - - -#### Sign in with phone - - - - -```ts -const { error } = await supabase.auth.signIn({ phone, password }) -``` - - - - -```ts -const { error } = await supabase.auth.signInWithPassword({ phone, password }) -``` - - - - -#### Sign in with phone using OTP - - - - -```ts -const { error } = await supabase.auth.api.sendMobileOTP(phone) -``` - - - - -```ts -const { data, error } = await supabase.auth.signInWithOtp({ phone }) - -// After receiving a SMS with a OTP. -const { data, error } = await supabase.auth.verifyOtp({ phone, token }) -``` - - - - -#### Reset password for email - - - - -```ts -const { data, error } = await supabase.auth.api.resetPasswordForEmail(email) -``` - - - - -```ts -const { data, error } = await supabase.auth.resetPasswordForEmail(email) -``` - - - - -#### Get the user's current session - - - - -```ts -const session = supabase.auth.session() -``` - - - - -```ts -const { - data: { session }, -} = await supabase.auth.getSession() -``` - - - - -#### Get the logged-in user - - - - -```ts -const user = supabase.auth.user() -``` - - - - -```ts -const { - data: { session }, -} = await supabase.auth.getSession() -const { user } = session -``` - - - - -#### Update user data for a logged-in user - - - - -```ts -const { user, error } = await supabase.auth.update({ attributes }) -``` - - - - -```ts -const { - data: { user }, - error, -} = await supabase.auth.updateUser({ attributes }) -``` - - - - -#### Use a custom `access_token` JWT with Supabase - - - - -```ts -const { user, error } = supabase.auth.setAuth(access_token) -``` - - - - -```ts -const supabase = createClient(SUPABASE_URL, SUPABASE_ANON_KEY, { - global: { - headers: { - Authorization: `Bearer ${access_token}`, - }, - }, -}) -``` - - - - -#### Cookie methods - -The cookie-related methods like `setAuthCookie` and `getUserByCookie` have been removed. - -For Next.js you can use the [Auth Helpers](https://supabase.com/docs/guides/auth/auth-helpers/nextjs) to help you manage cookies. -If you can't use the Auth Helpers, you can use [server-side rendering](https://supabase.com/docs/guides/auth/server-side-rendering). - -Some the [PR](https://github.com/supabase/gotrue-js/pull/340) for additional background information. - -### Data methods - -`.insert()` / `.upsert()` / `.update()` / `.delete()` don't return rows by default: [PR](https://github.com/supabase/postgrest-js/pull/276). - -Previously, these methods return inserted/updated/deleted rows by default (which caused [some confusion](https://github.com/supabase/supabase/discussions/1548)), and you can opt to not return it by specifying `returning: 'minimal'`. Now the default behavior is to not return rows. To return inserted/updated/deleted rows, add a `.select()` call at the end. - -#### Insert and return data - - - - -```ts -const { data, error } = await supabase.auth.insert({ new_data }) -``` - - - - -```ts -const { data, error } = await supabase.auth.insert({ new_data }).select() -``` - - - - -#### Update and return data - - - - -```ts -const { data, error } = await supabase.auth.update({ new_data }).eq('id', id) -``` - - - - -```ts -const { data, error } = await supabase.auth.update({ new_data }).eq('id', id).select() -``` - - - - -### Realtime methods - -#### Subscribe - - - - -```ts -const userListener = supabase - .from('users') - .on('*', (payload) => handleAllEventsPayload(payload.new)) - .subscribe() -``` - - - - -```ts -const userListener = supabase - .channel('public:user') - .on('postgres_changes', { event: '*', schema: 'public', table: 'user' }, (payload) => - handleAllEventsPayload() - ) - .subscribe() -``` - - - - -#### Unsubscribe - - - - -```ts -userListener.unsubscribe() -``` - - - - -```ts -supabase.removeChannel(userListener) -``` - - - From 0c853ca4b04aa68ca3c773aad0419893f7213853 Mon Sep 17 00:00:00 2001 From: dannykng Date: Fri, 13 Jan 2023 17:14:27 -0800 Subject: [PATCH 22/48] Add redirects --- apps/www/lib/redirects.js | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/apps/www/lib/redirects.js b/apps/www/lib/redirects.js index 108782dcb29..420340205b9 100644 --- a/apps/www/lib/redirects.js +++ b/apps/www/lib/redirects.js @@ -1891,4 +1891,14 @@ module.exports = [ source: '/legal/soc2', destination: 'https://forms.supabase.com/soc2', }, + { + permanent: true, + source: '/docs/reference/javascript/upgrade-guide', + destination: '/docs/reference/javascript/v1/upgrade-guide', + }, + { + permanent: true, + source: '/docs/reference/dart/upgrade-guide', + destination: '/docs/reference/dart/v0/upgrade-guide', + }, ] From 9c46b931111631aa319408908a257223e94918cd Mon Sep 17 00:00:00 2001 From: dannykng Date: Fri, 13 Jan 2023 17:20:16 -0800 Subject: [PATCH 23/48] Update links --- apps/docs/data/nonGeneratedReferencePages.ts | 4 ++-- apps/docs/pages/guides/auth/auth-helpers/nextjs.mdx | 2 +- apps/www/_blog/2022-08-16-supabase-js-v2.mdx | 6 +++--- .../www/_blog/2022-10-20-supabase-js-v2-released.mdx | 12 ++++++------ .../2022-10-21-supabase-flutter-sdk-v1-released.mdx | 6 +++--- 5 files changed, 15 insertions(+), 15 deletions(-) diff --git a/apps/docs/data/nonGeneratedReferencePages.ts b/apps/docs/data/nonGeneratedReferencePages.ts index fd5ba84d1f5..01b060055c7 100644 --- a/apps/docs/data/nonGeneratedReferencePages.ts +++ b/apps/docs/data/nonGeneratedReferencePages.ts @@ -2,7 +2,7 @@ const nonGeneratedReferencePages = [ 'docs/reference/javascript', 'docs/reference/javascript/installing', 'docs/reference/javascript/release-notes', - 'docs/reference/javascript/upgrade-guide', + 'docs/reference/javascript/v1/upgrade-guide', 'docs/reference/javascript/typescript-support', 'docs/reference/javascript/v1', 'docs/reference/javascript/v1/installing', @@ -11,7 +11,7 @@ const nonGeneratedReferencePages = [ 'docs/reference/dart', 'docs/reference/dart/installing', 'docs/reference/dart/initializing', - 'docs/reference/dart/upgrade-guide', + 'docs/reference/dart/v0/upgrade-guide', 'docs/reference/dart/v0', 'docs/reference/api', 'docs/reference/api/release-notes', diff --git a/apps/docs/pages/guides/auth/auth-helpers/nextjs.mdx b/apps/docs/pages/guides/auth/auth-helpers/nextjs.mdx index 76e169c2271..8f5d318c151 100644 --- a/apps/docs/pages/guides/auth/auth-helpers/nextjs.mdx +++ b/apps/docs/pages/guides/auth/auth-helpers/nextjs.mdx @@ -782,7 +782,7 @@ export const config = { ### Migrating to v0.4.X and supabase-js v2 -With the update to `supabase-js` v2 the `auth` API routes are no longer required, therefore you can go ahead and delete your `auth` directory under the `/pages/api/` directory. Please refer to the [v2 migration guide](/docs/reference/javascript/upgrade-guide) for the full set of changes within supabase-js. +With the update to `supabase-js` v2 the `auth` API routes are no longer required, therefore you can go ahead and delete your `auth` directory under the `/pages/api/` directory. Please refer to the [v2 migration guide](/docs/reference/javascript/v1/upgrade-guide) for the full set of changes within supabase-js. The `/api/auth/logout` API route has been removed, please use the `signout` method instead: diff --git a/apps/www/_blog/2022-08-16-supabase-js-v2.mdx b/apps/www/_blog/2022-08-16-supabase-js-v2.mdx index d7986434a97..07cf3fd54dc 100644 --- a/apps/www/_blog/2022-08-16-supabase-js-v2.mdx +++ b/apps/www/_blog/2022-08-16-supabase-js-v2.mdx @@ -13,7 +13,7 @@ toc_depth: 3

⚠️ UPDATED 20/10: supabase-js v2 is fully released 🥳
-Check the updated docs and migration guide. +Check the updated docs and migration guide.
@@ -309,7 +309,7 @@ Update today by running: npm i @supabase/supabase-js@2 ``` -[Migration guide](https://supabase.com/docs/reference/javascript/upgrade-guide) +[Migration guide](https://supabase.com/docs/reference/javascript/v1/upgrade-guide) We'll continuing merging security fixes to v1, with maintenance patches for the next three months. @@ -329,6 +329,6 @@ We'll continuing merging security fixes to v1, with maintenance patches for the ## supabase-js v2 resources - [v2 Documentation](https://supabase.com/docs/reference/javascript) -- [Migration guide](https://supabase.com/docs/reference/javascript/upgrade-guide) +- [Migration guide](https://supabase.com/docs/reference/javascript/v1/upgrade-guide) - [Next.js quickstart guide](/docs/guides/with-nextjs) - [Examples](https://github.com/supabase/supabase/tree/master/examples) diff --git a/apps/www/_blog/2022-10-20-supabase-js-v2-released.mdx b/apps/www/_blog/2022-10-20-supabase-js-v2-released.mdx index 6e17afd4d14..6c2fca19cd8 100644 --- a/apps/www/_blog/2022-10-20-supabase-js-v2-released.mdx +++ b/apps/www/_blog/2022-10-20-supabase-js-v2-released.mdx @@ -2,7 +2,7 @@ title: 'supabase-js v2 Released' description: We've released supabase-js v2. Updated examples, quickstarts, and an improved experience. author: thor_schaeff -image: supabase-js-v2-release/supabase-js.jpg +image: supabase-js-v2-release/supabase-js.jpg thumb: supabase-js-v2-release/supabase-js.jpg tags: - launch-week @@ -10,17 +10,17 @@ date: '2022-10-20' toc_depth: 3 --- -During our [last Launch Week](/launch-week) we presented the [release candidate for supabase-js v2](/blog/supabase-js-v2). Since then we've been busy incorporating your feedback, [updating the docs](/docs/reference/javascript/), [examples](https://github.com/supabase/supabase/tree/master/examples), [quickstart guides](/docs/guides/with-nextjs), and putting a [migration guide](/docs/reference/javascript/upgrade-guide) together. +During our [last Launch Week](/launch-week) we presented the [release candidate for supabase-js v2](/blog/supabase-js-v2). Since then we've been busy incorporating your feedback, [updating the docs](/docs/reference/javascript/), [examples](https://github.com/supabase/supabase/tree/master/examples), [quickstart guides](/docs/guides/with-nextjs), and putting a [migration guide](/docs/reference/javascript/v1/upgrade-guide) together. ## What is new in v2? -Enhanced TypeScript support built right in was the big one! Now you can use the CLI to generate types, directly from your database. +Enhanced TypeScript support built right in was the big one! Now you can use the CLI to generate types, directly from your database. -Plus v2 comes with lots of improvements that solved some of the largest pain-points highlighted by our users. Your feedback help us improve: you speak, we listen. +Plus v2 comes with lots of improvements that solved some of the largest pain-points highlighted by our users. Your feedback help us improve: you speak, we listen. Read all the updates and the differences with v1 on the [announcement blog post](/blog/supabase-js-v2) -## Acknowledgements +## Acknowledgements It truly takes a village, well, in this case an entire community, and we want to thank you all for your feedback, and contributions! @@ -40,7 +40,7 @@ Special shout outs to: [@vejja](https://github.com/vejja), [@pixtron](https://gi ## Links - [Documentation](/docs/reference/javascript) -- [Migration Guide](/docs/reference/javascript/upgrade-guide) +- [Migration Guide](/docs/reference/javascript/v1/upgrade-guide) - [Quickstart Guides](/docs/guides/with-nextjs) - [Examples (GitHub)](https://github.com/supabase/supabase/tree/master/examples) - [Release Notes](/docs/reference/javascript/release-notes) diff --git a/apps/www/_blog/2022-10-21-supabase-flutter-sdk-v1-released.mdx b/apps/www/_blog/2022-10-21-supabase-flutter-sdk-v1-released.mdx index e7fdabdc869..92aed5cbb3b 100644 --- a/apps/www/_blog/2022-10-21-supabase-flutter-sdk-v1-released.mdx +++ b/apps/www/_blog/2022-10-21-supabase-flutter-sdk-v1-released.mdx @@ -2,7 +2,7 @@ title: 'supabase-flutter v1 Released' description: We've released supabase-flutter v1. More intuitive way of accessing Supabase from your Flutter application. author: tyler_shukert -image: flutter-v1-release/flutter_v1_official_release.jpeg +image: flutter-v1-release/flutter_v1_official_release.jpeg thumb: flutter-v1-release/flutter_v1_official_release.jpeg tags: - flutter @@ -11,7 +11,7 @@ date: '2022-10-21' toc_depth: 3 --- -A few months ago, we announced a [developer preview version of supabase-flutter SDK](https://supabase.com/blog/supabase-flutter-sdk-1-developer-preview). Since then, we have heard a lot of amazing feedback from the community, and have been improving it. Today, we are happy to announce the stable v1 of [supabase-flutter](https://pub.dev/packages/supabase_flutter). You can also find the updated [quick start guide](https://supabase.com/docs/guides/with-flutter), [documentation](https://supabase.com/docs/reference/dart) and a [migration guide from v0](https://supabase.com/docs/reference/dart/upgrade-guide). +A few months ago, we announced a [developer preview version of supabase-flutter SDK](https://supabase.com/blog/supabase-flutter-sdk-1-developer-preview). Since then, we have heard a lot of amazing feedback from the community, and have been improving it. Today, we are happy to announce the stable v1 of [supabase-flutter](https://pub.dev/packages/supabase_flutter). You can also find the updated [quick start guide](https://supabase.com/docs/guides/with-flutter), [documentation](https://supabase.com/docs/reference/dart) and a [migration guide from v0](https://supabase.com/docs/reference/dart/v0/upgrade-guide). ## What is new in v1? @@ -97,7 +97,7 @@ It required massive support from the community to bring the supabase-flutter to - [Install supabase-flutter v1.0](https://pub.dev/packages/supabase_flutter) - [supabase-flutter documentation](https://supabase.com/docs/reference/dart/) -- [v0 to v1 migration guide](https://supabase.com/docs/reference/dart/upgrade-guide) +- [v0 to v1 migration guide](https://supabase.com/docs/reference/dart/v0/upgrade-guide) - [Flutter Tutorial: building a Flutter chat app](https://supabase.com/blog/flutter-tutorial-building-a-chat-app) - [Flutter Tutorial - Part 2: Authentication and Authorization with RLS](https://supabase.com/blog/flutter-authentication-and-authorization-with-rls) - [Build a Flutter app with Very Good CLI and Supabase](https://verygood.ventures/blog/flutter-app-very-good-cli-supabase) From f92d4369934cb9b2d870bd182c46f4f0bb90ce18 Mon Sep 17 00:00:00 2001 From: dannykng Date: Fri, 13 Jan 2023 18:19:04 -0800 Subject: [PATCH 24/48] Update callout copy --- apps/docs/docs/ref/javascript/v1/introduction.mdx | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/apps/docs/docs/ref/javascript/v1/introduction.mdx b/apps/docs/docs/ref/javascript/v1/introduction.mdx index 6d050a1f668..2c275e45e33 100644 --- a/apps/docs/docs/ref/javascript/v1/introduction.mdx +++ b/apps/docs/docs/ref/javascript/v1/introduction.mdx @@ -15,9 +15,8 @@ hideTitle: true
- You're viewing the docs for an older version of the `supabase-js` library. View the [latest - version](/docs/reference/javascript/introduction) or follow the [supabase-js v2 - guide](/docs/reference/javascript/v1/upgrade-guide) to upgrade to the latest version. + You're viewing the docs for an older version of the `supabase-js` library. Learn how to upgrade to + the [upgrade to the latest version](/docs/reference/javascript/v1/upgrade-guide). This reference documents every object and method available in Supabase's isomorphic JavaScript From 0f1b18680265376fce92790dd863d53da953cbfd Mon Sep 17 00:00:00 2001 From: dannykng Date: Fri, 13 Jan 2023 18:21:13 -0800 Subject: [PATCH 25/48] Fix typo --- apps/docs/docs/ref/javascript/v1/introduction.mdx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/apps/docs/docs/ref/javascript/v1/introduction.mdx b/apps/docs/docs/ref/javascript/v1/introduction.mdx index 2c275e45e33..a62134bdd69 100644 --- a/apps/docs/docs/ref/javascript/v1/introduction.mdx +++ b/apps/docs/docs/ref/javascript/v1/introduction.mdx @@ -15,8 +15,8 @@ hideTitle: true
- You're viewing the docs for an older version of the `supabase-js` library. Learn how to upgrade to - the [upgrade to the latest version](/docs/reference/javascript/v1/upgrade-guide). + You're viewing the docs for an older version of the `supabase-js` library. Learn how to [upgrade + to the latest version](/docs/reference/javascript/v1/upgrade-guide). This reference documents every object and method available in Supabase's isomorphic JavaScript From 1345dba7c5cf94147a266c1f2940ac16d8ddcb54 Mon Sep 17 00:00:00 2001 From: j0hnta <22534726+johnta0@users.noreply.github.com> Date: Sat, 14 Jan 2023 16:13:16 +0900 Subject: [PATCH 26/48] Update prixma.mdx * Project ref should be different for each user, so made it unspecific. * Update supabase.red, seemingly the old domain, to supabase.co. --- apps/docs/pages/guides/integrations/prisma.mdx | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/apps/docs/pages/guides/integrations/prisma.mdx b/apps/docs/pages/guides/integrations/prisma.mdx index 6a80e95fee6..840028a00c7 100644 --- a/apps/docs/pages/guides/integrations/prisma.mdx +++ b/apps/docs/pages/guides/integrations/prisma.mdx @@ -68,7 +68,7 @@ By default, Prisma migrations will try to drop the `postgres` database, which ca Create a shadow database in your PostgreSQL server within the same Supabase project using the `psql` CLI and the `DATABASE_URL` from the previous steps (or use the local database). ```bash -psql postgresql://postgres:[YOUR-PASSWORD]@db.vdbnhqozmlzdsaejdxwr.supabase.red:5432 +psql postgresql://postgres:[YOUR-PASSWORD]@db.[YOUR-PROJECT-REF].supabase.co:5432 ``` After you connect to your project's PostgreSQL instance, create another database (e.g., `postgres_shadow`): @@ -83,8 +83,8 @@ In the `.env` file, update `DATABASE_URL` and `SHADOW_DATABASE_URL` to the conne ```env # .env -DATABASE_URL="postgres://postgres:[YOUR-PASSWORD]@db.vdbnhqozmlzdsaejdxwr.supabase.co:5432/postgres" -SHADOW_DATABASE_URL="postgres://postgres:[YOUR-PASSWORD]@db.vdbnhqozmlzdsaejdxwr.supabase.co:5432/postgres_shadow" +DATABASE_URL="postgres://postgres:[YOUR-PASSWORD]@db.[YOUR-PROJECT-REF].supabase.co:5432/postgres" +SHADOW_DATABASE_URL="postgres://postgres:[YOUR-PASSWORD]@db.[YOUR-PROJECT-REF].supabase.co:5432/postgres_shadow" ``` In the `schema.prisma` file, change the `provider` from "sqlite" to `"postgresql"` and add the `shadowDatabaseUrl` property. @@ -145,8 +145,8 @@ When migrating, you need to use the non-pooled connection URL (like the one used ```env # .env -DATABASE_URL="postgres://postgres:[YOUR-PASSWORD]@db.vdbnhqozmlzdsaejdxwr.supabase.co:6543/postgres?pgbouncer=true&connection_limit=1" -SHADOW_DATABASE_URL="postgres://postgres:[YOUR-PASSWORD]@db.vdbnhqozmlzdsaejdxwr.supabase.co:5432/postgres_shadow" +DATABASE_URL="postgres://postgres:[YOUR-PASSWORD]@db.[YOUR-PROJECT-REF].supabase.co:6543/postgres?pgbouncer=true&connection_limit=1" +SHADOW_DATABASE_URL="postgres://postgres:[YOUR-PASSWORD]@db.[YOUR-PROJECT-REF].supabase.co:5432/postgres_shadow" ``` Prisma Migrate uses database transactions to check out the current state of the database and the migrations table. However, the Migration Engine is designed to use a single connection to the database, and does not support connection pooling with PgBouncer. If you attempt to run Prisma Migrate commands in any environment that uses PgBouncer for connection pooling, you might see the following error: From b8d9ac0a2204e344d585cda7a4c1e988e11fde80 Mon Sep 17 00:00:00 2001 From: Lars Salling Date: Sun, 15 Jan 2023 14:08:07 +0100 Subject: [PATCH 27/48] fix: link typo --- apps/www/pages/realtime/Realtime.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/www/pages/realtime/Realtime.tsx b/apps/www/pages/realtime/Realtime.tsx index cc062d0bde4..890332c1478 100644 --- a/apps/www/pages/realtime/Realtime.tsx +++ b/apps/www/pages/realtime/Realtime.tsx @@ -238,7 +238,7 @@ function RealtimePage() {

, ]} // [TODO] Point to the correct docs URL - documentation_link={'/docs/guides//docs/guides/realtime/broadcast'} + documentation_link={'/docs/guides/realtime/broadcast'} /> From 502d9d51c72a82dfd0c2f5c36a2c9c39b4b14324 Mon Sep 17 00:00:00 2001 From: Lukas <69743171+quick007@users.noreply.github.com> Date: Sun, 15 Jan 2023 16:54:16 -0800 Subject: [PATCH 28/48] Fix example so it works correctly --- apps/docs/pages/guides/auth/auth-helpers/nextjs.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/docs/pages/guides/auth/auth-helpers/nextjs.mdx b/apps/docs/pages/guides/auth/auth-helpers/nextjs.mdx index 8f5d318c151..9985e50fb92 100644 --- a/apps/docs/pages/guides/auth/auth-helpers/nextjs.mdx +++ b/apps/docs/pages/guides/auth/auth-helpers/nextjs.mdx @@ -584,7 +584,7 @@ export async function middleware(req: NextRequest) { } export const config = { - matcher: '/middleware-protected', + matcher: '/middleware-protected/:path*', } ``` From 17b0cc80d1c7a5e3872e24aada6defce93dd3c4d Mon Sep 17 00:00:00 2001 From: Inian Date: Mon, 16 Jan 2023 11:59:47 +0800 Subject: [PATCH 29/48] update docs for storage getPublicURL --- spec/enrichments/tsdoc_v2/combined.json | 2 +- spec/enrichments/tsdoc_v2/storage.json | 2 +- spec/enrichments/tsdoc_v2/storage_dereferenced.json | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/spec/enrichments/tsdoc_v2/combined.json b/spec/enrichments/tsdoc_v2/combined.json index 0c72523e032..57242f4b5bf 100644 --- a/spec/enrichments/tsdoc_v2/combined.json +++ b/spec/enrichments/tsdoc_v2/combined.json @@ -79596,7 +79596,7 @@ "kindString": "Call signature", "flags": {}, "comment": { - "shortText": "Retrieves the URL for an asset in a public bucket.\nThis function does not verify if the bucket is public. If a public URL is created for a bucket which is not public, you will not be able to download the asset." + "shortText": "A simple convenience function to get the URL for an asset in a public bucket. If you do not want to use this function, you can construct the public URL by concatenating the bucket URL with the path to the asset.\nThis function does not verify if the bucket is public. If a public URL is created for a bucket which is not public, you will not be able to download the asset." }, "parameters": [ { diff --git a/spec/enrichments/tsdoc_v2/storage.json b/spec/enrichments/tsdoc_v2/storage.json index 475ba699fc3..fb8baa1c895 100644 --- a/spec/enrichments/tsdoc_v2/storage.json +++ b/spec/enrichments/tsdoc_v2/storage.json @@ -5471,7 +5471,7 @@ "kindString": "Call signature", "flags": {}, "comment": { - "shortText": "Retrieves the URL for an asset in a public bucket.\nThis function does not verify if the bucket is public. If a public URL is created for a bucket which is not public, you will not be able to download the asset." + "shortText": "A simple convenience function to get the URL for an asset in a public bucket. If you do not want to use this function, you can construct the public URL by concatenating the bucket URL with the path to the asset.\nThis function does not verify if the bucket is public. If a public URL is created for a bucket which is not public, you will not be able to download the asset." }, "parameters": [ { diff --git a/spec/enrichments/tsdoc_v2/storage_dereferenced.json b/spec/enrichments/tsdoc_v2/storage_dereferenced.json index 634dd23b469..53596ea9650 100644 --- a/spec/enrichments/tsdoc_v2/storage_dereferenced.json +++ b/spec/enrichments/tsdoc_v2/storage_dereferenced.json @@ -5875,7 +5875,7 @@ "kindString": "Call signature", "flags": {}, "comment": { - "shortText": "Retrieves the URL for an asset in a public bucket.\nThis function does not verify if the bucket is public. If a public URL is created for a bucket which is not public, you will not be able to download the asset." + "shortText": "A simple convenience function to get the URL for an asset in a public bucket. If you do not want to use this function, you can construct the public URL by concatenating the bucket URL with the path to the asset.\nThis function does not verify if the bucket is public. If a public URL is created for a bucket which is not public, you will not be able to download the asset." }, "parameters": [ { From 240453a854539bba59a089dde66603a2cd3b0cb7 Mon Sep 17 00:00:00 2001 From: Ollie Halliday <22655069+Hallidayo@users.noreply.github.com> Date: Mon, 16 Jan 2023 09:46:08 +0000 Subject: [PATCH 30/48] changed order() example --- spec/supabase_js_v2.yml | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/spec/supabase_js_v2.yml b/spec/supabase_js_v2.yml index 7e220e2dc23..0cd16c93dbd 100644 --- a/spec/supabase_js_v2.yml +++ b/spec/supabase_js_v2.yml @@ -3429,8 +3429,8 @@ functions: code: | ```ts const { data, error } = await supabase - .from('cities') - .select('name', 'country_id') + .from('countries') + .select('id', 'name') .order('id', { ascending: false }) ``` data: From c68d82eff3ab9b086bec65c74f191233be6db531 Mon Sep 17 00:00:00 2001 From: Terry Sutton Date: Mon, 16 Jan 2023 09:20:07 -0330 Subject: [PATCH 31/48] Update studio/components/to-be-cleaned/Storage/StorageExplorer/PreviewPane.tsx --- .../to-be-cleaned/Storage/StorageExplorer/PreviewPane.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/studio/components/to-be-cleaned/Storage/StorageExplorer/PreviewPane.tsx b/studio/components/to-be-cleaned/Storage/StorageExplorer/PreviewPane.tsx index 855bd029827..a3abf1d1ec1 100644 --- a/studio/components/to-be-cleaned/Storage/StorageExplorer/PreviewPane.tsx +++ b/studio/components/to-be-cleaned/Storage/StorageExplorer/PreviewPane.tsx @@ -281,7 +281,7 @@ const PreviewPane = () => { disabled={isSubmitting} type="number" id="expiresIn" - label="Enter the duration for which the URL will be valid for" + label="Enter the duration for which the URL will be valid." actions={

seconds

} /> From 4d1d95be2234058197e6165aa7fc132711f36f70 Mon Sep 17 00:00:00 2001 From: Joshen Lim Date: Tue, 17 Jan 2023 00:17:44 +0800 Subject: [PATCH 32/48] Refactor FileExplorerRow to tsx and reduce prop drilldown --- .../Storage/StorageExplorer/FileExplorer.js | 59 +++------ .../StorageExplorer/FileExplorerColumn.js | 31 ++--- ...FileExplorerRow.js => FileExplorerRow.tsx} | 124 +++++++++++------- .../Storage/StorageExplorer/PreviewPane.tsx | 6 +- .../StorageExplorer/StorageExplorer.js | 81 +----------- 5 files changed, 110 insertions(+), 191 deletions(-) rename studio/components/to-be-cleaned/Storage/StorageExplorer/{FileExplorerRow.js => FileExplorerRow.tsx} (78%) diff --git a/studio/components/to-be-cleaned/Storage/StorageExplorer/FileExplorer.js b/studio/components/to-be-cleaned/Storage/StorageExplorer/FileExplorer.js index c76f2d2a2e4..21b30091755 100644 --- a/studio/components/to-be-cleaned/Storage/StorageExplorer/FileExplorer.js +++ b/studio/components/to-be-cleaned/Storage/StorageExplorer/FileExplorer.js @@ -1,10 +1,11 @@ import React, { useEffect, useRef } from 'react' -import { STORAGE_VIEWS, CONTEXT_MENU_KEYS } from '../Storage.constants' +import { STORAGE_VIEWS, CONTEXT_MENU_KEYS } from '../Storage.constants' import ItemContextMenu from './ItemContextMenu' import FolderContextMenu from './FolderContextMenu' import ColumnContextMenu from './ColumnContextMenu' import FileExplorerColumn from './FileExplorerColumn' +import { useStorageStore } from 'localStores/storageExplorer/StorageExplorerStore' const FileExplorer = ({ view = STORAGE_VIEWS.COLUMNS, @@ -12,18 +13,7 @@ const FileExplorer = ({ openedFolders = [], selectedItems = [], selectedFilePreview = {}, - onCheckItem = () => {}, - onSelectItemDelete = () => {}, - onSelectItemRename = () => {}, - onSelectItemMove = () => {}, - onSelectFile = () => {}, - onRenameFile = () => {}, onFilesUpload = () => {}, - onCopyFileURL = () => {}, - onDownloadFile = () => {}, - onSelectFolder = () => {}, - onRenameFolder = () => {}, - onCreateFolder = () => {}, onSelectAllItemsInColumn = () => {}, onSelectColumnEmptySpace = () => {}, onSelectCreateFolder = () => {}, @@ -33,6 +23,15 @@ const FileExplorer = ({ onColumnLoadMore = () => {}, }) => { const fileExplorerRef = useRef(null) + const storageExplorerStore = useStorageStore() + + const { + downloadFile, + setSelectedItemsToDelete, + setSelectedItemToRename, + setSelectedItemsToMove, + copyFileURLToClipboard, + } = storageExplorerStore useEffect(() => { if (fileExplorerRef) { @@ -58,16 +57,16 @@ const FileExplorer = ({ /> setSelectedItemToRename(file)} + onSelectItemMove={(file) => setSelectedItemsToMove([file])} + onSelectItemDelete={(file) => setSelectedItemsToDelete([file])} + onCopyFileURL={async (file) => await copyFileURLToClipboard(file)} + onDownloadFile={async (file) => await downloadFile(file)} /> setSelectedItemToRename(folder)} + onDeleteFolder={(folder) => setSelectedItemsToDelete([folder])} /> {view === STORAGE_VIEWS.COLUMNS ? (
@@ -80,18 +79,7 @@ const FileExplorer = ({ openedFolders={openedFolders} selectedItems={selectedItems} selectedFilePreview={selectedFilePreview} - onCheckItem={onCheckItem} - onSelectFile={onSelectFile} - onRenameFile={onRenameFile} - onCopyFileURL={onCopyFileURL} onFilesUpload={onFilesUpload} - onDownloadFile={onDownloadFile} - onSelectFolder={onSelectFolder} - onRenameFolder={onRenameFolder} - onCreateFolder={onCreateFolder} - onSelectItemDelete={onSelectItemDelete} - onSelectItemRename={onSelectItemRename} - onSelectItemMove={onSelectItemMove} onSelectAllItemsInColumn={onSelectAllItemsInColumn} onSelectColumnEmptySpace={onSelectColumnEmptySpace} onColumnLoadMore={onColumnLoadMore} @@ -108,18 +96,7 @@ const FileExplorer = ({ column={columns[columns.length - 1]} selectedItems={selectedItems} selectedFilePreview={selectedFilePreview} - onCheckItem={onCheckItem} - onSelectFile={onSelectFile} - onRenameFile={onRenameFile} - onCopyFileURL={onCopyFileURL} onFilesUpload={onFilesUpload} - onDownloadFile={onDownloadFile} - onSelectFolder={onSelectFolder} - onRenameFolder={onRenameFolder} - onCreateFolder={onCreateFolder} - onSelectItemDelete={onSelectItemDelete} - onSelectItemRename={onSelectItemRename} - onSelectItemMove={onSelectItemMove} onSelectAllItemsInColumn={onSelectAllItemsInColumn} onSelectColumnEmptySpace={onSelectColumnEmptySpace} onColumnLoadMore={onColumnLoadMore} diff --git a/studio/components/to-be-cleaned/Storage/StorageExplorer/FileExplorerColumn.js b/studio/components/to-be-cleaned/Storage/StorageExplorer/FileExplorerColumn.js index bc418c2f92a..db2a5886e1b 100644 --- a/studio/components/to-be-cleaned/Storage/StorageExplorer/FileExplorerColumn.js +++ b/studio/components/to-be-cleaned/Storage/StorageExplorer/FileExplorerColumn.js @@ -57,18 +57,7 @@ const FileExplorerColumn = ({ openedFolders = [], selectedItems = [], selectedFilePreview = {}, - onCheckItem = () => {}, - onSelectItemDelete = () => {}, - onSelectItemRename = () => {}, - onSelectItemMove = () => {}, - onSelectFile = () => {}, - onRenameFile = () => {}, - onCopyFileURL = () => {}, onFilesUpload = () => {}, - onDownloadFile = () => {}, - onSelectFolder = () => {}, - onRenameFolder = () => {}, - onCreateFolder = () => {}, onSelectAllItemsInColumn = () => {}, onSelectColumnEmptySpace = () => {}, onColumnLoadMore = () => {}, @@ -212,17 +201,15 @@ const FileExplorerColumn = ({ selectedItems, openedFolders, selectedFilePreview, - onCheckItem, - onSelectFile, - onRenameFile, - onCopyFileURL, - onDownloadFile, - onSelectFolder, - onRenameFolder, - onCreateFolder, - onSelectItemDelete, - onSelectItemRename, - onSelectItemMove, + // onCheckItem, + // onRenameFile, + // onCopyFileURL, + // onDownloadFile, + // onRenameFolder, + // onCreateFolder, + // onSelectItemDelete, + // onSelectItemRename, + // onSelectItemMove, }} ItemComponent={FileExplorerRow} getItemSize={(index) => (index !== 0 && index === columnItems.length ? 85 : 37)} diff --git a/studio/components/to-be-cleaned/Storage/StorageExplorer/FileExplorerRow.js b/studio/components/to-be-cleaned/Storage/StorageExplorer/FileExplorerRow.tsx similarity index 78% rename from studio/components/to-be-cleaned/Storage/StorageExplorer/FileExplorerRow.js rename to studio/components/to-be-cleaned/Storage/StorageExplorer/FileExplorerRow.tsx index 6712cc90e09..fcb43622051 100644 --- a/studio/components/to-be-cleaned/Storage/StorageExplorer/FileExplorerRow.js +++ b/studio/components/to-be-cleaned/Storage/StorageExplorer/FileExplorerRow.tsx @@ -1,4 +1,4 @@ -import { useState, useRef, useEffect } from 'react' +import { FC, useState, useRef, useEffect } from 'react' import { find, has, isEmpty, isEqual } from 'lodash' import { Checkbox, @@ -11,10 +11,10 @@ import { IconFile, IconAlertCircle, IconDownload, - IconTrash, - IconCopy, IconEdit, IconMove, + IconClipboard, + IconTrash2, } from 'ui' import SVG from 'react-inlinesvg' import * as Tooltip from '@radix-ui/react-tooltip' @@ -24,11 +24,11 @@ import { STORAGE_ROW_TYPES, STORAGE_ROW_STATUS, CONTEXT_MENU_KEYS, -} from '../Storage.constants.ts' +} from '../Storage.constants' import { formatBytes } from 'lib/helpers' import { useStorageStore } from 'localStores/storageExplorer/StorageExplorerStore' -const RowIcon = ({ view, status, fileType, mimeType }) => { +const RowIcon = ({ view, status, fileType, mimeType }: any) => { if (view === STORAGE_VIEWS.LIST && status === STORAGE_ROW_STATUS.LOADING) { return } @@ -43,7 +43,6 @@ const RowIcon = ({ view, status, fileType, mimeType }) => { return ( code.replace(/svg/, 'svg class="w-4 h-4 text-color-inherit opacity-75"') } @@ -66,28 +65,43 @@ const RowIcon = ({ view, status, fileType, mimeType }) => { return } -const FileExplorerRow = ({ +interface Props { + item: any + view: string + columnIndex: number + selectedItems: any[] + openedFolders: any[] + selectedFilePreview: any +} + +const FileExplorerRow: FC = ({ item = {}, view = STORAGE_VIEWS.COLUMNS, columnIndex = 0, selectedItems = [], openedFolders = [], selectedFilePreview = {}, - - onCheckItem = () => {}, - onSelectFile = () => {}, - onRenameFile = () => {}, - onCopyFileURL = () => {}, - onDownloadFile = () => {}, - onSelectFolder = () => {}, - onRenameFolder = () => {}, - onCreateFolder = () => {}, - onSelectItemDelete = () => {}, - onSelectItemRename = () => {}, - onSelectItemMove = () => {}, }) => { const storageExplorerStore = useStorageStore() - const { downloadFolder } = storageExplorerStore + const { + popColumnAtIndex, + pushOpenedFolderAtIndex, + popOpenedFoldersAtIndex, + setFilePreview, + closeFilePreview, + clearSelectedItems, + addNewFolder, + renameFolder, + renameFile, + setSelectedItems, + setSelectedItemsToDelete, + setSelectedItemToRename, + setSelectedItemsToMove, + fetchFolderContents, + downloadFile, + downloadFolder, + copyFileURLToClipboard, + } = storageExplorerStore const itemWithColumnIndex = { ...item, columnIndex } const isSelected = find(selectedItems, item) !== undefined @@ -95,25 +109,47 @@ const FileExplorerRow = ({ openedFolders.length > columnIndex ? isEqual(openedFolders[columnIndex], item) : false const isPreviewed = !isEmpty(selectedFilePreview) && isEqual(selectedFilePreview.id, item.id) + const onSelectFile = async (columnIndex: number, file: any) => { + popColumnAtIndex(columnIndex) + popOpenedFoldersAtIndex(columnIndex - 1) + setFilePreview(file) + clearSelectedItems() + } + + const onSelectFolder = async (columnIndex: number, folder: any) => { + closeFilePreview() + clearSelectedItems(columnIndex + 1) + popOpenedFoldersAtIndex(columnIndex - 1) + pushOpenedFolderAtIndex(folder, columnIndex) + await fetchFolderContents(folder.id, folder.name, columnIndex) + } + + const onCheckItem = (item: any) => { + if (find(selectedItems, item) === undefined) { + setSelectedItems(selectedItems.concat([item])) + } else { + setSelectedItems(selectedItems.filter((selectedItem: any) => item.id !== selectedItem.id)) + } + closeFilePreview() + } + if (item.status === STORAGE_ROW_STATUS.EDITING) { - const inputRef = useRef(null) + const inputRef = useRef(null) const [itemName, setItemName] = useState(item.name) useEffect(() => { - if (inputRef.current) { - inputRef.current.select() - } + if (inputRef.current) inputRef.current.select() }, []) - const onSetItemName = (event) => { + const onSetItemName = async (event: any) => { event.preventDefault() event.stopPropagation() if (item.type === STORAGE_ROW_TYPES.FILE) { - onRenameFile(item, itemName, columnIndex) + await renameFile(item, itemName, columnIndex) } else if (has(item, 'id')) { - onRenameFolder(itemWithColumnIndex, itemName, columnIndex) + renameFolder(itemWithColumnIndex, itemName, columnIndex) } else { - onCreateFolder(itemName, columnIndex) + addNewFolder(itemName, columnIndex) } } @@ -146,57 +182,55 @@ const FileExplorerRow = ({ } const rowOptions = - item.type === STORAGE_ROW_TYPES.BUCKET - ? [{ name: 'Delete', onClick: () => onSelectItemDelete(itemWithColumnIndex) }] - : item.type === STORAGE_ROW_TYPES.FOLDER + item.type === STORAGE_ROW_TYPES.FOLDER ? [ { name: 'Rename', icon: , - onClick: () => onSelectItemRename(itemWithColumnIndex), + onClick: () => setSelectedItemToRename(itemWithColumnIndex), }, { name: 'Download', icon: , onClick: () => downloadFolder(itemWithColumnIndex), }, - { name: 'Separator' }, + { name: 'Separator', icon: undefined, onClick: undefined }, { name: 'Delete', - icon: , - onClick: () => onSelectItemDelete(itemWithColumnIndex), + icon: , + onClick: () => setSelectedItemsToDelete([itemWithColumnIndex]), }, ] : [ ...(!item.isCorrupted ? [ { - name: 'Copy URL', - icon: , - onClick: () => onCopyFileURL(itemWithColumnIndex), + name: 'Get URL', + icon: , + onClick: async () => await copyFileURLToClipboard(itemWithColumnIndex), }, { name: 'Rename', icon: , - onClick: () => onSelectItemRename(itemWithColumnIndex), + onClick: () => setSelectedItemToRename(itemWithColumnIndex), }, { name: 'Move', icon: , - onClick: () => onSelectItemMove(itemWithColumnIndex), + onClick: () => setSelectedItemsToMove([itemWithColumnIndex]), }, { name: 'Download', icon: , - onClick: () => onDownloadFile(itemWithColumnIndex), + onClick: async () => await downloadFile(itemWithColumnIndex), }, - { name: 'Separator' }, + { name: 'Separator', icon: undefined, onClick: undefined }, ] : []), { name: 'Delete', - icon: , - onClick: () => onSelectItemDelete(itemWithColumnIndex), + icon: , + onClick: () => setSelectedItemsToDelete([itemWithColumnIndex]), }, ] @@ -206,7 +240,7 @@ const FileExplorerRow = ({ const updatedAt = item.updated_at ? new Date(item.updated_at).toLocaleString() : '-' const { show } = useContextMenu() - const displayMenu = (event, rowType) => { + const displayMenu = (event: any, rowType: any) => { show(event, { id: rowType === STORAGE_ROW_TYPES.FILE diff --git a/studio/components/to-be-cleaned/Storage/StorageExplorer/PreviewPane.tsx b/studio/components/to-be-cleaned/Storage/StorageExplorer/PreviewPane.tsx index 855bd029827..2b64d35abd9 100644 --- a/studio/components/to-be-cleaned/Storage/StorageExplorer/PreviewPane.tsx +++ b/studio/components/to-be-cleaned/Storage/StorageExplorer/PreviewPane.tsx @@ -198,7 +198,7 @@ const PreviewPane = () => { onClick={async () => await copyFileURLToClipboard(file)} disabled={file.isCorrupted} > - Copy URL + Get URL ) : ( { iconRight={} disabled={file.isCorrupted} > - Get Signed URL + Get URL )} @@ -254,7 +254,7 @@ const PreviewPane = () => { header="Custom expiry for signed URL" visible={showExpiryInput} alignFooter="right" - confirmText="Get signed URL" + confirmText="Get URL" onCancel={() => setShowExpiryInput(false)} >
{ const { columns, selectedFilePreview, - setFilePreview, closeFilePreview, selectedItems, setSelectedItems, clearSelectedItems, selectedItemsToDelete, - setSelectedItemsToDelete, clearSelectedItemsToDelete, openedFolders, - pushOpenedFolderAtIndex, popColumnAtIndex, popOpenedFoldersAtIndex, - setSelectedItemToRename, selectedItemsToMove, - setSelectedItemsToMove, clearSelectedItemsToMove, view, setView, setSortBy, setSortByOrder, currentBucketName, - copyFileURLToClipboard, openBucket, loadExplorerPreferences, addNewFolderPlaceholder, - addNewFolder, fetchFolderContents, fetchMoreFolderContents, - renameFolder, deleteFolder, uploadFiles, deleteFiles, - downloadFile, - renameFile, moveFiles, } = storageExplorerStore @@ -100,35 +90,9 @@ const StorageExplorer = observer(({ bucket }) => { openBucket(bucket) }, [bucket]) - /** Navigation methods */ - - const onSelectFile = async (columnIndex, file) => { - popColumnAtIndex(columnIndex) - popOpenedFoldersAtIndex(columnIndex - 1) - setFilePreview(file) - clearSelectedItems() - } - - const onSelectFolder = async (columnIndex, folder) => { - closeFilePreview() - clearSelectedItems(columnIndex + 1) - popOpenedFoldersAtIndex(columnIndex - 1) - pushOpenedFolderAtIndex(folder, columnIndex) - await fetchFolderContents(folder.id, folder.name, columnIndex) - } - /** Checkbox selection methods */ /** [Joshen] We'll only support checkbox selection for files ONLY */ - const onCheckItem = (item) => { - if (find(selectedItems, item) === undefined) { - setSelectedItems(selectedItems.concat([item])) - } else { - setSelectedItems(selectedItems.filter((selectedItem) => item.id !== selectedItem.id)) - } - closeFilePreview() - } - const onSelectAllItemsInColumn = (columnIndex) => { const columnFiles = columns[columnIndex].items .filter((item) => item.type === STORAGE_ROW_TYPES.FILE) @@ -155,38 +119,6 @@ const StorageExplorer = observer(({ bucket }) => { addNewFolderPlaceholder(columnIndex) } - const onCreateFolder = (folderName, columnIndex) => { - addNewFolder(folderName, columnIndex) - } - - const onRenameFolder = (folder, newName, columnIndex) => { - renameFolder(folder, newName, columnIndex) - } - - const onSelectItemDelete = (file) => { - setSelectedItemsToDelete([file]) - } - - const onSelectItemRename = (file) => { - setSelectedItemToRename(file) - } - - const onSelectItemMove = (file) => { - setSelectedItemsToMove([file]) - } - - const onCopyFileURL = async (file) => { - await copyFileURLToClipboard(file) - } - - const onDownloadFile = async (file) => { - await downloadFile(file) - } - - const onRenameFile = async (file, newName, columnIndex) => { - await renameFile(file, newName, columnIndex) - } - const onFilesUpload = async (event, columnIndex = -1) => { event.persist() const items = event.target.files || event.dataTransfer.items @@ -255,18 +187,7 @@ const StorageExplorer = observer(({ bucket }) => { openedFolders={openedFolders} selectedItems={selectedItems} selectedFilePreview={selectedFilePreview} - onCheckItem={onCheckItem} - onSelectFile={onSelectFile} - onRenameFile={onRenameFile} onFilesUpload={onFilesUpload} - onCopyFileURL={onCopyFileURL} - onDownloadFile={onDownloadFile} - onSelectFolder={onSelectFolder} - onRenameFolder={onRenameFolder} - onCreateFolder={onCreateFolder} - onSelectItemDelete={onSelectItemDelete} - onSelectItemRename={onSelectItemRename} - onSelectItemMove={onSelectItemMove} onSelectAllItemsInColumn={onSelectAllItemsInColumn} onSelectColumnEmptySpace={onSelectColumnEmptySpace} onSelectCreateFolder={onSelectCreateFolder} From 1d668321135bc99090e54a9843888129fd898419 Mon Sep 17 00:00:00 2001 From: Joshen Lim Date: Thu, 12 Jan 2023 17:06:31 +0800 Subject: [PATCH 33/48] Update subscription change page with new design that includes team tier --- .../Billing/PlanSelection/PlanSelection.tsx | 32 +++- .../PlanSelection/Plans/PlanCTAButton.tsx | 47 ++++-- .../Billing/PlanSelection/Plans/PlanCard.tsx | 131 +++++++++++++++ .../PlanSelection/Plans/Plans.Constants.ts | 40 ++--- .../Billing/PlanSelection/Plans/Plans.tsx | 154 ------------------ studio/tailwind.config.js | 4 + 6 files changed, 204 insertions(+), 204 deletions(-) create mode 100644 studio/components/interfaces/Billing/PlanSelection/Plans/PlanCard.tsx delete mode 100644 studio/components/interfaces/Billing/PlanSelection/Plans/Plans.tsx diff --git a/studio/components/interfaces/Billing/PlanSelection/PlanSelection.tsx b/studio/components/interfaces/Billing/PlanSelection/PlanSelection.tsx index c2c52459e0e..3c54921b215 100644 --- a/studio/components/interfaces/Billing/PlanSelection/PlanSelection.tsx +++ b/studio/components/interfaces/Billing/PlanSelection/PlanSelection.tsx @@ -2,8 +2,9 @@ import Link from 'next/link' import { FC } from 'react' import { Transition } from '@headlessui/react' -import Plans from './Plans/Plans' +import PlanCard from './Plans/PlanCard' import { formatTierOptions } from './PlanSelection.utils' +import { Button, IconExternalLink } from 'ui' interface Props { visible: boolean @@ -16,7 +17,10 @@ const PlanSelection: FC = ({ visible, tiers, currentPlan, onSelectPlan }) const formattedTiers = formatTierOptions(tiers) // [Kevin] TODO Remove after team plan is generally available - const gridCols = formattedTiers.length === 3 ? 'gap-8 xl:grid-cols-3' : 'gap-4 xl:grid-cols-4' + const gridCols = + formattedTiers.length === 3 + ? 'gap-8 lg:grid-cols-3' + : 'gap-4 lg:grid-cols-3 xl:grid-cols-billingWithTeam' return ( = ({ visible, tiers, currentPlan, onSelectPlan })

Change your project's subscription

- + {formattedTiers.map((plan) => { + return ( + onSelectPlan(plan)} + /> + ) + })}
diff --git a/studio/components/interfaces/Billing/PlanSelection/Plans/PlanCTAButton.tsx b/studio/components/interfaces/Billing/PlanSelection/Plans/PlanCTAButton.tsx index 05dbf005a53..ca1595eaf6c 100644 --- a/studio/components/interfaces/Billing/PlanSelection/Plans/PlanCTAButton.tsx +++ b/studio/components/interfaces/Billing/PlanSelection/Plans/PlanCTAButton.tsx @@ -17,8 +17,8 @@ const PlanCTAButton: FC = ({ plan, currentPlan, onSelectPlan }) => { const projectUpdateDisabled = useFlag('disableProjectCreationAndUpdate') const getButtonType = (plan: any, currentPlan: any) => { - if (['Enterprise', 'Free tier'].includes(plan.name)) { - // Enterprise/Free are always default + if (['Free tier'].includes(plan.name)) { + // Free is always default return 'default' } else if (currentPlan.prod_id === STRIPE_PRODUCT_IDS.FREE) { // If the current plan is free, other plans are primary @@ -90,7 +90,7 @@ const PlanCTAButton: FC = ({ plan, currentPlan, onSelectPlan }) => { return ( - @@ -100,20 +100,33 @@ const PlanCTAButton: FC = ({ plan, currentPlan, onSelectPlan }) => { return (
- - {!disabled && projectUpdateDisabled && ( -

- Subscription changes are currently disabled, our engineers are working on a fix -

- )} + + + + + {!disabled && projectUpdateDisabled && ( + + +
+ + Subscription changes are currently disabled, our engineers are working on a fix + +
+ + )} +
) } diff --git a/studio/components/interfaces/Billing/PlanSelection/Plans/PlanCard.tsx b/studio/components/interfaces/Billing/PlanSelection/Plans/PlanCard.tsx new file mode 100644 index 00000000000..e9ebd88adec --- /dev/null +++ b/studio/components/interfaces/Billing/PlanSelection/Plans/PlanCard.tsx @@ -0,0 +1,131 @@ +import { STRIPE_PRODUCT_IDS } from 'lib/constants' +import { FC } from 'react' +import { IconCheck } from 'ui' + +import { useFlag } from 'hooks' +import PlanCTAButton from './PlanCTAButton' +import { PRICING_META } from './Plans.Constants' + +interface Props { + plan: any + currentPlan: any + onSelectPlan: () => void +} + +const PlanCard: FC = ({ plan, currentPlan, onSelectPlan }) => { + const teamTierEnabled = useFlag('teamTier') + + const planMeta = PRICING_META[plan.id] + const isEnterprise = plan.id === 'Enterprise' + const isCurrentPlan = + plan.id === currentPlan?.prod_id || + (plan.id === STRIPE_PRODUCT_IDS.PRO && currentPlan?.prod_id === STRIPE_PRODUCT_IDS.PRO) || + (plan.id === STRIPE_PRODUCT_IDS.PRO && currentPlan?.prod_id === STRIPE_PRODUCT_IDS.PAYG) + + return ( +
+
+
+
+

+ {planMeta.name} +

+ {isCurrentPlan ? ( +
+ Current plan +
+ ) : planMeta.new ? ( +
New
+ ) : ( + <> + )} +
+

{planMeta.description}

+
+ {planMeta.priceMonthly !== undefined ? ( + <> +

Starting from

+
+

${planMeta.priceMonthly}

+

{planMeta.priceUnit}

+
+
+ {planMeta.warning} +
+ + ) : ( + + )} +
+
+
+

{planMeta.preface}

+
    + {planMeta.features.map((feature) => ( +
  • +
    +
    +

    {feature}

    +
    • + ))} +
+
+
+ {!isEnterprise && ( +
+
+

{planMeta.additional}

+

{planMeta.scale}

+
+ + +
+ )} +
+ ) +} + +export default PlanCard diff --git a/studio/components/interfaces/Billing/PlanSelection/Plans/Plans.Constants.ts b/studio/components/interfaces/Billing/PlanSelection/Plans/Plans.Constants.ts index 1e8b6f8e918..29bf1fe3ff6 100644 --- a/studio/components/interfaces/Billing/PlanSelection/Plans/Plans.Constants.ts +++ b/studio/components/interfaces/Billing/PlanSelection/Plans/Plans.Constants.ts @@ -9,10 +9,11 @@ import { STRIPE_PRODUCT_IDS } from 'lib/constants' export const PRICING_META = { [STRIPE_PRODUCT_IDS.FREE]: { name: 'Free', - href: '#', - priceMonthly: 0, - warning: 'Limit of 2 free projects', description: 'Perfect for passion projects & simple websites.', + priceMonthly: 0, + priceUnit: 'per month per project', + warning: 'Limit of 2 free projects', + preface: 'Get started with:', features: [ 'Up to 500MB database & 1GB file storage', 'Up to 2GB bandwidth', @@ -25,17 +26,15 @@ export const PRICING_META = { '2 million Realtime messages', 'Community support', ], - additional: 'Free projects are paused after 1 week of inactivity.', - - cta: 'Get Started', + scale: 'Free projects are paused after 1 week of inactivity.', }, [STRIPE_PRODUCT_IDS.PRO]: { name: 'Pro', - href: '#', - from: true, - priceMonthly: 25, - warning: '+ any additional usage', description: 'For production applications with the option to scale.', + priceMonthly: 25, + priceUnit: 'per month per project', + warning: '+ any additional usage', + preface: 'Everything in the Free plan, plus:', features: [ '8GB database & 100GB file storage', '50GB bandwidth', @@ -50,19 +49,17 @@ export const PRICING_META = { 'No project pausing', 'Email support', ], - scale: 'Additional fees apply for usage and storage beyond the limits above.', - shutdown: '', - preface: 'Everything in the base plan, plus', additional: 'Need more? Turn off your spend cap to Pay As You Grow ', - cta: 'Get Started', + scale: 'Additional fees apply for usage and storage beyond the limits above.', }, [STRIPE_PRODUCT_IDS.TEAM]: { + new: true, name: 'Team', - href: '#', - from: true, - priceMonthly: 599, - warning: '+ usage', description: 'For collaborative teams with different permissions and access.', + priceMonthly: 599, + priceUnit: 'per month per organization', + warning: '+ usage', + preface: 'The following features will apply to all projects within the organization:', features: [ 'Usage-based pricing', '100,000 monthly active users included', @@ -75,10 +72,6 @@ export const PRICING_META = { '14 day backups', '28 day log retention', ], - scale: '', - shutdown: '', - additional: '', - cta: 'Get Started', }, Enterprise: { name: 'Enterprise', @@ -94,8 +87,5 @@ export const PRICING_META = { `On-premise support`, `24×7×365 premium enterprise support`, ], - scale: '', - shutdown: '', - cta: 'Contact Us', }, } diff --git a/studio/components/interfaces/Billing/PlanSelection/Plans/Plans.tsx b/studio/components/interfaces/Billing/PlanSelection/Plans/Plans.tsx deleted file mode 100644 index a08e0b5b14c..00000000000 --- a/studio/components/interfaces/Billing/PlanSelection/Plans/Plans.tsx +++ /dev/null @@ -1,154 +0,0 @@ -import { FC } from 'react' -import { IconCheck } from 'ui' - -import { STRIPE_PRODUCT_IDS } from 'lib/constants' -import { StripeProduct } from 'components/interfaces/Billing' -import PlanCTAButton from './PlanCTAButton' -import { PRICING_META } from './Plans.Constants' - -const AnimatedGradientBackground = () => ( -
-) - -const CurrentSubscriptionBanner = () => ( -
-

Current plan

-
-) - -interface Props { - plans: any[] - currentPlan?: StripeProduct - onSelectPlan: (plan: any) => void -} - -/** - * JSX below for the mapped plans is also very similar to www/pages/pricing - * TO DO: move to use shared components for these - * - * https://github.com/supabase/supabase/blob/master/www/pages/pricing/index.tsx - */ - -const Plans: FC = ({ plans, currentPlan, onSelectPlan }) => { - return ( - <> - {/* Existing available plans */} - {plans.map((plan) => { - const isCurrentPlan = - plan.id === currentPlan?.prod_id || - (plan.id === STRIPE_PRODUCT_IDS.PRO && currentPlan?.prod_id === STRIPE_PRODUCT_IDS.PRO) || - (plan.id === STRIPE_PRODUCT_IDS.PRO && currentPlan?.prod_id === STRIPE_PRODUCT_IDS.PAYG) - - return ( -
- {plan.id === STRIPE_PRODUCT_IDS.PRO && ( -
- -
- )} -
- {isCurrentPlan && } -
- - {PRICING_META[plan.id].name} - -
-
- {PRICING_META[plan.id].priceMonthly !== undefined ? ( - <> -
- {PRICING_META[plan.id].from && ( - From - )} - ${PRICING_META[plan.id].priceMonthly} - /mo -
- - ) : ( - Contact Us - )} -
- {PRICING_META[plan.id].warning && ( -
- {PRICING_META[plan.id].warning} -
- )} -
-
-
-
- -
-

{PRICING_META[plan.id].description}

-
-
-
- {PRICING_META[plan.id].preface && ( -

{PRICING_META[plan.id].preface}

- )} -
    - {PRICING_META[plan.id].features.map((feature) => ( -
  • -
    -
    -

    - {feature} -

    -
    • - ))} -
-
-
-
- {PRICING_META[plan.id].additional && ( -

{PRICING_META[plan.id].additional}

- )} - {PRICING_META[plan.id].scale && ( -

{PRICING_META[plan.id].scale}

- )} - {PRICING_META[plan.id].shutdown && ( -

{PRICING_META[plan.id].shutdown}

- )} -
-
-
-
-
- ) - })} - - ) -} - -export default Plans diff --git a/studio/tailwind.config.js b/studio/tailwind.config.js index a8cab68a3f1..21148b6013e 100644 --- a/studio/tailwind.config.js +++ b/studio/tailwind.config.js @@ -1,3 +1,4 @@ +const { repeat } = require('lodash') const ui = require('./../packages/config/ui.config.js') const blueGray = { @@ -120,6 +121,9 @@ module.exports = ui({ fontSize: { grid: '13px', }, + gridTemplateColumns: { + billingWithTeam: 'repeat(3, minmax(0, 1fr)) 0.9fr', + }, colors: { // gray: { ...gray }, // green: { ...green }, From cbdb7ab7773b8f5253d15eb1e8a49b437b696f64 Mon Sep 17 00:00:00 2001 From: Joshen Lim Date: Thu, 12 Jan 2023 17:31:33 +0800 Subject: [PATCH 34/48] Fix back button on update page --- studio/components/interfaces/Billing/EnterpriseUpdate.tsx | 4 ++-- studio/components/interfaces/Billing/ProUpgrade.tsx | 4 ++-- studio/components/interfaces/Billing/TeamUpgrade.tsx | 4 ++-- studio/components/ui/BackButton.tsx | 2 +- 4 files changed, 7 insertions(+), 7 deletions(-) diff --git a/studio/components/interfaces/Billing/EnterpriseUpdate.tsx b/studio/components/interfaces/Billing/EnterpriseUpdate.tsx index 969b5d58993..692007e2ae3 100644 --- a/studio/components/interfaces/Billing/EnterpriseUpdate.tsx +++ b/studio/components/interfaces/Billing/EnterpriseUpdate.tsx @@ -228,12 +228,12 @@ const EnterpriseUpdate: FC = ({
-
+

Change your project's subscription

diff --git a/studio/components/interfaces/Billing/ProUpgrade.tsx b/studio/components/interfaces/Billing/ProUpgrade.tsx index b4cf2635051..87d181d188e 100644 --- a/studio/components/interfaces/Billing/ProUpgrade.tsx +++ b/studio/components/interfaces/Billing/ProUpgrade.tsx @@ -231,13 +231,13 @@ const ProUpgrade: FC = ({ >
-
+
onSelectBack()} />

Change your project's subscription

diff --git a/studio/components/interfaces/Billing/TeamUpgrade.tsx b/studio/components/interfaces/Billing/TeamUpgrade.tsx index 7cc18e7847a..1c310177f1d 100644 --- a/studio/components/interfaces/Billing/TeamUpgrade.tsx +++ b/studio/components/interfaces/Billing/TeamUpgrade.tsx @@ -223,13 +223,13 @@ const TeamUpgrade: FC = ({ >
-
+
onSelectBack()} />

Change your project's subscription

diff --git a/studio/components/ui/BackButton.tsx b/studio/components/ui/BackButton.tsx index 0ae4923d8e7..5460c16a203 100644 --- a/studio/components/ui/BackButton.tsx +++ b/studio/components/ui/BackButton.tsx @@ -2,7 +2,7 @@ import { Button, IconArrowLeft } from 'ui' export function BackButton({ onClick }: { onClick: () => void }) { return ( -
+
From 622d4141fd4d8931658ce00ff4514236e250c90a Mon Sep 17 00:00:00 2001 From: Joshen Lim Date: Fri, 13 Jan 2023 14:22:12 +0800 Subject: [PATCH 35/48] Update copyt writing as per feedback --- .../interfaces/Billing/PlanSelection/Plans/Plans.Constants.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/studio/components/interfaces/Billing/PlanSelection/Plans/Plans.Constants.ts b/studio/components/interfaces/Billing/PlanSelection/Plans/Plans.Constants.ts index 29bf1fe3ff6..025e54ea8a7 100644 --- a/studio/components/interfaces/Billing/PlanSelection/Plans/Plans.Constants.ts +++ b/studio/components/interfaces/Billing/PlanSelection/Plans/Plans.Constants.ts @@ -55,7 +55,7 @@ export const PRICING_META = { [STRIPE_PRODUCT_IDS.TEAM]: { new: true, name: 'Team', - description: 'For collaborative teams with different permissions and access.', + description: 'Collaborate with different permissions and access patterns.', priceMonthly: 599, priceUnit: 'per month per organization', warning: '+ usage', From 31439e786083509a2322d927683e10d61a9dac06 Mon Sep 17 00:00:00 2001 From: Joshen Lim Date: Fri, 13 Jan 2023 15:27:49 +0800 Subject: [PATCH 36/48] Fix SQL editor exporting json data as [object Object] --- .../to-be-cleaned/SqlEditor/TabSqlQuery.js | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) diff --git a/studio/components/to-be-cleaned/SqlEditor/TabSqlQuery.js b/studio/components/to-be-cleaned/SqlEditor/TabSqlQuery.js index 28888b61c59..c377465d834 100644 --- a/studio/components/to-be-cleaned/SqlEditor/TabSqlQuery.js +++ b/studio/components/to-be-cleaned/SqlEditor/TabSqlQuery.js @@ -246,6 +246,16 @@ const ResultsDropdown = observer(() => { } } + const formatDataForCSV = (data = []) => { + return data.map((row) => { + const formattedRow = { ...row } + Object.keys(row).forEach((key) => { + if (typeof row[key] === 'object') formattedRow[key] = JSON.stringify(row[key]) + }) + return formattedRow + }) + } + return ( { From 8cc319e8630c6463a249f3657f089fe2aafa6b17 Mon Sep 17 00:00:00 2001 From: Joshen Lim Date: Tue, 17 Jan 2023 13:26:22 +0800 Subject: [PATCH 37/48] More refactors to reduce props drilldown, and implement expiry options in context menu --- .../layouts/StorageLayout/BucketRow.tsx | 73 ++++++++++++ .../layouts/StorageLayout/StorageMenu.tsx | 83 +------------- .../StorageExplorer/CustomExpiryModal.tsx | 80 +++++++++++++ .../Storage/StorageExplorer/FileExplorer.js | 20 +--- .../StorageExplorer/FileExplorerRow.tsx | 6 + .../StorageExplorer/ItemContextMenu.js | 108 +++++++++++++----- .../Storage/StorageExplorer/PreviewPane.tsx | 63 +--------- .../StorageExplorer/StorageExplorer.js | 2 + .../storageExplorer/StorageExplorerStore.js | 5 + studio/styles/contextMenu.scss | 3 + 10 files changed, 258 insertions(+), 185 deletions(-) create mode 100644 studio/components/layouts/StorageLayout/BucketRow.tsx create mode 100644 studio/components/to-be-cleaned/Storage/StorageExplorer/CustomExpiryModal.tsx diff --git a/studio/components/layouts/StorageLayout/BucketRow.tsx b/studio/components/layouts/StorageLayout/BucketRow.tsx new file mode 100644 index 00000000000..f96a5d96b4c --- /dev/null +++ b/studio/components/layouts/StorageLayout/BucketRow.tsx @@ -0,0 +1,73 @@ +import { FC } from 'react' +import { Badge, Dropdown, IconLoader, IconMoreVertical, IconTrash } from 'ui' + +import ProductMenuItem from 'components/ui/ProductMenu/ProductMenuItem' +import { STORAGE_ROW_STATUS } from 'components/to-be-cleaned/Storage/Storage.constants' + +interface Props { + bucket: any + projectRef?: string + isSelected: boolean + onSelectDeleteBucket: (bucket: any) => void + onSelectToggleBucketPublic: (bucket: any) => void +} + +const BucketRow: FC = ({ + bucket = {}, + projectRef = '', + isSelected = false, + onSelectDeleteBucket = () => {}, + onSelectToggleBucketPublic = () => {}, +}) => { + return ( + +

+ {bucket.name} +

+ {bucket.public && Public} +
+ } + url={`/project/${projectRef}/storage/buckets/${bucket.id}`} + isActive={isSelected} + action={ + bucket.status === STORAGE_ROW_STATUS.LOADING ? ( + + ) : bucket.status === STORAGE_ROW_STATUS.READY ? ( + onSelectToggleBucketPublic(bucket)} + > + {bucket.public ? 'Make private' : 'Make public'} + , + , + } + key="delete-bucket" + onClick={() => onSelectDeleteBucket(bucket)} + > + Delete bucket + , + ]} + > + + + ) : ( +
+ ) + } + /> + ) +} + +export default BucketRow diff --git a/studio/components/layouts/StorageLayout/StorageMenu.tsx b/studio/components/layouts/StorageLayout/StorageMenu.tsx index 2889292f42f..441e07c40a9 100644 --- a/studio/components/layouts/StorageLayout/StorageMenu.tsx +++ b/studio/components/layouts/StorageLayout/StorageMenu.tsx @@ -2,28 +2,18 @@ import { FC } from 'react' import Link from 'next/link' import { useRouter } from 'next/router' import { observer } from 'mobx-react-lite' -import { useStore } from 'hooks' -import { - Badge, - Button, - Dropdown, - Menu, - IconLoader, - IconMoreVertical, - Alert, - IconEdit, - IconTrash, -} from 'ui' +import { useParams } from 'hooks' +import { Button, Menu, IconLoader, Alert, IconEdit } from 'ui' -import ProductMenuItem from 'components/ui/ProductMenu/ProductMenuItem' -import { STORAGE_ROW_STATUS } from 'components/to-be-cleaned/Storage/Storage.constants' +import BucketRow from './BucketRow' import { useStorageStore } from 'localStores/storageExplorer/StorageExplorerStore' interface Props {} const StorageMenu: FC = () => { const router = useRouter() - const { ref, bucketId } = router.query + const { ref, bucketId } = useParams() + const page = router.pathname.split('/')[4] as | undefined | 'policies' @@ -31,9 +21,6 @@ const StorageMenu: FC = () => { | 'usage' | 'logs' - const { ui } = useStore() - const projectRef = ui.selectedProject?.ref - const storageExplorerStore = useStorageStore() const { loaded, @@ -98,7 +85,7 @@ const StorageMenu: FC = () => {
- +

Policies

 @@ -110,61 +97,3 @@ const StorageMenu: FC = () => { } export default observer(StorageMenu) - -const BucketRow = ({ - bucket = {}, - projectRef = '', - isSelected = false, - onSelectDeleteBucket = () => {}, - onSelectToggleBucketPublic = () => {}, -}: any) => { - return ( - -

- {bucket.name} -

- {bucket.public && Public} -
- } - url={`/project/${projectRef}/storage/buckets/${bucket.id}`} - isActive={isSelected} - action={ - bucket.status === STORAGE_ROW_STATUS.LOADING ? ( - - ) : bucket.status === STORAGE_ROW_STATUS.READY ? ( - onSelectToggleBucketPublic(bucket)} - > - {bucket.public ? 'Make private' : 'Make public'} - , - , - } - key="delete-bucket" - onClick={() => onSelectDeleteBucket(bucket)} - > - Delete bucket - , - ]} - > - - - ) : ( -
- ) - } - /> - ) -} diff --git a/studio/components/to-be-cleaned/Storage/StorageExplorer/CustomExpiryModal.tsx b/studio/components/to-be-cleaned/Storage/StorageExplorer/CustomExpiryModal.tsx new file mode 100644 index 00000000000..53e9ed0a043 --- /dev/null +++ b/studio/components/to-be-cleaned/Storage/StorageExplorer/CustomExpiryModal.tsx @@ -0,0 +1,80 @@ +import { FC } from 'react' +import { Form, Modal, Input, Button } from 'ui' +import { observer } from 'mobx-react-lite' +import { useStorageStore } from 'localStores/storageExplorer/StorageExplorerStore' + +interface Props {} + +const CustomExpiryModal: FC = () => { + const storageExplorerStore = useStorageStore() + const { selectedFileCustomExpiry, setSelectedFileCustomExpiry, copyFileURLToClipboard } = + storageExplorerStore + + const visible = selectedFileCustomExpiry !== undefined + const onClose = () => setSelectedFileCustomExpiry(undefined) + + console.log(selectedFileCustomExpiry) + + return ( + onClose()} + > +
{ + setSubmitting(true) + await copyFileURLToClipboard(selectedFileCustomExpiry, values.expiresIn) + setSubmitting(false) + onClose() + }} + validate={(values: any) => { + const errors: any = {} + if (values.expiresIn !== '' && values.expiresIn <= 0) + errors.expiresIn = 'Expiry duration cannot be less than 0' + return errors + }} + > + {({ values, isSubmitting }: { values: any; isSubmitting: boolean }) => ( + <> +
+ + seconds

} + /> + +
+ + +
+ + +
+ + + )} + +
+ ) +} + +export default observer(CustomExpiryModal) diff --git a/studio/components/to-be-cleaned/Storage/StorageExplorer/FileExplorer.js b/studio/components/to-be-cleaned/Storage/StorageExplorer/FileExplorer.js index 21b30091755..4e0f9af240b 100644 --- a/studio/components/to-be-cleaned/Storage/StorageExplorer/FileExplorer.js +++ b/studio/components/to-be-cleaned/Storage/StorageExplorer/FileExplorer.js @@ -1,4 +1,5 @@ import React, { useEffect, useRef } from 'react' +import { observer } from 'mobx-react-lite' import { STORAGE_VIEWS, CONTEXT_MENU_KEYS } from '../Storage.constants' import ItemContextMenu from './ItemContextMenu' @@ -25,13 +26,7 @@ const FileExplorer = ({ const fileExplorerRef = useRef(null) const storageExplorerStore = useStorageStore() - const { - downloadFile, - setSelectedItemsToDelete, - setSelectedItemToRename, - setSelectedItemsToMove, - copyFileURLToClipboard, - } = storageExplorerStore + const { setSelectedItemToRename } = storageExplorerStore useEffect(() => { if (fileExplorerRef) { @@ -55,14 +50,7 @@ const FileExplorer = ({ onSelectSort={onChangeSortBy} onSelectSortByOrder={onChangeSortByOrder} /> - setSelectedItemToRename(file)} - onSelectItemMove={(file) => setSelectedItemsToMove([file])} - onSelectItemDelete={(file) => setSelectedItemsToDelete([file])} - onCopyFileURL={async (file) => await copyFileURLToClipboard(file)} - onDownloadFile={async (file) => await downloadFile(file)} - /> + setSelectedItemToRename(folder)} @@ -110,4 +98,4 @@ const FileExplorer = ({ ) } -export default FileExplorer +export default observer(FileExplorer) diff --git a/studio/components/to-be-cleaned/Storage/StorageExplorer/FileExplorerRow.tsx b/studio/components/to-be-cleaned/Storage/StorageExplorer/FileExplorerRow.tsx index fcb43622051..7795203fa55 100644 --- a/studio/components/to-be-cleaned/Storage/StorageExplorer/FileExplorerRow.tsx +++ b/studio/components/to-be-cleaned/Storage/StorageExplorer/FileExplorerRow.tsx @@ -208,6 +208,12 @@ const FileExplorerRow: FC = ({ name: 'Get URL', icon: , onClick: async () => await copyFileURLToClipboard(itemWithColumnIndex), + children: [ + { name: 'Expire in 1 week' }, + { name: 'Expire in 1 month' }, + { name: 'Expire in 1 year' }, + { name: 'Custom expiry' }, + ], }, { name: 'Rename', diff --git a/studio/components/to-be-cleaned/Storage/StorageExplorer/ItemContextMenu.js b/studio/components/to-be-cleaned/Storage/StorageExplorer/ItemContextMenu.js index 993fd661b14..1b948c8bf12 100644 --- a/studio/components/to-be-cleaned/Storage/StorageExplorer/ItemContextMenu.js +++ b/studio/components/to-be-cleaned/Storage/StorageExplorer/ItemContextMenu.js @@ -1,43 +1,89 @@ -import { Menu, Item } from 'react-contexify' +import { Menu, Item, Separator, Submenu } from 'react-contexify' import 'react-contexify/dist/ReactContexify.css' +import { IconClipboard, IconEdit, IconMove, IconDownload, IconTrash2, IconChevronRight } from 'ui' +import { useStorageStore } from 'localStores/storageExplorer/StorageExplorerStore' +import { observer } from 'mobx-react-lite' + +const ItemContextMenu = ({ id = '' }) => { + const storageExplorerStore = useStorageStore() + const { + downloadFile, + selectedBucket, + setSelectedItemsToDelete, + setSelectedItemToRename, + setSelectedItemsToMove, + setSelectedFileCustomExpiry, + copyFileURLToClipboard, + } = storageExplorerStore + const isPublic = selectedBucket.public + + const onHandleClick = async (event, item, expiresIn) => { + if (item.isCorrupted) return + switch (event) { + case 'copy': + if (expiresIn < 0) return setSelectedFileCustomExpiry(item) + else return await copyFileURLToClipboard(item, expiresIn) + case 'rename': + return setSelectedItemToRename(item) + case 'move': + return setSelectedItemsToMove([item]) + case 'download': + return await downloadFile(item) + default: + break + } + } -const ItemContextMenu = ({ - id = '', - onCopyFileURL = () => {}, - onSelectItemRename = () => {}, - onSelectItemMove = () => {}, - onDownloadFile = () => {}, - onSelectItemDelete = () => {}, -}) => { return ( - (!props.item.isCorrupted ? onCopyFileURL(props.item) : () => {})} - > - Copy URL + {isPublic ? ( + onHandleClick('copy', props.item)}> + + Copy URL + + ) : ( + + + Copy URL +
+ } + arrow={} + > + onHandleClick('copy', props.item, 60 * 60 * 24 * 7)}> + Expire in 1 week + + onHandleClick('copy', props.item, 60 * 60 * 24 * 30)}> + Expire in 1 month + + onHandleClick('copy', props.item, 60 * 60 * 24 * 365)}> + Expire in 1 year + + onHandleClick('copy', props.item, -1)}> + Custom expiry + + + )} + onHandleClick('rename', props.item)}> + + Rename - - !props.item.isCorrupted ? onSelectItemRename(props.item) : () => {} - } - > - Rename + onHandleClick('move', props.item)}> + + Move - (!props.item.isCorrupted ? onSelectItemMove(props.item) : () => {})} - > - Move + onHandleClick('download', props.item)}> + + Download - (!props.item.isCorrupted ? onDownloadFile(props.item) : () => {})} - > - Download - - onSelectItemDelete(props.item)}> - Delete + + setSelectedItemsToDelete([props.item])}> + + Delete ) } -export default ItemContextMenu +export default observer(ItemContextMenu) diff --git a/studio/components/to-be-cleaned/Storage/StorageExplorer/PreviewPane.tsx b/studio/components/to-be-cleaned/Storage/StorageExplorer/PreviewPane.tsx index 2b64d35abd9..d4b8d87b1d2 100644 --- a/studio/components/to-be-cleaned/Storage/StorageExplorer/PreviewPane.tsx +++ b/studio/components/to-be-cleaned/Storage/StorageExplorer/PreviewPane.tsx @@ -101,10 +101,9 @@ const PreviewPane = () => { copyFileURLToClipboard, closeFilePreview, setSelectedItemsToDelete, + setSelectedFileCustomExpiry, } = storageExplorerStore - const [showExpiryInput, setShowExpiryInput] = useState(false) - const width = 450 const isOpen = !isEmpty(file) const size = file.metadata ? formatBytes(file.metadata.size) : null @@ -220,7 +219,7 @@ const PreviewPane = () => { > Expire in 1 year , - setShowExpiryInput(true)}> + setSelectedFileCustomExpiry(file)}> Custom expiry , ]} @@ -248,64 +247,6 @@ const PreviewPane = () => {
- setShowExpiryInput(false)} - > -
{ - setSubmitting(true) - await copyFileURLToClipboard(file, values.expiresIn) - setSubmitting(false) - setShowExpiryInput(false) - }} - validate={(values: any) => { - const errors: any = {} - if (values.expiresIn !== '' && values.expiresIn <= 0) - errors.expiresIn = 'Expiry duration cannot be less than 0' - return errors - }} - > - {({ values, isSubmitting }: { values: any; isSubmitting: boolean }) => ( - <> -
- - seconds

} - /> - -
- - -
- - -
- - - )} - -
) } diff --git a/studio/components/to-be-cleaned/Storage/StorageExplorer/StorageExplorer.js b/studio/components/to-be-cleaned/Storage/StorageExplorer/StorageExplorer.js index 53aa7b512e5..b19374ff0ba 100644 --- a/studio/components/to-be-cleaned/Storage/StorageExplorer/StorageExplorer.js +++ b/studio/components/to-be-cleaned/Storage/StorageExplorer/StorageExplorer.js @@ -11,6 +11,7 @@ import FileExplorerHeaderSelection from './FileExplorerHeaderSelection' import ConfirmDeleteModal from './ConfirmDeleteModal' import MoveItemsModal from './MoveItemsModal' import PreviewPane from './PreviewPane' +import CustomExpiryModal from './CustomExpiryModal' const StorageExplorer = observer(({ bucket }) => { const storageExplorerStore = useStorageStore() @@ -213,6 +214,7 @@ const StorageExplorer = observer(({ bucket }) => { onSelectCancel={clearSelectedItemsToMove} onSelectMove={onMoveSelectedFiles} /> +
) }) diff --git a/studio/localStores/storageExplorer/StorageExplorerStore.js b/studio/localStores/storageExplorer/StorageExplorerStore.js index 323a51d10ca..b9a1742668b 100644 --- a/studio/localStores/storageExplorer/StorageExplorerStore.js +++ b/studio/localStores/storageExplorer/StorageExplorerStore.js @@ -58,6 +58,7 @@ class StorageExplorerStore { selectedItemsToDelete = [] selectedItemsToMove = [] selectedFilePreview = {} + selectedFileCustomExpiry = undefined DEFAULT_OPTIONS = { limit: LIMIT, @@ -300,6 +301,10 @@ class StorageExplorerStore { this.selectedItemsToMove = [] } + setSelectedFileCustomExpiry = (item) => { + this.selectedFileCustomExpiry = item + } + addNewFolderPlaceholder = (columnIndex) => { const isPrepend = true const folderName = 'Untitled folder' diff --git a/studio/styles/contextMenu.scss b/studio/styles/contextMenu.scss index 88d9680880d..418b2fcd9a0 100644 --- a/studio/styles/contextMenu.scss +++ b/studio/styles/contextMenu.scss @@ -4,6 +4,9 @@ .react-contexify__item__content { @apply dark:text-white text-sm; } + .react-contexify__submenu { + @apply dark:bg-gray-300 border; + } } .react-contexify__item:not(.react-contexify__item--disabled):hover > .react-contexify__item__content, From e957ac14c552190a054d2f1dfc8566932b0399be Mon Sep 17 00:00:00 2001 From: thorwebdev Date: Tue, 17 Jan 2023 14:32:00 +0800 Subject: [PATCH 38/48] feat: schedule functions guide. --- .../NavigationMenu.constants.ts | 1 + .../guides/database/extensions/pgcron.mdx | 26 +++++++++++- .../guides/database/extensions/pgnet.mdx | 27 +++++++++--- .../guides/functions/schedule-functions.mdx | 42 +++++++++++++++++++ 4 files changed, 88 insertions(+), 8 deletions(-) create mode 100644 apps/docs/pages/guides/functions/schedule-functions.mdx diff --git a/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.constants.ts b/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.constants.ts index 2cb41f3a054..3cf62dee058 100644 --- a/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.constants.ts +++ b/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.constants.ts @@ -429,6 +429,7 @@ export const functions = { { name: 'Import Maps', url: '/guides/functions/import-maps', items: [] }, { name: 'Local Development', url: '/guides/functions/local-development', items: [] }, { name: 'Managing Secrets', url: '/guides/functions/secrets', items: [] }, + { name: 'Schedule Functions', url: '/guides/functions/schedule-functions', items: [] }, { name: 'Examples', url: '/guides/functions/examples', diff --git a/apps/docs/pages/guides/database/extensions/pgcron.mdx b/apps/docs/pages/guides/database/extensions/pgcron.mdx index 57a704e444a..1062db0fd32 100644 --- a/apps/docs/pages/guides/database/extensions/pgcron.mdx +++ b/apps/docs/pages/guides/database/extensions/pgcron.mdx @@ -63,6 +63,8 @@ The schedule uses the standard cron syntax, in which \* means "run every time pe * * * * * ``` +You can use [crontab.guru](https://crontab.guru/) to help validate your cron schedules. + ## Examples ### Delete data every week @@ -71,8 +73,8 @@ Delete old data on Saturday at 3:30am (GMT): ```sql select cron.schedule ( - 'webhook-every-minute', -- name of the cron job - '* * * * *', -- every minute + 'saturday-cleanup', -- name of the cron job + '30 3 * * 6', -- Saturday at 3:30am (GMT) $$ delete from events where event_time < now() - interval '1 week' $$ ); ``` @@ -85,6 +87,26 @@ Vacuum every day at 3:00am (GMT) SELECT cron.schedule('nightly-vacuum', '0 3 * * *', 'VACUUM'); ``` +### Invoke Supabase Edge Function every minute + +Make a POST request to a Supabase Edge Function every minute. Note: this requires the [`pg_net` extension](/docs/guides/database/extensions/pgnet) to be enabled. + +```sql +select + cron.schedule( + 'invoke-function-every-minute', + '* * * * *', -- every minute + $$ + select + net.http_post( + url:='https://project-ref.functions.supabase.co/function-name', + headers:='{"Content-Type": "application/json", "Authorization": "Bearer YOUR_ANON_KEY"}'::jsonb, + body:=concat('{"time": "', now(), '"}')::jsonb + ) as request_id; + $$ + ); +``` + ### Unschedule a job Unschedules a job called `'nightly-vacuum'` diff --git a/apps/docs/pages/guides/database/extensions/pgnet.mdx b/apps/docs/pages/guides/database/extensions/pgnet.mdx index 29283ab4430..18c51a8dd2a 100644 --- a/apps/docs/pages/guides/database/extensions/pgnet.mdx +++ b/apps/docs/pages/guides/database/extensions/pgnet.mdx @@ -53,11 +53,11 @@ Procedural languages are automatically installed within `pg_catalog`, so you don -## `http_get` [#http_get] +## `http_get` Creates an HTTP GET request returning the request's ID. HTTP requests are not started until the transaction is committed. -### Signature +### Signature [#get-signature] @@ -86,7 +86,7 @@ net.http_get( language plpgsql ``` -### Usage +### Usage [#get-usage] ```sql select net.http_get('https://news.ycombinator.com') as request_id; @@ -98,13 +98,13 @@ request_id After triggering `http_get`, use [`http_get_result`](#http_get_result) to get the result of the request. -## `http_post` [#http_post] +## `http_post` Creates an HTTP POST request with a JSON body, returning the request's ID. HTTP requests are not started until the transaction is committed. The body's character set encoding matches the database's `server_encoding` setting. -### Signature +### Signature [#post-signature] @@ -134,7 +134,7 @@ net.http_post( language plpgsql ``` -### Usage +### Usage [#post-usage] ```sql select @@ -150,6 +150,21 @@ request_id After triggering `http_post`, use [`http_get_result`](#http_get_result) to get the result of the request. +## Examples + +### Invoke a Supabase Edge Function + +Make a POST request to a Supabase Edge Function with auth header and JSON body payload: + +```sql +select + net.http_post( + url:='https://project-ref.functions.supabase.co/function-name', + headers:='{"Content-Type": "application/json", "Authorization": "Bearer YOUR_ANON_KEY"}'::jsonb, + body:='{"name": "pg_net"}'::jsonb + ) as request_id; +``` + ## Resources - Source code: [github.com/supabase/pg_net](https://github.com/supabase/pg_net/) diff --git a/apps/docs/pages/guides/functions/schedule-functions.mdx b/apps/docs/pages/guides/functions/schedule-functions.mdx new file mode 100644 index 00000000000..c5108b55523 --- /dev/null +++ b/apps/docs/pages/guides/functions/schedule-functions.mdx @@ -0,0 +1,42 @@ +import Layout from '~/layouts/DefaultGuideLayout' + +export const meta = { + id: 'schedule-functions', + title: 'Schedule Functions', + description: 'Schedule Functions with pg_cron.', +} + +The hosted Supabase Platform supports the [`pg_cron` extension](/docs/guides/database/extensions/pgcron), a simple cron-based job scheduler for PostgreSQL that runs inside the database. + +In combination with the [`pg_net` extension](/docs/guides/database/extensions/pgnet), this allows us to invoke functions periodically on a set schedule. + +## Examples + +### Invoke Function every minute + +Make a POST request to a Supabase Edge Function every minute: + +```sql +select + cron.schedule( + 'invoke-function-every-minute', + '* * * * *', -- every minute + $$ + select + net.http_post( + url:='https://project-ref.functions.supabase.co/function-name', + headers:='{"Content-Type": "application/json", "Authorization": "Bearer YOUR_ANON_KEY"}'::jsonb, + body:=concat('{"time": "', now(), '"}')::jsonb + ) as request_id; + $$ + ); +``` + +## Resources + +- [`pg_net` extension](/docs/guides/database/extensions/pgnet) +- [`pg_cron` extension](/docs/guides/database/extensions/pgcron) + +export const Page = ({ children }) => + +export default Page From f9c388db2de2e848b084086671f501be38504398 Mon Sep 17 00:00:00 2001 From: Joshen Lim Date: Fri, 13 Jan 2023 17:37:59 +0800 Subject: [PATCH 39/48] Allow one screenshot to be uploaded in the feedback widget --- .../FeedbackDropdown/FeedbackDropdown.tsx | 5 +- .../FeedbackDropdown/FeedbackWidget.tsx | 80 ++++++++++++------- 2 files changed, 57 insertions(+), 28 deletions(-) diff --git a/studio/components/layouts/ProjectLayout/LayoutHeader/FeedbackDropdown/FeedbackDropdown.tsx b/studio/components/layouts/ProjectLayout/LayoutHeader/FeedbackDropdown/FeedbackDropdown.tsx index 0f4944909fc..f083736a6cb 100644 --- a/studio/components/layouts/ProjectLayout/LayoutHeader/FeedbackDropdown/FeedbackDropdown.tsx +++ b/studio/components/layouts/ProjectLayout/LayoutHeader/FeedbackDropdown/FeedbackDropdown.tsx @@ -20,7 +20,10 @@ const FeedbackDropdown = () => { return ( setIsOpen(e)} + onOpenChange={(e) => { + setIsOpen(e) + if (!e) setScreenshot(undefined) + }} size="content" side="bottom" align="end" diff --git a/studio/components/layouts/ProjectLayout/LayoutHeader/FeedbackDropdown/FeedbackWidget.tsx b/studio/components/layouts/ProjectLayout/LayoutHeader/FeedbackDropdown/FeedbackWidget.tsx index a8defc57682..8dc1a5999f7 100644 --- a/studio/components/layouts/ProjectLayout/LayoutHeader/FeedbackDropdown/FeedbackWidget.tsx +++ b/studio/components/layouts/ProjectLayout/LayoutHeader/FeedbackDropdown/FeedbackWidget.tsx @@ -1,14 +1,14 @@ import Link from 'next/link' -import { useState, useEffect, useRef, FC } from 'react' +import { useState, useEffect, useRef, FC, ChangeEvent } from 'react' import { useRouter } from 'next/router' -import * as Tooltip from '@radix-ui/react-tooltip' import { toPng } from 'html-to-image' -import { Button, Input, Popover, IconCamera, IconX } from 'ui' +import { Button, Input, Popover, IconCamera, IconX, IconImage, Dropdown, IconUpload } from 'ui' import { useStore } from 'hooks' import { post } from 'lib/common/fetch' import { API_URL } from 'lib/constants' import { convertB64toBlob, uploadAttachment } from './FeedbackDropdown.utils' +import { timeout } from 'lib/helpers' interface Props { onClose: () => void @@ -30,6 +30,7 @@ const FeedbackWidget: FC = ({ const { ui } = useStore() const inputRef = useRef(null) + const uploadButtonRef = useRef() const [isSending, setSending] = useState(false) const [isSavingScreenshot, setIsSavingScreenshot] = useState(false) @@ -42,7 +43,7 @@ const FeedbackWidget: FC = ({ setFeedback(e.target.value) } - const captureScreenshot = () => { + const captureScreenshot = async () => { setIsSavingScreenshot(true) function filter(node: HTMLElement) { @@ -52,6 +53,8 @@ const FeedbackWidget: FC = ({ return true } + // Give time for dropdown to close + await timeout(100) toPng(document.body, { filter }) .then((dataUrl: any) => setScreenshot(dataUrl)) .catch((error: any) => { @@ -67,6 +70,18 @@ const FeedbackWidget: FC = ({ }) } + const onFilesUpload = async (event: ChangeEvent) => { + event.persist() + const [file] = event.target.files || (event as any).dataTransfer.items + + const reader = new FileReader() + reader.onload = function (event) { + setScreenshot(event.target?.result as string) + } + reader.readAsDataURL(file) + event.target.value = '' + } + const sendFeedback = async () => { if (feedback.length === 0 && screenshot !== undefined) { return ui.setNotification({ @@ -138,33 +153,44 @@ const FeedbackWidget: FC = ({
) : ( - - - From 32190dbad8cceed46c2c07b06e211f3619abdd66 Mon Sep 17 00:00:00 2001 From: Joshen Lim Date: Fri, 13 Jan 2023 17:39:51 +0800 Subject: [PATCH 40/48] Small style fix --- .../LayoutHeader/FeedbackDropdown/FeedbackWidget.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/studio/components/layouts/ProjectLayout/LayoutHeader/FeedbackDropdown/FeedbackWidget.tsx b/studio/components/layouts/ProjectLayout/LayoutHeader/FeedbackDropdown/FeedbackWidget.tsx index 8dc1a5999f7..a8b8ec910f7 100644 --- a/studio/components/layouts/ProjectLayout/LayoutHeader/FeedbackDropdown/FeedbackWidget.tsx +++ b/studio/components/layouts/ProjectLayout/LayoutHeader/FeedbackDropdown/FeedbackWidget.tsx @@ -112,7 +112,7 @@ const FeedbackWidget: FC = ({ } return ( -
+
Date: Tue, 17 Jan 2023 15:15:42 +0800 Subject: [PATCH 41/48] Implement expiry options in file explorer row menu --- .../Storage/Storage.constants.ts | 6 ++ .../StorageExplorer/CustomExpiryModal.tsx | 2 - .../StorageExplorer/FileExplorerRow.tsx | 61 +++++++++++++++++-- .../StorageExplorer/ItemContextMenu.js | 20 ++++-- .../Storage/StorageExplorer/PreviewPane.tsx | 19 +++--- 5 files changed, 86 insertions(+), 22 deletions(-) diff --git a/studio/components/to-be-cleaned/Storage/Storage.constants.ts b/studio/components/to-be-cleaned/Storage/Storage.constants.ts index 2620cf9fb2d..94fecf605f3 100644 --- a/studio/components/to-be-cleaned/Storage/Storage.constants.ts +++ b/studio/components/to-be-cleaned/Storage/Storage.constants.ts @@ -1,3 +1,9 @@ +export const URL_EXPIRY_DURATION = { + WEEK: 60 * 60 * 24 * 7, + MONTH: 60 * 60 * 24 * 30, + YEAR: 60 * 60 * 24 * 365, +} + export const STORAGE_VIEWS = { COLUMNS: 'COLUMNS', LIST: 'LIST', diff --git a/studio/components/to-be-cleaned/Storage/StorageExplorer/CustomExpiryModal.tsx b/studio/components/to-be-cleaned/Storage/StorageExplorer/CustomExpiryModal.tsx index 53e9ed0a043..08b26f795de 100644 --- a/studio/components/to-be-cleaned/Storage/StorageExplorer/CustomExpiryModal.tsx +++ b/studio/components/to-be-cleaned/Storage/StorageExplorer/CustomExpiryModal.tsx @@ -13,8 +13,6 @@ const CustomExpiryModal: FC = () => { const visible = selectedFileCustomExpiry !== undefined const onClose = () => setSelectedFileCustomExpiry(undefined) - console.log(selectedFileCustomExpiry) - return ( = ({ setSelectedItemsToDelete, setSelectedItemToRename, setSelectedItemsToMove, + setSelectedFileCustomExpiry, fetchFolderContents, downloadFile, downloadFolder, @@ -207,12 +210,29 @@ const FileExplorerRow: FC = ({ { name: 'Get URL', icon: , - onClick: async () => await copyFileURLToClipboard(itemWithColumnIndex), children: [ - { name: 'Expire in 1 week' }, - { name: 'Expire in 1 month' }, - { name: 'Expire in 1 year' }, - { name: 'Custom expiry' }, + { + name: 'Expire in 1 week', + onClick: async () => + await copyFileURLToClipboard(itemWithColumnIndex, URL_EXPIRY_DURATION.WEEK), + }, + { + name: 'Expire in 1 month', + onClick: async () => + await copyFileURLToClipboard( + itemWithColumnIndex, + URL_EXPIRY_DURATION.MONTH + ), + }, + { + name: 'Expire in 1 year', + onClick: async () => + await copyFileURLToClipboard(itemWithColumnIndex, URL_EXPIRY_DURATION.YEAR), + }, + { + name: 'Custom expiry', + onClick: async () => setSelectedFileCustomExpiry(itemWithColumnIndex), + }, ], }, { @@ -382,7 +402,36 @@ const FileExplorerRow: FC = ({ align="end" overlay={[ rowOptions.map((option) => { - if (option.name === 'Separator') { + if ((option?.children ?? []).length > 0) { + return ( + { + return ( + + {child.name} + + ) + })} + > +
+
+ {option.icon} +

{option.name}

+
+ +
+ + ) + } else if (option.name === 'Separator') { return } else { return ( diff --git a/studio/components/to-be-cleaned/Storage/StorageExplorer/ItemContextMenu.js b/studio/components/to-be-cleaned/Storage/StorageExplorer/ItemContextMenu.js index 1b948c8bf12..eb48047e271 100644 --- a/studio/components/to-be-cleaned/Storage/StorageExplorer/ItemContextMenu.js +++ b/studio/components/to-be-cleaned/Storage/StorageExplorer/ItemContextMenu.js @@ -1,8 +1,10 @@ +import { observer } from 'mobx-react-lite' import { Menu, Item, Separator, Submenu } from 'react-contexify' import 'react-contexify/dist/ReactContexify.css' import { IconClipboard, IconEdit, IconMove, IconDownload, IconTrash2, IconChevronRight } from 'ui' + +import { URL_EXPIRY_DURATION } from '../Storage.constants' import { useStorageStore } from 'localStores/storageExplorer/StorageExplorerStore' -import { observer } from 'mobx-react-lite' const ItemContextMenu = ({ id = '' }) => { const storageExplorerStore = useStorageStore() @@ -39,25 +41,31 @@ const ItemContextMenu = ({ id = '' }) => { {isPublic ? ( onHandleClick('copy', props.item)}> - Copy URL + Get URL ) : ( - Copy URL + Get URL
} arrow={} > - onHandleClick('copy', props.item, 60 * 60 * 24 * 7)}> + onHandleClick('copy', props.item, URL_EXPIRY_DURATION.WEEK)} + > Expire in 1 week - onHandleClick('copy', props.item, 60 * 60 * 24 * 30)}> + onHandleClick('copy', props.item, URL_EXPIRY_DURATION.MONTH)} + > Expire in 1 month - onHandleClick('copy', props.item, 60 * 60 * 24 * 365)}> + onHandleClick('copy', props.item, URL_EXPIRY_DURATION.YEAR)} + > Expire in 1 year onHandleClick('copy', props.item, -1)}> diff --git a/studio/components/to-be-cleaned/Storage/StorageExplorer/PreviewPane.tsx b/studio/components/to-be-cleaned/Storage/StorageExplorer/PreviewPane.tsx index d4b8d87b1d2..205e6fbbba6 100644 --- a/studio/components/to-be-cleaned/Storage/StorageExplorer/PreviewPane.tsx +++ b/studio/components/to-be-cleaned/Storage/StorageExplorer/PreviewPane.tsx @@ -1,9 +1,8 @@ +import Link from 'next/link' import { isEmpty } from 'lodash' -import { useState } from 'react' import { Button, Dropdown, - Form, IconX, IconLoader, IconClipboard, @@ -11,13 +10,11 @@ import { IconTrash2, IconAlertCircle, IconChevronDown, - Modal, - Input, } from 'ui' import SVG from 'react-inlinesvg' import { formatBytes } from 'lib/helpers' import { Transition } from '@headlessui/react' -import Link from 'next/link' +import { URL_EXPIRY_DURATION } from '../Storage.constants' import { useStorageStore } from 'localStores/storageExplorer/StorageExplorerStore' const PreviewFile = ({ mimeType, previewUrl }: { mimeType: string; previewUrl: string }) => { @@ -205,17 +202,23 @@ const PreviewPane = () => { align="center" overlay={[ await copyFileURLToClipboard(file, 60 * 60 * 24 * 7)} + onClick={async () => + await copyFileURLToClipboard(file, URL_EXPIRY_DURATION.WEEK) + } > Expire in 1 week , await copyFileURLToClipboard(file, 60 * 60 * 24 * 30)} + onClick={async () => + await copyFileURLToClipboard(file, URL_EXPIRY_DURATION.MONTH) + } > Expire in 1 month , await copyFileURLToClipboard(file, 60 * 60 * 24 * 365)} + onClick={async () => + await copyFileURLToClipboard(file, URL_EXPIRY_DURATION.YEAR) + } > Expire in 1 year , From f052e13c6d2d4c46e2dcd6b0a9de983ba4e0d45d Mon Sep 17 00:00:00 2001 From: Joshen Lim Date: Tue, 17 Jan 2023 15:21:27 +0800 Subject: [PATCH 42/48] Shift position of refresh button on table editor --- studio/components/grid/components/header/Header.tsx | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/studio/components/grid/components/header/Header.tsx b/studio/components/grid/components/header/Header.tsx index 1b3e8ae89bc..4ad75e4eaef 100644 --- a/studio/components/grid/components/header/Header.tsx +++ b/studio/components/grid/components/header/Header.tsx @@ -40,10 +40,7 @@ const Header: FC = ({ sorts, filters, onAddColumn, onAddRow, header onAddRow={onAddRow} /> )} -
- - {headerActions} -
+
{headerActions}
) } @@ -77,6 +74,7 @@ const DefaultHeader: FC = ({ sorts, filters, onAddColumn, on return (
+
From 3c410b9d1a94ff223798dbf07a4956ffdfb2d32c Mon Sep 17 00:00:00 2001 From: Inian Date: Tue, 17 Jan 2023 19:38:08 +0800 Subject: [PATCH 43/48] fix: switch to aws roles --- .github/workflows/mirror.yml | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/.github/workflows/mirror.yml b/.github/workflows/mirror.yml index 0a4d1b1fd57..47563fba1ef 100644 --- a/.github/workflows/mirror.yml +++ b/.github/workflows/mirror.yml @@ -19,12 +19,16 @@ jobs: permissions: contents: read packages: write + id-token: write steps: + - name: configure aws credentials + uses: aws-actions/configure-aws-credentials@v1 + with: + role-to-assume: ${{ secrets.PROD_AWS_ROLE }} + aws-region: us-east-1 - uses: docker/login-action@v2 with: registry: public.ecr.aws - username: ${{ secrets.PROD_ACCESS_KEY_ID }} - password: ${{ secrets.PROD_SECRET_ACCESS_KEY }} - uses: docker/login-action@v2 with: registry: ghcr.io From 391152b1c7e61b70cdb0a195f9eccb0f2bfda435 Mon Sep 17 00:00:00 2001 From: Rodrigo Mansueli Nunes Date: Tue, 17 Jan 2023 10:50:56 -0300 Subject: [PATCH 44/48] Update auth-azure.mdx Update to v2, fix typo in code. --- .../pages/guides/auth/social-login/auth-azure.mdx | 11 +++++------ 1 file changed, 5 insertions(+), 6 deletions(-) diff --git a/apps/docs/pages/guides/auth/social-login/auth-azure.mdx b/apps/docs/pages/guides/auth/social-login/auth-azure.mdx index d75a365b1d5..87104fdfb94 100644 --- a/apps/docs/pages/guides/auth/social-login/auth-azure.mdx +++ b/apps/docs/pages/guides/auth/social-login/auth-azure.mdx @@ -74,13 +74,12 @@ When your user signs in, call [signInWithOAuth()](/docs/reference/javascript/aut ```js async function signInWithAzure() { - const { data, error } = await supabase.auth.signInWithOAuth( - { - provider: 'azure', - }, - { - scopes: 'email', + const { data, error } = await supabase.auth.signInWithOAuth({ + provider: 'azure', + options: { + scopes: 'email' } + } ) } ``` From 2e54c98294b5a4894aa75d8979612447f4d8b51f Mon Sep 17 00:00:00 2001 From: Rodrigo Mansueli Nunes Date: Tue, 17 Jan 2023 11:29:26 -0300 Subject: [PATCH 45/48] Update apps/docs/pages/guides/auth/social-login/auth-azure.mdx Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> --- apps/docs/pages/guides/auth/social-login/auth-azure.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/docs/pages/guides/auth/social-login/auth-azure.mdx b/apps/docs/pages/guides/auth/social-login/auth-azure.mdx index 87104fdfb94..e73b8a01103 100644 --- a/apps/docs/pages/guides/auth/social-login/auth-azure.mdx +++ b/apps/docs/pages/guides/auth/social-login/auth-azure.mdx @@ -75,7 +75,7 @@ When your user signs in, call [signInWithOAuth()](/docs/reference/javascript/aut ```js async function signInWithAzure() { const { data, error } = await supabase.auth.signInWithOAuth({ - provider: 'azure', + provider: 'azure', options: { scopes: 'email' } From 009944c8b424280f4de08c6adb01a7333cec6a21 Mon Sep 17 00:00:00 2001 From: Rodrigo Mansueli Nunes Date: Tue, 17 Jan 2023 11:29:31 -0300 Subject: [PATCH 46/48] Update apps/docs/pages/guides/auth/social-login/auth-azure.mdx Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> --- apps/docs/pages/guides/auth/social-login/auth-azure.mdx | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/apps/docs/pages/guides/auth/social-login/auth-azure.mdx b/apps/docs/pages/guides/auth/social-login/auth-azure.mdx index e73b8a01103..57f398456b0 100644 --- a/apps/docs/pages/guides/auth/social-login/auth-azure.mdx +++ b/apps/docs/pages/guides/auth/social-login/auth-azure.mdx @@ -77,10 +77,9 @@ async function signInWithAzure() { const { data, error } = await supabase.auth.signInWithOAuth({ provider: 'azure', options: { - scopes: 'email' - } - } - ) + scopes: 'email', + }, + }) } ``` From 56a71fa1b3147bd8209bf2b774c58057c3249fdf Mon Sep 17 00:00:00 2001 From: dng Date: Tue, 17 Jan 2023 11:32:05 -0800 Subject: [PATCH 47/48] Update apps/www/pages/realtime/Realtime.tsx --- apps/www/pages/realtime/Realtime.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/www/pages/realtime/Realtime.tsx b/apps/www/pages/realtime/Realtime.tsx index 890332c1478..633b7bc7bae 100644 --- a/apps/www/pages/realtime/Realtime.tsx +++ b/apps/www/pages/realtime/Realtime.tsx @@ -238,7 +238,7 @@ function RealtimePage() {

, ]} // [TODO] Point to the correct docs URL - documentation_link={'/docs/guides/realtime/broadcast'} + documentation_link={'/docs/guides/realtime#broadcast'} /> From 9f8bfaac75dde3e275e40bf88a3b4a4e7af720a2 Mon Sep 17 00:00:00 2001 From: Isaiah Hamilton Date: Tue, 17 Jan 2023 20:26:53 -0500 Subject: [PATCH 48/48] updating numbers --- apps/www/data/Community.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/apps/www/data/Community.tsx b/apps/www/data/Community.tsx index 4a48cca53dd..ea9573cdcc4 100644 --- a/apps/www/data/Community.tsx +++ b/apps/www/data/Community.tsx @@ -30,7 +30,7 @@ const data: CommunityItem[] = [ }, { title: 'GitHub', - stat: '42,000+', + stat: '44,000+', statLabel: 'GitHub stars', img: 'github.png', invertImgDarkMode: true, @@ -42,7 +42,7 @@ const data: CommunityItem[] = [ }, { title: 'Twitter', - stat: '50,000+', + stat: '54,000+', statLabel: 'Followers', img: 'twitter.png', detail: () => ( @@ -53,7 +53,7 @@ const data: CommunityItem[] = [ }, { title: 'Discord', - stat: '10,000+', + stat: '12,000+', statLabel: 'SupaTroopers', img: 'discord.png', detail: () => (