Fleet UI: Save manage host table filters in state so we can return back to same filters (#8806)

frontend/context/app.tsx

@@ -14,6 +14,7 @@ enum ACTIONS {
   SET_CONFIG = "SET_CONFIG",
   SET_ENROLL_SECRET = "SET_ENROLL_SECRET",
   SET_SANDBOX_EXPIRY = "SET_SANDBOX_EXPIRY",
+  SET_FILTERED_HOSTS_PATH = "SET_FILTERED_HOSTS_PATH",
 }
 
 interface ISetAvailableTeamsAction {
@@ -44,13 +45,19 @@ interface ISetSandboxExpiryAction {
   sandboxExpiry: string;
 }
 
+interface ISetFilteredHostsPathAction {
+  type: ACTIONS.SET_FILTERED_HOSTS_PATH;
+  filteredHostsPath: string;
+}
+
 type IAction =
   | ISetAvailableTeamsAction
   | ISetConfigAction
   | ISetCurrentTeamAction
   | ISetCurrentUserAction
   | ISetEnrollSecretAction
-  | ISetSandboxExpiryAction;
+  | ISetSandboxExpiryAction
+  | ISetFilteredHostsPathAction;
 
 type Props = {
   children: ReactNode;
@@ -80,12 +87,14 @@ type InitialStateType = {
   isOnlyObserver?: boolean;
   isNoAccess?: boolean;
   sandboxExpiry?: string;
+  filteredHostsPath?: string;
   setAvailableTeams: (availableTeams: ITeamSummary[]) => void;
   setCurrentUser: (user: IUser) => void;
   setCurrentTeam: (team?: ITeamSummary) => void;
   setConfig: (config: IConfig) => void;
   setEnrollSecret: (enrollSecret: IEnrollSecret[]) => void;
   setSandboxExpiry: (sandboxExpiry: string) => void;
+  setFilteredHostsPath: (filteredHostsPath: string) => void;
 };
 
 export type IAppContext = InitialStateType;
@@ -113,12 +122,14 @@ export const initialState = {
   isTeamAdmin: undefined,
   isOnlyObserver: undefined,
   isNoAccess: undefined,
+  filteredHostsPath: undefined,
   setAvailableTeams: () => null,
   setCurrentUser: () => null,
   setCurrentTeam: () => null,
   setConfig: () => null,
   setEnrollSecret: () => null,
   setSandboxExpiry: () => null,
+  setFilteredHostsPath: () => null,
 };
 
 const detectPreview = () => {
@@ -215,6 +226,13 @@ const reducer = (state: InitialStateType, action: IAction) => {
         sandboxExpiry,
       };
     }
+    case ACTIONS.SET_FILTERED_HOSTS_PATH: {
+      const { filteredHostsPath } = action;
+      return {
+        ...state,
+        filteredHostsPath,
+      };
+    }
     default:
       return state;
   }
@@ -232,6 +250,7 @@ const AppProvider = ({ children }: Props): JSX.Element => {
     currentTeam: state.currentTeam,
     enrollSecret: state.enrollSecret,
     sandboxExpiry: state.sandboxExpiry,
+    filteredHostsPath: state.filteredHostsPath,
     isPreviewMode: detectPreview(),
     isSandboxMode: state.isSandboxMode,
     isFreeTier: state.isFreeTier,
@@ -267,6 +286,9 @@ const AppProvider = ({ children }: Props): JSX.Element => {
     setSandboxExpiry: (sandboxExpiry: string) => {
       dispatch({ type: ACTIONS.SET_SANDBOX_EXPIRY, sandboxExpiry });
     },
+    setFilteredHostsPath: (filteredHostsPath: string) => {
+      dispatch({ type: ACTIONS.SET_FILTERED_HOSTS_PATH, filteredHostsPath });
+    },
   };
 
   return <AppContext.Provider value={value}>{children}</AppContext.Provider>;

frontend/pages/hosts/ManageHostsPage/ManageHostsPage.tsx

@@ -137,6 +137,7 @@ const ManageHostsPage = ({
     isSandboxMode,
     setAvailableTeams,
     setCurrentTeam,
+    setFilteredHostsPath,
   } = useContext(AppContext);
   const { renderFlash } = useContext(NotificationContext);
 
@@ -543,6 +544,8 @@ const ManageHostsPage = ({
       retrieveHostCount(omit(options, "device_mapping"));
       setCurrentQueryOptions(options);
     }
+
+    setFilteredHostsPath(location.pathname + location.search);
   }, [availableTeams, currentTeam, location, labels]);
 
   const isLastPage =

frontend/pages/hosts/details/HostDetailsPage/HostDetailsPage.tsx

@@ -112,6 +112,7 @@ const HostDetailsPage = ({
     isPremiumTier,
     isOnlyObserver,
     isGlobalMaintainer,
+    filteredHostsPath,
   } = useContext(AppContext);
   const {
     setLastEditedQueryName,
@@ -606,7 +607,7 @@ const HostDetailsPage = ({
     <MainContent className={baseClass}>
       <div className={`${baseClass}__wrapper`}>
         <div className={`${baseClass}__header-links`}>
-          <BackLink text="Back to all hosts" />
+          <BackLink text="Back to all hosts" path={filteredHostsPath} />
         </div>
         <HostSummaryCard
           statusClassName={statusClassName}