From d75c8d49f25c559e3032b455e73ee64fab4bf7e4 Mon Sep 17 00:00:00 2001
From: Joshen Lim <joshenlimek@gmail.com>
Date: Wed, 14 Dec 2022 23:40:19 +0700
Subject: [PATCH] Add helper urls to the FDW options on where to get the keys

---
 .../Database/Wrappers/WrapperRow.tsx           | 18 +++++++++++++++++-
 .../Database/Wrappers/Wrappers.constants.ts    |  2 ++
 .../interfaces/Database/Wrappers/Wrappers.tsx  | 14 ++++++++------
 .../Database/Wrappers/Wrappers.types.ts        |  1 +
 4 files changed, 28 insertions(+), 7 deletions(-)

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={
+        <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}
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
 }