From 96974908ebc0b8539b70b5a9ddf72d4952cedf61 Mon Sep 17 00:00:00 2001 From: Banks Nussman Date: Tue, 22 Oct 2024 18:30:05 -0400 Subject: [PATCH 1/6] initial work --- packages/manager/src/components/Paper.tsx | 4 +- .../TabbedReply/MarkdownReference.tsx | 56 +++++++--------- .../TabbedReply/PreviewReply.tsx | 7 +- .../TabbedReply/ReplyContainer.tsx | 60 +++++------------ .../TabbedReply/TabbedReply.tsx | 64 +++++++------------ .../SupportTickets/SupportTicketDialog.tsx | 8 +-- 6 files changed, 72 insertions(+), 127 deletions(-) diff --git a/packages/manager/src/components/Paper.tsx b/packages/manager/src/components/Paper.tsx index 61bc8f129c3..5b8355cad18 100644 --- a/packages/manager/src/components/Paper.tsx +++ b/packages/manager/src/components/Paper.tsx @@ -40,11 +40,11 @@ export const Paper = (props: Props) => { const StyledPaper = styled(_Paper, { shouldForwardProp: omittedProps(['error']), })(({ theme, ...props }) => ({ - borderColor: props.error ? theme.color.red : undefined, + borderColor: props.error ? theme.palette.error.dark : undefined, padding: theme.spacing(3), paddingTop: 17, })); const StyledErrorText = styled(FormHelperText)(({ theme }) => ({ - color: theme.color.red, + color: theme.palette.error.dark, })); diff --git a/packages/manager/src/features/Support/SupportTicketDetail/TabbedReply/MarkdownReference.tsx b/packages/manager/src/features/Support/SupportTicketDetail/TabbedReply/MarkdownReference.tsx index e0c27ecc042..d3abbd1a24c 100644 --- a/packages/manager/src/features/Support/SupportTicketDetail/TabbedReply/MarkdownReference.tsx +++ b/packages/manager/src/features/Support/SupportTicketDetail/TabbedReply/MarkdownReference.tsx @@ -1,33 +1,18 @@ import * as React from 'react'; -import { makeStyles } from 'tss-react/mui'; +import { HighlightedMarkdown } from 'src/components/HighlightedMarkdown/HighlightedMarkdown'; import { Link } from 'src/components/Link'; +import { Paper } from 'src/components/Paper'; +import { Stack } from 'src/components/Stack'; import { Typography } from 'src/components/Typography'; -import type { Theme } from '@mui/material/styles'; - -const useStyles = makeStyles()((theme: Theme) => ({ - example: { - backgroundColor: theme.name === 'dark' ? theme.bg.white : theme.bg.offWhite, - margin: `${theme.spacing(2)} 0`, - padding: theme.spacing(2), - }, - header: { - marginBottom: theme.spacing(), - marginTop: theme.spacing(2), - }, -})); - interface Props { isReply?: boolean; - rootClass?: string; } export const MarkdownReference = (props: Props) => { - const { classes } = useStyles(); - return ( -
+ You can use Markdown to format your{' '} {props.isReply ? 'reply' : 'question'}. For more examples see this{' '} @@ -35,32 +20,39 @@ export const MarkdownReference = (props: Props) => { Markdown cheatsheet - - Examples + theme.font.bold} variant="h3"> + Examples -
+ ({ + backgroundColor: theme.palette.background.default, + p: 2, + })} + > [I am a link](https://google.com) -
I am a link', }} /> -
-
+ + ({ + backgroundColor: theme.palette.background.default, + p: 2, + })} + > - ``` + ```js
const someCode = 'hello world';
``` - const someCode = "hello world"`, - }} + -
-
+ + ); }; diff --git a/packages/manager/src/features/Support/SupportTicketDetail/TabbedReply/PreviewReply.tsx b/packages/manager/src/features/Support/SupportTicketDetail/TabbedReply/PreviewReply.tsx index 8fb97b8ceda..61de655ae29 100644 --- a/packages/manager/src/features/Support/SupportTicketDetail/TabbedReply/PreviewReply.tsx +++ b/packages/manager/src/features/Support/SupportTicketDetail/TabbedReply/PreviewReply.tsx @@ -14,12 +14,13 @@ export const PreviewReply = (props: Props) => { return ( diff --git a/packages/manager/src/features/Support/SupportTicketDetail/TabbedReply/ReplyContainer.tsx b/packages/manager/src/features/Support/SupportTicketDetail/TabbedReply/ReplyContainer.tsx index 6752630d1c4..383ed47eeb4 100644 --- a/packages/manager/src/features/Support/SupportTicketDetail/TabbedReply/ReplyContainer.tsx +++ b/packages/manager/src/features/Support/SupportTicketDetail/TabbedReply/ReplyContainer.tsx @@ -1,11 +1,9 @@ -import { SupportReply, uploadAttachment } from '@linode/api-v4/lib/support'; -import { APIError } from '@linode/api-v4/lib/types'; +import { uploadAttachment } from '@linode/api-v4'; import Grid from '@mui/material/Unstable_Grid2'; -import { Theme } from '@mui/material/styles'; -import { makeStyles } from 'tss-react/mui'; import { lensPath, set } from 'ramda'; import * as React from 'react'; import { debounce } from 'throttle-debounce'; +import { makeStyles } from 'tss-react/mui'; import { Accordion } from 'src/components/Accordion'; import { Notice } from 'src/components/Notice/Notice'; @@ -14,37 +12,19 @@ import { getAPIErrorOrDefault, getErrorMap } from 'src/utilities/errorUtils'; import { storage } from 'src/utilities/storage'; import { AttachFileForm } from '../../AttachFileForm'; -import { FileAttachment } from '../../index'; import { MarkdownReference } from './MarkdownReference'; import { ReplyActions } from './ReplyActions'; import { TabbedReply } from './TabbedReply'; +import type { FileAttachment } from '../../index'; +import type { APIError, SupportReply } from '@linode/api-v4'; +import type { Theme } from '@mui/material/styles'; + const useStyles = makeStyles()((theme: Theme) => ({ - expPanelSummary: { - backgroundColor: theme.name === 'dark' ? theme.bg.main : theme.bg.white, - borderTop: `1px solid ${theme.bg.main}`, - paddingTop: theme.spacing(), - }, - reference: { - [theme.breakpoints.down('sm')]: { - padding: `${theme.spacing(2)} !important`, - }, - [theme.breakpoints.up('sm')]: { - marginLeft: 4, - marginRight: 4, - marginTop: theme.spacing(7), - padding: `0 !important`, - }, - }, - referenceRoot: { - '& > p': { - marginBottom: theme.spacing(), - }, - }, replyContainer: { paddingLeft: theme.spacing(6), [theme.breakpoints.down('sm')]: { - paddingLeft: theme.spacing(6), + paddingLeft: theme.spacing(5), }, }, })); @@ -172,23 +152,15 @@ export const ReplyContainer = (props: Props) => { variant="error" /> )} - - - - - - - - + + + + diff --git a/packages/manager/src/features/Support/SupportTicketDetail/TabbedReply/TabbedReply.tsx b/packages/manager/src/features/Support/SupportTicketDetail/TabbedReply/TabbedReply.tsx index 2b0c91931cb..73ee990eed1 100644 --- a/packages/manager/src/features/Support/SupportTicketDetail/TabbedReply/TabbedReply.tsx +++ b/packages/manager/src/features/Support/SupportTicketDetail/TabbedReply/TabbedReply.tsx @@ -1,11 +1,15 @@ -import { Theme } from '@mui/material/styles'; -import { makeStyles } from 'tss-react/mui'; -import * as React from 'react'; +import React from 'react'; -import { Tab, TabbedPanel } from 'src/components/TabbedPanel/TabbedPanel'; +import { SafeTabPanel } from 'src/components/Tabs/SafeTabPanel'; +import { Tab } from 'src/components/Tabs/Tab'; +import { TabList } from 'src/components/Tabs/TabList'; +import { TabPanels } from 'src/components/Tabs/TabPanels'; +import { Tabs } from 'src/components/Tabs/Tabs'; import { PreviewReply } from './PreviewReply'; -import { Props as ReplyProps, TicketReply } from './TicketReply'; +import { TicketReply } from './TicketReply'; + +import type { Props as ReplyProps } from './TicketReply'; interface Props extends ReplyProps { innerClass?: string; @@ -14,45 +18,25 @@ interface Props extends ReplyProps { rootClass?: string; } -const useStyles = makeStyles()((theme: Theme) => ({ - root: { - '& div[role="tablist"]': { - marginBottom: theme.spacing(), - marginTop: theme.spacing(), - }, - backgroundColor: 'transparent', - padding: 0, - }, -})); - export const TabbedReply = (props: Props) => { - const { classes } = useStyles(); - const { error, innerClass, rootClass, value, ...rest } = props; + const { error, value, ...rest } = props; const title = props.isReply ? 'Reply' : 'Description'; - const tabs: Tab[] = [ - { - render: () => { - return ; - }, - title: props.required ? `${title} (required)` : title, - }, - { - render: () => { - return ; - }, - title: 'Preview', - }, - ]; - return ( - + + + {props.required ? `${title} (required)` : title} + Preview + + + + + + + + + + ); }; diff --git a/packages/manager/src/features/Support/SupportTickets/SupportTicketDialog.tsx b/packages/manager/src/features/Support/SupportTickets/SupportTicketDialog.tsx index b401dd0c7ec..80161028bc2 100644 --- a/packages/manager/src/features/Support/SupportTickets/SupportTicketDialog.tsx +++ b/packages/manager/src/features/Support/SupportTickets/SupportTicketDialog.tsx @@ -48,11 +48,6 @@ import type { Theme } from '@mui/material/styles'; import type { EntityForTicketDetails } from 'src/components/SupportLink/SupportLink'; const useStyles = makeStyles()((theme: Theme) => ({ - expPanelSummary: { - backgroundColor: theme.name === 'dark' ? theme.bg.main : theme.bg.white, - borderTop: `1px solid ${theme.bg.main}`, - paddingTop: theme.spacing(1), - }, innerReply: { '& div[role="tablist"]': { marginBottom: theme.spacing(), @@ -508,8 +503,9 @@ export const SupportTicketDialog = (props: SupportTicketDialogProps) => { name="description" /> From 25c30dd785a47bc80f4f5b4ea5f710844abfe941 Mon Sep 17 00:00:00 2001 From: Banks Nussman Date: Tue, 22 Oct 2024 18:48:32 -0400 Subject: [PATCH 2/6] fix more ui --- .../TabbedReply/TabbedReply.tsx | 2 - .../SupportTickets/SupportTicketDialog.tsx | 54 +++++++------------ 2 files changed, 18 insertions(+), 38 deletions(-) diff --git a/packages/manager/src/features/Support/SupportTicketDetail/TabbedReply/TabbedReply.tsx b/packages/manager/src/features/Support/SupportTicketDetail/TabbedReply/TabbedReply.tsx index 73ee990eed1..5a309481537 100644 --- a/packages/manager/src/features/Support/SupportTicketDetail/TabbedReply/TabbedReply.tsx +++ b/packages/manager/src/features/Support/SupportTicketDetail/TabbedReply/TabbedReply.tsx @@ -12,10 +12,8 @@ import { TicketReply } from './TicketReply'; import type { Props as ReplyProps } from './TicketReply'; interface Props extends ReplyProps { - innerClass?: string; isReply?: boolean; required?: boolean; - rootClass?: string; } export const TabbedReply = (props: Props) => { diff --git a/packages/manager/src/features/Support/SupportTickets/SupportTicketDialog.tsx b/packages/manager/src/features/Support/SupportTickets/SupportTicketDialog.tsx index 80161028bc2..0dfa185b34b 100644 --- a/packages/manager/src/features/Support/SupportTickets/SupportTicketDialog.tsx +++ b/packages/manager/src/features/Support/SupportTickets/SupportTicketDialog.tsx @@ -5,11 +5,11 @@ import * as React from 'react'; import { Controller, FormProvider, useForm } from 'react-hook-form'; import { useLocation } from 'react-router-dom'; import { debounce } from 'throttle-debounce'; -import { makeStyles } from 'tss-react/mui'; import { Accordion } from 'src/components/Accordion'; import { ActionsPanel } from 'src/components/ActionsPanel/ActionsPanel'; import { Autocomplete } from 'src/components/Autocomplete/Autocomplete'; +import { Box } from 'src/components/Box'; import { Dialog } from 'src/components/Dialog/Dialog'; import { Notice } from 'src/components/Notice/Notice'; import { TextField } from 'src/components/TextField'; @@ -44,24 +44,8 @@ import type { SMTPCustomFields } from './SupportTicketSMTPFields'; import type { CreateKubeClusterPayload } from '@linode/api-v4'; import type { TicketSeverity } from '@linode/api-v4/lib/support'; import type { CreateLinodeRequest } from '@linode/api-v4/src/linodes/types'; -import type { Theme } from '@mui/material/styles'; import type { EntityForTicketDetails } from 'src/components/SupportLink/SupportLink'; -const useStyles = makeStyles()((theme: Theme) => ({ - innerReply: { - '& div[role="tablist"]': { - marginBottom: theme.spacing(), - marginTop: theme.spacing(), - }, - padding: 0, - }, - rootReply: { - marginBottom: theme.spacing(2), - marginTop: theme.spacing(2), - padding: 0, - }, -})); - interface Accumulator { errors: AttachmentError[]; success: string[]; @@ -207,8 +191,6 @@ export const SupportTicketDialog = (props: SupportTicketDialogProps) => { const [submitting, setSubmitting] = React.useState(false); - const { classes } = useStyles(); - React.useEffect(() => { if (!open) { resetDrawer(); @@ -485,23 +467,23 @@ export const SupportTicketDialog = (props: SupportTicketDialogProps) => { {props.hideProductSelection ? null : ( )} - ( - - )} - control={form.control} - name="description" - /> + + ( + + )} + control={form.control} + name="description" + /> + Date: Wed, 23 Oct 2024 08:00:23 -0400 Subject: [PATCH 3/6] add changeset --- .../manager/.changeset/pr-11144-changed-1729684811107.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 packages/manager/.changeset/pr-11144-changed-1729684811107.md diff --git a/packages/manager/.changeset/pr-11144-changed-1729684811107.md b/packages/manager/.changeset/pr-11144-changed-1729684811107.md new file mode 100644 index 00000000000..2b69521036d --- /dev/null +++ b/packages/manager/.changeset/pr-11144-changed-1729684811107.md @@ -0,0 +1,5 @@ +--- +"@linode/manager": Changed +--- + +Slightly improve styles on support ticket flows ([#11144](https://github.com/linode/manager/pull/11144)) From 2f99cb18c0e802d2df244d9ec4585b16a0145d3a Mon Sep 17 00:00:00 2001 From: Banks Nussman Date: Wed, 23 Oct 2024 12:43:59 -0400 Subject: [PATCH 4/6] fix padding on preview paper --- .../Support/SupportTicketDetail/TabbedReply/PreviewReply.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/manager/src/features/Support/SupportTicketDetail/TabbedReply/PreviewReply.tsx b/packages/manager/src/features/Support/SupportTicketDetail/TabbedReply/PreviewReply.tsx index 61de655ae29..d786e28a852 100644 --- a/packages/manager/src/features/Support/SupportTicketDetail/TabbedReply/PreviewReply.tsx +++ b/packages/manager/src/features/Support/SupportTicketDetail/TabbedReply/PreviewReply.tsx @@ -16,8 +16,7 @@ export const PreviewReply = (props: Props) => { sx={{ height: '243px', overflowY: 'auto', - paddingX: 2.5, - paddingY: 0, + padding: 1.75, }} error={error} variant="outlined" From abb4f5d9244417af9a735e54b501996bcd176b16 Mon Sep 17 00:00:00 2001 From: Banks Nussman Date: Wed, 23 Oct 2024 12:48:52 -0400 Subject: [PATCH 5/6] feedback @mjac0bs --- .../SupportTicketDetail/TabbedReply/MarkdownReference.tsx | 6 ++---- .../features/Support/SupportTickets/SupportTicketDialog.tsx | 2 +- 2 files changed, 3 insertions(+), 5 deletions(-) diff --git a/packages/manager/src/features/Support/SupportTicketDetail/TabbedReply/MarkdownReference.tsx b/packages/manager/src/features/Support/SupportTicketDetail/TabbedReply/MarkdownReference.tsx index d3abbd1a24c..b9b98e2ffe1 100644 --- a/packages/manager/src/features/Support/SupportTicketDetail/TabbedReply/MarkdownReference.tsx +++ b/packages/manager/src/features/Support/SupportTicketDetail/TabbedReply/MarkdownReference.tsx @@ -15,14 +15,12 @@ export const MarkdownReference = (props: Props) => { You can use Markdown to format your{' '} - {props.isReply ? 'reply' : 'question'}. For more examples see this{' '} + {props.isReply ? 'reply' : 'question'}. For more examples, see this{' '} Markdown cheatsheet - theme.font.bold} variant="h3"> - Examples - + theme.font.bold}>Examples ({ backgroundColor: theme.palette.background.default, diff --git a/packages/manager/src/features/Support/SupportTickets/SupportTicketDialog.tsx b/packages/manager/src/features/Support/SupportTickets/SupportTicketDialog.tsx index 0dfa185b34b..e7940ec7999 100644 --- a/packages/manager/src/features/Support/SupportTickets/SupportTicketDialog.tsx +++ b/packages/manager/src/features/Support/SupportTickets/SupportTicketDialog.tsx @@ -472,7 +472,7 @@ export const SupportTicketDialog = (props: SupportTicketDialogProps) => { render={({ field, fieldState }) => ( Date: Thu, 24 Oct 2024 11:13:53 -0400 Subject: [PATCH 6/6] fix top padding @harsh-akamai --- .../src/features/Support/SupportTickets/SupportTicketDialog.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/manager/src/features/Support/SupportTickets/SupportTicketDialog.tsx b/packages/manager/src/features/Support/SupportTickets/SupportTicketDialog.tsx index e7940ec7999..e80beeeda03 100644 --- a/packages/manager/src/features/Support/SupportTickets/SupportTicketDialog.tsx +++ b/packages/manager/src/features/Support/SupportTickets/SupportTicketDialog.tsx @@ -488,6 +488,7 @@ export const SupportTicketDialog = (props: SupportTicketDialogProps) => { detailProps={{ sx: { p: 0.25 } }} heading="Formatting Tips" summaryProps={{ sx: { paddingX: 0.25 } }} + sx={(theme) => ({ mt: `${theme.spacing(0.5)} !important` })} // forcefully disable margin when accordion is expanded >