diff --git a/studio/components/ui/AlertError.tsx b/studio/components/ui/AlertError.tsx
index 23174bc0dac..7bc950b7484 100644
--- a/studio/components/ui/AlertError.tsx
+++ b/studio/components/ui/AlertError.tsx
@@ -1,19 +1,22 @@
import Link from 'next/link'
+import { ResponseError } from 'types'
import { Alert, Button } from 'ui'
export interface AlertErrorProps {
ref?: string
subject?: string
+ error?: ResponseError
}
// [Joshen] To standardize the language for all error UIs
-const AlertError = ({ ref, subject }: AlertErrorProps) => {
+const AlertError = ({ ref, subject, error }: AlertErrorProps) => {
const subjectString = subject?.replace(/ /g, '%20')
let href = `/support/new?category=dashboard_bug`
if (ref) href += `&ref=${ref}`
if (subjectString) href += `&subject=${subjectString}`
+ if (error) href += `&message=Error:%20${error.message}`
return (
{
,
]}
>
- Try refreshing your browser, but if the issue persists, please reach out to us via support.
+ {error && Error: {error.message}
}
+
+ Try refreshing your browser, but if the issue persists, please reach out to us via support.
+
)
}
diff --git a/studio/data/permissions/permissions-query.ts b/studio/data/permissions/permissions-query.ts
index fa7d16d5492..0fea45d1876 100644
--- a/studio/data/permissions/permissions-query.ts
+++ b/studio/data/permissions/permissions-query.ts
@@ -2,7 +2,7 @@ import { useQuery, useQueryClient, UseQueryOptions } from '@tanstack/react-query
import { get } from 'lib/common/fetch'
import { API_URL, IS_PLATFORM } from 'lib/constants'
import { useCallback } from 'react'
-import { Permission } from 'types'
+import { Permission, ResponseError } from 'types'
import { permissionKeys } from './keys'
export type PermissionsResponse = Permission[]
@@ -11,15 +11,13 @@ export async function getPermissions(signal?: AbortSignal) {
const response = await get(`${API_URL}/profile/permissions`, {
signal,
})
- if (response.error) {
- throw response.error
- }
+ if (response.error) throw response.error
return response as PermissionsResponse
}
export type PermissionsData = Awaited
>
-export type PermissionsError = unknown
+export type PermissionsError = ResponseError
export const usePermissionsQuery = (
options: UseQueryOptions = {}
@@ -27,7 +25,10 @@ export const usePermissionsQuery = (
useQuery(
permissionKeys.list(),
({ signal }) => getPermissions(signal),
- { ...options, enabled: IS_PLATFORM && options.enabled }
+ {
+ ...options,
+ enabled: IS_PLATFORM && options.enabled,
+ }
)
export const usePermissionsPrefetch = () => {
diff --git a/studio/data/projects/projects-query.ts b/studio/data/projects/projects-query.ts
index 3a59cb7218b..4767ace9baa 100644
--- a/studio/data/projects/projects-query.ts
+++ b/studio/data/projects/projects-query.ts
@@ -3,7 +3,7 @@ import { useCallback, useRef } from 'react'
import { get } from 'lib/common/fetch'
import { API_URL } from 'lib/constants'
-import { Project } from 'types'
+import { Project, ResponseError } from 'types'
import { projectKeys } from './keys'
export type ProjectsVariables = {
@@ -17,7 +17,7 @@ export async function getProjects(signal?: AbortSignal) {
}
export type ProjectsData = Awaited>
-export type ProjectsError = unknown
+export type ProjectsError = ResponseError
export const useProjectsQuery = ({
enabled = true,
diff --git a/studio/pages/org/[slug]/apps.tsx b/studio/pages/org/[slug]/apps.tsx
index 95b26ceb47e..000ea4d1ec1 100644
--- a/studio/pages/org/[slug]/apps.tsx
+++ b/studio/pages/org/[slug]/apps.tsx
@@ -1,30 +1,30 @@
-import { useRouter } from 'next/router'
import { observer } from 'mobx-react-lite'
+import { useRouter } from 'next/router'
import { Tabs } from 'ui'
-import { NextPageWithLayout } from 'types'
-import { useStore } from 'hooks'
import { useParams } from 'common/hooks'
-import Loading from 'components/ui/Loading'
-import { OrganizationLayout } from 'components/layouts'
import { OAuthApps } from 'components/interfaces/Organization'
+import { OrganizationLayout } from 'components/layouts'
+import Loading from 'components/ui/Loading'
+import { usePermissionsQuery } from 'data/permissions/permissions-query'
+import { useSelectedOrganization } from 'hooks'
+import { NextPageWithLayout } from 'types'
const OrgOAuthApps: NextPageWithLayout = () => {
- const { ui } = useStore()
const { slug } = useParams()
const router = useRouter()
+ const selectedOrganization = useSelectedOrganization()
+ const { isLoading: isLoadingPermissions } = usePermissionsQuery()
return (
<>
- {ui.selectedOrganization === undefined && (ui?.permissions ?? []).length === 0 ? (
+ {selectedOrganization === undefined && isLoadingPermissions ? (
) : (
-
- {ui.selectedOrganization?.name ?? 'Organization'} settings
-
+ {selectedOrganization?.name ?? 'Organization'} settings