[pull] master from supabase:master

apps/studio/components/interfaces/App/FeaturePreview/Branching2Preview.tsx

@@ -1,18 +1,10 @@
-import Image from 'next/image'
-
 import { InlineLink } from 'components/ui/InlineLink'
 import { BASE_PATH, DOCS_URL } from 'lib/constants'
+import Image from 'next/image'
 
 export const Branching2Preview = () => {
   return (
     <div>
-      <Image
-        src={`${BASE_PATH}/img/previews/branching-preview.png`}
-        width={1296}
-        height={900}
-        alt="api-docs-side-panel-preview"
-        className="rounded border mb-4"
-      />
       <p className="text-sm text-foreground-light mb-4">
         Create branches, review changes, and merge back into production all through the dashboard.
         Read the below limitations and our{' '}
@@ -21,6 +13,15 @@ export const Branching2Preview = () => {
         </InlineLink>{' '}
         before opting in.
       </p>
+
+      <Image
+        src={`${BASE_PATH}/img/previews/branching-preview.png`}
+        width={1296}
+        height={900}
+        alt="api-docs-side-panel-preview"
+        className="rounded border mb-4"
+      />
+
       <div className="my-6">
         <p className="text-sm text-foreground mb-2 font-medium">Limitations:</p>
         <ul className="list-disc pl-6 text-sm text-foreground-light space-y-1">

apps/studio/components/interfaces/App/FeaturePreview/FeaturePreviewContext.tsx

@@ -12,7 +12,8 @@ import {
   useState,
 } from 'react'
 
-import { FEATURE_PREVIEWS } from './FeaturePreview.constants'
+import { useFeaturePreviews } from './useFeaturePreviews'
+import { useStaticEffectEvent } from '@/hooks/useStaticEffectEvent'
 
 type FeaturePreviewContextType = {
   flags: { [key: string]: boolean }
@@ -28,35 +29,30 @@ export const useFeaturePreviewContext = () => useContext(FeaturePreviewContext)
 
 export const FeaturePreviewContextProvider = ({ children }: PropsWithChildren<{}>) => {
   const { hasLoaded } = useContext(FeatureFlagContext)
-
-  // [Joshen] Similar logic to feature flagging previews, we can use flags to default opt in previews
-  const isDefaultOptIn = (feature: (typeof FEATURE_PREVIEWS)[number]) => {
-    switch (feature.key) {
-      default:
-        return false
-    }
-  }
+  const featurePreviews = useFeaturePreviews()
 
   const [flags, setFlags] = useState(() =>
-    FEATURE_PREVIEWS.reduce((a, b) => {
-      return { ...a, [b.key]: false }
-    }, {})
+    featurePreviews.reduce((a, b) => ({ ...a, [b.key]: false }), {})
   )
 
+  const initializeFlags = useStaticEffectEvent(() => {
+    setFlags(
+      featurePreviews.reduce((a, b) => {
+        const defaultOptIn = b.isDefaultOptIn
+        const localStorageValue = localStorage.getItem(b.key)
+        return {
+          ...a,
+          [b.key]: !localStorageValue ? defaultOptIn : localStorageValue === 'true',
+        }
+      }, {})
+    )
+  })
+
   useEffect(() => {
     if (typeof window !== 'undefined') {
-      setFlags(
-        FEATURE_PREVIEWS.reduce((a, b) => {
-          const defaultOptIn = isDefaultOptIn(b)
-          const localStorageValue = localStorage.getItem(b.key)
-          return {
-            ...a,
-            [b.key]: !localStorageValue ? defaultOptIn : localStorageValue === 'true',
-          }
-        }, {})
-      )
+      initializeFlags()
     }
-  }, [hasLoaded])
+  }, [hasLoaded, initializeFlags])
 
   const value = {
     flags,
@@ -97,12 +93,14 @@ export const useUnifiedLogsPreview = () => {
 
 export const useIsBranching2Enabled = () => {
   const { flags } = useFeaturePreviewContext()
-  return flags[LOCAL_STORAGE_KEYS.UI_PREVIEW_BRANCHING_2_0]
+  const gitlessBranchingEnabled = useFlag('gitlessBranching')
+  return gitlessBranchingEnabled && flags[LOCAL_STORAGE_KEYS.UI_PREVIEW_BRANCHING_2_0]
 }
 
 export const useIsAdvisorRulesEnabled = () => {
   const { flags } = useFeaturePreviewContext()
-  return flags[LOCAL_STORAGE_KEYS.UI_PREVIEW_ADVISOR_RULES]
+  const advisorRulesEnabled = useFlag('advisorRules')
+  return advisorRulesEnabled && flags[LOCAL_STORAGE_KEYS.UI_PREVIEW_ADVISOR_RULES]
 }
 
 export const useIsQueueOperationsEnabled = () => {
@@ -116,79 +114,41 @@ export const useIsTableFilterBarEnabled = () => {
 }
 
 export const useFeaturePreviewModal = () => {
+  const featurePreviews = useFeaturePreviews()
   const [featurePreviewModal, setFeaturePreviewModal] = useQueryState('featurePreviewModal')
 
-  const gitlessBranchingEnabled = useFlag('gitlessBranching')
-  const advisorRulesEnabled = useFlag('advisorRules')
-  const isUnifiedLogsPreviewAvailable = useFlag('unifiedLogs')
-
   const selectedFeatureKeyFromQuery = featurePreviewModal?.trim() ?? null
   const showFeaturePreviewModal = selectedFeatureKeyFromQuery !== null
 
-  // [Joshen] Use this if we want to feature flag previews
-  const isFeaturePreviewReleasedToPublic = useCallback(
-    (feature: (typeof FEATURE_PREVIEWS)[number]) => {
-      switch (feature.key) {
-        case 'supabase-ui-branching-2-0':
-          return gitlessBranchingEnabled
-        case 'supabase-ui-advisor-rules':
-          return advisorRulesEnabled
-        case 'supabase-ui-preview-unified-logs':
-          return isUnifiedLogsPreviewAvailable
-        default:
-          return true
-      }
-    },
-    [gitlessBranchingEnabled, advisorRulesEnabled, isUnifiedLogsPreviewAvailable]
-  )
-
   const selectedFeatureKey = (
-    !selectedFeatureKeyFromQuery
-      ? FEATURE_PREVIEWS.filter((feature) => isFeaturePreviewReleasedToPublic(feature))[0].key
-      : selectedFeatureKeyFromQuery
-  ) as (typeof FEATURE_PREVIEWS)[number]['key']
+    !selectedFeatureKeyFromQuery ? featurePreviews[0].key : selectedFeatureKeyFromQuery
+  ) as (typeof featurePreviews)[number]['key']
 
   const selectFeaturePreview = useCallback(
-    (featureKey: (typeof FEATURE_PREVIEWS)[number]['key']) => {
+    (featureKey: (typeof featurePreviews)[number]['key']) => {
       setFeaturePreviewModal(featureKey)
     },
     [setFeaturePreviewModal]
   )
 
-  const openFeaturePreviewModal = useCallback(() => {
-    selectFeaturePreview(selectedFeatureKey)
-  }, [selectFeaturePreview, selectedFeatureKey])
-
-  const closeFeaturePreviewModal = useCallback(() => {
-    setFeaturePreviewModal(null)
-  }, [setFeaturePreviewModal])
-
-  const toggleFeaturePreviewModal = useCallback(() => {
-    if (showFeaturePreviewModal) {
-      closeFeaturePreviewModal()
-    } else {
-      openFeaturePreviewModal()
-    }
-  }, [showFeaturePreviewModal, openFeaturePreviewModal, closeFeaturePreviewModal])
+  const toggleFeaturePreviewModal = useCallback(
+    (value: boolean) => {
+      if (!value) {
+        setFeaturePreviewModal(null)
+      } else {
+        selectFeaturePreview(selectedFeatureKey)
+      }
+    },
+    [selectFeaturePreview, setFeaturePreviewModal, selectedFeatureKey]
+  )
 
   return useMemo(
     () => ({
       showFeaturePreviewModal,
       selectedFeatureKey,
       selectFeaturePreview,
-      openFeaturePreviewModal,
-      closeFeaturePreviewModal,
       toggleFeaturePreviewModal,
-      isFeaturePreviewReleasedToPublic,
     }),
-    [
-      showFeaturePreviewModal,
-      selectedFeatureKey,
-      selectFeaturePreview,
-      openFeaturePreviewModal,
-      closeFeaturePreviewModal,
-      toggleFeaturePreviewModal,
-      isFeaturePreviewReleasedToPublic,
-    ]
+    [showFeaturePreviewModal, selectedFeatureKey, selectFeaturePreview, toggleFeaturePreviewModal]
   )
 }