diff --git a/frontend/pages/ManageControlsPage/Secrets/Secrets.tests.tsx b/frontend/pages/ManageControlsPage/Secrets/Secrets.tests.tsx index 5cf9104498..ed64ba7cb9 100644 --- a/frontend/pages/ManageControlsPage/Secrets/Secrets.tests.tsx +++ b/frontend/pages/ManageControlsPage/Secrets/Secrets.tests.tsx @@ -205,14 +205,7 @@ describe("Custom variables", () => { expect( screen.getByText(/Delete custom variable\?/) ).toBeInTheDocument(); - expect( - screen.getByText((content, element) => { - return ( - element?.textContent === - "This will delete the SECRET_UNO custom variable." - ); - }) - ).toBeInTheDocument(); + expect(screen.getByText(/This will delete the/)).toBeInTheDocument(); }); await new Promise((resolve) => setTimeout(resolve, 250)); await user.click(screen.getByRole("button", { name: "Delete" })); @@ -354,14 +347,7 @@ describe("Custom variables", () => { expect( screen.getByText(/Delete custom variable\?/) ).toBeInTheDocument(); - expect( - screen.getByText((content, element) => { - return ( - element?.textContent === - "This will delete the SECRET_UNO custom variable." - ); - }) - ).toBeInTheDocument(); + expect(screen.getByText(/This will delete the/)).toBeInTheDocument(); }); await new Promise((resolve) => setTimeout(resolve, 250)); await user.click(screen.getByRole("button", { name: "Delete" })); diff --git a/frontend/pages/ManageControlsPage/Secrets/Secrets.tsx b/frontend/pages/ManageControlsPage/Secrets/Secrets.tsx index d6d1801683..d07e3a0fbe 100644 --- a/frontend/pages/ManageControlsPage/Secrets/Secrets.tsx +++ b/frontend/pages/ManageControlsPage/Secrets/Secrets.tsx @@ -105,9 +105,8 @@ const Secrets = () => { setShowDeleteModal(true); }; - const onDeleteSecret = () => { + const reloadList = () => { paginatedListRef.current?.reload(); - setShowDeleteModal(false); }; const getTokenFromSecretName = (secretName: string): string => { @@ -277,8 +276,8 @@ const Secrets = () => { {showDeleteModal && ( setShowDeleteModal(false)} - onDelete={onDeleteSecret} + onExit={() => setShowDeleteModal(false)} + reloadList={reloadList} /> )} diff --git a/frontend/pages/ManageControlsPage/Secrets/components/DeleteSecretModal/DeleteSecretModal.tsx b/frontend/pages/ManageControlsPage/Secrets/components/DeleteSecretModal/DeleteSecretModal.tsx index a75ae14d02..8006b61a2a 100644 --- a/frontend/pages/ManageControlsPage/Secrets/components/DeleteSecretModal/DeleteSecretModal.tsx +++ b/frontend/pages/ManageControlsPage/Secrets/components/DeleteSecretModal/DeleteSecretModal.tsx @@ -1,6 +1,7 @@ import React, { useContext, useState } from "react"; import Modal from "components/Modal"; import Button from "components/buttons/Button"; +import TooltipTruncatedText from "components/TooltipTruncatedText"; import { ISecret } from "interfaces/secrets"; import { NotificationContext } from "context/notification"; @@ -9,16 +10,16 @@ import secretsAPI from "services/entities/secrets"; interface DeleteSecretModalProps { secret: ISecret | undefined; - onCancel: () => void; - onDelete: () => void; + onExit: () => void; + reloadList: () => void; } const baseClass = "fleet-delete-secret-modal"; const DeleteSecretModal = ({ secret, - onCancel, - onDelete, + onExit, + reloadList, }: DeleteSecretModalProps) => { const [isDeleting, setIsDeleting] = useState(false); @@ -32,7 +33,7 @@ const DeleteSecretModal = ({ try { await secretsAPI.deleteSecret(secret.id); renderFlash("success", "Variable successfully deleted."); - onDelete(); + reloadList(); } catch (error) { const errorObject = formatErrorResponse(error); const isInUseError = @@ -45,19 +46,31 @@ const DeleteSecretModal = ({ renderFlash("error", message); } finally { setIsDeleting(false); + onExit(); } }; return ( <> -

- This will delete the {secret?.name} custom variable. -

+
+ + This will delete the + + + + custom variable. + +
+
+ If this custom variable is used in any configuration profiles or + scripts, they will fail. To resolve, edit the configuration profile or + script. +
-
diff --git a/frontend/pages/ManageControlsPage/Secrets/components/DeleteSecretModal/_styles.scss b/frontend/pages/ManageControlsPage/Secrets/components/DeleteSecretModal/_styles.scss new file mode 100644 index 0000000000..7a1616e7e0 --- /dev/null +++ b/frontend/pages/ManageControlsPage/Secrets/components/DeleteSecretModal/_styles.scss @@ -0,0 +1,16 @@ +.fleet-delete-secret-modal { + &__message { + span { + display: inline-flex; + gap: 4px; + align-items: baseline; + .tooltip-truncated-text { + max-width: 322px; // this specific max-width facilitates the desired truncation behavior within the inline parent + + .__react_component_tooltip { + font-weight: $regular; + } + } + } + } +}