Add an error tooltip for User Profile (#2164)

* Add an error tooltip for User Profile * Add open on hover behaviour * Fix style: added gap and decreased error icon * Add an error tooltip to the personal info tab * Fix test * Fix linter errors * Update src/pages/edit-profile/EditProfile.tsx Co-authored-by: Olenka Hryk <[email protected]> * Refactor enableTooltipError to use optional chain expression --------- Co-authored-by: Olenka Hryk <[email protected]>
ita-social-projects · Aug 2, 2024 · 702daaa · 702daaa
1 parent 1428ac8
commit 702daaa
Show file tree

Hide file tree

Showing 5 changed files with 49 additions and 5 deletions.
diff --git a/src/components/sidebar-menu/SidebarMenu.styles.ts b/src/components/sidebar-menu/SidebarMenu.styles.ts
@@ -37,5 +37,14 @@ export const styles = {
         minWidth: 'unset'
       }
     }
+  },
+  listItemContent: {
+    display: 'flex',
+    alignItems: 'center',
+    gap: 1.25
+  },
+  errorIcon: {
+    color: `${palette.error[800]} !important`,
+    fontSize: '1.25rem'
   }
 }
diff --git a/src/components/sidebar-menu/SidebarMenu.tsx b/src/components/sidebar-menu/SidebarMenu.tsx
@@ -3,6 +3,8 @@ import ListItemButton from '@mui/material/ListItemButton'
 import ListItemText from '@mui/material/ListItemText'
 import List from '@mui/material/List'
 import ListItemIcon from '@mui/material/ListItemIcon'
+import ErrorOutlineIcon from '@mui/icons-material/ErrorOutline'
+import { Box, Tooltip } from '@mui/material'
 
 import { FC } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -16,9 +18,15 @@ interface SidebarMenu {
   tabsData: UserProfileProps
   handleClick: (tab: UserProfileTabsEnum) => void
   activeTab: UserProfileTabsEnum
+  errorTooltipHolders: Partial<Record<UserProfileTabsEnum, boolean>>
 }
 
-const SidebarMenu: FC<SidebarMenu> = ({ handleClick, tabsData, activeTab }) => {
+const SidebarMenu: FC<SidebarMenu> = ({
+  handleClick,
+  tabsData,
+  activeTab,
+  errorTooltipHolders
+}) => {
   const { t } = useTranslation()
 
   const list = Object.keys(tabsData).map((key) => {
@@ -27,11 +35,28 @@ const SidebarMenu: FC<SidebarMenu> = ({ handleClick, tabsData, activeTab }) => {
 
     const isTabActive = tabKey === activeTab
 
+    const enableTooltipError = !isTabActive && errorTooltipHolders?.[tabKey]
+
+    const toolTip = enableTooltipError && (
+      <Tooltip
+        arrow
+        placement='right'
+        title={t('editProfilePage.profile.generalTab.errorTooltip')}
+      >
+        <ErrorOutlineIcon sx={styles.errorIcon} />
+      </Tooltip>
+    )
+
     return (
       <ListItem key={tabKey} onClick={() => handleClick(tabKey)}>
         <ListItemButton sx={styles.tabButton(isTabActive)}>
           <ListItemIcon>{item.icon}</ListItemIcon>
-          <ListItemText primary={t(item.title)} />
+          <ListItemText>
+            <Box sx={styles.listItemContent}>
+              {t(item.title)}
+              {toolTip}
+            </Box>
+          </ListItemText>
         </ListItemButton>
       </ListItem>
     )

diff --git a/src/constants/translations/en/edit-profile.json b/src/constants/translations/en/edit-profile.json
@@ -19,7 +19,8 @@
       "professionalStatus": "Describe in short your professional summary. Maximum 200 characters.",
       "languagesTitle": "Language",
       "languagesDesc": "Select the language in which you would like to study and cooperate.",
-      "videoPresentationDesc": "Add the link to your presentational video. Your video needs to be public and uploaded to YouTube."
+      "videoPresentationDesc": "Add the link to your presentational video. Your video needs to be public and uploaded to YouTube.",
+      "errorTooltip": "There is a problem with your changes"
     },
     "professionalTab": {
       "tabTitle": "Professional info",

diff --git a/src/constants/translations/uk/edit-profile.json b/src/constants/translations/uk/edit-profile.json
@@ -19,7 +19,8 @@
       "professionalStatus": "Коротко опишіть своє професійне резюме. Максимум 200 символів.",
       "languagesTitle": "Мова",
       "languagesDesc": "Виберіть мову, якою ви б хотіли навчатися та співпрацювати.",
-      "videoPresentationDesc": "Додайте посилання на вашу відеопрезентацію. Відео має бути публічним та розміщеним на YouTube."
+      "videoPresentationDesc": "Додайте посилання на вашу відеопрезентацію. Відео має бути публічним та розміщеним на YouTube.",
+      "errorTooltip": "Виникла проблема з вашими змінами"
     },
     "professionalTab": {
       "tabTitle": "Професійні відомості",

diff --git a/src/pages/edit-profile/EditProfile.tsx b/src/pages/edit-profile/EditProfile.tsx
@@ -29,7 +29,9 @@ import { LoadingStatusEnum } from '~/redux/redux.constants'
 const EditProfile = () => {
   const { t } = useTranslation()
   const dispatch = useAppDispatch()
-  const { loading } = useAppSelector((state) => state.editProfile)
+  const { loading, tabValidityStatus } = useAppSelector(
+    (state) => state.editProfile
+  )
 
   const [searchParams, setSearchParams] = useSearchParams({
     tab: UserProfileTabsEnum.Profile
@@ -66,6 +68,11 @@ const EditProfile = () => {
   }
 
   const cooperationContent = activeTab && tabsData[activeTab]?.content
+  const errorTooltipHolders = {
+    [UserProfileTabsEnum.Profile]: !tabValidityStatus.profileTab,
+    [UserProfileTabsEnum.ProfessionalInfo]:
+      !tabValidityStatus.professionalInfoTab
+  }
 
   return (
     <PageWrapper>
@@ -92,6 +99,7 @@ const EditProfile = () => {
       <Box sx={styles.mainContainer}>
         <SidebarMenu
           activeTab={activeTab}
+          errorTooltipHolders={errorTooltipHolders}
           handleClick={(tab) => void handleClick(tab)}
           tabsData={tabsData}
         />