Merge branch 'develop' into M3-8945-update-yup-to-v1

linode · Nov 26, 2024 · b1ee6fb · b1ee6fb
2 parents 3b5eaff + 6abe673
commit b1ee6fb
Show file tree

Hide file tree

Showing 59 changed files with 529 additions and 569 deletions.
diff --git a/docs/PULL_REQUEST_TEMPLATE.md b/docs/PULL_REQUEST_TEMPLATE.md
@@ -48,20 +48,23 @@ Please specify a release date (and environment, if applicable) to guarantee time
 - [ ] ...
 - [ ] ...
 
-## As an Author, I have considered 🤔
-
-- 👀 Doing a self review
-- ❔ Our [contribution guidelines](https://github.com/linode/manager/blob/develop/docs/CONTRIBUTING.md)
-- 🤏 Splitting feature into small PRs
-- ➕ Adding a [changeset](https://github.com/linode/manager/blob/develop/docs/CONTRIBUTING.md#writing-a-changeset)
-- 🧪 Providing/improving test coverage
-- 🔐 Removing all sensitive information from the code and PR description
-- 🚩 Using a feature flag to protect the release
-- 👣 Providing comprehensive reproduction steps
-- 📑 Providing or updating our documentation
-- 🕛 Scheduling a pair reviewing session
-- 📱 Providing mobile support
-- ♿  Providing accessibility support
+<details>
+<summary> Author Checklists </summary>
+
+## As an Author, to speed up the review process, I considered 🤔
+
+👀 Doing a self review
+❔ Our [contribution guidelines](https://github.com/linode/manager/blob/develop/docs/CONTRIBUTING.md)
+🤏 Splitting feature into small PRs
+➕ Adding a [changeset](https://github.com/linode/manager/blob/develop/docs/CONTRIBUTING.md#writing-a-changeset)
+🧪 Providing/improving test coverage
+ 🔐 Removing all sensitive information from the code and PR description
+🚩 Using a feature flag to protect the release
+👣 Providing comprehensive reproduction steps
+📑 Providing or updating our documentation
+🕛 Scheduling a pair reviewing session
+📱 Providing mobile support
+♿  Providing accessibility support
 
 <br/>
 
@@ -73,6 +76,8 @@ Please specify a release date (and environment, if applicable) to guarantee time
 - [ ] TypeScript compilation succeeded without errors
 - [ ] Code passes all linting rules
 
+</details>
+
 ---
 
 ## Commit message and pull request title format standards

diff --git a/packages/manager/.changeset/pr-11294-fixed-1732119319735.md b/packages/manager/.changeset/pr-11294-fixed-1732119319735.md
@@ -0,0 +1,5 @@
+---
+"@linode/manager": Fixed
+---
+
+Table and Chart Legend Spacing ([#11294](https://github.com/linode/manager/pull/11294))
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/.changeset/pr-11316-removed-1732523914805.md b/packages/manager/.changeset/pr-11316-removed-1732523914805.md
@@ -0,0 +1,5 @@
+---
+"@linode/manager": Removed
+---
+
+Move `Accordion` from `manager` to `ui` package ([#11316](https://github.com/linode/manager/pull/11316))
diff --git a/packages/manager/.changeset/pr-11318-upcoming-features-1732533180876.md b/packages/manager/.changeset/pr-11318-upcoming-features-1732533180876.md
@@ -0,0 +1,5 @@
+---
+"@linode/manager": Upcoming Features
+---
+
+As part of creating the PAT token, Enabled a new scope - 'Monitor' within Cloud Manager UI ([#11318](https://github.com/linode/manager/pull/11318))
diff --git a/packages/manager/.changeset/pr-11325-tech-stories-1732566065320.md b/packages/manager/.changeset/pr-11325-tech-stories-1732566065320.md
@@ -0,0 +1,5 @@
+---
+"@linode/manager": Tech Stories
+---
+
+Further improvements to PR template author checklist sections ([#11325](https://github.com/linode/manager/pull/11325))
diff --git a/packages/manager/.changeset/pr-11332-tests-1732639325137.md b/packages/manager/.changeset/pr-11332-tests-1732639325137.md
@@ -0,0 +1,5 @@
+---
+"@linode/manager": Tests
+---
+
+Fix DBaaS unit test flake ([#11332](https://github.com/linode/manager/pull/11332))
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
@@ -55,19 +55,26 @@ interface XAxisProps {
   tickFormat: string;
 
   /**
-   * represents the pixer gap between two x-axis ticks
+   * represents the pixel gap between two x-axis ticks
    */
   tickGap: number;
 }
 
+interface YAxisProps {
+  /**
+   * The formatter function for the y-axis tick.
+   */
+  tickFormat: () => string;
+}
+
 export interface AreaChartProps {
   /**
    * list of areas to be displayed
    */
   areas: AreaProps[];
 
   /**
-   * arialabel for the graph
+   * aria-label for the graph
    */
   ariaLabel: string;
 
@@ -154,6 +161,11 @@ export interface AreaChartProps {
    * non-zero value : this many ticks will be generated based on the starting & ending timestamp in the data
    */
   xAxisTickCount?: number;
+
+  /**
+   * y-axis properties
+   */
+  yAxisProps?: YAxisProps;
 }
 
 export const AreaChart = (props: AreaChartProps) => {
@@ -176,6 +188,7 @@ export const AreaChart = (props: AreaChartProps) => {
     width = '100%',
     xAxis,
     xAxisTickCount,
+    yAxisProps,
   } = props;
 
   const theme = useTheme();
@@ -254,7 +267,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
@@ -277,7 +290,12 @@ export const AreaChart = (props: AreaChartProps) => {
             tickFormatter={xAxisTickFormatter}
             type="number"
           />
-          <YAxis stroke={theme.color.label} tickFormatter={humanizeLargeData} />
+          <YAxis
+            tickFormatter={
+              yAxisProps?.tickFormat ? yAxisProps.tickFormat : humanizeLargeData
+            }
+            stroke={theme.color.label}
+          />
           <Tooltip
             contentStyle={{
               color: theme.tokens.color.Neutrals[70],
@@ -333,7 +351,7 @@ export const AreaChart = (props: AreaChartProps) => {
         timezone={timezone}
         unit={unit}
       />
-    </Box>
+    </>
   );
 };
 

diff --git a/packages/manager/src/components/AreaChart/utils.test.ts b/packages/manager/src/components/AreaChart/utils.test.ts
@@ -31,9 +31,9 @@ describe('tooltipLabelFormatter', () => {
 
 describe('tooltipValueFormatter', () => {
   it('should return the rounded value up to a max of 2 decimals', () => {
-    expect(tooltipValueFormatter(5.434939999999999, ' Kb/s')).toBe('5.43 Kb/s');
-    expect(tooltipValueFormatter(5, ' Kb/s')).toBe('5 Kb/s');
-    expect(tooltipValueFormatter(0.000234, '%')).toBe('0%');
+    expect(tooltipValueFormatter(5.434939999999999, 'Kb/s')).toBe('5.43 Kb/s');
+    expect(tooltipValueFormatter(5, 'Kb/s')).toBe('5 Kb/s');
+    expect(tooltipValueFormatter(0.000234, '%')).toBe('0 %');
   });
 });
 

diff --git a/packages/manager/src/components/AreaChart/utils.ts b/packages/manager/src/components/AreaChart/utils.ts
@@ -16,7 +16,7 @@ export const tooltipLabelFormatter = (timestamp: number, timezone: string) =>
   );
 
 export const tooltipValueFormatter = (value: number, unit: string) =>
-  `${roundTo(value)}${unit}`;
+  `${roundTo(value)} ${unit}`;
 
 export const humanizeLargeData = (value: number) => {
   if (value >= 1000000000000) {

diff --git a/packages/manager/src/components/LineGraph/MetricsDisplay.styles.ts b/packages/manager/src/components/LineGraph/MetricsDisplay.styles.ts
@@ -36,6 +36,7 @@ export const StyledButton = styled(Button, {
   label: 'StyledButton',
   shouldForwardProp: omittedProps(['legendColor', 'hidden']),
 })<{ legendColor?: string }>(({ hidden, legendColor, theme }) => ({
+  padding: 0,
   ...(legendColor && {
     '&:before': {
       backgroundColor: hidden

diff --git a/packages/manager/src/components/LineGraph/MetricsDisplay.test.tsx b/packages/manager/src/components/LineGraph/MetricsDisplay.test.tsx
@@ -86,7 +86,7 @@ describe('CPUMetrics', () => {
       />
     );
 
-    for (const value of ['10.00%', '5.50%', '7.75%']) {
+    for (const value of ['10.00 %', '5.50 %', '7.75 %']) {
       expect(getByText(value)).toBeVisible();
     }
   });

diff --git a/packages/manager/src/components/LineGraph/MetricsDisplay.tsx b/packages/manager/src/components/LineGraph/MetricsDisplay.tsx
@@ -112,15 +112,13 @@ export const MetricsDisplay = ({
   rows,
 }: Props) => (
   <StyledTable
-    sx={(theme) => ({
+    sx={{
       '.MuiTable-root': {
         border: 0,
       },
+      height: legendHeight,
       overflowY: 'auto',
-      [theme.breakpoints.up(1100)]: {
-        height: legendHeight,
-      },
-    })}
+    }}
     aria-label="Stats and metrics"
     stickyHeader
   >

diff --git a/packages/manager/src/components/PrimaryNav/PrimaryNav.styles.ts b/packages/manager/src/components/PrimaryNav/PrimaryNav.styles.ts
@@ -1,10 +1,9 @@
-import { Box, Divider, omittedProps } from '@linode/ui';
+import { Accordion, Box, Divider, omittedProps } from '@linode/ui';
 import { styled } from '@mui/material/styles';
 import Grid from '@mui/material/Unstable_Grid2';
 import { Link } from 'react-router-dom';
 
 import AkamaiLogo from 'src/assets/logo/akamai-logo.svg';
-import { Accordion } from 'src/components/Accordion';
 import { SIDEBAR_WIDTH } from 'src/components/PrimaryNav/SideMenu';
 
 export const StyledGrid = styled(Grid, {

diff --git a/packages/manager/src/components/Table/Table.styles.ts b/packages/manager/src/components/Table/Table.styles.ts
@@ -26,7 +26,6 @@ export const StyledTableWrapper = styled('div', {
       borderRight: `1px solid ${theme.borderColors.borderTable}`,
       borderTop: `1px solid ${theme.borderColors.borderTable}`,
       fontFamily: theme.font.bold,
-      padding: '10px 15px',
     },
   },
   marginBottom: props.spacingBottom !== undefined ? props.spacingBottom : 0,

diff --git a/packages/manager/src/features/Account/AutoBackups.tsx b/packages/manager/src/features/Account/AutoBackups.tsx
@@ -1,9 +1,8 @@
-import { Notice, Typography } from '@linode/ui';
+import { Accordion, Notice, Typography } from '@linode/ui';
 import Grid from '@mui/material/Unstable_Grid2';
 import * as React from 'react';
 import { makeStyles } from 'tss-react/mui';
 
-import { Accordion } from 'src/components/Accordion';
 import { FormControlLabel } from 'src/components/FormControlLabel';
 import { Link } from 'src/components/Link';
 import { Toggle } from 'src/components/Toggle/Toggle';

diff --git a/packages/manager/src/features/Account/CloseAccountSetting.tsx b/packages/manager/src/features/Account/CloseAccountSetting.tsx
@@ -1,8 +1,7 @@
-import { Button } from '@linode/ui';
+import { Accordion, Button } from '@linode/ui';
 import Grid from '@mui/material/Unstable_Grid2';
 import * as React from 'react';
 
-import { Accordion } from 'src/components/Accordion';
 import { useProfile } from 'src/queries/profile/profile';
 
 import CloseAccountDialog from './CloseAccountDialog';

diff --git a/packages/manager/src/features/Account/EnableManaged.tsx b/packages/manager/src/features/Account/EnableManaged.tsx
@@ -1,10 +1,9 @@
 import { enableManaged } from '@linode/api-v4/lib/managed';
-import { Button, Typography } from '@linode/ui';
+import { Accordion, Button, Typography } from '@linode/ui';
 import Grid from '@mui/material/Unstable_Grid2';
 import { useQueryClient } from '@tanstack/react-query';
 import * as React from 'react';
 
-import { Accordion } from 'src/components/Accordion';
 import { ActionsPanel } from 'src/components/ActionsPanel/ActionsPanel';
 import { ConfirmationDialog } from 'src/components/ConfirmationDialog/ConfirmationDialog';
 import { Link } from 'src/components/Link';

diff --git a/packages/manager/src/features/Account/NetworkHelper.tsx b/packages/manager/src/features/Account/NetworkHelper.tsx
@@ -1,8 +1,7 @@
-import { Typography } from '@linode/ui';
+import { Accordion, Typography } from '@linode/ui';
 import Grid from '@mui/material/Unstable_Grid2';
 import * as React from 'react';
 
-import { Accordion } from 'src/components/Accordion';
 import { FormControlLabel } from 'src/components/FormControlLabel';
 import { Toggle } from 'src/components/Toggle/Toggle';
 

diff --git a/packages/manager/src/features/Account/ObjectStorageSettings.tsx b/packages/manager/src/features/Account/ObjectStorageSettings.tsx
@@ -1,4 +1,5 @@
 import {
+  Accordion,
   Box,
   Button,
   CircleProgress,
@@ -9,7 +10,6 @@ import {
 import { enqueueSnackbar } from 'notistack';
 import * as React from 'react';
 
-import { Accordion } from 'src/components/Accordion';
 import { Link } from 'src/components/Link';
 import { TypeToConfirmDialog } from 'src/components/TypeToConfirmDialog/TypeToConfirmDialog';
 import { useAccountSettings } from 'src/queries/account/settings';

diff --git a/packages/manager/src/features/CloudPulse/Widget/components/CloudPulseLineGraph.tsx b/packages/manager/src/features/CloudPulse/Widget/components/CloudPulseLineGraph.tsx
@@ -39,7 +39,7 @@ export const CloudPulseLineGraph = React.memo((props: CloudPulseLineGraph) => {
         <AreaChart
           {...rest}
           fillOpacity={0.5}
-          legendHeight={theme.spacing(16)}
+          legendHeight="150px"
           xAxisTickCount={isSmallScreen ? undefined : 7}
         />
       )}
-Original file line number
+Diff line change
@@ Expand Up / @@ -86,7 +86,7 @@ describe('CPUMetrics', () => { @@
           />
         );
-        for (const value of ['10.00%', '5.50%', '7.75%']) {
+        for (const value of ['10.00 %', '5.50 %', '7.75 %']) {
           expect(getByText(value)).toBeVisible();
         }
       });
@@ Expand Down @@