From 858bbb75a85dd7132711f5c30bc7dd4f9d2a627a Mon Sep 17 00:00:00 2001 From: Eddie Maldonado Date: Mon, 13 Nov 2023 15:23:46 -0500 Subject: [PATCH] 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 --- assets/css/_directions_button.scss | 8 ++++++ assets/css/app.scss | 1 + .../_vehicle_properties_panel.scss | 11 +------- assets/src/components/directionsButton.tsx | 27 +++++++++++++++++++ .../mapPage/vehiclePropertiesCard.tsx | 13 +++------ .../vehiclePropertiesPanel.tsx | 19 ++----------- .../__snapshots__/mapPage.test.tsx.snap | 13 +++------ .../propertiesPanel.test.tsx.snap | 2 +- .../mapPage/vehiclePropertiesCard.test.tsx | 4 ++- .../vehiclePropertiesPanel.test.tsx.snap | 14 +++++----- 10 files changed, 58 insertions(+), 54 deletions(-) create mode 100644 assets/css/_directions_button.scss create mode 100644 assets/src/components/directionsButton.tsx diff --git a/assets/css/_directions_button.scss b/assets/css/_directions_button.scss new file mode 100644 index 000000000..f604c112e --- /dev/null +++ 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 index c24905ce5..54f9dfff5 100644 --- 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 index 650635081..189714985 100644 --- 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 new file mode 100644 index 000000000..2fde94800 --- /dev/null +++ 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 +}) => ( + + + Get directions to bus + +) diff --git a/assets/src/components/mapPage/vehiclePropertiesCard.tsx b/assets/src/components/mapPage/vehiclePropertiesCard.tsx index 5ca33dad3..e5cb5e36c 100644 --- 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 }) => ( - +const VehicleLocationDirectionsButton = ({ vehicle }: { vehicle: Vehicle }) => ( + ) // #endregion @@ -256,7 +251,7 @@ const VehiclePropertiesCard = ({ > {isVehicle(vehicleOrGhost) && ( - + )} diff --git a/assets/src/components/propertiesPanel/vehiclePropertiesPanel.tsx b/assets/src/components/propertiesPanel/vehiclePropertiesPanel.tsx index 38a6311d3..8175de5bf 100644 --- 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 = () => ( ) -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} ) : null} - - - Get directions to bus - +
Next Stop
diff --git a/assets/tests/components/__snapshots__/mapPage.test.tsx.snap b/assets/tests/components/__snapshots__/mapPage.test.tsx.snap index 9a4d1892d..b5b73eb57 100644 --- a/assets/tests/components/__snapshots__/mapPage.test.tsx.snap +++ b/assets/tests/components/__snapshots__/mapPage.test.tsx.snap @@ -1418,20 +1418,15 @@ exports[` Snapshot renders vehicle data 1`] = `
- diff --git a/assets/tests/components/__snapshots__/propertiesPanel.test.tsx.snap b/assets/tests/components/__snapshots__/propertiesPanel.test.tsx.snap index 40c75d928..6da509cd4 100644 --- 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 ", () => { 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 index cab2a09dc..fc6c721cd 100644 --- 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