added a review icon and count to release and access request displays

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 =
                 </Grid>
               </Card>
             </Stack>
-            <Stack direction='row' justifyContent='space-between' spacing={2} sx={{ pt: 2 }}>
+            <Stack direction='row' alignItems='center' justifyContent='space-between' spacing={2} sx={{ pt: 2 }}>
               <ReviewDisplay reviewResponses={reviewsWithLatestResponses} modelId={accessRequest.modelId} />
-              {commentResponses.length > 0 && (
-                <Stack direction='row' spacing={1}>
-                  <CommentIcon color='primary' data-test='commentIcon' />
-                  <Typography variant='caption' data-test='commentCount'>
-                    {plural(commentResponses.length, 'comment')}
-                  </Typography>
+              <IconButton href={`/model/${accessRequest.modelId}/access-request/${accessRequest.id}#responses`}>
+                <Stack direction='row' spacing={2}>
+                  {reviewResponses.length > 0 && (
+                    <Tooltip title='Reviews'>
+                      <Stack direction='row' spacing={1}>
+                        <ListAltIcon color='primary' />
+                        <Typography variant='caption' data-test='reviewCount'>
+                          {reviewResponses.length}
+                        </Typography>
+                      </Stack>
+                    </Tooltip>
+                  )}
+                  {commentResponses.length > 0 && (
+                    <Tooltip title='Comments'>
+                      <Stack direction='row' spacing={1}>
+                        <CommentIcon color='primary' />
+                        <Typography variant='caption' data-test='commentCount'>
+                          {commentResponses.length}
+                        </Typography>
+                      </Stack>
+                    </Tooltip>
+                  )}
                 </Stack>
-              )}
+              </IconButton>
             </Stack>
           </Stack>
         </Card>

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}
               >
-                <Link href={`/model/${model.id}/release/${release.semver}`}>
+                <Link noLinkStyle href={`/model/${model.id}/release/${release.semver}`}>
                   <Typography component='h2' variant='h6' color='primary'>
                     {model.name} - {release.semver}
                   </Typography>
@@ -152,19 +153,28 @@ export default function ReleaseDisplay({
                   ))}
                 </>
               )}
-              {reviewsWithLatestResponses.length > 0 && commentResponses.length > 0 && <Divider />}
-              <Stack direction='row' justifyContent='space-between' spacing={2}>
-                <div>
-                  <ReviewDisplay modelId={model.id} reviewResponses={reviewsWithLatestResponses} />
-                </div>
-                {commentResponses.length > 0 && (
-                  <Tooltip title='Comments'>
-                    <Stack direction='row' spacing={1}>
-                      <CommentIcon color='primary' />
-                      <Typography variant='caption'>{commentResponses.length}</Typography>
-                    </Stack>
-                  </Tooltip>
-                )}
+              <Stack direction='row' alignItems='center' justifyContent='space-between' spacing={2}>
+                <ReviewDisplay modelId={model.id} reviewResponses={reviewsWithLatestResponses} />
+                <IconButton href={`/model/${release.modelId}/release/${release.semver}#responses`}>
+                  <Stack direction='row' spacing={2}>
+                    {reviewResponses.length > 0 && (
+                      <Tooltip title='Reviews'>
+                        <Stack direction='row' spacing={1}>
+                          <ListAltIcon color='primary' />
+                          <Typography variant='caption'>{reviewResponses.length}</Typography>
+                        </Stack>
+                      </Tooltip>
+                    )}
+                    {commentResponses.length > 0 && (
+                      <Tooltip title='Comments'>
+                        <Stack direction='row' spacing={1}>
+                          <CommentIcon color='primary' />
+                          <Typography variant='caption'>{commentResponses.length}</Typography>
+                        </Stack>
+                      </Tooltip>
+                    )}
+                  </Stack>
+                </IconButton>
               </Stack>
             </Stack>
           </Stack>

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<HTMLDivElement>(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 (
-    <>
+    <Stack spacing={2} ref={ref}>
       {(hasResponseOrComment || !isEdit) && <Divider />}
       {(isReviewsLoading || isResponsesLoading || isCurrentUserLoading) && <Loading />}
       {reviewDetails}
@@ -172,6 +182,6 @@ export default function ReviewComments({ release, accessRequest, isEdit }: Revie
           <MessageAlert severity='error' message={commentSubmissionError} />
         </Stack>
       )}
-    </>
+    </Stack>
   )
 }