upcoming: [M3-9539] - Quotas Tab Beta Chip (#11872)

* save progress

* Add proper colors for secondary styles

* fix test

* Delete old instance of BetaChip

* Changesets

Author: abailly-akamai

packages/manager/.changeset/pr-11872-removed-1742318958886.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Removed
+---
+
+Legacy BetaChip component ([#11872](https://github.com/linode/manager/pull/11872))

packages/manager/.changeset/pr-11872-upcoming-features-1742318903725.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Upcoming Features
+---
+
+Quotas Tab Beta Chip ([#11872](https://github.com/linode/manager/pull/11872))

packages/manager/cypress/component/components/beta-chip.spec.tsx

@@ -1,9 +1,8 @@
+import { BetaChip } from '@linode/ui';
 import * as React from 'react';
 import { checkComponentA11y } from 'support/util/accessibility';
 import { componentTests, visualTests } from 'support/util/components';
 
-import { BetaChip } from 'src/components/BetaChip/BetaChip';
-
 componentTests('BetaChip', () => {
   visualTests((mount) => {
     it('renders "BETA" text indicator with primary color', () => {
@@ -12,7 +11,7 @@ componentTests('BetaChip', () => {
     });
 
     it('renders "BETA" text indicator with default color', () => {
-      mount(<BetaChip color="default" />);
+      mount(<BetaChip color="secondary" />);
       cy.findByText('beta').should('be.visible');
     });
 
@@ -22,7 +21,7 @@ componentTests('BetaChip', () => {
     });
 
     it('passes aXe check with default color', () => {
-      mount(<BetaChip color="default" />);
+      mount(<BetaChip color="secondary" />);
       checkComponentA11y();
     });
   });

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

@@ -1,4 +1,5 @@
 import { useAccount, useProfile } from '@linode/queries';
+import { BetaChip } from '@linode/ui';
 import { createLazyRoute } from '@tanstack/react-router';
 import * as React from 'react';
 import { matchPath, useHistory, useLocation } from 'react-router-dom';
@@ -89,6 +90,7 @@ const AccountLanding = () => {
     ...(showQuotasTab
       ? [
           {
+            chip: <BetaChip color="secondary" />,
             routeName: '/account/quotas',
             title: 'Quotas',
           },

packages/manager/src/components/BetaChip/BetaChip.test.tsx

@@ -1,10 +1,9 @@
-import { CircleProgress, ErrorState, Notice } from '@linode/ui';
+import { BetaChip, CircleProgress, ErrorState, Notice } from '@linode/ui';
 import { useEditableLabelState } from '@linode/utilities';
 import { createLazyRoute } from '@tanstack/react-router';
 import * as React from 'react';
 import { matchPath, useHistory, useParams } from 'react-router-dom';
 
-import { BetaChip } from 'src/components/BetaChip/BetaChip';
 import { DocumentTitleSegment } from 'src/components/DocumentTitle';
 import { LandingHeader } from 'src/components/LandingHeader';
 import { SafeTabPanel } from 'src/components/Tabs/SafeTabPanel';
@@ -115,7 +114,9 @@ export const DatabaseDetail = () => {
 
   if (isMonitorEnabled) {
     tabs.splice(1, 0, {
-      chip: flags.dbaasV2MonitorMetrics?.beta ? <BetaChip /> : null,
+      chip: flags.dbaasV2MonitorMetrics?.beta ? (
+        <BetaChip color="secondary" />
+      ) : null,
       routeName: `/databases/${engine}/${id}/monitor`,
       title: 'Monitor',
     });

packages/manager/src/components/BetaChip/BetaChip.tsx

@@ -0,0 +1,5 @@
+---
+"@linode/ui": Fixed
+---
+
+BetaChip `color` prop ([#11872](https://github.com/linode/manager/pull/11872))

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

@@ -7,24 +7,24 @@ import { renderWithTheme } from '../../utilities/testHelpers';
 import { BetaChip } from './BetaChip';
 
 describe('BetaChip', () => {
-  it('renders with default color', () => {
+  it('renders with default color (primary)', () => {
     const { getByTestId } = renderWithTheme(<BetaChip />);
     const betaChip = getByTestId('betaChip');
     expect(betaChip).toBeInTheDocument();
     expect(betaChip).toHaveStyle('background-color: rgba(0, 0, 0, 0.08)');
   });
 
   it('renders with primary color', () => {
-    const { getByTestId } = renderWithTheme(<BetaChip color="primary" />);
+    const { getByTestId } = renderWithTheme(<BetaChip color="secondary" />);
     const betaChip = getByTestId('betaChip');
     expect(betaChip).toBeInTheDocument();
-    expect(betaChip).toHaveStyle('background-color: rgb(16, 138, 214)');
+    expect(betaChip).toHaveStyle('background-color: rgb(131, 131, 140)');
   });
 
   it('triggers an onClick callback', () => {
     const onClickMock = vi.fn();
     const { getByTestId } = renderWithTheme(
-      <BetaChip color="default" onClick={onClickMock} />
+      <BetaChip color="primary" onClick={onClickMock} />
     );
     const betaChip = getByTestId('betaChip');
     fireEvent.click(betaChip);