From fcd221e98449ca8cdf07b92afba55047ef3ac7e9 Mon Sep 17 00:00:00 2001
From: Terry Sutton <saltcod@gmail.com>
Date: Thu, 19 May 2022 10:47:02 -0230
Subject: [PATCH] Removes unneeded files that were consolidated into
 ConnectionPooling

---
 .../Database/Pooling/BouncerSettings.tsx      |  73 ---------
 ...lingSettings.tsx => ConnectionPooling.tsx} |  69 +++++----
 .../Database/Pooling/DownloadCertificate.tsx  |  34 ----
 .../Database/Pooling/PgBouncerConfig.tsx      | 146 ------------------
 .../components/interfaces/Database/index.ts   |   4 +-
 .../pages/project/[ref]/settings/database.tsx |  11 +-
 6 files changed, 41 insertions(+), 296 deletions(-)
 delete mode 100644 studio/components/interfaces/Database/Pooling/BouncerSettings.tsx
 rename studio/components/interfaces/Database/Pooling/{ConnectionPoolingSettings.tsx => ConnectionPooling.tsx} (81%)
 delete mode 100644 studio/components/interfaces/Database/Pooling/DownloadCertificate.tsx
 delete mode 100644 studio/components/interfaces/Database/Pooling/PgBouncerConfig.tsx

diff --git a/studio/components/interfaces/Database/Pooling/BouncerSettings.tsx b/studio/components/interfaces/Database/Pooling/BouncerSettings.tsx
deleted file mode 100644
index 457dd19652d..00000000000
--- a/studio/components/interfaces/Database/Pooling/BouncerSettings.tsx
+++ /dev/null
@@ -1,73 +0,0 @@
-import { FC, useState, useEffect } from 'react'
-import { observer } from 'mobx-react-lite'
-import { Typography } from '@supabase/ui'
-import { useStore } from 'hooks'
-import { pluckObjectFields } from 'lib/helpers'
-import Loading from 'components/ui/Loading'
-import PgBouncerConfig from './PgBouncerConfig'
-import Panel from 'components/to-be-cleaned/Panel'
-
-interface Props {}
-
-const BouncerSettings: FC<Props> = ({}) => {
-  const { ui, app } = useStore()
-  const projectRef = ui.selectedProject?.ref ?? 'default'
-
-  const [isLoading, setIsLoading] = useState<boolean>(true)
-  const [poolingConfiguration, setPoolingConfiguration] = useState<any>()
-
-  useEffect(() => {
-    fetchPoolingConfiguration()
-  }, [])
-
-  const fetchPoolingConfiguration = async () => {
-    setIsLoading(true)
-    const response = await app.database.getPoolingConfiguration(projectRef)
-    setPoolingConfiguration(response)
-    setIsLoading(false)
-  }
-
-  if (isLoading) return <Loading />
-  if (poolingConfiguration.error) {
-    return (
-      <div className="p-4">
-        <Typography.Text type="secondary">Error loading pooling configuration</Typography.Text>
-      </div>
-    )
-  }
-
-  const { project } = poolingConfiguration
-
-  // for older projects
-  if (!project.pgbouncer_enabled && project.pool_mode == null)
-    return (
-      <Panel
-      title={
-        <Typography.Title key="panel-title" level={5} className="mb-0">
-         Connection Pooling is not available for this project
-        </Typography.Title>
-      }
-    >
-        <Panel.Content>
-          <Typography.Text type="secondary">Please start a new project to enable this feature.</Typography.Text>
-        </Panel.Content>
-      </Panel>
-    )
-  const formModel = project
-  const DB_FIELDS = ['db_host', 'db_name', 'db_port', 'db_user', 'inserted_at']
-  const connectionInfo = pluckObjectFields(formModel, DB_FIELDS)
-  const BOUNCER_FIELDS = [
-    'default_pool_size',
-    'ignore_startup_parameters',
-    'pool_mode',
-    'pgbouncer_enabled',
-  ]
-  const bouncerInfo = pluckObjectFields(formModel, BOUNCER_FIELDS)
-  return (
-
-          <PgBouncerConfig config={bouncerInfo} projectRef={projectRef} />
-
-  )
-}
-
-export default observer(BouncerSettings)
diff --git a/studio/components/interfaces/Database/Pooling/ConnectionPoolingSettings.tsx b/studio/components/interfaces/Database/Pooling/ConnectionPooling.tsx
similarity index 81%
rename from studio/components/interfaces/Database/Pooling/ConnectionPoolingSettings.tsx
rename to studio/components/interfaces/Database/Pooling/ConnectionPooling.tsx
index f57bbe5e06c..554ee0674f6 100644
--- a/studio/components/interfaces/Database/Pooling/ConnectionPoolingSettings.tsx
+++ b/studio/components/interfaces/Database/Pooling/ConnectionPooling.tsx
@@ -15,7 +15,7 @@ import { Input } from '@supabase/ui'
 
 interface Props {}
 
-const BouncerSettings: FC<Props> = ({}) => {
+const ConnectionPooling: FC<Props> = () => {
   const { ui, app } = useStore()
   const projectRef = ui.selectedProject?.ref ?? 'default'
 
@@ -70,31 +70,28 @@ const BouncerSettings: FC<Props> = ({}) => {
   ]
   const bouncerInfo = pluckObjectFields(formModel, BOUNCER_FIELDS)
 
-  console.log()
   return (
-      <PgbouncerConfig projectRef={projectRef} config={bouncerInfo} portNumber={connectionInfo.db_port} />
+      <PgbouncerConfig projectRef={projectRef} bouncerInfo={bouncerInfo} connectionInfo={connectionInfo} />
   )
 }
 
-export default observer(BouncerSettings)
-
+export default observer(ConnectionPooling)
 
 interface ConfigProps {
   projectRef: string
-  config: any,
-  portNumber: number
+  bouncerInfo: {default_pool_size: number, ignore_startup_parameters: 'string', pool_mode: string, pgbouncer_enabled: boolean},
+  connectionInfo: {db_host: string, db_name: string, db_port: number, db_user: string, inserted_at: string}
 }
 
-export const PgbouncerConfig: FC<ConfigProps> = observer(({ projectRef, config, portNumber }) => {
+export const PgbouncerConfig: FC<ConfigProps> = observer(({ projectRef, bouncerInfo, connectionInfo }) => {
 
   const { ui } = useStore()
 
   const [updates, setUpdates] = useState<any>({
-    // pgbouncer_status: config.pgbouncer_status,
-    pgbouncer_enabled: config.pgbouncer_enabled,
-    pool_mode: config.pool_mode || 'transaction',
-    default_pool_size: config.default_pool_size || '',
-    ignore_startup_parameters: config.ignore_startup_parameters || '',
+    pgbouncer_enabled: bouncerInfo.pgbouncer_enabled,
+    pool_mode: bouncerInfo.pool_mode || 'transaction',
+    default_pool_size: bouncerInfo.default_pool_size || '',
+    ignore_startup_parameters: bouncerInfo.ignore_startup_parameters || '',
   })
 
   const updateConfig = async (updatedConfig: any) => {
@@ -152,31 +149,20 @@ export const PgbouncerConfig: FC<ConfigProps> = observer(({ projectRef, config,
 
   return (
     <SchemaFormPanel
-      title="Connection Pooling Settings"
+      title="Connection Pooling"
       schema={formSchema}
       model={updates}
       submitLabel="Save"
       cancelLabel="Cancel"
       onChangeModel={(model: any) => setUpdates(model)}
       onSubmit={(model: any) => updateConfig(model)}
-      onReset={() => setUpdates(config)}
+      onReset={() => setUpdates(bouncerInfo)}
     >
       <div className="space-y-6 py-4">
         <ToggleField name="pgbouncer_enabled" />
-        <Divider light />
-
-        <Input
-          className="input-mono"
-          layout="horizontal"
-          readOnly
-          copy
-          disabled
-          value={portNumber}
-          label="Port"
-        />
 
         <Divider light />
-        {/* <AutoField name="pgbouncer_status" disabled={true} /> */}
+
         {updates.pgbouncer_enabled && (
           <>
             <AutoField
@@ -199,14 +185,33 @@ export const PgbouncerConfig: FC<ConfigProps> = observer(({ projectRef, config,
               </p>
             </div>
             <Divider light />
-            {/* <AutoField
-              name="default_pool_size"
-              showInlineError
-              errorMessage="Value must be within 1 and 20"
-            /> */}
             <AutoField name="ignore_startup_parameters" />
           </>
         )}
+        <Divider light />
+        <Input
+          className="input-mono"
+          layout="horizontal"
+          readOnly
+          copy
+          disabled
+          value={connectionInfo.db_port}
+          label="Port"
+        />
+        <Divider light />
+        <Input
+          className="input-mono"
+          layout="vertical"
+          readOnly
+          copy
+          disabled
+          label="Connection string"
+          value={
+            `postgres://${connectionInfo.db_user}:[YOUR-PASSWORD]@` +
+            `${connectionInfo.db_host}:${connectionInfo.db_port}` +
+            `/${connectionInfo.db_name}`
+          }
+        />
       </div>
     </SchemaFormPanel>
   )
diff --git a/studio/components/interfaces/Database/Pooling/DownloadCertificate.tsx b/studio/components/interfaces/Database/Pooling/DownloadCertificate.tsx
deleted file mode 100644
index 9f435fe9c91..00000000000
--- a/studio/components/interfaces/Database/Pooling/DownloadCertificate.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-import { FC } from 'react'
-import { Button, IconDownload } from '@supabase/ui'
-
-interface Props {
-  createdAt: string
-}
-
-const DownloadCertificate: FC<Props> = ({ createdAt }) => {
-  // instances before 3 : 08 pm sgt 29th April don't have certs installed
-  if (new Date(createdAt) < new Date('2021-04-30')) return null
-  const env = process.env.NEXT_PUBLIC_ENVIRONMENT === 'prod' ? 'prod' : 'staging'
-
-  return (
-    <div className="w-full flex items-center justify-between">
-      <div>
-        <p className="block">SSL Connection</p>
-        <div>
-          <p className="text-sm text-scale-1100">
-            Use this certificate to prevent snooping and man-in-the-middle attacks.
-          </p>
-        </div>
-      </div>
-      <Button type="default" icon={<IconDownload />}>
-        <a
-          href={`https://supabase-downloads.s3-ap-southeast-1.amazonaws.com/${env}/ssl/${env}-ca-2021.crt`}
-        >
-          Download Certificate
-        </a>
-      </Button>
-    </div>
-  )
-}
-
-export default DownloadCertificate
diff --git a/studio/components/interfaces/Database/Pooling/PgBouncerConfig.tsx b/studio/components/interfaces/Database/Pooling/PgBouncerConfig.tsx
deleted file mode 100644
index 01e3ba0967c..00000000000
--- a/studio/components/interfaces/Database/Pooling/PgBouncerConfig.tsx
+++ /dev/null
@@ -1,146 +0,0 @@
-import { FC, useState } from 'react'
-import { observer } from 'mobx-react-lite'
-import Divider from 'components/ui/Divider'
-import { AutoField } from 'uniforms-bootstrap4'
-
-import { useStore } from 'hooks'
-import { API_URL } from 'lib/constants'
-import { patch } from 'lib/common/fetch'
-import ToggleField from 'components/to-be-cleaned/forms/ToggleField'
-import SchemaFormPanel from 'components/to-be-cleaned/forms/SchemaFormPanel'
-import { Input } from '@supabase/ui'
-
-interface Props {
-  projectRef: string
-  config: any
-}
-
-const PgbouncerConfig: FC<Props> = ({ projectRef, config }) => {
-  const { ui } = useStore()
-
-  const [updates, setUpdates] = useState<any>({
-    // pgbouncer_status: config.pgbouncer_status,
-    pgbouncer_enabled: config.pgbouncer_enabled,
-    pool_mode: config.pool_mode || 'transaction',
-    default_pool_size: config.default_pool_size || '',
-    ignore_startup_parameters: config.ignore_startup_parameters || '',
-  })
-
-  const updateConfig = async (updatedConfig: any) => {
-    try {
-      const response = await patch(`${API_URL}/props/pooling/${projectRef}/config`, updatedConfig)
-      if (response.error) {
-        throw response.error
-      } else {
-        setUpdates({ ...response.project })
-        ui.setNotification({ category: 'success', message: 'Successfully saved settings' })
-      }
-    } catch (error: any) {
-      ui.setNotification({
-        category: 'error',
-        message: `Failed to update config: ${error.message}`,
-      })
-    }
-  }
-
-  const formSchema = {
-    properties: {
-      pgbouncer_enabled: {
-        title: 'Enabled',
-        type: 'boolean',
-        help: 'Activates / deactivates Connection Pooling.',
-      },
-      pool_mode: {
-        title: 'Pool Mode',
-        type: 'string',
-        options: [
-          {
-            label: 'Transaction',
-            value: 'transaction',
-          },
-          {
-            label: 'Session',
-            value: 'session',
-          },
-          {
-            label: 'Statement',
-            value: 'statement',
-          },
-        ],
-      },
-      ignore_startup_parameters: {
-        title: 'Ignore Startup Parameters',
-        type: 'string',
-        readOnly: true,
-        help: 'Defaults are either blank or "extra_float_digits"',
-      },
-    },
-    required: ['pool_mode'],
-    type: 'object',
-  }
-
-  return (
-    <>
-    <SchemaFormPanel
-      title="Connection Pooling Settings"
-      schema={formSchema}
-      model={updates}
-      submitLabel="Save"
-      cancelLabel="Cancel"
-      onChangeModel={(model: any) => setUpdates(model)}
-      onSubmit={(model: any) => updateConfig(model)}
-      onReset={() => setUpdates(config)}
-    >
-      <div className="space-y-6 py-4">
-        <ToggleField name="pgbouncer_enabled" />
-        <Divider light />
-
-        <Input
-          className="input-mono"
-          layout="horizontal"
-          readOnly
-          copy
-          disabled
-          value="44444444444444"
-          label="Port"
-        />
-
-        <Divider light />
-        {/* <AutoField name="pgbouncer_status" disabled={true} /> */}
-        {updates.pgbouncer_enabled && (
-          <>
-            <AutoField
-              name="pool_mode"
-              showInlineError
-              errorMessage="You must select one of the three options"
-            />
-            <div className="flex !mt-1" style={{ marginLeft: 'calc(33% + 0.5rem)' }}>
-              <p className="text-sm text-scale-900">
-                Specify when a connection can be returned to the pool. To find out the most
-                suitable mode for your use case,{' '}
-                <a
-                  className="text-green-900"
-                  target="_blank"
-                  href="https://supabase.com/docs/guides/database/connecting-to-postgres#connection-pool"
-                >
-                  click here
-                </a>
-                .
-              </p>
-            </div>
-            <Divider light />
-            {/* <AutoField
-              name="default_pool_size"
-              showInlineError
-              errorMessage="Value must be within 1 and 20"
-            /> */}
-            <AutoField name="ignore_startup_parameters" />
-          </>
-        )}
-      </div>
-    </SchemaFormPanel>
-    </>
-  )
-}
-
-export default observer(PgbouncerConfig)
diff --git a/studio/components/interfaces/Database/index.ts b/studio/components/interfaces/Database/index.ts
index 6ae975d5f05..60141982fab 100644
--- a/studio/components/interfaces/Database/index.ts
+++ b/studio/components/interfaces/Database/index.ts
@@ -11,7 +11,7 @@ import PublicationsTables from './Publications/PublicationsTables'
 
 import BackupsList from './Backups/BackupsList'
 
-import BouncerSettings from './Pooling/BouncerSettings'
+import ConnectionPooling from './Pooling/ConnectionPooling'
 
 import CreateTrigger from './Triggers/CreateTrigger'
 import DeleteTrigger from './Triggers/DeleteTrigger'
@@ -28,7 +28,7 @@ export {
   PublicationsList,
   PublicationsTables,
   BackupsList,
-  BouncerSettings,
+  ConnectionPooling,
   CreateTrigger,
   DeleteTrigger,
   CreateFunction,
diff --git a/studio/pages/project/[ref]/settings/database.tsx b/studio/pages/project/[ref]/settings/database.tsx
index a45a2e5f6f3..1e0d64ae8f0 100644
--- a/studio/pages/project/[ref]/settings/database.tsx
+++ b/studio/pages/project/[ref]/settings/database.tsx
@@ -21,17 +21,12 @@ import Panel from 'components/to-be-cleaned/Panel'
 import { ProjectUsageMinimal } from 'components/to-be-cleaned/Usage'
 import DateRangePicker from 'components/to-be-cleaned/DateRangePicker'
 import ChartHandler from 'components/to-be-cleaned/Charts/ChartHandler'
-import { BouncerSettings } from 'components/interfaces/Database'
-import ConnectionPoolingSettings from 'components/interfaces/Database/Pooling/ConnectionPoolingSettings'
+import ConnectionPooling from 'components/interfaces/Database/Pooling/ConnectionPooling'
 
 dayjs.extend(customParseFormat)
 dayjs.extend(timezone)
 dayjs.extend(utc)
 
-
-
-
-
 const ProjectSettings = () => {
   const router = useRouter()
   const { ref } = router.query
@@ -43,11 +38,9 @@ const ProjectSettings = () => {
     <SettingsLayout title="Database">
       <div className="content w-full h-full overflow-y-auto">
         <div className="w-full px-4 py-4 max-w-5xl">
-          <ConnectionPoolingSettings />
-          <BouncerSettings />
           <Usage project={project} />
           <GeneralSettings projectRef={ref} />
-          {/* move bouncer settings back down here ->>>>>>>>>>>>> <BouncerSettings /> */}
+          <ConnectionPooling />
         </div>
       </div>
     </SettingsLayout>