feat: [M3-7209] – VPC BETA Feedback button

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

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 (
     <StyledDocsLink
@@ -39,7 +41,7 @@ export const DocsLink = (props: DocsLinkProps) => {
       className="docsButton"
       to={href}
     >
-      <DocsIcon />
+      {icon ?? <DocsIcon />}
       {label ?? 'Docs'}
     </StyledDocsLink>
   );

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 && (
         <Grid>
           <Grid alignItems="center" container justifyContent="flex-end">
+            {betaFeedbackLink && (
+              <span
+                style={{
+                  marginRight: `${theme.spacing(2)}`,
+                }}
+              >
+                <DocsLink
+                  href={betaFeedbackLink}
+                  label="BETA Feedback"
+                  icon={<BetaFeedbackIcon />}
+                />
+              </span>
+            )}
             {docsLink ? (
               <DocsLink
                 analyticsLabel={docsAnalyticsLabel}

packages/manager/src/features/VPCs/VPCDetail/VPCDetail.tsx

@@ -15,6 +15,8 @@ import { useRegionsQuery } from 'src/queries/regions';
 import { useVPCQuery } from 'src/queries/vpcs';
 import { truncate } from 'src/utilities/truncate';
 
+import { VPC_FEEDBACK_FORM_URL } from 'src/features/VPCs/constants';
+
 import { VPCDeleteDialog } from '../VPCLanding/VPCDeleteDialog';
 import { VPCEditDrawer } from '../VPCLanding/VPCEditDrawer';
 import { REBOOT_LINODE_WARNING_VPCDETAILS } from '../constants';
@@ -97,6 +99,7 @@ const VPCDetail = () => {
     <>
       <DocumentTitleSegment segment={vpc.label} />
       <LandingHeader
+        betaFeedbackLink={VPC_FEEDBACK_FORM_URL}
         breadcrumbProps={{
           crumbOverrides: [
             {

packages/manager/src/features/VPCs/VPCLanding/VPCLanding.tsx

@@ -19,6 +19,8 @@ import { usePagination } from 'src/hooks/usePagination';
 import { useVPCsQuery } from 'src/queries/vpcs';
 import { getAPIErrorOrDefault } from 'src/utilities/errorUtils';
 
+import { VPC_FEEDBACK_FORM_URL } from 'src/features/VPCs/constants';
+
 import { VPCDeleteDialog } from './VPCDeleteDialog';
 import { VPCEditDrawer } from './VPCEditDrawer';
 import { VPCEmptyState } from './VPCEmptyState';
@@ -96,6 +98,7 @@ const VPCLanding = () => {
         docsLink="#" // @TODO VPC: Add docs link
         onButtonClick={createVPC}
         title={VPC_LABEL}
+        betaFeedbackLink={VPC_FEEDBACK_FORM_URL}
       />
       <Table>
         <TableHead>

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