Add helper urls to the FDW options on where to get the keys

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={
+        <div className="flex items-center space-x-2">
+          <p>{option.label}</p>
+          {option.urlHelper !== undefined && (
+            <Link href={option.urlHelper}>
+              <a target="_blank">
+                <IconHelpCircle
+                  strokeWidth={2}
+                  size={14}
+                  className="text-scale-1000 hover:text-scale-1200 cursor-pointer transition"
+                />
+              </a>
+            </Link>
+          )}
+        </div>
+      }
       defaultValue={option.defaultValue ?? ''}
       required={option.required ?? false}
       value={value}

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.

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')
 

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
 }