Home / Function/ useFeaturePreviewModal() — supabase Function Reference

useFeaturePreviewModal() — supabase Function Reference

Architecture documentation for the useFeaturePreviewModal() function in FeaturePreviewContext.tsx from the supabase codebase.

Function tsx ContentManagement MediaManagement called by 2

Entity Profile

Dependency Diagram

graph TD
  e38f9fbe_5092_544f_fa41_97a6e70dc301["useFeaturePreviewModal()"]
  cf30bfd2_6687_fcc8_daa2_b6a0d5c89c27["FeaturePreviewModal()"]
  cf30bfd2_6687_fcc8_daa2_b6a0d5c89c27 -->|calls| e38f9fbe_5092_544f_fa41_97a6e70dc301
  f781622e_674f_c675_e035_d6d1f2705359["LocalDropdown()"]
  f781622e_674f_c675_e035_d6d1f2705359 -->|calls| e38f9fbe_5092_544f_fa41_97a6e70dc301
  style e38f9fbe_5092_544f_fa41_97a6e70dc301 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/studio/components/interfaces/App/FeaturePreview/FeaturePreviewContext.tsx lines 118–194

export const useFeaturePreviewModal = () => {
  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']

  const selectFeaturePreview = useCallback(
    (featureKey: (typeof FEATURE_PREVIEWS)[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])

  return useMemo(
    () => ({
      showFeaturePreviewModal,
      selectedFeatureKey,
      selectFeaturePreview,
      openFeaturePreviewModal,
      closeFeaturePreviewModal,
      toggleFeaturePreviewModal,
      isFeaturePreviewReleasedToPublic,
    }),
    [
      showFeaturePreviewModal,
      selectedFeatureKey,
      selectFeaturePreview,
      openFeaturePreviewModal,
      closeFeaturePreviewModal,
      toggleFeaturePreviewModal,
      isFeaturePreviewReleasedToPublic,
    ]
  )
}

Domain

Subdomains

Called By

Source

Frequently Asked Questions

What does useFeaturePreviewModal() do?
useFeaturePreviewModal() is a function in the supabase codebase.
What calls useFeaturePreviewModal()?
useFeaturePreviewModal() is called by 2 function(s): FeaturePreviewModal, LocalDropdown.

Analyze Your Own Codebase

Get architecture documentation, dependency graphs, and domain analysis for your codebase in minutes.

Try Supermodel Free