From c209563a2668cfca7a29ef67903344c84e97b941 Mon Sep 17 00:00:00 2001
From: Taylor Downs <taylor@openfn.org>
Date: Wed, 6 Nov 2024 07:32:34 +0000
Subject: [PATCH] Better UX for project deletion modal (#2634)

* show project name if asking for confirmation

---------

Co-authored-by: Stuart Corbishley <corbish@gmail.com>
---
 CHANGELOG.md                                           |  2 ++
 .../live/components/project_deletion_modal.ex          | 10 +++++-----
 test/lightning_web/live/project_live_test.exs          |  4 ++--
 3 files changed, 9 insertions(+), 7 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 67f52574da..5444d5c3e4 100644
--- 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
index 92df5dbbac..7af7b74889 100644
--- 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
index 456f309c85..10103a9621 100644
--- 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