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

@@ -0,0 +1 @@
+- Modified no hosts message for software and policy filter

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}
         />
       );
     }

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>
   );