diff --git a/packages/manager/.changeset/pr-10702-upcoming-features-1721746934983.md b/packages/manager/.changeset/pr-10702-upcoming-features-1721746934983.md new file mode 100644 index 00000000000..a3570f769a4 --- /dev/null +++ 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 index 6d329cfad77..b6fe19b74d7 100644 --- 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 index dcdaf79d58f..897c0f09aa0 100644 --- 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 index 971ec80d6b7..bd28757f45f 100644 --- 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 index c9641ecd959..80dcc83afd8 100644 --- 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 = ( Component: React.ComponentType ) => (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 index 7ebeaae2b3a..a7b9bec9c3e 100644 --- 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/packages/manager/src/features/Billing/BillingPanels/BillingActivityPanel/BillingActivityPanel.tsx b/packages/manager/src/features/Billing/BillingPanels/BillingActivityPanel/BillingActivityPanel.tsx index 9a7235d8729..d7d759c8250 100644 --- a/packages/manager/src/features/Billing/BillingPanels/BillingActivityPanel/BillingActivityPanel.tsx +++ b/packages/manager/src/features/Billing/BillingPanels/BillingActivityPanel/BillingActivityPanel.tsx @@ -1,10 +1,5 @@ -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'; @@ -12,12 +7,13 @@ 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 index 47bb07eba4a..4fd7c38da1f 100644 --- 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,10 +22,13 @@ 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(); @@ -39,7 +36,10 @@ export const InvoiceDetail = () => { const csvRef = React.useRef(); const { data: account } = useAccount(); - const { data: regions } = useRegionsQuery(); + const { isGeckoGAEnabled } = useIsGeckoEnabled(); + const { data: regions } = useRegionsQuery({ + transformRegionLabel: isGeckoGAEnabled, + }); const [invoice, setInvoice] = React.useState(undefined); const [items, setItems] = React.useState( diff --git a/packages/manager/src/features/Billing/InvoiceDetail/InvoiceTable.tsx b/packages/manager/src/features/Billing/InvoiceDetail/InvoiceTable.tsx index e633213429d..e23acc83015 100644 --- 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 index 47c04be2bb8..c6661634d44 100644 --- 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(); diff --git a/packages/manager/src/features/Databases/DatabaseCreate/DatabaseCreate.tsx b/packages/manager/src/features/Databases/DatabaseCreate/DatabaseCreate.tsx index 35127bcd302..b14975a19ac 100644 --- 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/packages/manager/src/features/Databases/DatabaseDetail/DatabaseResize/DatabaseResizeCurrentConfiguration.tsx b/packages/manager/src/features/Databases/DatabaseDetail/DatabaseResize/DatabaseResizeCurrentConfiguration.tsx index 4206f31ba66..bd5e62192aa 100644 --- a/packages/manager/src/features/Databases/DatabaseDetail/DatabaseResize/DatabaseResizeCurrentConfiguration.tsx +++ b/packages/manager/src/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/packages/manager/src/features/Databases/DatabaseDetail/DatabaseSummary/DatabaseSummaryClusterConfiguration.tsx b/packages/manager/src/features/Databases/DatabaseDetail/DatabaseSummary/DatabaseSummaryClusterConfiguration.tsx index 8eb09fd8b07..95a933d30d5 100644 --- a/packages/manager/src/features/Databases/DatabaseDetail/DatabaseSummary/DatabaseSummaryClusterConfiguration.tsx +++ b/packages/manager/src/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); diff --git a/packages/manager/src/features/Databases/DatabaseLanding/DatabaseRow.tsx b/packages/manager/src/features/Databases/DatabaseLanding/DatabaseRow.tsx index 5646cb54753..d45dce8195b 100644 --- a/packages/manager/src/features/Databases/DatabaseLanding/DatabaseRow.tsx +++ b/packages/manager/src/features/Databases/DatabaseLanding/DatabaseRow.tsx @@ -1,14 +1,9 @@ -import { Event } from '@linode/api-v4'; -import { - Database, - DatabaseInstance, - Engine, -} from '@linode/api-v4/lib/databases/types'; import * as React from 'react'; import { Link } from 'react-router-dom'; import { Chip } from 'src/components/Chip'; import { Hidden } from 'src/components/Hidden'; +import { useIsGeckoEnabled } from 'src/components/RegionSelect/RegionSelect.utils'; import { TableCell } from 'src/components/TableCell'; import { TableRow } from 'src/components/TableRow'; import { useProfile } from 'src/queries/profile/profile'; @@ -18,6 +13,13 @@ import { formatDate } from 'src/utilities/formatDate'; import { DatabaseStatusDisplay } from '../DatabaseDetail/DatabaseStatusDisplay'; +import type { Event } from '@linode/api-v4'; +import type { + Database, + DatabaseInstance, + Engine, +} from '@linode/api-v4/lib/databases/types'; + export const databaseEngineMap: Record = { mongodb: 'MongoDB', mysql: 'MySQL', @@ -41,7 +43,10 @@ export const DatabaseRow = ({ database, events }: Props) => { version, } = database; - const { data: regions } = useRegionsQuery(); + const { isGeckoGAEnabled } = useIsGeckoEnabled(); + const { data: regions } = useRegionsQuery({ + transformRegionLabel: isGeckoGAEnabled, + }); const { data: profile } = useProfile(); const actualRegion = regions?.find((r) => r.id === region); diff --git a/packages/manager/src/features/EntityTransfers/EntityTransfersCreate/LinodeTransferTable.tsx b/packages/manager/src/features/EntityTransfers/EntityTransfersCreate/LinodeTransferTable.tsx index 55d4c031f37..a04fbc4c9f3 100644 --- a/packages/manager/src/features/EntityTransfers/EntityTransfersCreate/LinodeTransferTable.tsx +++ b/packages/manager/src/features/EntityTransfers/EntityTransfersCreate/LinodeTransferTable.tsx @@ -1,10 +1,9 @@ -import { Linode } from '@linode/api-v4/lib/linodes'; -import { Theme } from '@mui/material/styles'; -import useMediaQuery from '@mui/material/useMediaQuery'; import { useTheme } from '@mui/material'; +import useMediaQuery from '@mui/material/useMediaQuery'; import * as React from 'react'; import { Hidden } from 'src/components/Hidden'; +import { useIsGeckoEnabled } from 'src/components/RegionSelect/RegionSelect.utils'; import { SelectableTableRow } from 'src/components/SelectableTableRow/SelectableTableRow'; import { TableCell } from 'src/components/TableCell'; import { TableContentWrapper } from 'src/components/TableContentWrapper/TableContentWrapper'; @@ -15,7 +14,10 @@ import { useSpecificTypes } from 'src/queries/types'; import { extendType } from 'src/utilities/extendType'; import { TransferTable } from './TransferTable'; -import { Entity, TransferEntity } from './transferReducer'; + +import type { Entity, TransferEntity } from './transferReducer'; +import type { Linode } from '@linode/api-v4/lib/linodes'; +import type { Theme } from '@mui/material/styles'; interface Props { handleRemove: (linodesToRemove: string[]) => void; @@ -110,7 +112,10 @@ const LinodeRow = (props: RowProps) => { const type = typesQuery[0]?.data ? extendType(typesQuery[0].data) : undefined; const displayType = type?.formattedLabel ?? linode.type; - const { data: regions } = useRegionsQuery(); + const { isGeckoGAEnabled } = useIsGeckoEnabled(); + const { data: regions } = useRegionsQuery({ + transformRegionLabel: isGeckoGAEnabled, + }); const region = regions?.find((r) => r.id === linode.region); const displayRegion = region?.label ?? linode.region; return ( diff --git a/packages/manager/src/features/Events/factories/linode.tsx b/packages/manager/src/features/Events/factories/linode.tsx index ba13193cdf1..ec6ddcb0a0a 100644 --- a/packages/manager/src/features/Events/factories/linode.tsx +++ b/packages/manager/src/features/Events/factories/linode.tsx @@ -1,6 +1,7 @@ import * as React from 'react'; import { Link } from 'src/components/Link'; +import { useIsGeckoEnabled } from 'src/components/RegionSelect/RegionSelect.utils'; import { useLinodeQuery } from 'src/queries/linodes/linodes'; import { useRegionsQuery } from 'src/queries/regions/regions'; import { useTypeQuery } from 'src/queries/types'; @@ -539,7 +540,10 @@ export const linode: PartialEventMap<'linode'> = { const LinodeMigrateDataCenterMessage = ({ event }: { event: Event }) => { const { data: linode } = useLinodeQuery(event.entity?.id ?? -1); - const { data: regions } = useRegionsQuery(); + const { isGeckoGAEnabled } = useIsGeckoEnabled(); + const { data: regions } = useRegionsQuery({ + transformRegionLabel: isGeckoGAEnabled, + }); const region = regions?.find((r) => r.id === linode?.region); return ( diff --git a/packages/manager/src/features/GlobalNotifications/RegionStatusBanner.tsx b/packages/manager/src/features/GlobalNotifications/RegionStatusBanner.tsx index f369b2e6146..94eda8c82ed 100644 --- a/packages/manager/src/features/GlobalNotifications/RegionStatusBanner.tsx +++ b/packages/manager/src/features/GlobalNotifications/RegionStatusBanner.tsx @@ -2,6 +2,7 @@ import * as React from 'react'; import { Link } from 'src/components/Link'; import { Notice } from 'src/components/Notice/Notice'; +import { useIsGeckoEnabled } from 'src/components/RegionSelect/RegionSelect.utils'; import { Typography } from 'src/components/Typography'; import { useRegionsQuery } from 'src/queries/regions/regions'; @@ -53,7 +54,10 @@ const renderBanner = (statusWarnings: string[]): JSX.Element => { }; export const RegionStatusBanner = React.memo(() => { - const { data: regions } = useRegionsQuery(); + const { isGeckoGAEnabled } = useIsGeckoEnabled(); + const { data: regions } = useRegionsQuery({ + transformRegionLabel: isGeckoGAEnabled, + }); const labelsOfRegionsWithOutages = regions ?.filter((region) => region.status === 'outage') diff --git a/packages/manager/src/features/Images/ImagesCreate/ImageUpload.tsx b/packages/manager/src/features/Images/ImagesCreate/ImageUpload.tsx index f1a95fdac2e..2abfc59b60a 100644 --- a/packages/manager/src/features/Images/ImagesCreate/ImageUpload.tsx +++ b/packages/manager/src/features/Images/ImagesCreate/ImageUpload.tsx @@ -16,13 +16,13 @@ import { Notice } from 'src/components/Notice/Notice'; import { Paper } from 'src/components/Paper'; import { Prompt } from 'src/components/Prompt/Prompt'; import { RegionSelect } from 'src/components/RegionSelect/RegionSelect'; +import { useIsGeckoEnabled } from 'src/components/RegionSelect/RegionSelect.utils'; import { Stack } from 'src/components/Stack'; import { TagsInput } from 'src/components/TagsInput/TagsInput'; import { TextField } from 'src/components/TextField'; import { Typography } from 'src/components/Typography'; import { ImageUploader } from 'src/components/Uploaders/ImageUploader/ImageUploader'; import { MAX_FILE_SIZE_IN_BYTES } from 'src/components/Uploaders/reducer'; -import { Dispatch } from 'src/hooks/types'; import { useFlags } from 'src/hooks/useFlags'; import { usePendingUpload } from 'src/hooks/usePendingUpload'; import { useRestrictedGlobalGrantCheck } from 'src/hooks/useRestrictedGlobalGrantCheck'; @@ -40,15 +40,16 @@ import { readableBytes } from 'src/utilities/unitConversions'; import { EUAgreementCheckbox } from '../../Account/Agreements/EUAgreementCheckbox'; import { getRestrictedResourceText } from '../../Account/utils'; +import { uploadImageFile } from '../requests'; import { ImageUploadSchema, recordImageAnalytics } from './ImageUpload.utils'; -import { +import { ImageUploadCLIDialog } from './ImageUploadCLIDialog'; + +import type { ImageUploadFormData, ImageUploadNavigationState, } from './ImageUpload.utils'; -import { ImageUploadCLIDialog } from './ImageUploadCLIDialog'; -import { uploadImageFile } from '../requests'; - import type { AxiosError, AxiosProgressEvent } from 'axios'; +import type { Dispatch } from 'src/hooks/types'; export const ImageUpload = () => { const { location } = useHistory(); @@ -66,7 +67,10 @@ export const ImageUpload = () => { const { data: profile } = useProfile(); const { data: agreements } = useAccountAgreements(); const { mutateAsync: updateAccountAgreements } = useMutateAccountAgreements(); - const { data: regions } = useRegionsQuery(); + const { isGeckoGAEnabled } = useIsGeckoEnabled(); + const { data: regions } = useRegionsQuery({ + transformRegionLabel: isGeckoGAEnabled, + }); const { mutateAsync: createImage } = useUploadImageMutation(); const { enqueueSnackbar } = useSnackbar(); @@ -372,8 +376,8 @@ export const ImageUpload = () => { diff --git a/packages/manager/src/features/Images/ImagesLanding/ImageRegions/ImageRegionRow.tsx b/packages/manager/src/features/Images/ImagesLanding/ImageRegions/ImageRegionRow.tsx index 2479578d43c..6d7795ed205 100644 --- a/packages/manager/src/features/Images/ImagesLanding/ImageRegions/ImageRegionRow.tsx +++ b/packages/manager/src/features/Images/ImagesLanding/ImageRegions/ImageRegionRow.tsx @@ -4,6 +4,7 @@ import React from 'react'; import { Box } from 'src/components/Box'; import { Flag } from 'src/components/Flag'; import { IconButton } from 'src/components/IconButton'; +import { useIsGeckoEnabled } from 'src/components/RegionSelect/RegionSelect.utils'; import { Stack } from 'src/components/Stack'; import { StatusIcon } from 'src/components/StatusIcon/StatusIcon'; import { Typography } from 'src/components/Typography'; @@ -24,7 +25,10 @@ interface Props { export const ImageRegionRow = (props: Props) => { const { disableRemoveButton, onRemove, region, status } = props; - const { data: regions } = useRegionsQuery(); + const { isGeckoGAEnabled } = useIsGeckoEnabled(); + const { data: regions } = useRegionsQuery({ + transformRegionLabel: isGeckoGAEnabled, + }); const actualRegion = regions?.find((r) => r.id === region); diff --git a/packages/manager/src/features/Images/ImagesLanding/ImageRegions/ManageImageRegionsForm.tsx b/packages/manager/src/features/Images/ImagesLanding/ImageRegions/ManageImageRegionsForm.tsx index 03f9fdb71a3..a4f36663d53 100644 --- a/packages/manager/src/features/Images/ImagesLanding/ImageRegions/ManageImageRegionsForm.tsx +++ b/packages/manager/src/features/Images/ImagesLanding/ImageRegions/ManageImageRegionsForm.tsx @@ -9,6 +9,7 @@ import { Link } from 'src/components/Link'; import { Notice } from 'src/components/Notice/Notice'; import { Paper } from 'src/components/Paper'; import { RegionMultiSelect } from 'src/components/RegionSelect/RegionMultiSelect'; +import { useIsGeckoEnabled } from 'src/components/RegionSelect/RegionSelect.utils'; import { Stack } from 'src/components/Stack'; import { Typography } from 'src/components/Typography'; import { useUpdateImageRegionsMutation } from 'src/queries/images'; @@ -29,7 +30,10 @@ export const ManageImageRegionsForm = (props: Props) => { const imageRegionIds = image?.regions.map(({ region }) => region) ?? []; const { enqueueSnackbar } = useSnackbar(); - const { data: regions } = useRegionsQuery(); + const { isGeckoGAEnabled } = useIsGeckoEnabled(); + const { data: regions } = useRegionsQuery({ + transformRegionLabel: isGeckoGAEnabled, + }); const { mutateAsync } = useUpdateImageRegionsMutation(image?.id ?? ''); const { diff --git a/packages/manager/src/features/Images/ImagesLanding/RegionsList.tsx b/packages/manager/src/features/Images/ImagesLanding/RegionsList.tsx index e17785ea634..fa61e55e4e5 100644 --- a/packages/manager/src/features/Images/ImagesLanding/RegionsList.tsx +++ b/packages/manager/src/features/Images/ImagesLanding/RegionsList.tsx @@ -1,6 +1,7 @@ import React from 'react'; import { StyledLinkButton } from 'src/components/Button/StyledLinkButton'; +import { useIsGeckoEnabled } from 'src/components/RegionSelect/RegionSelect.utils'; import { Typography } from 'src/components/Typography'; import { useRegionsQuery } from 'src/queries/regions/regions'; @@ -12,7 +13,10 @@ interface Props { } export const RegionsList = ({ onManageRegions, regions }: Props) => { - const { data: regionsData } = useRegionsQuery(); + const { isGeckoGAEnabled } = useIsGeckoEnabled(); + const { data: regionsData } = useRegionsQuery({ + transformRegionLabel: isGeckoGAEnabled, + }); return ( diff --git a/packages/manager/src/features/Kubernetes/ClusterList/KubernetesClusterRow.tsx b/packages/manager/src/features/Kubernetes/ClusterList/KubernetesClusterRow.tsx index 966a9d37aac..cbb56d31dcb 100644 --- a/packages/manager/src/features/Kubernetes/ClusterList/KubernetesClusterRow.tsx +++ b/packages/manager/src/features/Kubernetes/ClusterList/KubernetesClusterRow.tsx @@ -1,4 +1,3 @@ -import { KubeNodePoolResponse, KubernetesCluster } from '@linode/api-v4'; import Grid from '@mui/material/Unstable_Grid2'; import * as React from 'react'; import { Link } from 'react-router-dom'; @@ -7,6 +6,7 @@ import { makeStyles } from 'tss-react/mui'; import { Chip } from 'src/components/Chip'; import { DateTimeDisplay } from 'src/components/DateTimeDisplay'; import { Hidden } from 'src/components/Hidden'; +import { useIsGeckoEnabled } from 'src/components/RegionSelect/RegionSelect.utils'; import { TableCell } from 'src/components/TableCell'; import { TableRow } from 'src/components/TableRow'; import { @@ -23,6 +23,8 @@ import { } from '../kubeUtils'; import { ClusterActionMenu } from './ClusterActionMenu'; +import type { KubeNodePoolResponse, KubernetesCluster } from '@linode/api-v4'; + const useStyles = makeStyles()(() => ({ clusterRow: { '&:before': { @@ -68,7 +70,10 @@ export const KubernetesClusterRow = (props: Props) => { const { data: pools } = useAllKubernetesNodePoolQuery(cluster.id); const typesQuery = useSpecificTypes(pools?.map((pool) => pool.type) ?? []); const types = extendTypesQueryResult(typesQuery); - const { data: regions } = useRegionsQuery(); + const { isGeckoGAEnabled } = useIsGeckoEnabled(); + const { data: regions } = useRegionsQuery({ + transformRegionLabel: isGeckoGAEnabled, + }); const region = regions?.find((r) => r.id === cluster.region); diff --git a/packages/manager/src/features/Kubernetes/CreateCluster/CreateCluster.tsx b/packages/manager/src/features/Kubernetes/CreateCluster/CreateCluster.tsx index 2ff221c7f2c..bd93e77c531 100644 --- a/packages/manager/src/features/Kubernetes/CreateCluster/CreateCluster.tsx +++ b/packages/manager/src/features/Kubernetes/CreateCluster/CreateCluster.tsx @@ -14,6 +14,7 @@ import { LandingHeader } from 'src/components/LandingHeader'; import { Notice } from 'src/components/Notice/Notice'; import { Paper } from 'src/components/Paper'; import { RegionSelect } from 'src/components/RegionSelect/RegionSelect'; +import { useIsGeckoEnabled } from 'src/components/RegionSelect/RegionSelect.utils'; import { RegionHelperText } from 'src/components/SelectRegionPanel/RegionHelperText'; import { Stack } from 'src/components/Stack'; import { TextField } from 'src/components/TextField'; @@ -71,8 +72,10 @@ export const CreateCluster = () => { const [hasAgreed, setAgreed] = React.useState(false); const { mutateAsync: updateAccountAgreements } = useMutateAccountAgreements(); const [highAvailability, setHighAvailability] = React.useState(); - - const { data, error: regionsError } = useRegionsQuery(); + const { isGeckoGAEnabled } = useIsGeckoEnabled(); + const { data, error: regionsError } = useRegionsQuery({ + transformRegionLabel: isGeckoGAEnabled, + }); const regionsData = data ?? []; const history = useHistory(); const { data: account } = useAccount(); diff --git a/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/KubeClusterSpecs.tsx b/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/KubeClusterSpecs.tsx index d7f2407acb3..97fbb04d083 100644 --- a/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/KubeClusterSpecs.tsx +++ b/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/KubeClusterSpecs.tsx @@ -4,6 +4,7 @@ import * as React from 'react'; import { makeStyles } from 'tss-react/mui'; import { CircleProgress } from 'src/components/CircleProgress'; +import { useIsGeckoEnabled } from 'src/components/RegionSelect/RegionSelect.utils'; import { TooltipIcon } from 'src/components/TooltipIcon'; import { Typography } from 'src/components/Typography'; import { @@ -65,7 +66,10 @@ const useStyles = makeStyles()((theme: Theme) => ({ export const KubeClusterSpecs = React.memo((props: Props) => { const { cluster } = props; const { classes } = useStyles(); - const { data: regions } = useRegionsQuery(); + const { isGeckoGAEnabled } = useIsGeckoEnabled(); + const { data: regions } = useRegionsQuery({ + transformRegionLabel: isGeckoGAEnabled, + }); const theme = useTheme(); const { data: pools } = useAllKubernetesNodePoolQuery(cluster.id); const typesQuery = useSpecificTypes(pools?.map((pool) => pool.type) ?? []); diff --git a/packages/manager/src/features/Linodes/CloneLanding/Details.tsx b/packages/manager/src/features/Linodes/CloneLanding/Details.tsx index 771ce94a07c..bb6b9753dfa 100644 --- a/packages/manager/src/features/Linodes/CloneLanding/Details.tsx +++ b/packages/manager/src/features/Linodes/CloneLanding/Details.tsx @@ -1,4 +1,3 @@ -import { Disk, Linode } from '@linode/api-v4/lib/linodes'; import Close from '@mui/icons-material/Close'; import { useTheme } from '@mui/material/styles'; import * as React from 'react'; @@ -11,6 +10,7 @@ import { List } from 'src/components/List'; import { ListItem } from 'src/components/ListItem'; 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 { LinodeSelect } from 'src/features/Linodes/LinodeSelect/LinodeSelect'; import { useRegionsQuery } from 'src/queries/regions/regions'; @@ -21,12 +21,10 @@ import { StyledHeader, StyledTypography, } from './Details.styles'; -import { - EstimatedCloneTimeMode, - ExtendedConfig, - getAllDisks, - getEstimatedCloneTime, -} from './utilities'; +import { getAllDisks, getEstimatedCloneTime } from './utilities'; + +import type { EstimatedCloneTimeMode, ExtendedConfig } from './utilities'; +import type { Disk, Linode } from '@linode/api-v4/lib/linodes'; interface Props { clearAll: () => void; @@ -63,7 +61,10 @@ export const Details = (props: Props) => { thisLinodeRegion, } = props; - const { data: regions } = useRegionsQuery(); + const { isGeckoGAEnabled } = useIsGeckoEnabled(); + const { data: regions } = useRegionsQuery({ + transformRegionLabel: isGeckoGAEnabled, + }); const region = regions?.find((r) => r.id === thisLinodeRegion); diff --git a/packages/manager/src/features/Linodes/LinodeCreatev2/Region.tsx b/packages/manager/src/features/Linodes/LinodeCreatev2/Region.tsx index af2133284d8..e4d88427992 100644 --- a/packages/manager/src/features/Linodes/LinodeCreatev2/Region.tsx +++ b/packages/manager/src/features/Linodes/LinodeCreatev2/Region.tsx @@ -9,7 +9,10 @@ import { Link } from 'src/components/Link'; 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 { + isDistributedRegionSupported, + useIsGeckoEnabled, +} from 'src/components/RegionSelect/RegionSelect.utils'; import { RegionHelperText } from 'src/components/SelectRegionPanel/RegionHelperText'; import { Typography } from 'src/components/Typography'; import { useFlags } from 'src/hooks/useFlags'; @@ -77,7 +80,10 @@ export const Region = () => { globalGrantType: 'add_linodes', }); - const { data: regions } = useRegionsQuery(); + const { isGeckoGAEnabled } = useIsGeckoEnabled(); + const { data: regions } = useRegionsQuery({ + transformRegionLabel: isGeckoGAEnabled, + }); const onChange = async (region: RegionType) => { const isDistributedRegion = diff --git a/packages/manager/src/features/Linodes/LinodeCreatev2/Summary/Summary.tsx b/packages/manager/src/features/Linodes/LinodeCreatev2/Summary/Summary.tsx index 73277af3bc7..982f283d469 100644 --- a/packages/manager/src/features/Linodes/LinodeCreatev2/Summary/Summary.tsx +++ b/packages/manager/src/features/Linodes/LinodeCreatev2/Summary/Summary.tsx @@ -5,6 +5,7 @@ import { useFormContext, useWatch } from 'react-hook-form'; import { Divider } from 'src/components/Divider'; import { Paper } from 'src/components/Paper'; +import { useIsGeckoEnabled } from 'src/components/RegionSelect/RegionSelect.utils'; import { Stack } from 'src/components/Stack'; import { Typography } from 'src/components/Typography'; import { useImageQuery } from 'src/queries/images'; @@ -55,7 +56,10 @@ export const Summary = () => { ], }); - const { data: regions } = useRegionsQuery(); + const { isGeckoGAEnabled } = useIsGeckoEnabled(); + const { data: regions } = useRegionsQuery({ + transformRegionLabel: isGeckoGAEnabled, + }); const { data: type } = useTypeQuery(typeId ?? '', Boolean(typeId)); const { data: image } = useImageQuery(imageId ?? '', Boolean(imageId)); diff --git a/packages/manager/src/features/Linodes/LinodeCreatev2/shared/LinodeSelectTableRow.tsx b/packages/manager/src/features/Linodes/LinodeCreatev2/shared/LinodeSelectTableRow.tsx index 9f68f2fa8ae..d55aacf2a2c 100644 --- a/packages/manager/src/features/Linodes/LinodeCreatev2/shared/LinodeSelectTableRow.tsx +++ b/packages/manager/src/features/Linodes/LinodeCreatev2/shared/LinodeSelectTableRow.tsx @@ -3,6 +3,7 @@ import React from 'react'; import { FormControlLabel } from 'src/components/FormControlLabel'; import { InlineMenuAction } from 'src/components/InlineMenuAction/InlineMenuAction'; import { Radio } from 'src/components/Radio/Radio'; +import { useIsGeckoEnabled } from 'src/components/RegionSelect/RegionSelect.utils'; import { StatusIcon } from 'src/components/StatusIcon/StatusIcon'; import { TableCell } from 'src/components/TableCell'; import { TableRow } from 'src/components/TableRow'; @@ -30,7 +31,10 @@ export const LinodeSelectTableRow = (props: Props) => { Boolean(linode.image) ); - const { data: regions } = useRegionsQuery(); + const { isGeckoGAEnabled } = useIsGeckoEnabled(); + const { data: regions } = useRegionsQuery({ + transformRegionLabel: isGeckoGAEnabled, + }); const { data: type } = useTypeQuery(linode.type ?? '', Boolean(linode.type)); diff --git a/packages/manager/src/features/Linodes/LinodeEntityDetail.tsx b/packages/manager/src/features/Linodes/LinodeEntityDetail.tsx index 3783116c89b..3f8f7282e02 100644 --- a/packages/manager/src/features/Linodes/LinodeEntityDetail.tsx +++ b/packages/manager/src/features/Linodes/LinodeEntityDetail.tsx @@ -2,7 +2,10 @@ import * as React from 'react'; import { EntityDetail } from 'src/components/EntityDetail/EntityDetail'; import { Notice } from 'src/components/Notice/Notice'; -import { getIsDistributedRegion } from 'src/components/RegionSelect/RegionSelect.utils'; +import { + getIsDistributedRegion, + useIsGeckoEnabled, +} from 'src/components/RegionSelect/RegionSelect.utils'; import { getRestrictedResourceText } from 'src/features/Account/utils'; import { notificationContext as _notificationContext } from 'src/features/NotificationCenter/NotificationContext'; import { useIsResourceRestricted } from 'src/hooks/useIsResourceRestricted'; @@ -57,7 +60,10 @@ export const LinodeEntityDetail = (props: Props) => { const numberOfVolumes = volumes?.results ?? 0; - const { data: regions } = useRegionsQuery(); + const { isGeckoGAEnabled } = useIsGeckoEnabled(); + const { data: regions } = useRegionsQuery({ + transformRegionLabel: isGeckoGAEnabled, + }); const { configInterfaceWithVPC, diff --git a/packages/manager/src/features/Linodes/LinodesCreate/LinodeCreateContainer.tsx b/packages/manager/src/features/Linodes/LinodesCreate/LinodeCreateContainer.tsx index 01b45af41a6..cfa8a03ac3d 100644 --- a/packages/manager/src/features/Linodes/LinodesCreate/LinodeCreateContainer.tsx +++ b/packages/manager/src/features/Linodes/LinodesCreate/LinodeCreateContainer.tsx @@ -10,7 +10,6 @@ import { connect } from 'react-redux'; import { DocumentTitleSegment } from 'src/components/DocumentTitle'; import { LandingHeader } from 'src/components/LandingHeader'; import { ProductInformationBanner } from 'src/components/ProductInformationBanner/ProductInformationBanner'; -import { getNewRegionLabel } from 'src/components/RegionSelect/RegionSelect.utils'; import { withAccount } from 'src/containers/account.container'; import { withAccountSettings } from 'src/containers/accountSettings.container'; import { withEventsPollingActions } from 'src/containers/events.container'; @@ -331,20 +330,10 @@ class LinodeCreateContainer extends React.PureComponent { const selectedRegion = this.props.regionsData.find( (region) => region.id === selectedRegionID ); - const isGeckoGAEnabled = - this.props.flags.gecko2?.enabled && - this.props.flags.gecko2?.ga && - this.props.regionsData.some((region) => - region.capabilities.includes('Distributed Plans') - ); return ( selectedRegion && { - title: isGeckoGAEnabled - ? getNewRegionLabel({ - region: selectedRegion, - }) - : selectedRegion.label, + title: selectedRegion.label, } ); }; diff --git a/packages/manager/src/features/Linodes/LinodesCreate/SelectLinodePanel/SelectLinodeCard.tsx b/packages/manager/src/features/Linodes/LinodesCreate/SelectLinodePanel/SelectLinodeCard.tsx index 434c1c4b4d9..7404064133b 100644 --- a/packages/manager/src/features/Linodes/LinodesCreate/SelectLinodePanel/SelectLinodeCard.tsx +++ b/packages/manager/src/features/Linodes/LinodesCreate/SelectLinodePanel/SelectLinodeCard.tsx @@ -1,8 +1,8 @@ -import { Linode } from '@linode/api-v4'; import Grid from '@mui/material/Unstable_Grid2'; import React from 'react'; import { Button } from 'src/components/Button/Button'; +import { useIsGeckoEnabled } from 'src/components/RegionSelect/RegionSelect.utils'; import { SelectionCard } from 'src/components/SelectionCard/SelectionCard'; import { Stack } from 'src/components/Stack'; import { StatusIcon } from 'src/components/StatusIcon/StatusIcon'; @@ -16,6 +16,8 @@ import { isNotNullOrUndefined } from 'src/utilities/nullOrUndefined'; import { getLinodeIconStatus } from '../../LinodesLanding/utils'; +import type { Linode } from '@linode/api-v4'; + interface Props { disabled?: boolean; handlePowerOff: () => void; @@ -33,7 +35,10 @@ export const SelectLinodeCard = ({ selected, showPowerActions, }: Props) => { - const { data: regions } = useRegionsQuery(); + const { isGeckoGAEnabled } = useIsGeckoEnabled(); + const { data: regions } = useRegionsQuery({ + transformRegionLabel: isGeckoGAEnabled, + }); const { data: linodeType } = useTypeQuery( linode?.type ?? '', diff --git a/packages/manager/src/features/Linodes/LinodesCreate/VLANAvailabilityNotice.tsx b/packages/manager/src/features/Linodes/LinodesCreate/VLANAvailabilityNotice.tsx index 1305bf811aa..78f20f486a2 100644 --- a/packages/manager/src/features/Linodes/LinodesCreate/VLANAvailabilityNotice.tsx +++ b/packages/manager/src/features/Linodes/LinodesCreate/VLANAvailabilityNotice.tsx @@ -1,18 +1,23 @@ -import { Theme, styled } from '@mui/material/styles'; +import { styled } from '@mui/material/styles'; import * as React from 'react'; import { List } from 'src/components/List'; import { ListItem } from 'src/components/ListItem'; import { Notice } from 'src/components/Notice/Notice'; +import { useIsGeckoEnabled } from 'src/components/RegionSelect/RegionSelect.utils'; import { TextTooltip } from 'src/components/TextTooltip'; import { Typography } from 'src/components/Typography'; import { useRegionsQuery } from 'src/queries/regions/regions'; import { regionsWithFeature } from 'src/utilities/doesRegionSupportFeature'; import type { Region } from '@linode/api-v4'; +import type { Theme } from '@mui/material/styles'; export const VLANAvailabilityNotice = () => { - const regions = useRegionsQuery().data ?? []; + const { isGeckoGAEnabled } = useIsGeckoEnabled(); + + const regions = + useRegionsQuery({ transformRegionLabel: isGeckoGAEnabled }).data ?? []; const regionsThatSupportVLANs: Region[] = regionsWithFeature(regions, 'Vlans') .map((region) => region) diff --git a/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/NetworkingSummaryPanel/NetworkTransfer.tsx b/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/NetworkingSummaryPanel/NetworkTransfer.tsx index 8561c60f10d..4fdb4834f08 100644 --- a/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/NetworkingSummaryPanel/NetworkTransfer.tsx +++ b/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/NetworkingSummaryPanel/NetworkTransfer.tsx @@ -1,6 +1,7 @@ import { useTheme } from '@mui/material/styles'; import * as React from 'react'; +import { useIsGeckoEnabled } from 'src/components/RegionSelect/RegionSelect.utils'; import { Typography } from 'src/components/Typography'; import { useAccountNetworkTransfer } from 'src/queries/account/transfer'; import { useLinodeTransfer } from 'src/queries/linodes/stats'; @@ -28,7 +29,10 @@ export const NetworkTransfer = React.memo((props: Props) => { const theme = useTheme(); const linodeTransfer = useLinodeTransfer(linodeId); - const regions = useRegionsQuery(); + const { isGeckoGAEnabled } = useIsGeckoEnabled(); + const { data: regions } = useRegionsQuery({ + transformRegionLabel: isGeckoGAEnabled, + }); const { data: type } = useTypeQuery(linodeType || '', Boolean(linodeType)); const { data: accountTransfer, @@ -36,9 +40,7 @@ export const NetworkTransfer = React.memo((props: Props) => { isLoading: accountTransferLoading, } = useAccountNetworkTransfer(); - const currentRegion = regions.data?.find( - (region) => region.id === linodeRegionId - ); + const currentRegion = regions?.find((region) => region.id === linodeRegionId); const dynamicDClinodeTransferData = getDynamicDCNetworkTransferData({ networkTransferData: linodeTransfer.data, regionId: linodeRegionId, diff --git a/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/ViewIPDrawer.tsx b/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/ViewIPDrawer.tsx index 3e0b23e06e5..2e4628f90f9 100644 --- a/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/ViewIPDrawer.tsx +++ b/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/ViewIPDrawer.tsx @@ -1,12 +1,14 @@ -import { IPAddress } from '@linode/api-v4/lib/networking'; import { styled } from '@mui/material/styles'; import * as React from 'react'; import { ActionsPanel } from 'src/components/ActionsPanel/ActionsPanel'; import { Drawer } from 'src/components/Drawer'; +import { useIsGeckoEnabled } from 'src/components/RegionSelect/RegionSelect.utils'; import { Typography } from 'src/components/Typography'; import { useRegionsQuery } from 'src/queries/regions/regions'; +import type { IPAddress } from '@linode/api-v4/lib/networking'; + interface Props { ip?: IPAddress; onClose: () => void; @@ -16,7 +18,10 @@ interface Props { export const ViewIPDrawer = (props: Props) => { const { ip } = props; - const { data: regions } = useRegionsQuery(); + const { isGeckoGAEnabled } = useIsGeckoEnabled(); + const { data: regions } = useRegionsQuery({ + transformRegionLabel: isGeckoGAEnabled, + }); const actualRegion = regions?.find((r) => r.id === ip?.region); diff --git a/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/ViewRangeDrawer.tsx b/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/ViewRangeDrawer.tsx index a92e9e2e182..36317171dbb 100644 --- a/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/ViewRangeDrawer.tsx +++ b/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/ViewRangeDrawer.tsx @@ -1,12 +1,14 @@ -import { IPRange } from '@linode/api-v4/lib/networking'; import { styled } from '@mui/material/styles'; import * as React from 'react'; import { ActionsPanel } from 'src/components/ActionsPanel/ActionsPanel'; import { Drawer } from 'src/components/Drawer'; +import { useIsGeckoEnabled } from 'src/components/RegionSelect/RegionSelect.utils'; import { Typography } from 'src/components/Typography'; import { useRegionsQuery } from 'src/queries/regions/regions'; +import type { IPRange } from '@linode/api-v4/lib/networking'; + interface Props { onClose: () => void; open: boolean; @@ -17,7 +19,10 @@ export const ViewRangeDrawer = (props: Props) => { const { range } = props; const region = (range && range.region) || ''; - const { data: regions } = useRegionsQuery(); + const { isGeckoGAEnabled } = useIsGeckoEnabled(); + const { data: regions } = useRegionsQuery({ + transformRegionLabel: isGeckoGAEnabled, + }); const actualRegion = regions?.find((r) => r.id === region); diff --git a/packages/manager/src/features/Linodes/LinodesLanding/RegionIndicator.tsx b/packages/manager/src/features/Linodes/LinodesLanding/RegionIndicator.tsx index 57ed7b65112..44d2e381dde 100644 --- a/packages/manager/src/features/Linodes/LinodesLanding/RegionIndicator.tsx +++ b/packages/manager/src/features/Linodes/LinodesLanding/RegionIndicator.tsx @@ -1,5 +1,6 @@ import * as React from 'react'; +import { useIsGeckoEnabled } from 'src/components/RegionSelect/RegionSelect.utils'; import { useRegionsQuery } from 'src/queries/regions/regions'; interface Props { @@ -8,7 +9,10 @@ interface Props { export const RegionIndicator = (props: Props) => { const { region } = props; - const { data: regions } = useRegionsQuery(); + const { isGeckoGAEnabled } = useIsGeckoEnabled(); + const { data: regions } = useRegionsQuery({ + transformRegionLabel: isGeckoGAEnabled, + }); const actualRegion = regions?.find((r) => r.id === region); diff --git a/packages/manager/src/features/Linodes/MigrateLinode/ConfigureForm.tsx b/packages/manager/src/features/Linodes/MigrateLinode/ConfigureForm.tsx index da0a2bae841..ab3ac231528 100644 --- a/packages/manager/src/features/Linodes/MigrateLinode/ConfigureForm.tsx +++ b/packages/manager/src/features/Linodes/MigrateLinode/ConfigureForm.tsx @@ -61,7 +61,10 @@ export const ConfigureForm = React.memo((props: Props) => { const flags = useFlags(); const { isPlacementGroupsEnabled } = useIsPlacementGroupsEnabled(); - const { data: regions } = useRegionsQuery(); + const { isGeckoBetaEnabled, isGeckoGAEnabled } = useIsGeckoEnabled(); + const { data: regions } = useRegionsQuery({ + transformRegionLabel: isGeckoGAEnabled, + }); const { data: currentLinodeType } = useTypeQuery( linodeType || '', @@ -149,8 +152,6 @@ export const ConfigureForm = React.memo((props: Props) => { currentActualRegion?.site_type === 'distributed' || currentActualRegion?.site_type === 'edge'; - const { isGeckoBetaEnabled } = useIsGeckoEnabled(); - return ( Configure Migration diff --git a/packages/manager/src/features/LoadBalancers/LoadBalancerDetail/ServiceTargets/LinodeOrIPSelect.tsx b/packages/manager/src/features/LoadBalancers/LoadBalancerDetail/ServiceTargets/LinodeOrIPSelect.tsx index df3a31e1765..26111ff5db4 100644 --- a/packages/manager/src/features/LoadBalancers/LoadBalancerDetail/ServiceTargets/LinodeOrIPSelect.tsx +++ b/packages/manager/src/features/LoadBalancers/LoadBalancerDetail/ServiceTargets/LinodeOrIPSelect.tsx @@ -3,6 +3,7 @@ import React from 'react'; import { Autocomplete } from 'src/components/Autocomplete/Autocomplete'; import { SelectedIcon } from 'src/components/Autocomplete/Autocomplete.styles'; import { Box } from 'src/components/Box'; +import { useIsGeckoEnabled } from 'src/components/RegionSelect/RegionSelect.utils'; import { Stack } from 'src/components/Stack'; import { linodeFactory } from 'src/factories'; import { useInfiniteLinodesQuery } from 'src/queries/linodes/linodes'; @@ -53,7 +54,10 @@ export const LinodeOrIPSelect = (props: Props) => { isLoading, } = useInfiniteLinodesQuery(filter); - const { data: regions } = useRegionsQuery(); + const { isGeckoGAEnabled } = useIsGeckoEnabled(); + const { data: regions } = useRegionsQuery({ + transformRegionLabel: isGeckoGAEnabled, + }); const linodes = data?.pages.flatMap((page) => page.data) ?? []; diff --git a/packages/manager/src/features/NodeBalancers/NodeBalancerCreate.tsx b/packages/manager/src/features/NodeBalancers/NodeBalancerCreate.tsx index c06b15f7b15..c13f2faa199 100644 --- a/packages/manager/src/features/NodeBalancers/NodeBalancerCreate.tsx +++ b/packages/manager/src/features/NodeBalancers/NodeBalancerCreate.tsx @@ -26,6 +26,7 @@ import { Link } from 'src/components/Link'; import { Notice } from 'src/components/Notice/Notice'; import { Paper } from 'src/components/Paper'; import { RegionSelect } from 'src/components/RegionSelect/RegionSelect'; +import { useIsGeckoEnabled } from 'src/components/RegionSelect/RegionSelect.utils'; import { SelectFirewallPanel } from 'src/components/SelectFirewallPanel/SelectFirewallPanel'; import { RegionHelperText } from 'src/components/SelectRegionPanel/RegionHelperText'; import { Stack } from 'src/components/Stack'; @@ -109,7 +110,10 @@ const defaultFieldsStates = { const NodeBalancerCreate = () => { const { data: agreements } = useAccountAgreements(); const { data: profile } = useProfile(); - const { data: regions } = useRegionsQuery(); + const { isGeckoGAEnabled } = useIsGeckoEnabled(); + const { data: regions } = useRegionsQuery({ + transformRegionLabel: isGeckoGAEnabled, + }); const { data: types } = useNodeBalancerTypesQuery(); const { diff --git a/packages/manager/src/features/NodeBalancers/NodeBalancerDetail/NodeBalancerSummary/SummaryPanel.tsx b/packages/manager/src/features/NodeBalancers/NodeBalancerDetail/NodeBalancerSummary/SummaryPanel.tsx index b79f93fe010..bf5817afe76 100644 --- a/packages/manager/src/features/NodeBalancers/NodeBalancerDetail/NodeBalancerSummary/SummaryPanel.tsx +++ b/packages/manager/src/features/NodeBalancers/NodeBalancerDetail/NodeBalancerSummary/SummaryPanel.tsx @@ -3,6 +3,7 @@ import * as React from 'react'; import { Link, useParams } from 'react-router-dom'; import { Paper } from 'src/components/Paper'; +import { useIsGeckoEnabled } from 'src/components/RegionSelect/RegionSelect.utils'; import { TagCell } from 'src/components/TagCell/TagCell'; import { Typography } from 'src/components/Typography'; import { IPAddress } from 'src/features/Linodes/LinodesLanding/IPAddress'; @@ -21,7 +22,10 @@ export const SummaryPanel = () => { const id = Number(nodeBalancerId); const { data: nodebalancer } = useNodeBalancerQuery(id); const { data: configs } = useAllNodeBalancerConfigsQuery(id); - const { data: regions } = useRegionsQuery(); + const { isGeckoGAEnabled } = useIsGeckoEnabled(); + const { data: regions } = useRegionsQuery({ + transformRegionLabel: isGeckoGAEnabled, + }); const { data: attachedFirewallData } = useNodeBalancersFirewallsQuery(id); const linkText = attachedFirewallData?.data[0]?.label; const linkID = attachedFirewallData?.data[0]?.id; diff --git a/packages/manager/src/features/NotificationCenter/NotificationData/useFormattedNotifications.tsx b/packages/manager/src/features/NotificationCenter/NotificationData/useFormattedNotifications.tsx index d67fdbb5807..acfb0e73522 100644 --- a/packages/manager/src/features/NotificationCenter/NotificationData/useFormattedNotifications.tsx +++ b/packages/manager/src/features/NotificationCenter/NotificationData/useFormattedNotifications.tsx @@ -1,10 +1,3 @@ -import { Profile } from '@linode/api-v4'; -import { - Notification, - NotificationSeverity, - NotificationType, -} from '@linode/api-v4/lib/account'; -import { Region } from '@linode/api-v4/lib/regions'; import { styled } from '@mui/material/styles'; import { DateTime } from 'luxon'; import { path } from 'ramda'; @@ -12,6 +5,7 @@ import * as React from 'react'; import { StyledLinkButton } from 'src/components/Button/StyledLinkButton'; import { Link } from 'src/components/Link'; +import { useIsGeckoEnabled } from 'src/components/RegionSelect/RegionSelect.utils'; import { Typography } from 'src/components/Typography'; import { complianceUpdateContext } from 'src/context/complianceUpdateContext'; import { reportException } from 'src/exceptionReporting'; @@ -22,9 +16,17 @@ import { useRegionsQuery } from 'src/queries/regions/regions'; import { formatDate } from 'src/utilities/formatDate'; import { notificationContext as _notificationContext } from '../NotificationContext'; -import { NotificationItem } from '../NotificationSection'; -import RenderNotification from './RenderNotification'; import { checkIfMaintenanceNotification } from './notificationUtils'; +import RenderNotification from './RenderNotification'; + +import type { NotificationItem } from '../NotificationSection'; +import type { Profile } from '@linode/api-v4'; +import type { + Notification, + NotificationSeverity, + NotificationType, +} from '@linode/api-v4/lib/account'; +import type { Region } from '@linode/api-v4/lib/regions'; export interface ExtendedNotification extends Notification { jsx?: JSX.Element; @@ -37,7 +39,10 @@ export const useFormattedNotifications = (): NotificationItem[] => { hasDismissedNotifications, } = useDismissibleNotifications(); - const { data: regions } = useRegionsQuery(); + const { isGeckoGAEnabled } = useIsGeckoEnabled(); + const { data: regions } = useRegionsQuery({ + transformRegionLabel: isGeckoGAEnabled, + }); const { data: profile } = useProfile(); const { data: notifications } = useNotificationsQuery(); diff --git a/packages/manager/src/features/ObjectStorage/AccessKeyLanding/AccessKeyRegions/AccessKeyRegions.tsx b/packages/manager/src/features/ObjectStorage/AccessKeyLanding/AccessKeyRegions/AccessKeyRegions.tsx index 972caeb5611..f25ce3f0fa8 100644 --- a/packages/manager/src/features/ObjectStorage/AccessKeyLanding/AccessKeyRegions/AccessKeyRegions.tsx +++ b/packages/manager/src/features/ObjectStorage/AccessKeyLanding/AccessKeyRegions/AccessKeyRegions.tsx @@ -1,6 +1,7 @@ import * as React from 'react'; import { RegionMultiSelect } from 'src/components/RegionSelect/RegionMultiSelect'; +import { useIsGeckoEnabled } from 'src/components/RegionSelect/RegionSelect.utils'; import { useRegionsQuery } from 'src/queries/regions/regions'; import { sortByString } from 'src/utilities/sort-by'; @@ -22,7 +23,10 @@ const sortRegionOptions = (a: Region, b: Region) => { export const AccessKeyRegions = (props: Props) => { const { disabled, error, onChange, required, selectedRegion } = props; - const { data: regions, error: regionsError } = useRegionsQuery(); + const { isGeckoGAEnabled } = useIsGeckoEnabled(); + const { data: regions, error: regionsError } = useRegionsQuery({ + transformRegionLabel: isGeckoGAEnabled, + }); // Error could be: 1. General Regions error, 2. Field error, 3. Nothing const errorText = error || regionsError?.[0]?.reason; diff --git a/packages/manager/src/features/ObjectStorage/AccessKeyLanding/AccessKeyTable/HostNameTableCell.tsx b/packages/manager/src/features/ObjectStorage/AccessKeyLanding/AccessKeyTable/HostNameTableCell.tsx index ca4e0fbb6e5..d62935827be 100644 --- a/packages/manager/src/features/ObjectStorage/AccessKeyLanding/AccessKeyTable/HostNameTableCell.tsx +++ b/packages/manager/src/features/ObjectStorage/AccessKeyLanding/AccessKeyTable/HostNameTableCell.tsx @@ -3,6 +3,7 @@ import React from 'react'; import { StyledLinkButton } from 'src/components/Button/StyledLinkButton'; import { CopyTooltip } from 'src/components/CopyTooltip/CopyTooltip'; +import { useIsGeckoEnabled } from 'src/components/RegionSelect/RegionSelect.utils'; import { TableCell } from 'src/components/TableCell'; import { useRegionsQuery } from 'src/queries/regions/regions'; import { getRegionsByRegionId } from 'src/utilities/regions'; @@ -23,7 +24,10 @@ export const HostNameTableCell = ({ setShowHostNamesDrawers, storageKeyData, }: Props) => { - const { data: regionsData } = useRegionsQuery(); + const { isGeckoGAEnabled } = useIsGeckoEnabled(); + const { data: regionsData } = useRegionsQuery({ + transformRegionLabel: isGeckoGAEnabled, + }); const regionsLookup = regionsData && getRegionsByRegionId(regionsData); diff --git a/packages/manager/src/features/ObjectStorage/AccessKeyLanding/BucketPermissionsTable.tsx b/packages/manager/src/features/ObjectStorage/AccessKeyLanding/BucketPermissionsTable.tsx index d8d9240d2b4..5f97e8d9961 100644 --- a/packages/manager/src/features/ObjectStorage/AccessKeyLanding/BucketPermissionsTable.tsx +++ b/packages/manager/src/features/ObjectStorage/AccessKeyLanding/BucketPermissionsTable.tsx @@ -1,11 +1,8 @@ -import { - ObjectStorageKeyBucketAccessPermissions, - ObjectStorageKeyBucketAccess, -} from '@linode/api-v4/lib/object-storage/types'; import { update } from 'ramda'; import * as React from 'react'; import { Radio } from 'src/components/Radio/Radio'; +import { useIsGeckoEnabled } from 'src/components/RegionSelect/RegionSelect.utils'; import { TableBody } from 'src/components/TableBody'; import { TableCell } from 'src/components/TableCell'; import { TableHead } from 'src/components/TableHead'; @@ -25,6 +22,10 @@ import { } from './AccessTable.styles'; import type { MODE } from './types'; +import type { + ObjectStorageKeyBucketAccess, + ObjectStorageKeyBucketAccessPermissions, +} from '@linode/api-v4/lib/object-storage/types'; export const getUpdatedScopes = ( oldScopes: ObjectStorageKeyBucketAccess[], @@ -59,7 +60,10 @@ interface Props { export const BucketPermissionsTable = React.memo((props: Props) => { const { bucket_access, checked, mode, selectedRegions, updateScopes } = props; - const { data: regionsData } = useRegionsQuery(); + const { isGeckoGAEnabled } = useIsGeckoEnabled(); + const { data: regionsData } = useRegionsQuery({ + transformRegionLabel: isGeckoGAEnabled, + }); const regionsLookup = regionsData && getRegionsByRegionId(regionsData); if (!bucket_access || !regionsLookup) { diff --git a/packages/manager/src/features/ObjectStorage/AccessKeyLanding/HostNamesDrawer.tsx b/packages/manager/src/features/ObjectStorage/AccessKeyLanding/HostNamesDrawer.tsx index c6f22605603..9b772536661 100644 --- a/packages/manager/src/features/ObjectStorage/AccessKeyLanding/HostNamesDrawer.tsx +++ b/packages/manager/src/features/ObjectStorage/AccessKeyLanding/HostNamesDrawer.tsx @@ -1,14 +1,16 @@ -import { ObjectStorageKeyRegions } from '@linode/api-v4'; import * as React from 'react'; import { Box } from 'src/components/Box'; import { CopyableTextField } from 'src/components/CopyableTextField/CopyableTextField'; import { Drawer } from 'src/components/Drawer'; +import { useIsGeckoEnabled } from 'src/components/RegionSelect/RegionSelect.utils'; import { useRegionsQuery } from 'src/queries/regions/regions'; import { getRegionsByRegionId } from 'src/utilities/regions'; import { CopyAllHostnames } from './CopyAllHostnames'; +import type { ObjectStorageKeyRegions } from '@linode/api-v4'; + interface Props { onClose: () => void; open: boolean; @@ -17,7 +19,10 @@ interface Props { export const HostNamesDrawer = (props: Props) => { const { onClose, open, regions } = props; - const { data: regionsData } = useRegionsQuery(); + const { isGeckoGAEnabled } = useIsGeckoEnabled(); + const { data: regionsData } = useRegionsQuery({ + transformRegionLabel: isGeckoGAEnabled, + }); const regionsLookup = regionsData && getRegionsByRegionId(regionsData); if (!regionsData || !regionsLookup) { diff --git a/packages/manager/src/features/ObjectStorage/AccessKeyLanding/HostNamesList.tsx b/packages/manager/src/features/ObjectStorage/AccessKeyLanding/HostNamesList.tsx index da1e0406a3f..43c7abe9d2d 100644 --- a/packages/manager/src/features/ObjectStorage/AccessKeyLanding/HostNamesList.tsx +++ b/packages/manager/src/features/ObjectStorage/AccessKeyLanding/HostNamesList.tsx @@ -4,6 +4,7 @@ import React, { useRef } from 'react'; import { Box } from 'src/components/Box'; import { CopyableTextField } from 'src/components/CopyableTextField/CopyableTextField'; import { List } from 'src/components/List'; +import { useIsGeckoEnabled } from 'src/components/RegionSelect/RegionSelect.utils'; import { useRegionsQuery } from 'src/queries/regions/regions'; import { omittedProps } from 'src/utilities/omittedProps'; import { getRegionsByRegionId } from 'src/utilities/regions'; @@ -17,7 +18,10 @@ interface Props { } export const HostNamesList = ({ objectStorageKey }: Props) => { - const { data: regionsData } = useRegionsQuery(); + const { isGeckoGAEnabled } = useIsGeckoEnabled(); + const { data: regionsData } = useRegionsQuery({ + transformRegionLabel: isGeckoGAEnabled, + }); const regionsLookup = regionsData && getRegionsByRegionId(regionsData); const listRef = useRef(null); diff --git a/packages/manager/src/features/ObjectStorage/BucketLanding/BucketDetailsDrawer.tsx b/packages/manager/src/features/ObjectStorage/BucketLanding/BucketDetailsDrawer.tsx index efaeee2688a..5fd826dcef8 100644 --- a/packages/manager/src/features/ObjectStorage/BucketLanding/BucketDetailsDrawer.tsx +++ b/packages/manager/src/features/ObjectStorage/BucketLanding/BucketDetailsDrawer.tsx @@ -9,6 +9,7 @@ import { CopyTooltip } from 'src/components/CopyTooltip/CopyTooltip'; import { Divider } from 'src/components/Divider'; import { Drawer } from 'src/components/Drawer'; import { Link } from 'src/components/Link'; +import { useIsGeckoEnabled } from 'src/components/RegionSelect/RegionSelect.utils'; import { Typography } from 'src/components/Typography'; import { useAccountManagement } from 'src/hooks/useAccountManagement'; import { useFlags } from 'src/hooks/useFlags'; @@ -64,7 +65,10 @@ export const BucketDetailsDrawer = React.memo( const { data: clusters } = useObjectStorageClusters( !isObjMultiClusterEnabled ); - const { data: regions } = useRegionsQuery(); + const { isGeckoGAEnabled } = useIsGeckoEnabled(); + const { data: regions } = useRegionsQuery({ + transformRegionLabel: isGeckoGAEnabled, + }); const { data: profile } = useProfile(); const actualCluster = clusters?.find((c) => c.id === cluster); const region = regions?.find((r) => r.id === actualCluster?.region); diff --git a/packages/manager/src/features/ObjectStorage/BucketLanding/BucketLanding.tsx b/packages/manager/src/features/ObjectStorage/BucketLanding/BucketLanding.tsx index f3e6c7b16f7..54ec094b028 100644 --- a/packages/manager/src/features/ObjectStorage/BucketLanding/BucketLanding.tsx +++ b/packages/manager/src/features/ObjectStorage/BucketLanding/BucketLanding.tsx @@ -1,9 +1,3 @@ -import { - ObjectStorageBucket, - ObjectStorageCluster, -} from '@linode/api-v4/lib/object-storage'; -import { APIError } from '@linode/api-v4/lib/types'; -import { Theme } from '@mui/material/styles'; import Grid from '@mui/material/Unstable_Grid2'; import * as React from 'react'; import { makeStyles } from 'tss-react/mui'; @@ -14,6 +8,7 @@ import { ErrorState } from 'src/components/ErrorState/ErrorState'; import { Link } from 'src/components/Link'; import { Notice } from 'src/components/Notice/Notice'; import OrderBy from 'src/components/OrderBy'; +import { useIsGeckoEnabled } from 'src/components/RegionSelect/RegionSelect.utils'; import { TransferDisplay } from 'src/components/TransferDisplay/TransferDisplay'; import { TypeToConfirmDialog } from 'src/components/TypeToConfirmDialog/TypeToConfirmDialog'; import { Typography } from 'src/components/Typography'; @@ -21,7 +16,6 @@ import { useAccountManagement } from 'src/hooks/useAccountManagement'; import { useFlags } from 'src/hooks/useFlags'; import { useOpenClose } from 'src/hooks/useOpenClose'; import { - BucketError, useDeleteBucketMutation, useObjectStorageBuckets, useObjectStorageClusters, @@ -40,6 +34,14 @@ import { BucketDetailsDrawer } from './BucketDetailsDrawer'; import { BucketLandingEmptyState } from './BucketLandingEmptyState'; import { BucketTable } from './BucketTable'; +import type { + ObjectStorageBucket, + ObjectStorageCluster, +} from '@linode/api-v4/lib/object-storage'; +import type { APIError } from '@linode/api-v4/lib/types'; +import type { Theme } from '@mui/material/styles'; +import type { BucketError } from 'src/queries/objectStorage'; + const useStyles = makeStyles()((theme: Theme) => ({ copy: { marginTop: theme.spacing(), @@ -298,7 +300,10 @@ interface UnavailableClustersDisplayProps { const UnavailableClustersDisplay = React.memo( ({ unavailableClusters }: UnavailableClustersDisplayProps) => { - const { data: regions } = useRegionsQuery(); + const { isGeckoGAEnabled } = useIsGeckoEnabled(); + const { data: regions } = useRegionsQuery({ + transformRegionLabel: isGeckoGAEnabled, + }); const regionsAffected = unavailableClusters.map( (cluster) => diff --git a/packages/manager/src/features/ObjectStorage/BucketLanding/BucketRegions.tsx b/packages/manager/src/features/ObjectStorage/BucketLanding/BucketRegions.tsx index 40d12acbfab..cc2911fe835 100644 --- a/packages/manager/src/features/ObjectStorage/BucketLanding/BucketRegions.tsx +++ b/packages/manager/src/features/ObjectStorage/BucketLanding/BucketRegions.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'; interface Props { @@ -15,7 +16,10 @@ interface Props { export const BucketRegions = (props: Props) => { const { disabled, error, onBlur, onChange, required, selectedRegion } = props; - const { data: regions, error: regionsError } = useRegionsQuery(); + const { isGeckoGAEnabled } = useIsGeckoEnabled(); + const { data: regions, error: regionsError } = useRegionsQuery({ + transformRegionLabel: isGeckoGAEnabled, + }); // Error could be: 1. General Regions error, 2. Field error, 3. Nothing const errorText = error || regionsError?.[0]?.reason; diff --git a/packages/manager/src/features/ObjectStorage/BucketLanding/BucketTableRow.tsx b/packages/manager/src/features/ObjectStorage/BucketLanding/BucketTableRow.tsx index 48a52341fd7..764ae70fcf3 100644 --- a/packages/manager/src/features/ObjectStorage/BucketLanding/BucketTableRow.tsx +++ b/packages/manager/src/features/ObjectStorage/BucketLanding/BucketTableRow.tsx @@ -1,9 +1,9 @@ -import { ObjectStorageBucket } from '@linode/api-v4/lib/object-storage'; import Grid from '@mui/material/Unstable_Grid2'; import * as React from 'react'; import { DateTimeDisplay } from 'src/components/DateTimeDisplay'; import { Hidden } from 'src/components/Hidden'; +import { useIsGeckoEnabled } from 'src/components/RegionSelect/RegionSelect.utils'; import { TableCell } from 'src/components/TableCell'; import { Typography } from 'src/components/Typography'; import { useAccountManagement } from 'src/hooks/useAccountManagement'; @@ -24,6 +24,8 @@ import { StyledBucketSizeCell, } from './BucketTableRow.styles'; +import type { ObjectStorageBucket } from '@linode/api-v4/lib/object-storage'; + export interface BucketTableRowProps extends ObjectStorageBucket { onDetails: () => void; onRemove: () => void; @@ -42,7 +44,10 @@ export const BucketTableRow = (props: BucketTableRowProps) => { size, } = props; - const { data: regions } = useRegionsQuery(); + const { isGeckoGAEnabled } = useIsGeckoEnabled(); + const { data: regions } = useRegionsQuery({ + transformRegionLabel: isGeckoGAEnabled, + }); const flags = useFlags(); const { account } = useAccountManagement(); diff --git a/packages/manager/src/features/ObjectStorage/BucketLanding/ClusterSelect.tsx b/packages/manager/src/features/ObjectStorage/BucketLanding/ClusterSelect.tsx index 21d431ff761..e68295d1d0b 100644 --- a/packages/manager/src/features/ObjectStorage/BucketLanding/ClusterSelect.tsx +++ b/packages/manager/src/features/ObjectStorage/BucketLanding/ClusterSelect.tsx @@ -1,10 +1,12 @@ -import { Region } from '@linode/api-v4/lib/regions'; import * as React from 'react'; import { RegionSelect } from 'src/components/RegionSelect/RegionSelect'; +import { useIsGeckoEnabled } from 'src/components/RegionSelect/RegionSelect.utils'; import { useObjectStorageClusters } from 'src/queries/objectStorage'; import { useRegionsQuery } from 'src/queries/regions/regions'; +import type { Region } from '@linode/api-v4/lib/regions'; + interface Props { disabled?: boolean; error?: string; @@ -25,7 +27,10 @@ export const ClusterSelect: React.FC = (props) => { } = props; const { data: clusters, error: clustersError } = useObjectStorageClusters(); - const { data: regions } = useRegionsQuery(); + const { isGeckoGAEnabled } = useIsGeckoEnabled(); + const { data: regions } = useRegionsQuery({ + transformRegionLabel: isGeckoGAEnabled, + }); const regionOptions = clusters?.reduce((acc, cluster) => { const region = regions?.find((r) => r.id === cluster.region); diff --git a/packages/manager/src/features/ObjectStorage/BucketLanding/OMC_BucketLanding.tsx b/packages/manager/src/features/ObjectStorage/BucketLanding/OMC_BucketLanding.tsx index ab2f8f2a12e..7cbac5dbd6e 100644 --- a/packages/manager/src/features/ObjectStorage/BucketLanding/OMC_BucketLanding.tsx +++ b/packages/manager/src/features/ObjectStorage/BucketLanding/OMC_BucketLanding.tsx @@ -1,7 +1,3 @@ -import { Region } from '@linode/api-v4'; -import { ObjectStorageBucket } from '@linode/api-v4/lib/object-storage'; -import { APIError } from '@linode/api-v4/lib/types'; -import { Theme } from '@mui/material/styles'; import Grid from '@mui/material/Unstable_Grid2'; import * as React from 'react'; import { makeStyles } from 'tss-react/mui'; @@ -12,6 +8,7 @@ import { ErrorState } from 'src/components/ErrorState/ErrorState'; import { Link } from 'src/components/Link'; import { Notice } from 'src/components/Notice/Notice'; import OrderBy from 'src/components/OrderBy'; +import { useIsGeckoEnabled } from 'src/components/RegionSelect/RegionSelect.utils'; import { TransferDisplay } from 'src/components/TransferDisplay/TransferDisplay'; import { TypeToConfirmDialog } from 'src/components/TypeToConfirmDialog/TypeToConfirmDialog'; import { Typography } from 'src/components/Typography'; @@ -19,7 +16,6 @@ import { useAccountManagement } from 'src/hooks/useAccountManagement'; import { useFlags } from 'src/hooks/useFlags'; import { useOpenClose } from 'src/hooks/useOpenClose'; import { - BucketError, useDeleteBucketWithRegionMutation, useObjectStorageBuckets, } from 'src/queries/objectStorage'; @@ -38,6 +34,12 @@ import { BucketDetailsDrawer } from './BucketDetailsDrawer'; import { BucketLandingEmptyState } from './BucketLandingEmptyState'; import { BucketTable } from './BucketTable'; +import type { Region } from '@linode/api-v4'; +import type { ObjectStorageBucket } from '@linode/api-v4/lib/object-storage'; +import type { APIError } from '@linode/api-v4/lib/types'; +import type { Theme } from '@mui/material/styles'; +import type { BucketError } from 'src/queries/objectStorage'; + const useStyles = makeStyles()((theme: Theme) => ({ copy: { marginTop: theme.spacing(), @@ -57,12 +59,14 @@ export const OMC_BucketLanding = () => { Boolean(flags.objMultiCluster), account?.capabilities ?? [] ); - + const { isGeckoGAEnabled } = useIsGeckoEnabled(); const { data: regions, error: regionErrors, isLoading: areRegionsLoading, - } = useRegionsQuery(); + } = useRegionsQuery({ + transformRegionLabel: isGeckoGAEnabled, + }); const regionsLookup = regions && getRegionsByRegionId(regions); diff --git a/packages/manager/src/features/PlacementGroups/PlacementGroupsCreateDrawer.tsx b/packages/manager/src/features/PlacementGroups/PlacementGroupsCreateDrawer.tsx index 1c2c7e486a0..55e8b072a32 100644 --- a/packages/manager/src/features/PlacementGroups/PlacementGroupsCreateDrawer.tsx +++ b/packages/manager/src/features/PlacementGroups/PlacementGroupsCreateDrawer.tsx @@ -12,7 +12,6 @@ import { List } from 'src/components/List'; import { ListItem } from 'src/components/ListItem'; import { Notice } from 'src/components/Notice/Notice'; import { RegionSelect } from 'src/components/RegionSelect/RegionSelect'; -import { getNewRegionLabel } from 'src/components/RegionSelect/RegionSelect.utils'; import { useIsGeckoEnabled } from 'src/components/RegionSelect/RegionSelect.utils'; import { Stack } from 'src/components/Stack'; import { TextField } from 'src/components/TextField'; @@ -54,7 +53,10 @@ export const PlacementGroupsCreateDrawer = ( open, selectedRegionId, } = props; - const { data: regions } = useRegionsQuery(); + const { isGeckoGAEnabled } = useIsGeckoEnabled(); + const { data: regions } = useRegionsQuery({ + transformRegionLabel: isGeckoGAEnabled, + }); const { data: allPlacementGroupsInRegion } = useAllPlacementGroupsQuery({ enabled: Boolean(selectedRegionId), filter: { @@ -145,8 +147,6 @@ export const PlacementGroupsCreateDrawer = ( selectedRegion )}`; - const { isGeckoGAEnabled } = useIsGeckoEnabled(); - const disabledRegions = regions?.reduce>( (acc, region) => { const isRegionAtCapacity = hasRegionReachedPlacementGroupCapacity({ @@ -212,12 +212,7 @@ export const PlacementGroupsCreateDrawer = ( { })), } ); - const { data: regions } = useRegionsQuery(); + const { isGeckoGAEnabled } = useIsGeckoEnabled(); + const { data: regions } = useRegionsQuery({ + transformRegionLabel: isGeckoGAEnabled, + }); const region = regions?.find( (region) => region.id === placementGroup?.region diff --git a/packages/manager/src/features/PlacementGroups/PlacementGroupsDetailPanel.tsx b/packages/manager/src/features/PlacementGroups/PlacementGroupsDetailPanel.tsx index a214a2399e6..3cc733331fd 100644 --- a/packages/manager/src/features/PlacementGroups/PlacementGroupsDetailPanel.tsx +++ b/packages/manager/src/features/PlacementGroups/PlacementGroupsDetailPanel.tsx @@ -6,7 +6,6 @@ import { Button } from 'src/components/Button/Button'; import { ListItem } from 'src/components/ListItem'; import { Notice } from 'src/components/Notice/Notice'; import { PlacementGroupsSelect } from 'src/components/PlacementGroupsSelect/PlacementGroupsSelect'; -import { getNewRegionLabel } from 'src/components/RegionSelect/RegionSelect.utils'; import { useIsGeckoEnabled } from 'src/components/RegionSelect/RegionSelect.utils'; import { TextTooltip } from 'src/components/TextTooltip'; import { Typography } from 'src/components/Typography'; @@ -44,7 +43,10 @@ export const PlacementGroupsDetailPanel = (props: Props) => { region: selectedRegionId, }, }); - const { data: regions } = useRegionsQuery(); + const { isGeckoGAEnabled } = useIsGeckoEnabled(); + const { data: regions } = useRegionsQuery({ + transformRegionLabel: isGeckoGAEnabled, + }); const [ isCreatePlacementGroupDrawerOpen, @@ -72,17 +74,9 @@ export const PlacementGroupsDetailPanel = (props: Props) => { ); const isPlacementGroupSelectDisabled = !selectedRegionId || !hasRegionPlacementGroupCapability; - const { isGeckoGAEnabled } = useIsGeckoEnabled(); const placementGroupSelectLabel = selectedRegion - ? `Placement Groups in ${ - isGeckoGAEnabled - ? getNewRegionLabel({ - includeSlug: true, - region: selectedRegion, - }) - : `${selectedRegion.label} (${selectedRegion.id})` - }` + ? `Placement Groups in ${`${selectedRegion.label} (${selectedRegion.id})`}` : 'Placement Group'; return ( diff --git a/packages/manager/src/features/PlacementGroups/PlacementGroupsLanding/PlacementGroupsLanding.tsx b/packages/manager/src/features/PlacementGroups/PlacementGroupsLanding/PlacementGroupsLanding.tsx index 92d7d75778d..6022430de02 100644 --- a/packages/manager/src/features/PlacementGroups/PlacementGroupsLanding/PlacementGroupsLanding.tsx +++ b/packages/manager/src/features/PlacementGroups/PlacementGroupsLanding/PlacementGroupsLanding.tsx @@ -1,8 +1,8 @@ import CloseIcon from '@mui/icons-material/Close'; import { useMediaQuery, useTheme } from '@mui/material'; import * as React from 'react'; -import { useHistory } from 'react-router-dom'; import { useParams } from 'react-router-dom'; +import { useHistory } from 'react-router-dom'; import { CircleProgress } from 'src/components/CircleProgress'; import { DebouncedSearchTextField } from 'src/components/DebouncedSearchTextField'; @@ -12,6 +12,7 @@ import { IconButton } from 'src/components/IconButton'; import { InputAdornment } from 'src/components/InputAdornment'; import { LandingHeader } from 'src/components/LandingHeader'; 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'; @@ -97,7 +98,10 @@ export const PlacementGroupsLanding = React.memo(() => { } ); - const { data: regions } = useRegionsQuery(); + const { isGeckoGAEnabled } = useIsGeckoEnabled(); + const { data: regions } = useRegionsQuery({ + transformRegionLabel: isGeckoGAEnabled, + }); const getPlacementGroupRegion = ( placementGroup: PlacementGroup | undefined ) => { diff --git a/packages/manager/src/features/Profile/SecretTokenDialog/SecretTokenDialog.tsx b/packages/manager/src/features/Profile/SecretTokenDialog/SecretTokenDialog.tsx index 26219cf22e2..53492595128 100644 --- a/packages/manager/src/features/Profile/SecretTokenDialog/SecretTokenDialog.tsx +++ b/packages/manager/src/features/Profile/SecretTokenDialog/SecretTokenDialog.tsx @@ -6,8 +6,9 @@ import { Box } from 'src/components/Box'; import { ConfirmationDialog } from 'src/components/ConfirmationDialog/ConfirmationDialog'; import { CopyableAndDownloadableTextField } from 'src/components/CopyableAndDownloadableTextField'; import { Notice } from 'src/components/Notice/Notice'; -import { HostNamesList } from 'src/features/ObjectStorage/AccessKeyLanding/HostNamesList'; +import { useIsGeckoEnabled } from 'src/components/RegionSelect/RegionSelect.utils'; import { CopyAllHostnames } from 'src/features/ObjectStorage/AccessKeyLanding/CopyAllHostnames'; +import { HostNamesList } from 'src/features/ObjectStorage/AccessKeyLanding/HostNamesList'; import { useAccountManagement } from 'src/hooks/useAccountManagement'; import { useFlags } from 'src/hooks/useFlags'; import { useRegionsQuery } from 'src/queries/regions/regions'; @@ -40,7 +41,10 @@ const renderActions = ( export const SecretTokenDialog = (props: Props) => { const { objectStorageKey, onClose, open, title, value } = props; - const { data: regionsData } = useRegionsQuery(); + const { isGeckoGAEnabled } = useIsGeckoEnabled(); + const { data: regionsData } = useRegionsQuery({ + transformRegionLabel: isGeckoGAEnabled, + }); const regionsLookup = regionsData && getRegionsByRegionId(regionsData); const flags = useFlags(); diff --git a/packages/manager/src/features/VPCs/VPCDetail/VPCDetail.tsx b/packages/manager/src/features/VPCs/VPCDetail/VPCDetail.tsx index 46ee3584406..e69cd194cfc 100644 --- a/packages/manager/src/features/VPCs/VPCDetail/VPCDetail.tsx +++ b/packages/manager/src/features/VPCs/VPCDetail/VPCDetail.tsx @@ -11,19 +11,20 @@ import { DocumentTitleSegment } from 'src/components/DocumentTitle'; import { EntityHeader } from 'src/components/EntityHeader/EntityHeader'; import { ErrorState } from 'src/components/ErrorState/ErrorState'; import { LandingHeader } from 'src/components/LandingHeader'; +import { useIsGeckoEnabled } from 'src/components/RegionSelect/RegionSelect.utils'; import { VPC_DOCS_LINK, VPC_LABEL } from 'src/features/VPCs/constants'; import { useRegionsQuery } from 'src/queries/regions/regions'; import { useVPCQuery } from 'src/queries/vpcs/vpcs'; import { truncate } from 'src/utilities/truncate'; -import { VPCDeleteDialog } from '../VPCLanding/VPCDeleteDialog'; -import { VPCEditDrawer } from '../VPCLanding/VPCEditDrawer'; import { REBOOT_LINODE_WARNING_VPCDETAILS } from '../constants'; import { getUniqueLinodesFromSubnets } from '../utils'; +import { VPCDeleteDialog } from '../VPCLanding/VPCDeleteDialog'; +import { VPCEditDrawer } from '../VPCLanding/VPCEditDrawer'; import { StyledActionButton, - StyledDescriptionBox, StyledBox, + StyledDescriptionBox, StyledSummaryBox, StyledSummaryTextTypography, } from './VPCDetail.styles'; @@ -34,7 +35,10 @@ const VPCDetail = () => { const theme = useTheme(); const { data: vpc, error, isLoading } = useVPCQuery(+vpcId); - const { data: regions } = useRegionsQuery(); + const { isGeckoGAEnabled } = useIsGeckoEnabled(); + const { data: regions } = useRegionsQuery({ + transformRegionLabel: isGeckoGAEnabled, + }); const [editVPCDrawerOpen, setEditVPCDrawerOpen] = React.useState(false); const [deleteVPCDialogOpen, setDeleteVPCDialogOpen] = React.useState(false); diff --git a/packages/manager/src/features/VPCs/VPCLanding/VPCEditDrawer.tsx b/packages/manager/src/features/VPCs/VPCLanding/VPCEditDrawer.tsx index 104da2923f8..bfe559f1266 100644 --- a/packages/manager/src/features/VPCs/VPCLanding/VPCEditDrawer.tsx +++ b/packages/manager/src/features/VPCs/VPCLanding/VPCEditDrawer.tsx @@ -6,6 +6,7 @@ import { ActionsPanel } from 'src/components/ActionsPanel/ActionsPanel'; import { Drawer } from 'src/components/Drawer'; import { Notice } from 'src/components/Notice/Notice'; import { RegionSelect } from 'src/components/RegionSelect/RegionSelect'; +import { useIsGeckoEnabled } from 'src/components/RegionSelect/RegionSelect.utils'; import { TextField } from 'src/components/TextField'; import { useGrants, useProfile } from 'src/queries/profile/profile'; import { useRegionsQuery } from 'src/queries/regions/regions'; @@ -86,7 +87,10 @@ export const VPCEditDrawer = (props: Props) => { // eslint-disable-next-line react-hooks/exhaustive-deps }, [error]); - const { data: regionsData, error: regionsError } = useRegionsQuery(); + const { isGeckoGAEnabled } = useIsGeckoEnabled(); + const { data: regionsData, error: regionsError } = useRegionsQuery({ + transformRegionLabel: isGeckoGAEnabled, + }); return ( diff --git a/packages/manager/src/features/VPCs/VPCLanding/VPCRow.tsx b/packages/manager/src/features/VPCs/VPCLanding/VPCRow.tsx index cbdcf2496fd..90059052455 100644 --- a/packages/manager/src/features/VPCs/VPCLanding/VPCRow.tsx +++ b/packages/manager/src/features/VPCs/VPCLanding/VPCRow.tsx @@ -1,14 +1,16 @@ -import { VPC } from '@linode/api-v4/lib/vpcs/types'; import * as React from 'react'; import { Link } from 'react-router-dom'; -import { Action } from 'src/components/ActionMenu/ActionMenu'; import { Hidden } from 'src/components/Hidden'; import { InlineMenuAction } from 'src/components/InlineMenuAction/InlineMenuAction'; +import { useIsGeckoEnabled } from 'src/components/RegionSelect/RegionSelect.utils'; import { TableCell } from 'src/components/TableCell'; import { TableRow } from 'src/components/TableRow'; import { useRegionsQuery } from 'src/queries/regions/regions'; +import type { VPC } from '@linode/api-v4/lib/vpcs/types'; +import type { Action } from 'src/components/ActionMenu/ActionMenu'; + interface Props { handleDeleteVPC: () => void; handleEditVPC: () => void; @@ -17,7 +19,10 @@ interface Props { export const VPCRow = ({ handleDeleteVPC, handleEditVPC, vpc }: Props) => { const { id, label, subnets } = vpc; - const { data: regions } = useRegionsQuery(); + const { isGeckoGAEnabled } = useIsGeckoEnabled(); + const { data: regions } = useRegionsQuery({ + transformRegionLabel: isGeckoGAEnabled, + }); const regionLabel = regions?.find((r) => r.id === vpc.region)?.label ?? ''; const numLinodes = subnets.reduce( diff --git a/packages/manager/src/features/Volumes/VolumeCreate.tsx b/packages/manager/src/features/Volumes/VolumeCreate.tsx index fded98105d3..0d97bacac8c 100644 --- a/packages/manager/src/features/Volumes/VolumeCreate.tsx +++ b/packages/manager/src/features/Volumes/VolumeCreate.tsx @@ -14,6 +14,7 @@ import { LandingHeader } from 'src/components/LandingHeader'; import { Notice } from 'src/components/Notice/Notice'; import { Paper } from 'src/components/Paper'; import { RegionSelect } from 'src/components/RegionSelect/RegionSelect'; +import { useIsGeckoEnabled } from 'src/components/RegionSelect/RegionSelect.utils'; import { TextField } from 'src/components/TextField'; import { TooltipIcon } from 'src/components/TooltipIcon'; import { Typography } from 'src/components/Typography'; @@ -119,7 +120,10 @@ export const VolumeCreate = () => { const { data: profile } = useProfile(); const { data: grants } = useGrants(); - const { data: regions } = useRegionsQuery(); + const { isGeckoGAEnabled } = useIsGeckoEnabled(); + const { data: regions } = useRegionsQuery({ + transformRegionLabel: isGeckoGAEnabled, + }); const { mutateAsync: createVolume } = useCreateVolumeMutation(); diff --git a/packages/manager/src/features/Volumes/VolumeTableRow.tsx b/packages/manager/src/features/Volumes/VolumeTableRow.tsx index 8a43fe50fb8..1d727bcfbcf 100644 --- a/packages/manager/src/features/Volumes/VolumeTableRow.tsx +++ b/packages/manager/src/features/Volumes/VolumeTableRow.tsx @@ -5,6 +5,7 @@ import { makeStyles } from 'tss-react/mui'; import { Box } from 'src/components/Box'; import { Chip } from 'src/components/Chip'; import { Hidden } from 'src/components/Hidden'; +import { useIsGeckoEnabled } from 'src/components/RegionSelect/RegionSelect.utils'; import { StatusIcon } from 'src/components/StatusIcon/StatusIcon'; import { TableCell } from 'src/components/TableCell'; import { TableRow } from 'src/components/TableRow'; @@ -18,8 +19,9 @@ import { getEventProgress, volumeStatusIconMap, } from './utils'; -import { ActionHandlers, VolumesActionMenu } from './VolumesActionMenu'; +import { VolumesActionMenu } from './VolumesActionMenu'; +import type { ActionHandlers } from './VolumesActionMenu'; import type { Volume } from '@linode/api-v4'; export const useStyles = makeStyles()({ @@ -41,7 +43,10 @@ export const VolumeTableRow = React.memo((props: Props) => { const history = useHistory(); - const { data: regions } = useRegionsQuery(); + const { isGeckoGAEnabled } = useIsGeckoEnabled(); + const { data: regions } = useRegionsQuery({ + transformRegionLabel: isGeckoGAEnabled, + }); const { data: notifications } = useNotificationsQuery(); const { data: inProgressEvents } = useInProgressEvents(); diff --git a/packages/manager/src/features/components/PlansPanel/MetalNotice.tsx b/packages/manager/src/features/components/PlansPanel/MetalNotice.tsx index 35ef6810ec4..29f2f90a13a 100644 --- a/packages/manager/src/features/components/PlansPanel/MetalNotice.tsx +++ b/packages/manager/src/features/components/PlansPanel/MetalNotice.tsx @@ -1,6 +1,7 @@ import * as React from 'react'; import { Notice } from 'src/components/Notice/Notice'; +import { useIsGeckoEnabled } from 'src/components/RegionSelect/RegionSelect.utils'; import { useRegionsQuery } from 'src/queries/regions/regions'; import { StyledTypography } from './PlansPanel.styles'; @@ -14,7 +15,10 @@ interface Props { export const MetalNotice = (props: Props) => { const { dataTestId, hasDisabledClass } = props; - const { data: regions } = useRegionsQuery(); + const { isGeckoGAEnabled } = useIsGeckoEnabled(); + const { data: regions } = useRegionsQuery({ + transformRegionLabel: isGeckoGAEnabled, + }); // Until BM-426 is merged, we aren't filtering for regions in getDisabledClass // so this branch will never run. diff --git a/packages/manager/src/hooks/useCreateVPC.ts b/packages/manager/src/hooks/useCreateVPC.ts index 2ba217f9d8a..a4c6a566b1f 100644 --- a/packages/manager/src/hooks/useCreateVPC.ts +++ b/packages/manager/src/hooks/useCreateVPC.ts @@ -1,25 +1,23 @@ -import { - APIError, - CreateSubnetPayload, - CreateVPCPayload, -} from '@linode/api-v4'; import { createVPCSchema } from '@linode/validation'; import { useFormik } from 'formik'; import * as React from 'react'; import { useHistory } from 'react-router-dom'; +import { useIsGeckoEnabled } from 'src/components/RegionSelect/RegionSelect.utils'; import { useGrants, useProfile } from 'src/queries/profile/profile'; import { useRegionsQuery } from 'src/queries/regions/regions'; import { useCreateVPCMutation } from 'src/queries/vpcs/vpcs'; -import { - SubnetError, - handleVPCAndSubnetErrors, -} from 'src/utilities/formikErrorUtils'; +import { handleVPCAndSubnetErrors } from 'src/utilities/formikErrorUtils'; import { scrollErrorIntoView } from 'src/utilities/scrollErrorIntoView'; -import { - DEFAULT_SUBNET_IPV4_VALUE, - SubnetFieldState, -} from 'src/utilities/subnets'; +import { DEFAULT_SUBNET_IPV4_VALUE } from 'src/utilities/subnets'; + +import type { + APIError, + CreateSubnetPayload, + CreateVPCPayload, +} from '@linode/api-v4'; +import type { SubnetError } from 'src/utilities/formikErrorUtils'; +import type { SubnetFieldState } from 'src/utilities/subnets'; // Custom hook to consolidate shared logic between VPCCreate.tsx and VPCCreateDrawer.tsx @@ -50,7 +48,10 @@ export const useCreateVPC = (inputs: UseCreateVPCInputs) => { const { data: grants } = useGrants(); const userCannotAddVPC = profile?.restricted && !grants?.global.add_vpcs; - const { data: regions } = useRegionsQuery(); + const { isGeckoGAEnabled } = useIsGeckoEnabled(); + const { data: regions } = useRegionsQuery({ + transformRegionLabel: isGeckoGAEnabled, + }); const regionsData = regions ?? []; const [ diff --git a/packages/manager/src/hooks/useFlags.ts b/packages/manager/src/hooks/useFlags.ts index 36da4807a00..f23a2c68b3d 100644 --- a/packages/manager/src/hooks/useFlags.ts +++ b/packages/manager/src/hooks/useFlags.ts @@ -29,9 +29,5 @@ export const useFlags = () => { return { ...flags, ...mockFlags, - // gecko2: { - // enabled: true, - // ga: true, - // }, }; }; diff --git a/packages/manager/src/queries/regions/regions.ts b/packages/manager/src/queries/regions/regions.ts index 4016e6914c5..07b7c538c39 100644 --- a/packages/manager/src/queries/regions/regions.ts +++ b/packages/manager/src/queries/regions/regions.ts @@ -13,6 +13,11 @@ import { import type { Region, RegionAvailability } from '@linode/api-v4/lib/regions'; import type { APIError } from '@linode/api-v4/lib/types'; +interface TransformRegionLabelOptions { + includeSlug?: boolean; + transformRegionLabel?: boolean; +} + export const regionQueries = createQueryKeys('regions', { availability: { contextQueries: { @@ -33,16 +38,21 @@ export const regionQueries = createQueryKeys('regions', { }, }); -export const useRegionsQuery = (transformRegionLabel: boolean = false) => +export const useRegionsQuery = ( + options: Partial = {} +) => useQuery({ ...regionQueries.regions, ...queryPresets.longLived, select: (regions: Region[]) => { // Display Country, City instead of City, State - if (transformRegionLabel) { + if (options.transformRegionLabel) { return regions.map((region) => ({ ...region, - label: getNewRegionLabel({ region }), + label: getNewRegionLabel({ + includeSlug: options.includeSlug, + region, + }), })); } return regions;