upcoming: [M3-8209] - Region label updates (linode#10702)

## Description 📝 When the Gecko GA flag is true: - Display Country, City instead of City, State anywhere there is a region label - Ensure Linode Create v2 displays Country, City ## How to test 🧪 ### Prerequisites (How to setup test environment) - Ensure your account has the `new-dc-testing`, `edge_testing` and `edge_compute` customer tags ### Verification steps (How to verify changes) - Check region labels throughout the app - Regions should display as Country, City with the gecko flag on and as normal with the flag off
pmakode-akamai · Jul 24, 2024 · 9f4d09d · 9f4d09d
1 parent 3c49ca5
commit 9f4d09d
Show file tree

Hide file tree

Showing 66 changed files with 458 additions and 224 deletions.
diff --git a/packages/manager/.changeset/pr-10702-upcoming-features-1721746934983.md b/packages/manager/.changeset/pr-10702-upcoming-features-1721746934983.md
@@ -0,0 +1,5 @@
+---
+"@linode/manager": Upcoming Features
+---
+
+Region label updates ([#10702](https://github.com/linode/manager/pull/10702))
diff --git a/packages/manager/src/components/RegionSelect/RegionSelect.utils.tsx b/packages/manager/src/components/RegionSelect/RegionSelect.utils.tsx
@@ -166,7 +166,9 @@ export const useIsGeckoEnabled = () => {
   const flags = useFlags();
   const isGeckoGA = flags?.gecko2?.enabled && flags.gecko2.ga;
   const isGeckoBeta = flags.gecko2?.enabled && !flags.gecko2?.ga;
-  const { data: regions } = useRegionsQuery(isGeckoGA);
+  const { data: regions } = useRegionsQuery({
+    transformRegionLabel: isGeckoGA,
+  });
 
   const hasDistributedRegionCapability = regions?.some((region: Region) =>
     region.capabilities.includes('Distributed Plans')

diff --git a/packages/manager/src/components/SelectRegionPanel/SelectRegionPanel.tsx b/packages/manager/src/components/SelectRegionPanel/SelectRegionPanel.tsx
@@ -5,8 +5,10 @@ import { useLocation } from 'react-router-dom';
 import { Notice } from 'src/components/Notice/Notice';
 import { Paper } from 'src/components/Paper';
 import { RegionSelect } from 'src/components/RegionSelect/RegionSelect';
-import { isDistributedRegionSupported } from 'src/components/RegionSelect/RegionSelect.utils';
-import { useIsGeckoEnabled } from 'src/components/RegionSelect/RegionSelect.utils';
+import {
+  isDistributedRegionSupported,
+  useIsGeckoEnabled,
+} from 'src/components/RegionSelect/RegionSelect.utils';
 import { TwoStepRegionSelect } from 'src/components/RegionSelect/TwoStepRegionSelect';
 import { RegionHelperText } from 'src/components/SelectRegionPanel/RegionHelperText';
 import { Typography } from 'src/components/Typography';
@@ -72,7 +74,9 @@ export const SelectRegionPanel = (props: SelectRegionPanelProps) => {
 
   const { isGeckoGAEnabled } = useIsGeckoEnabled();
 
-  const { data: regions } = useRegionsQuery(isGeckoGAEnabled);
+  const { data: regions } = useRegionsQuery({
+    transformRegionLabel: isGeckoGAEnabled,
+  });
 
   const isCloning = /clone/i.test(params.type);
   const isFromLinodeCreate = location.pathname.includes('/linodes/create');

diff --git a/packages/manager/src/components/TransferDisplay/TransferDisplay.tsx b/packages/manager/src/components/TransferDisplay/TransferDisplay.tsx
@@ -2,6 +2,7 @@ import * as React from 'react';
 
 import { Box } from 'src/components/Box';
 import { CircleProgress } from 'src/components/CircleProgress';
+import { useIsGeckoEnabled } from 'src/components/RegionSelect/RegionSelect.utils';
 import { Typography } from 'src/components/Typography';
 import { useAccountNetworkTransfer } from 'src/queries/account/transfer';
 import { useRegionsQuery } from 'src/queries/regions/regions';
@@ -26,7 +27,10 @@ export const TransferDisplay = React.memo(({ spacingTop }: Props) => {
     isError,
     isLoading,
   } = useAccountNetworkTransfer();
-  const { data: regions } = useRegionsQuery();
+  const { isGeckoGAEnabled } = useIsGeckoEnabled();
+  const { data: regions } = useRegionsQuery({
+    transformRegionLabel: isGeckoGAEnabled,
+  });
 
   const generalPoolUsagePct = calculatePoolUsagePct(generalPoolUsage);
   const regionTransferPools = getRegionTransferPools(generalPoolUsage, regions);

diff --git a/packages/manager/src/containers/regions.container.ts b/packages/manager/src/containers/regions.container.ts
@@ -1,9 +1,11 @@
-import { Region } from '@linode/api-v4/lib/regions';
-import { APIError } from '@linode/api-v4/lib/types';
 import * as React from 'react';
 
+import { useIsGeckoEnabled } from 'src/components/RegionSelect/RegionSelect.utils';
 import { useRegionsQuery } from 'src/queries/regions/regions';
 
+import type { Region } from '@linode/api-v4/lib/regions';
+import type { APIError } from '@linode/api-v4/lib/types';
+
 export interface RegionsProps {
   regionsData: Region[];
   regionsError?: APIError[];
@@ -25,7 +27,11 @@ export interface RegionsProps {
 export const withRegions = <Props>(
   Component: React.ComponentType<Props & RegionsProps>
 ) => (props: Props) => {
-  const { data, error, isLoading } = useRegionsQuery();
+  const { isGeckoGAEnabled } = useIsGeckoEnabled();
+  const { data, error, isLoading } = useRegionsQuery({
+    transformRegionLabel: isGeckoGAEnabled,
+  });
+
   return React.createElement(Component, {
     regionsData: data ?? [],
     regionsError: error ?? undefined,

diff --git a/packages/manager/src/features/Backups/BackupLinodeRow.tsx b/packages/manager/src/features/Backups/BackupLinodeRow.tsx
@@ -1,6 +1,6 @@
-import { Linode, PriceObject } from '@linode/api-v4';
 import * as React from 'react';
 
+import { useIsGeckoEnabled } from 'src/components/RegionSelect/RegionSelect.utils';
 import { TableCell } from 'src/components/TableCell';
 import { TableRow } from 'src/components/TableRow';
 import { Typography } from 'src/components/Typography';
@@ -12,6 +12,8 @@ import {
   UNKNOWN_PRICE,
 } from 'src/utilities/pricing/constants';
 
+import type { Linode, PriceObject } from '@linode/api-v4';
+
 interface Props {
   error?: string;
   linode: Linode;
@@ -20,7 +22,10 @@ interface Props {
 export const BackupLinodeRow = (props: Props) => {
   const { error, linode } = props;
   const { data: type } = useTypeQuery(linode.type ?? '', Boolean(linode.type));
-  const { data: regions } = useRegionsQuery();
+  const { isGeckoGAEnabled } = useIsGeckoEnabled();
+  const { data: regions } = useRegionsQuery({
+    transformRegionLabel: isGeckoGAEnabled,
+  });
 
   const backupsMonthlyPrice:
     | PriceObject['monthly']

diff --git a/.../manager/src/features/Billing/BillingPanels/BillingActivityPanel/BillingActivityPanel.tsx b/.../manager/src/features/Billing/BillingPanels/BillingActivityPanel/BillingActivityPanel.tsx
@@ -1,23 +1,19 @@
-import {
-  Invoice,
-  InvoiceItem,
-  Payment,
-  getInvoiceItems,
-} from '@linode/api-v4/lib/account';
-import { Theme, styled } from '@mui/material/styles';
+import { getInvoiceItems } from '@linode/api-v4/lib/account';
+import { styled } from '@mui/material/styles';
 import Grid from '@mui/material/Unstable_Grid2';
 import { DateTime } from 'luxon';
 import * as React from 'react';
 import { makeStyles } from 'tss-react/mui';
 
 import { Currency } from 'src/components/Currency';
 import { DateTimeDisplay } from 'src/components/DateTimeDisplay';
-import Select, { Item } from 'src/components/EnhancedSelect/Select';
+import Select from 'src/components/EnhancedSelect/Select';
 import { InlineMenuAction } from 'src/components/InlineMenuAction/InlineMenuAction';
 import { Link } from 'src/components/Link';
 import OrderBy from 'src/components/OrderBy';
 import Paginate from 'src/components/Paginate';
 import { PaginationFooter } from 'src/components/PaginationFooter/PaginationFooter';
+import { useIsGeckoEnabled } from 'src/components/RegionSelect/RegionSelect.utils';
 import { Table } from 'src/components/Table';
 import { TableBody } from 'src/components/TableBody';
 import { TableCell } from 'src/components/TableCell';
@@ -47,6 +43,10 @@ import { getAll } from 'src/utilities/getAll';
 
 import { getTaxID } from '../../billingUtils';
 
+import type { Invoice, InvoiceItem, Payment } from '@linode/api-v4/lib/account';
+import type { Theme } from '@mui/material/styles';
+import type { Item } from 'src/components/EnhancedSelect/Select';
+
 const useStyles = makeStyles()((theme: Theme) => ({
   activeSince: {
     marginRight: theme.spacing(1.25),
@@ -187,7 +187,10 @@ export const BillingActivityPanel = (props: Props) => {
 
   const { data: profile } = useProfile();
   const { data: account } = useAccount();
-  const { data: regions } = useRegionsQuery();
+  const { isGeckoGAEnabled } = useIsGeckoEnabled();
+  const { data: regions } = useRegionsQuery({
+    transformRegionLabel: isGeckoGAEnabled,
+  });
 
   const isAkamaiCustomer = account?.billing_source === 'akamai';
 

diff --git a/packages/manager/src/features/Billing/InvoiceDetail/InvoiceDetail.tsx b/packages/manager/src/features/Billing/InvoiceDetail/InvoiceDetail.tsx
@@ -1,14 +1,7 @@
-import {
-  Account,
-  Invoice,
-  InvoiceItem,
-  getInvoice,
-  getInvoiceItems,
-} from '@linode/api-v4/lib/account';
-import { APIError } from '@linode/api-v4/lib/types';
+import { getInvoice, getInvoiceItems } from '@linode/api-v4/lib/account';
 import KeyboardArrowLeft from '@mui/icons-material/KeyboardArrowLeft';
-import Grid from '@mui/material/Unstable_Grid2';
 import { useTheme } from '@mui/material/styles';
+import Grid from '@mui/material/Unstable_Grid2';
 import * as React from 'react';
 import { useParams } from 'react-router-dom';
 
@@ -20,6 +13,7 @@ import { IconButton } from 'src/components/IconButton';
 import { Link } from 'src/components/Link';
 import { Notice } from 'src/components/Notice/Notice';
 import { Paper } from 'src/components/Paper';
+import { useIsGeckoEnabled } from 'src/components/RegionSelect/RegionSelect.utils';
 import { Typography } from 'src/components/Typography';
 import { printInvoice } from 'src/features/Billing/PdfGenerator/PdfGenerator';
 import { useFlags } from 'src/hooks/useFlags';
@@ -28,18 +22,24 @@ import { useRegionsQuery } from 'src/queries/regions/regions';
 import { getAPIErrorOrDefault } from 'src/utilities/errorUtils';
 import { getAll } from 'src/utilities/getAll';
 
-import { invoiceCreatedAfterDCPricingLaunch } from '../PdfGenerator/utils';
 import { getShouldUseAkamaiBilling } from '../billingUtils';
+import { invoiceCreatedAfterDCPricingLaunch } from '../PdfGenerator/utils';
 import { InvoiceTable } from './InvoiceTable';
 
+import type { Account, Invoice, InvoiceItem } from '@linode/api-v4/lib/account';
+import type { APIError } from '@linode/api-v4/lib/types';
+
 export const InvoiceDetail = () => {
   const { invoiceId } = useParams<{ invoiceId: string }>();
   const theme = useTheme();
 
   const csvRef = React.useRef<any>();
 
   const { data: account } = useAccount();
-  const { data: regions } = useRegionsQuery();
+  const { isGeckoGAEnabled } = useIsGeckoEnabled();
+  const { data: regions } = useRegionsQuery({
+    transformRegionLabel: isGeckoGAEnabled,
+  });
 
   const [invoice, setInvoice] = React.useState<Invoice | undefined>(undefined);
   const [items, setItems] = React.useState<InvoiceItem[] | undefined>(

diff --git a/packages/manager/src/features/Billing/InvoiceDetail/InvoiceTable.tsx b/packages/manager/src/features/Billing/InvoiceDetail/InvoiceTable.tsx
@@ -1,11 +1,10 @@
-import { InvoiceItem } from '@linode/api-v4/lib/account';
-import { APIError } from '@linode/api-v4/lib/types';
 import * as React from 'react';
 
 import { Currency } from 'src/components/Currency';
 import { DateTimeDisplay } from 'src/components/DateTimeDisplay';
 import Paginate from 'src/components/Paginate';
 import { PaginationFooter } from 'src/components/PaginationFooter/PaginationFooter';
+import { useIsGeckoEnabled } from 'src/components/RegionSelect/RegionSelect.utils';
 import { Table } from 'src/components/Table';
 import { TableBody } from 'src/components/TableBody';
 import { TableCell } from 'src/components/TableCell';
@@ -19,6 +18,9 @@ import { useRegionsQuery } from 'src/queries/regions/regions';
 
 import { getInvoiceRegion } from '../PdfGenerator/utils';
 
+import type { InvoiceItem } from '@linode/api-v4/lib/account';
+import type { APIError } from '@linode/api-v4/lib/types';
+
 interface Props {
   errors?: APIError[];
   items?: InvoiceItem[];
@@ -29,11 +31,14 @@ interface Props {
 export const InvoiceTable = (props: Props) => {
   const MIN_PAGE_SIZE = 25;
 
+  const { isGeckoGAEnabled } = useIsGeckoEnabled();
   const {
     data: regions,
     error: regionsError,
     isLoading: regionsLoading,
-  } = useRegionsQuery();
+  } = useRegionsQuery({
+    transformRegionLabel: isGeckoGAEnabled,
+  });
 
   const { errors, items, loading, shouldShowRegion } = props;
   const NUM_COLUMNS = shouldShowRegion ? 9 : 8;

diff --git a/packages/manager/src/features/CloudPulse/shared/CloudPulseRegionSelect.tsx b/packages/manager/src/features/CloudPulse/shared/CloudPulseRegionSelect.tsx
@@ -1,6 +1,7 @@
 import * as React from 'react';
 
 import { RegionSelect } from 'src/components/RegionSelect/RegionSelect';
+import { useIsGeckoEnabled } from 'src/components/RegionSelect/RegionSelect.utils';
 import { useRegionsQuery } from 'src/queries/regions/regions';
 
 import { REGION, RESOURCES } from '../Utils/constants';
@@ -18,7 +19,10 @@ export interface CloudPulseRegionSelectProps {
 
 export const CloudPulseRegionSelect = React.memo(
   (props: CloudPulseRegionSelectProps) => {
-    const { data: regions } = useRegionsQuery();
+    const { isGeckoGAEnabled } = useIsGeckoEnabled();
+    const { data: regions } = useRegionsQuery({
+      transformRegionLabel: isGeckoGAEnabled,
+    });
 
     const [selectedRegion, setSelectedRegion] = React.useState<string>();
 

diff --git a/packages/manager/src/features/Databases/DatabaseCreate/DatabaseCreate.tsx b/packages/manager/src/features/Databases/DatabaseCreate/DatabaseCreate.tsx
@@ -62,6 +62,7 @@ import type { Theme } from '@mui/material/styles';
 import type { Item } from 'src/components/EnhancedSelect/Select';
 import type { PlanSelectionType } from 'src/features/components/PlansPanel/types';
 import type { ExtendedIP } from 'src/utilities/ipUtils';
+import { useIsGeckoEnabled } from 'src/components/RegionSelect/RegionSelect.utils';
 
 const useStyles = makeStyles()((theme: Theme) => ({
   btnCtn: {
@@ -193,12 +194,15 @@ const DatabaseCreate = () => {
   const { classes } = useStyles();
   const history = useHistory();
   const flags = useFlags();
+  const { isGeckoGAEnabled } = useIsGeckoEnabled();
 
   const {
     data: regionsData,
     error: regionsError,
     isLoading: regionsLoading,
-  } = useRegionsQuery();
+  } = useRegionsQuery({
+    transformRegionLabel: isGeckoGAEnabled,
+  });
 
   const {
     data: engines,

diff --git a/...c/features/Databases/DatabaseDetail/DatabaseResize/DatabaseResizeCurrentConfiguration.tsx b/...c/features/Databases/DatabaseDetail/DatabaseResize/DatabaseResizeCurrentConfiguration.tsx
@@ -1,15 +1,10 @@
-import { Region } from '@linode/api-v4';
-import {
-  Database,
-  DatabaseInstance,
-  DatabaseType,
-} from '@linode/api-v4/lib/databases/types';
 import { useTheme } from '@mui/material/styles';
 import * as React from 'react';
 
 import { Box } from 'src/components/Box';
 import { CircleProgress } from 'src/components/CircleProgress';
 import { ErrorState } from 'src/components/ErrorState/ErrorState';
+import { useIsGeckoEnabled } from 'src/components/RegionSelect/RegionSelect.utils';
 import { TooltipIcon } from 'src/components/TooltipIcon';
 import { useDatabaseTypesQuery } from 'src/queries/databases/databases';
 import { useInProgressEvents } from 'src/queries/events/events';
@@ -27,6 +22,13 @@ import {
   StyledTitleTypography,
 } from './DatabaseResizeCurrentConfiguration.style';
 
+import type { Region } from '@linode/api-v4';
+import type {
+  Database,
+  DatabaseInstance,
+  DatabaseType,
+} from '@linode/api-v4/lib/databases/types';
+
 interface Props {
   database: Database;
 }
@@ -42,7 +44,10 @@ export const DatabaseResizeCurrentConfiguration = ({ database }: Props) => {
     isLoading: typesLoading,
   } = useDatabaseTypesQuery();
   const theme = useTheme();
-  const { data: regions } = useRegionsQuery();
+  const { isGeckoGAEnabled } = useIsGeckoEnabled();
+  const { data: regions } = useRegionsQuery({
+    transformRegionLabel: isGeckoGAEnabled,
+  });
 
   const region = regions?.find((r: Region) => r.id === database.region);
 

diff --git a/...features/Databases/DatabaseDetail/DatabaseSummary/DatabaseSummaryClusterConfiguration.tsx b/...features/Databases/DatabaseDetail/DatabaseSummary/DatabaseSummaryClusterConfiguration.tsx
@@ -1,14 +1,8 @@
-import { Region } from '@linode/api-v4';
-import {
-  Database,
-  DatabaseInstance,
-  DatabaseType,
-} from '@linode/api-v4/lib/databases/types';
-import { Theme } from '@mui/material/styles';
 import * as React from 'react';
 import { makeStyles } from 'tss-react/mui';
 
 import { Box } from 'src/components/Box';
+import { useIsGeckoEnabled } from 'src/components/RegionSelect/RegionSelect.utils';
 import { TooltipIcon } from 'src/components/TooltipIcon';
 import { Typography } from 'src/components/Typography';
 import { useDatabaseTypesQuery } from 'src/queries/databases/databases';
@@ -20,6 +14,14 @@ import { convertMegabytesTo } from 'src/utilities/unitConversions';
 import { databaseEngineMap } from '../../DatabaseLanding/DatabaseRow';
 import { DatabaseStatusDisplay } from '../DatabaseStatusDisplay';
 
+import type { Region } from '@linode/api-v4';
+import type {
+  Database,
+  DatabaseInstance,
+  DatabaseType,
+} from '@linode/api-v4/lib/databases/types';
+import type { Theme } from '@mui/material/styles';
+
 const useStyles = makeStyles()((theme: Theme) => ({
   configs: {
     fontSize: '0.875rem',
@@ -54,7 +56,10 @@ export const DatabaseSummaryClusterConfiguration = (props: Props) => {
   const { database } = props;
 
   const { data: types } = useDatabaseTypesQuery();
-  const { data: regions } = useRegionsQuery();
+  const { isGeckoGAEnabled } = useIsGeckoEnabled();
+  const { data: regions } = useRegionsQuery({
+    transformRegionLabel: isGeckoGAEnabled,
+  });
 
   const region = regions?.find((r: Region) => r.id === database.region);