aboutsummaryrefslogtreecommitdiffstats
path: root/webui/src
diff options
context:
space:
mode:
Diffstat (limited to 'webui/src')
-rw-r--r--webui/src/components/CommentInput/CommentInput.tsx5
-rw-r--r--webui/src/pages/bug/EditCommentForm.tsx43
-rw-r--r--webui/src/pages/bug/Message.tsx22
3 files changed, 30 insertions, 40 deletions
diff --git a/webui/src/components/CommentInput/CommentInput.tsx b/webui/src/components/CommentInput/CommentInput.tsx
index 86cc7dbb..c574538e 100644
--- a/webui/src/components/CommentInput/CommentInput.tsx
+++ b/webui/src/components/CommentInput/CommentInput.tsx
@@ -51,6 +51,7 @@ const a11yProps = (index: number) => ({
type Props = {
inputProps?: any;
+ inputText?: string;
loading: boolean;
onChange: (comment: string) => void;
};
@@ -62,8 +63,8 @@ type Props = {
* @param loading Disable input when component not ready yet
* @param onChange Callback to return input value changes
*/
-function CommentInput({ inputProps, loading, onChange }: Props) {
- const [input, setInput] = useState<string>('');
+function CommentInput({ inputProps, inputText, loading, onChange }: Props) {
+ const [input, setInput] = useState<string>(inputText ? inputText : '');
const [tab, setTab] = useState(0);
const classes = useStyles();
diff --git a/webui/src/pages/bug/EditCommentForm.tsx b/webui/src/pages/bug/EditCommentForm.tsx
index fb192a02..46cf1e1f 100644
--- a/webui/src/pages/bug/EditCommentForm.tsx
+++ b/webui/src/pages/bug/EditCommentForm.tsx
@@ -8,7 +8,8 @@ import CommentInput from '../../components/CommentInput/CommentInput';
import { BugFragment } from './Bug.generated';
import { useAddCommentMutation } from './CommentForm.generated';
-import { TimelineDocument } from './TimelineQuery.generated';
+import { AddCommentFragment } from './MessageCommentFragment.generated';
+import { CreateFragment } from './MessageCreateFragment.generated';
type StyleProps = { loading: boolean };
const useStyles = makeStyles<Theme, StyleProps>((theme) => ({
@@ -39,37 +40,22 @@ const useStyles = makeStyles<Theme, StyleProps>((theme) => ({
type Props = {
bug: BugFragment;
- commentId: string;
- onCancleClick?: () => void;
+ comment: AddCommentFragment | CreateFragment;
+ onCancelClick?: () => void;
+ onPostSubmit?: () => void;
};
-function EditCommentForm({ bug, commentId, onCancleClick }: Props) {
+function EditCommentForm({ bug, comment, onCancelClick, onPostSubmit }: Props) {
const [addComment, { loading }] = useAddCommentMutation();
- const [issueComment, setIssueComment] = useState('');
+ const [issueComment, setIssueComment] = useState<string>(comment.message);
const [inputProp, setInputProp] = useState<any>('');
const classes = useStyles({ loading });
const form = useRef<HTMLFormElement>(null);
const submit = () => {
- addComment({
- variables: {
- input: {
- prefix: bug.id,
- message: issueComment,
- },
- },
- refetchQueries: [
- // TODO: update the cache instead of refetching
- {
- query: TimelineDocument,
- variables: {
- id: bug.id,
- first: 100,
- },
- },
- ],
- awaitRefetchQueries: true,
- }).then(() => resetForm());
+ console.log('submit: ' + issueComment);
+ resetForm();
+ if (onPostSubmit) onPostSubmit();
};
function resetForm() {
@@ -83,10 +69,10 @@ function EditCommentForm({ bug, commentId, onCancleClick }: Props) {
if (issueComment.length > 0) submit();
};
- function getCancleButton() {
+ function getCancelButton() {
return (
- <Button onClick={onCancleClick} variant="contained">
- Cancle
+ <Button onClick={onCancelClick} variant="contained">
+ Cancel
</Button>
);
}
@@ -98,9 +84,10 @@ function EditCommentForm({ bug, commentId, onCancleClick }: Props) {
inputProps={inputProp}
loading={loading}
onChange={(comment: string) => setIssueComment(comment)}
+ inputText={comment.message}
/>
<div className={classes.actions}>
- {onCancleClick ? getCancleButton() : ''}
+ {onCancelClick ? getCancelButton() : ''}
<Button
className={classes.greenButton}
variant="contained"
diff --git a/webui/src/pages/bug/Message.tsx b/webui/src/pages/bug/Message.tsx
index 928e256f..08a55dc6 100644
--- a/webui/src/pages/bug/Message.tsx
+++ b/webui/src/pages/bug/Message.tsx
@@ -72,7 +72,7 @@ type Props = {
op: AddCommentFragment | CreateFragment;
};
-function Message({ bug, op }: Props) {
+function Message({ bug, op: comment }: Props) {
const classes = useStyles();
const [editMode, switchToEditMode] = useState(false);
@@ -86,11 +86,11 @@ function Message({ bug, op }: Props) {
<Paper elevation={1} className={classes.bubble}>
<header className={classes.header}>
<div className={classes.title}>
- <Author className={classes.author} author={op.author} />
+ <Author className={classes.author} author={comment.author} />
<span> commented </span>
- <Date date={op.createdAt} />
+ <Date date={comment.createdAt} />
</div>
- {op.edited && <div className={classes.tag}>Edited</div>}
+ {comment.edited && <div className={classes.tag}>Edited</div>}
<IfLoggedIn>
{() => (
<Tooltip title="Edit Message" placement="top" arrow={true}>
@@ -98,7 +98,7 @@ function Message({ bug, op }: Props) {
disableRipple
className={classes.editButton}
aria-label="edit message"
- onClick={() => editComment(op.id)}
+ onClick={() => editComment(comment.id)}
>
<EditIcon />
</IconButton>
@@ -107,14 +107,14 @@ function Message({ bug, op }: Props) {
</IfLoggedIn>
</header>
<section className={classes.body}>
- <Content markdown={op.message} />
+ <Content markdown={comment.message} />
</section>
</Paper>
);
}
function editMessageView() {
- const cancleEdition = () => {
+ const cancelEdition = () => {
switchToEditMode(false);
};
@@ -122,8 +122,10 @@ function Message({ bug, op }: Props) {
<div className={classes.bubble}>
<EditCommentForm
bug={bug}
- onCancleClick={cancleEdition}
- commentId={op.id}
+ onCancelClick={cancelEdition}
+ // Close edit view after submitted changes
+ onPostSubmit={cancelEdition}
+ comment={comment}
/>
</div>
);
@@ -131,7 +133,7 @@ function Message({ bug, op }: Props) {
return (
<article className={classes.container}>
- <Avatar author={op.author} className={classes.avatar} />
+ <Avatar author={comment.author} className={classes.avatar} />
{editMode ? editMessageView() : readMessageView()}
</article>
);