Handle failed API requests on schema page

mathesar_ui/src/pages/schema/SchemaOverview.svelte

@@ -2,8 +2,14 @@
   import type { QueryInstance } from '@mathesar/api/types/queries';
   import type { TableEntry } from '@mathesar/api/types/tables';
   import type { Database, SchemaEntry } from '@mathesar/AppTypes';
-  import { AnchorButton } from '@mathesar-component-library';
+  import { AnchorButton, Button } from '@mathesar-component-library';
   import { getDataExplorerPageUrl } from '@mathesar/routes/urls';
+  import type { RequestStatus } from '@mathesar/api/utils/requestUtils';
+  import ErrorBox from '@mathesar/components/message-boxes/ErrorBox.svelte';
+  import { iconRefresh } from '@mathesar/icons';
+  import { refetchQueriesForSchema } from '@mathesar/stores/queries';
+  import { refetchTablesForSchema } from '@mathesar/stores/tables';
+  import SpinnerButton from '@mathesar/component-library/spinner-button/SpinnerButton.svelte';
   import OverviewHeader from './OverviewHeader.svelte';
   import TablesList from './TablesList.svelte';
   import ExplorationsList from './ExplorationsList.svelte';
@@ -15,8 +21,8 @@
 
   export let tablesMap: Map<number, TableEntry>;
   export let explorationsMap: Map<number, QueryInstance>;
-  export let isTablesLoading = false;
-  export let isExplorationsLoading = false;
+  export let tablesRequestStatus: RequestStatus;
+  export let explorationsRequestStatus: RequestStatus;
 
   export let canExecuteDDL: boolean;
   export let canEditMetadata: boolean;
@@ -28,6 +34,7 @@
   $: hasExplorations = explorationsMap.size > 0;
   $: showTableCreationTutorial = !hasTables && canExecuteDDL;
   $: showExplorationTutorial = hasTables && !hasExplorations && canEditMetadata;
+  $: isExplorationsLoading = explorationsRequestStatus.state === 'processing';
 
   // Viewers can explore, they cannot save explorations
   $: canExplore = hasTables && hasExplorations && !isExplorationsLoading;
@@ -42,8 +49,26 @@
         {/if}
       </svelte:fragment>
     </OverviewHeader>
-    {#if isTablesLoading}
+    {#if tablesRequestStatus.state === 'processing'}
       <TableSkeleton numTables={schema.num_tables} />
+    {:else if tablesRequestStatus.state === 'failure'}
+      <ErrorBox>
+        <p>{tablesRequestStatus.errors[0]}</p>
+        <div>
+          <SpinnerButton
+            onClick={async () => {
+              await refetchTablesForSchema(schema.id);
+            }}
+            label="Retry"
+            icon={iconRefresh}
+          />
+          <a href="../">
+            <Button>
+              <span>Go to Database</span>
+            </Button>
+          </a>
+        </div>
+      </ErrorBox>
     {:else if showTableCreationTutorial}
       <CreateNewTableTutorial {database} {schema} />
     {:else}
@@ -60,6 +85,24 @@
       <OverviewHeader title="Saved Explorations" />
       {#if isExplorationsLoading}
         <ExplorationSkeleton />
+      {:else if explorationsRequestStatus.state === 'failure'}
+        <ErrorBox>
+          <p>{explorationsRequestStatus.errors[0]}</p>
+          <div>
+            <SpinnerButton
+              onClick={async () => {
+                await refetchQueriesForSchema(schema.id);
+              }}
+              label="Retry"
+              icon={iconRefresh}
+            />
+            <a href="../">
+              <Button>
+                <span>Go to Database</span>
+              </Button>
+            </a>
+          </div>
+        </ErrorBox>
       {:else if showExplorationTutorial}
         <CreateNewExplorationTutorial {database} {schema} />
       {:else}

mathesar_ui/src/pages/schema/SchemaPage.svelte

@@ -16,7 +16,6 @@
     getSchemaPageTablesSectionUrl,
     getSchemaPageUrl,
   } from '@mathesar/routes/urls';
-  import { States } from '@mathesar/api/utils/requestUtils';
   import { getUserProfileStoreFromContext } from '@mathesar/stores/userProfile';
   import { logEvent } from '@mathesar/utils/telemetry';
   import AddEditSchemaModal from '../database/AddEditSchemaModal.svelte';
@@ -58,8 +57,8 @@
 
   $: tablesMap = canExecuteDDL ? $tablesStore.data : $importVerifiedTablesStore;
   $: explorationsMap = $queries.data;
-  $: isTablesLoading = $tablesStore.state === States.Loading;
-  $: isExplorationsLoading = $queries.requestStatus.state === 'processing';
+  $: tablesRequestStatus = $tablesStore.requestStatus;
+  $: explorationsRequestStatus = $queries.requestStatus;
 
   $: tabs = [
     {
@@ -153,25 +152,25 @@
         <SchemaOverview
           {canExecuteDDL}
           {canEditMetadata}
-          {isTablesLoading}
-          {isExplorationsLoading}
+          {tablesRequestStatus}
           {tablesMap}
           {explorationsMap}
           {database}
           {schema}
+          {explorationsRequestStatus}
         />
       </div>
     {:else if activeTab?.id === 'tables'}
       <div class="tab-container">
-        {#if isTablesLoading}
+        {#if tablesRequestStatus.state === 'processing'}
           <TableSkeleton numTables={schema.num_tables} />
         {:else}
           <SchemaTables {canExecuteDDL} {tablesMap} {database} {schema} />
         {/if}
       </div>
     {:else if activeTab?.id === 'explorations'}
       <div class="tab-container">
-        {#if isExplorationsLoading}
+        {#if explorationsRequestStatus.state === 'processing'}
           <ExplorationSkeleton />
         {:else}
           <SchemaExplorations

mathesar_ui/src/stores/tables.ts

@@ -30,13 +30,15 @@ import type {
 } from '@mathesar/api/types/tables/split_table';
 import type { DBObjectEntry, Database, SchemaEntry } from '@mathesar/AppTypes';
 import { invalidIf } from '@mathesar/components/form';
-import type { PaginatedResponse } from '@mathesar/api/utils/requestUtils';
+import type {
+  PaginatedResponse,
+  RequestStatus,
+} from '@mathesar/api/utils/requestUtils';
 import {
   deleteAPI,
   getAPI,
   patchAPI,
   postAPI,
-  States,
 } from '@mathesar/api/utils/requestUtils';
 import { preloadCommonData } from '@mathesar/utils/preloadData';
 import { isTableImportConfirmationRequired } from '@mathesar/utils/tables';
@@ -47,9 +49,8 @@ import { currentSchemaId, addCountToSchemaNumTables } from './schemas';
 const commonData = preloadCommonData();
 
 export interface DBTablesStoreData {
-  state: States;
   data: Map<TableEntry['id'], TableEntry>;
-  error?: string;
+  requestStatus: RequestStatus;
 }
 
 const schemaTablesStoreMap: Map<
@@ -77,9 +78,8 @@ function setSchemaTablesStore(
   }
 
   const storeValue: DBTablesStoreData = {
-    state: States.Done,
     data: tables,
-    error: undefined,
+    requestStatus: { state: 'success' },
   };
 
   let store = schemaTablesStoreMap.get(schemaId);
@@ -110,7 +110,7 @@ export async function refetchTablesForSchema(
   try {
     store.update((currentData) => ({
       ...currentData,
-      state: States.Loading,
+      requestStatus: { state: 'processing' },
     }));
 
     schemaTablesRequestMap.get(schemaId)?.cancel();
@@ -128,8 +128,12 @@ export async function refetchTablesForSchema(
   } catch (err) {
     store.update((currentData) => ({
       ...currentData,
-      state: States.Error,
-      error: err instanceof Error ? err.message : 'Error in fetching schemas',
+      requestStatus: {
+        state: 'failure',
+        errors: [
+          err instanceof Error ? err.message : 'Error in fetching schemas',
+        ],
+      },
     }));
     return undefined;
   }
@@ -143,7 +147,7 @@ export function getTablesStoreForSchema(
   let store = schemaTablesStoreMap.get(schemaId);
   if (!store) {
     store = writable({
-      state: States.Loading,
+      requestStatus: { state: 'processing' },
       data: new Map(),
     });
     schemaTablesStoreMap.set(schemaId, store);
@@ -153,7 +157,7 @@ export function getTablesStoreForSchema(
       void refetchTablesForSchema(schemaId);
     }
     preload = false;
-  } else if (get(store).error) {
+  } else if (get(store).requestStatus.state === 'failure') {
     void refetchTablesForSchema(schemaId);
   }
   return store;
@@ -416,8 +420,8 @@ export const tables: Readable<DBTablesStoreData> = derived(
 
     if (!$currentSchemaId) {
       set({
-        state: States.Done,
         data: new Map(),
+        requestStatus: { state: 'success' },
       });
     } else {
       const store = getTablesStoreForSchema($currentSchemaId);