From 42e91cc5d52caeb5acbdf9013bc7c7aad4991cde Mon Sep 17 00:00:00 2001
From: Joshen Lim <joshenlimek@gmail.com>
Date: Tue, 19 Sep 2023 17:05:58 +0800
Subject: [PATCH] Link edge functions secrets from edge functions page

---
 .../EdgeFunctionSecrets.tsx                   |  14 ++-
 studio/components/layouts/FunctionsLayout.tsx |  37 ++----
 .../pages/project/[ref]/functions/index.tsx   | 108 ++++++++++++------
 3 files changed, 90 insertions(+), 69 deletions(-)

diff --git a/studio/components/interfaces/Functions/EdgeFunctionSecrets/EdgeFunctionSecrets.tsx b/studio/components/interfaces/Functions/EdgeFunctionSecrets/EdgeFunctionSecrets.tsx
index 42b04c840fc..c2d9dfc012d 100644
--- a/studio/components/interfaces/Functions/EdgeFunctionSecrets/EdgeFunctionSecrets.tsx
+++ b/studio/components/interfaces/Functions/EdgeFunctionSecrets/EdgeFunctionSecrets.tsx
@@ -1,6 +1,7 @@
 import { useParams } from 'common'
+import Link from 'next/link'
 import { useState } from 'react'
-import { Button, IconSearch, Input, Modal } from 'ui'
+import { Button, IconExternalLink, IconSearch, Input, Modal } from 'ui'
 
 import Table from 'components/to-be-cleaned/Table'
 import AlertError from 'components/ui/AlertError'
@@ -63,7 +64,16 @@ const EdgeFunctionSecrets = () => {
               onChange={(e: any) => setSearchString(e.target.value)}
               icon={<IconSearch size="tiny" />}
             />
-            <Button onClick={() => setShowCreateSecret(true)}>Add new secret</Button>
+            <div className="flex items-center space-x-2">
+              <Link passHref href="https://supabase.com/docs/guides/functions/secrets">
+                <a target="_blank" rel="noreferrer">
+                  <Button type="default" icon={<IconExternalLink size={14} strokeWidth={1.5} />}>
+                    Documentation
+                  </Button>
+                </a>
+              </Link>
+              <Button onClick={() => setShowCreateSecret(true)}>Add new secret</Button>
+            </div>
           </div>
           <Table
             head={[
diff --git a/studio/components/layouts/FunctionsLayout.tsx b/studio/components/layouts/FunctionsLayout.tsx
index 4cc8515d32b..b5ad0e62282 100644
--- a/studio/components/layouts/FunctionsLayout.tsx
+++ b/studio/components/layouts/FunctionsLayout.tsx
@@ -2,10 +2,9 @@ import { PermissionAction } from '@supabase/shared-types/out/constants'
 import { useParams } from 'common'
 import { observer } from 'mobx-react-lite'
 import Link from 'next/link'
-import { PropsWithChildren, useState } from 'react'
-import { Button, IconCode, IconExternalLink, IconTerminal, Modal } from 'ui'
+import { PropsWithChildren } from 'react'
+import { Button, IconCode, IconExternalLink } from 'ui'
 
-import { TerminalInstructions } from 'components/interfaces/Functions'
 import NoPermission from 'components/ui/NoPermission'
 import { useEdgeFunctionQuery } from 'data/edge-functions/edge-function-query'
 import { useEdgeFunctionsQuery } from 'data/edge-functions/edge-functions-query'
@@ -19,7 +18,6 @@ interface FunctionsLayoutProps {
 
 const FunctionsLayout = ({ title, children }: PropsWithChildren<FunctionsLayoutProps>) => {
   const { functionSlug, ref } = useParams()
-  const [showTerminalInstructions, setShowTerminalInstructions] = useState(false)
   const { data: functions, isLoading } = useEdgeFunctionsQuery({ projectRef: ref })
   const { data: selectedFunction } = useEdgeFunctionQuery({ projectRef: ref, slug: functionSlug })
 
@@ -109,17 +107,16 @@ const FunctionsLayout = ({ title, children }: PropsWithChildren<FunctionsLayoutP
                     )}
                   </div>
                   <div className="flex items-center space-x-2">
-                    <Button
-                      type="default"
-                      icon={<IconTerminal size={14} strokeWidth={1.5} />}
-                      onClick={() => setShowTerminalInstructions(true)}
-                    >
-                      Terminal Instructions
-                    </Button>
+                    <Link href={`/project/${ref}/settings/functions`}>
+                      <a>
+                        <Button type="default">Manage secrets</Button>
+                      </a>
+                    </Link>
                     <Link href="https://supabase.com/docs/guides/functions">
                       <a target="_link">
                         <Button
                           type="default"
+                          className="translate-y-[1px]"
                           icon={<IconExternalLink size={14} strokeWidth={1.5} />}
                         >
                           Documentation
@@ -142,24 +139,6 @@ const FunctionsLayout = ({ title, children }: PropsWithChildren<FunctionsLayoutP
           </div>
         </div>
       )}
-
-      <Modal
-        size="xlarge"
-        visible={showTerminalInstructions}
-        onCancel={() => setShowTerminalInstructions(false)}
-        header={<h3>Deploying an edge function to your project</h3>}
-        customFooter={
-          <div className="w-full flex items-center justify-end">
-            <Button type="primary" size="tiny" onClick={() => setShowTerminalInstructions(false)}>
-              Confirm
-            </Button>
-          </div>
-        }
-      >
-        <div className="py-4">
-          <TerminalInstructions removeBorder />
-        </div>
-      </Modal>
     </ProjectLayout>
   )
 }
diff --git a/studio/pages/project/[ref]/functions/index.tsx b/studio/pages/project/[ref]/functions/index.tsx
index 5f0e6b87fba..4b180f754a6 100644
--- a/studio/pages/project/[ref]/functions/index.tsx
+++ b/studio/pages/project/[ref]/functions/index.tsx
@@ -1,7 +1,13 @@
 import { useParams } from 'common'
 import { observer } from 'mobx-react-lite'
+import { useState } from 'react'
+import { Button, Modal } from 'ui'
 
-import { EdgeFunctionsListItem, FunctionsEmptyState } from 'components/interfaces/Functions'
+import {
+  EdgeFunctionsListItem,
+  FunctionsEmptyState,
+  TerminalInstructions,
+} from 'components/interfaces/Functions'
 import FunctionsLayout from 'components/layouts/FunctionsLayout'
 import Table from 'components/to-be-cleaned/Table'
 import AlertError from 'components/ui/AlertError'
@@ -11,6 +17,8 @@ import { NextPageWithLayout } from 'types'
 
 const PageLayout: NextPageWithLayout = () => {
   const { ref } = useParams()
+  const [showTerminalInstructions, setShowTerminalInstructions] = useState(false)
+
   const {
     data: functions,
     error,
@@ -22,44 +30,68 @@ const PageLayout: NextPageWithLayout = () => {
   const hasFunctions = (functions ?? []).length > 0
 
   return (
-    <div className="py-6">
-      {isLoading && <GenericSkeletonLoader />}
-      {isError && <AlertError error={error} subject="Failed to retrieve edge functions" />}
-      {isSuccess && (
-        <>
-          {hasFunctions ? (
-            <div className="py-6 space-y-4">
-              <div className="flex justify-between items-center">
-                <span className="text-sm text-scale-900">{`${functions.length} function${
-                  functions.length > 1 ? 's' : ''
-                } deployed`}</span>
+    <>
+      <div className="py-6">
+        {isLoading && <GenericSkeletonLoader />}
+
+        {isError && <AlertError error={error} subject="Failed to retrieve edge functions" />}
+
+        {isSuccess && (
+          <>
+            {hasFunctions ? (
+              <div className="py-6 space-y-4">
+                <div className="flex justify-between items-center">
+                  <span className="text-sm text-scale-900">{`${functions.length} function${
+                    functions.length > 1 ? 's' : ''
+                  } deployed`}</span>
+                  <Button type="primary" onClick={() => setShowTerminalInstructions(true)}>
+                    Deploy a new function
+                  </Button>
+                </div>
+                <Table
+                  head={
+                    <>
+                      <Table.th>Name</Table.th>
+                      <Table.th>URL</Table.th>
+                      <Table.th className="hidden 2xl:table-cell">Created</Table.th>
+                      <Table.th className="lg:table-cell">Last updated</Table.th>
+                      <Table.th className="lg:table-cell">Deployments</Table.th>
+                    </>
+                  }
+                  body={
+                    <>
+                      {functions.length > 0 &&
+                        functions.map((item) => (
+                          <EdgeFunctionsListItem key={item.id} function={item} />
+                        ))}
+                    </>
+                  }
+                />
               </div>
-              <Table
-                head={
-                  <>
-                    <Table.th>Name</Table.th>
-                    <Table.th>URL</Table.th>
-                    <Table.th className="hidden 2xl:table-cell">Created</Table.th>
-                    <Table.th className="lg:table-cell">Last updated</Table.th>
-                    <Table.th className="lg:table-cell">Deployments</Table.th>
-                  </>
-                }
-                body={
-                  <>
-                    {functions.length > 0 &&
-                      functions.map((item) => (
-                        <EdgeFunctionsListItem key={item.id} function={item} />
-                      ))}
-                  </>
-                }
-              />
-            </div>
-          ) : (
-            <FunctionsEmptyState />
-          )}
-        </>
-      )}
-    </div>
+            ) : (
+              <FunctionsEmptyState />
+            )}
+          </>
+        )}
+      </div>
+      <Modal
+        size="xlarge"
+        visible={showTerminalInstructions}
+        onCancel={() => setShowTerminalInstructions(false)}
+        header={<h3>Deploying an edge function to your project</h3>}
+        customFooter={
+          <div className="w-full flex items-center justify-end">
+            <Button type="primary" size="tiny" onClick={() => setShowTerminalInstructions(false)}>
+              Confirm
+            </Button>
+          </div>
+        }
+      >
+        <div className="py-4">
+          <TerminalInstructions removeBorder />
+        </div>
+      </Modal>
+    </>
   )
 }