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