Merge pull request #3093 from GSA/3088-org-dashboard---users-should-be-able-to-delete-service

add js delete function and css

app/assets/javascripts/organizationDashboard.js

@@ -57,9 +57,41 @@
     }
   }
 
+  function initDeleteServiceConfirmation() {
+    var deleteButtons = document.querySelectorAll('[data-open-modal="confirmDeleteModal"]');
+    var confirmDeleteButton = document.getElementById('delete-service-confirm-btn');
+    var deleteServiceNameDisplay = document.getElementById('delete-service-name-display');
+    var deleteForm = document.getElementById('delete-service-form');
+
+    if (deleteButtons.length > 0 && confirmDeleteButton && deleteForm) {
+      var currentServiceId = null;
+
+      deleteButtons.forEach(function(button) {
+        button.addEventListener('click', function() {
+          currentServiceId = button.getAttribute('data-service-id');
+          var serviceName = button.getAttribute('data-service-name');
+
+          if (deleteServiceNameDisplay && serviceName) {
+            deleteServiceNameDisplay.textContent = serviceName;
+          }
+        });
+      });
+
+      confirmDeleteButton.addEventListener('click', function() {
+        if (currentServiceId) {
+          var orgId = window.location.pathname.split('/')[2];
+          deleteForm.action = '/organizations/' + encodeURIComponent(orgId) + '?action=delete-service&service_id=' + encodeURIComponent(currentServiceId);
+
+          deleteForm.submit();
+        }
+      });
+    }
+  }
+
   document.addEventListener('DOMContentLoaded', function() {
     initForms();
     initEditServiceConfirmation();
+    initDeleteServiceConfirmation();
   });
 
   window.OrganizationDashboard = {

app/assets/sass/uswds/components/_forms.scss

@@ -48,3 +48,8 @@
   display: inline-flex;
   justify-content: center;
 }
+
+.button-not-clickable {
+  cursor: default;
+  pointer-events: none;
+}

app/assets/sass/uswds/components/_tables.scss

@@ -47,3 +47,22 @@ td.table-empty-message {
     box-shadow: none;
   }
 }
+
+.is-highlighted {
+  td {
+    background-color: color('blue-cool-5v');
+    animation: fadeHighlight 3s ease-out forwards;
+  }
+}
+
+@keyframes fadeHighlight {
+  0% {
+    background-color: color('blue-cool-10v');
+  }
+  50% {
+    background-color: color('blue-cool-5v');
+  }
+  100% {
+    background-color: transparent;
+  }
+}

app/templates/views/organizations/organization/index.html

@@ -70,7 +70,7 @@
   </div>
 
   {% if create_service_form %}
-    <div id="create-service-form" class="padding-3 radius-md margin-bottom-3">
+    <div id="create-service-form" class="padding-3 radius-md margin-bottom-3 bg-gray-5">
       <h3 class="margin-top-0">Create a new service</h3>
       <form method="post" action="{{ url_for('.organization_dashboard', org_id=current_org.id, action='create-service') }}">
         <input type="hidden" name="csrf_token" value="{{ create_service_form.csrf_token._value() }}"/>