feat: Static Templates (#567)

* Added modules and struct for fetching static templates. * Added endpoint for getting static templates. * Added client fetch for static templates. * Added a page for static templates table. * Fix line breaks. * Render static templates in a table. * Adjusted UI to allow selecting a template. * Save message_type to DB. * Clear appropriate state when clearing selected template. * Use new column for template linking. * Add IDs to templates. * Keep message_type as an Enum. * Add template and alert to show response. * Serialize alert if not nil. * Simplified return. * Remove unused endpoint. * Move cache seeding logic. * Tests and credo. * Ignore sobelow false positive. * Remove unused imports. * Fix message type formatting. * Added an archived field to static templates. * Added tests for static templates. * Move static template file from server to client. * Revert some unnecessarily changed code. * Address feedback from QA. * Address PR feedback.
mbta · Nov 26, 2024 · 955e634 · 955e634
1 parent b5b0c37
commit 955e634
Show file tree

Hide file tree

Showing 19 changed files with 660 additions and 207 deletions.
diff --git a/assets/css/dashboard/new-pa-message/new-pa-message-page.scss b/assets/css/dashboard/new-pa-message/new-pa-message-page.scss
@@ -258,31 +258,25 @@
     }
   }
 
-  .unassociated-alert-header {
-    margin-top: 40px;
-    font-size: 20px;
-    font-weight: 500;
-
-    button {
-      font-size: 20px;
-      margin-bottom: 14px;
-    }
-  }
-
-  .associated-alert-header {
+  .associated-alert-header,
+  .selected-template-header,
+  .alert-template-header {
     margin: 40px 0px 0px 16px;
     font-size: 20px;
     font-weight: 500;
+  }
 
-    button {
+  .associated-alert-header,
+  .selected-template-header,
+  .alert-template-container {
+    .clear-button {
+      padding: 0;
       color: $text-secondary;
-      margin-left: 16px;
-      margin-bottom: 6px;
-      width: auto;
-      padding: 0px;
-      height: 24px;
+      margin: auto 0 auto 16px;
     }
+  }
 
+  .associated-alert-header {
     .effect-period,
     .alert-ended {
       margin-top: 4px;
@@ -296,57 +290,39 @@
     }
   }
 
-  .associate-alert-button {
-    color: $text-link-primary;
-    font-family: Inter;
-    font-size: 20;
-    font-weight: 500;
-    height: 30px;
-    margin-bottom: 8px;
-  }
+  .alert-template-container {
+    display: flex;
+    align-items: center;
+    padding: 0;
 
-  .unassociated-alert-header {
-    margin-top: 40px;
-    font-size: 20px;
-    font-weight: 500;
+    .associate-alert-button {
+      padding-left: 0px;
+    }
 
-    button {
+    .associate-alert-button,
+    .psa-emergency-button {
+      height: 30px;
+      display: flex;
+      align-items: center;
+      margin: 0;
+      color: $text-link-primary;
       font-size: 20px;
-      margin-bottom: 14px;
+      font-weight: 500;
+      text-decoration: none;
     }
   }
 
-  .associated-alert-header {
-    margin: 40px 0px 0px 16px;
+  .unassociated-alert-header {
+    margin-top: 40px;
     font-size: 20px;
     font-weight: 500;
 
     button {
-      color: $text-secondary;
-      margin-left: 16px;
-      margin-bottom: 6px;
-      width: auto;
-      padding: 0px;
-      height: 24px;
-    }
-
-    .effect-period {
-      margin-top: 4px;
-      font-size: 14px;
-      font-weight: 400;
-      width: 100%;
+      font-size: 20px;
+      margin-bottom: 14px;
     }
   }
 
-  .associate-alert-button {
-    color: $text-link-primary;
-    font-family: Inter;
-    font-size: 20;
-    font-weight: 500;
-    height: 30px;
-    margin-bottom: 8px;
-  }
-
   input[type="time"],
   input[type="date"] {
     position: relative;

diff --git a/assets/css/dashboard/new-pa-message/static-template-page.scss b/assets/css/dashboard/new-pa-message/static-template-page.scss
@@ -0,0 +1,93 @@
+.static-template-page {
+  padding: 24px 48px;
+
+  .header-container {
+    padding-right: 48px;
+    max-width: 1380px;
+    max-height: 48px;
+    margin-bottom: 40px;
+
+    .header,
+    .cancel-button-col,
+    .cancel-button {
+      height: 48px;
+    }
+
+    .cancel-button-col {
+      flex: none;
+      width: 100px;
+
+      .cancel-button {
+        color: $text-link-primary;
+        text-decoration: none;
+
+        &:hover {
+          color: $text-link-primary;
+          background-color: $cool-gray-15;
+        }
+      }
+    }
+  }
+
+  .static-template-page-body {
+    .filter-group-col {
+      max-width: 200px;
+      margin-right: 48px;
+    }
+
+    .static-template-table-container {
+      max-width: 1096px;
+
+      .table-header {
+        font-size: 32px;
+      }
+
+      .static-template-table {
+        width: 100%;
+
+        .header-row {
+          height: 55px;
+          vertical-align: bottom;
+          border-bottom: 1px solid $border-primary;
+
+          .message-column-header {
+            padding-bottom: 8px;
+            padding-left: 16px;
+          }
+        }
+
+        .template-row {
+          background-color: $cool-gray-15;
+          border-bottom: 1px solid $divider-secondary;
+
+          .title {
+            font-weight: 700;
+          }
+
+          .message-cell {
+            padding: 8px 16px;
+
+            .message {
+              white-space: pre-line;
+            }
+          }
+
+          .select-button-cell {
+            vertical-align: top;
+            padding: 16px 38px 0 16px;
+
+            .select-button {
+              padding: 0;
+              color: $text-secondary;
+            }
+          }
+
+          &:hover {
+            background-color: $cool-gray-20;
+            cursor: pointer;
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/assets/css/screenplay.scss b/assets/css/screenplay.scss
@@ -47,6 +47,7 @@ $form-feedback-invalid-color: $text-error;
 @import "dashboard/toast.scss";
 @import "dashboard/kebab-menu.scss";
 @import "dashboard/filter-group.scss";
+@import "dashboard/new-pa-message/static-template-page.scss";
 
 html {
   font-size: 16px;

diff --git a/assets/css/variables.scss b/assets/css/variables.scss
@@ -68,3 +68,5 @@ $text-button-blue-hover-color: #c1e4ff14;
 $text-button-grey-hover-color: #f8f9fa14;
 $alert-yellow: #ffdd00;
 $accessibility-blue: #165c96;
+
+$divider-secondary: #495057;
diff --git a/assets/js/components/Dashboard/EditPaMessage/EditPaMessage.tsx b/assets/js/components/Dashboard/EditPaMessage/EditPaMessage.tsx
@@ -6,6 +6,7 @@ import PaMessageForm from "../PaMessageForm";
 import { updateExistingPaMessage } from "Utils/api";
 import { Alert } from "Models/alert";
 import { AudioPreview } from "Components/PaMessageForm/types";
+import { STATIC_TEMPLATES } from "Components/PaMessageForm/StaticTemplatePage";
 
 const useAlert = (id: string | null | undefined) => {
   const { data: alerts, isLoading } = useSWR<Array<Alert>>(
@@ -104,6 +105,9 @@ const EditPaMessage = ({ paMessage, alert }: Props) => {
       onErrorsChange={setErrors}
       defaultValues={paMessage}
       defaultAlert={alert ?? paMessage.alert_id}
+      defaultTemplate={STATIC_TEMPLATES.find(
+        (t) => t.id === paMessage.template_id,
+      )}
       defaultAudioState={AudioPreview.Reviewed}
       paused={paMessage.paused}
       onSubmit={async (data) => {