change: [UIE-7308] - refactoring

linode · Mar 18, 2024 · c135d39 · c135d39
1 parent 423427e
commit c135d39
Show file tree

Hide file tree

Showing 10 changed files with 67 additions and 157 deletions.
diff --git a/packages/manager/src/features/Databases/DatabaseDetail/DatabaseResize/DatabaseResize.tsx b/packages/manager/src/features/Databases/DatabaseDetail/DatabaseResize/DatabaseResize.tsx
@@ -1,4 +1,3 @@
-// import { LinodeTypeClass } from '@linode/api-v4';
 import {
   Database,
   DatabaseClusterSizeObject,
@@ -82,7 +81,7 @@ export const DatabaseResize = ({ database }: Props) => {
 
   const resizeDescription = (
     <>
-      <Typography variant="h2">Resizing a Database Cluster</Typography>
+      <Typography variant="h2">Resize a Database Cluster</Typography>
       <Typography sx={{ marginTop: '4px' }}>
         Adapt the cluster to your needs by resizing to a larger plan. Clusters
         cannot be resized to smaller plans.
@@ -228,7 +227,7 @@ export const DatabaseResize = ({ database }: Props) => {
           currentPlanHeading={currentPlan?.heading}
           data-qa-select-plan
           disabledPlanTypes={disabledPlans}
-          disabledPlanTypesToolTip="Resizing to smaller plans is not supported."
+          disabledPlanTypesToolTipText="Resizing to smaller plans is not supported."
           header="Choose a Plan"
           onSelect={(selected: string) => setPlanSelected(selected)}
           selectedId={planSelected}

diff --git a/...tures/Databases/DatabaseDetail/DatabaseResize/DatabaseResizeCurrentConfiguration.style.ts b/...tures/Databases/DatabaseDetail/DatabaseResize/DatabaseResizeCurrentConfiguration.style.ts
@@ -46,3 +46,12 @@ export const StyledTitleTypography = styled(Typography, {
 })(({ theme }) => ({
   marginBottom: theme.spacing(2),
 }));
+
+export const StyledStatusBox = styled(Box, {
+  label: 'StyledStatusBox',
+})(() => ({
+  alignItems: 'center',
+  display: 'inline-flex',
+  textTransform: 'capitalize',
+  verticalAlign: 'sub',
+}));
diff --git a/...c/features/Databases/DatabaseDetail/DatabaseResize/DatabaseResizeCurrentConfiguration.tsx b/...c/features/Databases/DatabaseDetail/DatabaseResize/DatabaseResizeCurrentConfiguration.tsx
@@ -15,26 +15,16 @@ import { useInProgressEvents } from 'src/queries/events/events';
 import { formatStorageUnits } from 'src/utilities/formatStorageUnits';
 import { convertMegabytesTo } from 'src/utilities/unitConversions';
 import { databaseEngineMap } from '../../DatabaseLanding/DatabaseRow';
-import { Theme } from '@mui/material/styles';
-import { makeStyles } from 'tss-react/mui';
 import {
   StyledSummaryBox,
   StyledSummaryTextBox,
   StyledSummaryTextTypography,
   StyledTitleTypography,
+  StyledStatusBox,
 } from './DatabaseResizeCurrentConfiguration.style';
 import { Region } from '@linode/api-v4';
 import { DatabaseStatusDisplay } from '../DatabaseStatusDisplay';
 
-const useStyles = makeStyles()((theme: Theme) => ({
-  status: {
-    alignItems: 'center',
-    display: 'inline-flex',
-    textTransform: 'capitalize',
-    verticalAlign: 'sub',
-  },
-}));
-
 interface Props {
   database: Database;
 }
@@ -50,7 +40,6 @@ export const DatabaseResizeCurrentConfiguration = ({ database }: Props) => {
     isLoading: typesLoading,
   } = useDatabaseTypesQuery();
   const theme = useTheme();
-  const { classes } = useStyles();
   const { data: regions } = useRegionsQuery();
 
   const region = regions?.find((r: Region) => r.id === database.region);
@@ -96,9 +85,9 @@ export const DatabaseResizeCurrentConfiguration = ({ database }: Props) => {
         <Box key={'status-version'} paddingRight={6}>
           <StyledSummaryTextBox>
             <span style={{ fontFamily: theme.font.bold }}>Status</span>{' '}
-            <div className={classes.status}>
+            <StyledStatusBox>
               <DatabaseStatusDisplay events={events} database={database} />
-            </div>
+            </StyledStatusBox>
           </StyledSummaryTextBox>
           <StyledSummaryTextTypography>
             <span style={{ fontFamily: theme.font.bold }}>Version</span>{' '}

diff --git a/packages/manager/src/features/Databases/DatabaseDetail/DatabaseStatusDisplay.test.tsx b/packages/manager/src/features/Databases/DatabaseDetail/DatabaseStatusDisplay.test.tsx
@@ -1,128 +1,35 @@
 import React from 'react';
 import { DatabaseStatusDisplay } from '../DatabaseDetail/DatabaseStatusDisplay';
-import { Event } from '@linode/api-v4';
-import { Database, DatabaseInstance } from '@linode/api-v4/lib/databases/types';
 import { mockMatchMedia, renderWithTheme } from 'src/utilities/testHelpers';
-
+import { databaseFactory } from 'src/factories';
+import { entityFactory, eventFactory } from 'src/factories/events';
 beforeAll(() => mockMatchMedia());
 
 describe('DatabaseStatusDisplay component', () => {
-  it('renders status correctly when recent event status is "started" or "scheduled"', () => {
-    const mockEvent: Event[] = [
-      {
-        id: 1,
-        action: 'database_resize',
-        created: '2024-03-11T17:07:03',
-        entity: {
-          id: 7021,
-          type: 'database',
-          label: 'db2',
-          url: '/v4/databases/postgresql/instances/7024',
-        },
-        duration: 164,
-        percent_complete: 50,
-        rate: null,
-        read: false,
-        seen: false,
-        status: 'started',
-        time_remaining: null,
-        username: null,
-        secondary_entity: null,
-        message: null,
-      },
-    ];
-    const database: Database | DatabaseInstance = {
-      id: 7021,
-      label: 'db2',
-      type: 'g6-dedicated-2',
-      engine: 'postgresql',
-      version: '14.6',
-      region: 'us-east',
-      status: 'resizing',
-      port: 5432,
-      encrypted: false,
-      allow_list: [],
-      cluster_size: 3,
-      hosts: {
-        primary: '',
-        secondary: '',
-      },
-      created: '2024-03-11T15:28:10',
-      updated: '2024-03-11T15:30:01',
-      total_disk_size_gb: 0,
-      used_disk_size_gb: 0,
-      updates: {
-        frequency: 'weekly',
-        duration: 3,
-        hour_of_day: 0,
-        day_of_week: 0,
-        week_of_month: null,
-      },
-      instance_uri: '/v4/databases/postgresql/instances/7021',
-    };
+  it(`renders status 'resizing' with percentage when recent event status is 'started' or 'scheduled'`, () => {
+    const mockEvent = eventFactory.build({
+      action: 'database_resize',
+      percent_complete: 50,
+      entity: entityFactory.build({ id: 1, type: 'database' }),
+    });
+    const database = databaseFactory.build({ id: 1, status: 'resizing' });
+
     const { getByText } = renderWithTheme(
-      <DatabaseStatusDisplay events={mockEvent} database={database} />
+      <DatabaseStatusDisplay events={[mockEvent]} database={database} />
     );
-
     expect(getByText('Resizing (50%)')).toBeInTheDocument();
   });
 
-  it('renders status correctly when recent event status is not "started" or "scheduled"', () => {
-    const mockEvent: Event[] = [
-      {
-        id: 1,
-        action: 'database_resize',
-        created: '2024-03-11T17:07:03',
-        entity: {
-          id: 1,
-          type: 'database',
-          label: 'db3',
-          url: '/v4/databases/postgresql/instances/7024',
-        },
-        duration: 164,
-        percent_complete: 50,
-        rate: null,
-        read: false,
-        seen: false,
-        status: 'finished',
-        time_remaining: null,
-        username: null,
-        secondary_entity: null,
-        message: null,
-      },
-    ];
-    const database: Database | DatabaseInstance = {
-      id: 7021,
-      label: 'db2',
-      type: 'g6-dedicated-2',
-      engine: 'postgresql',
-      version: '14.6',
-      region: 'us-east',
-      status: 'active',
-      port: 5432,
-      encrypted: false,
-      allow_list: [],
-      cluster_size: 3,
-      hosts: {
-        primary: '',
-        secondary: '',
-      },
-      created: '2024-03-11T15:28:10',
-      updated: '2024-03-11T15:30:01',
-      total_disk_size_gb: 0,
-      used_disk_size_gb: 0,
-      updates: {
-        frequency: 'weekly',
-        duration: 3,
-        hour_of_day: 0,
-        day_of_week: 0,
-        week_of_month: null,
-      },
-      instance_uri: '/v4/databases/postgresql/instances/7021',
-    };
+  it(`renders status 'active' when recent event status is 'finished' `, () => {
+    const mockEvent = eventFactory.build({
+      action: 'database_resize',
+      status: 'finished',
+      entity: entityFactory.build({ id: 1, type: 'database' }),
+    });
+    const database = databaseFactory.build({ id: 1, status: 'active' });
 
     const { getByText } = renderWithTheme(
-      <DatabaseStatusDisplay events={mockEvent} database={database} />
+      <DatabaseStatusDisplay events={[mockEvent]} database={database} />
     );
 
     expect(getByText('Active')).toBeInTheDocument();

diff --git a/packages/manager/src/features/Databases/DatabaseDetail/DatabaseStatusDisplay.tsx b/packages/manager/src/features/Databases/DatabaseDetail/DatabaseStatusDisplay.tsx
@@ -26,19 +26,16 @@ interface Props {
 }
 export const DatabaseStatusDisplay = (props: Props) => {
   const { events, database } = props;
-  // recent event
   const recentEvent = events?.find(
     (event: Event) =>
       event.entity?.id === database.id && event.entity?.type === 'database'
   );
 
-  // progress
   let progress: number | undefined;
   if (recentEvent?.action === 'database_resize') {
     progress = recentEvent?.percent_complete ?? 0;
   }
 
-  // status
   let displayedStatus;
   if (
     recentEvent?.status === 'started' ||

diff --git a/packages/manager/src/features/Databases/DatabaseDetail/index.tsx b/packages/manager/src/features/Databases/DatabaseDetail/index.tsx
@@ -78,19 +78,16 @@ export const DatabaseDetail = () => {
       routeName: `/databases/${engine}/${id}/backups`,
       title: 'Backups',
     },
+    {
+      routeName: `/databases/${engine}/${id}/resize`,
+      title: 'Resize',
+    },
     {
       routeName: `/databases/${engine}/${id}/settings`,
       title: 'Settings',
     },
   ];
 
-  if (flags.databaseResize) {
-    tabs.push({
-      routeName: `/databases/${engine}/${id}/resize`,
-      title: 'Resize',
-    });
-  }
-
   const getTabIndex = () => {
     const tabChoice = tabs.findIndex((tab) =>
       Boolean(matchPath(tab.routeName, { path: location.pathname }))
@@ -161,14 +158,14 @@ export const DatabaseDetail = () => {
           <SafeTabPanel index={1}>
             <DatabaseBackups />
           </SafeTabPanel>
-          <SafeTabPanel index={2}>
-            <DatabaseSettings database={database} />
-          </SafeTabPanel>
           {flags.databaseResize ? (
-            <SafeTabPanel index={3}>
+            <SafeTabPanel index={2}>
               <DatabaseResize database={database} />
             </SafeTabPanel>
           ) : null}
+          <SafeTabPanel index={3}>
+            <DatabaseSettings database={database} />
+          </SafeTabPanel>
         </TabPanels>
       </Tabs>
     </>

diff --git a/packages/manager/src/features/NotificationCenter/NotificationData/RenderProgressEvent.tsx b/packages/manager/src/features/NotificationCenter/NotificationData/RenderProgressEvent.tsx
@@ -59,7 +59,10 @@ export const RenderProgressEvent = (props: Props) => {
     <>
       <RenderEventStyledBox data-test-id={event.action} display="flex">
         <RenderEventGravatar username={event.username} />
-        <Box data-test-id={event.action} sx={{ marginTop: '-2px' }}>
+        <Box
+          data-test-id={event.action}
+          sx={{ marginTop: '-2px', width: '100%' }}
+        >
           {eventMessage}
           <BarPercent
             className={classes.bar}

diff --git a/packages/manager/src/features/components/PlansPanel/PlanContainer.tsx b/packages/manager/src/features/components/PlansPanel/PlanContainer.tsx
@@ -43,7 +43,7 @@ export interface Props {
   disabled?: boolean;
   disabledClasses?: LinodeTypeClass[];
   disabledPlanTypes?: PlanSelectionType[];
-  disabledPlanTypesToolTip?: string;
+  disabledPlanTypesToolTipText?: string;
   isCreate?: boolean;
   linodeID?: number | undefined;
   onSelect: (key: string) => void;
@@ -60,7 +60,7 @@ export const PlanContainer = (props: Props) => {
     disabled,
     disabledClasses,
     disabledPlanTypes,
-    disabledPlanTypesToolTip,
+    disabledPlanTypesToolTipText,
     isCreate,
     linodeID,
     onSelect,
@@ -109,7 +109,7 @@ export const PlanContainer = (props: Props) => {
           currentPlanHeading={currentPlanHeading}
           disabled={disabled || planIsDisabled}
           disabledClasses={disabledClasses}
-          disabledToolTip={disabledPlanTypesToolTip}
+          disabledToolTip={disabledPlanTypesToolTipText}
           idx={id}
           isCreate={isCreate}
           isPlanSoldOut={disabled ? false : isPlanSoldOut} // no need to add sold out chip if the whole panel is disabled (meaning that the plan isn't available for the selected region)

diff --git a/packages/manager/src/features/components/PlansPanel/PlanSelection.tsx b/packages/manager/src/features/components/PlansPanel/PlanSelection.tsx
@@ -51,14 +51,19 @@ const getDisabledClass = (
   return disabledClasses.includes(typeClass);
 };
 
-const getToolTip = (
-  sizeTooSmall: boolean,
-  planIsDisabled?: boolean,
-  disabledToolTip?: string
-): string | undefined => {
+const getToolTip = ({
+  sizeTooSmall,
+  planIsDisabled,
+  disabledToolTip,
+}: {
+  sizeTooSmall: boolean;
+  planIsDisabled?: boolean;
+  disabledToolTip?: string;
+}) => {
   if (planIsDisabled) {
     return disabledToolTip;
-  } else if (sizeTooSmall) {
+  }
+  if (sizeTooSmall) {
     return 'This plan is too small for the selected image.';
   }
   return undefined;
@@ -84,7 +89,11 @@ export const PlanSelection = (props: PlanSelectionProps) => {
   } = props;
   const diskSize = selectedDiskSize ? selectedDiskSize : 0;
   const planTooSmall = diskSize > type.disk;
-  const tooltip = getToolTip(planTooSmall, planIsDisabled, disabledToolTip);
+  const tooltip = getToolTip({
+    sizeTooSmall: planTooSmall,
+    planIsDisabled: planIsDisabled,
+    disabledToolTip: disabledToolTip,
+  });
   const isSamePlan = type.heading === currentPlanHeading;
   const isGPU = type.class === 'gpu';
   const isDisabledClass = getDisabledClass(type.class, disabledClasses ?? []);

diff --git a/packages/manager/src/features/components/PlansPanel/PlansPanel.tsx b/packages/manager/src/features/components/PlansPanel/PlansPanel.tsx
@@ -36,7 +36,7 @@ interface Props {
   tabbedPanelInnerClass?: string;
   types: PlanSelectionType[];
   disabledPlanTypes?: PlanSelectionType[];
-  disabledPlanTypesToolTip?: string;
+  disabledPlanTypesToolTipText?: string;
 }
 
 export const PlansPanel = (props: Props) => {
@@ -57,7 +57,7 @@ export const PlansPanel = (props: Props) => {
     showTransfer,
     types,
     disabledPlanTypes,
-    disabledPlanTypesToolTip,
+    disabledPlanTypesToolTipText,
   } = props;
 
   const theme = useTheme();
@@ -100,7 +100,7 @@ export const PlansPanel = (props: Props) => {
               selectedRegionId={selectedRegionID}
               showTransfer={showTransfer}
               disabledPlanTypes={disabledPlanTypes}
-              disabledPlanTypesToolTip={disabledPlanTypesToolTip}
+              disabledPlanTypesToolTipText={disabledPlanTypesToolTipText}
             />
           </>
         );