From 6e786a9d86ffcc005e9c3e7594bb88448013b527 Mon Sep 17 00:00:00 2001 From: Aritra8438 Date: Thu, 20 Apr 2023 00:32:44 +0530 Subject: [PATCH 1/4] Add variables to handle API errors --- mathesar_ui/src/pages/schema/SchemaPage.svelte | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/mathesar_ui/src/pages/schema/SchemaPage.svelte b/mathesar_ui/src/pages/schema/SchemaPage.svelte index 985bc570cd..4ee0a8caf3 100644 --- a/mathesar_ui/src/pages/schema/SchemaPage.svelte +++ b/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 = [ { @@ -152,7 +154,9 @@ {canExecuteDDL} {canEditMetadata} {isTablesLoading} + {isTablesUnfetchable} {isExplorationsLoading} + {isExplorationsUnfetchable} {tablesMap} {explorationsMap} {database} From f56d5c58f3145d8f075fd56b61973af1ffe6e108 Mon Sep 17 00:00:00 2001 From: Aritra8438 Date: Thu, 20 Apr 2023 00:33:07 +0530 Subject: [PATCH 2/4] Add buttons to refetch data --- .../src/pages/schema/SchemaOverview.svelte | 25 +++++++++++++++++++ 1 file changed, 25 insertions(+) diff --git a/mathesar_ui/src/pages/schema/SchemaOverview.svelte b/mathesar_ui/src/pages/schema/SchemaOverview.svelte index 3d4deeedf5..c3a7122264 100644 --- a/mathesar_ui/src/pages/schema/SchemaOverview.svelte +++ b/mathesar_ui/src/pages/schema/SchemaOverview.svelte @@ -4,6 +4,9 @@ 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 OverviewHeader from './OverviewHeader.svelte'; import TablesList from './TablesList.svelte'; import ExplorationsList from './ExplorationsList.svelte'; @@ -16,7 +19,9 @@ export let tablesMap: Map; export let explorationsMap: Map; export let isTablesLoading = false; + export let isTablesUnfetchable = false; export let isExplorationsLoading = false; + export let isExplorationsUnfetchable = false; export let canExecuteDDL: boolean; export let canEditMetadata: boolean; @@ -44,6 +49,16 @@ {#if isTablesLoading} + {:else if isTablesUnfetchable} + There was an error while fetching the tables. + + Go to database {:else if showTableCreationTutorial} {:else} @@ -60,6 +75,16 @@ {#if isExplorationsLoading} + {:else if isExplorationsUnfetchable} + There was an error while fetching the explorations. + + Go to database {:else if showExplorationTutorial} {:else} From 35ab59ff4a8d85d66eeb3803635fe48b2e265fcd Mon Sep 17 00:00:00 2001 From: Aritra8438 Date: Thu, 20 Apr 2023 01:00:48 +0530 Subject: [PATCH 3/4] Fix lint issues --- mathesar_ui/src/pages/schema/SchemaOverview.svelte | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/mathesar_ui/src/pages/schema/SchemaOverview.svelte b/mathesar_ui/src/pages/schema/SchemaOverview.svelte index c3a7122264..295b1975fc 100644 --- a/mathesar_ui/src/pages/schema/SchemaOverview.svelte +++ b/mathesar_ui/src/pages/schema/SchemaOverview.svelte @@ -54,7 +54,7 @@ @@ -80,7 +80,7 @@ From 39770f5d616f9d5ad45b424c1ad2de5b2134b233 Mon Sep 17 00:00:00 2001 From: Aritra8438 Date: Thu, 22 Jun 2023 09:39:30 +0530 Subject: [PATCH 4/4] Add design to the error states --- mathesar_ui/src/icons/index.ts | 2 + .../src/pages/schema/SchemaOverview.svelte | 111 +++++++++++++++--- 2 files changed, 94 insertions(+), 19 deletions(-) diff --git a/mathesar_ui/src/icons/index.ts b/mathesar_ui/src/icons/index.ts index 038c7cbc30..a6e764741a 100644 --- a/mathesar_ui/src/icons/index.ts +++ b/mathesar_ui/src/icons/index.ts @@ -64,6 +64,7 @@ import { faCircleInfo, faUserGear, faFilterCircleXmark, + faExclamationCircle, } from '@fortawesome/free-solid-svg-icons'; import type { IconProps } from '@mathesar-component-library/types'; import { @@ -169,6 +170,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 diff --git a/mathesar_ui/src/pages/schema/SchemaOverview.svelte b/mathesar_ui/src/pages/schema/SchemaOverview.svelte index 295b1975fc..0f23c56f2b 100644 --- a/mathesar_ui/src/pages/schema/SchemaOverview.svelte +++ b/mathesar_ui/src/pages/schema/SchemaOverview.svelte @@ -7,6 +7,8 @@ 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'; @@ -35,7 +37,11 @@ $: showExplorationTutorial = hasTables && !hasExplorations && canEditMetadata; // Viewers can explore, they cannot save explorations - $: canExplore = hasTables && hasExplorations && !isExplorationsLoading; + $: canExplore = + hasTables && + hasExplorations && + !isExplorationsLoading && + !isExplorationsUnfetchable;
@@ -50,15 +56,29 @@ {#if isTablesLoading} {:else if isTablesUnfetchable} - There was an error while fetching the tables. - - Go to database +
+
+ + Error fetching tables +
+
+ + + + +
+
{:else if showTableCreationTutorial} {:else} @@ -76,15 +96,29 @@ {#if isExplorationsLoading} {:else if isExplorationsUnfetchable} - There was an error while fetching the explorations. - - Go to database +
+
+ + Error fetching explorations +
+
+ + + + +
+
{:else if showExplorationTutorial} {:else} @@ -139,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;