Hide vault ext behind feature flag

studio/components/interfaces/Database/Extensions/ExtensionCard.tsx

@@ -4,7 +4,6 @@ import { Badge, IconLoader, Toggle } from '@supabase/ui'
 
 import { useStore } from 'hooks'
 import { confirmAlert } from 'components/to-be-cleaned/ModalsDeprecated/ConfirmModal'
-import { EXTENSIONS_IN_OWN_SCHEMA } from './Extensions.constants'
 import EnableExtensionModal from './EnableExtensionModal'
 
 interface Props {
@@ -20,38 +19,6 @@ const ExtensionCard: FC<Props> = ({ extension }) => {
 
   async function enableExtension() {
     return setShowConfirmEnableModal(true)
-
-    // [Joshen] Keeping this for now in case we need a reference
-    // confirmAlert({
-    //   title: 'Confirm to enable extension',
-    //   message: `Are you sure you want to turn ON "${extension.name}" extension?`,
-    //   onAsyncConfirm: async () => {
-    //     try {
-    //       setLoading(true)
-    //       const response = await meta.extensions.create({
-    //         name: extension.name,
-    //         schema: 'extensions',
-    //         version: extension.default_version,
-    //         cascade: true,
-    //       })
-    //       if (response.error) {
-    //         throw response.error
-    //       } else {
-    //         ui.setNotification({
-    //           category: 'success',
-    //           message: `${extension.name.toUpperCase()} is on.`,
-    //         })
-    //       }
-    //     } catch (error: any) {
-    //       ui.setNotification({
-    //         category: 'error',
-    //         message: `Failed to toggle ${extension.name.toUpperCase()}: ${error.message}`,
-    //       })
-    //     } finally {
-    //       setLoading(false)
-    //     }
-    //   },
-    // })
   }
 
   async function disableExtension() {

studio/components/interfaces/Database/Extensions/Extensions.constants.ts

@@ -12,5 +12,3 @@ export const HIDDEN_EXTENSIONS = [
   'pg_visibility',
   'pgstattuple',
 ]
-
-export const EXTENSIONS_IN_OWN_SCHEMA = ['postgis', 'pgsodium', 'vault']

studio/components/interfaces/Database/Extensions/Extensions.tsx

@@ -3,7 +3,7 @@ import { observer } from 'mobx-react-lite'
 import { partition, isNull } from 'lodash'
 import { Input, IconSearch } from '@supabase/ui'
 
-import { useStore } from 'hooks'
+import { useStore, useFlag } from 'hooks'
 import ExtensionCard from './ExtensionCard'
 import { HIDDEN_EXTENSIONS } from './Extensions.constants'
 import NoSearchResults from 'components/to-be-cleaned/NoSearchResults'
@@ -14,12 +14,17 @@ const Extensions: FC<Props> = ({}) => {
   const { meta } = useStore()
   const [filterString, setFilterString] = useState<string>('')
 
+  const enableVaultExtension = useFlag('vaultExtension')
+  const hiddenExtensions = enableVaultExtension
+    ? HIDDEN_EXTENSIONS
+    : HIDDEN_EXTENSIONS.concat(['vault'])
+
   const extensions =
     filterString.length === 0
       ? meta.extensions.list()
       : meta.extensions.list((ext: any) => ext.name.includes(filterString))
   const extensionsWithoutHidden = extensions.filter(
-    (ext: any) => !HIDDEN_EXTENSIONS.includes(ext.name)
+    (ext: any) => !hiddenExtensions.includes(ext.name)
   )
   const [enabledExtensions, disabledExtensions] = partition(
     extensionsWithoutHidden,