Merge pull request #326 from AppQuality/dashboard-tracking

feat(tracking): add classNames and ids to elements for tracking purpose

Author: sinatragianpaolo

src/common/components/BugsReportCard.tsx

@@ -64,7 +64,7 @@ export const BugsReportCard = ({
 
       <SpecialCard.Footer direction="column" justifyContent="center">
         <Button
-          className="report-btn report-btn-link report-btn-link"
+          className="report-btn report-btn-download report-btn-bugs-report"
           isPill
           isStretched
           onClick={getReport}

src/common/components/Pill.tsx

@@ -24,19 +24,21 @@ const PillContainer = styled.div`
 `;
 
 export const Pill = ({
+  id,
   background,
   color,
   icon,
   title,
   children,
 }: {
+  id?: string;
   title: string;
   background?: string;
   color?: string;
   icon?: ReactNode;
   children?: ReactNode;
 }) => (
-  <PillContainer>
+  <PillContainer {...(id && { id })}>
     <StyledTag isPill hue={background ?? 'white'} size="large">
       {icon && <StyledAvatar>{icon}</StyledAvatar>}
       <Span isBold style={{ color: color ?? globalTheme.palette.grey[700] }}>

src/pages/Campaign/navigation/bugs/ExternalLink.tsx

@@ -14,6 +14,7 @@ export const BugsNavigationLink = ({ campaignId }: { campaignId: number }) => {
 
   return (
     <StyledAnchor
+      id="anchor-bugs-list-navigation"
       isExternal
       onClick={() => {
         // eslint-disable-next-line security/detect-non-literal-fs-filename

src/pages/Campaign/navigation/bugs/Navigation.tsx

@@ -10,6 +10,7 @@ export const BugsNavigation = ({ containerId }: { containerId?: string }) => {
   return (
     <>
       <StickyNavItem
+        id="anchor-campaign-overview-navigation"
         to="campaign-overview"
         containerId={containerId ?? 'main'}
         spy
@@ -23,6 +24,7 @@ export const BugsNavigation = ({ containerId }: { containerId?: string }) => {
         {t('__CAMPAIGN_PAGE_NAVIGATION_BUG_GROUP_DETAILS_LABEL')}
       </StickyNavItemLabel>
       <StickyNavItem
+        id="anchor-unique-bug-distribution-navigation"
         to="unique-bug-distribution"
         containerId={containerId ?? 'main'}
         spy
@@ -33,6 +35,7 @@ export const BugsNavigation = ({ containerId }: { containerId?: string }) => {
         {t('__CAMPAIGN_PAGE_NAVIGATION_BUG_ITEM_DETAILS_UNIQUE_BUGS_LABEL')}
       </StickyNavItem>
       <StickyNavItem
+        id="anchor-devices-and-types-navigation"
         to="devices-and-types"
         containerId={containerId ?? 'main'}
         spy

src/pages/Campaign/navigation/index.tsx

@@ -33,6 +33,7 @@ const Navigation = ({
             {t('__CAMPAIGN_PAGE_NAVIGATION_BUG_GROUP_OTHER_LABEL')}
           </StickyNavItemLabel>
           <StickyNavItem
+            id="anchor-reports-navigation"
             to="reports"
             containerId="main"
             spy

src/pages/Campaign/navigation/media/ExternalLink.tsx

@@ -14,6 +14,7 @@ export const MediaNavigationLink = ({ campaignId }: { campaignId: number }) => {
 
   return (
     <StyledAnchor
+      id="anchor-media-list-navigation"
       isExternal
       onClick={() => {
         // eslint-disable-next-line security/detect-non-literal-fs-filename

src/pages/Campaign/pageHeader/Pills.tsx

@@ -154,20 +154,23 @@ export const Pills = ({ campaign }: { campaign: CampaignWithOutput }) => {
             <Pipe style={{ marginRight: globalTheme.space.md }} />
             {meta.allowed_devices.includes('desktop') && (
               <Pill
+                id="pill-desktop-header"
                 icon={<DesktopIcon />}
                 title={t('__CAMPAIGN_PAGE_INFO_HEADER_DESKTOP')}
                 color={globalTheme.palette.azure[600]}
               />
             )}
             {meta.allowed_devices.includes('smartphone') && (
               <Pill
+                id="pill-smartphone-header"
                 icon={<SmartphoneIcon />}
                 title={t('__CAMPAIGN_PAGE_INFO_HEADER_PLATFORM_SMARTPHONE')}
                 color={globalTheme.palette.azure[600]}
               />
             )}
             {meta.allowed_devices.includes('tablet') && (
               <Pill
+                id="pill-tablet-header"
                 icon={<TabletIcon />}
                 title={t('__CAMPAIGN_PAGE_INFO_HEADER_PLATFORM_TABLET')}
                 color={globalTheme.palette.azure[600]}
@@ -179,6 +182,7 @@ export const Pills = ({ campaign }: { campaign: CampaignWithOutput }) => {
       <ButtonWrapper>
         {outputs?.includes('bugs') && (
           <Button
+            id="button-bugs-list-header"
             isPrimary
             isPill
             themeColor={globalTheme.palette.water[600]}
@@ -195,6 +199,7 @@ export const Pills = ({ campaign }: { campaign: CampaignWithOutput }) => {
         )}
         {outputs?.includes('media') && (
           <Button
+            id="button-media-list-header"
             isPrimary
             isPill
             themeColor={globalTheme.palette.water[600]}

src/pages/Campaign/pageHeader/index.tsx

@@ -115,7 +115,9 @@ const CampaignPageHeader = ({ campaignId }: { campaignId: number }) => {
     isProjectError ? null : (
     <PageHeader>
       <PageHeader.Breadcrumb>
-        <Anchor onClick={() => navigate(projectRoute)}>{project.name}</Anchor>
+        <Anchor id="breadcrumb-parent" onClick={() => navigate(projectRoute)}>
+          {project.name}
+        </Anchor>
         <Span>{campaign.customer_title}</Span>
       </PageHeader.Breadcrumb>
       <PageHeader.Main infoTitle={campaign.customer_title}>

src/pages/Campaign/widgets/BugCard.tsx

@@ -82,7 +82,7 @@ const BugCardTitle = ({
   children: React.ReactNode;
   url: string;
 }) => (
-  <Anchor href={url} target="_blank">
+  <Anchor className="anchor-bug-card-title" href={url} target="_blank">
     <MD isBold>{children}</MD>
   </Anchor>
 );

src/pages/Campaign/widgets/BugDistributionCard/index.tsx

@@ -113,6 +113,7 @@ const BugDistributionCard = ({ campaignId }: { campaignId: number }) => {
 
       <BasicWidget.Footer>
         <Anchor
+          id="anchor-bugs-list-bugs-distribution-widget"
           isExternal
           onClick={() =>
             // eslint-disable-next-line security/detect-non-literal-fs-filename