From c374c26a36040721318e09cd9548c8dffdf03db7 Mon Sep 17 00:00:00 2001
From: Ihor Dykhta <dikhta.igor@gmail.com>
Date: Thu, 9 Jan 2025 17:39:07 +0200
Subject: [PATCH] fix metadata loading error reporting

Signed-off-by: Ihor Dykhta <dikhta.igor@gmail.com>
---
 .../hooks/use-fetch-vector-tile-metadata.ts   |  4 +++
 .../tilesets-modals/load-data-footer.tsx      |  7 +++--
 .../modals/tilesets-modals/load-tileset.tsx   |  3 ++
 .../tilesets-modals/tileset-vector-form.tsx   | 28 ++++++++++++++++---
 4 files changed, 35 insertions(+), 7 deletions(-)

diff --git a/src/components/src/hooks/use-fetch-vector-tile-metadata.ts b/src/components/src/hooks/use-fetch-vector-tile-metadata.ts
index 359bc7858c..5cfa796d22 100644
--- a/src/components/src/hooks/use-fetch-vector-tile-metadata.ts
+++ b/src/components/src/hooks/use-fetch-vector-tile-metadata.ts
@@ -75,6 +75,10 @@ export default function useFetchVectorTileMetadata({
               : PMTilesSource.createDataSource(url, {});
 
           const metadata = await tileSource.metadata;
+          // Since we switched to PMTilesSource.createDataSource response errors aren't available here
+          if (!metadata) {
+            throw new Error('Failed to fetch metadata');
+          }
           setProcessedData(metadata);
         } catch (metadataError) {
           setError(metadataError as any);
diff --git a/src/components/src/modals/tilesets-modals/load-data-footer.tsx b/src/components/src/modals/tilesets-modals/load-data-footer.tsx
index 45e09de078..f58968dddb 100644
--- a/src/components/src/modals/tilesets-modals/load-data-footer.tsx
+++ b/src/components/src/modals/tilesets-modals/load-data-footer.tsx
@@ -38,7 +38,8 @@ const LoadDataFooterContainer = styled.div.attrs({
 
 const ErrorContainer = styled.div`
   color: red;
-  padding-right: 15px;
+  padding-left: 15px;
+  display: inline-block;
 `;
 
 type LoadDataFooterProps = {
@@ -47,7 +48,7 @@ type LoadDataFooterProps = {
   onConfirm: () => void;
   confirmText: string;
   prependText?: string;
-  errorText?: string;
+  errorText?: string | null;
 };
 
 const LoadDataFooter: React.FC<LoadDataFooterProps & WrappedComponentProps> = ({
@@ -62,7 +63,6 @@ const LoadDataFooter: React.FC<LoadDataFooterProps & WrappedComponentProps> = ({
   return (
     <LoadDataFooterContainer>
       <div>
-        {errorText && <ErrorContainer>{errorText}</ErrorContainer>}
         {prependText}
         <AddDataButton
           disabled={disabled}
@@ -78,6 +78,7 @@ const LoadDataFooter: React.FC<LoadDataFooterProps & WrappedComponentProps> = ({
                 id: confirmText
               })}
         </AddDataButton>
+        {errorText && <ErrorContainer>{errorText}</ErrorContainer>}
       </div>
     </LoadDataFooterContainer>
   );
diff --git a/src/components/src/modals/tilesets-modals/load-tileset.tsx b/src/components/src/modals/tilesets-modals/load-tileset.tsx
index ea14b0b593..0583f96483 100644
--- a/src/components/src/modals/tilesets-modals/load-tileset.tsx
+++ b/src/components/src/modals/tilesets-modals/load-tileset.tsx
@@ -142,7 +142,9 @@ function LoadTilesetTabFactory() {
             */}
             <div>
               <CurrentForm setResponse={setResponse} />
+              {/** 
               {error && <div>{getError(error)}</div>}
+              */}
             </div>
           </div>
           <MetaContainer>
@@ -162,6 +164,7 @@ function LoadTilesetTabFactory() {
           isLoading={loading || isAddingDatasets}
           onConfirm={createTileDataset}
           confirmText="tilesetSetup.addTilesetText"
+          errorText={error && getError(error)}
         />
       </LoadTilesetTabContainer>
     );
diff --git a/src/components/src/modals/tilesets-modals/tileset-vector-form.tsx b/src/components/src/modals/tilesets-modals/tileset-vector-form.tsx
index 3fc39a1461..e0200770fe 100644
--- a/src/components/src/modals/tilesets-modals/tileset-vector-form.tsx
+++ b/src/components/src/modals/tilesets-modals/tileset-vector-form.tsx
@@ -63,6 +63,7 @@ const TilesetVectorForm: React.FC<TilesetVectorFormProps> = ({setResponse}) => {
   const [tileName, setTileName] = useState<string>('');
   const [tileUrl, setTileUrl] = useState<string>('');
   const [metadataUrl, setMetadataUrl] = useState<string | null>('');
+  const [initialFetchError, setInitialFetchError] = useState<Error | null>(null);
 
   const onTileNameChange = useCallback(
     (event: React.ChangeEvent<HTMLInputElement>) => {
@@ -89,7 +90,16 @@ const TilesetVectorForm: React.FC<TilesetVectorFormProps> = ({setResponse}) => {
       if (!metadataUrl && potentialMetadataUrl) {
         // check if URL exists before setting it as the metadata URL
         const resp = await fetch(potentialMetadataUrl);
-        if (resp.ok) setMetadataUrl(potentialMetadataUrl);
+        if (resp.ok) {
+          setInitialFetchError(null);
+          setMetadataUrl(potentialMetadataUrl);
+        } else {
+          setInitialFetchError(
+            new Error(`Metadata loading failed: ${resp.status} ${resp.statusText}`)
+          );
+        }
+      } else {
+        setInitialFetchError(null);
       }
       if (!tileName) {
         setTileName(newTileUrl.split('/').pop() || newTileUrl);
@@ -97,6 +107,7 @@ const TilesetVectorForm: React.FC<TilesetVectorFormProps> = ({setResponse}) => {
     },
     [setTileUrl, tileName, setMetadataUrl, metadataUrl]
   );
+
   const process = useMemo(() => {
     return (value: PMTilesMetadata | TileJSON) =>
       parseVectorMetadata(value, {tileUrl: metadataUrl});
@@ -123,17 +134,26 @@ const TilesetVectorForm: React.FC<TilesetVectorFormProps> = ({setResponse}) => {
         metadata,
         dataset,
         loading,
-        error: metaError
+        error: metaError || initialFetchError
       });
     } else {
       setResponse({
         metadata,
         dataset: null,
         loading,
-        error: metaError
+        error: metaError || initialFetchError
       });
     }
-  }, [setResponse, metadata, loading, metaError, tileUrl, tileName, metadataUrl]);
+  }, [
+    setResponse,
+    metadata,
+    loading,
+    metaError,
+    initialFetchError,
+    tileUrl,
+    tileName,
+    metadataUrl
+  ]);
 
   useEffect(() => {
     if (metadata) {