fix: [M3-8937] - Content shifting on Linode Details summary graphs (l…

…inode#11301) * fix styles * fix more * clean up * changeset * fix graph component regression * fix breakpoint issues --------- Co-authored-by: Banks Nussman <banks@nussman.us>
santoshp210-akamai · Nov 25, 2024 · f16fa7e · f16fa7e
1 parent 1b0733f
commit f16fa7e
Show file tree

Hide file tree

Showing 10 changed files with 219 additions and 328 deletions.
diff --git a/packages/manager/.changeset/pr-11301-fixed-1732202951516.md b/packages/manager/.changeset/pr-11301-fixed-1732202951516.md
@@ -0,0 +1,5 @@
+---
+"@linode/manager": Fixed
+---
+
+Content shifting on Linode Details summary graphs ([#11301](https://github.com/linode/manager/pull/11301))
diff --git a/packages/manager/cypress/e2e/core/cloudpulse/dbaas-widgets-verification.spec.ts b/packages/manager/cypress/e2e/core/cloudpulse/dbaas-widgets-verification.spec.ts
@@ -272,7 +272,7 @@ describe('Integration Tests for DBaaS Dashboard ', () => {
           });
 
           //validate the widget areachart is present
-          cy.findByTestId('areachart-wrapper').within(() => {
+          cy.get('.recharts-responsive-container').within(() => {
             const expectedWidgetValues = getWidgetLegendRowValuesFromResponse(
               metricsAPIResponsePayload,
               testData.title,
@@ -326,7 +326,7 @@ describe('Integration Tests for DBaaS Dashboard ', () => {
           });
 
           //validate the widget areachart is present
-          cy.findByTestId('areachart-wrapper').within(() => {
+          cy.get('.recharts-responsive-container').within(() => {
             const expectedWidgetValues = getWidgetLegendRowValuesFromResponse(
               metricsAPIResponsePayload,
               testData.title,
@@ -397,7 +397,7 @@ describe('Integration Tests for DBaaS Dashboard ', () => {
             .click();
           cy.get('@widget').should('be.visible');
 
-          cy.findByTestId('areachart-wrapper').within(() => {
+          cy.get('.recharts-responsive-container').within(() => {
             const expectedWidgetValues = getWidgetLegendRowValuesFromResponse(
               metricsAPIResponsePayload,
               testData.title,
@@ -429,7 +429,7 @@ describe('Integration Tests for DBaaS Dashboard ', () => {
             .scrollIntoView()
             .click({ force: true });
           cy.get('@widget').should('be.visible');
-          cy.findByTestId('areachart-wrapper').within(() => {
+          cy.get('.recharts-responsive-container').within(() => {
             const expectedWidgetValues = getWidgetLegendRowValuesFromResponse(
               metricsAPIResponsePayload,
               testData.title,

diff --git a/packages/manager/cypress/e2e/core/cloudpulse/linode-widget-verification.spec.ts b/packages/manager/cypress/e2e/core/cloudpulse/linode-widget-verification.spec.ts
@@ -238,7 +238,7 @@ describe('Integration Tests for Linode Dashboard ', () => {
           });
 
           //validate the widget areachart is present
-          cy.findByTestId('areachart-wrapper').within(() => {
+          cy.get('.recharts-responsive-container').within(() => {
             const expectedWidgetValues = getWidgetLegendRowValuesFromResponse(
               metricsAPIResponsePayload,
               testData.title,
@@ -295,7 +295,7 @@ describe('Integration Tests for Linode Dashboard ', () => {
           });
 
           //validate the widget areachart is present
-          cy.findByTestId('areachart-wrapper').within(() => {
+          cy.get('.recharts-responsive-container').within(() => {
             const expectedWidgetValues = getWidgetLegendRowValuesFromResponse(
               metricsAPIResponsePayload,
               testData.title,
@@ -368,7 +368,7 @@ describe('Integration Tests for Linode Dashboard ', () => {
             .should('be.enabled')
             .click();
           cy.get('@widget').should('be.visible');
-          cy.findByTestId('areachart-wrapper').within(() => {
+          cy.get('.recharts-responsive-container').within(() => {
             const expectedWidgetValues = getWidgetLegendRowValuesFromResponse(
               metricsAPIResponsePayload,
               testData.title,
@@ -401,7 +401,7 @@ describe('Integration Tests for Linode Dashboard ', () => {
             .click({ force: true });
           cy.get('@widget').should('be.visible');
 
-          cy.findByTestId('areachart-wrapper').within(() => {
+          cy.get('.recharts-responsive-container').within(() => {
             const expectedWidgetValues = getWidgetLegendRowValuesFromResponse(
               metricsAPIResponsePayload,
               testData.title,

diff --git a/packages/manager/src/components/AreaChart/AreaChart.tsx b/packages/manager/src/components/AreaChart/AreaChart.tsx
@@ -254,7 +254,7 @@ export const AreaChart = (props: AreaChartProps) => {
   };
 
   return (
-    <Box data-testid="areachart-wrapper">
+    <>
       <ResponsiveContainer height={height} width={width}>
         <_AreaChart aria-label={ariaLabel} data={data} margin={margin}>
           <CartesianGrid
@@ -333,7 +333,7 @@ export const AreaChart = (props: AreaChartProps) => {
         timezone={timezone}
         unit={unit}
       />
-    </Box>
+    </>
   );
 };
 

diff --git a/packages/manager/src/features/Linodes/LinodesDetail/LinodeSummary/LinodeSummary.test.tsx b/packages/manager/src/features/Linodes/LinodesDetail/LinodeSummary/LinodeSummary.test.tsx
@@ -7,16 +7,13 @@ import LinodeSummary from './LinodeSummary';
 
 describe('LinodeSummary', () => {
   it('should have a select menu for the graphs', () => {
-    const { getByText } = renderWithTheme(
+    const { getByDisplayValue } = renderWithTheme(
       <MemoryRouter initialEntries={['linode/1']}>
         <Route path="linode/:linodeId">
-          <LinodeSummary
-            isBareMetalInstance={false}
-            linodeCreated="2018-11-01T00:00:00"
-          />
+          <LinodeSummary linodeCreated="2018-11-01T00:00:00" />
         </Route>
       </MemoryRouter>
     );
-    expect(getByText('Last 24 Hours')).toBeInTheDocument();
+    expect(getByDisplayValue('Last 24 Hours')).toBeInTheDocument();
   });
 });