Fix permissions issue upon creating organization, along with some small style fixes

studio/components/interfaces/Organization/NewOrg/NewOrgForm.tsx

@@ -108,7 +108,7 @@ const NewOrgForm = ({ onPaymentMethodReset }: NewOrgFormProps) => {
         payment_method: paymentMethodId,
         V2: true,
       })
-    } finally {
+    } catch (error) {
       setNewOrgLoading(false)
     }
   }

studio/data/organizations/organization-create-mutation.ts

@@ -2,6 +2,7 @@ import { useMutation, UseMutationOptions, useQueryClient } from '@tanstack/react
 import { toast } from 'react-hot-toast'
 
 import { post } from 'data/fetchers'
+import { permissionKeys } from 'data/permissions/keys'
 import { ResponseError } from 'types'
 import { organizationKeys } from './keys'
 
@@ -54,7 +55,10 @@ export const useOrganizationCreateMutation = ({
     (vars) => createOrganization(vars),
     {
       async onSuccess(data, variables, context) {
-        await queryClient.invalidateQueries(organizationKeys.list())
+        await Promise.all([
+          queryClient.invalidateQueries(organizationKeys.list()),
+          queryClient.invalidateQueries(permissionKeys.list()),
+        ])
         await onSuccess?.(data, variables, context)
       },
       async onError(data, variables, context) {

studio/data/organizations/organization-delete-mutation.ts

@@ -4,6 +4,7 @@ import { toast } from 'react-hot-toast'
 import { del } from 'data/fetchers'
 import { ResponseError } from 'types'
 import { organizationKeys } from './keys'
+import { permissionKeys } from 'data/permissions/keys'
 
 export type OrganizationDeleteVariables = {
   slug: string
@@ -33,7 +34,10 @@ export const useOrganizationDeleteMutation = ({
     (vars) => deleteOrganization(vars),
     {
       async onSuccess(data, variables, context) {
-        await queryClient.invalidateQueries(organizationKeys.list())
+        await Promise.all([
+          queryClient.invalidateQueries(organizationKeys.list()),
+          queryClient.invalidateQueries(permissionKeys.list()),
+        ])
         await onSuccess?.(data, variables, context)
       },
       async onError(data, variables, context) {

studio/pages/new-with-subscription.tsx

@@ -9,7 +9,7 @@ import { useCallback, useEffect, useState } from 'react'
 import { NewOrgForm } from 'components/interfaces/Organization'
 import { WizardLayout } from 'components/layouts'
 import { useSetupIntent } from 'data/stripe/setup-intent-mutation'
-import { useFlag, useStore } from 'hooks'
+import { useFlag } from 'hooks'
 import { STRIPE_PUBLIC_KEY } from 'lib/constants'
 import { useIsHCaptchaLoaded } from 'stores/hcaptcha-loaded-store'
 import { NextPageWithLayout } from 'types'
@@ -20,7 +20,6 @@ const stripePromise = loadStripe(STRIPE_PUBLIC_KEY)
  * No org selected yet, create a new one
  */
 const Wizard: NextPageWithLayout = () => {
-  const { ui } = useStore()
   const router = useRouter()
   const { isDarkMode } = useTheme()
 

studio/pages/new/[slug].tsx

@@ -94,7 +94,11 @@ const Wizard: NextPageWithLayout = () => {
     enabled: currentOrg?.subscription_id != undefined,
   })
 
-  const { mutate: createProject, isLoading: isCreatingNewProject } = useProjectCreateMutation({
+  const {
+    mutate: createProject,
+    isLoading: isCreatingNewProject,
+    isSuccess: isSuccessNewProject,
+  } = useProjectCreateMutation({
     onSuccess: (res) => {
       router.push(`/project/${res.ref}/building`)
     },
@@ -260,7 +264,7 @@ const Wizard: NextPageWithLayout = () => {
         <div key="panel-footer" className="flex items-center justify-between w-full">
           <Button
             type="default"
-            disabled={isCreatingNewProject}
+            disabled={isCreatingNewProject || isSuccessNewProject}
             onClick={() => router.push('/projects')}
           >
             Cancel
@@ -271,8 +275,8 @@ const Wizard: NextPageWithLayout = () => {
             )}
             <Button
               onClick={onClickNext}
-              loading={isCreatingNewProject}
-              disabled={isCreatingNewProject || !canSubmit}
+              loading={isCreatingNewProject || isSuccessNewProject}
+              disabled={isCreatingNewProject || isSuccessNewProject || !canSubmit}
             >
               Create new project
             </Button>