import { Button, Typography } from '@mui/material'; import makeStyles from '@mui/styles/makeStyles'; import { useRef, useState } from 'react'; import { Link } from 'react-router-dom'; 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, '&:hover': { backgroundColor: theme.palette.success.dark, color: theme.palette.primary.contrastText, }, }, saveButton: { marginRight: theme.spacing(1), }, author: { fontWeight: 'bold', color: theme.palette.text.secondary, }, })); 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(); const issueTitleInput = useRef(); function isFormValid() { if (issueTitleInput.current) { return issueTitleInput.current.value.length > 0; } else { return false; } } function submitNewTitle() { if (!isFormValid()) return; if (bug.title === issueTitleInput.current?.value) { cancelChange(); return; } setTitle({ variables: { input: { prefix: bug.id, title: issueTitleInput.current!!.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 (
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 bug '}
); } export default BugTitleForm;