From 9dab245f523ff018ced279631caf61d283a0f91e Mon Sep 17 00:00:00 2001 From: Joshen Lim Date: Wed, 8 Feb 2023 20:30:23 +0800 Subject: [PATCH 1/9] Revert 94d9a3a2cc43752797e676c52b41c1e9044fcc90 --- .../interfaces/Auth/Users/AddUserDropdown.tsx | 108 ++++++++++++ .../interfaces/Auth/Users/CreateUserModal.tsx | 164 ++++++++++++++++++ .../interfaces/Auth/Users/InviteUserModal.tsx | 47 ++--- .../interfaces/Auth/Users/Users.tsx | 21 +-- studio/data/auth/user-create-mutation.ts | 47 +++++ 5 files changed, 339 insertions(+), 48 deletions(-) create mode 100644 studio/components/interfaces/Auth/Users/AddUserDropdown.tsx create mode 100644 studio/components/interfaces/Auth/Users/CreateUserModal.tsx create mode 100644 studio/data/auth/user-create-mutation.ts diff --git a/studio/components/interfaces/Auth/Users/AddUserDropdown.tsx b/studio/components/interfaces/Auth/Users/AddUserDropdown.tsx new file mode 100644 index 00000000000..29505af9dab --- /dev/null +++ b/studio/components/interfaces/Auth/Users/AddUserDropdown.tsx @@ -0,0 +1,108 @@ +import * as Tooltip from '@radix-ui/react-tooltip' +import { PermissionAction } from '@supabase/shared-types/out/constants' +import { checkPermissions } from 'hooks' +import { IS_PLATFORM } from 'lib/constants' +import { useState } from 'react' +import semver from 'semver' +import { Button, Dropdown, IconMail, IconPlus, IconUserPlus } from 'ui' +import CreateUserModal from './CreateUserModal' +import InviteUserModal from './InviteUserModal' + +export type AddUserDropdownProps = { + projectKpsVersion?: string +} + +const AddUserDropdown = ({ projectKpsVersion }: AddUserDropdownProps) => { + const inviteEnabled = IS_PLATFORM + ? semver.gte( + // @ts-ignore + semver.coerce(projectKpsVersion ?? 'kps-v2.5.4'), + semver.coerce('kps-v2.5.3') + ) + : true + + const canInviteUsers = checkPermissions(PermissionAction.AUTH_EXECUTE, 'invite_user') + const canCreateUsers = checkPermissions(PermissionAction.AUTH_EXECUTE, 'create_user') + + const [inviteVisible, setInviteVisible] = useState(false) + const [createVisible, setCreateVisible] = useState(false) + + return ( + <> + + {inviteEnabled && ( + + + } + disabled={!canInviteUsers} + onClick={() => setInviteVisible(true)} + > + Send Invitation + + + {!canInviteUsers && ( + + +
+ + You need additional permissions to invite users + +
+ + )} + + )} + + + + } + disabled={!canCreateUsers} + onClick={() => setCreateVisible(true)} + > + Create New User + + + + {!canCreateUsers && ( + + +
+ + You need additional permissions to create users + +
+ + )} + + + } + > + + + + {inviteEnabled && } + + + ) +} + +export default AddUserDropdown diff --git a/studio/components/interfaces/Auth/Users/CreateUserModal.tsx b/studio/components/interfaces/Auth/Users/CreateUserModal.tsx new file mode 100644 index 00000000000..94698aca740 --- /dev/null +++ b/studio/components/interfaces/Auth/Users/CreateUserModal.tsx @@ -0,0 +1,164 @@ +import { PermissionAction } from '@supabase/shared-types/out/constants' +import { observer } from 'mobx-react-lite' +import { useContext } from 'react' +import { Button, Checkbox, Form, IconLock, IconMail, Input, Loading, Modal } from 'ui' + +import { useUserCreateMutation } from 'data/auth/user-create-mutation' +import { useProjectApiQuery } from 'data/config/project-api-query' +import { checkPermissions, useStore } from 'hooks' +import { PageContext } from 'pages/project/[ref]/auth/users' + +export type CreateUserModalProps = { + visible: boolean + setVisible: (visible: boolean) => void +} + +const CreateUserModal = ({ visible, setVisible }: CreateUserModalProps) => { + const { ui } = useStore() + const PageState: any = useContext(PageContext) + const projectRef = PageState.projectRef + + const { data, isLoading, isSuccess } = useProjectApiQuery({ projectRef }, { enabled: visible }) + + const handleToggle = () => setVisible(!visible) + const canCreateUsers = checkPermissions(PermissionAction.AUTH_EXECUTE, 'create_user') + + const validate = (values: any) => { + const errors: any = {} + const emailValidateRegex = + /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/ + + if (values.email.length === 0) { + errors.email = 'Please enter a valid email' + } else if (!emailValidateRegex.test(values.email)) { + errors.email = `${values.email} is an invalid email` + } + + if (!values.password?.trim()) { + errors.password = 'Please enter a password' + } + + return errors + } + + const { mutateAsync: createUser } = useUserCreateMutation({ + async onSuccess() { + await PageState.fetchData(1) + }, + }) + + const onCreateUser = async (values: any, { setSubmitting }: any) => { + if (!isSuccess) { + ui.setNotification({ + category: 'error', + message: `Failed to create user: Error loading project config`, + }) + + return + } + + const { protocol, endpoint, serviceApiKey } = data.autoApiService + + setSubmitting(true) + + try { + await createUser({ + endpoint, + protocol, + serviceApiKey, + user: values, + }) + + ui.setNotification({ + category: 'success', + message: `Created user: ${values.email}`, + }) + + setVisible(false) + } catch (error: any) { + ui.setNotification({ + category: 'error', + message: `Failed to create user: ${error.message}`, + }) + } + + setSubmitting(false) + } + + return ( + +
+ {({ isSubmitting }: { isSubmitting: boolean }) => ( + +
+ +
+ } + type="email" + name="email" + placeholder="user@example.com" + disabled={isSubmitting || isLoading} + /> + + } + disabled={isSubmitting || isLoading} + autoComplete="new-password" + /> + + +
+ + + + + +
+ + )} +
+ + ) +} + +export default observer(CreateUserModal) diff --git a/studio/components/interfaces/Auth/Users/InviteUserModal.tsx b/studio/components/interfaces/Auth/Users/InviteUserModal.tsx index 5f5898714cf..2ec628eb448 100644 --- a/studio/components/interfaces/Auth/Users/InviteUserModal.tsx +++ b/studio/components/interfaces/Auth/Users/InviteUserModal.tsx @@ -1,18 +1,21 @@ -import { useContext, useState } from 'react' -import { observer } from 'mobx-react-lite' -import * as Tooltip from '@radix-ui/react-tooltip' -import { Button, Modal, Input, IconPlus, IconMail, Form } from 'ui' import { PermissionAction } from '@supabase/shared-types/out/constants' +import { observer } from 'mobx-react-lite' +import { useContext } from 'react' +import { Button, Form, IconMail, Input, Modal } from 'ui' -import { useStore, checkPermissions } from 'hooks' +import { checkPermissions, useStore } from 'hooks' import { post } from 'lib/common/fetch' import { API_URL } from 'lib/constants' import { PageContext } from 'pages/project/[ref]/auth/users' -const InviteUserModal = () => { +export type InviteUserModalProps = { + visible: boolean + setVisible: (visible: boolean) => void +} + +const InviteUserModal = ({ visible, setVisible }: InviteUserModalProps) => { const { ui } = useStore() const PageState: any = useContext(PageContext) - const [visible, setVisible] = useState(false) const handleToggle = () => setVisible(!visible) const canInviteUsers = checkPermissions(PermissionAction.AUTH_EXECUTE, 'invite_user') @@ -31,7 +34,7 @@ const InviteUserModal = () => { return errors } - const onInviteuser = async (values: any, { setSubmitting }: any) => { + const onInviteUser = async (values: any, { setSubmitting }: any) => { setSubmitting(true) const response = await post(`${API_URL}/auth/${PageState.projectRef}/invite`, { @@ -56,28 +59,6 @@ const InviteUserModal = () => { return (
- - - - - {!canInviteUsers && ( - - -
- - You need additional permissions to invite users - -
- - )} - { onCancel={handleToggle} >
{({ isSubmitting }: { isSubmitting: boolean }) => (
{ placeholder="User email" /> +
-
+
- {inviteEnabled && } + +
diff --git a/studio/data/auth/user-create-mutation.ts b/studio/data/auth/user-create-mutation.ts new file mode 100644 index 00000000000..8b41d9612a3 --- /dev/null +++ b/studio/data/auth/user-create-mutation.ts @@ -0,0 +1,47 @@ +import { useMutation, UseMutationOptions } from '@tanstack/react-query' +import { post } from 'lib/common/fetch' + +export type UserCreateVariables = { + protocol: string + endpoint: string + serviceApiKey: string + user: { + email: string + password: string + autoConfirmUser: string + } +} + +export async function createUser({ protocol, endpoint, serviceApiKey, user }: UserCreateVariables) { + const response = await post( + `${protocol}://${endpoint}/auth/v1/admin/users`, + { + email: user.email, + password: user.password, + email_confirm: user.autoConfirmUser, + }, + { + headers: { + apikey: serviceApiKey, + Authorization: `Bearer ${serviceApiKey}`, + }, + credentials: 'omit', + } + ) + if (response.error) { + throw response.error + } + + return response +} + +type UserCreateData = Awaited> + +export const useUserCreateMutation = ( + options: Omit, 'mutationFn'> = {} +) => { + return useMutation( + (vars) => createUser(vars), + options + ) +} From 0024938a50834dd5b23515c5408dbb1356d6e618 Mon Sep 17 00:00:00 2001 From: Alaister Young Date: Wed, 22 Mar 2023 21:27:32 +1100 Subject: [PATCH 2/9] chore: adds x-graphql-authorization to graphiql --- studio/pages/project/[ref]/api/graphiql.tsx | 31 +++++++++++++++++---- 1 file changed, 26 insertions(+), 5 deletions(-) diff --git a/studio/pages/project/[ref]/api/graphiql.tsx b/studio/pages/project/[ref]/api/graphiql.tsx index 6fe1b70347c..02843ee891b 100644 --- a/studio/pages/project/[ref]/api/graphiql.tsx +++ b/studio/pages/project/[ref]/api/graphiql.tsx @@ -1,6 +1,6 @@ import { useEffect, useMemo } from 'react' import { observer } from 'mobx-react-lite' -import { createGraphiQLFetcher } from '@graphiql/toolkit' +import { createGraphiQLFetcher, Fetcher } from '@graphiql/toolkit' import { NextPageWithLayout } from 'types' import { useParams, useStore } from 'hooks' @@ -10,6 +10,7 @@ import GraphiQL from 'components/interfaces/GraphQL/GraphiQL' import { DocsLayout } from 'components/layouts' import Connecting from 'components/ui/Loading/Loading' import { useSessionAccessTokenQuery } from 'data/auth/session-access-token-query' +import { useProjectApiQuery } from 'data/config/project-api-query' const GraphiQLPage: NextPageWithLayout = () => { const { ref: projectRef } = useParams() @@ -17,7 +18,14 @@ const GraphiQLPage: NextPageWithLayout = () => { const isExtensionsLoading = meta.extensions.isLoading const pgGraphqlExtension = meta.extensions.byId('pg_graphql') + const { data: accessToken } = useSessionAccessTokenQuery() + const { data: settings, isFetched } = useProjectApiQuery({ projectRef }) + + const apiService = settings?.autoApiService + const anonKey = apiService?.service_api_keys.find((x) => x.name === 'anon key') + ? apiService.defaultApiKey + : undefined useEffect(() => { if (ui.selectedProject?.ref) { @@ -30,10 +38,23 @@ const GraphiQLPage: NextPageWithLayout = () => { const graphqlUrl = `${API_URL}/projects/${projectRef}/api/graphql` const fetcher = useMemo(() => { - return createGraphiQLFetcher({ url: graphqlUrl, fetch }) - }, [graphqlUrl]) + const fetcherFn = createGraphiQLFetcher({ url: graphqlUrl, fetch }) + const customFetcher: Fetcher = (graphqlParams, opts) => { + return fetcherFn(graphqlParams, { + ...opts, + headers: { + ...opts?.headers, + Authorization: `Bearer ${accessToken}`, + 'x-graphql-authorization': + opts?.headers?.['Authorization'] ?? opts?.headers?.['authorization'], + }, + }) + } - if (!accessToken || (isExtensionsLoading && !pgGraphqlExtension)) { + return customFetcher + }, [graphqlUrl, accessToken]) + + if (!accessToken || !isFetched || (isExtensionsLoading && !pgGraphqlExtension)) { return } @@ -55,7 +76,7 @@ const GraphiQLPage: NextPageWithLayout = () => { ) } - return + return } GraphiQLPage.getLayout = (page) => {page} From 60c7d7a42e5ecf51cf8d2b21795fad2aac021f35 Mon Sep 17 00:00:00 2001 From: Alaister Young Date: Tue, 28 Mar 2023 16:57:04 +1100 Subject: [PATCH 3/9] fix: table editor showing empty cells after renaming column --- .../TableGridEditor/SidePanelEditor/SidePanelEditor.tsx | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/studio/components/interfaces/TableGridEditor/SidePanelEditor/SidePanelEditor.tsx b/studio/components/interfaces/TableGridEditor/SidePanelEditor/SidePanelEditor.tsx index 9b002df95d9..99ce84b03f4 100644 --- a/studio/components/interfaces/TableGridEditor/SidePanelEditor/SidePanelEditor.tsx +++ b/studio/components/interfaces/TableGridEditor/SidePanelEditor/SidePanelEditor.tsx @@ -263,8 +263,13 @@ const SidePanelEditor = ({ if (response?.error) { ui.setNotification({ category: 'error', message: response.error.message }) } else { - await meta.tables.loadById(selectedTable!.id) queryClient.invalidateQueries(sqlKeys.query(project?.ref, ['foreign-key-constraints'])) + await Promise.all([ + meta.tables.loadById(selectedTable!.id), + queryClient.invalidateQueries( + sqlKeys.query(project?.ref, [selectedTable!.schema, selectedTable!.name]) + ), + ]) onColumnSaved(configuration.isEncrypted) setIsEdited(false) closePanel() From 76207ca2c0107dba6ce9a3897d218452b47dafa4 Mon Sep 17 00:00:00 2001 From: Joshen Lim Date: Tue, 28 Mar 2023 15:01:58 +0800 Subject: [PATCH 4/9] Update loading logic in projects list --- studio/pages/projects.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/studio/pages/projects.tsx b/studio/pages/projects.tsx index 217944485d8..c3da53796bb 100644 --- a/studio/pages/projects.tsx +++ b/studio/pages/projects.tsx @@ -12,7 +12,7 @@ const ProjectsPage: NextPageWithLayout = () => { return ( <> - {app.organizations.isLoading ? ( + {!app.organizations.isInitialized ? (
From cfb7ef0cd02c2771e80863ec2f2cee3deb7af9bf Mon Sep 17 00:00:00 2001 From: Joshen Lim Date: Tue, 28 Mar 2023 15:20:45 +0800 Subject: [PATCH 5/9] Add width to users dropdown in auth users page --- studio/components/interfaces/Auth/Users/Users.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/studio/components/interfaces/Auth/Users/Users.tsx b/studio/components/interfaces/Auth/Users/Users.tsx index 8f4e0536cad..eedb6cd93d4 100644 --- a/studio/components/interfaces/Auth/Users/Users.tsx +++ b/studio/components/interfaces/Auth/Users/Users.tsx @@ -82,6 +82,7 @@ const Users = () => { onChange={onVerifiedFilterChange} name="verified" id="verified" + className="w-[200px]" > All Users From 35f9ccdf5cefc9068936868bc561995fe4c531d7 Mon Sep 17 00:00:00 2001 From: Joshen Lim Date: Wed, 29 Mar 2023 01:49:14 +0800 Subject: [PATCH 6/9] Show exact app version in db upgrade modal --- .../ProjectUpgradeAlert/ProjectUpgradeAlert.tsx | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) diff --git a/studio/components/interfaces/Settings/General/Infrastructure/ProjectUpgradeAlert/ProjectUpgradeAlert.tsx b/studio/components/interfaces/Settings/General/Infrastructure/ProjectUpgradeAlert/ProjectUpgradeAlert.tsx index 559e60eaafa..c20ced8f37f 100644 --- a/studio/components/interfaces/Settings/General/Infrastructure/ProjectUpgradeAlert/ProjectUpgradeAlert.tsx +++ b/studio/components/interfaces/Settings/General/Infrastructure/ProjectUpgradeAlert/ProjectUpgradeAlert.tsx @@ -32,6 +32,8 @@ const ProjectUpgradeAlert: FC = ({}) => { const currentPgVersion = (data?.current_app_version ?? '').split('supabase-postgres-')[1] const latestPgVersion = (data?.latest_app_version ?? '').split('supabase-postgres-')[1] + console.log(data) + const initialValues = { version: data?.target_upgrade_versions?.[0]?.postgres_version ?? 0 } const onConfirmUpgrade = async (values: any, { setSubmitting }: any) => { @@ -79,6 +81,10 @@ const ProjectUpgradeAlert: FC = ({}) => { > {({ values, isSubmitting }: { values: any; isSubmitting: boolean }) => { + const selectedVersion = (data?.target_upgrade_versions ?? []).find( + (x) => x.postgres_version === values.version + ) + return ( <>
@@ -130,7 +136,10 @@ const ProjectUpgradeAlert: FC = ({}) => { id="version" name="version" label="Select the version of Postgres to upgrade to" - descriptionText={`Postgres will be upgraded from ${currentPgVersion} to ${values.version}`} + descriptionText={`Postgres will be upgraded from ${currentPgVersion} to ${ + selectedVersion?.app_version?.split('supabase-postgres-')[1] ?? + values.version + }`} > {data?.target_upgrade_versions.map((version) => ( Date: Wed, 29 Mar 2023 01:52:35 +0800 Subject: [PATCH 7/9] Remove logs --- .../Infrastructure/ProjectUpgradeAlert/ProjectUpgradeAlert.tsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/studio/components/interfaces/Settings/General/Infrastructure/ProjectUpgradeAlert/ProjectUpgradeAlert.tsx b/studio/components/interfaces/Settings/General/Infrastructure/ProjectUpgradeAlert/ProjectUpgradeAlert.tsx index c20ced8f37f..453770469a2 100644 --- a/studio/components/interfaces/Settings/General/Infrastructure/ProjectUpgradeAlert/ProjectUpgradeAlert.tsx +++ b/studio/components/interfaces/Settings/General/Infrastructure/ProjectUpgradeAlert/ProjectUpgradeAlert.tsx @@ -32,8 +32,6 @@ const ProjectUpgradeAlert: FC = ({}) => { const currentPgVersion = (data?.current_app_version ?? '').split('supabase-postgres-')[1] const latestPgVersion = (data?.latest_app_version ?? '').split('supabase-postgres-')[1] - console.log(data) - const initialValues = { version: data?.target_upgrade_versions?.[0]?.postgres_version ?? 0 } const onConfirmUpgrade = async (values: any, { setSubmitting }: any) => { From 50f9599ea34e62cc8f105bd49ffcf9dc2df51d78 Mon Sep 17 00:00:00 2001 From: Joshen Lim Date: Wed, 29 Mar 2023 12:14:11 +0800 Subject: [PATCH 8/9] Update icon --- studio/components/interfaces/Auth/Users/AddUserDropdown.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/studio/components/interfaces/Auth/Users/AddUserDropdown.tsx b/studio/components/interfaces/Auth/Users/AddUserDropdown.tsx index 29505af9dab..f1b9156df4a 100644 --- a/studio/components/interfaces/Auth/Users/AddUserDropdown.tsx +++ b/studio/components/interfaces/Auth/Users/AddUserDropdown.tsx @@ -4,7 +4,7 @@ import { checkPermissions } from 'hooks' import { IS_PLATFORM } from 'lib/constants' import { useState } from 'react' import semver from 'semver' -import { Button, Dropdown, IconMail, IconPlus, IconUserPlus } from 'ui' +import { Button, Dropdown, IconChevronDown, IconMail, IconPlus, IconUserPlus } from 'ui' import CreateUserModal from './CreateUserModal' import InviteUserModal from './InviteUserModal' @@ -94,8 +94,8 @@ const AddUserDropdown = ({ projectKpsVersion }: AddUserDropdownProps) => { } > - From 9d11fd94d6d1682231e3be90988a3074684e553f Mon Sep 17 00:00:00 2001 From: Joshen Lim Date: Wed, 29 Mar 2023 12:15:18 +0800 Subject: [PATCH 9/9] Remove ALPHA label for webhooks --- studio/components/layouts/DatabaseLayout/DatabaseMenu.utils.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/studio/components/layouts/DatabaseLayout/DatabaseMenu.utils.ts b/studio/components/layouts/DatabaseLayout/DatabaseMenu.utils.ts index 8ea9c65ca30..a84b0c0af8b 100644 --- a/studio/components/layouts/DatabaseLayout/DatabaseMenu.utils.ts +++ b/studio/components/layouts/DatabaseLayout/DatabaseMenu.utils.ts @@ -59,7 +59,6 @@ export const generateDatabaseMenu = (project?: Project): ProductMenuGroup[] => { key: 'wrappers', url: `/project/${ref}/database/wrappers`, items: [], - label: 'ALPHA', }, ] : []),