move reddot from email tab to settings navbar

opengovsg · Jul 4, 2024 · 32ce1f6 · 32ce1f6
1 parent c05911a
commit 32ce1f6
Show file tree

Hide file tree

Showing 6 changed files with 50 additions and 45 deletions.
diff --git a/frontend/src/features/admin-form/common/components/AdminFormNavbar/AdminFormNavbar.tsx b/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}

diff --git a/frontend/src/features/admin-form/settings/SettingsPage.tsx b/frontend/src/features/admin-form/settings/SettingsPage.tsx
@@ -19,17 +19,12 @@ import {
   Tabs,
 } from '@chakra-ui/react'
 
-import { FormResponseMode, SeenFlags } from '~shared/types'
+import { FormResponseMode } from '~shared/types'
 import { isNonEmpty } from '~shared/utils/isNonEmpty'
 
 import { ADMINFORM_RESULTS_SUBROUTE, ADMINFORM_ROUTE } from '~constants/routes'
 import { useDraggable } from '~hooks/useDraggable'
 
-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 { useAdminFormCollaborators } from '../common/queries'
 
 import { SettingsTab } from './components/SettingsTab'
@@ -47,18 +42,11 @@ interface TabEntry {
   component: () => JSX.Element
   path: string
   showRedDot?: boolean
-  onClick?: () => void
 }
 
 export const SettingsPage = (): JSX.Element => {
   const { formId, settingsTab } = useParams()
   const { data: settings } = useAdminFormSettings()
-  const { user, isLoading: isUserLoading } = useUser()
-  const { updateLastSeenFlagMutation } = useUserMutations()
-  const shouldShowSettingsEmailNotiReddot = useMemo(() => {
-    if (isUserLoading || !user) return false
-    return getShowFeatureFlagLastSeen(user, SeenFlags.SettingsEmailNotification)
-  }, [isUserLoading, user])
 
   if (!formId) throw new Error('No formId provided')
 
@@ -81,16 +69,7 @@ export const SettingsPage = (): JSX.Element => {
             icon: BiMailSend,
             component: SettingsEmailsPage,
             path: 'email-notifications',
-            showRedDot: shouldShowSettingsEmailNotiReddot,
-            onClick: () => {
-              if (shouldShowSettingsEmailNotiReddot) {
-                updateLastSeenFlagMutation.mutate({
-                  flag: SeenFlags.SettingsEmailNotification,
-                  version:
-                    SeenFlagsMapVersion[SeenFlags.SettingsEmailNotification],
-                })
-              }
-            },
+            showRedDot: true,
           }
         : null
 
@@ -129,11 +108,7 @@ export const SettingsPage = (): JSX.Element => {
     ]
 
     return baseConfig.filter(isNonEmpty)
-  }, [
-    settings?.responseMode,
-    shouldShowSettingsEmailNotiReddot,
-    updateLastSeenFlagMutation,
-  ])
+  }, [settings?.responseMode])
 
   const { ref, onMouseDown } = useDraggable<HTMLDivElement>()
 
@@ -157,7 +132,7 @@ export const SettingsPage = (): JSX.Element => {
         index={tabIndex === -1 ? 0 : tabIndex}
         onChange={(index) => {
           handleTabChange(index)
-          tabConfig[index].onClick?.()
+          tabConfig[index]
         }}
       >
         <Flex
@@ -192,7 +167,7 @@ export const SettingsPage = (): JSX.Element => {
                 key={tab.label}
                 label={tab.label}
                 icon={tab.icon}
-                showRedDot={tab.showRedDot}
+                showNewBadge={tab.showRedDot}
               />
             ))}
           </TabList>

diff --git a/frontend/src/features/admin-form/settings/components/SettingsTab.tsx b/frontend/src/features/admin-form/settings/components/SettingsTab.tsx
@@ -1,32 +1,29 @@
-import { GoPrimitiveDot } from 'react-icons/go'
 import { As, Box, Icon, Tab } from '@chakra-ui/react'
 
+import Badge from '~components/Badge'
+
 export interface SettingsTabProps {
   label: string
   icon: As
-  showRedDot?: boolean
+  showNewBadge?: boolean
 }
 
 export const SettingsTab = ({
   label,
   icon,
-  showRedDot,
+  showNewBadge = false,
 }: SettingsTabProps): JSX.Element => {
   return (
     <Tab justifyContent="flex-start" p="1rem">
       <Icon as={icon} color="currentcolor" fontSize="1.5rem" />
-      {showRedDot ? (
-        <Icon
-          as={GoPrimitiveDot}
-          color="danger.500"
-          position="absolute"
-          ml="20px"
-          mt="-20px"
-        />
-      ) : null}
       <Box ml="1.5rem" display={{ base: 'none', lg: 'initial' }}>
         {label}
       </Box>
+      {showNewBadge ? (
+        <Badge ml="0.5rem" colorScheme="success">
+          New
+        </Badge>
+      ) : null}
     </Tab>
   )
 }
diff --git a/frontend/src/features/user/constants.ts b/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,
 }
diff --git a/frontend/src/templates/NavigationTabs/NavigationTab.tsx b/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. */

diff --git a/shared/types/user.ts b/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',
 }