Improving link UI

craigatk · Jan 9, 2020 · 728ac26 · 728ac26
1 parent b186cdf
commit 728ac26
Show file tree

Hide file tree

Showing 7 changed files with 40 additions and 20 deletions.
diff --git a/ui/src/Dashboard/TestRunDuration.tsx b/ui/src/Dashboard/TestRunDuration.tsx
@@ -1,6 +1,7 @@
 import * as React from "react";
 import { List, ListItem, ListItemText, makeStyles } from "@material-ui/core";
 import { Link } from "@reach/router";
+import CleanLink from "../Link/CleanLink";
 
 interface TestRunDurationProps {
   publicId: string;
@@ -53,13 +54,13 @@ const TestRunDuration = ({
         <ListItemText
           primary={
             <span>
-              <Link
+              <CleanLink
                 to={`/tests/${publicId}/slow`}
                 className={classes.label}
                 data-testid="test-run-slow-test-cases-link"
               >
                 Slowest test case
-              </Link>
+              </CleanLink>
               <span data-testid="test-run-slowest-test-case-duration">
                 {slowestTestCaseDuration}s
               </span>

diff --git a/ui/src/Link/CleanLink.tsx b/ui/src/Link/CleanLink.tsx
@@ -0,0 +1,16 @@
+import * as React from "react";
+import { Link } from "@reach/router";
+import { styled } from "@material-ui/core/styles";
+
+const CleanLink = styled(Link)({
+  textDecoration: "none",
+  color: "blue",
+  "&:hover": {
+    textDecoration: "underline"
+  },
+  "&:visited": {
+    color: "blue"
+  }
+});
+
+export default CleanLink;
diff --git a/ui/src/TestCase/TestCaseDetails.tsx b/ui/src/TestCase/TestCaseDetails.tsx
@@ -16,6 +16,7 @@ import TestSuiteSystemOut from "../TestOutput/TestSuiteSystemOut";
 import TestSuiteSystemErr from "../TestOutput/TestSuiteSystemErr";
 import { getTabCurrentValue } from "../Tabs/TabValue";
 import TestCaseSummary from "./TestCaseSummary";
+import CleanLink from "../Link/CleanLink";
 
 const useStyles = makeStyles(theme => ({
   paper: {
@@ -39,25 +40,25 @@ const buildHeaderIntermediateLinks = (
 
   if (testCase.packageName != null && testCase.packageName !== "") {
     headerIntermediateLinks.push(
-      <Link
+      <CleanLink
         to={`/tests/${publicId}/suites/package/${testCase.packageName}`}
         data-testid={`breadcrumb-link-package-name`}
         key="package-name-link"
       >
         {testCase.packageName}
-      </Link>
+      </CleanLink>
     );
   }
 
   if (testCase.className != null && testCase.className !== "") {
     headerIntermediateLinks.push(
-      <Link
+      <CleanLink
         to={`/tests/${publicId}/suite/${testCase.testSuiteIdx}/`}
         data-testid={`breadcrumb-link-class-name`}
         key="class-name-link"
       >
         {testCase.className}
-      </Link>
+      </CleanLink>
     );
   }
   return headerIntermediateLinks;

diff --git a/ui/src/TestCase/TestCaseFailurePanel.tsx b/ui/src/TestCase/TestCaseFailurePanel.tsx
@@ -10,6 +10,7 @@ import { makeStyles } from "@material-ui/core/styles";
 import { TestCase } from "../model/TestRunModel";
 import { Link } from "@reach/router";
 import { Typography } from "@material-ui/core";
+import CleanLink from "../Link/CleanLink";
 
 const useStyles = makeStyles(() => ({
   panelActions: {
@@ -50,32 +51,32 @@ const TestCaseFailurePanel = ({
       <ExpansionPanelActions className={classes.panelActions}>
         {!testCase.passed && (
           <Button>
-            <Link
+            <CleanLink
               to={`/tests/${publicId}/suite/${testCase.testSuiteIdx}/case/${testCase.idx}/failure`}
               data-testid={`test-case-summary-failure-link-${testCaseIdentifier}`}
             >
               Failure Details
-            </Link>
+            </CleanLink>
           </Button>
         )}
         {testCase.hasSystemOut && (
           <Button>
-            <Link
+            <CleanLink
               to={`/tests/${publicId}/suite/${testCase.testSuiteIdx}/case/${testCase.idx}/systemOut`}
               data-testid={`test-case-summary-system-out-link-${testCaseIdentifier}`}
             >
               System Out
-            </Link>
+            </CleanLink>
           </Button>
         )}
         {testCase.hasSystemErr && (
           <Button>
-            <Link
+            <CleanLink
               to={`/tests/${publicId}/suite/${testCase.testSuiteIdx}/case/${testCase.idx}/systemErr`}
               data-testid={`test-case-summary-system-err-link-${testCaseIdentifier}`}
             >
               System Err
-            </Link>
+            </CleanLink>
           </Button>
         )}
       </ExpansionPanelActions>

diff --git a/ui/src/TestCase/list/TestCaseListRow.tsx b/ui/src/TestCase/list/TestCaseListRow.tsx
@@ -2,8 +2,8 @@ import * as React from "react";
 import { TableCell, TableRow } from "@material-ui/core";
 import { TestCase } from "../../model/TestRunModel";
 import TestCaseResultIcon from "../TestCaseResultIcon";
-import { Link } from "@reach/router";
 import { fullTestCaseName } from "../../model/TestCaseHelpers";
+import CleanLink from "../../Link/CleanLink";
 
 interface TestCaseListRowProps {
   publicId: string;
@@ -36,12 +36,12 @@ const TestCaseListRow = ({
       role="rowcell"
       size="small"
     >
-      <Link
+      <CleanLink
         to={`/tests/${publicId}/suite/${testCase.testSuiteIdx}/case/${testCase.idx}/`}
         data-testid={`test-case-name-link-${testCase.testSuiteIdx}-${testCase.idx}`}
       >
         {showFullTestCaseName ? fullTestCaseName(testCase) : testCase.name}
-      </Link>
+      </CleanLink>
     </TableCell>
   );
   const durationRowCell = (

diff --git a/ui/src/TestSuite/TestSuiteDetails.tsx b/ui/src/TestSuite/TestSuiteDetails.tsx
@@ -14,6 +14,7 @@ import TestSuiteSystemOut from "../TestOutput/TestSuiteSystemOut";
 import TestSuiteSystemErr from "../TestOutput/TestSuiteSystemErr";
 import { getTabCurrentValue } from "../Tabs/TabValue";
 import BreadcrumbPageHeader from "../BreadcrumbPageHeader";
+import CleanLink from "../Link/CleanLink";
 
 interface TestSuiteDetailsProps {
   publicId: string;
@@ -34,13 +35,13 @@ const buildHeaderIntermediateLinks = (publicId, testSuite) => {
 
   if (testSuite.packageName != null && testSuite.packageName !== "") {
     headerIntermediateLinks.push(
-      <Link
+      <CleanLink
         to={`/tests/${publicId}/suites/package/${testSuite.packageName}`}
         data-testid={`breadcrumb-link-package-name`}
         key="package-name-link"
       >
         {testSuite.packageName}
-      </Link>
+      </CleanLink>
     );
   }
 

diff --git a/ui/src/TestSuite/TestSuiteList.tsx b/ui/src/TestSuite/TestSuiteList.tsx
@@ -5,7 +5,7 @@ import TableCell from "@material-ui/core/TableCell";
 import TableHead from "@material-ui/core/TableHead";
 import TableRow from "@material-ui/core/TableRow";
 import { TestSuite } from "../model/TestRunModel";
-import { Link } from "@reach/router";
+import CleanLink from "../Link/CleanLink";
 
 interface TestSuiteListProps {
   publicId: String;
@@ -32,12 +32,12 @@ const TestSuiteList = ({ publicId, testSuites }: TestSuiteListProps) => {
               data-testid={`test-suite-class-name-${testSuite.idx}`}
               size="small"
             >
-              <Link to={`/tests/${publicId}/suite/${testSuite.idx}/`}>
+              <CleanLink to={`/tests/${publicId}/suite/${testSuite.idx}/`}>
                 {testSuite.packageName != null
                   ? `${testSuite.packageName}.`
                   : null}
                 {testSuite.className}
-              </Link>
+              </CleanLink>
             </TableCell>
             <TableCell size="small">{testSuite.testCount}</TableCell>
             <TableCell size="small">{testSuite.passingCount}</TableCell>