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.

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

refactor: [M3-8775] - Make the Support Ticket UI look slightly less broken #11144

Merged
Show file tree
Hide file tree
Changes from 3 commits
Commits
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
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@linode/manager": Changed
---

Slightly improve styles on support ticket flows ([#11144](https://github.com/linode/manager/pull/11144))
4 changes: 2 additions & 2 deletions packages/manager/src/components/Paper.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -40,11 +40,11 @@ export const Paper = (props: Props) => {
const StyledPaper = styled(_Paper, {
shouldForwardProp: omittedProps(['error']),
})<Props>(({ 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,
}));
Original file line number Diff line number Diff line change
@@ -1,66 +1,58 @@
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 (
<div className={props.rootClass}>
<Stack spacing={2}>
<Typography>
You can use Markdown to format your{' '}
{props.isReply ? 'reply' : 'question'}. For more examples see this{' '}
bnussman-akamai marked this conversation as resolved.
Show resolved Hide resolved
<Link external to="https://commonmark.org/help/">
Markdown cheatsheet
</Link>
</Typography>
<Typography className={classes.header}>
<strong>Examples</strong>
<Typography fontFamily={(theme) => theme.font.bold} variant="h3">
Copy link
Contributor

Choose a reason for hiding this comment

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

I don't think we want Formatting Tips and this Examples header to both be h3s, semantically.

Screenshot 2024-10-23 at 9 07 46β€―AM

Copy link
Member Author

@bnussman-akamai bnussman-akamai Oct 23, 2024

Choose a reason for hiding this comment

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

I would have used h4 if it was properly implemented 😭

Any recommendations on what to do here?

We could implement h4 in the theme relatively easily. I will just use bold text for now in abb4f5d

Copy link
Contributor

Choose a reason for hiding this comment

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

h4 is ginormous, ha. I see now that we've only got h1-h3 and subtitle1 in our theme. It doesn't look like subtitle1 is what we want here, either. My preference would be to implement h4 in theme, since that's really the way to avoid running into this again in the future. Seems like it would be a small lift?

Copy link
Contributor

Choose a reason for hiding this comment

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

Just saw the latest edit to your comment which I think you updated at almost the same time I posted mine. Agreed that bolded looks fine here.

Screenshot 2024-10-23 at 10 33 01β€―AM

Copy link
Contributor

Choose a reason for hiding this comment

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

The changes look good and it improves the previous iteration. In the future, if you run into something similar and want to explore another workaround consider the following.

The <Typography> component can actually take a component prop and styling can be accomplished with the variant and sx props like this:

<Typography
  component="span"
  sx={(theme) => padding: theme.spacing(1)} 
  variant="body1"
>

Examples
</Typography>
<div className={classes.example}>
<Paper
sx={(theme) => ({
backgroundColor: theme.palette.background.default,
p: 2,
})}
>
<Typography>[I am a link](https://google.com)</Typography>
<br />
<Typography
dangerouslySetInnerHTML={{
__html: '<a>I am a link</a>',
}}
/>
</div>
<div className={classes.example}>
</Paper>
<Paper
sx={(theme) => ({
backgroundColor: theme.palette.background.default,
p: 2,
})}
>
<Typography>
```
```js
<br />
const someCode = 'hello world';
<br />
```
</Typography>
<Typography
dangerouslySetInnerHTML={{
__html: `<pre style="white-space: pre-wrap;">const someCode = "hello world"</pre>`,
}}
<HighlightedMarkdown
textOrMarkdown={'```ts\nconst someCode = "hello world"\n```'}
/>
</div>
</div>
</Paper>
</Stack>
);
};
Original file line number Diff line number Diff line change
Expand Up @@ -14,12 +14,13 @@ export const PreviewReply = (props: Props) => {
return (
<Paper
sx={{
border: '1px solid #ccc',
height: 320,
height: '243px',
overflowY: 'auto',
padding: `9px 12px 9px 12px`,
paddingX: 2.5,
paddingY: 0,
bnussman-akamai marked this conversation as resolved.
Show resolved Hide resolved
}}
error={error}
variant="outlined"
>
<HighlightedMarkdown textOrMarkdown={value} />
</Paper>
Expand Down
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -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),
},
},
}));
Expand Down Expand Up @@ -172,23 +152,15 @@ export const ReplyContainer = (props: Props) => {
variant="error"
/>
)}
<Grid>
<TabbedReply
error={errorMap.description}
handleChange={setValue}
isReply
value={value}
/>
</Grid>
<Grid style={{ marginTop: 8 }}>
<Accordion
defaultExpanded={false}
detailProps={{ className: classes.expPanelSummary }}
heading="Formatting Tips"
>
<MarkdownReference isReply rootClass={classes.referenceRoot} />
</Accordion>
</Grid>
<TabbedReply
error={errorMap.description}
handleChange={setValue}
isReply
value={value}
/>
<Accordion heading="Formatting Tips" sx={{ mt: 2 }}>
<MarkdownReference isReply />
</Accordion>
<Grid>
<AttachFileForm
updateFiles={(filesToAttach: FileAttachment[]) =>
Expand Down
Original file line number Diff line number Diff line change
@@ -1,58 +1,40 @@
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;
isReply?: boolean;
required?: boolean;
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 <TicketReply {...rest} error={error} value={value} />;
},
title: props.required ? `${title} (required)` : title,
},
{
render: () => {
return <PreviewReply error={error} value={value} />;
},
title: 'Preview',
},
];

return (
<TabbedPanel
header=""
innerClass={innerClass}
noPadding
rootClass={rootClass || classes.root}
tabs={tabs}
/>
<Tabs>
<TabList>
<Tab>{props.required ? `${title} (required)` : title}</Tab>
<Tab>Preview</Tab>
</TabList>
<TabPanels>
<SafeTabPanel index={0}>
<TicketReply {...rest} error={error} value={value} />
</SafeTabPanel>
<SafeTabPanel index={1}>
<PreviewReply error={error} value={value} />
</SafeTabPanel>
</TabPanels>
</Tabs>
);
};
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -44,29 +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) => ({
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(),
marginTop: theme.spacing(),
},
padding: 0,
},
rootReply: {
marginBottom: theme.spacing(2),
marginTop: theme.spacing(2),
padding: 0,
},
}));

interface Accumulator {
errors: AttachmentError[];
success: string[];
Expand Down Expand Up @@ -212,8 +191,6 @@ export const SupportTicketDialog = (props: SupportTicketDialogProps) => {

const [submitting, setSubmitting] = React.useState<boolean>(false);

const { classes } = useStyles();

React.useEffect(() => {
if (!open) {
resetDrawer();
Expand Down Expand Up @@ -490,26 +467,27 @@ export const SupportTicketDialog = (props: SupportTicketDialogProps) => {
{props.hideProductSelection ? null : (
<SupportTicketProductSelectionFields />
)}
<Controller
render={({ field, fieldState }) => (
<TabbedReply
placeholder={
"Tell us more about the trouble you're having and any steps you've already taken to resolve it."
}
error={fieldState.error?.message}
handleChange={field.onChange}
innerClass={classes.innerReply}
required
rootClass={classes.rootReply}
value={description}
/>
)}
control={form.control}
name="description"
/>
<Box mt={1}>
<Controller
render={({ field, fieldState }) => (
<TabbedReply
placeholder={
"Tell us more about the trouble you're having and any steps you've already taken to resolve it."
bnussman-akamai marked this conversation as resolved.
Show resolved Hide resolved
}
error={fieldState.error?.message}
handleChange={field.onChange}
required
value={description}
/>
)}
control={form.control}
name="description"
/>
</Box>
<Accordion
detailProps={{ className: classes.expPanelSummary }}
detailProps={{ sx: { p: 0.25 } }}
heading="Formatting Tips"
summaryProps={{ sx: { paddingX: 0.25 } }}
>
<MarkdownReference />
</Accordion>
Expand Down