fix(comments): enable check (#5918)

* feat(core): add `error` to `useFeatureEnabled`

* fix(comments): only enable comments if we are able to fetch project features

packages/sanity/src/core/hooks/useFeatureEnabled.ts

@@ -7,16 +7,20 @@ import {useSource} from '../studio'
 import {DEFAULT_STUDIO_CLIENT_OPTIONS} from '../studioClient'
 import {useClient} from './useClient'
 
+const EMPTY_ARRAY: [] = []
+
 interface Features {
-  isLoading: boolean
   enabled: boolean
+  error: Error | null
   features: string[]
+  isLoading: boolean
 }
 
 const INITIAL_LOADING_STATE: Features = {
-  isLoading: true,
   enabled: true,
-  features: [],
+  error: null,
+  features: EMPTY_ARRAY,
+  isLoading: true,
 }
 
 /**
@@ -37,29 +41,22 @@ export function useFeatureEnabled(featureKey: string): Features {
   const {projectId} = useSource()
 
   if (!cachedFeatureRequest.get(projectId)) {
-    const features = fetchFeatures({versionedClient}).pipe(
-      shareReplay(),
-      catchError((error) => {
-        console.error(error)
-        // Return an empty list of features if the request fails
-        return of([])
-      }),
-    )
+    const features = fetchFeatures({versionedClient}).pipe(shareReplay())
     cachedFeatureRequest.set(projectId, features)
   }
 
   const featureInfo = useMemoObservable(
     () =>
-      (cachedFeatureRequest.get(projectId) || of([])).pipe(
+      (cachedFeatureRequest.get(projectId) || of(EMPTY_ARRAY)).pipe(
         map((features = []) => ({
           isLoading: false,
           enabled: Boolean(features?.includes(featureKey)),
           features,
+          error: null,
         })),
         startWith(INITIAL_LOADING_STATE),
-        catchError((err: Error) => {
-          console.error(err)
-          return of({isLoading: false, enabled: true, features: []})
+        catchError((error: Error) => {
+          return of({isLoading: false, enabled: false, features: EMPTY_ARRAY, error})
         }),
       ),
     [featureKey, projectId],

packages/sanity/src/structure/comments/src/hooks/useResolveCommentsEnabled.ts

@@ -23,7 +23,7 @@ export function useResolveCommentsEnabled(
   documentType: string,
 ): ResolveCommentsEnabled {
   // Check if the projects plan has the feature enabled
-  const {enabled: featureEnabled, isLoading} = useFeatureEnabled('studioComments')
+  const {enabled: featureEnabled, isLoading, error} = useFeatureEnabled('studioComments')
 
   const {enabled} = useSource().document.unstable_comments
   // Check if the feature is enabled for the current document in the config
@@ -33,15 +33,19 @@ export function useResolveCommentsEnabled(
   )
 
   const value: ResolveCommentsEnabled = useMemo(() => {
-    if (isLoading || !enabledFromConfig) {
+    // The feature is not enabled if:
+    // - the feature is loading (`isLoading` is true)
+    // - the feature is not enabled in the project (`enabledFromConfig` is false)
+    // - there's an error when fetching the list of enabled features (`error` is set)
+    if (isLoading || !enabledFromConfig || error) {
       return {enabled: false, mode: null}
     }
 
     return {
       enabled: true,
       mode: featureEnabled ? 'default' : 'upsell',
     }
-  }, [isLoading, enabledFromConfig, featureEnabled])
+  }, [isLoading, enabledFromConfig, error, featureEnabled])
 
   return value
 }