From e1fd5fde06c52a1db9d8063f7a6eca834d639304 Mon Sep 17 00:00:00 2001
From: Francisco Mazzoni <francisco@supabase.io>
Date: Tue, 2 Aug 2022 14:50:42 -0300
Subject: [PATCH 1/3] add confirmation modal on form changes for database
 functions

---
 .../Database/Functions/CreateFunction.tsx     | 37 ++++++++++++++++++-
 1 file changed, 35 insertions(+), 2 deletions(-)

diff --git a/studio/components/interfaces/Database/Functions/CreateFunction.tsx b/studio/components/interfaces/Database/Functions/CreateFunction.tsx
index 263627cea7a..186007d6b89 100644
--- a/studio/components/interfaces/Database/Functions/CreateFunction.tsx
+++ b/studio/components/interfaces/Database/Functions/CreateFunction.tsx
@@ -1,4 +1,4 @@
-import { FC, useEffect, useContext, createContext, FormEvent } from 'react'
+import { FC, useEffect, useContext, createContext, FormEvent, useState } from 'react'
 import { isEmpty, mapValues, has, filter, keyBy, isUndefined, partition, isNull } from 'lodash'
 import { observer, useLocalObservable } from 'mobx-react-lite'
 import {
@@ -12,6 +12,7 @@ import {
   Radio,
   IconPlus,
   Toggle,
+  Modal,
 } from '@supabase/ui'
 import { Dictionary } from 'components/grid'
 import { makeAutoObservable } from 'mobx'
@@ -20,6 +21,7 @@ import { useStore } from 'hooks'
 import Panel from 'components/ui/Panel'
 import SqlEditor from 'components/ui/SqlEditor'
 import { POSTGRES_DATA_TYPES } from 'components/interfaces/TableGridEditor/SidePanelEditor/SidePanelEditor.constants'
+import ConfirmationModal from 'components/ui/ConfirmationModal'
 
 class CreateFunctionFormState {
   id: number | undefined
@@ -145,6 +147,7 @@ class CreateFunctionStore implements ICreateFunctionStore {
   meta = null
   schemas = []
   advancedVisible = false
+  isDirty = false
 
   constructor() {
     makeAutoObservable(this)
@@ -172,7 +175,12 @@ class CreateFunctionStore implements ICreateFunctionStore {
     this.loading = value
   }
 
+  setIsDirty = (value: boolean) => {
+    this.isDirty = value
+  }
+
   onFormChange = ({ key, value }: { key: string; value: any }) => {
+    this.isDirty = true
     if (has(this.formState, key)) {
       const temp = (this.formState as any)[key] as any
       ;(this.formState as any)[key] = { ...temp, value, error: undefined }
@@ -296,6 +304,8 @@ const CreateFunction: FC<CreateFunctionProps> = ({ func, visible, setVisible })
   const _localState = useLocalObservable(() => new CreateFunctionStore())
   _localState.meta = meta as any
 
+  const [isClosingPanel, setIsClosingPanel] = useState<boolean>(false)
+
   useEffect(() => {
     const fetchSchemas = async () => {
       await (_localState!.meta as any).schemas.load()
@@ -308,6 +318,7 @@ const CreateFunction: FC<CreateFunctionProps> = ({ func, visible, setVisible })
 
   useEffect(() => {
     _localState.formState.reset(func)
+    _localState.setIsDirty(false)
   }, [visible, func])
 
   async function handleSubmit() {
@@ -348,12 +359,16 @@ const CreateFunction: FC<CreateFunctionProps> = ({ func, visible, setVisible })
     }
   }
 
+  function isClosingSidePanel() {
+    _localState.isDirty ? setIsClosingPanel(true) : setVisible(!visible)
+  }
+
   return (
     <>
       <SidePanel
         size="large"
         visible={visible}
-        onCancel={() => setVisible(!visible)}
+        onCancel={isClosingSidePanel}
         header={_localState.title}
         className="hooks-sidepanel transform transition-all duration-300 ease-in-out mr-0"
         loading={_localState.loading}
@@ -436,6 +451,24 @@ const CreateFunction: FC<CreateFunctionProps> = ({ func, visible, setVisible })
             )}
           </div>
         </CreateFunctionContext.Provider>
+        <ConfirmationModal
+          visible={isClosingPanel}
+          header="Confirm to close"
+          buttonLabel="Confirm"
+          onSelectCancel={() => setIsClosingPanel(false)}
+          onSelectConfirm={() => {
+            setIsClosingPanel(false)
+            setVisible(!visible)
+          }}
+          children={
+            <Modal.Content>
+              <p className="text-scale-1100 py-4 text-sm">
+                There are unsaved changes. Are you sure you want to close the panel? Your changes
+                will be lost.
+              </p>
+            </Modal.Content>
+          }
+        />
       </SidePanel>
     </>
   )

From e1a3c5f86bdd82422fb21ec68273f0ce7acd5064 Mon Sep 17 00:00:00 2001
From: Francisco Mazzoni <francisco@supabase.io>
Date: Tue, 2 Aug 2022 15:02:09 -0300
Subject: [PATCH 2/3] update edge functions related labels

---
 studio/components/interfaces/Functions/FunctionsLayout.tsx    | 4 ++--
 .../ProjectLayout/NavigationBar/NavigationBar.utils.tsx       | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/studio/components/interfaces/Functions/FunctionsLayout.tsx b/studio/components/interfaces/Functions/FunctionsLayout.tsx
index 0bb2c3e0c59..0868d3bbc51 100644
--- a/studio/components/interfaces/Functions/FunctionsLayout.tsx
+++ b/studio/components/interfaces/Functions/FunctionsLayout.tsx
@@ -57,7 +57,7 @@ const FunctionsLayout = ({ children }: { children?: React.ReactNode }) => {
                 >
                   <IconCode size={14} strokeWidth={3} />
                 </div>
-                <h1 className="text-2xl text-scale-1200">Functions</h1>
+                <h1 className="text-2xl text-scale-1200">Edge Functions</h1>
               </div>
               <WarningBanner title={WARNING_MESSAGE.title} />
             </div>
@@ -107,7 +107,7 @@ const FunctionsLayout = ({ children }: { children?: React.ReactNode }) => {
               cursor-pointer 
               hover:text-scale-1100"
                   >
-                    Functions
+                    Edge Functions
                   </h1>
                 </Link>
 
diff --git a/studio/components/layouts/ProjectLayout/NavigationBar/NavigationBar.utils.tsx b/studio/components/layouts/ProjectLayout/NavigationBar/NavigationBar.utils.tsx
index be88a785db2..c34fcc22c61 100644
--- a/studio/components/layouts/ProjectLayout/NavigationBar/NavigationBar.utils.tsx
+++ b/studio/components/layouts/ProjectLayout/NavigationBar/NavigationBar.utils.tsx
@@ -72,7 +72,7 @@ export const generateProductRoutes = (ref: string, project?: ProjectBase): Route
       ? [
           {
             key: 'functions',
-            label: 'Functions',
+            label: 'Edge Functions',
             icon: <IconCode size={18} strokeWidth={2} />,
             link: isProjectBuilding ? buildingUrl : `/project/${ref}/functions`,
           },

From b58562c05750a2c240106138ae80c0922f6b6253 Mon Sep 17 00:00:00 2001
From: Joshen Lim <joshenlimek@gmail.com>
Date: Wed, 3 Aug 2022 18:13:06 +0800
Subject: [PATCH 3/3] Clean up

---
 .../interfaces/Functions/FunctionsLayout.tsx  | 22 +++++--------------
 1 file changed, 5 insertions(+), 17 deletions(-)

diff --git a/studio/components/interfaces/Functions/FunctionsLayout.tsx b/studio/components/interfaces/Functions/FunctionsLayout.tsx
index fdc396eec4b..3614be8ea50 100644
--- a/studio/components/interfaces/Functions/FunctionsLayout.tsx
+++ b/studio/components/interfaces/Functions/FunctionsLayout.tsx
@@ -2,12 +2,11 @@ import Link from 'next/link'
 import { useRouter } from 'next/router'
 import React, { useEffect } from 'react'
 import { observer } from 'mobx-react-lite'
-import { IconCode, Loading, Badge } from '@supabase/ui'
+import { IconCode, Loading } from '@supabase/ui'
 
 import { useStore, withAuth } from 'hooks'
 import FunctionsNav from './FunctionsNav'
 import BaseLayout from 'components/layouts'
-import WarningBanner from 'components/ui/WarningBanner'
 
 const FunctionsLayout = ({ children }: { children?: React.ReactNode }) => {
   const { functions, ui } = useStore()
@@ -120,21 +119,10 @@ const FunctionsLayout = ({ children }: { children?: React.ReactNode }) => {
             {item && <FunctionsNav item={item} />}
           </div>
           <div
-            className="
-            h-full flex flex-col flex-grow
-
-            w-full mx-auto
-
-            transition-all
-
-            px-5
-            lg:px-16
-            xl:px-24
-            1xl:px-28
-            2xl:px-32
-
-            gap-4
-        "
+            className={[
+              'h-full flex flex-col flex-grow w-full mx-auto transition-all',
+              'px-5 lg:px-16 xl:px-24 1xl:px-28 2xl:px-32 gap-4',
+            ].join(' ')}
           >
             {children}
           </div>