Fleet UI: Link improvements (Back links and dashboard tiles right clickable, fix queries link on nav bar) (#13361)

changes/13345-fix-queries-nav-bar-bug

@@ -0,0 +1 @@
+- Fix queries nav bar bug where if in query detail could not navigate back to manage queries table

frontend/components/BackLink/BackLink.tsx

@@ -1,6 +1,6 @@
 import React from "react";
-import { browserHistory } from "react-router";
-import Button from "components/buttons/Button";
+import { browserHistory, Link } from "react-router";
+
 import Icon from "components/Icon";
 import classnames from "classnames";
 
@@ -22,8 +22,7 @@ const BackLink = ({ text, path, className }: IBackLinkProps): JSX.Element => {
   };
 
   return (
-    /* Need to update react-router to use Link component to go back on FF */
-    <Button onClick={onClick} className={backLinkClass} variant="text-link">
+    <Link className={backLinkClass} to={path || ""} onClick={onClick}>
       <>
         <Icon
           name="chevron"
@@ -33,7 +32,7 @@ const BackLink = ({ text, path, className }: IBackLinkProps): JSX.Element => {
         />
         <span>{text}</span>
       </>
-    </Button>
+    </Link>
   );
 };
 export default BackLink;

frontend/components/BackLink/_styles.scss

@@ -1,10 +1,13 @@
-.back-link .children-wrapper {
+.back-link {
   display: inline-flex;
   align-items: center;
   padding: $pad-small $pad-xxsmall; // larger clickable area
   gap: $pad-xsmall;
 
   &:hover {
+    color: $core-vibrant-blue-over;
+    text-decoration: underline;
+
     svg {
       path {
         stroke: $core-vibrant-blue-over;

frontend/components/top_nav/SiteTopNav/SiteTopNav.tsx

@@ -37,6 +37,8 @@ const REGEX_DETAIL_PAGES = {
   LABEL_NEW: /\/labels\/new/i,
   PACK_EDIT: /\/packs\/\d+/i,
   PACK_NEW: /\/packs\/new/i,
+  QUERIES_EDIT: /\/queries\/\d+/i,
+  QUERIES_NEW: /\/queries\/new/i,
   POLICY_EDIT: /\/policies\/\d+/i,
   POLICY_NEW: /\/policies\/new/i,
   SOFTWARE_DETAILS: /\/software\/\d+/i,

frontend/pages/DashboardPage/cards/HostsSummary/SummaryTile/SummaryTile.tests.tsx

@@ -102,21 +102,5 @@ describe("SummaryTile - component", () => {
     expect(screen.getByText("Hosts on any Windows device")).toBeInTheDocument();
   });
 
-  it("renders manage host page on click", async () => {
-    const { user } = renderWithSetup(
-      <SummaryTile
-        count={200}
-        isLoading={false}
-        showUI
-        title={"Windows hosts"}
-        iconName={"windows-circled"}
-        tooltip={"Hosts on any Windows device"} // tested
-        path={paths.MANAGE_HOSTS_LABEL(10)}
-      />
-    );
-
-    await user.click(screen.getByText("Windows hosts"));
-
-    expect(window.location.pathname).toBe("/hosts/manage/labels/10");
-  });
+  // Note: Cannot test path of react-router <Link/> without <Router/>
 });

frontend/pages/DashboardPage/cards/HostsSummary/SummaryTile/SummaryTile.tsx

@@ -1,6 +1,5 @@
 import React from "react";
-import { browserHistory } from "react-router";
-import Button from "components/buttons/Button";
+import { Link } from "react-router";
 import { kebabCase } from "lodash";
 
 import TooltipWrapper from "components/TooltipWrapper";
@@ -48,56 +47,58 @@ const SummaryTile = ({
     opacity = isLoading ? { opacity: 0.4 } : { opacity: 1 };
   }
 
-  const handleClick = () => {
-    browserHistory.push(path);
-  };
-
   const classes = classnames(`${baseClass}__tile`, `${kebabCase(title)}-tile`, {
     [`${baseClass}__not-supported`]: notSupported,
   });
+
+  const tile = (
+    <>
+      <Icon
+        name={iconName}
+        color={iconColor}
+        className={`${baseClass}__tile-icon`}
+      />
+      <div>
+        {notSupported ? (
+          <div className={`${baseClass}__not-supported-text`}>
+            Not supported
+          </div>
+        ) : (
+          <div
+            className={`${baseClass}__count ${baseClass}__count--${kebabCase(
+              title
+            )}`}
+          >
+            {numberWithCommas(count)}
+          </div>
+        )}
+        <div className={`${baseClass}__description`}>
+          {tooltip ? (
+            <TooltipWrapper tipContent={tooltip}>{title}</TooltipWrapper>
+          ) : (
+            title
+          )}
+          {isSandboxMode && sandboxPremiumOnlyIcon && (
+            <PremiumFeatureIconWithTooltip
+              tooltipPositionOverrides={{ leftAdj: 2, topAdj: 5 }}
+            />
+          )}
+        </div>
+      </div>
+    </>
+  );
+
+  // Uses Link instead of Button to include right click functionality
+  // Cannot use Link disable option as it doesn't allow hover of tooltip
   return (
     <div className={baseClass} style={opacity} data-testid="tile">
-      <Button
-        className={classes}
-        variant="unstyled"
-        onClick={() => handleClick()}
-        disabled={notSupported}
-      >
-        <>
-          <Icon
-            name={iconName}
-            color={iconColor}
-            className={`${baseClass}__tile-icon`}
-          />
-          <div>
-            {notSupported ? (
-              <div className={`${baseClass}__not-supported-text`}>
-                Not supported
-              </div>
-            ) : (
-              <div
-                className={`${baseClass}__count ${baseClass}__count--${kebabCase(
-                  title
-                )}`}
-              >
-                {numberWithCommas(count)}
-              </div>
-            )}
-            <div className={`${baseClass}__description`}>
-              {tooltip ? (
-                <TooltipWrapper tipContent={tooltip}>{title}</TooltipWrapper>
-              ) : (
-                title
-              )}
-              {isSandboxMode && sandboxPremiumOnlyIcon && (
-                <PremiumFeatureIconWithTooltip
-                  tooltipPositionOverrides={{ leftAdj: 2, topAdj: 5 }}
-                />
-              )}
-            </div>
-          </div>
-        </>
-      </Button>
+      {notSupported ? (
+        <div className={classes}>{tile}</div>
+      ) : (
+        <Link className={classes} to={path}>
+          {tile}
+        </Link>
+      )}
     </div>
   );
 };

frontend/pages/DashboardPage/cards/HostsSummary/SummaryTile/_styles.scss

@@ -3,6 +3,12 @@
   display: flex;
   justify-content: space-around;
 
+  a {
+    font-weight: normal;
+    color: $core-fleet-black;
+    text-decoration: none;
+  }
+
   &__tile {
     display: flex;
     align-items: center;
@@ -26,18 +32,20 @@
   }
 
   &__not-supported {
-    // negate the default disabled button styling
-    opacity: 1;
-    filter: none;
-  }
-  &__not-supported-text {
-    font-size: $large;
     color: $ui-fleet-black-50;
+
+    &-text {
+      font-size: $medium;
+    }
   }
 
   &__description {
     white-space: nowrap;
 
+    .component__tooltip-wrapper__element {
+      font-size: $x-small;
+    }
+
     .component__tooltip-wrapper__tip-text {
       width: 200px;
       white-space: initial;
@@ -58,11 +66,8 @@
   .summary-tile {
     &__tile {
       text-align: center;
-
-      .children-wrapper {
-        flex-direction: column;
-        gap: 0.75rem;
-      }
+      flex-direction: column;
+      gap: 0.75rem;
     }
 
     &__tile-icon {

frontend/pages/DashboardPage/components/InfoCard/_styles.scss

@@ -29,6 +29,11 @@
     }
   }
 
+  &__section-title-group {
+    display: flex;
+    gap: 0.75rem;
+  }
+
   &__section-title-detail {
     display: flex;
     flex-direction: row;