From b64a39d6979b16d36643d255922f5fb6289337b7 Mon Sep 17 00:00:00 2001
From: corya-akamai <136115382+corya-akamai@users.noreply.github.com>
Date: Tue, 22 Oct 2024 13:59:00 -0400
Subject: [PATCH] feat: [UIE-8196] - DBaaS create encourage users to add IP
 allow_list (#11124)

---
 ...r-11124-upcoming-features-1729198459249.md |   5 +
 .../MultipleIPInput/MultipleIPInput.test.tsx  |  40 ++++-
 .../MultipleIPInput/MultipleIPInput.tsx       |   5 +
 .../DatabaseCreate/DatabaseCreate.tsx         |  49 +-----
 .../DatabaseCreateAccessControls.test.tsx     | 107 +++++++++++++
 .../DatabaseCreateAccessControls.tsx          | 144 ++++++++++++++++++
 6 files changed, 308 insertions(+), 42 deletions(-)
 create mode 100644 packages/manager/.changeset/pr-11124-upcoming-features-1729198459249.md
 create mode 100644 packages/manager/src/features/Databases/DatabaseCreate/DatabaseCreateAccessControls.test.tsx
 create mode 100644 packages/manager/src/features/Databases/DatabaseCreate/DatabaseCreateAccessControls.tsx

diff --git a/packages/manager/.changeset/pr-11124-upcoming-features-1729198459249.md b/packages/manager/.changeset/pr-11124-upcoming-features-1729198459249.md
new file mode 100644
index 00000000000..1435345c4bb
--- /dev/null
+++ b/packages/manager/.changeset/pr-11124-upcoming-features-1729198459249.md
@@ -0,0 +1,5 @@
+---
+"@linode/manager": Upcoming Features
+---
+
+DBaaS encourage setting access controls during create ([#11124](https://github.com/linode/manager/pull/11124))
diff --git a/packages/manager/src/components/MultipleIPInput/MultipleIPInput.test.tsx b/packages/manager/src/components/MultipleIPInput/MultipleIPInput.test.tsx
index 16c22a2f991..06c123078b4 100644
--- a/packages/manager/src/components/MultipleIPInput/MultipleIPInput.test.tsx
+++ b/packages/manager/src/components/MultipleIPInput/MultipleIPInput.test.tsx
@@ -2,7 +2,6 @@ import { fireEvent } from '@testing-library/react';
 import * as React from 'react';
 
 import { renderWithTheme } from 'src/utilities/testHelpers';
-
 import { MultipleIPInput } from './MultipleIPInput';
 
 const baseProps = {
@@ -52,4 +51,43 @@ describe('MultipleIPInput', () => {
       { address: 'ip3' },
     ]);
   });
+
+  it('should enable all actions by default', async () => {
+    const props = {
+      ...baseProps,
+      ips: [{ address: 'ip1' }, { address: 'ip2' }],
+    };
+    const { getByTestId, getByLabelText, getByText } = renderWithTheme(
+      <MultipleIPInput {...props} />
+    );
+    const ip0 = getByLabelText('domain-transfer-ip-0');
+    const ip1 = getByLabelText('domain-transfer-ip-1');
+    const closeButton = getByTestId('delete-ip-1').closest('button');
+    const addButton = getByText('Add an IP').closest('button');
+
+    expect(ip0).toBeEnabled();
+    expect(ip1).toBeEnabled();
+    expect(closeButton).toBeEnabled();
+    expect(addButton).toBeEnabled();
+  });
+
+  it('should disable all actions', async () => {
+    const props = {
+      ...baseProps,
+      disabled: true,
+      ips: [{ address: 'ip1' }, { address: 'ip2' }],
+    };
+    const { getByTestId, getByLabelText, getByText } = renderWithTheme(
+      <MultipleIPInput {...props} />
+    );
+    const ip0 = getByLabelText('domain-transfer-ip-0');
+    const ip1 = getByLabelText('domain-transfer-ip-1');
+    const closeButton = getByTestId('delete-ip-1').closest('button');
+    const addButton = getByText('Add an IP').closest('button');
+
+    expect(ip0).toBeDisabled();
+    expect(ip1).toBeDisabled();
+    expect(closeButton).toBeDisabled();
+    expect(addButton).toBeDisabled();
+  });
 });
diff --git a/packages/manager/src/components/MultipleIPInput/MultipleIPInput.tsx b/packages/manager/src/components/MultipleIPInput/MultipleIPInput.tsx
index 6d241a3b2df..1d60931b8a1 100644
--- a/packages/manager/src/components/MultipleIPInput/MultipleIPInput.tsx
+++ b/packages/manager/src/components/MultipleIPInput/MultipleIPInput.tsx
@@ -60,6 +60,7 @@ const useStyles = makeStyles()((theme: Theme) => ({
 interface Props {
   buttonText?: string;
   className?: string;
+  disabled?: boolean;
   error?: string;
   forDatabaseAccessControls?: boolean;
   forVPCIPv4Ranges?: boolean;
@@ -78,6 +79,7 @@ export const MultipleIPInput = React.memo((props: Props) => {
   const {
     buttonText,
     className,
+    disabled,
     error,
     forDatabaseAccessControls,
     forVPCIPv4Ranges,
@@ -137,6 +139,7 @@ export const MultipleIPInput = React.memo((props: Props) => {
       buttonType="secondary"
       className={classes.addIP}
       compactX
+      disabled={disabled}
       onClick={addNewInput}
     >
       {buttonText ?? 'Add an IP'}
@@ -184,6 +187,7 @@ export const MultipleIPInput = React.memo((props: Props) => {
             <TextField
               InputProps={{
                 'aria-label': `${title} ip-address-${idx}`,
+                disabled,
                 ...props.inputProps,
               }}
               onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
@@ -206,6 +210,7 @@ export const MultipleIPInput = React.memo((props: Props) => {
             {(idx > 0 || forDatabaseAccessControls || forVPCIPv4Ranges) && (
               <Button
                 className={classes.button}
+                disabled={disabled}
                 onClick={() => removeInput(idx)}
               >
                 <Close data-testid={`delete-ip-${idx}`} />
diff --git a/packages/manager/src/features/Databases/DatabaseCreate/DatabaseCreate.tsx b/packages/manager/src/features/Databases/DatabaseCreate/DatabaseCreate.tsx
index a810aac6ad8..cb092f26b0e 100644
--- a/packages/manager/src/features/Databases/DatabaseCreate/DatabaseCreate.tsx
+++ b/packages/manager/src/features/Databases/DatabaseCreate/DatabaseCreate.tsx
@@ -21,8 +21,6 @@ import { ErrorState } from 'src/components/ErrorState/ErrorState';
 import { FormControl } from 'src/components/FormControl';
 import { FormControlLabel } from 'src/components/FormControlLabel';
 import { LandingHeader } from 'src/components/LandingHeader';
-import { Link } from 'src/components/Link';
-import { MultipleIPInput } from 'src/components/MultipleIPInput/MultipleIPInput';
 import { Notice } from 'src/components/Notice/Notice';
 import { Paper } from 'src/components/Paper';
 import { Radio } from 'src/components/Radio/Radio';
@@ -47,7 +45,7 @@ import { useRegionsQuery } from 'src/queries/regions/regions';
 import { formatStorageUnits } from 'src/utilities/formatStorageUnits';
 import { handleAPIErrors } from 'src/utilities/formikErrorUtils';
 import { getSelectedOptionFromGroupedOptions } from 'src/utilities/getSelectedOptionFromGroupedOptions';
-import { ipFieldPlaceholder, validateIPs } from 'src/utilities/ipUtils';
+import { validateIPs } from 'src/utilities/ipUtils';
 import { scrollErrorIntoViewV2 } from 'src/utilities/scrollErrorIntoViewV2';
 
 import type {
@@ -64,6 +62,7 @@ import type { Theme } from '@mui/material/styles';
 import type { Item } from 'src/components/EnhancedSelect/Select';
 import type { PlanSelectionType } from 'src/features/components/PlansPanel/types';
 import type { ExtendedIP } from 'src/utilities/ipUtils';
+import { DatabaseCreateAccessControls } from './DatabaseCreateAccessControls';
 
 const useStyles = makeStyles()((theme: Theme) => ({
   btnCtn: {
@@ -622,44 +621,12 @@ const DatabaseCreate = () => {
           </FormControl>
         </Grid>
         <Divider spacingBottom={12} spacingTop={26} />
-        <Grid>
-          <Typography style={{ marginBottom: 4 }} variant="h2">
-            Add Access Controls
-          </Typography>
-          <Typography>
-            Add any IPv4 address or range that should be authorized to access
-            this cluster.
-          </Typography>
-          <Typography>
-            By default, all public and private connections are denied.{' '}
-            <Link to="https://techdocs.akamai.com/cloud-computing/docs/manage-access-controls">
-              Learn more
-            </Link>
-            .
-          </Typography>
-          <Typography style={{ marginTop: 16 }}>
-            You can add or modify access controls after your database cluster is
-            active.{' '}
-          </Typography>
-          <Grid style={{ marginTop: 24, maxWidth: 450 }}>
-            {ipErrorsFromAPI
-              ? ipErrorsFromAPI.map((apiError: APIError) => (
-                  <Notice
-                    key={apiError.reason}
-                    text={apiError.reason}
-                    variant="error"
-                  />
-                ))
-              : null}
-            <MultipleIPInput
-              ips={values.allow_list}
-              onBlur={handleIPBlur}
-              onChange={(address) => setFieldValue('allow_list', address)}
-              placeholder={ipFieldPlaceholder}
-              title="Allowed IP Address(es) or Range(s)"
-            />
-          </Grid>
-        </Grid>
+        <DatabaseCreateAccessControls
+          errors={ipErrorsFromAPI}
+          ips={values.allow_list}
+          onBlur={handleIPBlur}
+          onChange={(ips: ExtendedIP[]) => setFieldValue('allow_list', ips)}
+        />
       </Paper>
       <Grid className={classes.btnCtn}>
         <Typography className={classes.createText}>
diff --git a/packages/manager/src/features/Databases/DatabaseCreate/DatabaseCreateAccessControls.test.tsx b/packages/manager/src/features/Databases/DatabaseCreate/DatabaseCreateAccessControls.test.tsx
new file mode 100644
index 00000000000..879986492c9
--- /dev/null
+++ b/packages/manager/src/features/Databases/DatabaseCreate/DatabaseCreateAccessControls.test.tsx
@@ -0,0 +1,107 @@
+import { fireEvent } from '@testing-library/react';
+import React from 'react';
+import { renderWithTheme } from 'src/utilities/testHelpers';
+import { DatabaseCreateAccessControls } from './DatabaseCreateAccessControls';
+import { IsDatabasesEnabled, useIsDatabasesEnabled } from '../utilities';
+
+vi.mock('src/features/Databases/utilities');
+
+describe('DatabaseCreateAccessControls', () => {
+  beforeEach(() => {
+    vi.resetAllMocks();
+  });
+
+  it('Should render enabled', () => {
+    vi.mocked(useIsDatabasesEnabled).mockReturnValue({
+      isDatabasesV2GA: true,
+    } as IsDatabasesEnabled);
+
+    const ips = [{ address: '' }];
+    const { container, getAllByText, getAllByTestId } = renderWithTheme(
+      <DatabaseCreateAccessControls
+        ips={ips}
+        onBlur={() => {}}
+        onChange={() => {}}
+      />
+    );
+
+    expect(getAllByText('Add Access Controls')).toHaveLength(1);
+    expect(getAllByTestId('domain-transfer-input')).toHaveLength(1);
+    expect(getAllByTestId('button')).toHaveLength(1);
+
+    const specificRadio = container.querySelector(
+      '[data-qa-dbaas-radio="Specific"]'
+    );
+    const noneRadio = container.querySelector('[data-qa-dbaas-radio="None"]');
+    const enabledButtons = container.querySelectorAll(
+      '[aria-disabled="false"]'
+    );
+
+    expect(specificRadio).toBeInTheDocument();
+    expect(noneRadio).toBeInTheDocument();
+    expect(enabledButtons).toHaveLength(1);
+  });
+
+  it('Should render ips', () => {
+    vi.mocked(useIsDatabasesEnabled).mockReturnValue({
+      isDatabasesV2GA: true,
+    } as IsDatabasesEnabled);
+
+    const ips = [
+      { address: '1.1.1.1/32' },
+      { address: '2.2.2.2' },
+      { address: '3.3.3.3/128' },
+    ];
+    const { container, getAllByText, getAllByTestId } = renderWithTheme(
+      <DatabaseCreateAccessControls
+        ips={ips}
+        onBlur={() => {}}
+        onChange={() => {}}
+      />
+    );
+
+    expect(getAllByText('Add Access Controls')).toHaveLength(1);
+    expect(getAllByTestId('domain-transfer-input')).toHaveLength(3);
+    expect(getAllByTestId('button')).toHaveLength(3);
+
+    const specificRadio = container.querySelector(
+      '[data-qa-dbaas-radio="Specific"]'
+    );
+    const noneRadio = container.querySelector('[data-qa-dbaas-radio="None"]');
+    const enabledButtons = container.querySelectorAll(
+      '[aria-disabled="false"]'
+    );
+
+    expect(specificRadio).toBeInTheDocument();
+    expect(noneRadio).toBeInTheDocument();
+    expect(enabledButtons).toHaveLength(3);
+  });
+
+  it('Should disable ips', () => {
+    vi.mocked(useIsDatabasesEnabled).mockReturnValue({
+      isDatabasesV2GA: true,
+    } as IsDatabasesEnabled);
+
+    const ips = [{ address: '1.1.1.1/32' }];
+    const { container, getAllByText, getAllByTestId } = renderWithTheme(
+      <DatabaseCreateAccessControls
+        ips={ips}
+        onBlur={() => {}}
+        onChange={() => {}}
+      />
+    );
+
+    expect(getAllByText('Add Access Controls')).toHaveLength(1);
+    expect(getAllByTestId('domain-transfer-input')).toHaveLength(1);
+    expect(getAllByTestId('button')).toHaveLength(1);
+
+    let enabledButtons = container.querySelectorAll('[aria-disabled="false"]');
+    expect(enabledButtons).toHaveLength(1);
+
+    const noneRadio = container.querySelector('[data-qa-dbaas-radio="None"]');
+    fireEvent.click(noneRadio as Element);
+
+    enabledButtons = container.querySelectorAll('[aria-disabled="false"]');
+    expect(enabledButtons).toHaveLength(0);
+  });
+});
diff --git a/packages/manager/src/features/Databases/DatabaseCreate/DatabaseCreateAccessControls.tsx b/packages/manager/src/features/Databases/DatabaseCreate/DatabaseCreateAccessControls.tsx
new file mode 100644
index 00000000000..f1de43bcd2a
--- /dev/null
+++ b/packages/manager/src/features/Databases/DatabaseCreate/DatabaseCreateAccessControls.tsx
@@ -0,0 +1,144 @@
+import type { APIError } from '@linode/api-v4/lib/types';
+import { Theme } from '@mui/material/styles';
+import Grid from '@mui/material/Unstable_Grid2';
+import * as React from 'react';
+import { ChangeEvent, useState } from 'react';
+import { FormControlLabel } from 'src/components/FormControlLabel';
+import { Link } from 'src/components/Link';
+import { MultipleIPInput } from 'src/components/MultipleIPInput/MultipleIPInput';
+import { Notice } from 'src/components/Notice/Notice';
+import { Radio } from 'src/components/Radio/Radio';
+import { RadioGroup } from 'src/components/RadioGroup';
+import { Typography } from 'src/components/Typography';
+import { ExtendedIP, ipFieldPlaceholder } from 'src/utilities/ipUtils';
+import { makeStyles } from 'tss-react/mui';
+import { useIsDatabasesEnabled } from '../utilities';
+
+const useStyles = makeStyles()((theme: Theme) => ({
+  header: {
+    marginBottom: theme.spacing(0.5),
+  },
+  subHeader: {
+    marginTop: theme.spacing(2),
+  },
+  container: {
+    marginTop: theme.spacing(3),
+    maxWidth: 450,
+  },
+  multipleIPInput: {
+    marginLeft: theme.spacing(4),
+  },
+}));
+
+export type AccessOption = 'specific' | 'none';
+
+interface Props {
+  errors?: APIError[];
+  ips: ExtendedIP[];
+  onBlur: (ips: ExtendedIP[]) => void;
+  onChange: (ips: ExtendedIP[]) => void;
+}
+
+export const DatabaseCreateAccessControls = (props: Props) => {
+  const { errors, ips, onBlur, onChange } = props;
+  const { classes } = useStyles();
+  const [accessOption, setAccessOption] = useState<AccessOption>('specific');
+  const { isDatabasesV2GA } = useIsDatabasesEnabled();
+
+  const handleAccessOptionChange = (_: ChangeEvent, value: AccessOption) => {
+    setAccessOption(value);
+    if (value === 'none') {
+      onChange([{ address: '', error: '' }]);
+    }
+  };
+
+  return (
+    <Grid>
+      <Typography className={classes.header} variant="h2">
+        Add Access Controls
+      </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">
+              Learn more
+            </Link>
+            .
+          </Typography>
+          <Typography className={classes.subHeader}>
+            (Note: You can modify access controls after your database cluster is
+            active.)
+          </Typography>
+        </>
+      ) : (
+        <>
+          <Typography>
+            Add any IPv4 address or range that should be authorized to access
+            this cluster.
+          </Typography>
+          <Typography>
+            By default, all public and private connections are denied.{' '}
+            <Link to="https://techdocs.akamai.com/cloud-computing/docs/manage-access-controls">
+              Learn more
+            </Link>
+            .
+          </Typography>
+          <Typography className={classes.subHeader}>
+            You can add or modify access controls after your database cluster is
+            active.{' '}
+          </Typography>
+        </>
+      )}
+      <Grid className={classes.container}>
+        {errors &&
+          errors.map((apiError: APIError) => (
+            <Notice
+              key={apiError.reason}
+              text={apiError.reason}
+              variant="error"
+            />
+          ))}
+        {isDatabasesV2GA ? (
+          <RadioGroup
+            aria-label="type"
+            name="type"
+            onChange={handleAccessOptionChange}
+            value={accessOption}
+          >
+            <FormControlLabel
+              control={<Radio />}
+              data-qa-dbaas-radio="Specific"
+              label="Specific Access (recommended)"
+              value="specific"
+            />
+            <MultipleIPInput
+              className={classes.multipleIPInput}
+              disabled={accessOption === 'none'}
+              ips={ips}
+              onBlur={onBlur}
+              onChange={onChange}
+              placeholder={ipFieldPlaceholder}
+              title="Allowed IP Address(es) or Range(s)"
+            />
+            <FormControlLabel
+              control={<Radio />}
+              data-qa-dbaas-radio="None"
+              label="No Access (Deny connections from all IP addresses)"
+              value="none"
+            />
+          </RadioGroup>
+        ) : (
+          <MultipleIPInput
+            ips={ips}
+            onBlur={onBlur}
+            onChange={onChange}
+            placeholder={ipFieldPlaceholder}
+            title="Allowed IP Address(es) or Range(s)"
+          />
+        )}
+      </Grid>
+    </Grid>
+  );
+};