feat: add reddot on email noti

frontend/src/features/admin-form/common/components/AdminFormNavbar/AdminFormNavbar.tsx

@@ -5,6 +5,7 @@ import {
   BiShow,
   BiUserPlus,
 } from 'react-icons/bi'
+import { GoPrimitiveDot } from 'react-icons/go'
 import { Link as ReactLink, useLocation } from 'react-router-dom'
 import {
   Box,
@@ -18,13 +19,15 @@ import {
   Flex,
   Grid,
   GridItem,
+  Icon,
   Skeleton,
   Text,
   useBreakpointValue,
   useDisclosure,
 } from '@chakra-ui/react'
 import format from 'date-fns/format'
 
+import { SeenFlags } from '~shared/types'
 import { AdminFormDto } from '~shared/types/form/form'
 
 import {
@@ -40,6 +43,11 @@ import IconButton from '~components/IconButton'
 import Tooltip from '~components/Tooltip'
 import { NavigationTab, NavigationTabList } from '~templates/NavigationTabs'
 
+import { SeenFlagsMapVersion } from '~features/user/constants'
+import { useUserMutations } from '~features/user/mutations'
+import { useUser } from '~features/user/queries'
+import { getShowFeatureFlagLastSeen } from '~features/user/utils'
+
 import { AdminFormNavbarBreadcrumbs } from './AdminFormNavbarBreadcrumbs'
 
 export interface AdminFormNavbarProps {
@@ -68,6 +76,13 @@ export const AdminFormNavbar = ({
   const { isOpen, onClose, onOpen } = useDisclosure()
   const { pathname } = useLocation()
 
+  const { user, isLoading: isUserLoading } = useUser()
+  const { updateLastSeenFlagMutation } = useUserMutations()
+  const shouldShowSettingsReddot = useMemo(() => {
+    if (isUserLoading || !user) return false
+    return getShowFeatureFlagLastSeen(user, SeenFlags.SettingsNotification)
+  }, [isUserLoading, user])
+
   const tabResponsiveVariant = useBreakpointValue({
     base: 'line-dark',
     xs: 'line-dark',
@@ -171,8 +186,25 @@ export const AdminFormNavbar = ({
           hidden={viewOnly}
           to={ADMINFORM_SETTINGS_SUBROUTE}
           isActive={checkTabActive(ADMINFORM_SETTINGS_SUBROUTE)}
+          onClick={() => {
+            if (shouldShowSettingsReddot) {
+              updateLastSeenFlagMutation.mutate({
+                flag: SeenFlags.SettingsNotification,
+                version: SeenFlagsMapVersion[SeenFlags.SettingsNotification],
+              })
+            }
+          }}
         >
           Settings
+          {shouldShowSettingsReddot ? (
+            <Icon
+              as={GoPrimitiveDot}
+              color="danger.500"
+              position="absolute"
+              right="-8px"
+              top="2px"
+            />
+          ) : null}
         </NavigationTab>
         <NavigationTab
           to={ADMINFORM_RESULTS_SUBROUTE}

frontend/src/features/admin-form/settings/SettingsEmailsPage.tsx

@@ -22,7 +22,7 @@ const AdminEmailSection = () => {
 
   // should render null
   if (!isEmailOrStorageMode) {
-    return false
+    return null
   }
 
   return <EmailFormSection settings={settings} />

frontend/src/features/admin-form/settings/SettingsPage.tsx

@@ -41,6 +41,7 @@ interface TabEntry {
   icon: IconType
   component: () => JSX.Element
   path: string
+  showRedDot?: boolean
 }
 
 export const SettingsPage = (): JSX.Element => {
@@ -68,6 +69,7 @@ export const SettingsPage = (): JSX.Element => {
             icon: BiMailSend,
             component: SettingsEmailsPage,
             path: 'email-notifications',
+            showRedDot: true,
           }
         : null
 
@@ -106,7 +108,7 @@ export const SettingsPage = (): JSX.Element => {
     ]
 
     return baseConfig.filter(isNonEmpty)
-  }, [settings])
+  }, [settings?.responseMode])
 
   const { ref, onMouseDown } = useDraggable<HTMLDivElement>()
 
@@ -128,7 +130,10 @@ export const SettingsPage = (): JSX.Element => {
         py={{ base: '2.5rem', lg: '3.125rem' }}
         px={{ base: '1.5rem', md: '1.75rem', lg: '2rem' }}
         index={tabIndex === -1 ? 0 : tabIndex}
-        onChange={handleTabChange}
+        onChange={(index) => {
+          handleTabChange(index)
+          tabConfig[index]
+        }}
       >
         <Flex
           h="max-content"
@@ -158,7 +163,12 @@ export const SettingsPage = (): JSX.Element => {
             mb="calc(0.5rem - 2px)"
           >
             {tabConfig.map((tab) => (
-              <SettingsTab key={tab.label} label={tab.label} icon={tab.icon} />
+              <SettingsTab
+                key={tab.label}
+                label={tab.label}
+                icon={tab.icon}
+                showNewBadge={tab.showRedDot}
+              />
             ))}
           </TabList>
         </Flex>

frontend/src/features/admin-form/settings/components/SettingsTab.tsx

@@ -1,17 +1,33 @@
 import { As, Box, Icon, Tab } from '@chakra-ui/react'
 
+import Badge from '~components/Badge'
+
 export interface SettingsTabProps {
   label: string
   icon: As
+  showNewBadge?: boolean
 }
 
-export const SettingsTab = ({ label, icon }: SettingsTabProps): JSX.Element => {
+export const SettingsTab = ({
+  label,
+  icon,
+  showNewBadge = false,
+}: SettingsTabProps): JSX.Element => {
   return (
     <Tab justifyContent="flex-start" p="1rem">
       <Icon as={icon} color="currentcolor" fontSize="1.5rem" />
       <Box ml="1.5rem" display={{ base: 'none', lg: 'initial' }}>
         {label}
       </Box>
+      {showNewBadge ? (
+        <Badge
+          ml="0.5rem"
+          colorScheme="success"
+          display={{ base: 'none', lg: 'initial' }}
+        >
+          New
+        </Badge>
+      ) : null}
     </Tab>
   )
 }

frontend/src/features/user/constants.ts

@@ -8,6 +8,6 @@ const LegacySeenFlags = {
 
 export const SeenFlagsMapVersion: { [key in SeenFlags]: number } = {
   ...LegacySeenFlags,
-  [SeenFlags.SettingsEmailNotification]: 0, // stub
-  [SeenFlags.CreateBuilderMrfWorkflow]: 0, // stub
+  [SeenFlags.SettingsNotification]: 0,
+  [SeenFlags.CreateBuilderMrfWorkflow]: 0,
 }

frontend/src/templates/NavigationTabs/NavigationTab.tsx

@@ -7,6 +7,7 @@ const Link = chakra(ReactLink)
 interface NavigationTabProps extends ComponentProps<typeof Link> {
   isActive?: boolean
   isDisabled?: boolean
+  showReddot?: boolean
 }
 
 /** Must be nested inside NavigationTabList component, uses styles provided by that component. */

shared/types/user.ts

@@ -7,7 +7,7 @@ export type UserId = Tagged<string, 'UserId'>
 
 export enum SeenFlags {
   LastSeenFeatureUpdateVersion = 'lastSeenFeatureUpdateVersion',
-  SettingsEmailNotification = 'settingsEmailNotification',
+  SettingsNotification = 'settingsNotification',
   CreateBuilderMrfWorkflow = 'createBuilderMrfWorkflow',
 }