Manage Host Page Bug: Update observers to not see generate installer CTA (#3352)

changes/issue-3351-remove-generate-installer-for-observers

@@ -0,0 +1 @@
+* Global and team observers do not have access to generate installer CTA/modal

cypress/integration/all/app/packflow.spec.ts

@@ -24,6 +24,7 @@ describe(
       cy.findByRole("button", { name: /save query pack/i }).click();
 
       cy.visit("/packs/manage");
+      cy.wait(1000); // eslint-disable-line cypress/no-unnecessary-waiting
       cy.findByText(/errors and crashes/i).click();
 
       cy.wait(1000); // eslint-disable-line cypress/no-unnecessary-waiting

cypress/integration/premium/admin.spec.ts

@@ -190,7 +190,7 @@ describe(
         // End e2e test for schedules
 
         cy.visit("/queries/manage");
-
+        cy.wait(1000); // eslint-disable-line cypress/no-unnecessary-waiting
         cy.findByText(/query all window crashes/i)
           .parent()
           .parent()
@@ -226,6 +226,7 @@ describe(
 
         // See the “Team” section in the create user modal. This modal is summoned when the “Create user” button is selected
         cy.visit("/settings/organization");
+        cy.wait(1000); // eslint-disable-line cypress/no-unnecessary-waiting
         cy.get(".react-tabs").within(() => {
           cy.findByText(/users/i).click();
         });

cypress/integration/premium/observer.spec.ts

@@ -21,8 +21,9 @@ describe("Premium tier - Observer user", () => {
     cy.wait(3000); // eslint-disable-line cypress/no-unnecessary-waiting
     cy.contains("All hosts");
 
-    // Not see the "Manage enroll secret” button
+    // Not see the "Manage enroll secret” or "Generate installer" button
     cy.contains("button", /manage enroll secret/i).should("not.exist");
+    cy.contains("button", /generate installer/i).should("not.exist");
 
     cy.get("thead").within(() => {
       cy.findByText(/team/i).should("exist");

cypress/integration/premium/team_maintainer_observer.spec.ts

@@ -26,8 +26,10 @@ describe(
 
       // On the Hosts page, they should…
 
-      // See hosts
-      cy.findByText(/generate installer/i).should("not.exist");
+      // On observing team, not see the "Generate installer" and "Manage enroll secret" buttons
+      cy.contains(/apples/i);
+      cy.contains("button", /generate installer/i).should("not.exist");
+      cy.contains("button", /manage enroll secret/i).should("not.exist");
 
       // See the “Teams” column in the Hosts table
       cy.get("thead").contains(/team/i).should("exist");
@@ -111,7 +113,7 @@ describe(
       // ^^ TODO confirm if this restriction applies to a dual-role user like Marco
     });
 
-    it("Can perform the appropriate maintainer actions", () => {
+    it("Can perform the appropriate team maintainer actions", () => {
       cy.login("marco@organization.com", "user123#");
       cy.visit("/hosts/manage");
 
@@ -138,21 +140,13 @@ describe(
       // See the “Teams” column in the Hosts table
       cy.get("thead").contains(/team/i).should("exist");
 
-      // See and select the “Generate installer” button
+      // On maintaining team, see the "Generate installer" and "Manage enroll secret" buttons
+      cy.visit("/hosts/manage/?team_id=2");
+      cy.contains(/oranges/i);
       cy.findByRole("button", { name: /generate installer/i }).click();
       cy.findByRole("button", { name: /done/i }).click();
 
-      // See the "Manage" enroll secret” button on team Oranges only
-      cy.findAllByText(/apples/i).should("exist");
-      cy.findByText(/manage enroll secret/i).should("not.exist");
-
-      cy.visit("/hosts/manage/?team_id=1");
-      cy.findAllByText(/apples/i).should("exist");
-      cy.findByText(/manage enroll secret/i).should("not.exist");
-
-      // Add secret tests same API as edit and delete
-      cy.visit("/hosts/manage/?team_id=2");
-      cy.findAllByText(/oranges/i).should("exist");
+      // On maintaining team, add secret tests same API as edit and delete
       cy.contains("button", /manage enroll secret/i).click();
       cy.contains("button", /add secret/i).click();
       cy.contains("button", /save/i).click();

frontend/pages/hosts/ManageHostsPage/ManageHostsPage.tsx

@@ -234,11 +234,6 @@ const ManageHostsPage = ({
   !labelID && !activeLabel && selectedFilters.push(ALL_HOSTS_LABEL); // "all-hosts" should always be alone
   // ===== end filter matching
 
-  const canAddNewHosts =
-    isGlobalAdmin ||
-    isGlobalMaintainer ||
-    isAnyTeamAdmin ||
-    isAnyTeamMaintainer;
   const canEnrollHosts =
     isGlobalAdmin || isGlobalMaintainer || isTeamAdmin || isTeamMaintainer;
   const canEnrollGlobalHosts = isGlobalAdmin || isGlobalMaintainer;
@@ -1489,7 +1484,10 @@ const ManageHostsPage = ({
         searchQuery === "")
     ) {
       return (
-        <NoHosts toggleGenerateInstallerModal={toggleGenerateInstallerModal} />
+        <NoHosts
+          toggleGenerateInstallerModal={toggleGenerateInstallerModal}
+          canEnrollHosts={canEnrollHosts}
+        />
       );
     }
 
@@ -1600,7 +1598,7 @@ const ManageHostsPage = ({
                   <span>Manage enroll secret</span>
                 </Button>
               )}
-              {canAddNewHosts &&
+              {canEnrollHosts &&
                 !(
                   getStatusSelected() === ALL_HOSTS_LABEL &&
                   selectedLabel?.count === 0

frontend/pages/hosts/ManageHostsPage/components/NoHosts/NoHosts.tsx

@@ -9,30 +9,42 @@ import RoboDogImage from "../../../../../../assets/images/robo-dog-176x144@2x.pn
 
 interface INoHostsProps {
   toggleGenerateInstallerModal: () => void;
+  canEnrollHosts?: boolean;
 }
 
 const baseClass = "no-hosts";
 
 const NoHosts = ({
   toggleGenerateInstallerModal,
+  canEnrollHosts,
 }: INoHostsProps): JSX.Element => {
   return (
     <div className={`${baseClass}`}>
       <div className={`${baseClass}__inner`}>
         <img src={RoboDogImage} alt="No Hosts" />
-        <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>
+        {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>
+        ) : (
+          <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>
+        )}
       </div>
     </div>
   );