Feature flag changes

Author: mjac0bs

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

@@ -35,6 +35,7 @@ export const AutoEnroll = (props: AutoEnrollProps) => {
               >
                 Backups pricing page
               </Link>
+              .
             </Typography>
           </StyledDiv>
         }

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

@@ -1,3 +1,4 @@
+import { styled } from '@mui/material';
 import Stack from '@mui/material/Stack';
 import { useSnackbar } from 'notistack';
 import * as React from 'react';
@@ -16,6 +17,7 @@ import { TableRow } from 'src/components/TableRow';
 import { TableRowError } from 'src/components/TableRowError/TableRowError';
 import { TableRowLoading } from 'src/components/TableRowLoading/TableRowLoading';
 import { Typography } from 'src/components/Typography';
+import { useFlags } from 'src/hooks/useFlags';
 import {
   useAccountSettings,
   useMutateAccountSettings,
@@ -32,7 +34,6 @@ import {
   getTotalBackupsPrice,
   useEnableBackupsOnLinodesMutation,
 } from './utils';
-import { styled } from '@mui/material';
 
 interface Props {
   onClose: () => void;
@@ -43,6 +44,8 @@ export const BackupDrawer = (props: Props) => {
   const { onClose, open } = props;
   const { enqueueSnackbar } = useSnackbar();
 
+  const flags = useFlags();
+
   const {
     data: linodes,
     error: linodesError,
@@ -85,6 +88,13 @@ export const BackupDrawer = (props: Props) => {
 
   const linodeCount = linodesWithoutBackups.length;
 
+  const backupsConfirmationHelperText = (
+    <>
+      Confirm to add backups to{' '}
+      <strong>{pluralize('Linode', 'Linodes', linodeCount)}</strong>.
+    </>
+  );
+
   const renderBackupsTable = () => {
     if (linodesLoading || typesLoading || accountSettingsLoading) {
       return <TableRowLoading columns={3} />;
@@ -138,7 +148,12 @@ all new Linodes will automatically be backed up.`
   };
 
   return (
-    <Drawer onClose={onClose} open={open} title="Enable All Backups" wide>
+    <Drawer
+      onClose={onClose}
+      open={open}
+      title="Enable All Backups"
+      wide={flags.dcSpecificPricing}
+    >
       <Stack spacing={2}>
         <Typography variant="body1">
           Three backup slots are executed and rotated automatically: a daily
@@ -147,7 +162,8 @@ all new Linodes will automatically be backed up.`
           <Link to="https://www.linode.com/docs/platform/disk-images/linode-backup-service/">
             guide on Backups
           </Link>{' '}
-          for more information on features and limitations.
+          for more information on features and limitations.{' '}
+          {!flags.dcSpecificPricing ? backupsConfirmationHelperText : undefined}
         </Typography>
         {failedEnableBackupsCount > 0 && (
           <Box>
@@ -168,9 +184,11 @@ all new Linodes will automatically be backed up.`
           />
         )}
         <StyledPricingBox>
-          <Typography variant="h2">
-            Total for {pluralize('Linode', 'Linodes', linodeCount)}:
-          </Typography>
+          {flags.dcSpecificPricing ? (
+            <StyledTypography variant="h2">
+              Total for {pluralize('Linode', 'Linodes', linodeCount)}:
+            </StyledTypography>
+          ) : undefined}
           &nbsp;
           <DisplayPrice
             interval="mo"
@@ -194,7 +212,9 @@ all new Linodes will automatically be backed up.`
             <TableRow>
               <TableCell>Label</TableCell>
               <TableCell>Plan</TableCell>
-              <TableCell>Region</TableCell>
+              {flags.dcSpecificPricing ? (
+                <TableCell>Region</TableCell>
+              ) : undefined}
               <TableCell>Price</TableCell>
             </TableRow>
           </TableHead>
@@ -205,10 +225,13 @@ all new Linodes will automatically be backed up.`
   );
 };
 
-const StyledPricingBox = styled(Box, { label: 'StyledPricingBox' })(
+const StyledPricingBox = styled(Box, { label: 'StyledPricingBox' })(({}) => ({
+  alignItems: 'center',
+  display: 'flex',
+}));
+
+const StyledTypography = styled(Typography, { label: 'StyledTypography' })(
   ({ theme }) => ({
-    alignItems: 'center',
     color: theme.palette.text.primary,
-    display: 'flex',
   })
 );

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

@@ -4,6 +4,8 @@ import * as React from 'react';
 import { TableCell } from 'src/components/TableCell';
 import { TableRow } from 'src/components/TableRow';
 import { Typography } from 'src/components/Typography';
+import { useFlags } from 'src/hooks/useFlags';
+import { useRegionsQuery } from 'src/queries/regions';
 import { useTypeQuery } from 'src/queries/types';
 import { getLinodeRegionBackupPrice } from 'src/utilities/pricing/linodes';
 
@@ -15,7 +17,18 @@ interface Props {
 export const BackupLinodeRow = (props: Props) => {
   const { error, linode } = props;
   const { data: type } = useTypeQuery(linode.type ?? '', Boolean(linode.type));
-  const price = type ? getLinodeRegionBackupPrice(type, linode.region) : 0;
+  const { data: regions } = useRegionsQuery();
+  const flags = useFlags();
+
+  const backupsPrice = flags.dcSpecificPricing
+    ? type
+      ? getLinodeRegionBackupPrice(type, linode.region).monthly
+      : undefined
+    : type?.addons.backups.price.monthly;
+
+  const regionLabel =
+    regions?.find((r) => r.id === linode.region)?.label ?? linode.region;
+
   return (
     <TableRow key={`backup-linode-${linode.id}`}>
       <TableCell parentColumn="Label">
@@ -35,9 +48,11 @@ export const BackupLinodeRow = (props: Props) => {
       <TableCell parentColumn="Plan">
         {type?.label ?? linode.type ?? 'Unknown'}
       </TableCell>
-      <TableCell parentColumn="Region">{linode.region ?? 'Unknown'}</TableCell>
+      {flags.dcSpecificPricing ? (
+        <TableCell parentColumn="Region">{regionLabel ?? 'Unknown'}</TableCell>
+      ) : undefined}
       <TableCell parentColumn="Price">
-        {`$${price['monthly']?.toFixed(2) ?? 'Unknown'}/mo`}
+        {`$${backupsPrice?.toFixed(2) ?? 'Unknown'}/mo`}
       </TableCell>
     </TableRow>
   );

packages/manager/src/features/Linodes/LinodesDetail/LinodeBackup/BackupsPlaceholder.tsx

@@ -1,5 +1,5 @@
-import * as React from 'react';
 import { styled } from '@mui/material/styles';
+import * as React from 'react';
 
 import VolumeIcon from 'src/assets/icons/entityIcons/volume.svg';
 import { Currency } from 'src/components/Currency';

packages/manager/src/features/Linodes/LinodesDetail/LinodeBackup/EnableBackupsDialog.tsx

@@ -6,6 +6,7 @@ import { ConfirmationDialog } from 'src/components/ConfirmationDialog/Confirmati
 import { Currency } from 'src/components/Currency';
 import { Typography } from 'src/components/Typography';
 import { resetEventsPolling } from 'src/eventsPolling';
+import { useFlags } from 'src/hooks/useFlags';
 import { useLinodeBackupsEnableMutation } from 'src/queries/linodes/backups';
 import { useLinodeQuery } from 'src/queries/linodes/linodes';
 import { useTypeQuery } from 'src/queries/types';
@@ -20,6 +21,8 @@ interface Props {
 export const EnableBackupsDialog = (props: Props) => {
   const { linodeId, onClose, open } = props;
 
+  const flags = useFlags();
+
   const {
     error,
     isLoading,
@@ -37,8 +40,11 @@ export const EnableBackupsDialog = (props: Props) => {
     Boolean(linode?.type)
   );
 
-  const price =
-    type && linode ? getLinodeRegionBackupPrice(type, linode.region) : 0;
+  const backupsPrice = flags.dcSpecificPricing
+    ? type && linode
+      ? getLinodeRegionBackupPrice(type, linode.region).monthly
+      : undefined
+    : type?.addons?.backups?.price?.monthly;
 
   const { enqueueSnackbar } = useSnackbar();
 
@@ -84,7 +90,7 @@ export const EnableBackupsDialog = (props: Props) => {
     >
       <Typography>
         Are you sure you want to enable backups on this Linode?{` `}
-        This will add <Currency quantity={price['monthly']} />
+        This will add <Currency quantity={backupsPrice ?? 0} />
         {` `}
         to your monthly bill.
       </Typography>

packages/manager/src/features/Linodes/LinodesDetail/LinodeBackup/LinodeBackups.tsx

@@ -7,18 +7,20 @@ import { useHistory, useParams } from 'react-router-dom';
 import { Button } from 'src/components/Button/Button';
 import { CircleProgress } from 'src/components/CircleProgress';
 import { ErrorState } from 'src/components/ErrorState/ErrorState';
+import { Paper } from 'src/components/Paper';
 import { Table } from 'src/components/Table';
 import { TableBody } from 'src/components/TableBody';
 import { TableCell } from 'src/components/TableCell';
 import { TableHead } from 'src/components/TableHead';
 import { TableRow } from 'src/components/TableRow';
 import { TableRowEmpty } from 'src/components/TableRowEmpty/TableRowEmpty';
 import { Typography } from 'src/components/Typography';
-import { Paper } from 'src/components/Paper';
+import { useFlags } from 'src/hooks/useFlags';
 import { useLinodeBackupsQuery } from 'src/queries/linodes/backups';
 import { useLinodeQuery } from 'src/queries/linodes/linodes';
 import { useGrants, useProfile } from 'src/queries/profile';
 import { useTypeQuery } from 'src/queries/types';
+import { getLinodeRegionBackupPrice } from 'src/utilities/pricing/linodes';
 
 import { LinodePermissionsError } from '../LinodePermissionsError';
 import { BackupTableRow } from './BackupTableRow';
@@ -27,13 +29,13 @@ import { CancelBackupsDialog } from './CancelBackupsDialog';
 import { CaptureSnapshot } from './CaptureSnapshot';
 import { RestoreToLinodeDrawer } from './RestoreToLinodeDrawer';
 import { ScheduleSettings } from './ScheduleSettings';
-import { getLinodeRegionBackupPrice } from 'src/utilities/pricing/linodes';
 
 export const LinodeBackups = () => {
   const { linodeId } = useParams<{ linodeId: string }>();
   const id = Number(linodeId);
 
   const history = useHistory();
+  const flags = useFlags();
 
   const { data: profile } = useProfile();
   const { data: grants } = useGrants();
@@ -80,8 +82,11 @@ export const LinodeBackups = () => {
     );
   }
 
-  const backupsPrice =
-    type && linode ? getLinodeRegionBackupPrice(type, linode?.region) : 0;
+  const backupsPrice = flags.dcSpecificPricing
+    ? type && linode
+      ? getLinodeRegionBackupPrice(type, linode.region).monthly
+      : undefined
+    : type?.addons?.backups?.price?.monthly;
 
   if (isLoading) {
     return <CircleProgress />;
@@ -90,7 +95,7 @@ export const LinodeBackups = () => {
   if (!linode?.backups.enabled) {
     return (
       <BackupsPlaceholder
-        backupsMonthlyPrice={backupsPrice['monthly']}
+        backupsMonthlyPrice={backupsPrice ?? 0}
         disabled={doesNotHavePermission}
         linodeId={id}
       />