feat: [UIE-8269], [UIE-8290] - DBaaS: Access Controls text update, fi…

…x defaultDB for legacy instances

packages/manager/src/features/Databases/DatabaseCreate/DatabaseCreateAccessControls.test.tsx

@@ -25,7 +25,7 @@ describe('DatabaseCreateAccessControls', () => {
       />
     );
 
-    expect(getAllByText('Add Access Controls')).toHaveLength(1);
+    expect(getAllByText('Manage Access')).toHaveLength(1);
     expect(getAllByTestId('domain-transfer-input')).toHaveLength(1);
     expect(getAllByTestId('button')).toHaveLength(1);
 
@@ -60,7 +60,7 @@ describe('DatabaseCreateAccessControls', () => {
       />
     );
 
-    expect(getAllByText('Add Access Controls')).toHaveLength(1);
+    expect(getAllByText('Manage Access')).toHaveLength(1);
     expect(getAllByTestId('domain-transfer-input')).toHaveLength(3);
     expect(getAllByTestId('button')).toHaveLength(3);
 
@@ -91,7 +91,7 @@ describe('DatabaseCreateAccessControls', () => {
       />
     );
 
-    expect(getAllByText('Add Access Controls')).toHaveLength(1);
+    expect(getAllByText('Manage Access')).toHaveLength(1);
     expect(getAllByTestId('domain-transfer-input')).toHaveLength(1);
     expect(getAllByTestId('button')).toHaveLength(1);
 

packages/manager/src/features/Databases/DatabaseCreate/DatabaseCreateAccessControls.tsx

@@ -12,7 +12,10 @@ import { makeStyles } from 'tss-react/mui';
 
 import { Link } from 'src/components/Link';
 import { MultipleIPInput } from 'src/components/MultipleIPInput/MultipleIPInput';
-import { ipFieldPlaceholder } from 'src/utilities/ipUtils';
+import {
+  ipFieldPlaceholder,
+  ipV6FieldPlaceholder,
+} from 'src/utilities/ipUtils';
 
 import { useIsDatabasesEnabled } from '../utilities';
 
@@ -63,14 +66,14 @@ export const DatabaseCreateAccessControls = (props: Props) => {
   return (
     <Grid>
       <Typography className={classes.header} variant="h2">
-        Add Access Controls
+        Manage Access
       </Typography>
       {isDatabasesV2GA ? (
         <>
           <Typography>
-            Add IPv4 addresses or ranges that should be authorized to access
-            this cluster.
-            <Link to="https://techdocs.akamai.com/cloud-computing/docs/manage-access-controls">
+            Add IPv6 (recommended) or IPv4 addresses or ranges that should be
+            authorized to access this cluster.{' '}
+            <Link to="https://techdocs.akamai.com/cloud-computing/docs/aiven-manage-database#ipv6-support">
               Learn more
             </Link>
             .
@@ -123,13 +126,14 @@ export const DatabaseCreateAccessControls = (props: Props) => {
               value="specific"
             />
             <MultipleIPInput
+              buttonText={ips.length > 1 ? 'Add Another IP' : 'Add an IP'}
               className={classes.multipleIPInput}
               disabled={accessOption === 'none' || disabled}
               ips={ips}
               onBlur={onBlur}
               onChange={onChange}
-              placeholder={ipFieldPlaceholder}
-              title="Allowed IP Address(es) or Range(s)"
+              placeholder={ipV6FieldPlaceholder}
+              title="Allowed IP Addresses or Ranges"
             />
             <FormControlLabel
               control={<Radio />}

packages/manager/src/features/Databases/DatabaseDetail/AddAccessControlDrawer.test.tsx

@@ -1,4 +1,5 @@
 import { fireEvent, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import * as React from 'react';
 
 import { databaseFactory } from 'src/factories';
@@ -46,7 +47,7 @@ describe('Add Access Controls drawer', () => {
     await screen.findByDisplayValue(IPv4ListWithMasks[2]);
   });
 
-  it('Should have a disabled Add Inbound Sources button until an inbound source field is touched', () => {
+  it('Should have a disabled Add Inbound Sources button until an inbound source field is touched', async () => {
     const db = {
       allow_list: IPv4List,
       engine: 'postgresql',
@@ -63,8 +64,8 @@ describe('Add Access Controls drawer', () => {
     // Before making a change to the IP addresses, the "Add Inbound Sources" button should be disabled.
     expect(addAccessControlsButton).toHaveAttribute('aria-disabled', 'true');
 
-    const addAnIPButton = getByText('Add an IP');
-    fireEvent.click(addAnIPButton);
+    const addAnIPButton = getByText('Add Another IP');
+    await userEvent.click(addAnIPButton);
 
     expect(addAccessControlsButton).toHaveAttribute('aria-disabled', 'false');
   });

packages/manager/src/features/Databases/DatabaseDetail/AddAccessControlDrawer.tsx

@@ -5,13 +5,16 @@ import { makeStyles } from 'tss-react/mui';
 
 import { ActionsPanel } from 'src/components/ActionsPanel/ActionsPanel';
 import { Drawer } from 'src/components/Drawer';
+import { Link } from 'src/components/Link';
 import { MultipleIPInput } from 'src/components/MultipleIPInput/MultipleIPInput';
+import { isDefaultDatabase } from 'src/features/Databases/utilities';
 import { enforceIPMasks } from 'src/features/Firewalls/FirewallDetail/Rules/FirewallRuleDrawer.utils';
 import { useDatabaseMutation } from 'src/queries/databases/databases';
 import { handleAPIErrors } from 'src/utilities/formikErrorUtils';
 import {
   extendedIPToString,
   ipFieldPlaceholder,
+  ipV6FieldPlaceholder,
   stringToExtendedIP,
   validateIPs,
 } from 'src/utilities/ipUtils';
@@ -65,6 +68,8 @@ const AddAccessControlDrawer = (props: CombinedProps) => {
     database.id
   );
 
+  const isDefaultDB = isDefaultDatabase(database);
+
   const handleUpdateAccessControlsClick = (
     { _allowList }: Values,
     {
@@ -166,8 +171,11 @@ const AddAccessControlDrawer = (props: CombinedProps) => {
     }
   }, [open, resetForm]);
 
+  const learnMoreLink = isDefaultDB
+    ? 'https://techdocs.akamai.com/cloud-computing/docs/aiven-manage-database#ipv6-support'
+    : 'https://techdocs.akamai.com/cloud-computing/docs/manage-access-controls';
   return (
-    <Drawer onClose={onClose} open={open} title="Manage Access Controls">
+    <Drawer onClose={onClose} open={open} title="Manage Access">
       <React.Fragment>
         {error ? <Notice text={error} variant="error" /> : null}
         {allowListErrors
@@ -180,20 +188,29 @@ const AddAccessControlDrawer = (props: CombinedProps) => {
             ))
           : null}
         <Typography className={classes.instructions} variant="body1">
-          Add, edit, or remove IPv4 addresses and ranges that should be
-          authorized to access your cluster.
+          {isDefaultDB
+            ? 'Add, edit, or remove IPv6 (recommended) or IPv4 addresses or ranges that should be authorized to access your cluster.'
+            : 'Add, edit, or remove IPv4 addresses and ranges that should be authorized to access your cluster.'}{' '}
+          <Link to={learnMoreLink}>Learn more</Link>
         </Typography>
         <form onSubmit={handleSubmit}>
           <MultipleIPInput
+            buttonText={
+              values._allowList && values._allowList.length > 0
+                ? 'Add Another IP'
+                : 'Add an IP'
+            }
+            placeholder={
+              isDefaultDB ? ipV6FieldPlaceholder : ipFieldPlaceholder
+            }
             aria-label="Allowed IP Addresses or Ranges"
             className={classes.ipSelect}
             forDatabaseAccessControls
             inputProps={{ autoFocus: true }}
             ips={values._allowList!}
             onBlur={handleIPBlur}
             onChange={handleIPChange}
-            placeholder={ipFieldPlaceholder}
-            title="Allowed IP Address(es) or Range(s)"
+            title="Allowed IP Addresses or Ranges"
           />
           <ActionsPanel
             primaryButtonProps={{

packages/manager/src/features/Databases/DatabaseDetail/DatabaseSettings/DatabaseSettings.tsx

@@ -32,8 +32,9 @@ export const DatabaseSettings: React.FC<Props> = (props) => {
 
   const accessControlCopy = (
     <Typography>
-      Add or remove IPv4 addresses or ranges that should be authorized to access
-      your cluster.
+      {isDefaultDB
+        ? 'Add or remove IPv6 (recommended) or IPv4 addresses or ranges that should be authorized to access your cluster.'
+        : 'Add or remove IPv4 addresses or ranges that should be authorized to access your cluster.'}
     </Typography>
   );
 

packages/manager/src/features/Databases/DatabaseDetail/DatabaseSummary/DatabaseSummaryConnectionDetails.tsx

@@ -232,7 +232,7 @@ export const DatabaseSummaryConnectionDetails = (props: Props) => {
           <StyledLabelTypography>Database name</StyledLabelTypography>
         </Grid>
         <StyledValueGrid md={8} xs={9}>
-          defaultdb
+          {isLegacy ? database.engine : 'defaultdb'}
         </StyledValueGrid>
         <Grid md={4} xs={3}>
           <StyledLabelTypography>Host</StyledLabelTypography>

packages/manager/src/utilities/ipUtils.ts

@@ -24,6 +24,7 @@ export interface ExtendedIP {
 export const stringToExtendedIP = (ip: string): ExtendedIP => ({ address: ip });
 export const extendedIPToString = (ip: ExtendedIP): string => ip.address;
 export const ipFieldPlaceholder = '192.0.2.1/32';
+export const ipV6FieldPlaceholder = '2600:1401:4000::1726:XXXX';
 
 export const IP_ERROR_MESSAGE = 'Must be a valid IPv4 or IPv6 range.';