diff --git a/packages/manager/.changeset/pr-13521-upcoming-features-1774341582397.md b/packages/manager/.changeset/pr-13521-upcoming-features-1774341582397.md new file mode 100644 index 00000000000..cf6086c2a66 --- /dev/null +++ b/packages/manager/.changeset/pr-13521-upcoming-features-1774341582397.md @@ -0,0 +1,5 @@ +--- +"@linode/manager": Upcoming Features +--- + +Implement Empty Landing State for Reserve IP ([#13521](https://github.com/linode/manager/pull/13521)) diff --git a/packages/manager/src/features/ReservedIps/ReservedIpsLanding/ReservedIpsLanding.tsx b/packages/manager/src/features/ReservedIps/ReservedIpsLanding/ReservedIpsLanding.tsx index 5b0824ce308..a51b489f1a3 100644 --- a/packages/manager/src/features/ReservedIps/ReservedIpsLanding/ReservedIpsLanding.tsx +++ b/packages/manager/src/features/ReservedIps/ReservedIpsLanding/ReservedIpsLanding.tsx @@ -3,7 +3,15 @@ import * as React from 'react'; import { LandingHeader } from 'src/components/LandingHeader'; +import { ReservedIpsLandingEmptyState } from './ReservedIpsLandingEmptyState'; + export const ReservedIpsLanding = () => { + // TODO: Replace with actual data check once API queries are implemented + const showEmptyState = true; + + if (showEmptyState) { + return ; + } return ( <> { + return ( + + + { + // TODO: Open Reserve IP create drawer once ready + }, + }, + ]} + descriptionMaxWidth={500} + gettingStartedGuidesData={gettingStartedGuides} + headers={headers} + icon={NetworkingIcon} + linkAnalyticsEvent={linkAnalyticsEvent} + wide={true} + youtubeLinkData={youtubeLinkData} + /> + + ); +}; diff --git a/packages/manager/src/features/ReservedIps/ReservedIpsLanding/ReservedIpsLandingEmptyStateData.ts b/packages/manager/src/features/ReservedIps/ReservedIpsLanding/ReservedIpsLandingEmptyStateData.ts new file mode 100644 index 00000000000..9840d5270f0 --- /dev/null +++ b/packages/manager/src/features/ReservedIps/ReservedIpsLanding/ReservedIpsLandingEmptyStateData.ts @@ -0,0 +1,56 @@ +import { + docsLink, + youtubeChannelLink, + youtubeMoreLinkText, +} from 'src/utilities/emptyStateLandingUtils'; + +import type { + ResourcesHeaders, + ResourcesLinks, + ResourcesLinkSection, +} from 'src/components/EmptyLandingPageResources/ResourcesLinksTypes'; + +export const headers: ResourcesHeaders = { + description: + 'Reserve and manage public IPv4 addresses across regions, and assign them to resources like Linodes or NodeBalancers when needed.', + subtitle: 'Dedicated IP addressing for your cloud resources', + title: 'Reserved IP Addresses', +}; + +export const gettingStartedGuides: ResourcesLinkSection = { + links: [ + { + text: 'Overview of Reserved IPs', + to: 'https://www.linode.com/docs/', // To be updated with actual Reserved IPs documentation link once available + }, + { + text: 'Getting Started with Reserved IPs', + to: 'https://www.linode.com/docs/', // To be updated with actual Reserved IPs documentation link once available + }, + { + text: 'Managing and Assigning Reserved IPs', + to: 'https://www.linode.com/docs/', // To be updated with actual Reserved IPs documentation link once available + }, + ], + moreInfo: { + text: 'View additional Reserved IP documentation', + to: docsLink, + }, + title: 'Getting Started Guides', +}; + +export const youtubeLinkData: ResourcesLinkSection = { + links: [ + // To be added once we have Reserved IPs specific YouTube content + ], + moreInfo: { + text: youtubeMoreLinkText, + to: youtubeChannelLink, + }, + title: 'Video Playlist', +}; + +export const linkAnalyticsEvent: ResourcesLinks['linkAnalyticsEvent'] = { + action: 'Click:link', + category: 'Reserved IPs landing page empty', +};