fix: display an error dialog if feature check fails

sanity-io · Oct 9, 2023 · ab79710 · ab79710
1 parent d1d6267
commit ab79710
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 14 deletions.
diff --git a/src/api/isEnabled.tsx b/src/api/isEnabled.tsx
@@ -3,7 +3,7 @@ import {createContext, PropsWithChildren, useContext, useEffect, useState} from
 import {Card, Text} from '@sanity/ui'
 import {useApiClient} from './embeddingsApiHooks'
 
-export type FeatureStatus = 'enabled' | 'disabled' | 'loading'
+export type FeatureStatus = 'enabled' | 'disabled' | 'loading' | 'error'
 export const FeatureEnabledContext = createContext<FeatureStatus>('loading')
 
 export function useIsFeatureEnabled() {
@@ -21,7 +21,7 @@ export function useIsFeatureEnabled() {
       })
       .catch((err) => {
         console.error(err)
-        setStatus('disabled')
+        setStatus('error')
       })
   }, [client])
 
@@ -54,3 +54,11 @@ export function FeatureDisabledNotice(props: {urlSuffix?: string}) {
     </Card>
   )
 }
+
+export function FeatureError() {
+  return (
+    <Card padding={4} border tone="critical">
+      An error occurred. See console for details.
+    </Card>
+  )
+}
diff --git a/src/embeddingsIndexDashboard/EmbeddingsIndexTool.tsx b/src/embeddingsIndexDashboard/EmbeddingsIndexTool.tsx
@@ -6,27 +6,36 @@ import {EditIndexDialog} from './IndexEditor'
 import {IndexList} from './IndexList'
 import {IndexInfo} from './IndexInfo'
 import {useApiClient} from '../api/embeddingsApiHooks'
-import {FeatureDisabledNotice, useIsFeatureEnabled} from '../api/isEnabled'
+import {FeatureDisabledNotice, FeatureError, useIsFeatureEnabled} from '../api/isEnabled'
 
 export function EmbeddingsIndexTool() {
   const featureState = useIsFeatureEnabled()
   return (
-    <Card>
+    <Card flex={1}>
       <Flex justify="center" flex={1}>
-        {featureState == 'disabled' ? (
+        {featureState === 'error' ? (
+          <Box padding={4}>
+            <FeatureError />
+          </Box>
+        ) : null}
+
+        {featureState === 'disabled' ? (
           <Box padding={4}>
             <FeatureDisabledNotice urlSuffix="?ref=embeddings-tab" />
           </Box>
         ) : null}
 
-        <Card flex={1} style={{maxWidth: 1200}} padding={5}>
-          {featureState == 'loading' ? (
-            <Box padding={2}>
-              <Spinner />
-            </Box>
-          ) : null}
-          {featureState == 'enabled' ? <Indexes /> : null}
-        </Card>
+        {featureState === 'loading' ? (
+          <Box padding={6}>
+            <Spinner size={4} />
+          </Box>
+        ) : null}
+
+        {featureState === 'enabled' ? (
+          <Card flex={1} style={{maxWidth: 1200}} padding={5}>
+            <Indexes />
+          </Card>
+        ) : null}
       </Flex>
     </Card>
   )

diff --git a/src/referenceInput/SemanticSearchReferenceInput.tsx b/src/referenceInput/SemanticSearchReferenceInput.tsx
@@ -12,7 +12,7 @@ import {useCallback, useEffect, useMemo, useRef, useState} from 'react'
 import {useDocumentPane} from 'sanity/desk'
 import {QueryResult} from '../api/embeddingsApi'
 import {publicId} from '../utils/id'
-import {FeatureDisabledNotice, useIsFeatureEnabledContext} from '../api/isEnabled'
+import {FeatureDisabledNotice, FeatureError, useIsFeatureEnabledContext} from '../api/isEnabled'
 import {EmbeddingsIndexConfig} from '../schemas/typeDefExtensions'
 import {SemanticSearchAutocomplete} from './SemanticSearchAutocomplete'
 
@@ -71,6 +71,12 @@ export function SemanticSearchReferenceInput(
         <FeatureDisabledNotice urlSuffix="?ref=embeddings-ref" />
       ) : null}
 
+      {semantic && featureState === 'error' ? (
+        <Box padding={4}>
+          <FeatureError />
+        </Box>
+      ) : null}
+
       <Box flex={1} style={{maxHeight: 36, overflow: 'hidden'}}>
         {semantic && featureState == 'enabled' ? (
           <SemanticSearchInput {...props} indexConfig={config} />