diff --git a/packages/manager/.changeset/pr-9899-upcoming-features-1699911388781.md b/packages/manager/.changeset/pr-9899-upcoming-features-1699911388781.md
index 188aaf37ddc..76a929d62be 100644
--- a/packages/manager/.changeset/pr-9899-upcoming-features-1699911388781.md
+++ b/packages/manager/.changeset/pr-9899-upcoming-features-1699911388781.md
@@ -2,4 +2,4 @@
"@linode/manager": Upcoming Features
---
-Disable Public IP Address for VPC-only Linodes ([#9899](https://github.com/linode/manager/pull/9899))
+Disable Public IP Address for VPC-only Linodes in the Linode's details page and add warning banner to Linode landing ([#9899](https://github.com/linode/manager/pull/9899))
diff --git a/packages/manager/src/features/Linodes/LinodesLanding/LinodeRow/LinodeRow.tsx b/packages/manager/src/features/Linodes/LinodesLanding/LinodeRow/LinodeRow.tsx
index 9917d23f94d..15d82f576ed 100644
--- a/packages/manager/src/features/Linodes/LinodesLanding/LinodeRow/LinodeRow.tsx
+++ b/packages/manager/src/features/Linodes/LinodesLanding/LinodeRow/LinodeRow.tsx
@@ -17,7 +17,6 @@ import {
transitionText,
} from 'src/features/Linodes/transitions';
import { notificationContext as _notificationContext } from 'src/features/NotificationCenter/NotificationContext';
-import { useVPCConfigInterface } from 'src/hooks/useVPCConfigInterface';
import { useTypeQuery } from 'src/queries/types';
import { useRecentEventForLinode } from 'src/store/selectors/recentEventForLinode';
import { capitalizeAllWords } from 'src/utilities/capitalize';
@@ -56,8 +55,6 @@ export const LinodeRow = (props: Props) => {
const recentEvent = useRecentEventForLinode(id);
- const { isVPCOnlyLinode } = useVPCConfigInterface(id);
-
const isBareMetalInstance = linodeType?.class === 'metal';
const loading = linodeInTransition(status, recentEvent);
@@ -144,11 +141,7 @@ export const LinodeRow = (props: Props) => {
{linodeType ? formatStorageUnits(linodeType.label) : type}
-
+
diff --git a/packages/manager/src/features/Linodes/LinodesLanding/LinodesLanding.tsx b/packages/manager/src/features/Linodes/LinodesLanding/LinodesLanding.tsx
index 49f314ddc3b..6726b70a399 100644
--- a/packages/manager/src/features/Linodes/LinodesLanding/LinodesLanding.tsx
+++ b/packages/manager/src/features/Linodes/LinodesLanding/LinodesLanding.tsx
@@ -4,6 +4,7 @@ import { Link, RouteComponentProps, withRouter } from 'react-router-dom';
import { compose } from 'recompose';
import { CircleProgress } from 'src/components/CircleProgress';
+import { DismissibleBanner } from 'src/components/DismissibleBanner/DismissibleBanner';
import { DocumentTitleSegment } from 'src/components/DocumentTitle';
import { ErrorState } from 'src/components/ErrorState/ErrorState';
import { LandingHeader } from 'src/components/LandingHeader';
@@ -12,14 +13,22 @@ import OrderBy from 'src/components/OrderBy';
import { PreferenceToggle } from 'src/components/PreferenceToggle/PreferenceToggle';
import { ProductInformationBanner } from 'src/components/ProductInformationBanner/ProductInformationBanner';
import { TransferDisplay } from 'src/components/TransferDisplay/TransferDisplay';
+import { Typography } from 'src/components/Typography';
+import {
+ WithAccountProps,
+ withAccount,
+} from 'src/containers/account.container';
import {
WithProfileProps,
withProfile,
} from 'src/containers/profile.container';
-import withFeatureFlagConsumer from 'src/containers/withFeatureFlagConsumer.container';
+import withFlags, {
+ FeatureFlagConsumerProps,
+} from 'src/containers/withFeatureFlagConsumer.container';
import { BackupsCTA } from 'src/features/Backups/BackupsCTA';
import { MigrateLinode } from 'src/features/Linodes/MigrateLinode/MigrateLinode';
import { DialogType } from 'src/features/Linodes/types';
+import { isFeatureEnabled } from 'src/utilities/accountCapabilities';
import {
sendGroupByTagEnabledEvent,
sendLinodesViewEvent,
@@ -92,11 +101,14 @@ export interface LinodesLandingProps {
type CombinedProps = LinodesLandingProps &
StateProps &
RouteProps &
- WithProfileProps;
+ WithProfileProps &
+ WithAccountProps &
+ FeatureFlagConsumerProps;
class ListLinodes extends React.Component {
render() {
const {
+ flags,
linodesData,
linodesInTransition,
linodesRequestError,
@@ -117,6 +129,12 @@ class ListLinodes extends React.Component {
.someLinodesHaveScheduledMaintenance,
};
+ const VPCEnabled = isFeatureEnabled(
+ 'VPCs',
+ Boolean(flags.vpc),
+ this.props.account.data?.capabilities ?? []
+ );
+
if (linodesRequestError) {
let errorText: JSX.Element | string =
linodesRequestError?.[0]?.reason ?? 'Error loading Linodes';
@@ -157,6 +175,19 @@ class ListLinodes extends React.Component {
return (
+ {VPCEnabled && (
+
+
+ A Public IP address is provisionally reserved for each Linode, but
+ isn’t automatically assigned for Linodes in a VPC. To see
+ whether a Public IPv4 address has been assigned, see the Linode
+ details page.
+
+
+ )}
(
withRouter,
connected,
- withFeatureFlagConsumer,
+ withAccount,
+ withFlags,
withProfile
);