Merge pull request #559 from AppQuality/UN-507

Un 507 - pendo classes for bugsList and bugDetail pages

Author: sinatragianpaolo

src/common/components/BugDetail/BugDuplicates/BugDuplicatesList.tsx

@@ -52,6 +52,7 @@ export const BugDuplicatesList = ({
         .slice(0, isOpen ? data.siblings.length : maxSiblingSize)
         .map((item) => (
           <BugItem
+            className="bug-overview-duplicated-bug"
             key={item.id}
             campaignId={cid}
             bugId={item.id}

src/common/components/BugDetail/BugDuplicates/BugItem.tsx

@@ -22,14 +22,19 @@ export const BugItem = ({
   bugId,
   title,
   pills,
+  className,
 }: {
   isFather?: boolean;
   campaignId: number;
   bugId: number;
   title: string;
   pills: string[];
+  className?: string;
 }) => (
-  <StyledLink to={useLocalizeRoute(`campaigns/${campaignId}/bugs/${bugId}`)}>
+  <StyledLink
+    to={useLocalizeRoute(`campaigns/${campaignId}/bugs/${bugId}`)}
+    className={className}
+  >
     <BugCard borderColor={globalTheme.palette.grey[500]}>
       {() => (
         <>

src/common/components/BugDetail/BugStateDropdown.tsx

@@ -122,7 +122,7 @@ const BugStateDropdown = ({ bug }: { bug: Bug }) => {
             itemToString: (item: DropdownItem) => item && item.slug,
           }}
         >
-          <Field>
+          <Field className="bug-dropdown-custom-status">
             {bug.status.id === 4 ? (
               <Tooltip
                 appendToNode={document.body}
@@ -148,7 +148,13 @@ const BugStateDropdown = ({ bug }: { bug: Bug }) => {
               options.map((item) => (
                 <>
                   {item.slug === 'solved' && <Separator />}
-                  <StyledItem key={item.slug} value={item}>
+                  <StyledItem
+                    key={item.slug}
+                    value={item}
+                    className={`bug-dropdown-custom-status-${item.slug
+                      .toLowerCase()
+                      .replace(/\s+/g, '-')}`}
+                  >
                     {item.icon} {item.text}
                   </StyledItem>
                 </>

src/common/components/BugDetail/ImageCard.tsx

@@ -25,12 +25,14 @@ export default ({
   index,
   url,
   onClick,
+  className,
 }: {
   index: number;
   url: string;
   onClick?: () => void;
+  className?: string;
 }) => (
-  <ImageCard onClick={onClick}>
+  <ImageCard onClick={onClick} className={className}>
     <Preview url={url} />
     <MD isBold style={{ textAlign: 'center' }}>
       {index + 1}

src/common/components/BugDetail/Media/index.tsx

@@ -72,6 +72,7 @@ export default ({
               return (
                 <Col xs={12} sm={6} className="flex-3-sm">
                   <ImageCard
+                    className="bug-preview-media-item bug-preview-media-image"
                     index={index}
                     url={item.url}
                     onClick={() => openLightbox(index)}
@@ -82,6 +83,7 @@ export default ({
               return (
                 <Col xs={12} sm={6} className="flex-3-sm">
                   <VideoCard
+                    className="bug-preview-media-item bug-preview-media-video"
                     index={index}
                     url={item.url}
                     onClick={() => openLightbox(index)}

src/common/components/BugDetail/Priority.tsx

@@ -118,7 +118,7 @@ const Priority = ({ bug }: { bug: Bug }) => {
             itemToString: (item: DropdownItem) => item && item.slug,
           }}
         >
-          <Field>
+          <Field className="bug-dropdown-custom-priority">
             <Select isCompact>
               <SelectedItem>
                 {selectedItem.icon} {selectedItem.text}
@@ -128,7 +128,11 @@ const Priority = ({ bug }: { bug: Bug }) => {
           <Menu>
             {options &&
               options.map((item) => (
-                <StyledItem key={item.slug} value={item}>
+                <StyledItem
+                  key={item.slug}
+                  value={item}
+                  className={`bug-dropdown-custom-priority-item-${item.slug.toLowerCase()}`}
+                >
                   {item.icon} {item.text}
                 </StyledItem>
               ))}

src/common/components/BugDetail/ShareBug.tsx

@@ -57,7 +57,7 @@ export const ShareButton = ({
   }, [isLoading, link, isError]);
 
   return (
-    <>
+    <div className="sharable-url-button">
       {children ? (
         children(setModalIsOpen)
       ) : (
@@ -67,7 +67,11 @@ export const ShareButton = ({
           type="light"
           placement="auto"
         >
-          <IconButton size="small" onClick={() => setModalIsOpen(true)}>
+          <IconButton
+            size="small"
+            onClick={() => setModalIsOpen(true)}
+            className="bug-detail-sharable-url"
+          >
             <ShareIcon />
           </IconButton>
         </Tooltip>
@@ -108,6 +112,6 @@ export const ShareButton = ({
           <ModalClose />
         </Modal>
       )}
-    </>
+    </div>
   );
 };

src/common/components/BugDetail/Tags.tsx

@@ -75,7 +75,7 @@ export default ({
         />
       ) : (
         <div
-          className="max-width-6-sm"
+          className="max-width-6-sm bug-preview-search-tags"
           style={{ opacity: isFetchingCampaignTags ? 0.5 : 1 }}
         >
           <MultiSelect

src/common/components/BugDetail/VideoCard.tsx

@@ -47,15 +47,17 @@ export default ({
   index,
   url,
   onClick,
+  className,
 }: {
   index: number;
   url: string;
   onClick?: () => void;
+  className?: string;
 }) => {
   const { t } = useTranslation();
 
   return (
-    <VideoCard onClick={onClick}>
+    <VideoCard onClick={onClick} className={className}>
       <Preview>
         <video
           src={url}

src/features/templates/Page.tsx

@@ -38,19 +38,22 @@ export const Page = ({
   route,
   excludeMarginTop,
   excludeMarginBottom,
+  className,
 }: {
   children: React.ReactNode;
   title?: string;
   pageHeader?: React.ReactNode;
   route: string;
   excludeMarginTop?: boolean;
   excludeMarginBottom?: boolean;
+  className?: string;
 }) => (
   <GoogleTagManager title={title}>
     <ErrorBoundary>
       <Logged route={route} pageHeader={pageHeader}>
         <Container
           id="container"
+          className={className}
           excludeMarginTop={excludeMarginTop}
           excludeMarginBottom={excludeMarginBottom}
         >