Link VPC run number to VPP

assets/css/_skate_ui.scss

@@ -94,6 +94,22 @@ $font-weights: (
   color: var(--font-color-on-light-700);
 }
 
+.kv-value--clickable {
+  color: var(--font-color-text-clickable);
+  font-weight: var(--font-weight-semi);
+  text-decoration: underline;
+
+  &:hover {
+    color: $color-eggplant-500;
+  }
+
+  &:focus {
+    color: $color-eggplant-500;
+    border: 1px solid $color-eggplant-700;
+    border-radius: 3px;
+  }
+}
+
 .headsign {
   font-weight: var(--font-weight-semi);
   font-size: var(--font-size-m);

assets/src/components/app.tsx

@@ -26,6 +26,8 @@ import Nav from "./nav"
 import RightPanel from "./rightPanel"
 import { mapModeForUser } from "../util/mapMode"
 import { Ghost, VehicleInScheduledService } from "../realtime"
+import MapPage from "./mapPage"
+import SearchPage from "./searchPage"
 
 export const AppRoutes = () => {
   useAppcues()
@@ -48,6 +50,8 @@ export const AppRoutes = () => {
 
   const mapMode = mapModeForUser()
 
+  const mapElement = mapMode.path === "/map" ? <MapPage /> : <SearchPage />
+
   return (
     <div className="l-app">
       <div className="l-app__banner">
@@ -79,12 +83,12 @@ export const AppRoutes = () => {
                 />
                 <BrowserRoute path="/settings" element={<SettingsPage />} />
                 {mapMode.supportsRightPanel ? (
-                  <BrowserRoute path={mapMode.path} element={mapMode.element} />
+                  <BrowserRoute path={mapMode.path} element={mapElement} />
                 ) : null}
               </Route>
               <Route>
                 {!mapMode.supportsRightPanel ? (
-                  <BrowserRoute path={mapMode.path} element={mapMode.element} />
+                  <BrowserRoute path={mapMode.path} element={mapElement} />
                 ) : null}
               </Route>
             </Routes>

assets/src/components/mapPage.tsx

@@ -36,6 +36,8 @@ import { LocationSearchResult } from "../models/locationSearchResult"
 import LocationCard from "./mapPage/locationCard"
 import { useLocationSearchResultById } from "../hooks/useLocationSearchResultById"
 import { fullStoryEvent } from "../helpers/fullStory"
+import PropertiesPanel from "./propertiesPanel"
+import inTestGroup, { TestGroups } from "../userInTestGroup"
 
 const SearchMode = ({
   onSelectVehicleResult,
@@ -74,9 +76,11 @@ const SearchMode = ({
 const SelectedVehicle = ({
   vehicleId,
   setSelection,
+  onRunClicked,
 }: {
   vehicleId: VehicleId
   setSelection: (selectedEntity: SelectedEntity | null) => void
+  onRunClicked?: (vehicleOrGhost: Vehicle | Ghost) => void
 }) => {
   // TODO: When using socket from context, this doesn't work as-is
   // Presumably because the useMostRecentVehicleById hook is being used twice, but
@@ -106,6 +110,7 @@ const SelectedVehicle = ({
       vehicleOrGhost={selectedVehicleOrGhost}
       key={selectedVehicleOrGhost.id}
       onRouteVariantNameClicked={onRouteClicked || undefined}
+      onRunClick={onRunClicked}
     />
   )
 }
@@ -134,10 +139,12 @@ const Selection = ({
   selectedEntity,
   setSelection,
   fetchedSelectedLocation,
+  onVehicleRunClicked,
 }: {
   selectedEntity: SelectedEntity
   setSelection: (selectedEntity: SelectedEntity | null) => void
   fetchedSelectedLocation: LocationSearchResult | null
+  onVehicleRunClicked?: (vehicleOrGhost: Vehicle | Ghost) => void
 }): ReactElement => {
   const [{ searchPageState }, dispatch] = useContext(StateDispatchContext)
   const selectRoutePattern = (routePattern: RoutePattern) => {
@@ -186,6 +193,7 @@ const Selection = ({
         <SelectedVehicle
           vehicleId={selectedEntity.vehicleId}
           setSelection={setSelection}
+          onRunClicked={onVehicleRunClicked}
         />
       ) : selectedEntity.type === SelectedEntityType.RoutePattern ? (
         <SelectedRoute
@@ -211,6 +219,10 @@ const MapPage = (): ReactElement<HTMLDivElement> => {
   const [{ searchPageState, openView }, dispatch] =
       useContext(StateDispatchContext),
     { selectedEntity = null } = searchPageState
+  const [
+    selectedRightPanelVehicleOrGhost,
+    setSelectedRightPanelVehicleOrGhost,
+  ] = useState<Vehicle | Ghost | null>(null)
 
   useEffect(() => {
     // don't dispatch closeView if the VPP is open
@@ -286,61 +298,76 @@ const MapPage = (): ReactElement<HTMLDivElement> => {
   }
 
   return (
-    <div
-      className="c-map-page inherit-box border-box"
-      aria-label="Search Map Page"
-    >
+    <>
       <div
-        className={joinClasses([
-          "c-map-page__input-and-results",
-          searchOpen
-            ? "c-map-page__input-and-results--visible"
-            : "c-map-page__input-and-results--hidden",
-        ])}
-        aria-label="Map Search Panel"
+        className="c-map-page inherit-box border-box"
+        aria-label="Search Map Page"
       >
-        <DrawerTab
-          isVisible={searchOpen}
-          toggleVisibility={toggleSearchDrawer}
-        />
-        {selectedEntity ? (
-          <Selection
+        <div
+          className={joinClasses([
+            "c-map-page__input-and-results",
+            searchOpen
+              ? "c-map-page__input-and-results--visible"
+              : "c-map-page__input-and-results--hidden",
+          ])}
+          aria-label="Map Search Panel"
+        >
+          <DrawerTab
+            isVisible={searchOpen}
+            toggleVisibility={toggleSearchDrawer}
+          />
+          {selectedEntity ? (
+            <Selection
+              selectedEntity={selectedEntity}
+              setSelection={(...args) => {
+                setFollowerShouldSetZoomLevel(false)
+                setVehicleSelection(...args)
+              }}
+              fetchedSelectedLocation={fetchedSelectedLocation}
+              onVehicleRunClicked={
+                inTestGroup(TestGroups.SearchMapsOnMobile)
+                  ? (vehicleOrGhost: Vehicle | Ghost) =>
+                      setSelectedRightPanelVehicleOrGhost(vehicleOrGhost)
+                  : undefined
+              }
+            />
+          ) : (
+            <SearchMode
+              onSelectVehicleResult={(...args) => {
+                setFollowerShouldSetZoomLevel(true)
+                selectVehicleResult(...args)
+              }}
+              onSelectLocationResult={selectLocationResult}
+            />
+          )}
+        </div>
+        <div className="c-map-page__map">
+          <MapDisplay
             selectedEntity={selectedEntity}
             setSelection={(...args) => {
               setFollowerShouldSetZoomLevel(false)
               setVehicleSelection(...args)
             }}
             fetchedSelectedLocation={fetchedSelectedLocation}
+            initializeRouteFollowerEnabled={followerShouldSetZoomLevel === true}
+            vehicleUseCurrentZoom={followerShouldSetZoomLevel === false}
+            onInterruptVehicleFollower={
+              (followerShouldSetZoomLevel === false || undefined) &&
+              (() => {
+                setFollowerShouldSetZoomLevel(false)
+              })
+            }
           />
-        ) : (
-          <SearchMode
-            onSelectVehicleResult={(...args) => {
-              setFollowerShouldSetZoomLevel(true)
-              selectVehicleResult(...args)
-            }}
-            onSelectLocationResult={selectLocationResult}
-          />
-        )}
+        </div>
       </div>
-      <div className="c-map-page__map">
-        <MapDisplay
-          selectedEntity={selectedEntity}
-          setSelection={(...args) => {
-            setFollowerShouldSetZoomLevel(false)
-            setVehicleSelection(...args)
-          }}
-          fetchedSelectedLocation={fetchedSelectedLocation}
-          initializeRouteFollowerEnabled={followerShouldSetZoomLevel === true}
-          vehicleUseCurrentZoom={followerShouldSetZoomLevel === false}
-          onInterruptVehicleFollower={
-            (followerShouldSetZoomLevel === false || undefined) &&
-            (() => {
-              setFollowerShouldSetZoomLevel(false)
-            })
-          }
+      {selectedRightPanelVehicleOrGhost && (
+        <PropertiesPanel
+          selectedVehicleOrGhost={selectedRightPanelVehicleOrGhost}
+          onClosePanel={() => setSelectedRightPanelVehicleOrGhost(null)}
+          initialTab="run"
         />
-      </div>
-    </div>
+      )}
+    </>
   )
 }
 

assets/src/components/mapPage/vehiclePropertiesCard.tsx

@@ -73,6 +73,7 @@ interface TrNameValueProps {
   children: ReactNode
   idPrefix?: string
   sensitivity?: HideSensitiveInfo
+  onValueClick?: () => void
 }
 
 const maskClass = "fs-mask"
@@ -84,6 +85,7 @@ const TrNameValue = ({
   children: value,
   idPrefix,
   sensitivity: sensitive = HideSensitiveInfo.None,
+  onValueClick,
 }: TrNameValueProps): React.ReactElement => {
   const id = (idPrefix ?? name) + useId()
   return (
@@ -102,15 +104,28 @@ const TrNameValue = ({
         ])}
         aria-labelledby={id}
       >
-        {value}
+        {onValueClick ? (
+          <button className="kv-value--clickable" onClick={onValueClick}>
+            {value}
+          </button>
+        ) : (
+          <>{value}</>
+        )}
       </td>
     </tr>
   )
 }
 
+type VehicleWorkInfoEventProps = {
+  onRunClick?: (vehicleOrGhost: Vehicle | Ghost) => void
+}
+
+type VehicleWorkInfoProps = VehicleOrGhostProp & VehicleWorkInfoEventProps
+
 const VehicleWorkInfo = ({
   vehicleOrGhost,
-}: VehicleOrGhostProp): React.ReactElement => {
+  onRunClick,
+}: VehicleWorkInfoProps): React.ReactElement => {
   const isLoggedOutVehicle =
     isVehicle(vehicleOrGhost) && isLoggedOut(vehicleOrGhost)
   const noRunText = isLoggedOutVehicle ? "No run logged in" : "N/A"
@@ -120,7 +135,10 @@ const VehicleWorkInfo = ({
     <>
       <table className="c-vehicle-work-info">
         <tbody className="c-vehicle-work-info__items">
-          <TrNameValue name="run">
+          <TrNameValue
+            name="run"
+            onValueClick={onRunClick && (() => onRunClick(vehicleOrGhost))}
+          >
             {vehicleOrGhost.runId || noRunText}
           </TrNameValue>
           <TrNameValue name="vehicle">
@@ -193,11 +211,13 @@ const VehicleLocationStreetViewButton = ({ vehicle }: { vehicle: Vehicle }) => (
 
 // #region Vehicle Properties Card
 export type VehiclePropertiesCardProps = VehicleOrGhostProp &
-  VehicleRouteSummaryEventProps
+  VehicleRouteSummaryEventProps &
+  VehicleWorkInfoEventProps
 
 const VehiclePropertiesCard = ({
   vehicleOrGhost,
   onRouteVariantNameClicked,
+  onRunClick,
 }: VehiclePropertiesCardProps): React.ReactElement => {
   return (
     <div
@@ -224,7 +244,10 @@ const VehiclePropertiesCard = ({
 
       <div className="c-vehicle-properties-card__body">
         <div className="c-vehicle-properties-card__properties c-vehicle-properties-card__info-section">
-          <VehicleWorkInfo vehicleOrGhost={vehicleOrGhost} />
+          <VehicleWorkInfo
+            vehicleOrGhost={vehicleOrGhost}
+            onRunClick={onRunClick}
+          />
         </div>
 
         <div