fix: use Link instead of window.location and onClick

Author: iacopolea

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

@@ -2,11 +2,21 @@ import { BugCard } from 'src/common/components/BugCard/BugCardWithIcon';
 import { theme as globalTheme } from 'src/app/theme';
 import { Pill } from 'src/common/components/pills/Pill';
 import { Span } from '@appquality/unguess-design-system';
-import { getLocalizedBugUrl } from 'src/hooks/useLocalizeDashboardUrl';
-import i18n from 'src/i18n';
+import styled from 'styled-components';
+import { Link } from 'react-router-dom';
+import { useLocalizeRoute } from 'src/hooks/useLocalizedRoute';
 import { ReactComponent as FatherIcon } from './icons/father.svg';
 import { ReactComponent as SiblingIcon } from './icons/sibling.svg';
 
+const StyledLink = styled(Link)`
+  text-decoration: none;
+  color: inherit;
+  &:hover {
+    text-decoration: none;
+    color: inherit;
+  }
+`;
+
 export const BugItem = ({
   isFather,
   campaignId,
@@ -19,13 +29,9 @@ export const BugItem = ({
   bugId: number;
   title: string;
   pills: string[];
-}) => {
-  const goToBug = () => {
-    window.location.href = getLocalizedBugUrl(campaignId, bugId, i18n.language);
-  };
-
-  return (
-    <BugCard borderColor={globalTheme.palette.grey[500]} onClick={goToBug}>
+}) => (
+  <StyledLink to={useLocalizeRoute(`campaigns/${campaignId}/bugs/${bugId}`)}>
+    <BugCard borderColor={globalTheme.palette.grey[500]}>
       {() => (
         <>
           <BugCard.IconBox>
@@ -49,5 +55,5 @@ export const BugItem = ({
         </>
       )}
     </BugCard>
-  );
-};
+  </StyledLink>
+);

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

@@ -8,11 +8,11 @@ import { ReactComponent as LinkIcon } from 'src/assets/icons/external-link-icon.
 import { ReactComponent as FatherIcon } from 'src/assets/icons/father-icon.svg';
 import { Bug } from 'src/features/api';
 import { selectBug } from 'src/features/bugsPage/bugsPageSlice';
-import { getLocalizedBugUrl } from 'src/hooks/useLocalizeDashboardUrl';
-import i18n from 'src/i18n';
 import styled from 'styled-components';
 import { ShareButton } from 'src/common/components/BugDetail/ShareBug';
 import TesterDetail from 'src/common/components/BugDetail/TesterDetail';
+import { Link } from 'react-router-dom';
+import { useLocalizeRoute } from 'src/hooks/useLocalizedRoute';
 
 const Container = styled.div`
   display: flex;
@@ -45,14 +45,6 @@ export default ({
 }) => {
   const dispatch = useAppDispatch();
 
-  const goToBug = () => {
-    window.location.href = getLocalizedBugUrl(
-      bug.campaign_id,
-      bug.id,
-      i18n.language
-    );
-  };
-
   return (
     <Container>
       {!bug.duplicated_of_id && (
@@ -70,9 +62,13 @@ export default ({
       />
 
       <ActionDetailPreview>
-        <IconButton size="small" onClick={goToBug}>
-          <LinkIcon />
-        </IconButton>
+        <Link
+          to={useLocalizeRoute(`campaigns/${bug.campaign_id}/bugs/${bug.id}`)}
+        >
+          <IconButton size="small">
+            <LinkIcon />
+          </IconButton>
+        </Link>
         <ShareButton bug={bug} />
         <IconButton
           size="small"

src/pages/Bugs/PageHeader/index.tsx

@@ -1,5 +1,5 @@
 import { Anchor, PageHeader, Span } from '@appquality/unguess-design-system';
-import { useNavigate } from 'react-router-dom';
+import { Link, useNavigate } from 'react-router-dom';
 import { HeaderSkeleton } from 'src/pages/Campaign/pageHeader/HeaderSkeleton';
 import { Tools } from 'src/pages/Bugs/PageHeader/Tools';
 import { useCampaign } from 'src/pages/Campaign/pageHeader/useCampaign';
@@ -42,17 +42,12 @@ const BugsPageHeader = ({ campaignId }: { campaignId: number }) => {
   return isUserLoading || isError ? null : (
     <PageHeader>
       <PageHeader.Breadcrumb>
-        <Anchor id="breadcrumb-parent" onClick={() => navigate(project.route)}>
-          {project.name}
-        </Anchor>
-        <Anchor
-          onClick={() => {
-            window.location.href =
-              getLocalizeoFirstLevelDashboardRoute(campaignId);
-          }}
-        >
-          {campaign.customer_title}
-        </Anchor>
+        <Link to={project.route}>
+          <Anchor id="breadcrumb-parent">{project.name}</Anchor>
+        </Link>
+        <Link to={getLocalizeoFirstLevelDashboardRoute(campaignId)}>
+          <Anchor>{campaign.customer_title}</Anchor>
+        </Link>
       </PageHeader.Breadcrumb>
       <PageHeader.Main infoTitle={campaign.customer_title}>
         <FlexWrapper>