diff --git a/packages/manager/.changeset/pr-9879-upcoming-features-1699306308229.md b/packages/manager/.changeset/pr-9879-upcoming-features-1699306308229.md
new file mode 100644
index 00000000000..e043f81d349
--- /dev/null
+++ b/packages/manager/.changeset/pr-9879-upcoming-features-1699306308229.md
@@ -0,0 +1,5 @@
+---
+"@linode/manager": Upcoming Features
+---
+
+Add VPC BETA Feedback link to VPC landing and detail pages ([#9879](https://github.com/linode/manager/pull/9879))
diff --git a/packages/manager/src/assets/icons/icon-feedback.svg b/packages/manager/src/assets/icons/icon-feedback.svg
new file mode 100644
index 00000000000..aa987d40471
--- /dev/null
+++ b/packages/manager/src/assets/icons/icon-feedback.svg
@@ -0,0 +1,5 @@
+
diff --git a/packages/manager/src/components/DocsLink/DocsLink.tsx b/packages/manager/src/components/DocsLink/DocsLink.tsx
index d3f11c2c8b8..405a483f46c 100644
--- a/packages/manager/src/components/DocsLink/DocsLink.tsx
+++ b/packages/manager/src/components/DocsLink/DocsLink.tsx
@@ -17,6 +17,8 @@ export interface DocsLinkProps {
label?: string;
/** A callback function when the link is clicked */
onClick?: () => void;
+ /* */
+ icon?: JSX.Element;
}
/**
@@ -25,7 +27,7 @@ export interface DocsLinkProps {
* - Consider displaying the title of a key guide or product document as the link instead of the generic “Docs”.
*/
export const DocsLink = (props: DocsLinkProps) => {
- const { analyticsLabel, href, label, onClick } = props;
+ const { analyticsLabel, href, label, onClick, icon } = props;
return (
{
className="docsButton"
to={href}
>
-
+ {icon ?? }
{label ?? 'Docs'}
);
diff --git a/packages/manager/src/components/LandingHeader/LandingHeader.tsx b/packages/manager/src/components/LandingHeader/LandingHeader.tsx
index 09da70cb8ae..37dbf1aaa00 100644
--- a/packages/manager/src/components/LandingHeader/LandingHeader.tsx
+++ b/packages/manager/src/components/LandingHeader/LandingHeader.tsx
@@ -2,6 +2,7 @@ import Grid from '@mui/material/Unstable_Grid2';
import { styled, useTheme } from '@mui/material/styles';
import * as React from 'react';
+import BetaFeedbackIcon from 'src/assets/icons/icon-feedback.svg';
import {
Breadcrumb,
BreadcrumbProps,
@@ -11,6 +12,7 @@ import { DocsLink } from 'src/components/DocsLink/DocsLink';
export interface LandingHeaderProps {
analyticsLabel?: string;
+ betaFeedbackLink?: string;
breadcrumbDataAttrs?: { [key: string]: boolean };
breadcrumbProps?: BreadcrumbProps;
buttonDataAttrs?: { [key: string]: boolean | string };
@@ -35,6 +37,7 @@ export interface LandingHeaderProps {
*/
export const LandingHeader = ({
analyticsLabel,
+ betaFeedbackLink,
breadcrumbDataAttrs,
breadcrumbProps,
buttonDataAttrs,
@@ -86,6 +89,19 @@ export const LandingHeader = ({
{!shouldHideDocsAndCreateButtons && (
+ {betaFeedbackLink && (
+
+ }
+ />
+
+ )}
{docsLink ? (
{
<>
{
docsLink="#" // @TODO VPC: Add docs link
onButtonClick={createVPC}
title={VPC_LABEL}
+ betaFeedbackLink={VPC_FEEDBACK_FORM_URL}
/>
diff --git a/packages/manager/src/features/VPCs/constants.ts b/packages/manager/src/features/VPCs/constants.ts
index a894e253f46..0bbc03f0cc4 100644
--- a/packages/manager/src/features/VPCs/constants.ts
+++ b/packages/manager/src/features/VPCs/constants.ts
@@ -24,3 +24,6 @@ export const VPC_CREATE_FORM_SUBNET_HELPER_TEXT = `A subnet divides a VPC into m
export const VPC_CREATE_FORM_VPC_HELPER_TEXT =
'A virtual private cloud (VPC) is an isolated network which allows for control over how resources are networked and can communicate.';
+
+export const VPC_FEEDBACK_FORM_URL =
+ 'https://docs.google.com/forms/d/e/1FAIpQLScvWbTupCNsBF5cz5YEsv5oErHM4ONBZodDYi8KuOgC8fyfag/viewform';