Merge pull request #552 from AppQuality/UN-587-dev-dashboard-2-lev-missing-tooltips

UN-587-dev-dashboard-2-lev-missing-tooltips

Author: marcbon

src/common/components/BugDetail/AnchorButtons.tsx

@@ -1,11 +1,12 @@
 import styled from 'styled-components';
 import { Link } from 'react-scroll';
-import { IconButton } from '@appquality/unguess-design-system';
+import { IconButton, Tooltip } from '@appquality/unguess-design-system';
 import { GetCampaignsByCidBugsAndBidApiResponse } from 'src/features/api';
 import { ReactComponent as AttachmentsIcon } from 'src/assets/icons/attachments-icon.svg';
 import { ReactComponent as DetailsIcon } from 'src/assets/icons/details-icon.svg';
 import { ReactComponent as LinkIcon } from 'src/assets/icons/linked.svg';
 import { useBugPreviewContext } from 'src/pages/Bugs/Content/context/BugPreviewContext';
+import { useTranslation } from 'react-i18next';
 
 const FlexComponent = styled.div`
   width: 100%;
@@ -25,6 +26,7 @@ export const AnchorButtons = ({
 }) => {
   const { media } = bug;
   const { openAccordions, setOpenAccordions } = useBugPreviewContext();
+  const { t } = useTranslation();
 
   return (
     <FlexComponent>
@@ -36,9 +38,19 @@ export const AnchorButtons = ({
           duration={500}
           offset={-50}
         >
-          <IconButton size="small">
-            <AttachmentsIcon />
-          </IconButton>
+          <Tooltip
+            content={t('__BUGS_PREVIEW_MEDIA_TOOLTIP_TEXT')}
+            placement="bottom"
+            type="light"
+            size="medium"
+            onClick={(e) => {
+              e.stopPropagation();
+            }}
+          >
+            <IconButton size="small">
+              <AttachmentsIcon />
+            </IconButton>
+          </Tooltip>
         </Link>
       )}
 
@@ -52,9 +64,19 @@ export const AnchorButtons = ({
           setOpenAccordions([...openAccordions, 'details']);
         }}
       >
-        <IconButton size="small">
-          <DetailsIcon />
-        </IconButton>
+        <Tooltip
+          content={t('__BUGS_PREVIEW_TAG_TOOLTIP_TEXT')}
+          placement="bottom"
+          type="light"
+          size="medium"
+          onClick={(e) => {
+            e.stopPropagation();
+          }}
+        >
+          <IconButton size="small">
+            <DetailsIcon />
+          </IconButton>
+        </Tooltip>
       </Link>
 
       <Link
@@ -67,9 +89,19 @@ export const AnchorButtons = ({
           setOpenAccordions([...openAccordions, 'duplicates']);
         }}
       >
-        <IconButton size="small">
-          <LinkIcon />
-        </IconButton>
+        <Tooltip
+          content={t('__BUGS_PREVIEW_RELATED_BUGS_TOOLTIP_TEXT')}
+          placement="bottom"
+          type="light"
+          size="medium"
+          onClick={(e) => {
+            e.stopPropagation();
+          }}
+        >
+          <IconButton size="small">
+            <LinkIcon />
+          </IconButton>
+        </Tooltip>
       </Link>
     </FlexComponent>
   );

src/locales/en/translation.json

@@ -194,6 +194,10 @@
   "__BUGS_TABLE_PRIORITY_HEADER_COLUMN": "Priority",
   "__BUGS_TABLE_SEVERITY_HEADER_COLUMN": "Severity",
   "__BUGS_TABLE_TITLE_HEADER_COLUMN": "Bug",
+  "__BUGS_TABLE_DUPLICATE_TOOLTIP_TEXT": "This icon indicates unique bugs",
+  "__BUGS_PREVIEW_MEDIA_TOOLTIP_TEXT": "Attachments",
+  "__BUGS_PREVIEW_TAG_TOOLTIP_TEXT": "Details",
+  "__BUGS_PREVIEW_RELATED_BUGS_TOOLTIP_TEXT": "Related bugs",
   "__BUGS_TAGS_FILTER_ITEM_NO_ITEMS": "Tag",
   "__BUGS_TAGS_FILTER_ITEM_NO_TAGS": "No tags",
   "__BUGS_TYPES_FILTER_ITEM_NO_ITEMS": "Typology",

src/locales/it/translation.json

@@ -194,6 +194,10 @@
   "__BUGS_TABLE_PRIORITY_HEADER_COLUMN": "Priorità",
   "__BUGS_TABLE_SEVERITY_HEADER_COLUMN": "Gravità",
   "__BUGS_TABLE_TITLE_HEADER_COLUMN": "Bug",
+  "__BUGS_TABLE_DUPLICATE_TOOLTIP_TEXT": "Questa icona segnala i bug unici",
+  "__BUGS_PREVIEW_MEDIA_TOOLTIP_TEXT": "Allegati",
+  "__BUGS_PREVIEW_TAG_TOOLTIP_TEXT": "Dettagli",
+  "__BUGS_PREVIEW_RELATED_BUGS_TOOLTIP_TEXT": "Bug collegati",
   "__BUGS_TAGS_FILTER_ITEM_NO_ITEMS": "Tag",
   "__BUGS_TAGS_FILTER_ITEM_NO_TAGS": "Nessun tag",
   "__BUGS_TYPES_FILTER_ITEM_NO_ITEMS": "Tipologia",

src/pages/Bugs/Content/BugPreview.tsx

@@ -29,7 +29,6 @@ const DetailContainer = styled.div<{
     100vh - ${({ theme }) => theme.components.chrome.header.height} -
       ${filtersHeight}px
   );
-  overflow: hidden;
 
   ${(p) =>
     p.isFetching &&

src/pages/Bugs/Content/BugsTable/utils/mapBugsToTableData.tsx

@@ -20,6 +20,7 @@ const AlignmentDiv = styled.div`
   justify-content: ${(props: { alignment?: TextAlign }) =>
     props.alignment || 'center'};
   align-items: center;
+  cursor: pointer;
 `;
 
 const CustomTag = styled(Tag)`
@@ -52,9 +53,19 @@ export const mapBugsToTableData = (bugs: TableBugType[]) => {
         <AlignmentDiv alignment="center">
           <CustomTag isPill={false} hue="rgba(0,0,0,0)" isRegular={!isPillBold}>
             {!bug.duplicated_of_id && (
-              <Tag.Avatar>
-                <FatherIcon />
-              </Tag.Avatar>
+              <AlignmentDiv alignment="start">
+                <Tooltip
+                  content={t('__BUGS_TABLE_DUPLICATE_TOOLTIP_TEXT')}
+                  placement="bottom"
+                  type="light"
+                  size="medium"
+                  onClick={(e) => {
+                    e.stopPropagation();
+                  }}
+                >
+                  <FatherIcon />
+                </Tooltip>
+              </AlignmentDiv>
             )}
             {bug.siblings > 0 && `+${bug.siblings}`}
           </CustomTag>