console: expose max_connections field on UI while connecting postgres databases

PR-URL: hasura/graphql-engine-mono#10520
Co-authored-by: Matthew Goodwin <[email protected]>
GitOrigin-RevId: 7da0870e67e2d74c5182e38c4e1ad7c9e48b3e42

Author: 2 people

frontend/libs/console/legacy-ce/src/lib/features/ConnectDBRedesign/components/ConnectPostgresWidget/ConnectPostgresWidget.stories.tsx

@@ -108,7 +108,7 @@ export const Test: StoryObj<typeof ConnectPostgresWidget> = {
     // Find and click on advanced settings
     await userEvent.click(await canvas.findByText('Advanced Settings'));
     await expect(
-      await canvas.findByText('Total Max Connections')
+      await canvas.findByText('Max Connections')
     ).toBeInTheDocument();
     await expect(await canvas.findByText('Idle Timeout')).toBeInTheDocument();
     await expect(await canvas.findByText('Retries')).toBeInTheDocument();
@@ -174,7 +174,7 @@ export const PostgresEditConnection: StoryObj<typeof ConnectPostgresWidget> = {
     await userEvent.click(await canvas.findByText('Advanced Settings'));
     await expect(
       await canvas.findByTestId(
-        'configuration.connectionInfo.poolSettings.totalMaxConnections'
+        'configuration.connectionInfo.poolSettings.maxConnections'
       )
     ).toHaveValue(500);
     await expect(

frontend/libs/console/legacy-ce/src/lib/features/ConnectDBRedesign/components/ConnectPostgresWidget/parts/ConnectPostgresForm.stories.tsx

@@ -8,10 +8,14 @@ import { ReactQueryDecorator } from '../../../../../storybook/decorators/react-q
 import { useState } from 'react';
 import { userEvent, waitFor, within } from '@storybook/testing-library';
 import { expect } from '@storybook/jest';
+import { ConsoleTypeDecorator } from '../../../../../storybook/decorators';
 
 export default {
   component: ConnectPostgresForm,
-  decorators: [ReactQueryDecorator()],
+  decorators: [
+    ReactQueryDecorator(),
+    ConsoleTypeDecorator({ consoleType: 'cloud' }),
+  ],
 } as Meta<typeof ConnectPostgresForm>;
 
 export const TestPostgresForm: StoryObj<typeof ConnectPostgresForm> = {
@@ -166,7 +170,7 @@ export const TestPostgresForm: StoryObj<typeof ConnectPostgresForm> = {
     );
 
     await userEvent.click(await canvas.findByText('Advanced Settings'));
-    await userEvent.type(await canvas.findByPlaceholderText('1000'), '100');
+    await userEvent.type(await canvas.findByPlaceholderText('50'), '100');
     await userEvent.type(await canvas.findByPlaceholderText('180'), '100');
     await userEvent.type(await canvas.findByPlaceholderText('1'), '100');
     await userEvent.type(await canvas.findByPlaceholderText('360'), '100');
@@ -194,7 +198,7 @@ export const TestPostgresForm: StoryObj<typeof ConnectPostgresForm> = {
                   port: 5432,
                 },
                 poolSettings: {
-                  totalMaxConnections: 100,
+                  maxConnections: 100,
                   idleTimeout: 100,
                   retries: 100,
                   poolTimeout: 100,
@@ -252,7 +256,7 @@ export const TestPostgresForm: StoryObj<typeof ConnectPostgresForm> = {
                   port: 5432,
                 },
                 poolSettings: {
-                  totalMaxConnections: 100,
+                  maxConnections: 100,
                   idleTimeout: 100,
                   retries: 100,
                   poolTimeout: 100,

frontend/libs/console/legacy-ce/src/lib/features/ConnectDBRedesign/components/ConnectPostgresWidget/parts/PoolSettings.tsx

@@ -1,4 +1,7 @@
+import { isCloudConsole } from '../../../../../utils';
+import globals from '../../../../../Globals';
 import { InputField } from '../../../../../new-components/Form';
+// import { isCloudConsole } from '../../../../../utils';
 
 const commonFieldProps: Partial<React.InputHTMLAttributes<HTMLInputElement>> = {
   onWheelCapture: e => e.currentTarget.blur(),
@@ -7,12 +10,23 @@ const commonFieldProps: Partial<React.InputHTMLAttributes<HTMLInputElement>> = {
 export const PoolSettings = ({ name }: { name: string }) => {
   return (
     <>
+      {isCloudConsole(globals) && (
+        <InputField
+          type="number"
+          name={`${name}.totalMaxConnections`}
+          label="Total Max Connections"
+          placeholder="1000"
+          tooltip="Maximum number of total connections to be maintained across any number of Hasura Cloud instances (default: 1000). Takes precedence over max_connections in Cloud projects."
+          fieldProps={commonFieldProps}
+        />
+      )}
+
       <InputField
         type="number"
-        name={`${name}.totalMaxConnections`}
-        label="Total Max Connections"
-        placeholder="1000"
-        tooltip="Maximum number of database connections"
+        name={`${name}.maxConnections`}
+        label="Max Connections"
+        placeholder="50"
+        tooltip="Maximum number of connections to be kept in the pool (default: 50)"
         fieldProps={commonFieldProps}
       />
       <InputField

frontend/libs/console/legacy-ce/src/lib/features/ConnectDBRedesign/components/ConnectPostgresWidget/schema.ts

@@ -11,6 +11,7 @@ const numberSchema = z.preprocess(
 export const poolSettingsSchema = z
   .object({
     totalMaxConnections: numberSchema.optional(),
+    maxConnections: numberSchema.optional(),
     idleTimeout: numberSchema.optional(),
     retries: numberSchema.optional(),
     poolTimeout: numberSchema.optional(),

frontend/libs/console/legacy-ce/src/lib/features/ConnectDBRedesign/components/ConnectPostgresWidget/utils/adaptResponse.test.ts

@@ -27,6 +27,7 @@ describe('adaptPostgresConnection works for ', () => {
             "poolSettings": {
               "connectionLifetime": undefined,
               "idleTimeout": undefined,
+              "maxConnections": undefined,
               "poolTimeout": undefined,
               "retries": undefined,
               "totalMaxConnections": undefined,
@@ -98,6 +99,7 @@ describe('adaptPostgresConnection works for ', () => {
             "poolSettings": {
               "connectionLifetime": undefined,
               "idleTimeout": undefined,
+              "maxConnections": undefined,
               "poolTimeout": undefined,
               "retries": undefined,
               "totalMaxConnections": undefined,

frontend/libs/console/legacy-ce/src/lib/features/ConnectDBRedesign/components/ConnectPostgresWidget/utils/adaptResponse.ts

@@ -43,6 +43,7 @@ export const adaptPostgresConnectionInfo = (
     databaseUrl: adaptDatabaseUrl(connectionInfo.database_url),
     poolSettings: {
       totalMaxConnections: connectionInfo.pool_settings?.total_max_connections,
+      maxConnections: connectionInfo.pool_settings?.max_connections,
       idleTimeout: connectionInfo.pool_settings?.idle_timeout,
       retries: connectionInfo.pool_settings?.retries,
       poolTimeout: connectionInfo.pool_settings?.pool_timeout,

frontend/libs/console/legacy-ce/src/lib/features/ConnectDBRedesign/components/ConnectPostgresWidget/utils/generateRequests.ts

@@ -24,6 +24,7 @@ export const generateConnectionInfo = (
         },
   pool_settings: {
     total_max_connections: values.poolSettings?.totalMaxConnections,
+    max_connections: values.poolSettings?.maxConnections,
     idle_timeout: values.poolSettings?.idleTimeout,
     retries: values.poolSettings?.retries,
     pool_timeout: values.poolSettings?.poolTimeout,

frontend/libs/console/legacy-ce/src/lib/features/ConnectDBRedesign/mocks/data.mock.ts

@@ -35,6 +35,7 @@ export const mockMetadata: Metadata = {
               pool_timeout: 300,
               retries: 400,
               total_max_connections: 500,
+              max_connections: 500,
             },
             use_prepared_statements: true,
           },