change: [UIE-7292] - Rename DBaaS "Scale Up" to "Resize" (#10193)

* change: [UIE-7292] - update scale-up to resize * Added changeset: rename scale up to resize * change: [UIE-7292] - delete duplicated changeset * Added changeset: rename scale up to resize * change: [UIE-7292] - rename DatabaseScaleUp and all variables
linode · Feb 23, 2024 · c1457a8 · c1457a8
1 parent 232dd2c
commit c1457a8
Show file tree

Hide file tree

Showing 15 changed files with 84 additions and 75 deletions.
diff --git a/packages/api-v4/.changeset/pr-10193-changed-1708424137596.md b/packages/api-v4/.changeset/pr-10193-changed-1708424137596.md
@@ -0,0 +1,5 @@
+---
+"@linode/api-v4": Changed
+---
+
+rename scale up to resize ([#10193](https://github.com/linode/manager/pull/10193))
diff --git a/packages/api-v4/src/account/types.ts b/packages/api-v4/src/account/types.ts
@@ -287,7 +287,7 @@ export type EventAction =
   | 'community_question_reply'
   | 'credit_card_updated'
   | 'database_low_disk_space'
-  | 'database_scale'
+  | 'database_resize'
   | 'database_backup_restore'
   | 'database_create'
   | 'database_credentials_reset'

diff --git a/packages/manager/.changeset/pr-10193-changed-1708084511111.md b/packages/manager/.changeset/pr-10193-changed-1708084511111.md
@@ -0,0 +1,5 @@
+---
+"@linode/manager": Changed
+---
+
+rename scale up to resize ([#10193](https://github.com/linode/manager/pull/10193))
diff --git a/packages/manager/src/featureFlags.ts b/packages/manager/src/featureFlags.ts
@@ -44,7 +44,7 @@ export interface Flags {
   aclbFullCreateFlow: boolean;
   apiMaintenance: APIMaintenance;
   databaseBeta: boolean;
-  databaseScaleUp: boolean;
+  databaseResize: boolean;
   databases: boolean;
   firewallNodebalancer: boolean;
   ipv6Sharing: boolean;

diff --git a/.../DatabaseScaleUp/DatabaseScaleUp.style.ts → ...il/DatabaseResize/DatabaseResize.style.ts b/.../DatabaseScaleUp/DatabaseScaleUp.style.ts → ...il/DatabaseResize/DatabaseResize.style.ts
@@ -18,8 +18,8 @@ export const StyledGrid = styled(Grid, { label: 'StyledGrid' })(
   })
 );
 
-export const StyledScaleUpButton = styled(Button, {
-  label: 'StyledScaleUpButton',
+export const StyledResizeButton = styled(Button, {
+  label: 'StyledResizeButton',
 })(({ theme }) => ({
   [theme.breakpoints.down('md')]: {
     marginRight: theme.spacing(),

diff --git a/.../DatabaseScaleUp/DatabaseScaleUp.test.tsx → ...il/DatabaseResize/DatabaseResize.test.tsx b/.../DatabaseScaleUp/DatabaseScaleUp.test.tsx → ...il/DatabaseResize/DatabaseResize.test.tsx
@@ -13,7 +13,7 @@ import { makeResourcePage } from 'src/mocks/serverHandlers';
 import { rest, server } from 'src/mocks/testServer';
 import { mockMatchMedia, renderWithTheme } from 'src/utilities/testHelpers';
 
-import { DatabaseScaleUp } from './DatabaseScaleUp';
+import { DatabaseResize } from './DatabaseResize';
 
 const queryClient = new QueryClient();
 const loadingTestId = 'circle-progress';
@@ -23,15 +23,15 @@ afterEach(() => {
   queryClient.clear();
 });
 
-describe('database scale up', () => {
+describe('database resize', () => {
   const database = databaseFactory.build();
   const dedicatedTypes = databaseTypeFactory.buildList(7, {
     class: 'dedicated',
   });
 
   it('should render a loading state', async () => {
     const { getByTestId } = renderWithTheme(
-      <DatabaseScaleUp database={database} />,
+      <DatabaseResize database={database} />,
       {
         queryClient,
       }
@@ -61,7 +61,7 @@ describe('database scale up', () => {
     );
 
     const { getByTestId, getByText } = renderWithTheme(
-      <DatabaseScaleUp database={database} />,
+      <DatabaseResize database={database} />,
       {
         queryClient,
       }
@@ -101,26 +101,26 @@ describe('database scale up', () => {
       );
     });
 
-    it('scale up button should be disabled when no input is provided in the form', async () => {
+    it('resize button should be disabled when no input is provided in the form', async () => {
       const { getByTestId, getByText } = renderWithTheme(
-        <DatabaseScaleUp database={database} />,
+        <DatabaseResize database={database} />,
         {
           queryClient,
         }
       );
       await waitForElementToBeRemoved(getByTestId(loadingTestId));
       expect(
-        getByText(/Scale Up Database Cluster/i).closest('button')
+        getByText(/Resize Database Cluster/i).closest('button')
       ).toHaveAttribute('aria-disabled', 'true');
     });
 
-    it('when a plan is selected, scale up button should be enabled and on click of it, it should show a confirmation dialog', async () => {
-      // Mock route history so the Plan Selection table displays prices without requiring a region in the DB scale up flow.
+    it('when a plan is selected, resize button should be enabled and on click of it, it should show a confirmation dialog', async () => {
+      // Mock route history so the Plan Selection table displays prices without requiring a region in the DB resize flow.
       const history = createMemoryHistory();
-      history.push(`databases/${database.engine}/${database.id}/scale-up`);
+      history.push(`databases/${database.engine}/${database.id}/resize`);
       const { container, getByTestId, getByText } = renderWithTheme(
         <Router history={history}>
-          <DatabaseScaleUp database={database} />
+          <DatabaseResize database={database} />
         </Router>,
         {
           queryClient,
@@ -129,13 +129,13 @@ describe('database scale up', () => {
       await waitForElementToBeRemoved(getByTestId(loadingTestId));
       const getById = queryByAttribute.bind(null, 'id');
       fireEvent.click(getById(container, examplePlanType));
-      const scaleUpButton = getByText(/Scale Up Database Cluster/i);
-      expect(scaleUpButton.closest('button')).toHaveAttribute(
+      const resizeButton = getByText(/Resize Database Cluster/i);
+      expect(resizeButton.closest('button')).toHaveAttribute(
         'aria-disabled',
         'false'
       );
-      fireEvent.click(scaleUpButton);
-      getByText(`Scale up ${database.label}?`);
+      fireEvent.click(resizeButton);
+      getByText(`Resize ${database.label}?`);
     });
   });
 });
diff --git a/...etail/DatabaseScaleUp/DatabaseScaleUp.tsx → ...eDetail/DatabaseResize/DatabaseResize.tsx b/...etail/DatabaseScaleUp/DatabaseScaleUp.tsx → ...eDetail/DatabaseResize/DatabaseResize.tsx
@@ -28,15 +28,15 @@ import {
   StyledGrid,
   StyledPlanSummarySpan,
   StyledPlansPanel,
-  StyledScaleUpButton,
-} from './DatabaseScaleUp.style';
-import { DatabaseScaleUpCurrentConfiguration } from './DatabaseScaleUpCurrentConfiguration';
+  StyledResizeButton,
+} from './DatabaseResize.style';
+import { DatabaseResizeCurrentConfiguration } from './DatabaseResizeCurrentConfiguration';
 
 interface Props {
   database: Database;
 }
 
-export const DatabaseScaleUp = ({ database }: Props) => {
+export const DatabaseResize = ({ database }: Props) => {
   const history = useHistory();
 
   const [planSelected, setPlanSelected] = React.useState<string>();
@@ -46,19 +46,19 @@ export const DatabaseScaleUp = ({ database }: Props) => {
     price: string;
   }>();
   // This will be set to `false` once one of the configuration is selected from available plan. This is used to disable the
-  // "Scale up" button unless there have been changes to the form.
+  // "Resize" button unless there have been changes to the form.
   const [
     shouldSubmitBeDisabled,
     setShouldSubmitBeDisabled,
   ] = React.useState<boolean>(true);
 
   const [
-    isScaleUpConfirmationDialogOpen,
-    setIsScaleUpConfirmationDialogOpen,
+    isResizeConfirmationDialogOpen,
+    setIsResizeConfirmationDialogOpen,
   ] = React.useState(false);
 
   const {
-    error: scaleUpError,
+    error: resizeError,
     isLoading: submitInProgress,
     mutateAsync: updateDatabase,
   } = useDatabaseMutation(database.engine, database.id);
@@ -71,12 +71,12 @@ export const DatabaseScaleUp = ({ database }: Props) => {
 
   const { enqueueSnackbar } = useSnackbar();
 
-  const onScaleUp = () => {
+  const onResize = () => {
     updateDatabase({
       type: planSelected,
     }).then(() => {
       enqueueSnackbar(
-        `Your database cluster ${database.label} is being scaled up.`,
+        `Your database cluster ${database.label} is being resized.`,
         {
           variant: 'info',
         }
@@ -85,12 +85,12 @@ export const DatabaseScaleUp = ({ database }: Props) => {
     });
   };
 
-  const scaleUpDescription = (
+  const resizeDescription = (
     <>
-      <Typography variant="h2">Scaling up a Database Cluster</Typography>
+      <Typography variant="h2">Resize a Database Cluster</Typography>
       <Typography sx={{ marginTop: '4px' }}>
-        Adapt the cluster to your needs by scaling it up. Clusters cannot be
-        scaled down.
+        Adapt the cluster to your needs by resizing to a larger plan. Clusters
+        cannot be resized to smaller plans.
       </Typography>
     </>
   );
@@ -121,29 +121,29 @@ export const DatabaseScaleUp = ({ database }: Props) => {
     <ActionsPanel
       primaryButtonProps={{
         'data-testid': 'button-confirm',
-        label: 'Scale Up',
+        label: 'Resize',
         loading: submitInProgress,
-        onClick: onScaleUp,
+        onClick: onResize,
       }}
       secondaryButtonProps={{
         'data-testid': 'button-cancel',
         label: 'Cancel',
-        onClick: () => setIsScaleUpConfirmationDialogOpen(false),
+        onClick: () => setIsResizeConfirmationDialogOpen(false),
       }}
     />
   );
 
   const costSummary = (
     <Typography sx={{ marginBottom: '10px' }} variant="h3">
-      {`The cost of the scaled-up database is ${summaryText?.price}.`}
+      {`The cost of the resized database is ${summaryText?.price}.`}
     </Typography>
   );
   const confirmationPopUpMessage =
     database.cluster_size === 1 ? (
       <>
         {costSummary}
         <Notice variant="warning">
-          <Typography variant="h3">{`Warning: This operation will cause downtime for your upscaled node cluster.`}</Typography>
+          <Typography variant="h3">{`Warning: This operation will cause downtime for your resized node cluster.`}</Typography>
         </Notice>
       </>
     ) : (
@@ -228,7 +228,7 @@ export const DatabaseScaleUp = ({ database }: Props) => {
   // We don't have a "Nanodes" tab anymore, so use `shared`
   const selectedTypeClass =
     currentPlanClass === 'nanode' ? 'standard' : currentPlanClass;
-  // User cannot switch to different plan type apart from current plan while scaling up a DB cluster. So disable rest of the tabs.
+  // User cannot switch to different plan type apart from current plan while resizing a DB cluster. So disable rest of the tabs.
   const tabsToBeDisabled = typeClasses
     .filter((typeClass) => typeClass !== selectedTypeClass)
     .map((plan) => (plan === 'standard' ? 'shared' : plan));
@@ -242,15 +242,15 @@ export const DatabaseScaleUp = ({ database }: Props) => {
   return (
     <>
       <Paper sx={{ marginTop: 2 }}>
-        {scaleUpDescription}
+        {resizeDescription}
         <Box sx={{ marginTop: 2 }}>
-          <DatabaseScaleUpCurrentConfiguration database={database} />
+          <DatabaseResizeCurrentConfiguration database={database} />
         </Box>
       </Paper>
       <Paper sx={{ marginTop: 2 }}>
         <StyledPlansPanel
           tabDisabledMessage={
-            'You can upscale your cluster only within already selected plan.'
+            'You can resize your cluster only within already selected plan.'
           }
           currentPlanHeading={currentPlan?.heading}
           data-qa-select-plan
@@ -264,23 +264,23 @@ export const DatabaseScaleUp = ({ database }: Props) => {
       </Paper>
       <Paper sx={{ marginTop: 2 }}>{summaryPanel}</Paper>
       <StyledGrid>
-        <StyledScaleUpButton
+        <StyledResizeButton
           onClick={() => {
-            setIsScaleUpConfirmationDialogOpen(true);
+            setIsResizeConfirmationDialogOpen(true);
           }}
           buttonType="primary"
           disabled={shouldSubmitBeDisabled}
           type="submit"
         >
-          Scale Up Database Cluster
-        </StyledScaleUpButton>
+          Resize Database Cluster
+        </StyledResizeButton>
       </StyledGrid>
       <ConfirmationDialog
         actions={confirmationDialogActions}
-        error={scaleUpError?.[0].reason}
-        onClose={() => setIsScaleUpConfirmationDialogOpen(false)}
-        open={isScaleUpConfirmationDialogOpen}
-        title={`Scale up ${database.label}?`}
+        error={resizeError?.[0].reason}
+        onClose={() => setIsResizeConfirmationDialogOpen(false)}
+        open={isResizeConfirmationDialogOpen}
+        title={`Resize ${database.label}?`}
       >
         {confirmationPopUpMessage}
       </ConfirmationDialog>

diff --git a/...abaseScaleUpCurrentConfiguration.style.ts → ...tabaseResizeCurrentConfiguration.style.ts b/...abaseScaleUpCurrentConfiguration.style.ts → ...tabaseResizeCurrentConfiguration.style.ts
diff --git a/...abaseScaleUpCurrentConfiguration.test.tsx → ...tabaseResizeCurrentConfiguration.test.tsx b/...abaseScaleUpCurrentConfiguration.test.tsx → ...tabaseResizeCurrentConfiguration.test.tsx
@@ -7,7 +7,7 @@ import { makeResourcePage } from 'src/mocks/serverHandlers';
 import { rest, server } from 'src/mocks/testServer';
 import { mockMatchMedia, renderWithTheme } from 'src/utilities/testHelpers';
 
-import { DatabaseScaleUpCurrentConfiguration } from './DatabaseScaleUpCurrentConfiguration';
+import { DatabaseResizeCurrentConfiguration } from './DatabaseResizeCurrentConfiguration';
 
 const queryClient = new QueryClient();
 const loadingTestId = 'circle-progress';
@@ -21,7 +21,7 @@ describe('database current configuration section', () => {
   const database = databaseFactory.build();
   it('should render a loading state', async () => {
     const { getByTestId } = renderWithTheme(
-      <DatabaseScaleUpCurrentConfiguration database={database} />,
+      <DatabaseResizeCurrentConfiguration database={database} />,
       {
         queryClient,
       }
@@ -54,7 +54,7 @@ describe('database current configuration section', () => {
     );
 
     const { getByTestId, getByText } = renderWithTheme(
-      <DatabaseScaleUpCurrentConfiguration database={database} />,
+      <DatabaseResizeCurrentConfiguration database={database} />,
       {
         queryClient,
       }

diff --git a/...p/DatabaseScaleUpCurrentConfiguration.tsx → ...ze/DatabaseResizeCurrentConfiguration.tsx b/...p/DatabaseScaleUpCurrentConfiguration.tsx → ...ze/DatabaseResizeCurrentConfiguration.tsx
@@ -22,7 +22,7 @@ import {
   StyledSummaryTextBox,
   StyledSummaryTextTypography,
   StyledTitleTypography,
-} from './DatabaseScaleUpCurrentConfiguration.style';
+} from './DatabaseResizeCurrentConfiguration.style';
 
 interface Props {
   database: Database;
@@ -32,7 +32,7 @@ export const getDatabaseVersionNumber = (
   version: DatabaseInstance['version']
 ) => version.split('/')[1];
 
-export const DatabaseScaleUpCurrentConfiguration = ({ database }: Props) => {
+export const DatabaseResizeCurrentConfiguration = ({ database }: Props) => {
   const {
     data: types,
     error: typesError,

diff --git a/packages/manager/src/features/Databases/DatabaseDetail/index.tsx b/packages/manager/src/features/Databases/DatabaseDetail/index.tsx
@@ -23,9 +23,9 @@ import { getAPIErrorOrDefault } from 'src/utilities/errorUtils';
 const DatabaseSummary = React.lazy(() => import('./DatabaseSummary'));
 const DatabaseBackups = React.lazy(() => import('./DatabaseBackups'));
 const DatabaseSettings = React.lazy(() => import('./DatabaseSettings'));
-const DatabaseScaleUp = React.lazy(() =>
-  import('./DatabaseScaleUp/DatabaseScaleUp').then(({ DatabaseScaleUp }) => ({
-    default: DatabaseScaleUp,
+const DatabaseResize = React.lazy(() =>
+  import('./DatabaseResize/DatabaseResize').then(({ DatabaseResize }) => ({
+    default: DatabaseResize,
   }))
 );
 
@@ -84,10 +84,10 @@ export const DatabaseDetail = () => {
     },
   ];
 
-  if (flags.databaseScaleUp) {
+  if (flags.databaseResize) {
     tabs.push({
-      routeName: `/databases/${engine}/${id}/scale-up`,
-      title: 'Scale Up',
+      routeName: `/databases/${engine}/${id}/resize`,
+      title: 'Resize',
     });
   }
 
@@ -164,9 +164,9 @@ export const DatabaseDetail = () => {
           <SafeTabPanel index={2}>
             <DatabaseSettings database={database} />
           </SafeTabPanel>
-          {flags.databaseScaleUp ? (
+          {flags.databaseResize ? (
             <SafeTabPanel index={3}>
-              <DatabaseScaleUp database={database} />
+              <DatabaseResize database={database} />
             </SafeTabPanel>
           ) : null}
         </TabPanels>

diff --git a/packages/manager/src/features/Events/constants.ts b/packages/manager/src/features/Events/constants.ts
@@ -16,7 +16,7 @@ export const EVENT_ACTIONS: Event['action'][] = [
   'database_delete',
   'database_update_failed',
   'database_update',
-  'database_scale',
+  'database_resize',
   'disk_create',
   'disk_delete',
   'disk_duplicate',