change: [UIE-8220] - Settings text update

packages/manager/.changeset/pr-11166-changed-1729892043474.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Changed
+---
+
+Database settings text and labels ([#11166](https://github.com/linode/manager/pull/11166))

packages/manager/cypress/e2e/core/databases/resize-database.spec.ts

@@ -154,9 +154,6 @@ describe('Resizing existing clusters', () => {
                   cy.contains(`$${desiredPlanPrice.monthly}/month`).should(
                     'be.visible'
                   );
-                  cy.contains(`$${desiredPlanPrice.hourly}/hour`).should(
-                    'be.visible'
-                  );
                 });
               });
           });

packages/manager/cypress/e2e/core/databases/update-database.spec.ts

@@ -94,7 +94,7 @@ const removeAllowedIp = (allowedIp: string) => {
  * @param existingIps - The number of existing IPs. Optional, default is `0`.
  */
 const manageAccessControl = (allowedIps: string[], existingIps: number = 0) => {
-  cy.findByText('Manage Access Controls').closest('button').click();
+  cy.findByTestId('button-access-control').click();
 
   ui.drawer
     .findByTitle('Manage Access Controls')

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

@@ -35,13 +35,13 @@ describe('Access Controls', () => {
     ['disable', true],
     ['enable', false],
   ])(
-    'should %s "Manage Access Control" button when disabled is %s',
+    'should %s "Manage Access" button when disabled is %s',
     (_, isDisabled) => {
       const database = databaseFactory.build();
       const { getByRole } = renderWithTheme(
         <AccessControls database={database} disabled={isDisabled} />
       );
-      const button = getByRole('button', { name: 'Manage Access Controls' });
+      const button = getByRole('button', { name: 'Manage Access' });
 
       if (isDisabled) {
         expect(button).toBeDisabled();

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

@@ -175,17 +175,18 @@ export const AccessControls = (props: Props) => {
       <div className={classes.topSection}>
         <div className={classes.sectionTitleAndText}>
           <div className={classes.sectionTitle}>
-            <Typography variant="h3">Access Controls</Typography>
+            <Typography variant="h3">Manage Access</Typography>
           </div>
           <div className={classes.sectionText}>{description ?? null}</div>
         </div>
         <Button
           buttonType="primary"
           className={classes.addAccessControlBtn}
+          data-testid="button-access-control"
           disabled={disabled}
           onClick={() => setAddAccessControlDrawerOpen(true)}
         >
-          Manage Access Controls
+          Manage Access
         </Button>
       </div>
       {ipTable(database.allow_list)}

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

@@ -5,19 +5,20 @@ import { databaseFactory } from 'src/factories';
 import { IPv4List } from 'src/factories/databases';
 import { mockMatchMedia, renderWithTheme } from 'src/utilities/testHelpers';
 
-import { DatabaseInstance } from '@linode/api-v4';
 import AccessControls from './AccessControls';
 import AddAccessControlDrawer from './AddAccessControlDrawer';
 
+import type { DatabaseInstance } from '@linode/api-v4';
+
 beforeAll(() => mockMatchMedia());
 
 describe('Add Access Controls drawer', () => {
   const database = databaseFactory.build();
-  const { getByTestId, getByText } = renderWithTheme(
+  const { getByTestId } = renderWithTheme(
     <AccessControls database={database} />
   );
-  const button = getByText('Manage Access Controls');
 
+  const button = getByTestId('button-access-control');
   fireEvent.click(button);
 
   it('Should open when a user clicks the Add Access Controls button', () => {
@@ -28,9 +29,9 @@ describe('Add Access Controls drawer', () => {
   it('Should open with a full list of current inbound sources that are allow listed', async () => {
     const IPv4ListWithMasks = IPv4List.map((ip) => `${ip}/32`);
     const db = {
-      id: 123,
-      engine: 'postgresql',
       allow_list: IPv4ListWithMasks,
+      engine: 'postgresql',
+      id: 123,
     } as DatabaseInstance;
     const { getAllByTestId } = renderWithTheme(
       <AddAccessControlDrawer database={db} onClose={() => null} open={true} />
@@ -47,9 +48,9 @@ describe('Add Access Controls drawer', () => {
 
   it('Should have a disabled Add Inbound Sources button until an inbound source field is touched', () => {
     const db = {
-      id: 123,
-      engine: 'postgresql',
       allow_list: IPv4List,
+      engine: 'postgresql',
+      id: 123,
     } as DatabaseInstance;
     const { getByText } = renderWithTheme(
       <AddAccessControlDrawer database={db} onClose={() => null} open={true} />

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

@@ -12,16 +12,16 @@ describe('DatabaseSettings Component', () => {
     renderWithTheme(<DatabaseSettings database={database} />);
   });
 
-  it('Should render a Paper component with headers for Access Controls, Reseting the Root password, and Deleting the Cluster', () => {
+  it('Should render a Paper component with headers for Manage Access, Reseting the Root password, and Deleting the Cluster', () => {
     const { container, getAllByRole } = renderWithTheme(
       <DatabaseSettings database={database} />
     );
     const paper = container.querySelector('.MuiPaper-root');
     expect(paper).not.toBeNull();
     const headings = getAllByRole('heading');
-    expect(headings[0].textContent).toBe('Access Controls');
-    expect(headings[1].textContent).toBe('Reset Root Password');
-    expect(headings[2].textContent).toBe('Delete Cluster');
+    expect(headings[0].textContent).toBe('Manage Access');
+    expect(headings[1].textContent).toBe('Reset the Root Password');
+    expect(headings[2].textContent).toBe('Delete the Cluster');
   });
 
   it.each([
@@ -33,7 +33,7 @@ describe('DatabaseSettings Component', () => {
     );
     const button1 = getByTitle('Reset Root Password');
     const button2 = getByTitle('Save Changes');
-    const button3 = getByRole('button', { name: 'Manage Access Controls' });
+    const button3 = getByRole('button', { name: 'Manage Access' });
 
     if (isDisabled) {
       expect(button1).toBeDisabled();

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

@@ -75,15 +75,15 @@ export const DatabaseSettings: React.FC<Props> = (props) => {
           descriptiveText={resetRootPasswordCopy}
           disabled={disabled}
           onClick={onResetRootPassword}
-          sectionTitle="Reset Root Password"
+          sectionTitle="Reset the Root Password"
         />
         <Divider spacingBottom={22} spacingTop={28} />
         <DatabaseSettingsMenuItem
           buttonText="Delete Cluster"
           descriptiveText={deleteClusterCopy}
           disabled={Boolean(profile?.restricted)}
           onClick={onDeleteCluster}
-          sectionTitle="Delete Cluster"
+          sectionTitle="Delete the Cluster"
         />
         <Divider spacingBottom={22} spacingTop={28} />
         <MaintenanceWindow

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

@@ -175,11 +175,11 @@ export const MaintenanceWindow = (props: Props) => {
 
   const isLegacy = database.platform === 'rdbms-legacy';
 
-  const typographyDatabase =
-    'Select when you want the required OS and DB engine updates to take place. The maintenance may cause downtime on clusters with less than 3 nodes (non high-availability clusters).';
-
   const typographyLegacyDatabase =
-    "OS and DB engine updates will be performed on the schedule below. Select the frequency, day, and time you'd prefer maintenance to occur.";
+    'Select when you want the required OS and database engine updates to take place. The maintenance may cause downtime on clusters with less than 3 nodes (non high-availability clusters).';
+
+  const typographyDatabase =
+    "OS and database engine updates will be performed on the schedule below. Select the frequency, day, and time you'd prefer maintenance to occur.";
 
   return (
     <form onSubmit={handleSubmit}>
@@ -196,7 +196,7 @@ export const MaintenanceWindow = (props: Props) => {
             </Notice>
           ) : null}
           <Typography className={classes.sectionText}>
-            {isLegacy ? typographyLegacyDatabase : typographyDatabase}
+            {isLegacy ? typographyLegacyDatabase : typographyDatabase}{' '}
             {database.cluster_size !== 3
               ? 'For non-HA plans, expect downtime during this window.'
               : null}
@@ -260,9 +260,9 @@ export const MaintenanceWindow = (props: Props) => {
                   )}
                   disabled={disabled}
                   isClearable={false}
-                  label="Time of Day (UTC)"
+                  label="Time"
                   menuPlacement="top"
-                  name="Time of Day"
+                  name="Time"
                   noMarginTop
                   options={hourSelectionMap}
                   placeholder="Choose a time"

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

@@ -31,6 +31,8 @@ const LEGACY_PLATFORM = 'rdbms-legacy';
 const LEGACY_PRIMARY = 'db-mysql-legacy-primary.net';
 const LEGACY_SECONDARY = 'db-mysql-legacy-secondary.net';
 
+const BUTTON_ACCESS_CONTROLS = 'button-access-control';
+
 const spy = vi.spyOn(utils, 'useIsDatabasesEnabled');
 spy.mockReturnValue({
   isDatabasesEnabled: true,
@@ -119,7 +121,7 @@ describe('Database Summary', () => {
       platform: DEFAULT_PLATFORM,
     }) as Database;
 
-    const { queryAllByText } = renderWithTheme(
+    const { getByTestId, queryAllByText } = renderWithTheme(
       <DatabaseSummary database={database} />
     );
 
@@ -133,7 +135,7 @@ describe('Database Summary', () => {
       expect(queryAllByText(READONLY_HOST_LABEL)).toHaveLength(1);
       expect(queryAllByText(/db-mysql-default-standby.net/)).toHaveLength(1);
 
-      expect(queryAllByText(ACCESS_CONTROLS)).toHaveLength(1);
+      expect(getByTestId(BUTTON_ACCESS_CONTROLS)).toBeInTheDocument();
     });
   });
 
@@ -157,7 +159,7 @@ describe('Database Summary', () => {
       platform: LEGACY_PLATFORM,
     }) as Database;
 
-    const { queryAllByText } = renderWithTheme(
+    const { getByTestId, queryAllByText } = renderWithTheme(
       <DatabaseSummary database={database} />
     );
 
@@ -171,7 +173,7 @@ describe('Database Summary', () => {
       expect(queryAllByText(READONLY_HOST_LABEL)).toHaveLength(0);
       expect(queryAllByText(/db-mysql-legacy-secondary.net/)).toHaveLength(1);
 
-      expect(queryAllByText(ACCESS_CONTROLS)).toHaveLength(1);
+      expect(getByTestId(BUTTON_ACCESS_CONTROLS)).toBeInTheDocument();
     });
   });
 
@@ -195,7 +197,7 @@ describe('Database Summary', () => {
       platform: LEGACY_PLATFORM,
     }) as Database;
 
-    const { queryAllByText } = renderWithTheme(
+    const { getByTestId, queryAllByText } = renderWithTheme(
       <DatabaseSummary database={database} />
     );
 
@@ -209,7 +211,7 @@ describe('Database Summary', () => {
       expect(queryAllByText(READONLY_HOST_LABEL)).toHaveLength(0);
       expect(queryAllByText(/db-mysql-legacy-secondary.net/)).toHaveLength(1);
 
-      expect(queryAllByText(ACCESS_CONTROLS)).toHaveLength(1);
+      expect(getByTestId(BUTTON_ACCESS_CONTROLS)).toBeInTheDocument();
     });
   });
 });