Un 507

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}
         >

src/pages/Bug/index.tsx

@@ -50,6 +50,7 @@ const Bug = () => {
   return (
     <Page
       title={bug.title.compact}
+      className="bug-page"
       pageHeader={<Header campaignId={campaignId} bug={bug} />}
       route="bug"
     >

src/pages/Bugs/Content/components/BugHeader.tsx

@@ -79,7 +79,7 @@ export default ({
             type="light"
             placement="auto"
           >
-            <IconButton size="small">
+            <IconButton size="small" className="bug-detail-go-to-bug-link">
               <LinkIcon />
             </IconButton>
           </Tooltip>

src/pages/Bugs/Drawer/CustomStatusField.tsx

@@ -70,7 +70,11 @@ export const CustomStatusField = ({
 
   return (
     <>
-      <Accordion level={3} defaultExpandedSections={[]}>
+      <Accordion
+        level={3}
+        defaultExpandedSections={[]}
+        className="bugs-drawer-accordion-custom-status"
+      >
         <Accordion.Section>
           <Accordion.Header>
             <Accordion.Label>
@@ -106,7 +110,10 @@ export const CustomStatusField = ({
             </Accordion.Label>
           </Accordion.Header>
           <Accordion.Panel>
-            <Field style={{ marginBottom: globalTheme.space.md }}>
+            <Field
+              style={{ marginBottom: globalTheme.space.md }}
+              className="bugs-drawer-toogle-exclude-na-bug"
+            >
               <Toggle
                 disabled={shouldDisableToggle}
                 checked={currentIsNaBugExcluded}
@@ -137,7 +144,12 @@ export const CustomStatusField = ({
               ? available
                   .slice(0, showMore ? undefined : maxItemsToShow)
                   .map((item) => (
-                    <Field style={{ marginBottom: globalTheme.space.xs }}>
+                    <Field
+                      style={{ marginBottom: globalTheme.space.xs }}
+                      className={`bugs-drawer-accordion-custom-status-${item.name
+                        .toLowerCase()
+                        .replace(/\s+/g, '-')}`}
+                    >
                       <Checkbox
                         value={item.name}
                         name="filter-custom-status"

src/pages/Bugs/Drawer/DeviceField.tsx

@@ -34,7 +34,11 @@ export const DeviceField = ({
 
   return (
     <>
-      <Accordion level={3} defaultExpandedSections={[]}>
+      <Accordion
+        level={3}
+        defaultExpandedSections={[]}
+        className="bugs-drawer-accordion-devices"
+      >
         <Accordion.Section>
           <Accordion.Header>
             <Accordion.Label>
@@ -66,7 +70,10 @@ export const DeviceField = ({
               ? available
                   .slice(0, showMore ? undefined : maxItemsToShow)
                   .map((device) => (
-                    <Field style={{ marginBottom: globalTheme.space.xs }}>
+                    <Field
+                      style={{ marginBottom: globalTheme.space.xs }}
+                      className="bugs-drawer-accordion-device"
+                    >
                       <Checkbox
                         value={device.device}
                         name="filter-devices"

src/pages/Bugs/Drawer/OsField.tsx

@@ -34,7 +34,11 @@ export const OsField = ({
 
   return (
     <>
-      <Accordion level={3} defaultExpandedSections={[]}>
+      <Accordion
+        level={3}
+        defaultExpandedSections={[]}
+        className="bugs-drawer-accordion-os"
+      >
         <Accordion.Section>
           <Accordion.Header>
             <Accordion.Label>
@@ -66,7 +70,10 @@ export const OsField = ({
               ? available
                   .slice(0, showMore ? undefined : maxItemsToShow)
                   .map((item) => (
-                    <Field style={{ marginBottom: globalTheme.space.xs }}>
+                    <Field
+                      style={{ marginBottom: globalTheme.space.xs }}
+                      className="bugs-drawer-accordion-os-item"
+                    >
                       <Checkbox
                         value={item.os}
                         name="filter-os"

src/pages/Bugs/Drawer/PriorityField.tsx

@@ -43,7 +43,11 @@ export const PriorityField = ({
 
   return (
     <>
-      <Accordion level={3} defaultExpandedSections={[]}>
+      <Accordion
+        level={3}
+        defaultExpandedSections={[]}
+        className="bugs-drawer-accordion-custom-priority"
+      >
         <Accordion.Section>
           <Accordion.Header>
             <Accordion.Label>
@@ -77,7 +81,10 @@ export const PriorityField = ({
               ? available
                   .slice(0, showMore ? undefined : maxItemsToShow)
                   .map((item) => (
-                    <Field style={{ marginBottom: globalTheme.space.xs }}>
+                    <Field
+                      style={{ marginBottom: globalTheme.space.xs }}
+                      className={`bugs-drawer-accordion-custom-priority-${item.name.toLowerCase()}`}
+                    >
                       <Checkbox
                         value={item.name}
                         name="filter-priority"

src/pages/Bugs/Drawer/ReadField.tsx

@@ -19,7 +19,11 @@ export const ReadField = ({ read }: { read: ReadFilterType['read'] }) => {
 
   return (
     <>
-      <Accordion level={3} defaultExpandedSections={[]}>
+      <Accordion
+        level={3}
+        defaultExpandedSections={[]}
+        className="bugs-drawer-accordion-read"
+      >
         <Accordion.Section>
           <Accordion.Header>
             <Accordion.Label>
@@ -41,6 +45,7 @@ export const ReadField = ({ read }: { read: ReadFilterType['read'] }) => {
           <Accordion.Panel>
             {available.map((item) => (
               <Field
+                className={`bugs-drawer-accordion-read-item-${item.toLowerCase()}`}
                 style={{
                   marginBottom: globalTheme.space.xxs,
                 }}

src/pages/Bugs/Drawer/ReplicabilityField.tsx

@@ -34,7 +34,11 @@ export const ReplicabilityField = ({
 
   return (
     <>
-      <Accordion level={3} defaultExpandedSections={[]}>
+      <Accordion
+        level={3}
+        defaultExpandedSections={[]}
+        className="bugs-drawer-accordion-replicability"
+      >
         <Accordion.Section>
           <Accordion.Header>
             <Accordion.Label>
@@ -68,7 +72,10 @@ export const ReplicabilityField = ({
               ? available
                   .slice(0, showMore ? undefined : maxItemsToShow)
                   .map((replicability) => (
-                    <Field style={{ marginBottom: globalTheme.space.xs }}>
+                    <Field
+                      style={{ marginBottom: globalTheme.space.xs }}
+                      className={`bugs-drawer-accordion-replicability-${replicability.name.toLowerCase()}`}
+                    >
                       <Checkbox
                         value={replicability.id}
                         name="filter-replicability"

src/pages/Bugs/Drawer/SeverityField.tsx

@@ -35,7 +35,11 @@ export const SeverityField = ({
 
   return (
     <>
-      <Accordion level={3} defaultExpandedSections={[]}>
+      <Accordion
+        level={3}
+        defaultExpandedSections={[]}
+        className="bugs-drawer-accordion-severity"
+      >
         <Accordion.Section>
           <Accordion.Header>
             <Accordion.Label>
@@ -69,7 +73,10 @@ export const SeverityField = ({
               ? available
                   .slice(0, showMore ? undefined : maxItemsToShow)
                   .map((item) => (
-                    <Field style={{ marginBottom: globalTheme.space.xs }}>
+                    <Field
+                      style={{ marginBottom: globalTheme.space.xs }}
+                      className={`bugs-drawer-accordion-severity-item-${item.name.toLowerCase()}`}
+                    >
                       <Checkbox
                         value={item.name}
                         name="filter-severity"