diff --git a/studio/components/interfaces/Auth/Users/AddUserDropdown.tsx b/studio/components/interfaces/Auth/Users/AddUserDropdown.tsx new file mode 100644 index 00000000000..f1b9156df4a --- /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, IconChevronDown, 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/components/interfaces/Settings/General/Infrastructure/ProjectUpgradeAlert/ProjectUpgradeAlert.tsx b/studio/components/interfaces/Settings/General/Infrastructure/ProjectUpgradeAlert/ProjectUpgradeAlert.tsx index 559e60eaafa..453770469a2 100644 --- a/studio/components/interfaces/Settings/General/Infrastructure/ProjectUpgradeAlert/ProjectUpgradeAlert.tsx +++ b/studio/components/interfaces/Settings/General/Infrastructure/ProjectUpgradeAlert/ProjectUpgradeAlert.tsx @@ -79,6 +79,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 +134,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) => ( { key: 'wrappers', url: `/project/${ref}/database/wrappers`, items: [], - label: 'ALPHA', }, ] : []), 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 + ) +} 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} 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 ? (