Shift network restrictions to database settings page

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'

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"

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">

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

studio/components/interfaces/Settings/Database/index.ts

@@ -0,0 +1,4 @@
+import ConnectionPooling from './ConnectionPooling'
+import NetworkRestrictions from './NetworkRestrictions/NetworkRestrictions'
+
+export { ConnectionPooling, NetworkRestrictions }

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 }

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

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