From 29ea8df4259921f1789e0e6d584767fc5f54b284 Mon Sep 17 00:00:00 2001 From: Cláudio Date: Fri, 5 Feb 2021 19:36:09 -0300 Subject: Commit for #541 --- webui/src/App.tsx | 2 +- webui/src/components/Author.tsx | 2 +- webui/src/components/CommentInput/CommentInput.tsx | 107 +++++++++++++++++++++ .../CurrentIdentity/CurrentIdentity.graphql | 8 ++ .../components/CurrentIdentity/CurrentIdentity.tsx | 31 ++++++ webui/src/components/Header/Header.tsx | 50 ++++++++++ webui/src/components/Header/index.tsx | 18 ++++ webui/src/components/IfLoggedIn/IfLoggedIn.tsx | 14 +++ webui/src/components/Label.tsx | 3 +- webui/src/components/fragments.graphql | 19 ---- webui/src/graphql/fragments.graphql | 19 ++++ webui/src/layout/CommentInput/CommentInput.tsx | 107 --------------------- webui/src/layout/CurrentIdentity.graphql | 8 -- webui/src/layout/CurrentIdentity.tsx | 31 ------ webui/src/layout/Header.tsx | 50 ---------- webui/src/layout/IfLoggedIn.tsx | 14 --- webui/src/layout/index.tsx | 18 ---- webui/src/pages/bug/Bug.tsx | 2 +- webui/src/pages/bug/CommentForm.tsx | 2 +- webui/src/pages/new/NewBugPage.tsx | 2 +- 20 files changed, 253 insertions(+), 254 deletions(-) create mode 100644 webui/src/components/CommentInput/CommentInput.tsx create mode 100644 webui/src/components/CurrentIdentity/CurrentIdentity.graphql create mode 100644 webui/src/components/CurrentIdentity/CurrentIdentity.tsx create mode 100644 webui/src/components/Header/Header.tsx create mode 100644 webui/src/components/Header/index.tsx create mode 100644 webui/src/components/IfLoggedIn/IfLoggedIn.tsx delete mode 100644 webui/src/components/fragments.graphql create mode 100644 webui/src/graphql/fragments.graphql delete mode 100644 webui/src/layout/CommentInput/CommentInput.tsx delete mode 100644 webui/src/layout/CurrentIdentity.graphql delete mode 100644 webui/src/layout/CurrentIdentity.tsx delete mode 100644 webui/src/layout/Header.tsx delete mode 100644 webui/src/layout/IfLoggedIn.tsx delete mode 100644 webui/src/layout/index.tsx (limited to 'webui/src') diff --git a/webui/src/App.tsx b/webui/src/App.tsx index 3a5ef025..b9ade974 100644 --- a/webui/src/App.tsx +++ b/webui/src/App.tsx @@ -1,7 +1,7 @@ import React from 'react'; import { Route, Switch } from 'react-router'; -import Layout from './layout'; +import Layout from './components/Header'; import BugPage from './pages/bug'; import ListPage from './pages/list'; import NewBugPage from './pages/new/NewBugPage'; diff --git a/webui/src/components/Author.tsx b/webui/src/components/Author.tsx index 9ac1da52..d60e8969 100644 --- a/webui/src/components/Author.tsx +++ b/webui/src/components/Author.tsx @@ -3,7 +3,7 @@ import React from 'react'; import MAvatar from '@material-ui/core/Avatar'; import Tooltip from '@material-ui/core/Tooltip/Tooltip'; -import { AuthoredFragment } from './fragments.generated'; +import { AuthoredFragment } from '../graphql/fragments.generated'; type Props = AuthoredFragment & { className?: string; diff --git a/webui/src/components/CommentInput/CommentInput.tsx b/webui/src/components/CommentInput/CommentInput.tsx new file mode 100644 index 00000000..86cc7dbb --- /dev/null +++ b/webui/src/components/CommentInput/CommentInput.tsx @@ -0,0 +1,107 @@ +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'; + +/** + * Styles + */ +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', + }, +})); + +type TabPanelProps = { + children: React.ReactNode; + value: number; + index: number; +} & React.HTMLProps; +function TabPanel({ children, value, index, ...props }: TabPanelProps) { + return ( + + ); +} + +const a11yProps = (index: number) => ({ + id: `editor-tab-${index}`, + 'aria-controls': `editor-tabpanel-${index}`, +}); + +type Props = { + inputProps?: any; + loading: boolean; + onChange: (comment: string) => void; +}; + +/** + * Component for issue comment input + * + * @param inputProps Reset input value + * @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(''); + const [tab, setTab] = useState(0); + const classes = useStyles(); + + useEffect(() => { + if (inputProps) setInput(inputProps.value); + }, [inputProps]); + + useEffect(() => { + onChange(input); + }, [input, onChange]); + + return ( +
+ setTab(t)}> + + + +
+ + setInput(e.target.value)} + disabled={loading} + /> + + + + +
+
+ ); +} + +export default CommentInput; diff --git a/webui/src/components/CurrentIdentity/CurrentIdentity.graphql b/webui/src/components/CurrentIdentity/CurrentIdentity.graphql new file mode 100644 index 00000000..2794a40f --- /dev/null +++ b/webui/src/components/CurrentIdentity/CurrentIdentity.graphql @@ -0,0 +1,8 @@ +query CurrentIdentity { + repository { + userIdentity { + displayName + avatarUrl + } + } +} diff --git a/webui/src/components/CurrentIdentity/CurrentIdentity.tsx b/webui/src/components/CurrentIdentity/CurrentIdentity.tsx new file mode 100644 index 00000000..8cd3585b --- /dev/null +++ b/webui/src/components/CurrentIdentity/CurrentIdentity.tsx @@ -0,0 +1,31 @@ +import React from 'react'; + +import Avatar from '@material-ui/core/Avatar'; +import { makeStyles } from '@material-ui/core/styles'; + +import { useCurrentIdentityQuery } from './CurrentIdentity.generated'; + +const useStyles = makeStyles((theme) => ({ + displayName: { + marginLeft: theme.spacing(2), + }, +})); + +const CurrentIdentity = () => { + const classes = useStyles(); + const { loading, error, data } = useCurrentIdentityQuery(); + + if (error || loading || !data?.repository?.userIdentity) return null; + + const user = data.repository.userIdentity; + return ( + <> + + {user.displayName.charAt(0).toUpperCase()} + +
{user.displayName}
+ + ); +}; + +export default CurrentIdentity; diff --git a/webui/src/components/Header/Header.tsx b/webui/src/components/Header/Header.tsx new file mode 100644 index 00000000..3e39b5f3 --- /dev/null +++ b/webui/src/components/Header/Header.tsx @@ -0,0 +1,50 @@ +import React from 'react'; +import { Link } from 'react-router-dom'; + +import AppBar from '@material-ui/core/AppBar'; +import Toolbar from '@material-ui/core/Toolbar'; +import { makeStyles } from '@material-ui/core/styles'; + +import CurrentIdentity from '../CurrentIdentity/CurrentIdentity'; + +const useStyles = makeStyles((theme) => ({ + offset: { + ...theme.mixins.toolbar, + }, + filler: { + flexGrow: 1, + }, + appTitle: { + ...theme.typography.h6, + color: 'white', + textDecoration: 'none', + display: 'flex', + alignItems: 'center', + }, + logo: { + height: '42px', + marginRight: theme.spacing(2), + }, +})); + +function Header() { + const classes = useStyles(); + + return ( + <> + + + + git-bug + git-bug + +
+ + + +
+ + ); +} + +export default Header; diff --git a/webui/src/components/Header/index.tsx b/webui/src/components/Header/index.tsx new file mode 100644 index 00000000..42a0cfc1 --- /dev/null +++ b/webui/src/components/Header/index.tsx @@ -0,0 +1,18 @@ +import React from 'react'; + +import CssBaseline from '@material-ui/core/CssBaseline'; + +import Header from './Header'; + +type Props = { children: React.ReactNode }; +function Layout({ children }: Props) { + return ( + <> + +
+ {children} + + ); +} + +export default Layout; diff --git a/webui/src/components/IfLoggedIn/IfLoggedIn.tsx b/webui/src/components/IfLoggedIn/IfLoggedIn.tsx new file mode 100644 index 00000000..2476aad8 --- /dev/null +++ b/webui/src/components/IfLoggedIn/IfLoggedIn.tsx @@ -0,0 +1,14 @@ +import React from 'react'; + +import { useCurrentIdentityQuery } from '../CurrentIdentity/CurrentIdentity.generated'; + +type Props = { children: () => React.ReactNode }; +const IfLoggedIn = ({ children }: Props) => { + const { loading, error, data } = useCurrentIdentityQuery(); + + if (error || loading || !data?.repository?.userIdentity) return null; + + return <>{children()}; +}; + +export default IfLoggedIn; diff --git a/webui/src/components/Label.tsx b/webui/src/components/Label.tsx index 4aaa6bb6..111f6d7f 100644 --- a/webui/src/components/Label.tsx +++ b/webui/src/components/Label.tsx @@ -7,10 +7,9 @@ import { darken, } from '@material-ui/core/styles/colorManipulator'; +import { LabelFragment } from '../graphql/fragments.generated'; import { Color } from 'src/gqlTypes'; -import { LabelFragment } from './fragments.generated'; - // Minimum contrast between the background and the text color const contrastThreshold = 2.5; diff --git a/webui/src/components/fragments.graphql b/webui/src/components/fragments.graphql deleted file mode 100644 index 03a235f9..00000000 --- a/webui/src/components/fragments.graphql +++ /dev/null @@ -1,19 +0,0 @@ -# Label.tsx -fragment Label on Label { - name - color { - R - G - B - } -} - -# Author.tsx -fragment authored on Authored { - author { - name - email - displayName - avatarUrl - } -} diff --git a/webui/src/graphql/fragments.graphql b/webui/src/graphql/fragments.graphql new file mode 100644 index 00000000..03a235f9 --- /dev/null +++ b/webui/src/graphql/fragments.graphql @@ -0,0 +1,19 @@ +# Label.tsx +fragment Label on Label { + name + color { + R + G + B + } +} + +# Author.tsx +fragment authored on Authored { + author { + name + email + displayName + avatarUrl + } +} diff --git a/webui/src/layout/CommentInput/CommentInput.tsx b/webui/src/layout/CommentInput/CommentInput.tsx deleted file mode 100644 index 86cc7dbb..00000000 --- a/webui/src/layout/CommentInput/CommentInput.tsx +++ /dev/null @@ -1,107 +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'; - -/** - * Styles - */ -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', - }, -})); - -type TabPanelProps = { - children: React.ReactNode; - value: number; - index: number; -} & React.HTMLProps; -function TabPanel({ children, value, index, ...props }: TabPanelProps) { - return ( - - ); -} - -const a11yProps = (index: number) => ({ - id: `editor-tab-${index}`, - 'aria-controls': `editor-tabpanel-${index}`, -}); - -type Props = { - inputProps?: any; - loading: boolean; - onChange: (comment: string) => void; -}; - -/** - * Component for issue comment input - * - * @param inputProps Reset input value - * @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(''); - const [tab, setTab] = useState(0); - const classes = useStyles(); - - useEffect(() => { - if (inputProps) setInput(inputProps.value); - }, [inputProps]); - - useEffect(() => { - onChange(input); - }, [input, onChange]); - - return ( -
- setTab(t)}> - - - -
- - setInput(e.target.value)} - disabled={loading} - /> - - - - -
-
- ); -} - -export default CommentInput; diff --git a/webui/src/layout/CurrentIdentity.graphql b/webui/src/layout/CurrentIdentity.graphql deleted file mode 100644 index 2794a40f..00000000 --- a/webui/src/layout/CurrentIdentity.graphql +++ /dev/null @@ -1,8 +0,0 @@ -query CurrentIdentity { - repository { - userIdentity { - displayName - avatarUrl - } - } -} diff --git a/webui/src/layout/CurrentIdentity.tsx b/webui/src/layout/CurrentIdentity.tsx deleted file mode 100644 index 8cd3585b..00000000 --- a/webui/src/layout/CurrentIdentity.tsx +++ /dev/null @@ -1,31 +0,0 @@ -import React from 'react'; - -import Avatar from '@material-ui/core/Avatar'; -import { makeStyles } from '@material-ui/core/styles'; - -import { useCurrentIdentityQuery } from './CurrentIdentity.generated'; - -const useStyles = makeStyles((theme) => ({ - displayName: { - marginLeft: theme.spacing(2), - }, -})); - -const CurrentIdentity = () => { - const classes = useStyles(); - const { loading, error, data } = useCurrentIdentityQuery(); - - if (error || loading || !data?.repository?.userIdentity) return null; - - const user = data.repository.userIdentity; - return ( - <> - - {user.displayName.charAt(0).toUpperCase()} - -
{user.displayName}
- - ); -}; - -export default CurrentIdentity; diff --git a/webui/src/layout/Header.tsx b/webui/src/layout/Header.tsx deleted file mode 100644 index b0fae3cc..00000000 --- a/webui/src/layout/Header.tsx +++ /dev/null @@ -1,50 +0,0 @@ -import React from 'react'; -import { Link } from 'react-router-dom'; - -import AppBar from '@material-ui/core/AppBar'; -import Toolbar from '@material-ui/core/Toolbar'; -import { makeStyles } from '@material-ui/core/styles'; - -import CurrentIdentity from './CurrentIdentity'; - -const useStyles = makeStyles((theme) => ({ - offset: { - ...theme.mixins.toolbar, - }, - filler: { - flexGrow: 1, - }, - appTitle: { - ...theme.typography.h6, - color: 'white', - textDecoration: 'none', - display: 'flex', - alignItems: 'center', - }, - logo: { - height: '42px', - marginRight: theme.spacing(2), - }, -})); - -function Header() { - const classes = useStyles(); - - return ( - <> - - - - git-bug - git-bug - -
- - - -
- - ); -} - -export default Header; diff --git a/webui/src/layout/IfLoggedIn.tsx b/webui/src/layout/IfLoggedIn.tsx deleted file mode 100644 index 9f4a7576..00000000 --- a/webui/src/layout/IfLoggedIn.tsx +++ /dev/null @@ -1,14 +0,0 @@ -import React from 'react'; - -import { useCurrentIdentityQuery } from './CurrentIdentity.generated'; - -type Props = { children: () => React.ReactNode }; -const IfLoggedIn = ({ children }: Props) => { - const { loading, error, data } = useCurrentIdentityQuery(); - - if (error || loading || !data?.repository?.userIdentity) return null; - - return <>{children()}; -}; - -export default IfLoggedIn; diff --git a/webui/src/layout/index.tsx b/webui/src/layout/index.tsx deleted file mode 100644 index 42a0cfc1..00000000 --- a/webui/src/layout/index.tsx +++ /dev/null @@ -1,18 +0,0 @@ -import React from 'react'; - -import CssBaseline from '@material-ui/core/CssBaseline'; - -import Header from './Header'; - -type Props = { children: React.ReactNode }; -function Layout({ children }: Props) { - return ( - <> - -
- {children} - - ); -} - -export default Layout; diff --git a/webui/src/pages/bug/Bug.tsx b/webui/src/pages/bug/Bug.tsx index bd6e44c4..d85c5296 100644 --- a/webui/src/pages/bug/Bug.tsx +++ b/webui/src/pages/bug/Bug.tsx @@ -3,8 +3,8 @@ import React from 'react'; import { makeStyles } from '@material-ui/core/styles'; import BugTitleForm from 'src/components/BugTitleForm/BugTitleForm'; +import IfLoggedIn from 'src/components/IfLoggedIn/IfLoggedIn'; import Label from 'src/components/Label'; -import IfLoggedIn from 'src/layout/IfLoggedIn'; import { BugFragment } from './Bug.generated'; import CommentForm from './CommentForm'; diff --git a/webui/src/pages/bug/CommentForm.tsx b/webui/src/pages/bug/CommentForm.tsx index c623dabb..0b97e133 100644 --- a/webui/src/pages/bug/CommentForm.tsx +++ b/webui/src/pages/bug/CommentForm.tsx @@ -4,7 +4,7 @@ import Button from '@material-ui/core/Button'; import Paper from '@material-ui/core/Paper'; import { makeStyles, Theme } from '@material-ui/core/styles'; -import CommentInput from '../../layout/CommentInput/CommentInput'; +import CommentInput from '../../components/CommentInput/CommentInput'; import CloseBugButton from 'src/components/CloseBugButton/CloseBugButton'; import ReopenBugButton from 'src/components/ReopenBugButton/ReopenBugButton'; diff --git a/webui/src/pages/new/NewBugPage.tsx b/webui/src/pages/new/NewBugPage.tsx index c70cddaa..c9e268b6 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 '../../layout/CommentInput/CommentInput'; +import CommentInput from '../../components/CommentInput/CommentInput'; import { useNewBugMutation } from './NewBug.generated'; -- cgit