From ea5a74af7d37fac24a816e500f32afbe6dc99004 Mon Sep 17 00:00:00 2001
From: Joshen Lim <joshenlimek@gmail.com>
Date: Mon, 30 Jan 2023 14:12:20 +0800
Subject: [PATCH] Shift network restrictions to database settings page

---
 studio/components/interfaces/Database/index.ts        |  2 +-
 .../Database}/ConnectionPooling.tsx                   |  0
 .../NetworkRestrictions/AddRestrictionModal.tsx       | 11 +++++++++--
 .../NetworkRestrictions/AllowAllModal.tsx             |  0
 .../NetworkRestrictions/DisallowAllModal.tsx          |  9 ++++++++-
 .../NetworkRestrictions/NetworkRestrictions.tsx       |  9 +++++++--
 .../NetworkRestrictions/RemoveRestrictionModal.tsx    |  0
 .../components/interfaces/Settings/Database/index.ts  |  4 ++++
 .../components/interfaces/Settings/General/index.ts   | 10 +---------
 studio/pages/project/[ref]/settings/database.tsx      |  9 ++++++---
 studio/pages/project/[ref]/settings/general.tsx       |  5 -----
 11 files changed, 36 insertions(+), 23 deletions(-)
 rename studio/components/interfaces/{Database/Pooling => Settings/Database}/ConnectionPooling.tsx (100%)
 rename studio/components/interfaces/Settings/{General => Database}/NetworkRestrictions/AddRestrictionModal.tsx (88%)
 rename studio/components/interfaces/Settings/{General => Database}/NetworkRestrictions/AllowAllModal.tsx (100%)
 rename studio/components/interfaces/Settings/{General => Database}/NetworkRestrictions/DisallowAllModal.tsx (83%)
 rename studio/components/interfaces/Settings/{General => Database}/NetworkRestrictions/NetworkRestrictions.tsx (94%)
 rename studio/components/interfaces/Settings/{General => Database}/NetworkRestrictions/RemoveRestrictionModal.tsx (100%)
 create mode 100644 studio/components/interfaces/Settings/Database/index.ts

diff --git a/studio/components/interfaces/Database/index.ts b/studio/components/interfaces/Database/index.ts
index d866b7d8c8c..94c664c2854 100644
--- a/studio/components/interfaces/Database/index.ts
+++ b/studio/components/interfaces/Database/index.ts
@@ -15,7 +15,7 @@ import PublicationsTables from './Publications/PublicationsTables'
 
 import BackupsList from './Backups/BackupsList'
 
-import ConnectionPooling from './Pooling/ConnectionPooling'
+import ConnectionPooling from '../Settings/Database/ConnectionPooling'
 
 import CreateTrigger from './Triggers/CreateTrigger'
 import DeleteTrigger from './Triggers/DeleteTrigger'
diff --git a/studio/components/interfaces/Database/Pooling/ConnectionPooling.tsx b/studio/components/interfaces/Settings/Database/ConnectionPooling.tsx
similarity index 100%
rename from studio/components/interfaces/Database/Pooling/ConnectionPooling.tsx
rename to studio/components/interfaces/Settings/Database/ConnectionPooling.tsx
diff --git a/studio/components/interfaces/Settings/General/NetworkRestrictions/AddRestrictionModal.tsx b/studio/components/interfaces/Settings/Database/NetworkRestrictions/AddRestrictionModal.tsx
similarity index 88%
rename from studio/components/interfaces/Settings/General/NetworkRestrictions/AddRestrictionModal.tsx
rename to studio/components/interfaces/Settings/Database/NetworkRestrictions/AddRestrictionModal.tsx
index 6b93314d01a..94ecb1fabf4 100644
--- a/studio/components/interfaces/Settings/General/NetworkRestrictions/AddRestrictionModal.tsx
+++ b/studio/components/interfaces/Settings/Database/NetworkRestrictions/AddRestrictionModal.tsx
@@ -4,6 +4,7 @@ import { Alert, Button, Form, Input, Modal } from 'ui'
 
 import { useStore, useParams } from 'hooks'
 import { useNetworkRestrictionsApplyMutation } from 'data/network-restrictions/network-retrictions-apply-mutation'
+import InformationBox from 'components/ui/InformationBox'
 
 interface Props {
   restrictedIps: string[]
@@ -77,7 +78,7 @@ const AddRestrictionModal: FC<Props> = ({
     <Modal
       closable
       hideFooter
-      size="small"
+      size="medium"
       visible={visible}
       onCancel={onClose}
       header="Add a new restriction"
@@ -90,7 +91,7 @@ const AddRestrictionModal: FC<Props> = ({
         validate={validate}
         onSubmit={onSubmit}
       >
-        {({ isSubmitting }: any) => {
+        {({ isSubmitting }: { isSubmitting: boolean }) => {
           return (
             <>
               <Modal.Content>
@@ -99,6 +100,12 @@ const AddRestrictionModal: FC<Props> = ({
                     This will add an IP address range to a list of allowed ranges that can access
                     your project's database.
                   </p>
+                  <InformationBox
+                    defaultVisibility
+                    hideCollapse
+                    title="Note: Restrictions only apply to your database and PgBouncer"
+                    description="They do not currently apply to APIs offered over HTTPS, such as PostgREST, Storage, or Authentication"
+                  />
                   <Input
                     label="IPv4 address in CIDR notation"
                     id="address"
diff --git a/studio/components/interfaces/Settings/General/NetworkRestrictions/AllowAllModal.tsx b/studio/components/interfaces/Settings/Database/NetworkRestrictions/AllowAllModal.tsx
similarity index 100%
rename from studio/components/interfaces/Settings/General/NetworkRestrictions/AllowAllModal.tsx
rename to studio/components/interfaces/Settings/Database/NetworkRestrictions/AllowAllModal.tsx
diff --git a/studio/components/interfaces/Settings/General/NetworkRestrictions/DisallowAllModal.tsx b/studio/components/interfaces/Settings/Database/NetworkRestrictions/DisallowAllModal.tsx
similarity index 83%
rename from studio/components/interfaces/Settings/General/NetworkRestrictions/DisallowAllModal.tsx
rename to studio/components/interfaces/Settings/Database/NetworkRestrictions/DisallowAllModal.tsx
index 126c81b6bb1..61010018a82 100644
--- a/studio/components/interfaces/Settings/General/NetworkRestrictions/DisallowAllModal.tsx
+++ b/studio/components/interfaces/Settings/Database/NetworkRestrictions/DisallowAllModal.tsx
@@ -3,6 +3,7 @@ import { Modal, Button } from 'ui'
 
 import { useStore, useParams } from 'hooks'
 import { useNetworkRestrictionsApplyMutation } from 'data/network-restrictions/network-retrictions-apply-mutation'
+import InformationBox from 'components/ui/InformationBox'
 
 interface Props {
   visible: boolean
@@ -36,7 +37,7 @@ const DisallowAllModal: FC<Props> = ({ visible, onClose }) => {
     <Modal
       closable
       hideFooter
-      size="small"
+      size="medium"
       visible={visible}
       onCancel={onClose}
       header="Restrict access from all IP addresses"
@@ -47,6 +48,12 @@ const DisallowAllModal: FC<Props> = ({ visible, onClose }) => {
             This will prevent any IP address other than your local machine from accessing your
             project's database. Are you sure?
           </p>
+          <InformationBox
+            defaultVisibility
+            hideCollapse
+            title="Note: Restrictions only apply to your database and PgBouncer"
+            description="They do not currently apply to APIs offered over HTTPS, such as PostgREST, Storage, or Authentication"
+          />
         </div>
       </Modal.Content>
       <div className="flex items-center justify-end px-6 py-4 border-t space-x-2">
diff --git a/studio/components/interfaces/Settings/General/NetworkRestrictions/NetworkRestrictions.tsx b/studio/components/interfaces/Settings/Database/NetworkRestrictions/NetworkRestrictions.tsx
similarity index 94%
rename from studio/components/interfaces/Settings/General/NetworkRestrictions/NetworkRestrictions.tsx
rename to studio/components/interfaces/Settings/Database/NetworkRestrictions/NetworkRestrictions.tsx
index bd6f745867a..2e074e77c5c 100644
--- a/studio/components/interfaces/Settings/General/NetworkRestrictions/NetworkRestrictions.tsx
+++ b/studio/components/interfaces/Settings/Database/NetworkRestrictions/NetworkRestrictions.tsx
@@ -116,8 +116,9 @@ const NetworkRestrictions = ({}) => {
                       accessed externally
                     </p>
                     <p className="text-scale-1000 text-sm w-3/5">
-                      Only your local machine is able to access your project's database as all IP
-                      addresses have been disallowed.
+                      Only IP addresses within the range of{' '}
+                      <code className="text-xs">127.0.0.1/32</code> can access your project's
+                      database as all IP addresses have been disallowed.
                     </p>
                   </div>
                 </div>
@@ -138,6 +139,10 @@ const NetworkRestrictions = ({}) => {
                       You may remove all of them to allow all IP addresses to have access to your
                       database
                     </p>
+                    <p className="text-scale-1000 text-sm">
+                      Note: Restrictions only apply to your database, and not to APIs offered over
+                      HTTPS
+                    </p>
                   </div>
                   <div className="flex items-center space-x-2">
                     <Button type="default" onClick={() => setIsAllowingAll(true)}>
diff --git a/studio/components/interfaces/Settings/General/NetworkRestrictions/RemoveRestrictionModal.tsx b/studio/components/interfaces/Settings/Database/NetworkRestrictions/RemoveRestrictionModal.tsx
similarity index 100%
rename from studio/components/interfaces/Settings/General/NetworkRestrictions/RemoveRestrictionModal.tsx
rename to studio/components/interfaces/Settings/Database/NetworkRestrictions/RemoveRestrictionModal.tsx
diff --git a/studio/components/interfaces/Settings/Database/index.ts b/studio/components/interfaces/Settings/Database/index.ts
new file mode 100644
index 00000000000..7ca7e01bbd0
--- /dev/null
+++ b/studio/components/interfaces/Settings/Database/index.ts
@@ -0,0 +1,4 @@
+import ConnectionPooling from './ConnectionPooling'
+import NetworkRestrictions from './NetworkRestrictions/NetworkRestrictions'
+
+export { ConnectionPooling, NetworkRestrictions }
diff --git a/studio/components/interfaces/Settings/General/index.ts b/studio/components/interfaces/Settings/General/index.ts
index 59a3ebc7e63..8ff5b36ea73 100644
--- a/studio/components/interfaces/Settings/General/index.ts
+++ b/studio/components/interfaces/Settings/General/index.ts
@@ -1,15 +1,7 @@
 import General from './General'
 import Infrastructure from './Infrastructure/Infrastructure'
 import CustomDomainConfig from './CustomDomainConfig/CustomDomainConfig'
-import NetworkRestrictions from './NetworkRestrictions/NetworkRestrictions'
 import DeleteProjectPanel from './DeleteProjectPanel/DeleteProjectPanel'
 import DeleteProjectButton from './DeleteProjectPanel/DeleteProjectButton'
 
-export {
-  General,
-  Infrastructure,
-  CustomDomainConfig,
-  NetworkRestrictions,
-  DeleteProjectPanel,
-  DeleteProjectButton,
-}
+export { General, Infrastructure, CustomDomainConfig, DeleteProjectPanel, DeleteProjectButton }
diff --git a/studio/pages/project/[ref]/settings/database.tsx b/studio/pages/project/[ref]/settings/database.tsx
index 386132dec63..37f0b2aabab 100644
--- a/studio/pages/project/[ref]/settings/database.tsx
+++ b/studio/pages/project/[ref]/settings/database.tsx
@@ -1,7 +1,7 @@
 import useSWR from 'swr'
+import { toJS } from 'mobx'
 import * as Tooltip from '@radix-ui/react-tooltip'
 import { FC, useState, useRef, useEffect } from 'react'
-import { toJS } from 'mobx'
 import { observer } from 'mobx-react-lite'
 import { useRouter } from 'next/router'
 import { debounce } from 'lodash'
@@ -18,17 +18,20 @@ import { API_URL, DEFAULT_MINIMUM_PASSWORD_STRENGTH } from 'lib/constants'
 import { SettingsLayout } from 'components/layouts'
 import PasswordStrengthBar from 'components/ui/PasswordStrengthBar'
 import Panel from 'components/ui/Panel'
-import ConnectionPooling from 'components/interfaces/Database/Pooling/ConnectionPooling'
+import { ConnectionPooling, NetworkRestrictions } from 'components/interfaces/Settings/Database'
 
 const ProjectSettings: NextPageWithLayout = () => {
   const router = useRouter()
   const { ref } = router.query
 
+  const networkRestrictions = useFlag('networkRestrictions')
+
   return (
-    <div className="1xl:px-28 mx-auto flex flex-col gap-4 px-5 py-6 lg:px-16 xl:px-24 2xl:px-32">
+    <div className="1xl:px-28 mx-auto flex flex-col gap-4 px-5 pt-6 pb-14 lg:px-16 xl:px-24 2xl:px-32">
       <div className="content h-full w-full overflow-y-auto">
         <GeneralSettings projectRef={ref} />
         <ConnectionPooling />
+        {networkRestrictions && <NetworkRestrictions />}
       </div>
     </div>
   )
diff --git a/studio/pages/project/[ref]/settings/general.tsx b/studio/pages/project/[ref]/settings/general.tsx
index d86bd8a0d5a..a1981c1e607 100644
--- a/studio/pages/project/[ref]/settings/general.tsx
+++ b/studio/pages/project/[ref]/settings/general.tsx
@@ -1,26 +1,21 @@
 import { observer } from 'mobx-react-lite'
 
 import { NextPageWithLayout } from 'types'
-import { useFlag } from 'hooks'
 import { SettingsLayout } from 'components/layouts'
 import {
   General,
   Infrastructure,
   CustomDomainConfig,
-  NetworkRestrictions,
   DeleteProjectPanel,
 } from 'components/interfaces/Settings/General'
 
 const ProjectSettings: NextPageWithLayout = () => {
-  const networkRestrictions = useFlag('networkRestrictions')
-
   // [Joshen] Opting for larger gap instead of gap-8 as compared to other pages for better grouping of content
   return (
     <div className="1xl:px-28 mx-auto flex flex-col gap-10 px-5 py-6 lg:px-16 xl:px-24 2xl:px-32 ">
       <General />
       <Infrastructure />
       <CustomDomainConfig />
-      {networkRestrictions && <NetworkRestrictions />}
       <DeleteProjectPanel />
     </div>
   )