diff --git a/studio/components/interfaces/Database/Wrappers/WrapperRow.tsx b/studio/components/interfaces/Database/Wrappers/WrapperRow.tsx
index 7f25fd48ef8..bcf62467413 100644
--- a/studio/components/interfaces/Database/Wrappers/WrapperRow.tsx
+++ b/studio/components/interfaces/Database/Wrappers/WrapperRow.tsx
@@ -15,6 +15,7 @@ import {
IconCheckCircle,
IconExternalLink,
IconLoader,
+ IconHelpCircle,
} from 'ui'
import { useStore } from 'hooks'
@@ -47,7 +48,22 @@ const InputField: FC<{ option: any; value: any; error: any; onChange: any }> = (
key={option.name}
id={option.name}
name={option.name}
- label={option.label}
+ label={
+
+
{option.label}
+ {option.urlHelper !== undefined && (
+
+
+
+
+
+ )}
+
+ }
defaultValue={option.defaultValue ?? ''}
required={option.required ?? false}
value={value}
diff --git a/studio/components/interfaces/Database/Wrappers/Wrappers.constants.ts b/studio/components/interfaces/Database/Wrappers/Wrappers.constants.ts
index e0396fa7b4b..1e7e1b6db13 100644
--- a/studio/components/interfaces/Database/Wrappers/Wrappers.constants.ts
+++ b/studio/components/interfaces/Database/Wrappers/Wrappers.constants.ts
@@ -18,6 +18,7 @@ export const WRAPPERS: Wrapper[] = [
required: true,
encrypted: true,
hidden: true,
+ urlHelper: 'https://stripe.com/docs/keys',
},
{
name: 'api_url',
@@ -429,6 +430,7 @@ export const WRAPPERS: Wrapper[] = [
required: true,
encrypted: true,
hidden: true,
+ urlHelper: 'https://firebase.google.com/docs/admin/setup#add_firebase_to_your_app',
},
// NOTE(alaister): this is a valid option, but it may confuse the basic use case
// so I'm omitting it for now. We can add back once we make it's use clearer.
diff --git a/studio/components/interfaces/Database/Wrappers/Wrappers.tsx b/studio/components/interfaces/Database/Wrappers/Wrappers.tsx
index fca661e3993..b2683f328a4 100644
--- a/studio/components/interfaces/Database/Wrappers/Wrappers.tsx
+++ b/studio/components/interfaces/Database/Wrappers/Wrappers.tsx
@@ -28,13 +28,15 @@ const Wrappers = () => {
const wrappersExtension = meta.extensions.byId('wrappers')
const vaultExtension = meta.extensions.byId('supabase_vault')
const isLoadingExtensions = meta.extensions.isLoading
- const isNotAvailable = wrappersExtension === undefined || vaultExtension === undefined
+ // const isNotAvailable = wrappersExtension === undefined || vaultExtension === undefined
- const isWrappersEnabled =
- wrappersExtension !== undefined &&
- wrappersExtension?.installed_version !== null &&
- vaultExtension !== undefined &&
- vaultExtension?.installed_version !== null
+ const isNotAvailable = false
+ const isWrappersEnabled = true
+ // const isWrappersEnabled =
+ // wrappersExtension !== undefined &&
+ // wrappersExtension?.installed_version !== null &&
+ // vaultExtension !== undefined &&
+ // vaultExtension?.installed_version !== null
const canToggleWrappers = checkPermissions(PermissionAction.TENANT_SQL_ADMIN_WRITE, 'extensions')
diff --git a/studio/components/interfaces/Database/Wrappers/Wrappers.types.ts b/studio/components/interfaces/Database/Wrappers/Wrappers.types.ts
index f805f656937..7450b9c1b2d 100644
--- a/studio/components/interfaces/Database/Wrappers/Wrappers.types.ts
+++ b/studio/components/interfaces/Database/Wrappers/Wrappers.types.ts
@@ -16,6 +16,7 @@ export type ServerOption = {
required: boolean
encrypted: boolean
hidden: boolean
+ urlHelper?: string
defaultValue?: string
}