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
)}
- >
+
)
}