From b4adc456da1cb37406da2eda2a355db0f56e4f27 Mon Sep 17 00:00:00 2001
From: Joshen Lim <joshenlimek@gmail.com>
Date: Wed, 28 Jun 2023 17:42:56 +0800
Subject: [PATCH] Improve error handling

---
 .../Home/ProjectList/ProjectList.tsx          | 26 ++++++++++++++++---
 studio/components/ui/AlertError.tsx           | 10 +++++--
 studio/data/permissions/permissions-query.ts  | 13 +++++-----
 studio/data/projects/projects-query.ts        |  4 +--
 studio/pages/org/[slug]/apps.tsx              | 20 +++++++-------
 studio/types/base.ts                          |  4 ---
 6 files changed, 49 insertions(+), 28 deletions(-)

diff --git a/studio/components/interfaces/Home/ProjectList/ProjectList.tsx b/studio/components/interfaces/Home/ProjectList/ProjectList.tsx
index 6151aa7a7c1..14b0dcb0577 100644
--- a/studio/components/interfaces/Home/ProjectList/ProjectList.tsx
+++ b/studio/components/interfaces/Home/ProjectList/ProjectList.tsx
@@ -66,8 +66,16 @@ const OrganizationProjects = ({
   const isEmpty = !projects || projects.length === 0
   const canReadProjects = useCheckPermissions(PermissionAction.READ, 'projects', undefined, id)
 
-  const { isLoading: isLoadingProjects, isError: isErrorProjects } = useProjectsQuery()
-  const { isLoading: _isLoadingPermissions } = usePermissionsQuery()
+  const {
+    isLoading: isLoadingProjects,
+    isError: isErrorProjects,
+    error: projectsError,
+  } = useProjectsQuery()
+  const {
+    isLoading: _isLoadingPermissions,
+    isError: isErrorPermissions,
+    error: permissionsError,
+  } = usePermissionsQuery()
   const isLoadingPermissions = IS_PLATFORM ? _isLoadingPermissions : false
 
   return (
@@ -96,9 +104,19 @@ const OrganizationProjects = ({
         </ul>
       ) : (
         <ul className="mx-auto grid grid-cols-1 gap-4 sm:grid-cols-1 md:grid-cols-1 lg:grid-cols-2 xl:grid-cols-3">
-          {isErrorProjects ? (
+          {isErrorPermissions ? (
             <div className="col-span-3">
-              <AlertError subject={`Unable to retrieve projects under ${name}`} />
+              <AlertError
+                subject="Unable to retrieve permissions for your account"
+                error={permissionsError}
+              />
+            </div>
+          ) : isErrorProjects ? (
+            <div className="col-span-3">
+              <AlertError
+                subject={`Unable to retrieve projects under ${name}`}
+                error={projectsError}
+              />
             </div>
           ) : !canReadProjects ? (
             <div className="col-span-4 space-y-4 rounded-lg border-2 border-dashed border-gray-300 py-8 px-6 text-center">
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 (
     <Alert
@@ -30,7 +33,10 @@ const AlertError = ({ ref, subject }: AlertErrorProps) => {
         </Link>,
       ]}
     >
-      Try refreshing your browser, but if the issue persists, please reach out to us via support.
+      {error && <p className="mb-1">Error: {error.message}</p>}
+      <p>
+        Try refreshing your browser, but if the issue persists, please reach out to us via support.
+      </p>
     </Alert>
   )
 }
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<ReturnType<typeof getPermissions>>
-export type PermissionsError = unknown
+export type PermissionsError = ResponseError
 
 export const usePermissionsQuery = <TData = PermissionsData>(
   options: UseQueryOptions<PermissionsData, PermissionsError, TData> = {}
@@ -27,7 +25,10 @@ export const usePermissionsQuery = <TData = PermissionsData>(
   useQuery<PermissionsData, PermissionsError, TData>(
     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<ReturnType<typeof getProjects>>
-export type ProjectsError = unknown
+export type ProjectsError = ResponseError
 
 export const useProjectsQuery = <TData = ProjectsData>({
   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 ? (
         <Loading />
       ) : (
         <div className="p-4 pt-0">
           <div className="space-y-3">
             <section className="mt-4">
-              <h1 className="text-3xl">
-                {ui.selectedOrganization?.name ?? 'Organization'} settings
-              </h1>
+              <h1 className="text-3xl">{selectedOrganization?.name ?? 'Organization'} settings</h1>
             </section>
             <nav>
               <Tabs
diff --git a/studio/types/base.ts b/studio/types/base.ts
index 3bdb8d54dcf..0a79e4f9dc6 100644
--- a/studio/types/base.ts
+++ b/studio/types/base.ts
@@ -79,10 +79,6 @@ export interface Permission {
   resources: string[]
 }
 
-export interface ResponseError {
-  message: string
-}
-
 export interface ResponseFailure {
   error: ResponseError
 }