Merge branch 'develop' into refactor/begin-react-queryifying-stackscr…

…ipts

packages/api-v4/.changeset/pr-11330-removed-1732610877556.md

@@ -0,0 +1,5 @@
+---
+"@linode/api-v4": Removed
+---
+
+Recently added camelCase rule ([#11330](https://github.com/linode/manager/pull/11330))

packages/api-v4/.eslintrc.json

@@ -49,7 +49,6 @@
     "sonarjs/no-redundant-jump": "warn",
     "sonarjs/no-small-switch": "warn",
     "no-multiple-empty-lines": "error",
-    "camelcase": ["warn", { "properties": "always" }],
     "curly": "warn",
     "sort-keys": "off",
     "comma-dangle": "off",

packages/manager/.changeset/pr-11296-removed-1732128125283.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Removed
+---
+
+`Toggle` component and `ToggleOn` and `ToggleOff` icons (migrated to `ui` package) ([#11296](https://github.com/linode/manager/pull/11296))

packages/manager/.changeset/pr-11309-upcoming-features-1732282296647.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Upcoming Features
+---
+
+Handle JWE token limit of 250 in ACLP UI ([#11309](https://github.com/linode/manager/pull/11309))

packages/manager/.changeset/pr-11317-upcoming-features-1732533936298.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Upcoming Features
+---
+
+Modify `generate12HoursTicks` method in AreaChart `utils.ts`, Remove breakpoint condition in `MetricsDisplay.tsx`, modify `legendHeight` and `xAxisTickCount` in `CloudPulseLineGraph.tsx` ([#11317](https://github.com/linode/manager/pull/11317))

packages/manager/.changeset/pr-11323-tests-1732563014945.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Tests
+---
+
+Add tests for accelerated plans in `plan-selection.spec.ts` ([#11323](https://github.com/linode/manager/pull/11323))

packages/manager/.changeset/pr-11330-removed-1732610901455.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Removed
+---
+
+Recently added camelCase rule ([#11330](https://github.com/linode/manager/pull/11330))

packages/manager/.eslintrc.cjs

@@ -174,7 +174,6 @@ module.exports = {
     '@typescript-eslint/no-unused-vars': 'off',
     '@typescript-eslint/no-use-before-define': 'off',
     'array-callback-return': 'error',
-    camelcase: ['warn', { properties: 'always' }],
     'comma-dangle': 'off', // Prettier and TS both handle and check for this one
     // radix: Codacy considers it as an error, i put it here to fix it before push
     curly: 'warn',

packages/manager/cypress/e2e/core/linodes/plan-selection.spec.ts

@@ -2,16 +2,18 @@
 // Move this to cypress component testing once the setup is complete - see https://github.com/linode/manager/pull/10134
 import { ui } from 'support/ui';
 import {
+  accountFactory,
+  linodeTypeFactory,
   regionFactory,
   regionAvailabilityFactory,
-  linodeTypeFactory,
 } from '@src/factories';
 import { authenticate } from 'support/api/authentication';
 import {
   mockGetRegions,
   mockGetRegionAvailability,
 } from 'support/intercepts/regions';
 import { mockGetLinodeTypes } from 'support/intercepts/linodes';
+import { mockGetAccount } from 'support/intercepts/account';
 import { mockAppendFeatureFlags } from 'support/intercepts/feature-flags';
 
 const mockRegions = [
@@ -84,11 +86,20 @@ const mockGPUType = [
   }),
 ];
 
+const mockAcceleratedType = [
+  linodeTypeFactory.build({
+    id: 'accelerated-1',
+    label: 'accelerated-1',
+    class: 'accelerated',
+  }),
+];
+
 const mockLinodeTypes = [
   ...mockDedicatedLinodeTypes,
   ...mockHighMemoryLinodeTypes,
   ...mockSharedLinodeTypes,
   ...mockGPUType,
+  ...mockAcceleratedType,
 ];
 
 const mockRegionAvailability = [
@@ -397,3 +408,168 @@ describe('displays specific linode plans for GPU', () => {
     });
   });
 });
+
+describe('Linode Accelerated plans', () => {
+  beforeEach(() => {
+    mockGetRegions(mockRegions).as('getRegions');
+    mockGetLinodeTypes(mockLinodeTypes).as('getLinodeTypes');
+    mockGetRegionAvailability(mockRegions[0].id, mockRegionAvailability).as(
+      'getRegionAvailability'
+    );
+  });
+
+  describe('without necessary account capability', () => {
+    beforeEach(() => {
+      mockGetAccount(
+        accountFactory.build({
+          capabilities: [],
+        })
+      ).as('getAccount');
+      mockAppendFeatureFlags({
+        acceleratedPlans: {
+          linodePlans: true,
+          lkePlans: true,
+        },
+      }).as('getFeatureFlags');
+    });
+
+    it('should not render accelerated plans for linodes', () => {
+      cy.visitWithLogin('/linodes/create');
+      cy.wait([
+        '@getRegions',
+        '@getLinodeTypes',
+        '@getAccount',
+        '@getFeatureFlags',
+      ]);
+
+      cy.findByText('Accelerated').should('not.exist');
+    });
+
+    it('should not render accelerated plans for kubernetes', () => {
+      cy.visitWithLogin('/kubernetes/create');
+      cy.wait([
+        '@getRegions',
+        '@getLinodeTypes',
+        '@getAccount',
+        '@getFeatureFlags',
+      ]);
+
+      cy.findByText('Accelerated').should('not.exist');
+    });
+  });
+
+  describe('with necessary account capability', () => {
+    beforeEach(() => {
+      mockGetAccount(
+        accountFactory.build({
+          capabilities: ['NETINT Quadra T1U'],
+        })
+      ).as('getAccount');
+    });
+
+    describe('Linodes plans panel', () => {
+      it('should render Accelerated plans when the feature flag is on', () => {
+        mockAppendFeatureFlags({
+          acceleratedPlans: {
+            linodePlans: true,
+            lkePlans: false,
+          },
+        }).as('getFeatureFlags');
+        cy.visitWithLogin('/linodes/create');
+        cy.wait([
+          '@getRegions',
+          '@getLinodeTypes',
+          '@getAccount',
+          '@getFeatureFlags',
+        ]);
+
+        ui.regionSelect.find().click();
+        ui.regionSelect.findItemByRegionLabel(mockRegions[0].label).click();
+
+        cy.findByText('Accelerated').click();
+        cy.get(linodePlansPanel).within(() => {
+          cy.findAllByRole('alert').should('have.length', 1);
+
+          cy.findByRole('table', {
+            name: 'List of Linode Plans',
+          }).within(() => {
+            cy.findByText('NETINT Quadra T1U').should('be.visible');
+            cy.findAllByRole('row').should('have.length', 2);
+            cy.get('[id="accelerated-1"]').should('be.disabled');
+          });
+        });
+      });
+
+      it('should not render Accelerated plans when the feature flag is off', () => {
+        mockAppendFeatureFlags({
+          acceleratedPlans: {
+            linodePlans: false,
+            lkePlans: false,
+          },
+        }).as('getFeatureFlags');
+        cy.visitWithLogin('/linodes/create');
+        cy.wait([
+          '@getRegions',
+          '@getLinodeTypes',
+          '@getAccount',
+          '@getFeatureFlags',
+        ]);
+
+        // Confirms Accelerated tab does not show up for linodes
+        cy.findByText('Accelerated').should('not.exist');
+      });
+    });
+
+    describe('kubernetes plans panel', () => {
+      it('should render Accelerated plans when the feature flag is on', () => {
+        mockAppendFeatureFlags({
+          acceleratedPlans: {
+            linodePlans: false,
+            lkePlans: true,
+          },
+        }).as('getFeatureFlags');
+        cy.visitWithLogin('/kubernetes/create');
+        cy.wait([
+          '@getRegions',
+          '@getLinodeTypes',
+          '@getAccount',
+          '@getFeatureFlags',
+        ]);
+
+        ui.regionSelect.find().click();
+        ui.regionSelect.findItemByRegionLabel(mockRegions[0].label).click();
+
+        cy.wait(['@getRegionAvailability']);
+
+        cy.findByText('Accelerated').click();
+        cy.get(k8PlansPanel).within(() => {
+          cy.findAllByRole('alert').should('have.length', 1);
+
+          cy.findByRole('table', { name: planSelectionTable }).within(() => {
+            cy.findAllByRole('row').should('have.length', 2);
+            cy.get('[data-qa-plan-row="accelerated-1"]').should('be.visible');
+          });
+        });
+      });
+
+      it('should not render Accelerated plans when the feature flag is off', () => {
+        mockAppendFeatureFlags({
+          acceleratedPlans: {
+            linodePlans: false,
+            lkePlans: false,
+          },
+        }).as('getFeatureFlags');
+        cy.visitWithLogin('/kubernetes/create');
+        cy.wait([
+          '@getRegions',
+          '@getLinodeTypes',
+          '@getAccount',
+          '@getFeatureFlags',
+        ]);
+
+        // Confirms Accelerated tab does not show up for LKE clusters
+        cy.findByText('Accelerated').should('not.exist');
+      });
+    });
+  });
+});

packages/manager/src/MainContent.tsx

@@ -357,7 +357,7 @@ export const MainContent = () => {
                           )}
                           <Route component={VPC} path="/vpcs" />
                           {isACLPEnabled && (
-                          <Route component={CloudPulse} path="/monitor" />
+                            <Route component={CloudPulse} path="/monitor" />
                           )}
                           <Redirect exact from="/" to={defaultRoot} />
                           {/** We don't want to break any bookmarks. This can probably be removed eventually. */}

packages/manager/src/components/AreaChart/AreaChart.tsx

@@ -64,7 +64,7 @@ interface YAxisProps {
   /**
    * The formatter function for the y-axis tick.
    */
-  tickFormat: () => string;
+  tickFormat: (value: number) => string;
 }
 
 export interface AreaChartProps {

packages/manager/src/components/AreaChart/utils.ts

@@ -57,6 +57,10 @@ export const generate12HourTicks = (
   const startTime = data[0].timestamp;
   const endTime = data[data.length - 1].timestamp;
 
+  if (tickCount === 1) {
+    return [(startTime + endTime) / 2];
+  }
+
   // Calculate duration in hours
   const duration = DateTime.fromMillis(endTime, { zone: timezone }).diff(
     DateTime.fromMillis(startTime, { zone: timezone }),

packages/manager/src/components/FormControlLabel.stories.tsx

@@ -1,8 +1,7 @@
-import { Checkbox, Radio } from '@linode/ui';
+import { Checkbox, Radio, Toggle } from '@linode/ui';
 import React from 'react';
 
 import { FormControlLabel } from './FormControlLabel';
-import { Toggle } from './Toggle/Toggle';
 
 import type { Meta, StoryObj } from '@storybook/react';
 

packages/manager/src/features/Account/AutoBackups.tsx

@@ -1,11 +1,10 @@
-import { Accordion, Notice, Typography } from '@linode/ui';
+import { Accordion, Notice, Toggle, Typography } from '@linode/ui';
 import Grid from '@mui/material/Unstable_Grid2';
 import * as React from 'react';
 import { makeStyles } from 'tss-react/mui';
 
 import { FormControlLabel } from 'src/components/FormControlLabel';
 import { Link } from 'src/components/Link';
-import { Toggle } from 'src/components/Toggle/Toggle';
 
 import type { Theme } from '@mui/material/styles';
 

packages/manager/src/features/Account/NetworkHelper.tsx

@@ -1,9 +1,8 @@
-import { Accordion, Typography } from '@linode/ui';
+import { Accordion, Toggle, Typography } from '@linode/ui';
 import Grid from '@mui/material/Unstable_Grid2';
 import * as React from 'react';
 
 import { FormControlLabel } from 'src/components/FormControlLabel';
-import { Toggle } from 'src/components/Toggle/Toggle';
 
 interface Props {
   networkHelperEnabled: boolean;

packages/manager/src/features/Backups/AutoEnroll.tsx

@@ -1,10 +1,9 @@
-import { Notice, Paper, Typography } from '@linode/ui';
+import { Notice, Paper, Toggle, Typography } from '@linode/ui';
 import { styled } from '@mui/material/styles';
 import * as React from 'react';
 
 import { FormControlLabel } from 'src/components/FormControlLabel';
 import { Link } from 'src/components/Link';
-import { Toggle } from 'src/components/Toggle/Toggle';
 
 interface AutoEnrollProps {
   enabled: boolean;

packages/manager/src/features/CloudPulse/Dashboard/CloudPulseDashboard.tsx

@@ -67,7 +67,7 @@ export const CloudPulseDashboard = (props: DashboardProperties) => {
 
   const getJweTokenPayload = (): JWETokenPayLoad => {
     return {
-      resource_ids: resourceList?.map((resource) => Number(resource.id)) ?? [],
+      resource_ids: resources?.map((resource) => Number(resource)) ?? [],
     };
   };
 
@@ -100,11 +100,11 @@ export const CloudPulseDashboard = (props: DashboardProperties) => {
   const {
     data: jweToken,
     isError: isJweTokenError,
-    isLoading: isJweTokenLoading,
+    isFetching: isJweTokenFetching,
   } = useCloudPulseJWEtokenQuery(
     dashboard?.service_type,
     getJweTokenPayload(),
-    Boolean(resourceList)
+    Boolean(resources) && !isDashboardLoading && !isDashboardApiError
   );
 
   if (isDashboardApiError) {
@@ -123,12 +123,7 @@ export const CloudPulseDashboard = (props: DashboardProperties) => {
     return renderErrorState('Error loading the definitions of metrics.');
   }
 
-  if (
-    isMetricDefinitionLoading ||
-    isDashboardLoading ||
-    isResourcesLoading ||
-    isJweTokenLoading
-  ) {
+  if (isMetricDefinitionLoading || isDashboardLoading || isResourcesLoading) {
     return <CircleProgress />;
   }
 
@@ -137,6 +132,7 @@ export const CloudPulseDashboard = (props: DashboardProperties) => {
       additionalFilters={additionalFilters}
       dashboard={dashboard}
       duration={duration}
+      isJweTokenFetching={isJweTokenFetching}
       jweToken={jweToken}
       manualRefreshTimeStamp={manualRefreshTimeStamp}
       metricDefinitions={metricDefinitions}

packages/manager/src/features/CloudPulse/Utils/unitConversion.ts

@@ -166,7 +166,7 @@ export const convertValueToUnit = (value: number, maxUnit: string) => {
   if (convertingValue === 1) {
     return roundTo(value);
   }
-  return value / convertingValue;
+  return roundTo(value / convertingValue);
 };
 
 /**