feat: [M3-7358] - Add AGLB Feedback Link (#9885)

* feat: [M3-7358] - Add AGLB Feedback Link * Added changeset: Add AGLB Feedback Link * Update LandingHeader.tsx * Code clean up and fix alignment of docs link * Code cleanup * Code cleanup * Update LoadBalancerCreate.tsx * Add beta feedback link in create flow * Add left margin for small screens
linode · Nov 9, 2023 · 213cd70 · 213cd70
1 parent 32be199
commit 213cd70
Show file tree

Hide file tree

Showing 8 changed files with 23 additions and 4 deletions.
diff --git a/packages/manager/.changeset/pr-9885-upcoming-features-1699451204520.md b/packages/manager/.changeset/pr-9885-upcoming-features-1699451204520.md
@@ -0,0 +1,5 @@
+---
+"@linode/manager": Upcoming Features
+---
+
+Add AGLB Feedback Link ([#9885](https://github.com/linode/manager/pull/9885))
diff --git a/packages/manager/src/components/LandingHeader/LandingHeader.tsx b/packages/manager/src/components/LandingHeader/LandingHeader.tsx
@@ -1,5 +1,6 @@
 import Grid from '@mui/material/Unstable_Grid2';
-import { styled, useTheme } from '@mui/material/styles';
+import { Theme, styled, useTheme } from '@mui/material/styles';
+import useMediaQuery from '@mui/material/useMediaQuery';
 import * as React from 'react';
 
 import BetaFeedbackIcon from 'src/assets/icons/icon-feedback.svg';
@@ -59,6 +60,8 @@ export const LandingHeader = ({
   const renderActions = Boolean(onButtonClick || extraActions);
   const labelTitle = title?.toString();
 
+  const xsDown = useMediaQuery((theme: Theme) => theme.breakpoints.down('sm'));
+
   const docsAnalyticsLabel = analyticsLabel
     ? analyticsLabel
     : `${title} Landing`;
@@ -92,13 +95,14 @@ export const LandingHeader = ({
             {betaFeedbackLink && (
               <span
                 style={{
+                  marginLeft: xsDown ? `${theme.spacing(2)}` : undefined,
                   marginRight: `${theme.spacing(2)}`,
                 }}
               >
                 <DocsLink
                   href={betaFeedbackLink}
-                  label="BETA Feedback"
                   icon={<BetaFeedbackIcon />}
+                  label="BETA Feedback"
                 />
               </span>
             )}

diff --git a/packages/manager/src/features/LoadBalancers/LoadBalancerCreate/LoadBalancerBasicCreate.tsx b/packages/manager/src/features/LoadBalancers/LoadBalancerCreate/LoadBalancerBasicCreate.tsx
@@ -1,3 +1,4 @@
+import { CreateBasicLoadbalancerSchema } from '@linode/validation';
 import { useFormik } from 'formik';
 import { useSnackbar } from 'notistack';
 import * as React from 'react';
@@ -11,11 +12,11 @@ import { Notice } from 'src/components/Notice/Notice';
 import { Paper } from 'src/components/Paper';
 import { Stack } from 'src/components/Stack';
 import { TextField } from 'src/components/TextField';
+import { AGLB_FEEDBACK_FORM_URL } from 'src/features/LoadBalancers/constants';
 import { useLoadBalancerBasicCreateMutation } from 'src/queries/aglb/loadbalancers';
 import { getFormikErrorsFromAPIErrors } from 'src/utilities/formikErrorUtils';
 
 import { LoadBalancerRegions } from './LoadBalancerRegions';
-import { CreateBasicLoadbalancerSchema } from '@linode/validation';
 
 export const LoadBalancerBasicCreate = () => {
   const {
@@ -63,6 +64,7 @@ export const LoadBalancerBasicCreate = () => {
           ],
           pathname: location.pathname,
         }}
+        betaFeedbackLink={AGLB_FEEDBACK_FORM_URL}
         title="Create"
       />
       <Stack spacing={3}>

diff --git a/packages/manager/src/features/LoadBalancers/LoadBalancerCreate/LoadBalancerCreate.tsx b/packages/manager/src/features/LoadBalancers/LoadBalancerCreate/LoadBalancerCreate.tsx
@@ -5,6 +5,7 @@ import * as React from 'react';
 
 import { DocumentTitleSegment } from 'src/components/DocumentTitle/DocumentTitle';
 import { LandingHeader } from 'src/components/LandingHeader';
+import { AGLB_FEEDBACK_FORM_URL } from 'src/features/LoadBalancers/constants';
 
 import { LoadBalancerActionPanel } from './LoadBalancerActionPanel';
 import { LoadBalancerConfiguration } from './LoadBalancerConfiguration';
@@ -32,6 +33,7 @@ export const LoadBalancerCreate = () => {
           ],
           pathname: location.pathname,
         }}
+        betaFeedbackLink={AGLB_FEEDBACK_FORM_URL}
         title="Create"
       />
       <Formik<CreateLoadbalancerPayload>

diff --git a/packages/manager/src/features/LoadBalancers/LoadBalancerDetail/LoadBalancerDetail.tsx b/packages/manager/src/features/LoadBalancers/LoadBalancerDetail/LoadBalancerDetail.tsx
@@ -12,6 +12,7 @@ import { LandingHeader } from 'src/components/LandingHeader';
 import { Tabs } from 'src/components/ReachTabs';
 import { SuspenseLoader } from 'src/components/SuspenseLoader';
 import { TabLinkList } from 'src/components/TabLinkList/TabLinkList';
+import { AGLB_FEEDBACK_FORM_URL } from 'src/features/LoadBalancers/constants';
 import { useLoadBalancerQuery } from 'src/queries/aglb/loadbalancers';
 
 const LoadBalancerSummary = React.lazy(() =>
@@ -103,6 +104,7 @@ export const LoadBalancerDetail = () => {
           labelOptions: { noCap: true },
           pathname: `/loadbalancers/${loadbalancer?.label}`,
         }}
+        betaFeedbackLink={AGLB_FEEDBACK_FORM_URL}
         docsLabel="Docs"
         docsLink="" // TODO: AGLB - Add docs link
       />

diff --git a/packages/manager/src/features/LoadBalancers/LoadBalancerLanding/LoadBalancerLanding.tsx b/packages/manager/src/features/LoadBalancers/LoadBalancerLanding/LoadBalancerLanding.tsx
@@ -14,6 +14,7 @@ import { TableCell } from 'src/components/TableCell';
 import { TableHead } from 'src/components/TableHead';
 import { TableRow } from 'src/components/TableRow';
 import { TableSortCell } from 'src/components/TableSortCell';
+import { AGLB_FEEDBACK_FORM_URL } from 'src/features/LoadBalancers/constants';
 import { useOrder } from 'src/hooks/useOrder';
 import { usePagination } from 'src/hooks/usePagination';
 import { useLoadBalancersQuery } from 'src/queries/aglb/loadbalancers';
@@ -95,6 +96,7 @@ export const LoadBalancerLanding = () => {
       ) : (
         <>
           <LandingHeader
+            betaFeedbackLink={AGLB_FEEDBACK_FORM_URL}
             breadcrumbProps={{ pathname: '/loadbalancers' }}
             createButtonText="Create Load Balancer"
             docsLabel="Docs"

diff --git a/packages/manager/src/features/LoadBalancers/constants.ts b/packages/manager/src/features/LoadBalancers/constants.ts
@@ -0,0 +1,2 @@
+export const AGLB_FEEDBACK_FORM_URL =
+  'https://docs.google.com/forms/d/e/1FAIpQLSdfetx9VvwjUAC_gdGQai_FpZN4xZ1GZGW54abezS2aV5rCcQ/viewform';
diff --git a/packages/manager/src/features/Support/TicketAttachmentList.test.tsx b/packages/manager/src/features/Support/TicketAttachmentList.test.tsx
@@ -38,7 +38,7 @@ describe('TicketAttachmentList component', () => {
   });
   it('should render all attachment when show more is clicked', () => {
     const { getByText } = renderWithTheme(<TicketAttachmentList {...props} />);
-    const showMoreButton = getByText("Show More Files").closest('button');
+    const showMoreButton = getByText('Show More Files').closest('button');
     userEvent.click(showMoreButton!);
     for (const attachment of props.attachments) {
       expect(getByText(attachment)).toBeVisible();
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		export const AGLB_FEEDBACK_FORM_URL =
		'https://docs.google.com/forms/d/e/1FAIpQLSdfetx9VvwjUAC_gdGQai_FpZN4xZ1GZGW54abezS2aV5rCcQ/viewform';