feat(ts/detours): add data-fs-element properties to detours flow (#…

…2881) * feat(ts/detours): fs-element: detours modal context tag * feat(ts/detours): fs-element: review detour button * feat(ts/detours): fs-element: start drawing button * feat(ts/detours): fs-element: detour directions textarea * feat(ts/detours): fs-element: copy details button * feat(ts/detours): fs-element: activate detour buttons * feat(ts/detours): fs-element: deactivate detour buttons * feat(ts/detours): fs-element: undo and clear buttons
mbta · Oct 25, 2024 · 9f486ae · 9f486ae
1 parent 9712696
commit 9f486ae
Show file tree

Hide file tree

Showing 10 changed files with 21 additions and 1 deletion.
diff --git a/assets/src/components/detours/activateDetourModal.tsx b/assets/src/components/detours/activateDetourModal.tsx
@@ -66,7 +66,11 @@ const SurroundingModal = ({
         Cancel
       </Button>
       {onActivate ? (
-        <Button variant="primary" onClick={onActivate}>
+        <Button
+          variant="primary"
+          onClick={onActivate}
+          data-fs-element="Confirm Activate Detour"
+        >
           Activate detour
         </Button>
       ) : (

diff --git a/assets/src/components/detours/deactivateDetourModal.tsx b/assets/src/components/detours/deactivateDetourModal.tsx
@@ -48,6 +48,7 @@ export const DeactivateDetourModal = ({
           variant="ui-alert"
           onClick={onDeactivate}
           className="text-white"
+          data-fs-element="Confirm Return to Regular Route"
         >
           Return to regular route
         </Button>

diff --git a/assets/src/components/detours/detourMap.tsx b/assets/src/components/detours/detourMap.tsx
@@ -179,6 +179,7 @@ export const DetourMap = ({
             onClick={onUndo}
             size="lg"
             title="Undo"
+            data-fs-element="Undo"
           >
             <ArrowLeftSquare />
           </MapButton>
@@ -189,6 +190,7 @@ export const DetourMap = ({
             onClick={onClear}
             size="lg"
             title="Clear"
+            data-fs-element="Clear"
           >
             <XSquare />
           </MapButton>

diff --git a/assets/src/components/detours/detourPanelComponents.tsx b/assets/src/components/detours/detourPanelComponents.tsx
@@ -99,6 +99,7 @@ export const CopyButton = ({ detourText }: { detourText: string }) => (
       variant="outline-primary"
       size="sm"
       onClick={() => window.navigator.clipboard?.writeText(detourText)}
+      data-fs-element="Copy Details"
     >
       <Files />
       Copy details

diff --git a/assets/src/components/detours/detourPanels/activeDetourPanel.tsx b/assets/src/components/detours/detourPanels/activeDetourPanel.tsx
@@ -110,6 +110,7 @@ export const ActiveDetourPanel = ({
               variant="ui-alert"
               className="flex-grow-1 m-3 icon-link text-light justify-content-center"
               onClick={onOpenDeactivateModal}
+              data-fs-element="Return to Regular Route"
             >
               <StopCircle />
               Return to regular route

diff --git a/assets/src/components/detours/detourPanels/detourFinishedPanel.tsx b/assets/src/components/detours/detourPanels/detourFinishedPanel.tsx
@@ -43,6 +43,7 @@ export const DetourFinishedPanel = ({
           style={{
             resize: "none",
           }}
+          data-fs-element="Detour Text"
         />
       </Panel.Body.ScrollArea>
 
@@ -51,6 +52,7 @@ export const DetourFinishedPanel = ({
           <Button
             className="m-3 flex-grow-1 icon-link justify-content-center"
             onClick={onActivateDetour}
+            data-fs-element="Begin Activate Detour"
           >
             <BsIcons.Power />
             Start Detour

diff --git a/assets/src/components/detours/detourPanels/detourRouteSelectionPanel.tsx b/assets/src/components/detours/detourPanels/detourRouteSelectionPanel.tsx
@@ -146,6 +146,7 @@ export const DetourRouteSelectionPanel = ({
           <Button
             className="m-3 flex-grow-1 icon-link justify-content-center"
             onClick={onConfirm}
+            data-fs-element="Start Drawing"
           >
             <Brush />
             Start drawing detour

diff --git a/assets/src/components/detours/detourPanels/drawDetourPanel.tsx b/assets/src/components/detours/detourPanels/drawDetourPanel.tsx
@@ -90,6 +90,7 @@ export const DrawDetourPanel = ({
         <Button
           className="flex-grow-1 m-3 icon-link justify-content-center"
           onClick={onReviewDetour}
+          data-fs-element="Review Drawn Detour"
         >
           <CardChecklist />
           Review

diff --git a/assets/src/components/detours/diversionPage.tsx b/assets/src/components/detours/diversionPage.tsx
@@ -410,6 +410,7 @@ export const DiversionPage = ({
   return (
     <>
       <article
+        data-fs-element="Detours"
         className={`l-diversion-page l-diversion-page--${displayType} h-100 border-box inherit-box`}
       >
         <header

diff --git a/assets/tests/components/detours/__snapshots__/detoursListPage.openDetour.test.tsx.snap b/assets/tests/components/detours/__snapshots__/detoursListPage.openDetour.test.tsx.snap
@@ -367,6 +367,7 @@ exports[`Detours Page: Open a Detour renders detour details in an open drawer on
   >
     <article
       class="l-diversion-page l-diversion-page--mobile h-100 border-box inherit-box"
+      data-fs-element="Detours"
     >
       <header
         class="l-diversion-page__header border-bottom text-bg-light"
@@ -409,6 +410,7 @@ exports[`Detours Page: Open a Detour renders detour details in an open drawer on
               </h1>
               <button
                 class="icon-link btn btn-outline-primary btn-sm"
+                data-fs-element="Copy Details"
                 type="button"
               >
                 <svg
@@ -455,6 +457,7 @@ exports[`Detours Page: Open a Detour renders detour details in an open drawer on
                 </button>
                 <textarea
                   class="flex-grow-1 mb-3 form-control"
+                  data-fs-element="Detour Text"
                   style="resize: none;"
                 />
               </div>
@@ -1139,6 +1142,7 @@ exports[`Detours Page: Open a Detour renders detour details modal to match mocke
   >
     <article
       class="l-diversion-page l-diversion-page--desktop h-100 border-box inherit-box"
+      data-fs-element="Detours"
     >
       <header
         class="l-diversion-page__header border-bottom text-bg-light"
@@ -1185,6 +1189,7 @@ exports[`Detours Page: Open a Detour renders detour details modal to match mocke
             </h1>
             <button
               class="icon-link btn btn-outline-primary btn-sm"
+              data-fs-element="Copy Details"
               type="button"
             >
               <svg
@@ -1231,6 +1236,7 @@ exports[`Detours Page: Open a Detour renders detour details modal to match mocke
               </button>
               <textarea
                 class="flex-grow-1 mb-3 form-control"
+                data-fs-element="Detour Text"
                 style="resize: none;"
               />
             </div>