From 44bbaebf68bf0f4d15feb32e5c78c7d0d2a0e9db Mon Sep 17 00:00:00 2001
From: RachelElysia <71795832+RachelElysia@users.noreply.github.com>
Date: Thu, 4 Aug 2022 13:03:18 -0400
Subject: [PATCH] Fleet UI: Back to host from details page keeps filters
 applied (#7027)

---
 changes/issue-3191-back-to-host-filtered       |  1 +
 .../HostDetailsPage/HostDetailsPage.tsx        | 18 +++++++++++++-----
 .../hosts/details/HostDetailsPage/_styles.scss |  5 -----
 3 files changed, 14 insertions(+), 10 deletions(-)
 create mode 100644 changes/issue-3191-back-to-host-filtered

diff --git a/changes/issue-3191-back-to-host-filtered b/changes/issue-3191-back-to-host-filtered
new file mode 100644
index 0000000000..6faf1b8ec5
--- /dev/null
+++ b/changes/issue-3191-back-to-host-filtered
@@ -0,0 +1 @@
+* Back to host from host details keeps filters
\ No newline at end of file
diff --git a/frontend/pages/hosts/details/HostDetailsPage/HostDetailsPage.tsx b/frontend/pages/hosts/details/HostDetailsPage/HostDetailsPage.tsx
index 37bdedd48f..c68c1d7358 100644
--- a/frontend/pages/hosts/details/HostDetailsPage/HostDetailsPage.tsx
+++ b/frontend/pages/hosts/details/HostDetailsPage/HostDetailsPage.tsx
@@ -1,5 +1,5 @@
 import React, { useContext, useState, useCallback, useEffect } from "react";
-import { Link } from "react-router";
+import { browserHistory } from "react-router";
 import { Params, InjectedRouter } from "react-router/lib/Router";
 import { useQuery } from "react-query";
 import { useErrorHandler } from "react-error-boundary";
@@ -541,10 +541,18 @@ const HostDetailsPage = ({
     <MainContent className={baseClass}>
       <div className={`${baseClass}__wrapper`}>
         <div>
-          <Link to={PATHS.MANAGE_HOSTS} className={`${baseClass}__back-link`}>
-            <img src={BackChevron} alt="back chevron" id="back-chevron" />
-            <span>Back to all hosts</span>
-          </Link>
+          <Button
+            variant={"text-icon"}
+            onClick={() => {
+              browserHistory.goBack();
+            }}
+            className={`${baseClass}__back-link`}
+          >
+            <>
+              <img src={BackChevron} alt="back chevron" id="back-chevron" />
+              <span>Back to all hosts</span>
+            </>
+          </Button>
         </div>
         <HostSummaryCard
           statusClassName={statusClassName}
diff --git a/frontend/pages/hosts/details/HostDetailsPage/_styles.scss b/frontend/pages/hosts/details/HostDetailsPage/_styles.scss
index dbd643d3e3..613a60af73 100644
--- a/frontend/pages/hosts/details/HostDetailsPage/_styles.scss
+++ b/frontend/pages/hosts/details/HostDetailsPage/_styles.scss
@@ -369,11 +369,6 @@
     text-decoration: none;
   }
 
-  #back-chevron {
-    width: 16px;
-    margin-right: $pad-small;
-  }
-
   &__device_mapping {
     .device_mapping--tooltip {
       flex-direction: column;