From 63bec832aaaf805d69cc649d06caba78e7c8eedc Mon Sep 17 00:00:00 2001 From: Gabriel Hernandez Date: Mon, 17 Feb 2025 13:25:22 +0000 Subject: [PATCH] Feat UI host transfer delete warnings (#26287) For #25656 changed the copy for the delete and transfer host modal to be more clear about the disk encryption key behaviour **delete host modal** ![image](https://github.com/user-attachments/assets/e2f74f3b-fdd1-4cae-970e-44035c7630af) **Transfer host modal** ![image](https://github.com/user-attachments/assets/8271eaae-9d80-4385-9704-860d7dc02588) If some of the following don't apply, delete the relevant line. - [x] Changes file added for user-visible changes in `changes/`, `orbit/changes/` or `ee/fleetd-chrome/changes`. - [x ] Added/updated automated tests - [x] Manual QA for all new/changed functionality --- changes/issue-25656-change-host-modal-copy | 2 + .../DeleteHostModal/DeleteHostModal.tests.tsx | 64 ++++++++++++++ .../DeleteHostModal/DeleteHostModal.tsx | 25 +++--- .../TransferHostModal.tests.tsx | 45 ++++++++++ .../TransferHostModal/TransferHostModal.tsx | 85 +++++++++++-------- 5 files changed, 174 insertions(+), 47 deletions(-) create mode 100644 changes/issue-25656-change-host-modal-copy create mode 100644 frontend/pages/hosts/components/DeleteHostModal/DeleteHostModal.tests.tsx create mode 100644 frontend/pages/hosts/components/TransferHostModal/TransferHostModal.tests.tsx 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} +
    + + +
    + +
    ); };