diff --git a/changes/issue-25656-change-host-modal-copy b/changes/issue-25656-change-host-modal-copy new file mode 100644 index 0000000000..8f98de606c --- /dev/null +++ b/changes/issue-25656-change-host-modal-copy @@ -0,0 +1,2 @@ +- changed the copy for the delete and transfer host modal to be more clear about the disk encryption + key behavior diff --git a/frontend/pages/hosts/components/DeleteHostModal/DeleteHostModal.tests.tsx b/frontend/pages/hosts/components/DeleteHostModal/DeleteHostModal.tests.tsx new file mode 100644 index 0000000000..9569b52a29 --- /dev/null +++ b/frontend/pages/hosts/components/DeleteHostModal/DeleteHostModal.tests.tsx @@ -0,0 +1,64 @@ +import React from "react"; +import { noop } from "lodash"; +import { render, screen } from "@testing-library/react"; + +import DeleteHostModal from "./DeleteHostModal"; + +describe("DeleteHostModal", () => { + it("renders the number of hosts selected", () => { + render( + + ); + expect(screen.getByText("3 hosts")).toBeVisible(); + }); + + it("renders the host name when only the host name is provided", () => { + render( + + ); + expect(screen.getByText("Host1")).toBeVisible(); + }); + + it("renders the number of hosts selected with '+' after when select all matching hosts is true", () => { + render( + + ); + expect(screen.getByText("3+ hosts")).toBeVisible(); + }); + + it("renders the host count with '+' and an additional warning when there are more than 500 hosts and select all matching hosts is true", () => { + render( + + ); + expect(screen.getByText("3+ hosts")).toBeVisible(); + expect( + screen.getByText( + "When deleting a large volume of hosts, it may take some time for this change to be reflected in the UI." + ) + ).toBeVisible(); + }); +}); diff --git a/frontend/pages/hosts/components/DeleteHostModal/DeleteHostModal.tsx b/frontend/pages/hosts/components/DeleteHostModal/DeleteHostModal.tsx index 90651cb292..8f11661fa6 100644 --- a/frontend/pages/hosts/components/DeleteHostModal/DeleteHostModal.tsx +++ b/frontend/pages/hosts/components/DeleteHostModal/DeleteHostModal.tsx @@ -47,25 +47,26 @@ const DeleteHostModal = ({ } return hostName; }; - const largeVolumeText = (): string => { - if ( - selectedHostIds && - isAllMatchingHostsSelected && - hostsCount && - hostsCount >= 500 - ) { - return " When deleting a large volume of hosts, it may take some time for this change to be reflected in the UI."; - } - return ""; - }; + + const hasManyHosts = + selectedHostIds && + isAllMatchingHostsSelected && + hostsCount && + hostsCount >= 500; return ( <>

This will remove the record of {hostText()} and associated data - (e.g. unlock PINs).{largeVolumeText()} + such as unlock PINs and disk encryption keys.

+ {hasManyHosts && ( +

+ When deleting a large volume of hosts, it may take some time for + this change to be reflected in the UI. +

+ )}
  • macOS, Windows, or Linux hosts will re-appear unless Fleet's diff --git a/frontend/pages/hosts/components/TransferHostModal/TransferHostModal.tests.tsx b/frontend/pages/hosts/components/TransferHostModal/TransferHostModal.tests.tsx new file mode 100644 index 0000000000..81cdd5485c --- /dev/null +++ b/frontend/pages/hosts/components/TransferHostModal/TransferHostModal.tests.tsx @@ -0,0 +1,45 @@ +import React from "react"; +import { noop } from "lodash"; +import { render, screen } from "@testing-library/react"; + +import TransferHostModal from "./TransferHostModal"; + +describe("TransferHostModal", () => { + it("renders the correct message when more than one host is being transfered", () => { + render( + + ); + + expect( + screen.getByText( + "The hosts' disk encryption keys are deleted if they're transferred to a team with disk encryption turned off." + ) + ).toBeVisible(); + }); + + it("render the correct message when one host is being transfered", () => { + render( + + ); + + expect( + screen.getByText( + "The host's disk encryption key is deleted if it's transferred to a team with disk encryption turned off." + ) + ).toBeVisible(); + }); +}); diff --git a/frontend/pages/hosts/components/TransferHostModal/TransferHostModal.tsx b/frontend/pages/hosts/components/TransferHostModal/TransferHostModal.tsx index 5993415e4c..c75e160cfd 100644 --- a/frontend/pages/hosts/components/TransferHostModal/TransferHostModal.tsx +++ b/frontend/pages/hosts/components/TransferHostModal/TransferHostModal.tsx @@ -65,43 +65,58 @@ const TransferHostModal = ({ return [NO_TEAM_OPTION, ...teamOptions]; }; + const diskEncryptionMsg = ( + <> + The {multipleHosts ? "hosts'" : "host's"} disk encryption{" "} + {multipleHosts ? "keys are" : "key is"} deleted if{" "} + {multipleHosts ? "they're" : "it's"} transferred to a team with disk + encryption turned off. + + ); + return ( -
    - - {isGlobalAdmin ? ( -

    - Team not here?{" "} - - Create a team - -

    - ) : null} -
    - - -
    - + <> +

    {diskEncryptionMsg}

    +
    + + {isGlobalAdmin ? ( +

    + Team not here?{" "} + + Create a team + +

    + ) : null} +
    + + +
    + +
    ); };