change: [M3-8531] - Hide Beta price notice for Gecko LA (linode#10896)

## Description 📝 Gecko LA will be billed so we want to hide the temp Beta pricing notice if LA is enabled ## Changes 🔄 List any change relevant to the reviewer. - Hide Beta pricing notice in the Linode Plan table when a distributed region is selected for Gecko LA - Rename GA references to LA ## How to test 🧪 ### Prerequisites (How to setup test environment) - Ensure your account has the `new-dc-testing`, `new-dc-testing-gecko`, `edge_testing` and `edge_compute` customer tags - Pull this PR and run it locally pointing to dev API ### Verification steps (How to verify changes) - Select an image compatible with distributed regions (e.g. `Ubuntu 24.04 LTS`) - Select a distributed region - The Linode Plan table should not display the Beta pricing notice Ensure Gecko Beta still shows the pricing notice. - To test Gecko Beta locally, you can add the following to `useFlags.ts` (_We do not want to change the LD flag globally since other teams rely on it_): - ...mockFlags, gecko2: { enabled: true, la: false }
coliu-akamai · Sep 6, 2024 · ce4bb3b · ce4bb3b
1 parent 9b96672
commit ce4bb3b
Show file tree

Hide file tree

Showing 10 changed files with 39 additions and 34 deletions.
diff --git a/packages/manager/.changeset/pr-10896-changed-1725558246039.md b/packages/manager/.changeset/pr-10896-changed-1725558246039.md
@@ -0,0 +1,5 @@
+---
+"@linode/manager": Changed
+---
+
+Hide Beta price notice for Gecko LA and rename Ga code references to LA ([#10896](https://github.com/linode/manager/pull/10896))
diff --git a/packages/manager/src/components/RegionSelect/RegionOption.tsx b/packages/manager/src/components/RegionSelect/RegionOption.tsx
@@ -35,7 +35,7 @@ export const RegionOption = ({
   const { className, onClick } = props;
   const isRegionDisabled = Boolean(disabledOptions);
   const isRegionDisabledReason = disabledOptions?.reason;
-  const { isGeckoBetaEnabled, isGeckoGAEnabled } = useIsGeckoEnabled();
+  const { isGeckoBetaEnabled, isGeckoLAEnabled } = useIsGeckoEnabled();
   const displayDistributedRegionIcon =
     isGeckoBetaEnabled && region.site_type === 'distributed';
 
@@ -78,7 +78,7 @@ export const RegionOption = ({
             <StyledFlagContainer>
               <Flag country={region.country} />
             </StyledFlagContainer>
-            {isGeckoGAEnabled ? region.label : `${region.label} (${region.id})`}
+            {isGeckoLAEnabled ? region.label : `${region.label} (${region.id})`}
             {displayDistributedRegionIcon && (
               <Box sx={visuallyHidden}>
                 &nbsp;(This region is a distributed region.)
@@ -88,7 +88,7 @@ export const RegionOption = ({
               <Box sx={visuallyHidden}>{isRegionDisabledReason}</Box>
             )}
           </Box>
-          {isGeckoGAEnabled && `(${region.id})`}
+          {isGeckoLAEnabled && `(${region.id})`}
           {selected && <SelectedIcon visible />}
           {displayDistributedRegionIcon && (
             <TooltipIcon

diff --git a/packages/manager/src/components/RegionSelect/RegionSelect.tsx b/packages/manager/src/components/RegionSelect/RegionSelect.tsx
@@ -1,6 +1,5 @@
 import { Typography } from '@mui/material';
 import { createFilterOptions } from '@mui/material/Autocomplete';
-
 import * as React from 'react';
 
 import DistributedRegion from 'src/assets/icons/entityIcons/distributed-region.svg';
@@ -63,7 +62,7 @@ export const RegionSelect = <
     width,
   } = props;
 
-  const { isGeckoBetaEnabled, isGeckoGAEnabled } = useIsGeckoEnabled();
+  const { isGeckoBetaEnabled, isGeckoLAEnabled } = useIsGeckoEnabled();
 
   const {
     data: accountAvailability,
@@ -102,7 +101,7 @@ export const RegionSelect = <
   }, {});
 
   const EndAdornment = React.useMemo(() => {
-    // @TODO Gecko: Remove adornment after GA
+    // @TODO Gecko: Remove adornment after LA
     if (isGeckoBetaEnabled && selectedRegion?.site_type === 'distributed') {
       return (
         <TooltipIcon
@@ -113,17 +112,17 @@ export const RegionSelect = <
         />
       );
     }
-    if (isGeckoGAEnabled && selectedRegion) {
+    if (isGeckoLAEnabled && selectedRegion) {
       return `(${selectedRegion?.id})`;
     }
     return null;
-  }, [isGeckoBetaEnabled, isGeckoGAEnabled, selectedRegion]);
+  }, [isGeckoBetaEnabled, isGeckoLAEnabled, selectedRegion]);
 
   /*
    * When Gecko is enabled, allow regions to be searched by ID by passing a
    * custom stringify function.
    */
-  const filterOptions = isGeckoGAEnabled
+  const filterOptions = isGeckoLAEnabled
     ? createFilterOptions({
         stringify: (region: Region) => `${region.label} (${region.id})`,
       })
@@ -133,7 +132,7 @@ export const RegionSelect = <
     <StyledAutocompleteContainer sx={{ width }}>
       <Autocomplete<Region, false, DisableClearable>
         getOptionLabel={(region) =>
-          isGeckoGAEnabled ? region.label : `${region.label} (${region.id})`
+          isGeckoLAEnabled ? region.label : `${region.label} (${region.id})`
         }
         renderOption={(props, region) => (
           <RegionOption

diff --git a/packages/manager/src/components/RegionSelect/RegionSelect.utils.tsx b/packages/manager/src/components/RegionSelect/RegionSelect.utils.tsx
@@ -163,15 +163,15 @@ export const getNewRegionLabel = (region: Region) => {
 
 export const useIsGeckoEnabled = () => {
   const flags = useFlags();
-  const isGeckoGA = flags?.gecko2?.enabled && flags.gecko2.ga;
-  const isGeckoBeta = flags.gecko2?.enabled && !flags.gecko2?.ga;
+  const isGeckoLA = flags?.gecko2?.enabled && flags.gecko2.la;
+  const isGeckoBeta = flags.gecko2?.enabled && !flags.gecko2?.la;
   const { data: regions } = useRegionsQuery();
 
   const hasDistributedRegionCapability = regions?.some((region: Region) =>
     region.capabilities.includes('Distributed Plans')
   );
-  const isGeckoGAEnabled = hasDistributedRegionCapability && isGeckoGA;
+  const isGeckoLAEnabled = hasDistributedRegionCapability && isGeckoLA;
   const isGeckoBetaEnabled = hasDistributedRegionCapability && isGeckoBeta;
 
-  return { isGeckoBetaEnabled, isGeckoGAEnabled };
+  return { isGeckoBetaEnabled, isGeckoLAEnabled };
 };
diff --git a/packages/manager/src/components/SelectRegionPanel/SelectRegionPanel.tsx b/packages/manager/src/components/SelectRegionPanel/SelectRegionPanel.tsx
@@ -71,7 +71,7 @@ export const SelectRegionPanel = (props: SelectRegionPanelProps) => {
     location.search
   );
 
-  const { isGeckoGAEnabled } = useIsGeckoEnabled();
+  const { isGeckoLAEnabled } = useIsGeckoEnabled();
 
   const { data: regions } = useRegionsQuery();
 
@@ -164,7 +164,7 @@ export const SelectRegionPanel = (props: SelectRegionPanelProps) => {
           label={DOCS_LINK_LABEL_DC_PRICING}
         />
       </Box>
-      {!isGeckoGAEnabled && (
+      {!isGeckoLAEnabled && (
         <RegionHelperText
           onClick={() => sendLinodeCreateDocsEvent('Speedtest')}
         />
@@ -181,7 +181,7 @@ export const SelectRegionPanel = (props: SelectRegionPanelProps) => {
           </Typography>
         </Notice>
       ) : null}
-      {isGeckoGAEnabled && isDistributedRegionSupported(params.type) ? (
+      {isGeckoLAEnabled && isDistributedRegionSupported(params.type) ? (
         <TwoStepRegionSelect
           showDistributedRegionIconHelperText={
             showDistributedRegionIconHelperText

diff --git a/packages/manager/src/components/TransferDisplay/TransferDisplayDialog.tsx b/packages/manager/src/components/TransferDisplay/TransferDisplayDialog.tsx
@@ -39,7 +39,7 @@ export const TransferDisplayDialog = React.memo(
       regionTransferPools,
     } = props;
     const theme = useTheme();
-    const { isGeckoGAEnabled } = useIsGeckoEnabled();
+    const { isGeckoLAEnabled } = useIsGeckoEnabled();
 
     const daysRemainingInMonth = getDaysRemaining();
     const listOfOtherRegionTransferPools: string[] =
@@ -66,7 +66,7 @@ export const TransferDisplayDialog = React.memo(
          */}
         <TransferDisplayDialogHeader
           tooltipText={`The Global Pool includes transfer associated with active services in your devices' ${
-            isGeckoGAEnabled ? 'core' : ''
+            isGeckoLAEnabled ? 'core' : ''
           } regions${
             listOfOtherRegionTransferPools.length > 0
               ? ` except for ${otherRegionPools}.`

diff --git a/packages/manager/src/featureFlags.ts b/packages/manager/src/featureFlags.ts
@@ -54,8 +54,9 @@ interface BetaFeatureFlag extends BaseFeatureFlag {
   beta: boolean;
 }
 
-interface GaFeatureFlag extends BaseFeatureFlag {
+interface GeckoFeatureFlag extends BaseFeatureFlag {
   ga: boolean;
+  la: boolean;
 }
 
 interface AclpFlag {
@@ -92,8 +93,7 @@ export interface Flags {
   databases: boolean;
   dbaasV2: BetaFeatureFlag;
   disableLargestGbPlans: boolean;
-  gecko: boolean; // @TODO gecko: delete this after next release
-  gecko2: GaFeatureFlag;
+  gecko2: GeckoFeatureFlag;
   gpuv2: gpuV2;
   imageServiceGen2: boolean;
   ipv6Sharing: boolean;

diff --git a/packages/manager/src/features/Linodes/LinodeCreatev2/Region.tsx b/packages/manager/src/features/Linodes/LinodeCreatev2/Region.tsx
@@ -86,9 +86,9 @@ export const Region = () => {
 
   const { data: regions } = useRegionsQuery();
 
-  const { isGeckoGAEnabled } = useIsGeckoEnabled();
+  const { isGeckoBetaEnabled, isGeckoLAEnabled } = useIsGeckoEnabled();
   const showTwoStepRegion =
-    isGeckoGAEnabled && isDistributedRegionSupported(params.type ?? 'OS');
+    isGeckoLAEnabled && isDistributedRegionSupported(params.type ?? 'OS');
 
   const onChange = async (region: RegionType) => {
     const values = getValues();
@@ -176,15 +176,14 @@ export const Region = () => {
 
   const hideDistributedRegions =
     !flags.gecko2?.enabled ||
-    flags.gecko2?.ga ||
     !isDistributedRegionSupported(params.type ?? 'OS');
 
   const showDistributedRegionIconHelperText =
-    !hideDistributedRegions &&
-    regions?.some(
-      (region) =>
-        region.site_type === 'distributed' || region.site_type === 'edge'
-    );
+    isGeckoBetaEnabled && !hideDistributedRegions;
+  regions?.some(
+    (region) =>
+      region.site_type === 'distributed' || region.site_type === 'edge'
+  );
 
   const disabledRegions = getDisabledRegions({
     regions: regions ?? [],

diff --git a/.../Linodes/LinodesDetail/LinodeNetworking/NetworkingSummaryPanel/NetworkingSummaryPanel.tsx b/.../Linodes/LinodesDetail/LinodeNetworking/NetworkingSummaryPanel/NetworkingSummaryPanel.tsx
@@ -17,15 +17,15 @@ interface Props {
 export const LinodeNetworkingSummaryPanel = React.memo((props: Props) => {
   // @todo maybe move this query closer to the consuming component
   const { data: linode } = useLinodeQuery(props.linodeId);
-  const { isGeckoGAEnabled } = useIsGeckoEnabled();
+  const { isGeckoLAEnabled } = useIsGeckoEnabled();
   const theme = useTheme();
 
   if (!linode) {
     return null;
   }
 
   const hideNetworkTransfer =
-    isGeckoGAEnabled && linode.site_type === 'distributed';
+    isGeckoLAEnabled && linode.site_type === 'distributed';
 
   return (
     <Paper>

diff --git a/packages/manager/src/features/components/PlansPanel/PlansPanel.tsx b/packages/manager/src/features/components/PlansPanel/PlansPanel.tsx
@@ -2,8 +2,9 @@ import * as React from 'react';
 import { useLocation } from 'react-router-dom';
 
 import { Notice } from 'src/components/Notice/Notice';
-import { isDistributedRegionSupported } from 'src/components/RegionSelect/RegionSelect.utils';
+import { useIsGeckoEnabled } from 'src/components/RegionSelect/RegionSelect.utils';
 import { getIsDistributedRegion } from 'src/components/RegionSelect/RegionSelect.utils';
+import { isDistributedRegionSupported } from 'src/components/RegionSelect/RegionSelect.utils';
 import { TabbedPanel } from 'src/components/TabbedPanel/TabbedPanel';
 import { useFlags } from 'src/hooks/useFlags';
 import { useRegionAvailabilityQuery } from 'src/queries/regions/regions';
@@ -80,6 +81,7 @@ export const PlansPanel = (props: PlansPanelProps) => {
   } = props;
 
   const flags = useFlags();
+  const { isGeckoLAEnabled } = useIsGeckoEnabled();
   const location = useLocation();
   const params = getQueryParamsFromQueryString<LinodeCreateQueryParams>(
     location.search
@@ -169,7 +171,7 @@ export const PlansPanel = (props: PlansPanelProps) => {
                 planType={plan}
                 regionsData={regionsData || []}
               />
-              {showDistributedRegionPlanTable && (
+              {showDistributedRegionPlanTable && !isGeckoLAEnabled && (
                 <Notice
                   text="Distributed region pricing is temporarily $0 during the beta period, after which billing will begin."
                   variant="warning"