aboutsummaryrefslogtreecommitdiffstats
path: root/webui/src/pages
diff options
context:
space:
mode:
Diffstat (limited to 'webui/src/pages')
-rw-r--r--webui/src/pages/bug/CommentForm.tsx91
-rw-r--r--webui/src/pages/bug/CommentInput.tsx96
-rw-r--r--webui/src/pages/new/NewBugPage.tsx6
3 files changed, 29 insertions, 164 deletions
diff --git a/webui/src/pages/bug/CommentForm.tsx b/webui/src/pages/bug/CommentForm.tsx
index f2a2eb6c..c39f30c2 100644
--- a/webui/src/pages/bug/CommentForm.tsx
+++ b/webui/src/pages/bug/CommentForm.tsx
@@ -2,12 +2,9 @@ import React, { useState, useRef } from 'react';
import Button from '@material-ui/core/Button';
import Paper from '@material-ui/core/Paper';
-import Tab from '@material-ui/core/Tab';
-import Tabs from '@material-ui/core/Tabs';
-import TextField from '@material-ui/core/TextField';
import { makeStyles, Theme } from '@material-ui/core/styles';
-import Content from 'src/components/Content';
+import CommentInput from '../../layout/CommentInput/CommentInput';
import { useAddCommentMutation } from './CommentForm.generated';
import { TimelineDocument } from './TimelineQuery.generated';
@@ -30,40 +27,23 @@ const useStyles = makeStyles<Theme, StyleProps>((theme) => ({
display: 'flex',
justifyContent: 'flex-end',
},
+ greenButton: {
+ backgroundColor: '#2ea44fd9',
+ color: '#fff',
+ '&:hover': {
+ backgroundColor: '#2ea44f',
+ },
+ },
}));
-type TabPanelProps = {
- children: React.ReactNode;
- value: number;
- index: number;
-} & React.HTMLProps<HTMLDivElement>;
-function TabPanel({ children, value, index, ...props }: TabPanelProps) {
- return (
- <div
- role="tabpanel"
- hidden={value !== index}
- id={`editor-tabpanel-${index}`}
- aria-labelledby={`editor-tab-${index}`}
- {...props}
- >
- {value === index && children}
- </div>
- );
-}
-
-const a11yProps = (index: number) => ({
- id: `editor-tab-${index}`,
- 'aria-controls': `editor-tabpanel-${index}`,
-});
-
type Props = {
bugId: string;
};
function CommentForm({ bugId }: Props) {
const [addComment, { loading }] = useAddCommentMutation();
- const [input, setInput] = useState<string>('');
- const [tab, setTab] = useState(0);
+ const [issueComment, setIssueComment] = useState('');
+ const [inputProp, setInputProp] = useState<any>('');
const classes = useStyles({ loading });
const form = useRef<HTMLFormElement>(null);
@@ -72,7 +52,7 @@ function CommentForm({ bugId }: Props) {
variables: {
input: {
prefix: bugId,
- message: input,
+ message: issueComment,
},
},
refetchQueries: [
@@ -86,54 +66,35 @@ function CommentForm({ bugId }: Props) {
},
],
awaitRefetchQueries: true,
- }).then(() => setInput(''));
+ }).then(() => resetForm());
};
+ function resetForm() {
+ setInputProp({
+ value: '',
+ });
+ }
+
const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault();
- submit();
- };
-
- const handleKeyDown = (e: React.KeyboardEvent<HTMLElement>) => {
- // Submit on cmd/ctrl+enter
- if ((e.metaKey || e.altKey) && e.keyCode === 13) {
- submit();
- }
+ if (issueComment.length > 0) submit();
};
return (
<Paper className={classes.container}>
<form onSubmit={handleSubmit} ref={form}>
- <Tabs value={tab} onChange={(_, t) => setTab(t)}>
- <Tab label="Write" {...a11yProps(0)} />
- <Tab label="Preview" {...a11yProps(1)} />
- </Tabs>
- <div className={classes.tabContent}>
- <TabPanel value={tab} index={0}>
- <TextField
- onKeyDown={handleKeyDown}
- fullWidth
- label="Comment"
- placeholder="Leave a comment"
- className={classes.textarea}
- multiline
- value={input}
- variant="filled"
- rows="4" // TODO: rowsMin support
- onChange={(e: any) => setInput(e.target.value)}
- disabled={loading}
- />
- </TabPanel>
- <TabPanel value={tab} index={1} className={classes.preview}>
- <Content markdown={input} />
- </TabPanel>
- </div>
+ <CommentInput
+ inputProps={inputProp}
+ loading={loading}
+ onChange={(comment: string) => setIssueComment(comment)}
+ />
<div className={classes.actions}>
<Button
+ className={classes.greenButton}
variant="contained"
color="primary"
type="submit"
- disabled={loading}
+ disabled={loading || issueComment.length === 0}
>
Comment
</Button>
diff --git a/webui/src/pages/bug/CommentInput.tsx b/webui/src/pages/bug/CommentInput.tsx
deleted file mode 100644
index 540a53f7..00000000
--- a/webui/src/pages/bug/CommentInput.tsx
+++ /dev/null
@@ -1,96 +0,0 @@
-import React, { useState, useEffect } from 'react';
-
-import Tab from '@material-ui/core/Tab';
-import Tabs from '@material-ui/core/Tabs';
-import TextField from '@material-ui/core/TextField';
-import { makeStyles } from '@material-ui/core/styles';
-
-import Content from 'src/components/Content';
-
-const useStyles = makeStyles((theme) => ({
- container: {
- margin: theme.spacing(2, 0),
- padding: theme.spacing(0, 2, 2, 2),
- },
- textarea: {},
- tabContent: {
- margin: theme.spacing(2, 0),
- },
- preview: {
- borderBottom: `solid 3px ${theme.palette.grey['200']}`,
- minHeight: '5rem',
- },
- actions: {
- display: 'flex',
- justifyContent: 'flex-end',
- },
-}));
-
-type TabPanelProps = {
- children: React.ReactNode;
- value: number;
- index: number;
-} & React.HTMLProps<HTMLDivElement>;
-function TabPanel({ children, value, index, ...props }: TabPanelProps) {
- return (
- <div
- role="tabpanel"
- hidden={value !== index}
- id={`editor-tabpanel-${index}`}
- aria-labelledby={`editor-tab-${index}`}
- {...props}
- >
- {value === index && children}
- </div>
- );
-}
-
-const a11yProps = (index: number) => ({
- id: `editor-tab-${index}`,
- 'aria-controls': `editor-tabpanel-${index}`,
-});
-
-type Props = {
- loading: boolean;
- onChange: (comment: string) => void;
-};
-
-function CommentInput({ loading, onChange }: Props) {
- const [input, setInput] = useState<string>('');
- const [tab, setTab] = useState(0);
- const classes = useStyles();
-
- useEffect(() => {
- onChange(input);
- }, [input, onChange]);
-
- return (
- <div>
- <Tabs value={tab} onChange={(_, t) => setTab(t)}>
- <Tab label="Write" {...a11yProps(0)} />
- <Tab label="Preview" {...a11yProps(1)} />
- </Tabs>
- <div className={classes.tabContent}>
- <TabPanel value={tab} index={0}>
- <TextField
- fullWidth
- label="Comment"
- placeholder="Leave a comment"
- className={classes.textarea}
- multiline
- value={input}
- variant="filled"
- rows="4" // TODO: rowsMin support
- onChange={(e: any) => setInput(e.target.value)}
- disabled={loading}
- />
- </TabPanel>
- <TabPanel value={tab} index={1} className={classes.preview}>
- <Content markdown={input} />
- </TabPanel>
- </div>
- </div>
- );
-}
-
-export default CommentInput;
diff --git a/webui/src/pages/new/NewBugPage.tsx b/webui/src/pages/new/NewBugPage.tsx
index c8e68e7b..8e06706f 100644
--- a/webui/src/pages/new/NewBugPage.tsx
+++ b/webui/src/pages/new/NewBugPage.tsx
@@ -5,7 +5,7 @@ import Paper from '@material-ui/core/Paper';
import TextField from '@material-ui/core/TextField/TextField';
import { fade, makeStyles, Theme } from '@material-ui/core/styles';
-import CommentInput from '../bug/CommentInput';
+import CommentInput from '../../layout/CommentInput/CommentInput';
import { useNewBugMutation } from './NewBug.generated';
@@ -42,7 +42,7 @@ const useStyles = makeStyles((theme: Theme) => ({
display: 'flex',
justifyContent: 'flex-end',
},
- gitbugButton: {
+ greenButton: {
backgroundColor: '#2ea44fd9',
color: '#fff',
'&:hover': {
@@ -105,7 +105,7 @@ function NewBugPage() {
/>
<div className={classes.actions}>
<Button
- className={classes.gitbugButton}
+ className={classes.greenButton}
variant="contained"
type="submit"
disabled={isFormValid() ? false : true}
generated by cgit (git 2.34.1) at 2024-11-02 20:30:48 +0000