From 4a832010924ac3ea1afb1ea76cb0d6c67fcb11a3 Mon Sep 17 00:00:00 2001
From: Martavis Parker <47053705+martavis@users.noreply.github.com>
Date: Wed, 19 Jan 2022 12:49:14 -0800
Subject: [PATCH] No hosts for software/policy renders better message (#3701)

* Allow sort by more than one key

* more accurate message for no hosts on filter

* added changes file

* lint fix

* more accurate message for no hosts on filter

* added changes file

* lint fix

* small logical change

Co-authored-by: Tomas Touceda <chiiph@gmail.com>
---
 changes/3660-hosts-filter-state               |  1 +
 .../hosts/ManageHostsPage/ManageHostsPage.tsx |  4 ++
 .../components/NoHosts/NoHosts.tsx            | 70 +++++++++++++------
 3 files changed, 52 insertions(+), 23 deletions(-)
 create mode 100644 changes/3660-hosts-filter-state

diff --git a/changes/3660-hosts-filter-state b/changes/3660-hosts-filter-state
new file mode 100644
index 0000000000..3376874f99
--- /dev/null
+++ b/changes/3660-hosts-filter-state
@@ -0,0 +1 @@
+- Modified no hosts message for software and policy filter
\ No newline at end of file
diff --git a/frontend/pages/hosts/ManageHostsPage/ManageHostsPage.tsx b/frontend/pages/hosts/ManageHostsPage/ManageHostsPage.tsx
index d9fd1163f6..92b2cd68f0 100644
--- a/frontend/pages/hosts/ManageHostsPage/ManageHostsPage.tsx
+++ b/frontend/pages/hosts/ManageHostsPage/ManageHostsPage.tsx
@@ -1450,10 +1450,14 @@ const ManageHostsPage = ({
       searchQuery === "" &&
       !isHostsLoading
     ) {
+      const { software_id, policy_id } = queryParams || {};
+      const includesSoftwareOrPolicyFilter = !!(software_id || policy_id);
+
       return (
         <NoHosts
           toggleGenerateInstallerModal={toggleGenerateInstallerModal}
           canEnrollHosts={canEnrollHosts}
+          includesSoftwareOrPolicyFilter={includesSoftwareOrPolicyFilter}
         />
       );
     }
diff --git a/frontend/pages/hosts/ManageHostsPage/components/NoHosts/NoHosts.tsx b/frontend/pages/hosts/ManageHostsPage/components/NoHosts/NoHosts.tsx
index d2cf65b2f8..e4f7dac814 100644
--- a/frontend/pages/hosts/ManageHostsPage/components/NoHosts/NoHosts.tsx
+++ b/frontend/pages/hosts/ManageHostsPage/components/NoHosts/NoHosts.tsx
@@ -9,6 +9,7 @@ import RoboDogImage from "../../../../../../assets/images/robo-dog-176x144@2x.pn
 interface INoHostsProps {
   toggleGenerateInstallerModal: () => void;
   canEnrollHosts?: boolean;
+  includesSoftwareOrPolicyFilter?: boolean;
 }
 
 const baseClass = "no-hosts";
@@ -16,34 +17,57 @@ const baseClass = "no-hosts";
 const NoHosts = ({
   toggleGenerateInstallerModal,
   canEnrollHosts,
+  includesSoftwareOrPolicyFilter,
 }: INoHostsProps): JSX.Element => {
+  const renderContent = () => {
+    if (includesSoftwareOrPolicyFilter) {
+      return (
+        <div>
+          <h1>No hosts match the current criteria</h1>
+          <p>
+            Expecting to see new hosts? Try again in a few seconds as the system
+            catches up.
+          </p>
+        </div>
+      );
+    }
+
+    if (canEnrollHosts) {
+      return (
+        <div>
+          <h2>Add your devices to Fleet</h2>
+          <p>Generate an installer to add your own devices.</p>
+          <div className={`${baseClass}__no-hosts-button`}>
+            <Button
+              onClick={toggleGenerateInstallerModal}
+              type="button"
+              className="button button--brand"
+            >
+              Generate installer
+            </Button>
+          </div>
+        </div>
+      );
+    }
+
+    return (
+      <div>
+        <h2>Devices will show up here once they’re added to Fleet.</h2>
+        <p>
+          Expecting to see devices? Try again in a few seconds as the system
+          catches up.
+        </p>
+      </div>
+    );
+  };
+
   return (
     <div className={`${baseClass}`}>
       <div className={`${baseClass}__inner`}>
-        <img src={RoboDogImage} alt="No Hosts" />
-        {canEnrollHosts ? (
-          <div>
-            <h2>Add your devices to Fleet</h2>
-            <p>Generate an installer to add your own devices.</p>
-            <div className={`${baseClass}__no-hosts-button`}>
-              <Button
-                onClick={toggleGenerateInstallerModal}
-                type="button"
-                className="button button--brand"
-              >
-                Generate installer
-              </Button>
-            </div>
-          </div>
-        ) : (
-          <div>
-            <h2>Devices will show up here once they’re added to Fleet.</h2>
-            <p>
-              Expecting to see devices? Try again in a few seconds as the system
-              catches up.
-            </p>
-          </div>
+        {!includesSoftwareOrPolicyFilter && (
+          <img src={RoboDogImage} alt="No Hosts" />
         )}
+        {renderContent()}
       </div>
     </div>
   );