fix(dashboard): Display variant creation errors and list query errors (vendurehq#4460)

Author: grolmus

packages/dashboard/src/app/routes/_authenticated/_products/components/create-product-variants-dialog.tsx

@@ -10,11 +10,12 @@ import {
 } from '@/vdb/components/ui/dialog.js';
 import { api } from '@/vdb/graphql/api.js';
 import { useChannel } from '@/vdb/hooks/use-channel.js';
-import { Trans } from '@lingui/react/macro';
+import { Trans, useLingui } from '@lingui/react/macro';
 import { normalizeString } from '@/vdb/lib/utils.js';
 import { useMutation } from '@tanstack/react-query';
 import { Plus } from 'lucide-react';
 import { useCallback, useState } from 'react';
+import { toast } from 'sonner';
 import {
     addOptionGroupToProductDocument,
     createProductOptionGroupDocument,
@@ -32,6 +33,7 @@ export function CreateProductVariantsDialog({
     onSuccess?: () => void;
 }) {
     const { activeChannel } = useChannel();
+    const { t } = useLingui();
     const [variantData, setVariantData] = useState<VariantConfiguration | null>(null);
     const [open, setOpen] = useState(false);
 
@@ -127,8 +129,9 @@ export function CreateProductVariantsDialog({
             setOpen(false);
             onSuccess?.();
         } catch (error) {
-            console.error('Error creating variants:', error);
-            // Handle error (show toast notification, etc.)
+            toast.error(t`Failed to create product variants`, {
+                description: error instanceof Error ? error.message : t`Unknown error`,
+            });
         }
     }
 

packages/dashboard/src/lib/components/shared/paginated-list-data-table.tsx

@@ -1,4 +1,6 @@
 import { DataTable, FacetedFilter } from '@/vdb/components/data-table/data-table.js';
+import { Alert, AlertDescription, AlertTitle } from '@/vdb/components/ui/alert.js';
+import { Trans } from '@lingui/react/macro';
 import { getObjectPathToPaginatedList } from '@/vdb/framework/document-introspection/get-document-structure.js';
 import { useListQueryFields } from '@/vdb/framework/document-introspection/hooks.js';
 import { api } from '@/vdb/graphql/api.js';
@@ -441,7 +443,7 @@ export function PaginatedListDataTable<
     ];
     const queryKey = transformQueryKey ? transformQueryKey(defaultQueryKey) : defaultQueryKey;
 
-    const { data, isFetching } = useQuery({
+    const { data, isFetching, error } = useQuery({
         queryFn: () => {
             const searchFilter = onSearchTermChange ? onSearchTermChange(debouncedSearchTerm) : {};
             const mergedFilter = { ...filter, ...searchFilter };
@@ -469,6 +471,14 @@ export function PaginatedListDataTable<
         typeof transformData === 'function' ? transformData(listData?.items ?? []) : (listData?.items ?? []);
     return (
         <PaginatedListContext.Provider value={{ refetchPaginatedList }}>
+            {error && (
+                <Alert variant="destructive" className="mb-4">
+                    <AlertTitle><Trans>Error</Trans></AlertTitle>
+                    <AlertDescription>
+                        {error instanceof Error ? error.message : <Trans>An unknown error occurred</Trans>}
+                    </AlertDescription>
+                </Alert>
+            )}
             <DataTable
                 columns={columns}
                 data={transformedData}