From aa8faab8aabc299accf145fafabb3517e532d18e Mon Sep 17 00:00:00 2001
From: David Kennedy <david.kennedy@associates.cisa.dhs.gov>
Date: Fri, 25 Oct 2024 17:52:51 -0400
Subject: [PATCH] updated return of success message, handling success and error
 messages on members table

---
 src/registrar/assets/js/get-gov.js            | 53 +++++++++++++------
 .../templates/portfolio_members.html          |  7 +++
 src/registrar/views/portfolios.py             |  2 +-
 3 files changed, 46 insertions(+), 16 deletions(-)

diff --git a/src/registrar/assets/js/get-gov.js b/src/registrar/assets/js/get-gov.js
index 13a8f9b0e..9ec40ecc5 100644
--- a/src/registrar/assets/js/get-gov.js
+++ b/src/registrar/assets/js/get-gov.js
@@ -2252,22 +2252,22 @@ class MembersTable extends LoadTableBase {
       body: formData
     })
     .then(response => {
-      if (response.status === 204) {
+      if (response.status === 200) {
         // TODO: Add success alert with "You've removed member.email from the organization." text
-        console.log('Member successfully deleted');
-        // Update data and UI
-        this.loadTable(pageToDisplay, this.currentSortBy, this.currentOrder, this.scrollToTable, this.currentSearchTerm);
+        response.json().then(data => {
+          if (data.success) {
+            this.addAlert("success", data.success);
+          }
+          this.loadTable(pageToDisplay, this.currentSortBy, this.currentOrder, this.scrollToTable, this.currentSearchTerm);
+        });
       } else {
         // If the response isn't 204, handle the error response
-        return response.json().then(data => {
-          console.log("Member response not 204");
+        response.json().then(data => {
+          console.log("Member response not 200");
           if (data.error) {
-            // TODO: We maybe don't need the consts above and have those
-            // responses in the portfolios.py JSON response. Formatting though?
-
             // This should display the error given from backend for
             // either only admin OR in progress requests
-            this.displayErrorMessage(data.error); 
+            this.addAlert("error", data.error); 
           } else {
             throw new Error(`Unexpected status: ${response.status}`);
           }
@@ -2276,13 +2276,36 @@ class MembersTable extends LoadTableBase {
     })
     .catch(error => {
       console.error('Error deleting member:', error);
-      this.displayErrorMessage(error.message);
     });
-}
+  }
 
-displayErrorMessage(errorMessage) {
-  alert(errorMessage); // Just debugging for now
-}
+
+  /**
+   * Adds an alert message to the page with an alert class.
+   *
+   * @param {string} alertClass - {error, warning, info, success}
+   * @param {string} alertMessage - The text that will be displayed
+   *
+   */
+  addAlert(alertClass, alertMessage) {
+    let toggleableAlertDiv = document.getElementById("toggleable-alert");
+    this.resetAlert();
+    toggleableAlertDiv.classList.add(`usa-alert--${alertClass}`);
+    let alertParagraph = toggleableAlertDiv.querySelector(".usa-alert__text");
+    alertParagraph.innerHTML = alertMessage
+    showElement(toggleableAlertDiv);
+  }
+
+  /**
+   * Resets the reusable alert message
+   *
+   */
+  resetAlert() {
+    let toggleableAlertDiv = document.getElementById("toggleable-alert");
+    toggleableAlertDiv.classList.remove('usa-alert--error');
+    toggleableAlertDiv.classList.remove('usa-alert--success');
+    hideElement(toggleableAlertDiv);
+  }
 
 
   /**
diff --git a/src/registrar/templates/portfolio_members.html b/src/registrar/templates/portfolio_members.html
index ffdb63099..ed7139e8b 100644
--- a/src/registrar/templates/portfolio_members.html
+++ b/src/registrar/templates/portfolio_members.html
@@ -14,6 +14,13 @@
 {% endblock %}
 
 <div id="main-content">
+  <div id="toggleable-alert" class="usa-alert usa-alert--slim margin-bottom-2 display-none">
+    <div class="usa-alert__body">
+      <p class="usa-alert__text ">
+        <!-- alert message will be conditionally populated by javascript -->
+      </p>
+    </div>
+  </div>
     <div class="grid-row grid-gap">
           <div class="mobile:grid-col-12 tablet:grid-col-6">
               <h1 id="members-header">Members</h1>
diff --git a/src/registrar/views/portfolios.py b/src/registrar/views/portfolios.py
index 6351a4ebf..d1686dfdb 100644
--- a/src/registrar/views/portfolios.py
+++ b/src/registrar/views/portfolios.py
@@ -122,7 +122,7 @@ class PortfolioMemberDeleteView(PortfolioMemberPermission, View):
 
         portfolio_member_permission.delete()
 
-        return HttpResponse(status=204)
+        return JsonResponse({"success": f"You've removed {member.email} from the organization."}, status=200)
 
 
 class PortfolioMemberEditView(PortfolioMemberEditPermissionView, View):