Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 10 commits into from
Nov 9, 2023
Merged

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

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
22ede39
feat: [M3-7358] - Add AGLB Feedback Link
cpathipa Nov 8, 2023
7afd78f
Added changeset: Add AGLB Feedback Link
cpathipa Nov 8, 2023
e21a18a
Update LandingHeader.tsx
cpathipa Nov 8, 2023
17a25a2
Code clean up and fix alignment of docs link
cpathipa Nov 8, 2023
7e35c0a
Code cleanup
cpathipa Nov 8, 2023
002c0b0
Merge remote-tracking branch 'origin/develop' into M3-7358
cpathipa Nov 9, 2023
5e8cada
Code cleanup
cpathipa Nov 9, 2023
1971a7b
Update LoadBalancerCreate.tsx
cpathipa Nov 9, 2023
3d2f5f3
Add beta feedback link in create flow
cpathipa Nov 9, 2023
33c441d
Add left margin for small screens
cpathipa Nov 9, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions packages/manager/.changeset/pr-9885-upcoming-features-1699451204520.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@linode/manager": Upcoming Features
---

Add AGLB Feedback Link ([#9885](https://github.com/linode/manager/pull/9885))
32 changes: 27 additions & 5 deletions packages/manager/src/components/LandingHeader/LandingHeader.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,16 @@
import { Typography } from '@mui/material';
import Grid from '@mui/material/Unstable_Grid2';
import { styled, useTheme } from '@mui/material/styles';
import * as React from 'react';

import ExternalLinkIcon from 'src/assets/icons/external-link.svg';
import {
Breadcrumb,
BreadcrumbProps,
} from 'src/components/Breadcrumb/Breadcrumb';
import { Button } from 'src/components/Button/Button';
import { DocsLink } from 'src/components/DocsLink/DocsLink';
import { Link } from 'src/components/Link';

export interface LandingHeaderProps {
analyticsLabel?: string;
Expand All @@ -20,6 +23,8 @@ export interface LandingHeaderProps {
docsLink?: string;
entity?: string;
extraActions?: JSX.Element;
feedbackLink?: string;
feedbackLinkLabel?: string;
loading?: boolean;
onButtonClick?: () => void;
onButtonKeyPress?: (e: React.KeyboardEvent<HTMLButtonElement>) => void;
Expand All @@ -44,6 +49,8 @@ export const LandingHeader = ({
docsLink,
entity,
extraActions,
feedbackLink,
feedbackLinkLabel,
loading,
onButtonClick,
onButtonKeyPress,
Expand All @@ -64,6 +71,10 @@ export const LandingHeader = ({
marginLeft: theme.spacing(1),
};

const sxFeedbackLink = {
marginRight: theme.spacing(2),
};

return (
<Grid
alignItems="center"
Expand All @@ -83,9 +94,20 @@ export const LandingHeader = ({
{...breadcrumbProps}
/>
</Grid>
{!shouldHideDocsAndCreateButtons && (
<Grid>
<Grid alignItems="center" container justifyContent="flex-end">

<Grid alignItems="center" container justifyContent="flex-end">
{feedbackLink && (
<Grid container sx={docsLink ? sxFeedbackLink : null}>
<Typography>
<Link external hideIcon={true} to={feedbackLink}>
<ExternalLinkIcon style={{ verticalAlign: 'text-top' }} />{' '}
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

IMO, ExternalLinkIcon makes more sense here. Since its navigating users from CM. But, needs confirmation from UX.

Copy link
Contributor

@abailly-akamai abailly-akamai Nov 9, 2023 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We already have an external link icon on the component but you hide it to add another one. why not just use our component treatment? (or the proper docs link treatment)

{feedbackLink && (
          <Grid container sx={docsLink ? sxFeedbackLink : null}>
            <Link external to={feedbackLink}>
              {feedbackLinkLabel}
            </Link>
          </Grid>
        )}

Screenshot 2023-11-09 at 09 33 43

Also, you don't really need a Typography around the Link.

{feedbackLinkLabel}
</Link>
</Typography>
</Grid>
)}
{!shouldHideDocsAndCreateButtons && (
<Grid container>
{docsLink ? (
<DocsLink
analyticsLabel={docsAnalyticsLabel}
Expand Down Expand Up @@ -113,8 +135,8 @@ export const LandingHeader = ({
</Actions>
)}
</Grid>
</Grid>
)}
)}
</Grid>
</Grid>
);
};
Expand Down
4 changes: 3 additions & 1 deletion packages/manager/src/features/LoadBalancers/LoadBalancerCreate/LoadBalancerBasicCreate.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import { CreateBasicLoadbalancerSchema } from '@linode/validation';
import { useFormik } from 'formik';
import { useSnackbar } from 'notistack';
import * as React from 'react';
Expand All @@ -15,7 +16,6 @@ import { useLoadBalancerBasicCreateMutation } from 'src/queries/aglb/loadbalance
import { getFormikErrorsFromAPIErrors } from 'src/utilities/formikErrorUtils';

import { LoadBalancerRegions } from './LoadBalancerRegions';
import { CreateBasicLoadbalancerSchema } from '@linode/validation';

export const LoadBalancerBasicCreate = () => {
const {
Expand Down Expand Up @@ -63,6 +63,8 @@ export const LoadBalancerBasicCreate = () => {
],
pathname: location.pathname,
}}
feedbackLink="https://docs.google.com/forms/d/e/1FAIpQLSdfetx9VvwjUAC_gdGQai_FpZN4xZ1GZGW54abezS2aV5rCcQ/viewform"
feedbackLinkLabel="BETA Feedback"
cpathipa marked this conversation as resolved.
Show resolved Hide resolved
title="Create"
/>
<Stack spacing={3}>
Expand Down
4 changes: 3 additions & 1 deletion packages/manager/src/features/LoadBalancers/LoadBalancerCreate/LoadBalancerCreate.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,12 +26,14 @@ export const LoadBalancerCreate = () => {
breadcrumbProps={{
crumbOverrides: [
{
label: 'Global Load Balancers',
label: 'Global Load Balancerads',
cpathipa marked this conversation as resolved.
Show resolved Hide resolved
position: 1,
},
],
pathname: location.pathname,
}}
feedbackLink="https://docs.google.com/forms/d/e/1FAIpQLSdfetx9VvwjUAC_gdGQai_FpZN4xZ1GZGW54abezS2aV5rCcQ/viewform"
feedbackLinkLabel="BETA Feedback"
title="Create"
/>
<Formik<CreateLoadbalancerPayload>
Expand Down
2 changes: 2 additions & 0 deletions packages/manager/src/features/LoadBalancers/LoadBalancerDetail/LoadBalancerDetail.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -105,6 +105,8 @@ export const LoadBalancerDetail = () => {
}}
docsLabel="Docs"
docsLink="" // TODO: AGLB - Add docs link
feedbackLink="https://docs.google.com/forms/d/e/1FAIpQLSdfetx9VvwjUAC_gdGQai_FpZN4xZ1GZGW54abezS2aV5rCcQ/viewform"
feedbackLinkLabel="BETA Feedback"
/>
<Tabs index={tabIndex === -1 ? 0 : tabIndex}>
<TabLinkList
Expand Down
2 changes: 2 additions & 0 deletions packages/manager/src/features/LoadBalancers/LoadBalancerLanding/LoadBalancerLanding.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -100,6 +100,8 @@ export const LoadBalancerLanding = () => {
docsLabel="Docs"
docsLink="" // TODO: AGLB - Add docs link
entity="Global Load Balancers"
feedbackLink="https://docs.google.com/forms/d/e/1FAIpQLSdfetx9VvwjUAC_gdGQai_FpZN4xZ1GZGW54abezS2aV5rCcQ/viewform"
feedbackLinkLabel="BETA Feedback"
onButtonClick={createLoadBalancer}
removeCrumbX={1}
title="Global Load Balancers"
Expand Down