Better UX for project deletion modal (#2634)

* show project name if asking for confirmation --------- Co-authored-by: Stuart Corbishley <[email protected]>
OpenFn · Nov 6, 2024 · c209563 · c209563
1 parent 96bbd8d
commit c209563
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 7 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -26,6 +26,8 @@ and this project adheres to
   [#2629](https://github.com/OpenFn/lightning/pull/2629)
 - JSDoc annotations are removed from code assist descriptions
   [#2629](https://github.com/OpenFn/lightning/pull/2629)
+- Show project name during delete confirmation
+  [#2634](https://github.com/OpenFn/lightning/pull/2634)
 
 ### Fixed
 

diff --git a/lib/lightning_web/live/components/project_deletion_modal.ex b/lib/lightning_web/live/components/project_deletion_modal.ex
@@ -97,19 +97,19 @@ defmodule LightningWeb.Components.ProjectDeletionModal do
     <div id={"project-#{@id}"}>
       <PetalComponents.Modal.modal
         max_width="sm"
-        title="Delete project"
+        title={"Delete #{@project.name}"}
         close_modal_target={@myself}
       >
         <.p>
-          Enter the project name to confirm it's deletion
+          Deleting this project will disable access
+          for all users, and disable all jobs in the project. The whole project will be deleted
+          along with all workflows and work order history, <%= human_readable_grace_period() %>.
         </.p>
         <div class="hidden sm:block" aria-hidden="true">
           <div class="py-2"></div>
         </div>
         <.p>
-          Deleting this project will disable access
-          for all users, and disable all jobs in the project. The whole project will be deleted
-          along with all workflows and work order history, <%= human_readable_grace_period() %>.
+          Enter the project name to confirm deletion: <b><%= @project.name %></b>
         </.p>
         <div class="hidden sm:block" aria-hidden="true">
           <div class="py-2"></div>

diff --git a/test/lightning_web/live/project_live_test.exs b/test/lightning_web/live/project_live_test.exs
@@ -177,7 +177,7 @@ defmodule LightningWeb.ProjectLiveTest do
       {:ok, delete_project_modal, html} =
         live(conn, ~p"/projects/#{project.id}/settings/delete")
 
-      assert html =~ "Enter the project name to confirm it&#39;s deletion"
+      assert html =~ "Enter the project name to confirm deletion"
 
       {:ok, _delete_project_modal, html} =
         delete_project_modal
@@ -258,7 +258,7 @@ defmodule LightningWeb.ProjectLiveTest do
                project: %{name_confirmation: "invalid name"}
              )
              |> render_change() =~
-               "Enter the project name to confirm it&#39;s deletion"
+               "Enter the project name to confirm deletion"
 
       {:ok, _index_live, html} =
         form_live