[fix] fix tooltip placement issues and add some arrows (#222)

someengineering · May 22, 2024 · 326e543 · 326e543
1 parent 5b7ab7d
commit 326e543
Show file tree

Hide file tree

Showing 20 changed files with 88 additions and 62 deletions.
diff --git a/src/locales/de-DE/messages.po b/src/locales/de-DE/messages.po
@@ -258,7 +258,7 @@ msgstr "Konten hinzugefügt"
 msgid "Admin"
 msgstr "Admin"
 
-#: src/pages/panel/inventory/InventoryAdvanceSearch.tsx:71
+#: src/pages/panel/inventory/InventoryAdvanceSearch.tsx:72
 msgid "Advanced"
 msgstr ""
 
@@ -716,7 +716,7 @@ msgid "Downgrade"
 msgstr "Downgrade"
 
 #: src/pages/panel/inventory/DownloadCSVButton.tsx:105
-#: src/pages/panel/inventory/DownloadCSVButton.tsx:124
+#: src/pages/panel/inventory/DownloadCSVButton.tsx:127
 msgid "Download CSV"
 msgstr "CSV herunterladen"
 
@@ -869,8 +869,8 @@ msgstr "Passwort vergessen? Klicken Sie hier, um Ihr Passwort zurückzusetzen."
 msgid "Forgot Password"
 msgstr "Passwort vergessen"
 
-#: src/pages/panel/inventory/InventoryAdvanceSearch.tsx:59
-#: src/pages/panel/inventory/InventoryAdvanceSearch.tsx:62
+#: src/pages/panel/inventory/InventoryAdvanceSearch.tsx:60
+#: src/pages/panel/inventory/InventoryAdvanceSearch.tsx:63
 msgid "Form"
 msgstr ""
 
@@ -1099,7 +1099,7 @@ msgstr "Monatliche"
 msgid "Monthly email report"
 msgstr "Monatlicher E-Mail-Bericht"
 
-#: src/pages/panel/shared/failed-checks/FailedChecks.tsx:186
+#: src/pages/panel/shared/failed-checks/FailedChecks.tsx:187
 msgid "More info"
 msgstr "Mehr Info"
 
@@ -1238,7 +1238,7 @@ msgstr "Einmal"
 msgid "Oops, the username or password doesn't seem to match our records. Please try again."
 msgstr "Hoppla, der Benutzername oder das Passwort scheinen nicht mit unseren Aufzeichnungen übereinzustimmen. Bitte versuche es erneut."
 
-#: src/pages/panel/inventory/InventoryAdvanceSearch.tsx:93
+#: src/pages/panel/inventory/InventoryAdvanceSearch.tsx:94
 msgid "Oops! It looks like your query didn't match our format. Please check and try again."
 msgstr "Ups! Ihre Eingabe entspricht nicht unserem Format. Bitte überprüfen Sie sie und versuchen Sie es erneut."
 
@@ -1562,7 +1562,7 @@ msgstr ""
 msgid "Severity"
 msgstr "Schwere"
 
-#: src/pages/panel/shared/failed-checks/FailedChecks.tsx:182
+#: src/pages/panel/shared/failed-checks/FailedChecks.tsx:183
 msgid "Show resources"
 msgstr "Ressourcen anzeigen"
 
@@ -1876,11 +1876,11 @@ msgstr "Sie können TOTP über den Wiederherstellungscode deaktivieren"
 msgid "You don't have access to this workspace"
 msgstr ""
 
-#: src/shared/disabled-with-permission/DisabledWithPermission.tsx:20
+#: src/shared/disabled-with-permission/DisabledWithPermission.tsx:29
 msgid "You don't have the permission to access this, contact the workspace owner for more information."
 msgstr ""
 
-#: src/shared/disabled-with-permission/DisabledWithPermission.tsx:21
+#: src/shared/disabled-with-permission/DisabledWithPermission.tsx:30
 msgid "You don't have the permission to change this, contact the workspace owner for more information."
 msgstr ""
 

diff --git a/src/locales/en-US/messages.po b/src/locales/en-US/messages.po
@@ -258,7 +258,7 @@ msgstr "Added accounts"
 msgid "Admin"
 msgstr "Admin"
 
-#: src/pages/panel/inventory/InventoryAdvanceSearch.tsx:71
+#: src/pages/panel/inventory/InventoryAdvanceSearch.tsx:72
 msgid "Advanced"
 msgstr "Advanced"
 
@@ -716,7 +716,7 @@ msgid "Downgrade"
 msgstr "Downgrade"
 
 #: src/pages/panel/inventory/DownloadCSVButton.tsx:105
-#: src/pages/panel/inventory/DownloadCSVButton.tsx:124
+#: src/pages/panel/inventory/DownloadCSVButton.tsx:127
 msgid "Download CSV"
 msgstr "Download CSV"
 
@@ -869,8 +869,8 @@ msgstr "Forget your password? Click here to reset your password."
 msgid "Forgot Password"
 msgstr "Forgot Password"
 
-#: src/pages/panel/inventory/InventoryAdvanceSearch.tsx:59
-#: src/pages/panel/inventory/InventoryAdvanceSearch.tsx:62
+#: src/pages/panel/inventory/InventoryAdvanceSearch.tsx:60
+#: src/pages/panel/inventory/InventoryAdvanceSearch.tsx:63
 msgid "Form"
 msgstr "Form"
 
@@ -1099,7 +1099,7 @@ msgstr "Monthly"
 msgid "Monthly email report"
 msgstr "Monthly email report"
 
-#: src/pages/panel/shared/failed-checks/FailedChecks.tsx:186
+#: src/pages/panel/shared/failed-checks/FailedChecks.tsx:187
 msgid "More info"
 msgstr "More info"
 
@@ -1238,7 +1238,7 @@ msgstr "One time"
 msgid "Oops, the username or password doesn't seem to match our records. Please try again."
 msgstr "Oops, the username or password doesn't seem to match our records. Please try again."
 
-#: src/pages/panel/inventory/InventoryAdvanceSearch.tsx:93
+#: src/pages/panel/inventory/InventoryAdvanceSearch.tsx:94
 msgid "Oops! It looks like your query didn't match our format. Please check and try again."
 msgstr "Oops! It looks like your query didn't match our format. Please check and try again."
 
@@ -1562,7 +1562,7 @@ msgstr "Severities"
 msgid "Severity"
 msgstr "Severity"
 
-#: src/pages/panel/shared/failed-checks/FailedChecks.tsx:182
+#: src/pages/panel/shared/failed-checks/FailedChecks.tsx:183
 msgid "Show resources"
 msgstr "Show resources"
 
@@ -1876,11 +1876,11 @@ msgstr "You can deactivate TOTP via recovery code"
 msgid "You don't have access to this workspace"
 msgstr "You don't have access to this workspace"
 
-#: src/shared/disabled-with-permission/DisabledWithPermission.tsx:20
+#: src/shared/disabled-with-permission/DisabledWithPermission.tsx:29
 msgid "You don't have the permission to access this, contact the workspace owner for more information."
 msgstr "You don't have the permission to access this, contact the workspace owner for more information."
 
-#: src/shared/disabled-with-permission/DisabledWithPermission.tsx:21
+#: src/shared/disabled-with-permission/DisabledWithPermission.tsx:30
 msgid "You don't have the permission to change this, contact the workspace owner for more information."
 msgstr "You don't have the permission to change this, contact the workspace owner for more information."
 

diff --git a/src/pages/panel/inventory/DownloadCSVButton.tsx b/src/pages/panel/inventory/DownloadCSVButton.tsx
@@ -121,6 +121,12 @@ export const DownloadCSVButton = forwardRef(
         {isPending ? <CircularProgress size={16} /> : <DownloadIcon />}
       </IconButton>
     )
-    return isPending ? children : <Tooltip title={<Trans>Download CSV</Trans>}>{children}</Tooltip>
+    return isPending ? (
+      children
+    ) : (
+      <Tooltip title={<Trans>Download CSV</Trans>} arrow>
+        {children}
+      </Tooltip>
+    )
   },
 )
diff --git a/src/pages/panel/inventory/InventoryAdvanceSearch.tsx b/src/pages/panel/inventory/InventoryAdvanceSearch.tsx
@@ -51,6 +51,7 @@ export const InventoryAdvanceSearch = ({ hasError, hasChanges }: InventoryAdvanc
                             </Trans>
                           </Alert>
                         }
+                        arrow
                       >
                         <InfoIcon color="info" />
                       </Tooltip>

diff --git a/src/pages/panel/inventory/InventoryTable.tsx b/src/pages/panel/inventory/InventoryTable.tsx
@@ -131,15 +131,15 @@ export const InventoryTable = ({ searchCrit, history }: InventoryTableProps) =>
               renderCell: (params) =>
                 params.colDef?.type === 'boolean' ? (
                   params.value === null || params.value === undefined || params.value === 'null' ? (
-                    <Tooltip title={t`Undefined`}>
+                    <Tooltip title={t`Undefined`} arrow>
                       <QuestionMarkIcon fontSize="small" />
                     </Tooltip>
                   ) : params.value && params.value !== 'false' ? (
-                    <Tooltip title={t`Yes`}>
+                    <Tooltip title={t`Yes`} arrow>
                       <CheckIcon fontSize="small" />
                     </Tooltip>
                   ) : (
-                    <Tooltip title={t`No`}>
+                    <Tooltip title={t`No`} arrow>
                       <CloseIcon fontSize="small" />
                     </Tooltip>
                   )
@@ -152,6 +152,7 @@ export const InventoryTable = ({ searchCrit, history }: InventoryTableProps) =>
                       {value.colDef?.headerName ?? value.colDef?.field ?? ''}
                     </Typography>
                   }
+                  arrow
                 >
                   <Stack
                     whiteSpace="nowrap"

diff --git a/src/pages/panel/inventory/inventory-form/InventoryFormMore.tsx b/src/pages/panel/inventory/inventory-form/InventoryFormMore.tsx
@@ -61,7 +61,7 @@ export const InventoryFormMore = ({ preItems }: { preItems: AutoCompletePreDefin
   return (
     <>
       <Stack height="auto" justifyContent="center" position="relative">
-        <Tooltip title={t`Add Filter`}>
+        <Tooltip title={t`Add Filter`} arrow>
           <IconButton
             color="success"
             aria-label="add"

diff --git a/src/pages/panel/inventory/inventory-form/InventoryFormReset.tsx b/src/pages/panel/inventory/inventory-form/InventoryFormReset.tsx
@@ -7,7 +7,7 @@ export const InventoryFormReset = () => {
   const { q, reset } = useFixQueryParser()
   return q && q !== 'all' ? (
     <Stack order={1} alignSelf="stretch" alignItems="end" flexGrow={1}>
-      <Tooltip title={t`Clear the search`}>
+      <Tooltip title={t`Clear the search`} arrow>
         <IconButton
           onClick={reset}
           color="info"

diff --git a/src/pages/panel/security/AccountCard.tsx b/src/pages/panel/security/AccountCard.tsx
@@ -15,7 +15,7 @@ const AccountCardContainer = styled(Card, { shouldForwardProp })<{ score?: numbe
 
 const CardText = (props: Omit<TypographyProps, 'whiteSpace' | 'textOverflow' | 'overflow' | 'width'>) => {
   return (
-    <Tooltip title={props.children}>
+    <Tooltip title={props.children} arrow>
       <Typography {...props} whiteSpace="nowrap" textOverflow="ellipsis" overflow="hidden" width="100%" />
     </Tooltip>
   )

diff --git a/src/pages/panel/shared/failed-checks/FailedChecks.tsx b/src/pages/panel/shared/failed-checks/FailedChecks.tsx
@@ -172,6 +172,7 @@ export const FailedChecks = ({ failedCheck, navigate, smallText, withResources,
                       </Typography>
                     </Stack>
                   }
+                  arrow
                 >
                   <FailedCheckIgnoreButton ignored={ignored} {...ignoreProps} />
                 </Tooltip>

diff --git a/src/pages/panel/workspace-settings-accounts/WorkspaceSettingsAccountRow.tsx b/src/pages/panel/workspace-settings-accounts/WorkspaceSettingsAccountRow.tsx
@@ -270,7 +270,7 @@ export const WorkspaceSettingsAccountRow = ({ account, isNotConfigured }: Worksp
             {renameAccountIsPending ? (
               <CircularProgress size={20} />
             ) : editedName !== accountName ? (
-              <Tooltip title={<Trans>Submit</Trans>}>
+              <Tooltip title={<Trans>Submit</Trans>} arrow>
                 <IconButton aria-label={t`Submit`} color="success" type="submit">
                   <SendIcon />
                 </IconButton>
@@ -285,7 +285,7 @@ export const WorkspaceSettingsAccountRow = ({ account, isNotConfigured }: Worksp
                 <CancelIcon />
               </IconButton>
             ) : (
-              <Tooltip title={<Trans>Cancel</Trans>}>
+              <Tooltip title={<Trans>Cancel</Trans>} arrow>
                 <IconButton aria-label={t`Cancel`} color="error" onClick={cancelEdit}>
                   <CancelIcon />
                 </IconButton>
@@ -297,7 +297,7 @@ export const WorkspaceSettingsAccountRow = ({ account, isNotConfigured }: Worksp
             <Typography flexGrow={1} onClick={() => setIsEdit(true)} sx={{ cursor: 'pointer' }}>
               {accountName ?? '-'}
             </Typography>
-            <Tooltip title={<Trans>Edit</Trans>}>
+            <Tooltip title={<Trans>Edit</Trans>} arrow>
               <IconButton aria-label={t`Edit`} color="primary" onClick={() => setIsEdit(true)}>
                 <EditIcon />
               </IconButton>
@@ -352,7 +352,7 @@ export const WorkspaceSettingsAccountRow = ({ account, isNotConfigured }: Worksp
               <DeleteIcon />
             </IconButton>
           ) : (
-            <Tooltip title={<Trans>Delete</Trans>}>
+            <Tooltip title={<Trans>Delete</Trans>} arrow>
               <IconButton aria-label={t`Delete`} color="error" onClick={handleDeleteModal}>
                 <DeleteIcon />
               </IconButton>

diff --git a/src/pages/panel/workspace-settings-users/WorkspaceSettingsUserInvitationRow.tsx b/src/pages/panel/workspace-settings-users/WorkspaceSettingsUserInvitationRow.tsx
@@ -74,7 +74,7 @@ export const WorkspaceSettingsUserInvitationRow = ({ workspaceInvite }: Workspac
                 <DeleteIcon />
               </IconButton>
             ) : (
-              <Tooltip title={<Trans>Delete</Trans>}>
+              <Tooltip title={<Trans>Delete</Trans>} arrow>
                 <IconButton aria-label={t`Delete`} color="error" onClick={handleDeleteModal}>
                   <DeleteIcon />
                 </IconButton>

diff --git a/src/pages/panel/workspace-settings-users/WorkspaceSettingsUserRoles.tsx b/src/pages/panel/workspace-settings-users/WorkspaceSettingsUserRoles.tsx
@@ -141,7 +141,7 @@ export const WorkspaceSettingsUserRoles = ({ role, userId }: WorkspaceSettingsUs
       {changeRoleIsPending ? (
         <CircularProgress size={20} />
       ) : (
-        <Tooltip title={<Trans>Submit</Trans>}>
+        <Tooltip title={<Trans>Submit</Trans>} arrow>
           <IconButton aria-label={t`Submit`} color="success" type="submit">
             <SendIcon />
           </IconButton>
@@ -152,7 +152,7 @@ export const WorkspaceSettingsUserRoles = ({ role, userId }: WorkspaceSettingsUs
           <CancelIcon />
         </IconButton>
       ) : (
-        <Tooltip title={<Trans>Cancel</Trans>}>
+        <Tooltip title={<Trans>Cancel</Trans>} arrow>
           <IconButton aria-label={t`Cancel`} color="error" onClick={() => setIsEdit(false)}>
             <CancelIcon />
           </IconButton>
@@ -169,7 +169,7 @@ export const WorkspaceSettingsUserRoles = ({ role, userId }: WorkspaceSettingsUs
         {workspaceSettingsUserRoleToString(role)}
       </Typography>
       {hasUpdateRolesPermission ? (
-        <Tooltip title={<Trans>Edit</Trans>}>
+        <Tooltip title={<Trans>Edit</Trans>} arrow>
           <IconButton aria-label={t`Edit`} color="primary" onClick={handleEdit}>
             <EditIcon />
           </IconButton>

diff --git a/src/pages/panel/workspace-settings-users/WorkspaceSettingsUserRow.tsx b/src/pages/panel/workspace-settings-users/WorkspaceSettingsUserRow.tsx
@@ -96,7 +96,7 @@ export const WorkspaceSettingsUserRow = ({ workspaceUser }: WorkspaceSettingsUse
                 <DeleteIcon />
               </IconButton>
             ) : (
-              <Tooltip title={<Trans>Delete</Trans>}>
+              <Tooltip title={<Trans>Delete</Trans>} arrow>
                 <IconButton aria-label={t`Delete`} color="error" onClick={handleDeleteModal}>
                   <DeleteIcon />
                 </IconButton>

diff --git a/src/pages/panel/workspace-settings/WorkspaceSettingsFormItem.tsx b/src/pages/panel/workspace-settings/WorkspaceSettingsFormItem.tsx
@@ -127,7 +127,7 @@ export const WorkspaceSettingsFormItem = ({
           {buttonName}
         </LoadingButton>
       ) : (
-        <DisabledWithPermission hasPermission={hasUpdateSettingsPermission}>
+        <DisabledWithPermission hasPermission={hasUpdateSettingsPermission} placement="right">
           <LoadingButton
             variant="contained"
             type={readonly ? 'button' : 'submit'}

diff --git a/src/pages/panel/workspace-settings/workspace-alerting-settings/WorkspaceAlertingSettings.tsx b/src/pages/panel/workspace-settings/workspace-alerting-settings/WorkspaceAlertingSettings.tsx
@@ -179,7 +179,7 @@ export const WorkspaceAlertingSettings = () => {
             <TableRow key={i}>
               <TableCell>{snakeCaseWordsToUFStr(benchmark)}</TableCell>
               <TableCell>
-                <DisabledWithPermission hasPermission={hasPermission} sx={{ width: '100%' }}>
+                <DisabledWithPermission hasPermission={hasPermission} sx={{ width: '100%' }} placement="left">
                   <Autocomplete
                     options={severityOptions}
                     disabled={isPending || !hasPermission}

diff --git a/src/shared/charts/Heatmap.tsx b/src/shared/charts/Heatmap.tsx
@@ -35,7 +35,13 @@ const HeatmapCell = ({ title, value, tooltip }: HeatmapData) => {
       {value >= 0 ? title : '-'}
     </Stack>
   )
-  return tooltip ? <Tooltip title={tooltip}>{comp}</Tooltip> : comp
+  return tooltip ? (
+    <Tooltip title={tooltip} arrow>
+      {comp}
+    </Tooltip>
+  ) : (
+    comp
+  )
 }
 
 export const Heatmap = ({ data }: HeatmapProps) => {

diff --git a/src/shared/disabled-with-permission/DisabledWithPermission.tsx b/src/shared/disabled-with-permission/DisabledWithPermission.tsx
@@ -1,6 +1,6 @@
 import { t } from '@lingui/macro'
 import WarningIcon from '@mui/icons-material/Warning'
-import { Badge, BadgeProps, Tooltip, TooltipProps } from '@mui/material'
+import { Badge, BadgeProps, Theme, Tooltip, TooltipProps, useMediaQuery } from '@mui/material'
 import { PropsWithChildren, ReactNode } from 'react'
 
 interface DisabledWithPermissionProps extends PropsWithChildren<Omit<TooltipProps, 'title' | 'children'>> {
@@ -10,7 +10,16 @@ interface DisabledWithPermissionProps extends PropsWithChildren<Omit<TooltipProp
   badgeProps?: BadgeProps
 }
 
-export const DisabledWithPermission = ({ hasPermission, access, title, children, badgeProps, ...props }: DisabledWithPermissionProps) => {
+export const DisabledWithPermission = ({
+  hasPermission,
+  placement,
+  access,
+  title,
+  children,
+  badgeProps,
+  ...props
+}: DisabledWithPermissionProps) => {
+  const isMobile = useMediaQuery<Theme>((theme) => theme.breakpoints.down('md'))
   return hasPermission ? (
     children
   ) : children ? (
@@ -20,7 +29,9 @@ export const DisabledWithPermission = ({ hasPermission, access, title, children,
           ? t`You don't have the permission to access this, contact the workspace owner for more information.`
           : t`You don't have the permission to change this, contact the workspace owner for more information.`
       }
+      arrow
       {...props}
+      placement={placement && isMobile && !placement.includes('top') && !placement.includes('bottom') ? 'bottom' : placement}
     >
       <Badge
         badgeContent={<WarningIcon fontSize="small" color="warning" />}

diff --git a/src/shared/language-button/LanguageButton.tsx b/src/shared/language-button/LanguageButton.tsx
@@ -38,7 +38,7 @@ export const LanguageButton = ({ iconButtonProps, whiteMode, menuProps }: Langua
 
   return (
     <Box display="flex" alignItems="center" justifyContent="center" mt="0 !important">
-      <Tooltip title={t`Select Language`}>
+      <Tooltip title={t`Select Language`} arrow>
         <LanguageIconButton whiteMode={whiteMode ?? false} size="large" {...(iconButtonProps ?? {})} onClick={handleOpenUserMenu}>
           <LanguageIcon fontSize="large" />
         </LanguageIconButton>