feat: navigation update for results page

frontend/src/components/Pagination/PaginationMobile.tsx

@@ -47,7 +47,13 @@ export const PaginationMobile = ({
         onClick={handlePageBack}
         icon={<BiChevronLeft />}
       />
-      <Text sx={styles.text} aria-disabled={isDisabled}>
+      <Text
+        sx={styles.text}
+        aria-disabled={isDisabled}
+        whiteSpace="nowrap" // Prevent text wrapping
+        minW={0} // Allow shrinking
+        flexShrink={1} // Allow flex shrinking
+      >
         {t('components.pagination.paginationMobile.currentPageCount', {
           currentPage,
           totalPageCount,

frontend/src/features/admin-form/responses/ChartsPage/ChartsPage.tsx

@@ -1,6 +1,12 @@
 import { useTranslation } from 'react-i18next'
 import { useLocation } from 'react-router-dom'
-import { Box, Container, Divider, Stack } from '@chakra-ui/react'
+import {
+  Box,
+  Container,
+  Divider,
+  Flex,
+  Stack,
+} from '@chakra-ui/react'
 import { useFeatureValue } from '@growthbook/growthbook-react'
 
 import { featureFlags } from '~shared/constants'
@@ -23,7 +29,11 @@
 export const ChartsPage = (): JSX.Element => {
   const { t } = useTranslation()
   const { data: form, isLoading } = useAdminForm()
-  const { totalResponsesCount, secretKey } = useStorageResponsesContext()
+  const {
+    totalResponsesCount,
+    secretKey,
+    isLoading: isResponsesLoading,
+  } = useStorageResponsesContext()
   const { pathname } = useLocation()
   const chartsMaxResponseCount = useFeatureValue(
     featureFlags.chartsMaxResponseCount,
@@ -91,24 +101,38 @@
     <UnlockedCharts />
   ) : (
     <>
-      <SecretKeyVerification
-        hideResponseCount
-        heroSvg={<ChartsSvgr />}
-        ctaText={t(
-          'features.adminForm.responses.charts.chartsPage.secretKeyVerification.ctaText',
-        )}
-        label={t(
-          'features.adminForm.responses.charts.chartsPage.secretKeyVerification.label',
-        )}
-      />
-      <Container p={0} maxW="42.5rem">
-        <Box mt="2rem" mb="0.5rem">
-          <Divider />
-        </Box>
-        <Stack>
-          <ChartsSupportedFieldsInfoBox />
-        </Stack>
-      </Container>
+      <Flex
+        flexDir="column"
+        align="center"
+        px={{ base: '1.5rem', md: '1.75rem', lg: '2rem' }}
+      >
+        <Container p={0} maxW="42.5rem">
+          <SecretKeyVerification
+            heroSvg={<ChartsSvgr />}
+            ctaText={t(
+              'features.adminForm.responses.charts.chartsPage.secretKeyVerification.ctaText',
+            )}
+            label={t(
+              'features.adminForm.responses.charts.chartsPage.secretKeyVerification.label',
+            )}
+          />
+        </Container>
+      </Flex>
+      <Flex
+        flexDir="column"
+        align="center"
+        pb="4rem"
+        px={{ base: '1.5rem', md: '1.75rem', lg: '2rem' }}
+      >
+        <Container p={0} maxW="42.5rem">
+          <Box mt="2rem" mb="0.5rem">
+            <Divider />
+          </Box>
+          <Stack>
+            <ChartsSupportedFieldsInfoBox />
+          </Stack>
+        </Container>
+      </Flex>
     </>
   )
 }

frontend/src/features/admin-form/responses/ChartsPage/UnlockedCharts/UnlockedChartsContainer.tsx

@@ -134,7 +134,11 @@ export const UnlockedChartsContainer = () => {
     .filter(isNonEmpty)
 
   return (
-    <>
+    <Flex
+      flexDir="column"
+      pt={0}
+      pr={{ base: '1.5rem', md: '1.75rem', lg: '2rem' }}
+    >
       <Flex
         direction={{ base: 'column', sm: 'row' }}
         justifySelf={{ base: 'start', sm: 'end' }}
@@ -206,6 +210,6 @@ export const UnlockedChartsContainer = () => {
           )}
         />
       )}
-    </>
+    </Flex>
   )
 }

frontend/src/features/admin-form/responses/ChartsPage/UnlockedCharts/components/EmptyChartsContainer.tsx

@@ -1,4 +1,4 @@
-import { Box, Container, Divider, Stack, Text } from '@chakra-ui/react'
+import { Box, Divider, Flex, Stack, Text } from '@chakra-ui/react'
 
 import { ChartsSvgr } from '../assets/svgr/ChartsSvgr'
 
@@ -12,7 +12,13 @@ export const EmptyChartsContainer = ({
   subtitle: string
 }): JSX.Element => {
   return (
-    <Container p={0} maxW="42.5rem">
+    <Flex
+      flexDir="column"
+      align="center"
+      py="4rem"
+      px={{ base: '1.5rem', md: '1.75rem', lg: '2rem' }}
+      ml={{ base: 0, lg: '-17rem' }}
+    >
       <Stack spacing="1rem" align="center">
         <Text as="h2" color="primary.500" textStyle="h2" whiteSpace="pre-wrap">
           {title}
@@ -26,6 +32,6 @@ export const EmptyChartsContainer = ({
         <Divider />
         <ChartsSupportedFieldsInfoBox />
       </Stack>
-    </Container>
+    </Flex>
   )
 }

frontend/src/features/admin-form/responses/FeedbackPage/EmptyFeedback/EmptyFeedback.tsx

@@ -10,7 +10,14 @@ export const EmptyFeedback = (): JSX.Element => {
   const { t } = useTranslation()
 
   return (
-    <Flex justify="center" flexDir="column" align="center" px="2rem" py="4rem">
+    <Flex
+      flexDir="column"
+      justify="center"
+      align="center"
+      py="4rem"
+      px={{ base: '1.5rem', md: '1.75rem', lg: '2rem' }}
+      ml={{ base: 0, lg: '-17rem' }}
+    >
       <Text as="h2" textStyle="h2" color="primary.500" mb="1rem">
         {t('features.adminForm.feedback.emptyFeedback.noFeedbackYet')}
       </Text>

frontend/src/features/admin-form/responses/FeedbackPage/FeedbackPage.tsx

@@ -2,15 +2,7 @@ import { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { UseMutationResult } from 'react-query'
 import { useParams } from 'react-router-dom'
-import {
-  Box,
-  ButtonGroup,
-  Container,
-  Flex,
-  Grid,
-  Icon,
-  Text,
-} from '@chakra-ui/react'
+import { Box, ButtonGroup, Flex, Grid, Icon, Text } from '@chakra-ui/react'
 
 import { ProcessedFeedbackMeta, ProcessedIssueMeta } from '~shared/types'
 
@@ -188,29 +180,24 @@ export const FeedbackPage = (): JSX.Element => {
   if (issueProps.count === 0 && reviewProps.count === 0) {
     return <EmptyFeedback />
   }
-
   return (
-    <Container
-      overflowY="auto"
-      p="1.5rem"
-      maxW="69.5rem"
-      flex={1}
-      display="flex"
+    <Flex
       flexDir="column"
+      pt={0}
+      pb="1.5rem"
+      pr={{ base: '1.5rem', md: '1.75rem', lg: '2rem' }}
     >
-      <Grid
+      <Flex
+        direction={{ base: 'column', sm: 'row' }}
         mb="1rem"
-        minH={{ md: '4rem' }}
-        alignItems="end"
+        alignItems={{ base: 'flex-start', md: 'center' }}
+        justifyContent="space-between"
         color="secondary.500"
-        gridTemplateColumns={{ base: 'auto', md: '1fr auto auto' }}
-        gridGap={{ base: '0.5rem', md: '1.5rem' }}
-        gridTemplateAreas={{
-          base: "'information information' 'feedbackType export'",
-          md: "'information feedbackType export'",
-        }}
+        gap="1rem"
+        w="100%"
+        maxW="100%"
       >
-        <Box gridArea="information" pl="0rem">
+        <Flex direction="column" flex={1} minW={0}>
           {currentFeedbackType === FeedbackType.Issues ? (
             <GetIssueInformationComponent
               count={issueProps.count}
@@ -223,8 +210,9 @@ export const FeedbackPage = (): JSX.Element => {
               translations={reviewProps.translations}
             />
           )}
-        </Box>
-        <ButtonGroup gridArea="feedbackType" isAttached variant="outline">
+        </Flex>
+        <ButtonGroup isAttached variant="outline" flexShrink={0}>
+          {' '}
           <Button
             {...getFeedbackTypeButtonProps(
               currentFeedbackType,
@@ -245,7 +233,8 @@ export const FeedbackPage = (): JSX.Element => {
             {translations.reviews}
           </Button>
         </ButtonGroup>
-        <Box gridArea="export" justifySelf="flex-end">
+        <Box flexShrink={0}>
+          {' '}
           <FeedbackDownloadButton
             {...getFeedBackDownloadButtonProps(
               currentFeedbackType,
@@ -256,7 +245,7 @@ export const FeedbackPage = (): JSX.Element => {
             isMobile={isMobile}
           />
         </Box>
-      </Grid>
+      </Flex>{' '}
       <Box mb="3rem" overflow="auto" flex={1}>
         <FeedbackTable
           feedbackData={
@@ -290,7 +279,7 @@ export const FeedbackPage = (): JSX.Element => {
           onPageChange={setCurrentPage}
         />
       </Box>
-    </Container>
+    </Flex>
   )
 }
 

frontend/src/features/admin-form/responses/FormResultsLayout.tsx

@@ -1,16 +1,89 @@
-import { Outlet } from 'react-router-dom'
-import { Flex } from '@chakra-ui/react'
+import { useCallback } from 'react'
+import { Outlet, useLocation, useNavigate, useParams } from 'react-router-dom'
+import { Box, Flex, Spacer, Tabs } from '@chakra-ui/react'
+
+import {
+  ACTIVE_ADMINFORM_RESULTS_ROUTE_REGEX,
+  ADMINFORM_RESULTS_SUBROUTE,
+  ADMINFORM_ROUTE,
+  RESULTS_CHARTS_SUBROUTE,
+  RESULTS_FEEDBACK_SUBROUTE,
+  RESULTS_RESPONSES_SUBROUTE,
+} from '~constants/routes'
+import { useDraggable } from '~hooks/useDraggable'
 
 import { FormResultsNavbar } from './components/FormResultsNavbar'
 
-/**
- * Page for rendering subroutes via `Outlet` component for admin form result pages.
- */
 export const FormResultsLayout = (): JSX.Element => {
+  const { ref, onMouseDown } = useDraggable<HTMLDivElement>()
+  const { formId } = useParams()
+  const navigate = useNavigate()
+  const { pathname } = useLocation()
+
+  if (!formId) throw new Error('No formId provided')
+
+  const checkTabActive = useCallback(
+    (to: string) => {
+      const match = pathname.match(ACTIVE_ADMINFORM_RESULTS_ROUTE_REGEX)
+      return (match?.[2] ?? '/') === `/${to}`
+    },
+    [pathname],
+  )
+
+  const tabConfig = [
+    { path: RESULTS_RESPONSES_SUBROUTE },
+    { path: RESULTS_FEEDBACK_SUBROUTE },
+    { path: RESULTS_CHARTS_SUBROUTE },
+  ]
+
+  const tabIndex = tabConfig.findIndex((tab) => checkTabActive(tab.path))
+
+  const handleTabChange = (index: number) => {
+    const subRoute = tabConfig[index].path
+    const path = subRoute
+      ? `${ADMINFORM_ROUTE}/${formId}/${ADMINFORM_RESULTS_SUBROUTE}/${subRoute}`
+      : `${ADMINFORM_ROUTE}/${formId}/${ADMINFORM_RESULTS_SUBROUTE}`
+    navigate(path)
+  }
+
   return (
-    <Flex flexDir="column" flex={1} overflow="hidden" pos="relative">
-      <FormResultsNavbar />
-      <Outlet />
-    </Flex>
+    <Box overflowX="hidden" overflowY="auto" position="relative" flex={1}>
+      {' '}
+      <Tabs
+        orientation="vertical"
+        variant="line"
+        py={{ base: '2.5rem', lg: '3.125rem' }}
+        pl={{ base: 0, md: '1.75rem', lg: '2rem' }}
+        pr={{ base: '1.5rem', md: '1.75rem', lg: '2rem' }}
+        index={tabIndex === -1 ? 0 : tabIndex}
+        onChange={handleTabChange}
+      >
+        <Flex
+          h="max-content"
+          flex={1}
+          flexShrink={0}
+          ref={ref}
+          onMouseDown={onMouseDown}
+          position="sticky"
+          zIndex={0}
+          top={{ base: '2.5rem', lg: '3.125rem' }}
+          borderTopColor="neutral.300"
+          w={{ base: 'auto', lg: '21rem' }}
+          __css={{
+            scrollbarWidth: 0,
+            '&::-webkit-scrollbar': {
+              width: 0,
+              height: 0,
+            },
+          }}
+        >
+          <FormResultsNavbar />
+        </Flex>
+        <Box maxW="69.5rem" mt={0} w="100%" minW={0} overflowX="hidden">
+          <Outlet />
+        </Box>
+        <Spacer />
+      </Tabs>
+    </Box>
   )
 }

frontend/src/features/admin-form/responses/IndividualResponsePage/IndividualResponsePage.tsx

@@ -201,9 +201,13 @@ export const IndividualResponsePage = (): JSX.Element => {
   const workflowNumTotalSteps = data?.mrf?.workflowNumTotalSteps
 
   return (
-    <Flex flexDir="column" marginTop={{ base: '-1.5rem', md: '-3rem' }}>
+    <Flex
+      flexDir="column"
+      marginTop={{ base: '-1.5rem', md: '-3rem' }}
+      pt={{ base: '1.5rem', md: '3rem' }}
+    >
+      {' '}
       <IndividualResponseNavbar />
-
       <Stack
         px={{ md: '1.75rem', lg: '2rem' }}
         spacing={{ base: '1.5rem', md: '2.5rem' }}

frontend/src/features/admin-form/responses/ResponsesPage/ResponsesLayout.tsx

@@ -1,17 +1,14 @@
 import { Outlet } from 'react-router-dom'
 
-import { ResponsesTabWrapper } from './common/ResponsesTabWrapper'
 import { UnlockedResponsesProvider } from './storage/UnlockedResponses'
 
 /**
  * Page for rendering subroutes via `Outlet` component for admin form result responses pages.
  */
 export const ResponsesLayout = (): JSX.Element => {
   return (
-    <ResponsesTabWrapper>
-      <UnlockedResponsesProvider>
-        <Outlet />
-      </UnlockedResponsesProvider>
-    </ResponsesTabWrapper>
+    <UnlockedResponsesProvider>
+      <Outlet />
+    </UnlockedResponsesProvider>
   )
 }