Handle API errors on schema page

mathesar_ui/src/icons/index.ts

@@ -64,6 +64,7 @@ import {
   faCircleInfo,
   faUserGear,
   faFilterCircleXmark,
+  faExclamationCircle,
   faMicroscope,
   faDiagramNext,
   faWandSparkles,
@@ -183,6 +184,7 @@ export const iconUrl: IconProps = { data: faLink };
 
 export const iconNotEditable: IconProps = { data: faLock };
 export const iconUnsavedChanges: IconProps = { data: faCircleExclamation };
+export const iconWarning: IconProps = { data: faExclamationCircle };
 
 // UI TYPES
 

mathesar_ui/src/pages/schema/SchemaOverview.svelte

@@ -4,6 +4,11 @@
   import type { Database, SchemaEntry } from '@mathesar/AppTypes';
   import { AnchorButton } from '@mathesar-component-library';
   import { getDataExplorerPageUrl } from '@mathesar/routes/urls';
+  import { refetchQueriesForSchema } from '@mathesar/stores/queries';
+  import { refetchTablesForSchema } from '@mathesar/stores/tables';
+  import { currentSchemaId } from '@mathesar/stores/schemas';
+  import { Button, Icon } from '@mathesar-component-library';
+  import { iconRefresh, iconWarning } from '@mathesar/icons';
   import OverviewHeader from './OverviewHeader.svelte';
   import TablesList from './TablesList.svelte';
   import ExplorationsList from './ExplorationsList.svelte';
@@ -16,7 +21,9 @@
   export let tablesMap: Map<number, TableEntry>;
   export let explorationsMap: Map<number, QueryInstance>;
   export let isTablesLoading = false;
+  export let isTablesUnfetchable = false;
   export let isExplorationsLoading = false;
+  export let isExplorationsUnfetchable = false;
 
   export let canExecuteDDL: boolean;
   export let canEditMetadata: boolean;
@@ -30,7 +37,11 @@
   $: showExplorationTutorial = hasTables && !hasExplorations && canEditMetadata;
 
   // Viewers can explore, they cannot save explorations
-  $: canExplore = hasTables && hasExplorations && !isExplorationsLoading;
+  $: canExplore =
+    hasTables &&
+    hasExplorations &&
+    !isExplorationsLoading &&
+    !isExplorationsUnfetchable;
 </script>
 
 <div class="container">
@@ -44,6 +55,30 @@
     </OverviewHeader>
     {#if isTablesLoading}
       <TableSkeleton numTables={schema.num_tables} />
+    {:else if isTablesUnfetchable}
+      <div class="table-fetch-error">
+        <div>
+          <Icon {...iconWarning} />
+          <span>Error fetching tables</span>
+        </div>
+        <div>
+          <Button
+            on:click={() => {
+              if ($currentSchemaId) {
+                void refetchTablesForSchema($currentSchemaId);
+              }
+            }}
+          >
+            <Icon {...iconRefresh} />
+            <span>Retry</span>
+          </Button>
+          <a href="../">
+            <Button>
+              <span>Go to Database</span>
+            </Button>
+          </a>
+        </div>
+      </div>
     {:else if showTableCreationTutorial}
       <CreateNewTableTutorial {database} {schema} />
     {:else}
@@ -60,6 +95,30 @@
       <OverviewHeader title="Saved Explorations" />
       {#if isExplorationsLoading}
         <ExplorationSkeleton />
+      {:else if isExplorationsUnfetchable}
+        <div class="exploration-fetch-error">
+          <div>
+            <Icon {...iconWarning} />
+            <span>Error fetching explorations</span>
+          </div>
+          <div>
+            <Button
+              on:click={() => {
+                if ($currentSchemaId) {
+                  void refetchQueriesForSchema($currentSchemaId);
+                }
+              }}
+            >
+              <Icon {...iconRefresh} />
+              <span>Retry</span>
+            </Button>
+            <a href="../">
+              <Button>
+                <span>Go to Database</span>
+              </Button>
+            </a>
+          </div>
+        </div>
       {:else if showExplorationTutorial}
         <CreateNewExplorationTutorial {database} {schema} />
       {:else}
@@ -114,6 +173,45 @@
     }
   }
 
+  .table-fetch-error {
+    font-weight: 600;
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: flex-start;
+    padding: 16px;
+    gap: 16px;
+    width: 616px;
+    height: 105px;
+    background: #fdeeed;
+    border: 1px solid #f9cdc8;
+    border-radius: 8px;
+    flex: none;
+    order: 1;
+    align-self: stretch;
+    flex-grow: 0;
+  }
+
+  .exploration-fetch-error {
+    font-weight: 600;
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: flex-start;
+    padding: 16px;
+    gap: 16px;
+    width: 304px;
+    height: 105px;
+    background: #fdeeed;
+    border: 1px solid #f9cdc8;
+    border-radius: 8px;
+    flex: none;
+    order: 1;
+    align-self: stretch;
+  }
+
   @media screen and (min-width: 64rem) {
     .container {
       flex-direction: row;

mathesar_ui/src/pages/schema/SchemaPage.svelte

@@ -59,7 +59,9 @@
   $: tablesMap = canExecuteDDL ? $tablesStore.data : $importVerifiedTablesStore;
   $: explorationsMap = $queries.data;
   $: isTablesLoading = $tablesStore.state === States.Loading;
+  $: isTablesUnfetchable = $tablesStore.state === States.Error;
   $: isExplorationsLoading = $queries.requestStatus.state === 'processing';
+  $: isExplorationsUnfetchable = $queries.requestStatus.state === 'failure';
 
   $: tabs = [
     {
@@ -154,7 +156,9 @@
           {canExecuteDDL}
           {canEditMetadata}
           {isTablesLoading}
+          {isTablesUnfetchable}
           {isExplorationsLoading}
+          {isExplorationsUnfetchable}
           {tablesMap}
           {explorationsMap}
           {database}