Merge pull request #13282 from supabase/master

Prod deploy dashboard

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 (
+    <>
+      <Dropdown
+        side="bottom"
+        align="end"
+        size="small"
+        overlay={
+          <>
+            {inviteEnabled && (
+              <Tooltip.Root delayDuration={0}>
+                <Tooltip.Trigger className="w-full">
+                  <Dropdown.Item
+                    icon={<IconMail size="small" />}
+                    disabled={!canInviteUsers}
+                    onClick={() => setInviteVisible(true)}
+                  >
+                    Send Invitation
+                  </Dropdown.Item>
+                </Tooltip.Trigger>
+                {!canInviteUsers && (
+                  <Tooltip.Content side="bottom">
+                    <Tooltip.Arrow className="radix-tooltip-arrow" />
+                    <div
+                      className={[
+                        'rounded bg-scale-100 py-1 px-2 leading-none shadow',
+                        'border border-scale-200',
+                      ].join(' ')}
+                    >
+                      <span className="text-xs text-scale-1200">
+                        You need additional permissions to invite users
+                      </span>
+                    </div>
+                  </Tooltip.Content>
+                )}
+              </Tooltip.Root>
+            )}
+
+            <Tooltip.Root delayDuration={0}>
+              <Tooltip.Trigger className="w-full">
+                <Dropdown.Item
+                  icon={<IconUserPlus size="small" />}
+                  disabled={!canCreateUsers}
+                  onClick={() => setCreateVisible(true)}
+                >
+                  Create New User
+                </Dropdown.Item>
+              </Tooltip.Trigger>
+
+              {!canCreateUsers && (
+                <Tooltip.Content side="bottom">
+                  <Tooltip.Arrow className="radix-tooltip-arrow" />
+                  <div
+                    className={[
+                      'rounded bg-scale-100 py-1 px-2 leading-none shadow',
+                      'border border-scale-200',
+                    ].join(' ')}
+                  >
+                    <span className="text-xs text-scale-1200">
+                      You need additional permissions to create users
+                    </span>
+                  </div>
+                </Tooltip.Content>
+              )}
+            </Tooltip.Root>
+          </>
+        }
+      >
+        <Button type="primary" iconRight={<IconChevronDown strokeWidth={1.5} />}>
+          Add user
+        </Button>
+      </Dropdown>
+
+      {inviteEnabled && <InviteUserModal visible={inviteVisible} setVisible={setInviteVisible} />}
+      <CreateUserModal visible={createVisible} setVisible={setCreateVisible} />
+    </>
+  )
+}
+
+export default AddUserDropdown

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 (
+    <Modal
+      closable
+      hideFooter
+      size="small"
+      key="create-user-modal"
+      visible={visible}
+      header="Create a new user"
+      onCancel={handleToggle}
+      loading={true}
+    >
+      <Form
+        validateOnBlur={false}
+        initialValues={{ email: '', password: '', autoConfirmUser: true }}
+        validate={validate}
+        onSubmit={onCreateUser}
+      >
+        {({ isSubmitting }: { isSubmitting: boolean }) => (
+          <Loading active={isLoading}>
+            <div className="space-y-6 py-4">
+              <Modal.Content>
+                <div className="space-y-4">
+                  <Input
+                    id="email"
+                    autoComplete="off"
+                    label="User Email"
+                    icon={<IconMail />}
+                    type="email"
+                    name="email"
+                    placeholder="user@example.com"
+                    disabled={isSubmitting || isLoading}
+                  />
+
+                  <Input
+                    id="password"
+                    name="password"
+                    type="password"
+                    label="User Password"
+                    placeholder="&bull;&bull;&bull;&bull;&bull;&bull;&bull;&bull;"
+                    icon={<IconLock />}
+                    disabled={isSubmitting || isLoading}
+                    autoComplete="new-password"
+                  />
+
+                  <Checkbox
+                    value="true"
+                    id="autoConfirmUser"
+                    name="autoConfirmUser"
+                    label="Auto Confirm User?"
+                    size="medium"
+                    description="Creates the user without sending them a confirmation email"
+                    defaultChecked={true}
+                    disabled={isSubmitting || isLoading}
+                  />
+                </div>
+              </Modal.Content>
+
+              <Modal.Content>
+                <Button
+                  block
+                  size="small"
+                  htmlType="submit"
+                  loading={isSubmitting}
+                  disabled={!canCreateUsers || isSubmitting || isLoading}
+                >
+                  Create user
+                </Button>
+              </Modal.Content>
+            </div>
+          </Loading>
+        )}
+      </Form>
+    </Modal>
+  )
+}
+
+export default observer(CreateUserModal)

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 (
     <div>
-      <Tooltip.Root delayDuration={0}>
-        <Tooltip.Trigger>
-          <Button as="span" onClick={handleToggle} icon={<IconPlus />} disabled={!canInviteUsers}>
-            Invite
-          </Button>
-        </Tooltip.Trigger>
-        {!canInviteUsers && (
-          <Tooltip.Content side="bottom">
-            <Tooltip.Arrow className="radix-tooltip-arrow" />
-            <div
-              className={[
-                'rounded bg-scale-100 py-1 px-2 leading-none shadow',
-                'border border-scale-200',
-              ].join(' ')}
-            >
-              <span className="text-xs text-scale-1200">
-                You need additional permissions to invite users
-              </span>
-            </div>
-          </Tooltip.Content>
-        )}
-      </Tooltip.Root>
       <Modal
         closable
         hideFooter
@@ -88,16 +69,15 @@ const InviteUserModal = () => {
         onCancel={handleToggle}
       >
         <Form
-          validateOnBlur
+          validateOnBlur={false}
           initialValues={{ email: '' }}
           validate={validate}
-          onSubmit={onInviteuser}
+          onSubmit={onInviteUser}
         >
           {({ isSubmitting }: { isSubmitting: boolean }) => (
             <div className="space-y-6 py-4">
               <Modal.Content>
                 <Input
-                  autoFocus
                   id="email"
                   className="w-full"
                   label="User email"
@@ -107,6 +87,7 @@ const InviteUserModal = () => {
                   placeholder="User email"
                 />
               </Modal.Content>
+
               <Modal.Content>
                 <Button
                   block

studio/components/interfaces/Auth/Users/Users.tsx

@@ -1,22 +1,13 @@
-import semver from 'semver'
-import { useEffect, useContext } from 'react'
 import { observer } from 'mobx-react-lite'
-import { Button, Input, IconSearch, IconX, IconRefreshCw, Listbox, IconUsers } from 'ui'
+import { useContext, useEffect } from 'react'
+import { Button, IconRefreshCw, IconSearch, IconX, Input, Listbox } from 'ui'
 
-import { IS_PLATFORM } from 'lib/constants'
 import { PageContext } from 'pages/project/[ref]/auth/users'
+import AddUserDropdown from './AddUserDropdown'
 import UsersList from './UsersList'
-import InviteUserModal from './InviteUserModal'
 
 const Users = () => {
   const PageState: any = useContext(PageContext)
-  const inviteEnabled = IS_PLATFORM
-    ? semver.gte(
-        // @ts-ignore
-        semver.coerce(PageState?.projectKpsVersion ?? 'kps-v2.5.4'),
-        semver.coerce('kps-v2.5.3')
-      )
-    : true
 
   useEffect(() => {
     PageState.fetchData(1)
@@ -82,6 +73,7 @@ const Users = () => {
             onChange={onVerifiedFilterChange}
             name="verified"
             id="verified"
+            className="w-[200px]"
           >
             <Listbox.Option label="All Users" value="">
               All Users
@@ -94,9 +86,8 @@ const Users = () => {
             </Listbox.Option>
           </Listbox>
         </div>
-        <div className="mt-4 flex items-center md:mt-0">
+        <div className="mt-4 flex items-center gap-2 md:mt-0">
           <Button
-            className="mr-2"
             size="tiny"
             icon={<IconRefreshCw />}
             type="default"
@@ -105,7 +96,8 @@ const Users = () => {
           >
             Reload
           </Button>
-          {inviteEnabled && <InviteUserModal />}
+
+          <AddUserDropdown projectKpsVersion={PageState?.projectKpsVersion} />
         </div>
       </div>
       <section className="thin-scrollbars mt-4 overflow-visible px-6">

studio/components/interfaces/Settings/General/Infrastructure/ProjectUpgradeAlert/ProjectUpgradeAlert.tsx

@@ -79,6 +79,10 @@ const ProjectUpgradeAlert: FC<Props> = ({}) => {
       >
         <Form id={formId} initialValues={initialValues} onSubmit={onConfirmUpgrade}>
           {({ values, isSubmitting }: { values: any; isSubmitting: boolean }) => {
+            const selectedVersion = (data?.target_upgrade_versions ?? []).find(
+              (x) => x.postgres_version === values.version
+            )
+
             return (
               <>
                 <div className="py-6">
@@ -130,7 +134,10 @@ const ProjectUpgradeAlert: FC<Props> = ({}) => {
                         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) => (
                           <Listbox.Option

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()

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',
               },
             ]
           : []),

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<ReturnType<typeof createUser>>
+
+export const useUserCreateMutation = (
+  options: Omit<UseMutationOptions<UserCreateData, unknown, UserCreateVariables>, 'mutationFn'> = {}
+) => {
+  return useMutation<UserCreateData, unknown, UserCreateVariables>(
+    (vars) => createUser(vars),
+    options
+  )
+}

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 <Connecting />
   }
 
@@ -55,7 +76,7 @@ const GraphiQLPage: NextPageWithLayout = () => {
     )
   }
 
-  return <GraphiQL fetcher={fetcher} theme={ui.theme} accessToken={accessToken} />
+  return <GraphiQL fetcher={fetcher} theme={ui.theme} accessToken={anonKey} />
 }
 
 GraphiQLPage.getLayout = (page) => <DocsLayout title="GraphiQL">{page}</DocsLayout>

studio/pages/projects.tsx

@@ -12,7 +12,7 @@ const ProjectsPage: NextPageWithLayout = () => {
 
   return (
     <>
-      {app.organizations.isLoading ? (
+      {!app.organizations.isInitialized ? (
         <div className="flex h-full items-center justify-center space-x-2">
           <Connecting />
         </div>