Fix broken link to app details on tax configuration (#4740)

saleor · Mar 21, 2024 · 1b06dcf · 1b06dcf
1 parent e153911
commit 1b06dcf
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 17 deletions.
diff --git a/.changeset/gentle-laws-prove.md b/.changeset/gentle-laws-prove.md
@@ -0,0 +1,5 @@
+---
+"saleor-dashboard": patch
+---
+
+Fixed broken link that points to app details when user selects method of tax calculation.
diff --git a/src/taxes/components/TaxAppLabel.tsx b/src/taxes/components/TaxAppLabel.tsx
@@ -1,6 +1,7 @@
 import { AppAvatar } from "@dashboard/apps/components/AppAvatar/AppAvatar";
 import { AppUrls } from "@dashboard/apps/urls";
-import { Box, ExternalLinkIcon, Text } from "@saleor/macaw-ui-next";
+import useNavigator from "@dashboard/hooks/useNavigator";
+import { Box, Button, ExternalLinkIcon, Text } from "@saleor/macaw-ui-next";
 import moment from "moment";
 import React from "react";
 import { FormattedMessage } from "react-intl";
@@ -24,6 +25,12 @@ export const TaxAppLabel: React.FC<TaxAppLabelProps> = ({
 }) => {
   const logo = logoUrl ? { source: logoUrl } : undefined;
 
+  const navigate = useNavigator();
+
+  const navigateToAppScreen = () => {
+    navigate(AppUrls.resolveAppDetailsUrl(id));
+  };
+
   return (
     <Box
       gap={4}
@@ -66,22 +73,22 @@ export const TaxAppLabel: React.FC<TaxAppLabelProps> = ({
           )}
         </Box>
       </Box>
-      <Box
-        as="a"
-        href={AppUrls.resolveAppDetailsUrl(id)}
-        target="_blank"
-        textDecoration="underline"
-        display="flex"
-        alignItems="center"
-        gap={1}
-      >
-        {identifier && (
-          <Text color="default2" variant="caption" ellipsis __maxWidth="150px">
-            {identifier}
-          </Text>
-        )}
-        <ExternalLinkIcon size="small" color="default2" />
-      </Box>
+      <Button onClick={navigateToAppScreen} variant="tertiary">
+        <Box display="flex" alignItems="center" gap={1}>
+          {identifier && (
+            <Text
+              color="default2"
+              variant="body"
+              ellipsis
+              __maxWidth="150px"
+              textDecoration="underline"
+            >
+              {identifier}
+            </Text>
+          )}
+          <ExternalLinkIcon size="small" color="default2" />
+        </Box>
+      </Button>
     </Box>
   );
 };