From 8088c8d4fb11b70d9e451fed74ecfe72df9c094c Mon Sep 17 00:00:00 2001
From: jdamore-linode <97627410+jdamore-linode@users.noreply.github.com>
Date: Fri, 9 Feb 2024 09:53:01 -0500
Subject: [PATCH] fix: [M3-7739] - Fix error when enabling backups for Linodes
in regions with $0 price (#10153)
* Fix error when enabling backups for Linodes in regions with $0 price
* Add unit tests for EnableBackupsDialog
---------
Co-authored-by: Mariah Jacobs <114685994+mjac0bs@users.noreply.github.com>
---
.../pr-10153-fixed-1707249479775.md | 5 +
.../LinodeBackup/EnableBackupsDialog.test.tsx | 136 ++++++++++++++++++
.../LinodeBackup/EnableBackupsDialog.tsx | 7 +-
3 files changed, 146 insertions(+), 2 deletions(-)
create mode 100644 packages/manager/.changeset/pr-10153-fixed-1707249479775.md
create mode 100644 packages/manager/src/features/Linodes/LinodesDetail/LinodeBackup/EnableBackupsDialog.test.tsx
diff --git a/packages/manager/.changeset/pr-10153-fixed-1707249479775.md b/packages/manager/.changeset/pr-10153-fixed-1707249479775.md
new file mode 100644
index 00000000000..4de7dd8fc46
--- /dev/null
+++ b/packages/manager/.changeset/pr-10153-fixed-1707249479775.md
@@ -0,0 +1,5 @@
+---
+"@linode/manager": Fixed
+---
+
+Error when enabling backups for Linodes in regions with $0 pricing ([#10153](https://github.com/linode/manager/pull/10153))
diff --git a/packages/manager/src/features/Linodes/LinodesDetail/LinodeBackup/EnableBackupsDialog.test.tsx b/packages/manager/src/features/Linodes/LinodesDetail/LinodeBackup/EnableBackupsDialog.test.tsx
new file mode 100644
index 00000000000..c08be4e4079
--- /dev/null
+++ b/packages/manager/src/features/Linodes/LinodesDetail/LinodeBackup/EnableBackupsDialog.test.tsx
@@ -0,0 +1,136 @@
+import * as React from 'react';
+import { renderWithTheme } from 'src/utilities/testHelpers';
+import { EnableBackupsDialog } from './EnableBackupsDialog';
+import { PRICES_RELOAD_ERROR_NOTICE_TEXT } from 'src/utilities/pricing/constants';
+import { typeFactory } from 'src/factories/types';
+import { linodeFactory } from 'src/factories';
+
+const queryMocks = vi.hoisted(() => ({
+ useLinodeQuery: vi.fn().mockReturnValue({
+ data: undefined,
+ }),
+ useTypeQuery: vi.fn().mockReturnValue({
+ data: undefined,
+ }),
+}));
+
+vi.mock('src/queries/linodes/linodes', async () => {
+ const actual = await vi.importActual('src/queries/linodes/linodes');
+ return {
+ ...actual,
+ useLinodeQuery: queryMocks.useLinodeQuery,
+ };
+});
+
+vi.mock('src/queries/types', async () => {
+ const actual = await vi.importActual('src/queries/types');
+ return {
+ ...actual,
+ useTypeQuery: queryMocks.useTypeQuery,
+ };
+});
+
+describe('EnableBackupsDialog component', () => {
+ beforeEach(() => {
+ queryMocks.useTypeQuery.mockReturnValue({
+ data: typeFactory.build({
+ id: 'mock-linode-type',
+ label: 'Mock Linode Type',
+ addons: {
+ backups: {
+ price: {
+ hourly: 0.004,
+ monthly: 2.5,
+ },
+ region_prices: [
+ {
+ hourly: 0,
+ id: 'es-mad',
+ monthly: 0,
+ },
+ ],
+ },
+ },
+ }),
+ });
+ });
+
+ it('Displays the monthly backup price', async () => {
+ queryMocks.useLinodeQuery.mockReturnValue({
+ data: linodeFactory.build({
+ id: 1,
+ label: 'Mock Linode',
+ type: 'mock-linode-type',
+ region: 'us-east',
+ }),
+ });
+
+ const { findByText } = renderWithTheme(
+
+ );
+
+ // Confirm that the user is warned that they will be billed, and that the correct
+ // price is displayed.
+ expect(
+ await findByText(
+ /Are you sure you want to enable backups on this Linode\?.*/
+ )
+ ).toHaveTextContent(/This will add .* to your monthly bill/);
+ expect(await findByText('$2.50')).toBeVisible();
+ });
+
+ it('Displays the monthly backup price when the price is $0', async () => {
+ queryMocks.useLinodeQuery.mockReturnValue({
+ data: linodeFactory.build({
+ id: 1,
+ label: 'Mock Linode',
+ type: 'mock-linode-type',
+ region: 'es-mad',
+ }),
+ });
+
+ const { getByTestId, findByText, queryByText } = renderWithTheme(
+
+ );
+
+ // Confirm that the user is warned that they will be billed, and that $0.00
+ // is shown.
+ expect(
+ await findByText(
+ /Are you sure you want to enable backups on this Linode\?.*/
+ )
+ ).toHaveTextContent(/This will add .* to your monthly bill/);
+ expect(await findByText('$0.00')).toBeVisible();
+
+ // Confirm that error message is not present.
+ expect(queryByText(PRICES_RELOAD_ERROR_NOTICE_TEXT)).toBeNull();
+
+ // Confirm that "Enable Backups" button is enabled.
+ expect(getByTestId('confirm-enable-backups')).toBeEnabled();
+ });
+
+ it('Displays an error when backup price cannot be determined', async () => {
+ queryMocks.useTypeQuery.mockReturnValue({
+ data: undefined,
+ });
+
+ queryMocks.useLinodeQuery.mockReturnValue({
+ data: linodeFactory.build({
+ id: 1,
+ label: 'Mock Linode',
+ type: 'mock-linode-type',
+ region: 'es-mad',
+ }),
+ });
+
+ const { getByTestId, findByText } = renderWithTheme(
+
+ );
+
+ // Confirm that error message is not present.
+ expect(await findByText(PRICES_RELOAD_ERROR_NOTICE_TEXT)).toBeVisible();
+
+ // Confirm that "Enable Backups" button is disabled.
+ expect(getByTestId('confirm-enable-backups')).toBeDisabled();
+ });
+});
diff --git a/packages/manager/src/features/Linodes/LinodesDetail/LinodeBackup/EnableBackupsDialog.tsx b/packages/manager/src/features/Linodes/LinodesDetail/LinodeBackup/EnableBackupsDialog.tsx
index e30b20a2b97..b4ebb766072 100644
--- a/packages/manager/src/features/Linodes/LinodesDetail/LinodeBackup/EnableBackupsDialog.tsx
+++ b/packages/manager/src/features/Linodes/LinodesDetail/LinodeBackup/EnableBackupsDialog.tsx
@@ -47,6 +47,9 @@ export const EnableBackupsDialog = (props: Props) => {
type,
});
+ const hasBackupsMonthlyPriceError =
+ !backupsMonthlyPrice && backupsMonthlyPrice !== 0;
+
const { enqueueSnackbar } = useSnackbar();
const handleEnableBackups = async () => {
@@ -68,7 +71,7 @@ export const EnableBackupsDialog = (props: Props) => {
{
open={open}
title="Enable backups?"
>
- {backupsMonthlyPrice ? (
+ {!hasBackupsMonthlyPriceError ? (
Are you sure you want to enable backups on this Linode?{` `}
This will add