PA message flow read only (#595)

* Move document query to a helper method * Pa Messages page * Read-only for main form * readonly select stations and zones * remove commented out css
mbta · Jan 27, 2025 · fd8fdd5 · fd8fdd5
1 parent 7a125e4
commit fd8fdd5
Show file tree

Hide file tree

Showing 22 changed files with 291 additions and 133 deletions.
diff --git a/assets/css/dashboard/new-pa-message/new-pa-message.scss b/assets/css/dashboard/new-pa-message/new-pa-message.scss
@@ -42,6 +42,10 @@
     }
   }
 
+  .close-button {
+    margin-right: 0;
+  }
+
   // Hide the default Bootstrap validation icons.
   .form-control.is-invalid {
     background-image: none;

diff --git a/assets/css/dashboard/new-pa-message/select-zones-page.scss b/assets/css/dashboard/new-pa-message/select-zones-page.scss
@@ -127,6 +127,12 @@
           .btn {
             padding: 6px 12px;
             height: fit-content;
+
+            &:disabled:not(.button-active) {
+              background-color: inherit;
+              border-color: inherit;
+              color: $text-secondary;
+            }
           }
         }
       }
@@ -222,6 +228,12 @@
           .btn {
             padding: 6px 12px;
             height: fit-content;
+
+            &:disabled:not(.button-active) {
+              background-color: inherit;
+              border-color: inherit;
+              color: $text-secondary;
+            }
           }
         }
       }

diff --git a/assets/css/pa-messages.module.scss b/assets/css/pa-messages.module.scss
@@ -149,6 +149,12 @@
   --bs-body-bg: #{$dark-bg};
   --bs-body-color: #{$text-secondary};
   --bs-border-color: #{$border-primary};
+
+  &:disabled {
+    border-color: $bg-elevation-5;
+    background-color: $bg-elevation-4;
+  }
+
   &[type="number"] {
     -moz-appearance: textfield; /* Firefox */
     appearance: textfield;

diff --git a/assets/css/variables.scss b/assets/css/variables.scss
@@ -59,6 +59,7 @@ $text-error: #ffb4ab;
 
 $bg-elevation-3: #1e2933;
 $bg-elevation-4: #2b3741;
+$bg-elevation-5: #2e3f4d;
 
 $button-secondary-outline-bg: #c1c7ce;
 $button-secondary-outline-hover-bg: #c1c7ce14;

diff --git a/assets/js/components/Dashboard/DaysPicker.tsx b/assets/js/components/Dashboard/DaysPicker.tsx
@@ -41,9 +41,10 @@ interface Props {
   days: number[];
   onChangeDays: (days: number[]) => void;
   error: string | null;
+  disabled?: boolean;
 }
 
-const DaysPicker = ({ days, onChangeDays, error }: Props) => {
+const DaysPicker = ({ days, onChangeDays, error, disabled = false }: Props) => {
   const [dayLabel, setDayLabel] = useState(
     fp.find(
       ({ value }) => fp.isEqual(value, fp.sortBy(fp.identity, days)),
@@ -81,6 +82,7 @@ const DaysPicker = ({ days, onChangeDays, error }: Props) => {
             <Dropdown.Toggle
               id="days-picker"
               className="w-100 d-flex align-items-center justify-content-between"
+              disabled={disabled}
             >
               {dayLabel}
             </Dropdown.Toggle>

diff --git a/assets/js/components/Dashboard/EditPaMessage/EditPaMessage.tsx b/assets/js/components/Dashboard/EditPaMessage/EditPaMessage.tsx
@@ -7,6 +7,7 @@ import { updateExistingPaMessage } from "Utils/api";
 import { Alert } from "Models/alert";
 import { AudioPreview } from "Components/PaMessageForm/types";
 import { STATIC_TEMPLATES } from "Components/PaMessageForm/StaticTemplatePage";
+import { isPaMessageAdmin } from "Utils/auth";
 
 const useAlert = (id: string | null | undefined) => {
   const { data: alerts, isLoading } = useSWR<Array<Alert>>(
@@ -94,11 +95,12 @@ const EditPaMessage = ({ paMessage, alert }: Props) => {
   const navigate = useNavigate();
   const [errorMessage, setErrorMessage] = useState<string | null>(null);
   const [errors, setErrors] = useState<string[]>([]);
+  const isReadOnly = !isPaMessageAdmin();
 
   return (
     <PaMessageForm
       key={paMessage.updated_at}
-      title="Edit PA/ESS message"
+      title={`${isReadOnly ? "View" : "Edit"} PA/ESS message`}
       errors={errors}
       errorMessage={errorMessage}
       onError={setErrorMessage}
@@ -124,6 +126,7 @@ const EditPaMessage = ({ paMessage, alert }: Props) => {
           }
         }
       }}
+      isReadOnly={isReadOnly}
     />
   );
 };

diff --git a/assets/js/components/Dashboard/IntervalPicker.tsx b/assets/js/components/Dashboard/IntervalPicker.tsx
@@ -7,9 +7,15 @@ interface Props {
   interval: string;
   onChangeInterval: (interval: string) => void;
   validated: boolean;
+  disabled?: boolean;
 }
 
-const IntervalPicker = ({ interval, onChangeInterval, validated }: Props) => {
+const IntervalPicker = ({
+  interval,
+  onChangeInterval,
+  validated,
+  disabled = false,
+}: Props) => {
   return (
     <Form.Group>
       <Form.Label
@@ -30,6 +36,7 @@ const IntervalPicker = ({ interval, onChangeInterval, validated }: Props) => {
         onChange={(input) => onChangeInterval(input.target.value)}
         required
         isInvalid={validated && (!Number.isInteger(+interval) || +interval < 1)}
+        disabled={disabled}
       />
       <Form.Control.Feedback type="invalid">
         Interval value must be a positive integer