upcoming: [M3-10153, M3-10288] - Update legacy/beta toggle behavior for Metrics, Alerts & Banners in Create/Edit flows

package.json

@@ -51,6 +51,7 @@
     "test:search": "pnpm run --filter @linode/search test",
     "test:ui": "pnpm run --filter @linode/ui test",
     "test:utilities": "pnpm run --filter @linode/utilities test",
+    "test:shared": "pnpm run --filter @linode/shared test",
     "coverage": "pnpm run --filter linode-manager coverage",
     "coverage:summary": "pnpm run --filter linode-manager coverage:summary",
     "cy:run": "pnpm run --filter linode-manager cy:run",

packages/manager/.changeset/pr-12479-upcoming-features-1751892877003.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Upcoming Features
+---
+
+Update legacy/beta toggle behavior for Metrics, Alerts and Banners ([#12479](https://github.com/linode/manager/pull/12479))

packages/manager/src/features/Linodes/AclpPreferenceToggle.test.tsx

@@ -57,7 +57,7 @@ vi.mock('@linode/queries', async () => {
 
 describe('AclpPreferenceToggle', () => {
   /**
-   * ACLP Preference Toggle for Metrics
+   * ACLP Preference Toggle tests for Metrics
    */
   it('should display loading state for Metrics preference correctly', () => {
     queryMocks.usePreferences.mockReturnValue({
@@ -165,110 +165,87 @@ describe('AclpPreferenceToggle', () => {
   });
 
   /**
-   * ACLP Preference Toggle for Alerts
+   * ACLP Preference Toggle tests for Alerts
    */
-  it('should display loading state for Alerts preference correctly', () => {
-    queryMocks.usePreferences.mockReturnValue({
-      data: undefined,
-      isLoading: true,
-    });
-    queryMocks.useMutatePreferences.mockReturnValue({
-      mutateAsync: vi.fn().mockResolvedValue(undefined),
-    });
-
-    renderWithTheme(<AclpPreferenceToggle type="alerts" />);
-
-    const skeleton = screen.getByTestId('alerts-preference-skeleton');
-    expect(skeleton).toBeInTheDocument();
-  });
-
-  it('should display the correct legacy mode banner and button text for Alerts when isAclpAlertsBeta preference is disabled', () => {
-    queryMocks.usePreferences.mockReturnValue({
-      data: false,
-      isLoading: false,
-    });
-
-    renderWithTheme(<AclpPreferenceToggle type="alerts" />);
+  it('should display the correct legacy mode banner and button text for Alerts when isAlertsBetaMode is false', () => {
+    renderWithTheme(
+      <AclpPreferenceToggle
+        isAlertsBetaMode={false}
+        onAlertsModeChange={vi.fn()}
+        type="alerts"
+      />
+    );
 
     // Check if the banner content and button text is correct in legacy mode
     const typography = screen.getByTestId('alerts-preference-banner-text');
     expect(typography).toHaveTextContent(
       expectedAclpPreferences.alerts.legacyModeBannerText
     );
 
-    const expectedLegacyModeButtonText = screen.getByText(
+    const button = screen.getByText(
       expectedAclpPreferences.alerts.legacyModeButtonText
     );
-    expect(expectedLegacyModeButtonText).toBeInTheDocument();
+    expect(button).toBeInTheDocument();
   });
 
-  it('should display the correct beta mode banner and button text for Alerts when isAclpAlertsBeta preference is enabled', () => {
-    queryMocks.usePreferences.mockReturnValue({
-      data: expectedAclpPreferences.alerts.preference,
-      isLoading: false,
-    });
-
-    renderWithTheme(<AclpPreferenceToggle type="alerts" />);
+  it('should display the correct beta mode banner and button text for Alerts when isAlertsBetaMode is true', () => {
+    renderWithTheme(
+      <AclpPreferenceToggle
+        isAlertsBetaMode={true}
+        onAlertsModeChange={vi.fn()}
+        type="alerts"
+      />
+    );
 
     // Check if the banner content and button text is correct in beta mode
     const typography = screen.getByTestId('alerts-preference-banner-text');
     expect(typography).toHaveTextContent(
       expectedAclpPreferences.alerts.betaModeBannertext
     );
 
-    const expectedLegacyModeButtonText = screen.getByText(
+    const button = screen.getByText(
       expectedAclpPreferences.alerts.betaModeButtonText
     );
-    expect(expectedLegacyModeButtonText).toBeInTheDocument();
+    expect(button).toBeInTheDocument();
   });
 
-  it('should update ACLP Alerts preference to beta mode when toggling from legacy mode', async () => {
-    queryMocks.usePreferences.mockReturnValue({
-      data: false,
-      isLoading: false,
-    });
-    const mockUpdatePreferences = vi.fn().mockResolvedValue({
-      isAclpMetricsBeta: false,
-    });
-    queryMocks.useMutatePreferences.mockReturnValue({
-      mutateAsync: mockUpdatePreferences,
-    });
+  it('should call onAlertsModeChange with true when switching from legacy to beta mode', async () => {
+    const mockSetIsAclpBetaLocal = vi.fn();
 
-    renderWithTheme(<AclpPreferenceToggle type="alerts" />);
+    renderWithTheme(
+      <AclpPreferenceToggle
+        isAlertsBetaMode={false}
+        onAlertsModeChange={mockSetIsAclpBetaLocal}
+        type="alerts"
+      />
+    );
 
     // Click the button to switch from legacy to beta
     const button = screen.getByText(
       expectedAclpPreferences.alerts.legacyModeButtonText
     );
     await userEvent.click(button);
 
-    expect(mockUpdatePreferences).toHaveBeenCalledWith({
-      isAclpAlertsBeta: true,
-    });
+    expect(mockSetIsAclpBetaLocal).toHaveBeenCalledWith(true);
   });
 
-  it('should update ACLP Alerts preference to legacy mode when toggling from beta mode', async () => {
-    queryMocks.usePreferences.mockReturnValue({
-      data: expectedAclpPreferences.alerts.preference,
-      isLoading: false,
-    });
-    const mockUpdatePreferences = vi.fn().mockResolvedValue({
-      isAclpMetricsBeta: true,
-    });
-    queryMocks.useMutatePreferences.mockReturnValue({
-      mutateAsync: mockUpdatePreferences,
-    });
+  it('should call onAlertsModeChange with false when switching from beta to legacy mode', async () => {
+    const mockSetIsAclpBetaLocal = vi.fn();
 
-    renderWithTheme(<AclpPreferenceToggle type="alerts" />);
+    renderWithTheme(
+      <AclpPreferenceToggle
+        isAlertsBetaMode={true}
+        onAlertsModeChange={mockSetIsAclpBetaLocal}
+        type="alerts"
+      />
+    );
 
     // Click the button to switch from beta to legacy
     const button = screen.getByText(
       expectedAclpPreferences.alerts.betaModeButtonText
     );
     await userEvent.click(button);
 
-    expect(mockUpdatePreferences).toHaveBeenCalledWith({
-      isAclpAlertsBeta: false,
-    });
+    expect(mockSetIsAclpBetaLocal).toHaveBeenCalledWith(false);
   });
 });

packages/manager/src/features/Linodes/AclpPreferenceToggle.tsx

@@ -5,29 +5,32 @@ import React, { type JSX } from 'react';
 import { DismissibleBanner } from 'src/components/DismissibleBanner/DismissibleBanner';
 import { Skeleton } from 'src/components/Skeleton';
 
-import type { ManagerPreferences } from '@linode/utilities';
-
 export interface AclpPreferenceToggleType {
+  /**
+   * Alerts toggle state. Use only when type is `alerts`
+   */
+  isAlertsBetaMode?: boolean;
+  /**
+   * Handler for alerts toggle. Use only when type is `alerts`
+   */
+  onAlertsModeChange?: (isBeta: boolean) => void;
+  /**
+   * Toggle type: `alerts` or `metrics`
+   */
   type: 'alerts' | 'metrics';
 }
 
 interface PreferenceConfigItem {
   getBannerText: (isBeta: boolean | undefined) => JSX.Element;
   getButtonText: (isBeta: boolean | undefined) => string;
   preferenceKey: string;
-  updateKey: keyof ManagerPreferences;
-  usePreferenceSelector: (
-    preferences: ManagerPreferences | undefined
-  ) => boolean | undefined;
 }
 
 const preferenceConfig: Record<
   AclpPreferenceToggleType['type'],
   PreferenceConfigItem
 > = {
   metrics: {
-    usePreferenceSelector: (preferences) => preferences?.isAclpMetricsBeta,
-    updateKey: 'isAclpMetricsBeta',
     preferenceKey: 'metrics-preference',
     getButtonText: (isBeta) =>
       isBeta ? 'Switch to legacy Metrics' : 'Try the Metrics (Beta)',
@@ -46,8 +49,6 @@ const preferenceConfig: Record<
       ),
   },
   alerts: {
-    usePreferenceSelector: (preferences) => preferences?.isAclpAlertsBeta,
-    updateKey: 'isAclpAlertsBeta',
     preferenceKey: 'alerts-preference',
     getButtonText: (isBeta) =>
       isBeta ? 'Switch to legacy Alerts' : 'Try Alerts (Beta)',
@@ -66,37 +67,47 @@ const preferenceConfig: Record<
   },
 };
 
-export const AclpPreferenceToggle = ({ type }: AclpPreferenceToggleType) => {
+export const AclpPreferenceToggle = (props: AclpPreferenceToggleType) => {
+  const { isAlertsBetaMode, onAlertsModeChange, type } = props;
+
   const config = preferenceConfig[type];
 
-  const { data: isBeta, isLoading } = usePreferences(
-    config.usePreferenceSelector
-  );
+  // -------------------- Metrics related logic ------------------------
+  const { data: isAclpMetricsBeta, isLoading: isAclpMetricsBetaLoading } =
+    usePreferences((preferences) => {
+      return preferences?.isAclpMetricsBeta;
+    }, type === 'metrics');
 
   const { mutateAsync: updatePreferences } = useMutatePreferences();
 
-  if (isLoading) {
+  if (isAclpMetricsBetaLoading) {
     return (
       <Skeleton
-        data-testid={`${type}-preference-skeleton`}
+        data-testid="metrics-preference-skeleton"
         height="90px"
         sx={(theme) => ({
           marginTop: `-${theme.tokens.spacing.S20}`,
         })}
       />
     );
   }
+  // -------------------------------------------------------------------
+
+  const isBeta = type === 'alerts' ? isAlertsBetaMode : isAclpMetricsBeta;
+  const handleBetaToggle = () => {
+    if (type === 'alerts' && onAlertsModeChange) {
+      onAlertsModeChange(!isBeta);
+    } else {
+      updatePreferences({ isAclpMetricsBeta: !isBeta });
+    }
+  };
 
   return (
     <DismissibleBanner
       actionButton={
         <Button
           buttonType="primary"
-          onClick={() =>
-            updatePreferences({
-              [config.updateKey]: !isBeta,
-            })
-          }
+          onClick={handleBetaToggle}
           sx={{ textTransform: 'none' }}
         >
           {config.getButtonText(isBeta)}

packages/manager/src/features/Linodes/LinodeCreate/Actions.test.tsx

@@ -39,7 +39,7 @@ describe('Actions', () => {
     expect(button).toBeEnabled();
   });
 
-  it("should render a ' View Code Snippets' button", () => {
+  it("should render a 'View Code Snippets' button", () => {
     const { getByText } = renderWithThemeAndHookFormContext({
       component: <Actions />,
     });

packages/manager/src/features/Linodes/LinodeCreate/Actions.tsx

@@ -1,4 +1,3 @@
-import { usePreferences } from '@linode/queries';
 import { Box, Button } from '@linode/ui';
 import { scrollErrorIntoView } from '@linode/utilities';
 import React, { useState } from 'react';
@@ -19,15 +18,16 @@ import {
 
 import type { LinodeCreateFormValues } from './utilities';
 
-export const Actions = () => {
+interface ActionProps {
+  isAlertsBetaMode?: boolean;
+}
+
+export const Actions = ({ isAlertsBetaMode }: ActionProps) => {
   const { params } = useLinodeCreateQueryParams();
   const [isAPIAwarenessModalOpen, setIsAPIAwarenessModalOpen] = useState(false);
 
   const { isLinodeInterfacesEnabled } = useIsLinodeInterfacesEnabled();
   const { aclpBetaServices } = useFlags();
-  const { data: isAclpAlertsPreferenceBeta } = usePreferences(
-    (preferences) => preferences?.isAclpAlertsBeta
-  );
 
   const { formState, getValues, trigger, control } =
     useFormContext<LinodeCreateFormValues>();
@@ -83,7 +83,7 @@ export const Actions = () => {
         payLoad={getLinodeCreatePayload(structuredClone(getValues()), {
           isShowingNewNetworkingUI: isLinodeInterfacesEnabled,
           isAclpIntegration: aclpBetaServices?.linode?.alerts,
-          isAclpAlertsPreferenceBeta,
+          isAclpAlertsPreferenceBeta: isAlertsBetaMode,
         })}
       />
     </Box>

packages/manager/src/features/Linodes/LinodeCreate/AdditionalOptions/AdditionalOptions.tsx

@@ -5,14 +5,22 @@ import React from 'react';
 import { useWatch } from 'react-hook-form';
 
 import { useVMHostMaintenanceEnabled } from 'src/features/Account/utils';
-import { MaintenancePolicy } from 'src/features/Linodes/LinodeCreate/AdditionalOptions/MaintenancePolicy';
 import { useFlags } from 'src/hooks/useFlags';
 
-import { Alerts } from './Alerts/Alerts';
+import { Alerts } from './Alerts';
+import { MaintenancePolicy } from './MaintenancePolicy';
 
 import type { CreateLinodeRequest } from '@linode/api-v4';
 
-export const AdditionalOptions = () => {
+interface AdditionalOptionProps {
+  isAlertsBetaMode: boolean;
+  onAlertsModeChange: (isBeta: boolean) => void;
+}
+
+export const AdditionalOptions = ({
+  onAlertsModeChange,
+  isAlertsBetaMode,
+}: AdditionalOptionProps) => {
   const { aclpBetaServices } = useFlags();
   const { data: regions } = useRegionsQuery();
   const { isVMHostMaintenanceEnabled } = useVMHostMaintenanceEnabled();
@@ -46,7 +54,12 @@ export const AdditionalOptions = () => {
         Additional Options
       </Typography>
       <Stack divider={<Divider />}>
-        {showAlerts && <Alerts />}
+        {showAlerts && (
+          <Alerts
+            isAlertsBetaMode={isAlertsBetaMode}
+            onAlertsModeChange={onAlertsModeChange}
+          />
+        )}
         {isVMHostMaintenanceEnabled && <MaintenancePolicy />}
       </Stack>
     </Paper>