diff --git a/packages/manager/.changeset/pr-10737-changed-1722455526602.md b/packages/manager/.changeset/pr-10737-changed-1722455526602.md new file mode 100644 index 00000000000..7ffb6b42728 --- /dev/null +++ b/packages/manager/.changeset/pr-10737-changed-1722455526602.md @@ -0,0 +1,5 @@ +--- +"@linode/manager": Changed +--- + +UX & Copy Revisions: Monthly Network Transfer Pool Modal ([#10737](https://github.com/linode/manager/pull/10737)) diff --git a/packages/manager/src/components/TransferDisplay/TransferDisplayDialog.test.tsx b/packages/manager/src/components/TransferDisplay/TransferDisplayDialog.test.tsx index dc3c77c6b28..1c82bc0abe2 100644 --- a/packages/manager/src/components/TransferDisplay/TransferDisplayDialog.test.tsx +++ b/packages/manager/src/components/TransferDisplay/TransferDisplayDialog.test.tsx @@ -8,11 +8,11 @@ import { } from 'src/factories/account'; import { renderWithTheme } from 'src/utilities/testHelpers'; -import { TransferDisplayDialog } from './TransferDisplayDialog'; import { - NETWORK_TRANSFER_QUOTA_DOCS_LINKS, + NETWORK_TRANSFER_USAGE_AND_COST_LINK, TRANSFER_DISPLAY_BUTTON, } from './constants'; +import { TransferDisplayDialog } from './TransferDisplayDialog'; import { calculatePoolUsagePct, getRegionTransferPools } from './utils'; import type { TransferDisplayDialogProps } from './TransferDisplayDialog'; @@ -53,7 +53,10 @@ describe('TransferDisplayDialog', () => { const docsLink = getByRole('link'); expect(docsLink).toBeInTheDocument(); - expect(docsLink).toHaveAttribute('href', NETWORK_TRANSFER_QUOTA_DOCS_LINKS); + expect(docsLink).toHaveAttribute( + 'href', + NETWORK_TRANSFER_USAGE_AND_COST_LINK + ); }); it('renders transfer display dialog without usage or quota data if no quota/resources', async () => { diff --git a/packages/manager/src/components/TransferDisplay/TransferDisplayDialog.tsx b/packages/manager/src/components/TransferDisplay/TransferDisplayDialog.tsx index afbbe17f5e3..39277efac04 100644 --- a/packages/manager/src/components/TransferDisplay/TransferDisplayDialog.tsx +++ b/packages/manager/src/components/TransferDisplay/TransferDisplayDialog.tsx @@ -5,11 +5,11 @@ import * as React from 'react'; import { Box } from 'src/components/Box'; import { Dialog } from 'src/components/Dialog/Dialog'; import { Divider } from 'src/components/Divider'; +import { Link } from 'src/components/Link'; import { Typography } from 'src/components/Typography'; -import { DocsLink } from '../DocsLink/DocsLink'; import { useIsGeckoEnabled } from '../RegionSelect/RegionSelect.utils'; -import { NETWORK_TRANSFER_QUOTA_DOCS_LINKS } from './constants'; +import { NETWORK_TRANSFER_USAGE_AND_COST_LINK } from './constants'; import { TransferDisplayDialogHeader } from './TransferDisplayDialogHeader'; import { TransferDisplayUsage } from './TransferDisplayUsage'; import { formatRegionList, getDaysRemaining } from './utils'; @@ -76,6 +76,16 @@ export const TransferDisplayDialog = React.memo( dataTestId="global-transfer-pool-header" headerText="Global Network Transfer Pool" /> + + Any additional transfer usage that exceeds this monthly allotment + starts at $0.005/GB (or $5/TB) depending on the service’s region. + Additional transfer usage is charged at the end of the billing period. + For more information, refer to{' '} + + Network Transfer Usage and Costs + + . + {pool.regionName}{' '} - ({pool.regionID}) + + ({pool.regionID}) + {transferQuotaDocsText} - - - ); } diff --git a/packages/manager/src/components/TransferDisplay/TransferDisplayUsage.tsx b/packages/manager/src/components/TransferDisplay/TransferDisplayUsage.tsx index 08c65cc13a9..75d072be66c 100644 --- a/packages/manager/src/components/TransferDisplay/TransferDisplayUsage.tsx +++ b/packages/manager/src/components/TransferDisplay/TransferDisplayUsage.tsx @@ -1,3 +1,4 @@ +import { useTheme } from '@mui/material/styles'; import Grid from '@mui/material/Unstable_Grid2'; import * as React from 'react'; @@ -15,20 +16,26 @@ export interface TransferDisplayUsageProps { export const TransferDisplayUsage = React.memo( (props: TransferDisplayUsageProps) => { const { pullUsagePct, quota, used } = props; + + const theme = useTheme(); + // Don't display usage, quota, or bar percent if the network transfer pool is empty (e.g. account has no resources). const isEmptyPool = quota === 0; return ( <> + {!isEmptyPool && ( + + )} theme.spacing(0.5) }} > {!isEmptyPool ? ( - + {used} GB Used ({formatPoolUsagePct(pullUsagePct)}) ) : ( @@ -40,7 +47,7 @@ export const TransferDisplayUsage = React.memo( {!isEmptyPool && ( - + {quota >= used ? ( {quota - used} GB Available ) : ( @@ -52,9 +59,6 @@ export const TransferDisplayUsage = React.memo( )} - {!isEmptyPool && ( - - )} ); } diff --git a/packages/manager/src/components/TransferDisplay/constants.ts b/packages/manager/src/components/TransferDisplay/constants.ts index 2ac06e6439d..209bea55728 100644 --- a/packages/manager/src/components/TransferDisplay/constants.ts +++ b/packages/manager/src/components/TransferDisplay/constants.ts @@ -1,8 +1,8 @@ // ==================== // Components constants // ==================== -export const NETWORK_TRANSFER_QUOTA_DOCS_LINKS = - 'https://www.linode.com/docs/guides/network-transfer-quota/'; +export const NETWORK_TRANSFER_USAGE_AND_COST_LINK = + 'https://www.linode.com/docs/products/platform/get-started/guides/network-transfer/'; // ==================== // Test constants