diff --git a/frontend/src/entry/model/accessRequests/AccessRequestDisplay.tsx b/frontend/src/entry/model/accessRequests/AccessRequestDisplay.tsx index 096af1456..0a09c5295 100644 --- a/frontend/src/entry/model/accessRequests/AccessRequestDisplay.tsx +++ b/frontend/src/entry/model/accessRequests/AccessRequestDisplay.tsx @@ -1,5 +1,6 @@ import CommentIcon from '@mui/icons-material/ChatBubble' -import { Card, Grid, Stack, Typography } from '@mui/material' +import ListAltIcon from '@mui/icons-material/ListAlt' +import { Card, Grid, IconButton, Stack, Tooltip, Typography } from '@mui/material' import { useGetResponses } from 'actions/response' import { useGetReviewRequestsForModel } from 'actions/review' import { useEffect, useState } from 'react' @@ -13,7 +14,6 @@ import MessageAlert from 'src/MessageAlert' import { AccessRequestInterface, ResponseInterface } from 'types/types' import { formatDateString } from 'utils/dateUtils' import { latestReviewsForEachUser } from 'utils/reviewUtils' -import { plural } from 'utils/stringUtils' type AccessRequestDisplayProps = { accessRequest: AccessRequestInterface @@ -116,16 +116,32 @@ export default function AccessRequestDisplay({ accessRequest, hideReviewBanner = - + - {commentResponses.length > 0 && ( - - - - {plural(commentResponses.length, 'comment')} - + + + {reviewResponses.length > 0 && ( + + + + + {reviewResponses.length} + + + + )} + {commentResponses.length > 0 && ( + + + + + {commentResponses.length} + + + + )} - )} + diff --git a/frontend/src/entry/model/releases/ReleaseDisplay.tsx b/frontend/src/entry/model/releases/ReleaseDisplay.tsx index 93ce4037f..0187c0fcf 100644 --- a/frontend/src/entry/model/releases/ReleaseDisplay.tsx +++ b/frontend/src/entry/model/releases/ReleaseDisplay.tsx @@ -1,5 +1,6 @@ import CommentIcon from '@mui/icons-material/ChatBubble' -import { Box, Button, Card, Divider, Stack, Tooltip, Typography } from '@mui/material' +import ListAltIcon from '@mui/icons-material/ListAlt' +import { Box, Button, Card, Divider, IconButton, Stack, Tooltip, Typography } from '@mui/material' import { useGetResponses } from 'actions/response' import { useGetReviewRequestsForModel } from 'actions/review' import { useGetUiConfig } from 'actions/uiConfig' @@ -101,7 +102,7 @@ export default function ReleaseDisplay({ alignItems='center' spacing={1} > - + {model.name} - {release.semver} @@ -152,19 +153,28 @@ export default function ReleaseDisplay({ ))} )} - {reviewsWithLatestResponses.length > 0 && commentResponses.length > 0 && } - -
- -
- {commentResponses.length > 0 && ( - - - - {commentResponses.length} - - - )} + + + + + {reviewResponses.length > 0 && ( + + + + {reviewResponses.length} + + + )} + {commentResponses.length > 0 && ( + + + + {commentResponses.length} + + + )} + +
diff --git a/frontend/src/reviews/ReviewComments.tsx b/frontend/src/reviews/ReviewComments.tsx index a7aed91a6..787960695 100644 --- a/frontend/src/reviews/ReviewComments.tsx +++ b/frontend/src/reviews/ReviewComments.tsx @@ -5,7 +5,8 @@ import { postReleaseComment, useGetRelease } from 'actions/release' import { useGetResponses } from 'actions/response' import { useGetReviewRequestsForModel } from 'actions/review' import { useGetCurrentUser } from 'actions/user' -import { useMemo, useState } from 'react' +import { useRouter } from 'next/router' +import { useEffect, useMemo, useRef, useState } from 'react' import Loading from 'src/common/Loading' import RichTextEditor from 'src/common/RichTextEditor' import MessageAlert from 'src/MessageAlert' @@ -38,6 +39,9 @@ export default function ReviewComments({ release, accessRequest, isEdit }: Revie const { mutateAccessRequest } = useGetAccessRequest(accessRequest?.modelId, accessRequest?.id) const { currentUser, isCurrentUserLoading, isCurrentUserError } = useGetCurrentUser() + const ref = useRef(null) + const { asPath } = useRouter() + const [modelId, semverOrAccessRequestIdObject] = useMemo( () => release @@ -55,6 +59,12 @@ export default function ReviewComments({ release, accessRequest, isEdit }: Revie ...reviews.map((review) => review._id), ]) + useEffect(() => { + if (!isResponsesLoading && ref && asPath.split('#')[1] === 'responses') { + ref.current?.scrollIntoView() + } + }, [asPath, isResponsesLoading, ref]) + const hasResponseOrComment = useMemo(() => { const hasReviewResponse = !!responses.find((response) => response.kind === ResponseKind.Review) const hasComment = !!responses.find((response) => response.kind === ResponseKind.Comment) @@ -147,7 +157,7 @@ export default function ReviewComments({ release, accessRequest, isEdit }: Revie } return ( - <> + {(hasResponseOrComment || !isEdit) && } {(isReviewsLoading || isResponsesLoading || isCurrentUserLoading) && } {reviewDetails} @@ -172,6 +182,6 @@ export default function ReviewComments({ release, accessRequest, isEdit }: Revie )} - + ) }