console: fix missing props in ConnectPostgresWidget's read replicas field

PR-URL: https://github.com/hasura/graphql-engine-mono/pull/8147
GitOrigin-RevId: 12aedbb5a7960ccdf26205eb49e0ba48d0c0d4f9

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

@@ -34,12 +34,14 @@ export const DatabaseUrl = ({
       {connectionType === 'databaseUrl' ? (
         <InputField
           name={`${name}.url`}
+          key={`${name}.url`}
           label="Database URL"
           placeholder="postgresql://username:password@hostname:port/postgres"
         />
       ) : connectionType === 'envVar' ? (
         <InputField
           name={`${name}.envVar`}
+          key={`${name}.envVar`}
           label="Environment variable"
           placeholder="HASURA_GRAPHQL_DB_URL_FROM_ENV"
         />

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

@@ -3,7 +3,7 @@ import { InputField } from '../../../../../new-components/Form';
 export const ExtensionSchema = ({ name }: { name: string }) => {
   return (
     <InputField
-      name={`${name}.extensionSchema`}
+      name={name}
       label="Extension Schema"
       placeholder="public"
       tooltip="Name of the schema where the graphql-engine will install database extensions (default: `public`). Specified schema should be present in the search path of the database."

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

@@ -17,7 +17,7 @@ export const IsolationLevel = ({ name }: { name: string }) => {
           label: 'serializable',
         },
       ]}
-      name={`${name}.isolationLevel`}
+      name={name}
       label="Isolation Level"
       tooltip="The transaction isolation level in which the queries made to the source will be run"
     />

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

@@ -4,6 +4,7 @@ import { ComponentStory, ComponentMeta } from '@storybook/react';
 import { z } from 'zod';
 
 import { ReadReplicas } from './ReadReplicas';
+import { connectionInfoSchema } from '../schema';
 
 export default {
   component: ReadReplicas,
@@ -12,10 +13,12 @@ export default {
 export const Primary: ComponentStory<typeof ReadReplicas> = () => (
   <SimpleForm
     onSubmit={data => console.log(data)}
-    schema={z.any()}
+    schema={z.object({
+      readReplicas: z.array(connectionInfoSchema),
+    })}
     options={{}}
   >
-    <ReadReplicas name="rr" hideOptions={[]} />
+    <ReadReplicas name="readReplicas" hideOptions={[]} />
     <br />
     <Button type="submit" className="my-2">
       Submit

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

@@ -3,7 +3,7 @@ import { Button } from '../../../../../new-components/Button';
 import { CardedTable } from '../../../../../new-components/CardedTable';
 import { useState } from 'react';
 import { ConnectionInfoSchema } from '../schema';
-import { FaPlus, FaTrash } from 'react-icons/fa';
+import { FaEdit, FaPlus, FaTrash } from 'react-icons/fa';
 import { IndicatorCard } from '../../../../../new-components/IndicatorCard';
 import {
   areSSLSettingsEnabled,
@@ -32,9 +32,11 @@ export const ReadReplicas = ({
   const { watch, setValue } =
     useFormContext<Record<string, ConnectionInfoSchema[]>>();
 
-  const [mode, setMode] = useState<'idle' | 'add'>('idle');
+  const [mode, setMode] = useState<'idle' | 'add' | 'edit'>('idle');
   const readReplicas = watch(name);
 
+  const [activeRow, setActiveRow] = useState<number>();
+
   return (
     <div className="my-2">
       {!fields?.length ? (
@@ -42,20 +44,29 @@ export const ReadReplicas = ({
       ) : (
         <CardedTable
           columns={['No', 'Read Replica', null]}
-          data={(fields ?? []).map((field, i) => [
+          data={(readReplicas ?? []).map((field, i) => [
             i + 1,
             <div>{getDatabaseConnectionDisplayName(field.databaseUrl)}</div>,
-            <Button
-              size="sm"
-              icon={<FaTrash />}
-              mode="destructive"
-              onClick={() => {
-                setValue(
-                  name,
-                  readReplicas.filter((_, index) => index !== i)
-                );
-              }}
-            />,
+            <div className="flex gap-3 justify-end">
+              <Button
+                size="sm"
+                icon={<FaEdit />}
+                onClick={() => {
+                  setActiveRow(i);
+                  setMode('edit');
+                }}
+              />
+              <Button
+                size="sm"
+                icon={<FaTrash />}
+                onClick={() => {
+                  setValue(
+                    name,
+                    readReplicas.filter((_, index) => index !== i)
+                  );
+                }}
+              />
+            </div>,
           ])}
           showActionCell
         />
@@ -69,6 +80,7 @@ export const ReadReplicas = ({
             append({
               databaseUrl: { connectionType: 'databaseUrl', url: '' },
             });
+            setActiveRow(readReplicas?.length ?? 0);
           }}
           mode="primary"
           icon={<FaPlus />}
@@ -77,10 +89,10 @@ export const ReadReplicas = ({
         </Button>
       )}
 
-      {mode === 'add' && (
+      {(mode === 'add' || mode === 'edit') && (
         <Dialog
           hasBackdrop
-          title="Add Read Replica"
+          title={mode === 'edit' ? 'Edit Read Replica' : 'Add Read Replica'}
           onClose={() => {
             setMode('idle');
           }}
@@ -90,7 +102,7 @@ export const ReadReplicas = ({
           <div className="p-4">
             <div className="bg-white border border-hasGray-300 rounded-md shadow-sm overflow-hidden p-4">
               <DatabaseUrl
-                name={`${name}.${fields?.length - 1}.databaseUrl`}
+                name={`${name}.${activeRow}.databaseUrl`}
                 hideOptions={hideOptions}
               />
             </div>
@@ -103,14 +115,10 @@ export const ReadReplicas = ({
                   </div>
                 }
               >
-                <PoolSettings
-                  name={`${name}.${fields?.length - 1}.poolSettings`}
-                />
-                <IsolationLevel
-                  name={`${name}.${fields?.length - 1}.isolationLevel`}
-                />
+                <PoolSettings name={`${name}.${activeRow}.poolSettings`} />
+                <IsolationLevel name={`${name}.${activeRow}.isolationLevel`} />
                 <UsePreparedStatements
-                  name={`${name}.${fields?.length - 1}.usePreparedStatements`}
+                  name={`${name}.${activeRow}.usePreparedStatements`}
                 />
                 {areSSLSettingsEnabled() && (
                   <Collapsible
@@ -127,9 +135,7 @@ export const ReadReplicas = ({
                       </div>
                     }
                   >
-                    <SslSettings
-                      name={`${name}.${fields?.length - 1}.sslSettings`}
-                    />
+                    <SslSettings name={`${name}.${activeRow}.sslSettings`} />
                   </Collapsible>
                 )}
               </Collapsible>
@@ -137,15 +143,12 @@ export const ReadReplicas = ({
             <Button
               onClick={() => {
                 setMode('idle');
-                setValue(
-                  `${name}.${fields?.length - 1}`,
-                  fields[fields?.length - 1]
-                );
+                setActiveRow(undefined);
               }}
               mode="primary"
               className="my-2"
             >
-              Add Read Replica
+              {mode === 'edit' ? 'Edit Read Replica' : 'Add Read Replica'}
             </Button>
           </div>
         </Dialog>

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

@@ -3,7 +3,7 @@ import { BooleanInput } from './BooleanInput';
 export const UsePreparedStatements = ({ name }: { name: string }) => {
   return (
     <BooleanInput
-      name={`${name}.usePreparedStatements`}
+      name={name}
       label="Use Prepared Statements"
       tooltip="Prepared statements are disabled by default"
     />

frontend/libs/console/legacy-ce/src/lib/features/hasura-metadata-types/source/index.ts

@@ -1,4 +1,9 @@
 export * from './source';
 export * from './table';
 export * from './relationships';
-export type { PostgresConfiguration } from './configuration';
+export {
+  PostgresConfiguration,
+  MssqlConfiguration,
+  BigQueryConfiguration,
+  CitusConfiguration,
+} from './configuration';