import React, { useState } from 'react'; import { Button, makeStyles, Typography } from '@material-ui/core'; import { TimelineDocument } from '../../pages/bug/TimelineQuery.generated'; import IfLoggedIn from '../IfLoggedIn/IfLoggedIn'; import Author from 'src/components/Author'; import Date from 'src/components/Date'; import { BugFragment } from 'src/pages/bug/Bug.generated'; import BugTitleInput from './BugTitleInput'; import { useSetTitleMutation } from './SetTitle.generated'; /** * Css in JS styles */ const useStyles = makeStyles((theme) => ({ header: { display: 'flex', flexDirection: 'column', }, headerTitle: { display: 'flex', flexDirection: 'row', justifyContent: 'space-between', }, readOnlyTitle: { ...theme.typography.h5, }, readOnlyId: { ...theme.typography.subtitle1, marginLeft: theme.spacing(1), }, editButtonContainer: { display: 'flex', flexDirection: 'row', justifyContent: 'flex-start', alignItems: 'center', minWidth: 200, marginLeft: theme.spacing(2), }, greenButton: { marginLeft: theme.spacing(1), backgroundColor: theme.palette.success.main, color: theme.palette.success.contrastText, }, saveButton: { marginRight: theme.spacing(1), }, })); interface Props { bug: BugFragment; } /** * Component for bug title change * @param bug Selected bug in list page */ function BugTitleForm({ bug }: Props) { const [bugTitleEdition, setbugTitleEdition] = useState(false); const [setTitle, { loading, error }] = useSetTitleMutation(); const [issueTitle, setIssueTitle] = useState(bug.title); const classes = useStyles(); let issueTitleInput: any; function isFormValid() { if (issueTitleInput) { return issueTitleInput.value.length > 0 ? true : false; } else { return false; } } function submitNewTitle() { if (!isFormValid()) return; setTitle({ variables: { input: { prefix: bug.humanId, title: issueTitleInput.value, }, }, refetchQueries: [ // TODO: update the cache instead of refetching { query: TimelineDocument, variables: { id: bug.id, first: 100, }, }, ], awaitRefetchQueries: true, }).then(() => setbugTitleEdition(false)); } function cancelChange() { setIssueTitle(bug.title); setbugTitleEdition(false); } function editableBugTitle() { return (
{ issueTitleInput = node; }} label="Title" variant="outlined" fullWidth margin="dense" value={issueTitle} onChange={(event: any) => setIssueTitle(event.target.value)} />
); } function readonlyBugTitle() { return (
{bug.title} {bug.humanId}
{() => (
)}
); } if (loading) return
Loading...
; if (error) return
Error
; return (
{bugTitleEdition ? editableBugTitle() : readonlyBugTitle()}
{' opened this issue '}
); } export default BugTitleForm;