aboutsummaryrefslogtreecommitdiffstats
path: root/webui/src/components
diff options
context:
space:
mode:
Diffstat (limited to 'webui/src/components')
-rw-r--r--webui/src/components/CloseBugButton/index.tsx (renamed from webui/src/components/CloseBugButton/CloseBugButton.tsx)5
-rw-r--r--webui/src/components/CloseBugWithCommentButton/CloseBugWithComment.graphql11
-rw-r--r--webui/src/components/CloseBugWithCommentButton/index.tsx75
-rw-r--r--webui/src/components/CommentInput/CommentInput.tsx20
-rw-r--r--webui/src/components/Header/Header.tsx9
-rw-r--r--webui/src/components/ReopenBugButton/index.tsx (renamed from webui/src/components/ReopenBugButton/ReopenBugButton.tsx)5
-rw-r--r--webui/src/components/ReopenBugWithCommentButton/ReopenBugWithComment.graphql11
-rw-r--r--webui/src/components/ReopenBugWithCommentButton/index.tsx65
-rw-r--r--webui/src/components/Themer.tsx21
9 files changed, 198 insertions, 24 deletions
diff --git a/webui/src/components/CloseBugButton/CloseBugButton.tsx b/webui/src/components/CloseBugButton/index.tsx
index 9f098483..bb154ea7 100644
--- a/webui/src/components/CloseBugButton/CloseBugButton.tsx
+++ b/webui/src/components/CloseBugButton/index.tsx
@@ -1,6 +1,7 @@
import React from 'react';
import Button from '@material-ui/core/Button';
+import CircularProgress from '@material-ui/core/CircularProgress';
import { makeStyles, Theme } from '@material-ui/core/styles';
import ErrorOutlineIcon from '@material-ui/icons/ErrorOutline';
@@ -18,7 +19,7 @@ const useStyles = makeStyles((theme: Theme) => ({
interface Props {
bug: BugFragment;
- disabled: boolean;
+ disabled?: boolean;
}
function CloseBugButton({ bug, disabled }: Props) {
@@ -46,7 +47,7 @@ function CloseBugButton({ bug, disabled }: Props) {
});
}
- if (loading) return <div>Loading...</div>;
+ if (loading) return <CircularProgress />;
if (error) return <div>Error</div>;
return (
diff --git a/webui/src/components/CloseBugWithCommentButton/CloseBugWithComment.graphql b/webui/src/components/CloseBugWithCommentButton/CloseBugWithComment.graphql
new file mode 100644
index 00000000..eb736f53
--- /dev/null
+++ b/webui/src/components/CloseBugWithCommentButton/CloseBugWithComment.graphql
@@ -0,0 +1,11 @@
+mutation AddCommentAndCloseBug($input: AddCommentAndCloseBugInput!) {
+ addCommentAndClose(input: $input) {
+ statusOperation {
+ status
+ }
+ commentOperation {
+ message
+ }
+ }
+}
+
diff --git a/webui/src/components/CloseBugWithCommentButton/index.tsx b/webui/src/components/CloseBugWithCommentButton/index.tsx
new file mode 100644
index 00000000..a0fefa4a
--- /dev/null
+++ b/webui/src/components/CloseBugWithCommentButton/index.tsx
@@ -0,0 +1,75 @@
+import React from 'react';
+
+import Button from '@material-ui/core/Button';
+import CircularProgress from '@material-ui/core/CircularProgress';
+import { makeStyles, Theme } from '@material-ui/core/styles';
+import ErrorOutlineIcon from '@material-ui/icons/ErrorOutline';
+
+import { BugFragment } from 'src/pages/bug/Bug.generated';
+import { TimelineDocument } from 'src/pages/bug/TimelineQuery.generated';
+
+import { useAddCommentAndCloseBugMutation } from './CloseBugWithComment.generated';
+
+const useStyles = makeStyles((theme: Theme) => ({
+ closeIssueIcon: {
+ color: theme.palette.secondary.dark,
+ paddingTop: '0.1rem',
+ },
+}));
+
+interface Props {
+ bug: BugFragment;
+ comment: string;
+ postClick?: () => void;
+}
+
+function CloseBugWithCommentButton({ bug, comment, postClick }: Props) {
+ const [
+ addCommentAndCloseBug,
+ { loading, error },
+ ] = useAddCommentAndCloseBugMutation();
+ const classes = useStyles();
+
+ function addCommentAndCloseBugAction() {
+ addCommentAndCloseBug({
+ variables: {
+ input: {
+ prefix: bug.id,
+ message: comment,
+ },
+ },
+ refetchQueries: [
+ // TODO: update the cache instead of refetching
+ {
+ query: TimelineDocument,
+ variables: {
+ id: bug.id,
+ first: 100,
+ },
+ },
+ ],
+ awaitRefetchQueries: true,
+ }).then(() => {
+ if (postClick) {
+ postClick();
+ }
+ });
+ }
+
+ if (loading) return <CircularProgress />;
+ if (error) return <div>Error</div>;
+
+ return (
+ <div>
+ <Button
+ variant="contained"
+ onClick={() => addCommentAndCloseBugAction()}
+ startIcon={<ErrorOutlineIcon className={classes.closeIssueIcon} />}
+ >
+ Close bug with comment
+ </Button>
+ </div>
+ );
+}
+
+export default CloseBugWithCommentButton;
diff --git a/webui/src/components/CommentInput/CommentInput.tsx b/webui/src/components/CommentInput/CommentInput.tsx
index f12ee8d8..babd495c 100644
--- a/webui/src/components/CommentInput/CommentInput.tsx
+++ b/webui/src/components/CommentInput/CommentInput.tsx
@@ -1,5 +1,6 @@
import React, { useState, useEffect } from 'react';
+import { Typography } from '@material-ui/core';
import Tab from '@material-ui/core/Tab';
import Tabs from '@material-ui/core/Tabs';
import TextField from '@material-ui/core/TextField';
@@ -15,14 +16,23 @@ const useStyles = makeStyles((theme) => ({
margin: theme.spacing(2, 0),
padding: theme.spacing(0, 2, 2, 2),
},
- textarea: {},
+ textarea: {
+ '& textarea.MuiInputBase-input': {
+ resize: 'vertical',
+ },
+ },
tabContent: {
margin: theme.spacing(2, 0),
},
preview: {
+ overflow: 'auto',
borderBottom: `solid 3px ${theme.palette.grey['200']}`,
minHeight: '5rem',
},
+ previewPlaceholder: {
+ color: theme.palette.text.secondary,
+ fontStyle: 'italic',
+ },
}));
type TabPanelProps = {
@@ -98,7 +108,13 @@ function CommentInput({ inputProps, inputText, loading, onChange }: Props) {
/>
</TabPanel>
<TabPanel value={tab} index={1} className={classes.preview}>
- <Content markdown={input} />
+ {input !== '' ? (
+ <Content markdown={input} />
+ ) : (
+ <Typography className={classes.previewPlaceholder}>
+ Nothing to preview.
+ </Typography>
+ )}
</TabPanel>
</div>
</div>
diff --git a/webui/src/components/Header/Header.tsx b/webui/src/components/Header/Header.tsx
index 56b35968..866e52db 100644
--- a/webui/src/components/Header/Header.tsx
+++ b/webui/src/components/Header/Header.tsx
@@ -6,7 +6,7 @@ import Tab, { TabProps } from '@material-ui/core/Tab';
import Tabs from '@material-ui/core/Tabs';
import Toolbar from '@material-ui/core/Toolbar';
import Tooltip from '@material-ui/core/Tooltip/Tooltip';
-import { makeStyles } from '@material-ui/core/styles';
+import { fade, makeStyles } from '@material-ui/core/styles';
import CurrentIdentity from '../Identity/CurrentIdentity';
import { LightSwitch } from '../Themer';
@@ -30,7 +30,8 @@ const useStyles = makeStyles((theme) => ({
alignItems: 'center',
},
lightSwitch: {
- padding: '0 20px',
+ marginRight: '20px',
+ color: fade(theme.palette.primary.contrastText, 0.5),
},
logo: {
height: '42px',
@@ -85,9 +86,7 @@ function Header() {
git-bug
</Link>
<div className={classes.filler} />
- <div className={classes.lightSwitch}>
- <LightSwitch />
- </div>
+ <LightSwitch className={classes.lightSwitch} />
<CurrentIdentity />
</Toolbar>
</AppBar>
diff --git a/webui/src/components/ReopenBugButton/ReopenBugButton.tsx b/webui/src/components/ReopenBugButton/index.tsx
index e3e792fc..e62c58df 100644
--- a/webui/src/components/ReopenBugButton/ReopenBugButton.tsx
+++ b/webui/src/components/ReopenBugButton/index.tsx
@@ -1,6 +1,7 @@
import React from 'react';
import Button from '@material-ui/core/Button';
+import CircularProgress from '@material-ui/core/CircularProgress';
import { BugFragment } from 'src/pages/bug/Bug.generated';
import { TimelineDocument } from 'src/pages/bug/TimelineQuery.generated';
@@ -9,7 +10,7 @@ import { useOpenBugMutation } from './OpenBug.generated';
interface Props {
bug: BugFragment;
- disabled: boolean;
+ disabled?: boolean;
}
function ReopenBugButton({ bug, disabled }: Props) {
@@ -36,7 +37,7 @@ function ReopenBugButton({ bug, disabled }: Props) {
});
}
- if (loading) return <div>Loading...</div>;
+ if (loading) return <CircularProgress />;
if (error) return <div>Error</div>;
return (
diff --git a/webui/src/components/ReopenBugWithCommentButton/ReopenBugWithComment.graphql b/webui/src/components/ReopenBugWithCommentButton/ReopenBugWithComment.graphql
new file mode 100644
index 00000000..4c220208
--- /dev/null
+++ b/webui/src/components/ReopenBugWithCommentButton/ReopenBugWithComment.graphql
@@ -0,0 +1,11 @@
+mutation AddCommentAndReopenBug($input: AddCommentAndReopenBugInput!) {
+ addCommentAndReopen(input: $input) {
+ statusOperation {
+ status
+ }
+ commentOperation {
+ message
+ }
+ }
+}
+
diff --git a/webui/src/components/ReopenBugWithCommentButton/index.tsx b/webui/src/components/ReopenBugWithCommentButton/index.tsx
new file mode 100644
index 00000000..0a534f27
--- /dev/null
+++ b/webui/src/components/ReopenBugWithCommentButton/index.tsx
@@ -0,0 +1,65 @@
+import React from 'react';
+
+import Button from '@material-ui/core/Button';
+import CircularProgress from '@material-ui/core/CircularProgress';
+
+import { BugFragment } from 'src/pages/bug/Bug.generated';
+import { TimelineDocument } from 'src/pages/bug/TimelineQuery.generated';
+
+import { useAddCommentAndReopenBugMutation } from './ReopenBugWithComment.generated';
+
+interface Props {
+ bug: BugFragment;
+ comment: string;
+ postClick?: () => void;
+}
+
+function ReopenBugWithCommentButton({ bug, comment, postClick }: Props) {
+ const [
+ addCommentAndReopenBug,
+ { loading, error },
+ ] = useAddCommentAndReopenBugMutation();
+
+ function addCommentAndReopenBugAction() {
+ addCommentAndReopenBug({
+ variables: {
+ input: {
+ prefix: bug.id,
+ message: comment,
+ },
+ },
+ refetchQueries: [
+ // TODO: update the cache instead of refetching
+ {
+ query: TimelineDocument,
+ variables: {
+ id: bug.id,
+ first: 100,
+ },
+ },
+ ],
+ awaitRefetchQueries: true,
+ }).then(() => {
+ if (postClick) {
+ postClick();
+ }
+ });
+ }
+
+ if (loading) return <CircularProgress />;
+ if (error) return <div>Error</div>;
+
+ return (
+ <div>
+ <Button
+ variant="contained"
+ type="submit"
+ onClick={() => addCommentAndReopenBugAction()}
+ >
+ Reopen bug with comment
+ </Button>
+ </div>
+ );
+}
+
+export default ReopenBugWithCommentButton;
diff --git a/webui/src/components/Themer.tsx b/webui/src/components/Themer.tsx
index b4877974..edf1f352 100644
--- a/webui/src/components/Themer.tsx
+++ b/webui/src/components/Themer.tsx
@@ -1,35 +1,30 @@
import React, { createContext, useContext, useState } from 'react';
-import { fade, ThemeProvider } from '@material-ui/core';
-import IconButton from '@material-ui/core/IconButton/IconButton';
-import Tooltip from '@material-ui/core/Tooltip/Tooltip';
+import { ThemeProvider } from '@material-ui/core';
+import IconButton from '@material-ui/core/IconButton';
+import Tooltip from '@material-ui/core/Tooltip';
import { Theme } from '@material-ui/core/styles';
import { NightsStayRounded, WbSunnyRounded } from '@material-ui/icons';
-import { makeStyles } from '@material-ui/styles';
const ThemeContext = createContext({
toggleMode: () => {},
mode: '',
});
-const useStyles = makeStyles((theme: Theme) => ({
- iconButton: {
- color: fade(theme.palette.primary.contrastText, 0.5),
- },
-}));
-
-const LightSwitch = () => {
+type LightSwitchProps = {
+ className?: string;
+};
+const LightSwitch = ({ className }: LightSwitchProps) => {
const { mode, toggleMode } = useContext(ThemeContext);
const nextMode = mode === 'light' ? 'dark' : 'light';
const description = `Switch to ${nextMode} theme`;
- const classes = useStyles();
return (
<Tooltip title={description}>
<IconButton
onClick={toggleMode}
aria-label={description}
- className={classes.iconButton}
+ className={className}
>
{mode === 'light' ? <WbSunnyRounded /> : <NightsStayRounded />}
</IconButton>
generated by cgit (git 2.34.1) at 2024-11-08 12:24:19 +0000