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 );