Address feedback from QA.

mbta · Nov 21, 2024 · 97ba765 · 97ba765
1 parent 87549ed
commit 97ba765
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 20 deletions.
diff --git a/assets/css/dashboard/new-pa-message/static-template-page.scss b/assets/css/dashboard/new-pa-message/static-template-page.scss
@@ -81,6 +81,11 @@
               color: $text-secondary;
             }
           }
+
+          &:hover {
+            background-color: $cool-gray-20;
+            cursor: pointer;
+          }
         }
       }
     }

diff --git a/assets/js/components/Dashboard/MessageTextBox.tsx b/assets/js/components/Dashboard/MessageTextBox.tsx
@@ -11,7 +11,6 @@ interface Props {
   required?: boolean;
   validationText?: string;
   validated?: boolean;
-  readonly?: boolean;
 }
 
 const MessageTextBox = ({
@@ -24,13 +23,11 @@ const MessageTextBox = ({
   required,
   validationText,
   validated,
-  readonly,
 }: Props) => {
   return (
     <Form.Group className="message-text-box">
       <Form.Label htmlFor={id}>{label}</Form.Label>
       <Form.Control
-        readOnly={readonly}
         required={required}
         id={id}
         className="text-input"

diff --git a/assets/js/components/Dashboard/PaMessageForm/MainForm.tsx b/assets/js/components/Dashboard/PaMessageForm/MainForm.tsx
@@ -339,7 +339,7 @@ const MainForm = ({
                 <MessageTextBox
                   id="visual-text-box"
                   text={visualText}
-                  readonly={selectedTemplate !== null}
+                  disabled={selectedTemplate !== null}
                   onChangeText={(text) => {
                     setVisualText(text);
                     if (audioState !== AudioPreview.Unreviewed) {
@@ -374,7 +374,6 @@ const MainForm = ({
                 {phoneticText.length > 0 ? (
                   <>
                     <MessageTextBox
-                      readonly={selectedTemplate !== null}
                       id="phonetic-audio-text-box"
                       text={phoneticText}
                       onChangeText={(text) => {
@@ -383,7 +382,9 @@ const MainForm = ({
                           setAudioState(AudioPreview.Outdated);
                         }
                       }}
-                      disabled={phoneticText.length === 0}
+                      disabled={
+                        phoneticText.length === 0 || selectedTemplate !== null
+                      }
                       label="Phonetic Audio"
                       maxLength={MAX_TEXT_LENGTH}
                       validated={validated}
@@ -586,7 +587,7 @@ const NewPaMessageHeader = ({
               navigateTo(Page.TEMPLATES);
             }}
           >
-            Select PSA or Emergency messages
+            Select PSA or Emergency template
           </Button>
           (Optional)
         </div>

diff --git a/assets/js/components/Dashboard/PaMessageForm/StaticTemplatePage.tsx b/assets/js/components/Dashboard/PaMessageForm/StaticTemplatePage.tsx
@@ -9,13 +9,13 @@ interface Props {
   onSelect: (template: StaticTemplate) => void;
 }
 
-type MessageType = "psa" | "emergency";
+type TemplateType = "psa" | "emergency";
 
 export const STATIC_TEMPLATES = _staticTemplates as StaticTemplate[];
 
 const StaticTemplatePage = ({ onCancel, onSelect }: Props) => {
-  const [selectedMessageType, setSelectedMessageType] =
-    useState<MessageType>("psa");
+  const [selectedTemplateType, setSelectedTemplateType] =
+    useState<TemplateType>("psa");
 
   return (
     <div className="static-template-page">
@@ -35,10 +35,10 @@ const StaticTemplatePage = ({ onCancel, onSelect }: Props) => {
         <Row className="static-template-page-body">
           <Col className="filter-group-col">
             <FilterGroup
-              header="Message state"
-              selectedFilter={selectedMessageType}
-              onFilterSelect={(messageType) =>
-                setSelectedMessageType(messageType as MessageType)
+              header="Template type"
+              selectedFilter={selectedTemplateType}
+              onFilterSelect={(templateType) =>
+                setSelectedTemplateType(templateType as TemplateType)
               }
               filters={[
                 { label: "PSAs", value: "psa" },
@@ -49,9 +49,9 @@ const StaticTemplatePage = ({ onCancel, onSelect }: Props) => {
           <Col>
             <StaticTemplateTable
               templates={STATIC_TEMPLATES.filter(
-                (template) => template.type === selectedMessageType,
+                (template) => template.type === selectedTemplateType,
               )}
-              selectedMessageType={selectedMessageType}
+              selectedTemplateType={selectedTemplateType}
               onSelect={onSelect}
             />
           </Col>
@@ -63,19 +63,19 @@ const StaticTemplatePage = ({ onCancel, onSelect }: Props) => {
 
 interface StaticTemplateTableProps {
   templates: StaticTemplate[];
-  selectedMessageType: MessageType;
+  selectedTemplateType: TemplateType;
   onSelect: (template: StaticTemplate) => void;
 }
 
 const StaticTemplateTable = ({
   templates,
-  selectedMessageType,
+  selectedTemplateType,
   onSelect,
 }: StaticTemplateTableProps) => {
   return (
     <div className="static-template-table-container">
       <div className="table-header">
-        {selectedMessageType === "psa" ? "PSAs" : "Emergency"}
+        {selectedTemplateType === "psa" ? "PSAs" : "Emergency"}
       </div>
       <table className="static-template-table">
         <thead>
@@ -87,7 +87,11 @@ const StaticTemplateTable = ({
         <tbody>
           {templates.map((template) => {
             return (
-              <tr className="template-row" key={template.title}>
+              <tr
+                className="template-row"
+                key={template.title}
+                onClick={() => onSelect(template)}
+              >
                 <td className="message-cell">
                   <div className="title">{template.title}</div>
                   <div className="message">{template.visual_text}</div>