diff --git a/changes/13345-fix-queries-nav-bar-bug b/changes/13345-fix-queries-nav-bar-bug
new file mode 100644
index 0000000000..90dac35b12
--- /dev/null
+++ b/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
diff --git a/frontend/components/BackLink/BackLink.tsx b/frontend/components/BackLink/BackLink.tsx
index 839aee6909..a0a6fde581 100644
--- a/frontend/components/BackLink/BackLink.tsx
+++ b/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 */
-
+
<>
{
/>
{text}
>
-
+
);
};
export default BackLink;
diff --git a/frontend/components/BackLink/_styles.scss b/frontend/components/BackLink/_styles.scss
index f31328ac85..39416cb1f9 100644
--- a/frontend/components/BackLink/_styles.scss
+++ b/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;
diff --git a/frontend/components/top_nav/SiteTopNav/SiteTopNav.tsx b/frontend/components/top_nav/SiteTopNav/SiteTopNav.tsx
index 7524230c86..534253ea02 100644
--- a/frontend/components/top_nav/SiteTopNav/SiteTopNav.tsx
+++ b/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,
diff --git a/frontend/pages/DashboardPage/cards/HostsSummary/SummaryTile/SummaryTile.tests.tsx b/frontend/pages/DashboardPage/cards/HostsSummary/SummaryTile/SummaryTile.tests.tsx
index e15b00e98e..4bbe9e3cdf 100644
--- a/frontend/pages/DashboardPage/cards/HostsSummary/SummaryTile/SummaryTile.tests.tsx
+++ b/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(
-
- );
-
- await user.click(screen.getByText("Windows hosts"));
-
- expect(window.location.pathname).toBe("/hosts/manage/labels/10");
- });
+ // Note: Cannot test path of react-router without
});
diff --git a/frontend/pages/DashboardPage/cards/HostsSummary/SummaryTile/SummaryTile.tsx b/frontend/pages/DashboardPage/cards/HostsSummary/SummaryTile/SummaryTile.tsx
index 45be138362..deb4cb9353 100644
--- a/frontend/pages/DashboardPage/cards/HostsSummary/SummaryTile/SummaryTile.tsx
+++ b/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 = (
+ <>
+
+
+ {notSupported ? (
+
+ Not supported
+
+ ) : (
+
+ {numberWithCommas(count)}
+
+ )}
+
+ {tooltip ? (
+
{title}
+ ) : (
+ title
+ )}
+ {isSandboxMode && sandboxPremiumOnlyIcon && (
+
+ )}
+
+
+ >
+ );
+
+ // Uses Link instead of Button to include right click functionality
+ // Cannot use Link disable option as it doesn't allow hover of tooltip
return (
-
handleClick()}
- disabled={notSupported}
- >
- <>
-
-
- {notSupported ? (
-
- Not supported
-
- ) : (
-
- {numberWithCommas(count)}
-
- )}
-
- {tooltip ? (
-
{title}
- ) : (
- title
- )}
- {isSandboxMode && sandboxPremiumOnlyIcon && (
-
- )}
-
-
- >
-
+ {notSupported ? (
+
{tile}
+ ) : (
+
+ {tile}
+
+ )}
);
};
diff --git a/frontend/pages/DashboardPage/cards/HostsSummary/SummaryTile/_styles.scss b/frontend/pages/DashboardPage/cards/HostsSummary/SummaryTile/_styles.scss
index c3c34e8212..bec54612ba 100644
--- a/frontend/pages/DashboardPage/cards/HostsSummary/SummaryTile/_styles.scss
+++ b/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 {
diff --git a/frontend/pages/DashboardPage/components/InfoCard/_styles.scss b/frontend/pages/DashboardPage/components/InfoCard/_styles.scss
index e91195fa78..e556dfe3d6 100644
--- a/frontend/pages/DashboardPage/components/InfoCard/_styles.scss
+++ b/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;