Replace street view with directions in VPC (#2277)

* refactor: split DirectionsButton into its own component * feat: replace street view button with directions button in VPP * fix: rename VehicleLocationStreetViewButton
mbta · Nov 13, 2023 · 858bbb7 · 858bbb7
1 parent 0ea6f67
commit 858bbb7
Show file tree

Hide file tree

Showing 10 changed files with 58 additions and 54 deletions.
diff --git a/assets/css/_directions_button.scss b/assets/css/_directions_button.scss
@@ -0,0 +1,8 @@
+.c-directions-button {
+  @include button-primary;
+  @include button-icon(1rem);
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  text-decoration: none;
+}
diff --git a/assets/css/app.scss b/assets/css/app.scss
@@ -65,6 +65,7 @@ $list-group-border-color: $color-gray-300;
 @import "crowding";
 @import "cutout_overlay";
 @import "data_status_banner";
+@import "directions_button";
 @import "disconnected_modal";
 @import "drawer_tab";
 @import "filter_accordion";

diff --git a/assets/css/properties_panel/_vehicle_properties_panel.scss b/assets/css/properties_panel/_vehicle_properties_panel.scss
@@ -24,6 +24,7 @@
 
 .c-vehicle-properties-panel__latlng {
   flex: 0 1 4.25rem;
+  margin-bottom: 1rem;
 }
 
 .c-vehicle-properties-panel__next-stop {
@@ -41,16 +42,6 @@
   margin-bottom: 0.25rem;
 }
 
-.c-vehicle-properties-panel__directions {
-  @include button-primary;
-  @include button-icon(1rem);
-  margin-bottom: 1rem;
-  display: inline-flex;
-  align-items: center;
-  gap: 4px;
-  text-decoration: none;
-}
-
 .c-vehicle-properties-panel__not-available {
   color: $color-font-warning;
 }

diff --git a/assets/src/components/directionsButton.tsx b/assets/src/components/directionsButton.tsx
@@ -0,0 +1,27 @@
+import React from "react"
+import { DiamondTurnRightIcon } from "../helpers/icon"
+
+const directionsUrl = (
+  latitude: number,
+  longitude: number
+) => `https://www.google.com/maps/dir/?api=1\
+&destination=${latitude.toString()},${longitude.toString()}\
+&travelmode=driving`
+
+export const DirectionsButton = ({
+  latitude,
+  longitude,
+}: {
+  latitude: number
+  longitude: number
+}) => (
+  <a
+    className="c-directions-button button-small"
+    href={directionsUrl(latitude, longitude)}
+    target="_blank"
+    rel="noreferrer"
+  >
+    <DiamondTurnRightIcon />
+    Get directions to bus
+  </a>
+)
diff --git a/assets/src/components/mapPage/vehiclePropertiesCard.tsx b/assets/src/components/mapPage/vehiclePropertiesCard.tsx
@@ -7,12 +7,12 @@ import { Ghost, Vehicle } from "../../realtime"
 import { formattedDate, formattedTime } from "../../util/dateTime"
 import { isLoading, isOk } from "../../util/fetchResult"
 import Loading from "../loading"
-import StreetViewButton from "../streetViewButton"
 import {
   VehicleRouteSummary,
   VehicleRouteSummaryEventProps,
 } from "../vehicleRouteSummary"
 import { ScheduleAdherence } from "../scheduleAdherence"
+import { DirectionsButton } from "../directionsButton"
 
 const maxAgeToShowInSeconds = 5 * 60
 
@@ -199,13 +199,8 @@ const VehicleNearestIntersection = ({
   )
 }
 
-const VehicleLocationStreetViewButton = ({ vehicle }: { vehicle: Vehicle }) => (
-  <StreetViewButton
-    aria-label="Go to Street View"
-    latitude={vehicle.latitude}
-    longitude={vehicle.longitude}
-    bearing={vehicle.bearing}
-  />
+const VehicleLocationDirectionsButton = ({ vehicle }: { vehicle: Vehicle }) => (
+  <DirectionsButton latitude={vehicle.latitude} longitude={vehicle.longitude} />
 )
 // #endregion
 
@@ -256,7 +251,7 @@ const VehiclePropertiesCard = ({
         >
           <VehicleNearestIntersection vehicleOrGhost={vehicleOrGhost} />
           {isVehicle(vehicleOrGhost) && (
-            <VehicleLocationStreetViewButton vehicle={vehicleOrGhost} />
+            <VehicleLocationDirectionsButton vehicle={vehicleOrGhost} />
           )}
         </div>
       </div>

diff --git a/assets/src/components/propertiesPanel/vehiclePropertiesPanel.tsx b/assets/src/components/propertiesPanel/vehiclePropertiesPanel.tsx
@@ -22,9 +22,9 @@ import CrowdingDiagram from "./crowdingDiagram"
 import Header from "./header"
 import MiniMap from "./miniMap"
 import TabPanels from "./tabPanels"
-import { DiamondTurnRightIcon } from "../../helpers/icon"
 import { fullStoryEvent } from "../../helpers/fullStory"
 import { IndividualPropertiesPanelProps } from "../propertiesPanel"
+import { DirectionsButton } from "../directionsButton"
 
 type Props = {
   selectedVehicle: Vehicle
@@ -50,13 +50,6 @@ const NotAvailable = () => (
   </span>
 )
 
-const directionsUrl = (
-  latitude: number,
-  longitude: number
-) => `https://www.google.com/maps/dir/?api=1\
-&destination=${latitude.toString()},${longitude.toString()}\
-&travelmode=driving`
-
 const useRouteVehicles = (
   routeId: RouteId | null,
   primaryVehicleId: VehicleId
@@ -103,15 +96,7 @@ const Location = ({ vehicle }: { vehicle: Vehicle }) => {
             {nearestIntersection}
           </div>
         ) : null}
-        <a
-          className="c-vehicle-properties-panel__directions button-small"
-          href={directionsUrl(latitude, longitude)}
-          target="_blank"
-          rel="noreferrer"
-        >
-          <DiamondTurnRightIcon />
-          Get directions to bus
-        </a>
+        <DirectionsButton latitude={latitude} longitude={longitude} />
       </div>
       <div className="c-vehicle-properties-panel__next-stop">
         <div className="c-vehicle-properties-panel__label">Next Stop</div>

diff --git a/assets/tests/components/__snapshots__/mapPage.test.tsx.snap b/assets/tests/components/__snapshots__/mapPage.test.tsx.snap
@@ -1418,20 +1418,15 @@ exports[`<MapPage /> Snapshot renders vehicle data 1`] = `
                 </output>
               </div>
               <a
-                class="c-street-view-button button-small"
-                href="https://www.google.com/maps/@?api=1&map_action=pano&viewpoint=42.360718%2C-71.05891&heading=33&pitch=0&fov=80"
+                class="c-directions-button button-small"
+                href="https://www.google.com/maps/dir/?api=1&destination=42.360718,-71.05891&travelmode=driving"
                 rel="noreferrer"
                 target="_blank"
               >
-                <span
-                  aria-hidden="true"
-                  aria-label=""
-                  class="c-street-view-button__icon"
-                  role="img"
-                >
+                <span>
                   <svg />
                 </span>
-                Street View
+                Get directions to bus
               </a>
             </div>
           </div>

diff --git a/assets/tests/components/__snapshots__/propertiesPanel.test.tsx.snap b/assets/tests/components/__snapshots__/propertiesPanel.test.tsx.snap
@@ -658,7 +658,7 @@ exports[`PropertiesPanel renders a vehicle 1`] = `
               Current Location
             </div>
             <a
-              className="c-vehicle-properties-panel__directions button-small"
+              className="c-directions-button button-small"
               href="https://www.google.com/maps/dir/?api=1&destination=0,0&travelmode=driving"
               rel="noreferrer"
               target="_blank"

diff --git a/assets/tests/components/mapPage/vehiclePropertiesCard.test.tsx b/assets/tests/components/mapPage/vehiclePropertiesCard.test.tsx
@@ -159,7 +159,9 @@ describe("<VehiclePropertiesCard/>", () => {
         expect(
           screen.getByRole("status", { name: "Current Location" })
         ).toHaveTextContent(intersection)
-        expect(screen.getByRole("link", { name: /street view/i })).toBeVisible()
+        expect(
+          screen.getByRole("link", { name: /directions to bus/i })
+        ).toBeVisible()
       })
 
       test("renders last updated differently when more than 5 minutes in the past", () => {

diff --git a/assets/tests/components/propertiesPanel/__snapshots__/vehiclePropertiesPanel.test.tsx.snap b/assets/tests/components/propertiesPanel/__snapshots__/vehiclePropertiesPanel.test.tsx.snap
@@ -332,7 +332,7 @@ exports[`VehiclePropertiesPanel renders a vehicle properties panel 1`] = `
           Current Location
         </div>
         <a
-          className="c-vehicle-properties-panel__directions button-small"
+          className="c-directions-button button-small"
           href="https://www.google.com/maps/dir/?api=1&destination=0,0&travelmode=driving"
           rel="noreferrer"
           target="_blank"
@@ -709,7 +709,7 @@ exports[`VehiclePropertiesPanel renders for a late vehicle 1`] = `
           Current Location
         </div>
         <a
-          className="c-vehicle-properties-panel__directions button-small"
+          className="c-directions-button button-small"
           href="https://www.google.com/maps/dir/?api=1&destination=0,0&travelmode=driving"
           rel="noreferrer"
           target="_blank"
@@ -949,7 +949,7 @@ exports[`VehiclePropertiesPanel renders for a shuttle 1`] = `
         Current Location
       </div>
       <a
-        className="c-vehicle-properties-panel__directions button-small"
+        className="c-directions-button button-small"
         href="https://www.google.com/maps/dir/?api=1&destination=0,0&travelmode=driving"
         rel="noreferrer"
         target="_blank"
@@ -1426,7 +1426,7 @@ exports[`VehiclePropertiesPanel renders for a vehicle with block waivers 1`] = `
           Current Location
         </div>
         <a
-          className="c-vehicle-properties-panel__directions button-small"
+          className="c-directions-button button-small"
           href="https://www.google.com/maps/dir/?api=1&destination=0,0&travelmode=driving"
           rel="noreferrer"
           target="_blank"
@@ -1803,7 +1803,7 @@ exports[`VehiclePropertiesPanel renders for an early vehicle 1`] = `
           Current Location
         </div>
         <a
-          className="c-vehicle-properties-panel__directions button-small"
+          className="c-directions-button button-small"
           href="https://www.google.com/maps/dir/?api=1&destination=0,0&travelmode=driving"
           rel="noreferrer"
           target="_blank"
@@ -2213,7 +2213,7 @@ exports[`VehiclePropertiesPanel renders for an off-course vehicle 1`] = `
           Current Location
         </div>
         <a
-          className="c-vehicle-properties-panel__directions button-small"
+          className="c-directions-button button-small"
           href="https://www.google.com/maps/dir/?api=1&destination=0,0&travelmode=driving"
           rel="noreferrer"
           target="_blank"
@@ -2596,7 +2596,7 @@ exports[`VehiclePropertiesPanel renders with route data 1`] = `
           Current Location
         </div>
         <a
-          className="c-vehicle-properties-panel__directions button-small"
+          className="c-directions-button button-small"
           href="https://www.google.com/maps/dir/?api=1&destination=0,0&travelmode=driving"
           rel="noreferrer"
           target="_blank"