feat: hide open map button when already on map page (#2282)

mbta · Nov 16, 2023 · db83e0e · db83e0e
1 parent 5a7ba3a
commit db83e0e
Show file tree

Hide file tree

Showing 7 changed files with 166 additions and 30 deletions.
diff --git a/assets/src/components/app.tsx b/assets/src/components/app.tsx
@@ -22,13 +22,14 @@ import { allOpenRouteIds } from "../models/routeTab"
 import Nav from "./nav"
 import RightPanel from "./rightPanel"
 import { mapModeForUser } from "../util/mapMode"
-import { Ghost, VehicleInScheduledService } from "../realtime"
+import { Ghost, Vehicle, VehicleInScheduledService } from "../realtime"
 import MapPage from "./mapPage"
 import SearchPage from "./searchPage"
 import { OpenView, isPagePath } from "../state/pagePanelState"
 import { usePanelStateFromStateDispatchContext } from "../hooks/usePanelState"
 import PropertiesPanel from "./propertiesPanel"
 import { isGhost, isVehicle } from "../models/vehicle"
+import { TabMode } from "./propertiesPanel/tabPanels"
 
 export const AppRoutes = () => {
   useAppcues()
@@ -74,24 +75,14 @@ export const AppRoutes = () => {
             <Routes>
               <Route
                 element={
-                  <>
-                    <Outlet />
-                    <RightPanel
-                      openView={openView}
-                      propertiesPanel={
-                        selectedVehicleOrGhost &&
-                        (isVehicle(selectedVehicleOrGhost) ||
-                          isGhost(selectedVehicleOrGhost)) ? (
-                          <PropertiesPanel
-                            selectedVehicleOrGhost={selectedVehicleOrGhost}
-                            tabMode={vppTabMode ?? "status"}
-                            onChangeTabMode={setTabMode}
-                            onClosePanel={closeView}
-                          />
-                        ) : undefined
-                      }
-                    />
-                  </>
+                  <RouteElement
+                    selectedVehicleOrGhost={selectedVehicleOrGhost}
+                    openView={openView}
+                    openMapEnabled={true}
+                    vppTabMode={vppTabMode}
+                    setTabMode={setTabMode}
+                    closeView={closeView}
+                  />
                 }
               >
                 <BrowserRoute path="/" element={<LadderPage />} />
@@ -100,6 +91,19 @@ export const AppRoutes = () => {
                   element={<ShuttleMapPage />}
                 />
                 <BrowserRoute path="/settings" element={<SettingsPage />} />
+              </Route>
+              <Route
+                element={
+                  <RouteElement
+                    selectedVehicleOrGhost={selectedVehicleOrGhost}
+                    openView={openView}
+                    openMapEnabled={false}
+                    vppTabMode={vppTabMode}
+                    setTabMode={setTabMode}
+                    closeView={closeView}
+                  />
+                }
+              >
                 <BrowserRoute path={mapMode.path} element={mapElement} />
               </Route>
             </Routes>
@@ -111,6 +115,42 @@ export const AppRoutes = () => {
   )
 }
 
+const RouteElement = ({
+  openMapEnabled,
+  selectedVehicleOrGhost,
+  openView,
+  vppTabMode,
+  setTabMode,
+  closeView,
+}: {
+  openMapEnabled: boolean
+  selectedVehicleOrGhost?: Vehicle | Ghost | null
+  openView: OpenView
+  vppTabMode?: TabMode
+  setTabMode: (mode: TabMode) => void
+  closeView: () => void
+}) => (
+  <>
+    <Outlet />
+    <RightPanel
+      openView={openView}
+      propertiesPanel={
+        selectedVehicleOrGhost &&
+        (isVehicle(selectedVehicleOrGhost) ||
+          isGhost(selectedVehicleOrGhost)) ? (
+          <PropertiesPanel
+            selectedVehicleOrGhost={selectedVehicleOrGhost}
+            tabMode={vppTabMode ?? "status"}
+            onChangeTabMode={setTabMode}
+            onClosePanel={closeView}
+            openMapEnabled={openMapEnabled}
+          />
+        ) : undefined
+      }
+    />
+  </>
+)
+
 const App = (): ReactElement<HTMLDivElement> => {
   return (
     <BrowserRouter>

diff --git a/assets/src/components/propertiesPanel.tsx b/assets/src/components/propertiesPanel.tsx
@@ -10,6 +10,7 @@ import { TabMode } from "./propertiesPanel/tabPanels"
 
 interface Props extends IndividualPropertiesPanelProps {
   selectedVehicleOrGhost: Vehicle | Ghost
+  openMapEnabled: boolean
 }
 
 export type TabModeProps = {
@@ -38,6 +39,7 @@ const PropertiesPanel = ({
   tabMode,
   onChangeTabMode,
   onClosePanel,
+  openMapEnabled,
 }: Props) => {
   const { socket } = useSocket()
   const liveVehicle = useVehicleForId(socket, selectedVehicleOrGhost.id)
@@ -68,6 +70,7 @@ const PropertiesPanel = ({
             tabMode={tabMode}
             onChangeTabMode={onChangeTabMode}
             onClosePanel={onClosePanel}
+            openMapEnabled={openMapEnabled}
           />
         ) : (
           <GhostPropertiesPanel

diff --git a/assets/src/components/propertiesPanel/miniMap.tsx b/assets/src/components/propertiesPanel/miniMap.tsx
@@ -47,10 +47,12 @@ const MiniMap = ({
   vehicle,
   shapes,
   routeVehicles,
+  openMapEnabled,
 }: {
   vehicle: Vehicle
   shapes: Shape[]
   routeVehicles: VehicleInScheduledService[]
+  openMapEnabled: boolean
 }) => {
   const stations: Stop[] | null = useStations()
 
@@ -65,7 +67,11 @@ const MiniMap = ({
       stations={stations}
       allowFullscreen={!inMapBetaGroup}
     >
-      <>{inMapBetaGroup && <SearchMapLink vehicleId={vehicle.id} />}</>
+      <>
+        {inMapBetaGroup && openMapEnabled && (
+          <SearchMapLink vehicleId={vehicle.id} />
+        )}
+      </>
     </MapFollowingPrimaryVehicles>
   )
 }

diff --git a/assets/src/components/propertiesPanel/vehiclePropertiesPanel.tsx b/assets/src/components/propertiesPanel/vehiclePropertiesPanel.tsx
@@ -28,6 +28,7 @@ import { DirectionsButton } from "../directionsButton"
 
 type Props = {
   selectedVehicle: Vehicle
+  openMapEnabled: boolean
 } & IndividualPropertiesPanelProps
 
 const InvalidBanner = () => (
@@ -72,7 +73,13 @@ const useRouteVehicles = (
     .filter((v) => v.id !== primaryVehicleId)
 }
 
-const Location = ({ vehicle }: { vehicle: Vehicle }) => {
+const Location = ({
+  vehicle,
+  openMapEnabled,
+}: {
+  vehicle: Vehicle
+  openMapEnabled: boolean
+}) => {
   const routeVehicles: VehicleInScheduledService[] = useRouteVehicles(
     vehicle.routeId,
     vehicle.id
@@ -113,6 +120,7 @@ const Location = ({ vehicle }: { vehicle: Vehicle }) => {
           vehicle={vehicle}
           routeVehicles={routeVehicles}
           shapes={shapes}
+          openMapEnabled={openMapEnabled}
         />
       </div>
     </div>
@@ -163,7 +171,13 @@ const inDebugMode = (): boolean =>
 const shouldShowDataDiscrepancies = ({ dataDiscrepancies }: Vehicle): boolean =>
   inDebugMode() && dataDiscrepancies.length > 0
 
-const StatusContent = ({ selectedVehicle }: { selectedVehicle: Vehicle }) => (
+const StatusContent = ({
+  selectedVehicle,
+  openMapEnabled,
+}: {
+  selectedVehicle: Vehicle
+  openMapEnabled: boolean
+}) => (
   <>
     <div className="c-vehicle-properties-panel__notes">
       {selectedVehicle.isOffCourse && <InvalidBanner />}
@@ -177,7 +191,7 @@ const StatusContent = ({ selectedVehicle }: { selectedVehicle: Vehicle }) => (
 
     <CrowdingDiagram crowding={selectedVehicle.crowding} />
 
-    <Location vehicle={selectedVehicle} />
+    <Location vehicle={selectedVehicle} openMapEnabled={openMapEnabled} />
 
     {shouldShowDataDiscrepancies(selectedVehicle) && (
       <DataDiscrepancies vehicle={selectedVehicle} />
@@ -190,6 +204,7 @@ const VehiclePropertiesPanel = ({
   tabMode,
   onChangeTabMode,
   onClosePanel,
+  openMapEnabled,
 }: Props) => {
   return (
     <div className="c-vehicle-properties-panel">
@@ -210,11 +225,19 @@ const VehiclePropertiesPanel = ({
       {isVehicleInScheduledService(selectedVehicle) ? (
         <TabPanels
           vehicleOrGhost={selectedVehicle}
-          statusContent={<StatusContent selectedVehicle={selectedVehicle} />}
+          statusContent={
+            <StatusContent
+              selectedVehicle={selectedVehicle}
+              openMapEnabled={openMapEnabled}
+            />
+          }
           mode={tabMode}
         />
       ) : (
-        <StatusContent selectedVehicle={selectedVehicle} />
+        <StatusContent
+          selectedVehicle={selectedVehicle}
+          openMapEnabled={openMapEnabled}
+        />
       )}
     </div>
   )

diff --git a/assets/tests/components/propertiesPanel.test.tsx b/assets/tests/components/propertiesPanel.test.tsx
@@ -142,6 +142,7 @@ const PropertiesPanelWrapper: React.FC<{
         selectedVehicleOrGhost={vehicleOrGhost}
         onClosePanel={closePanel || jest.fn()}
         initialTab={initialTab}
+        openMapEnabled={true}
       />
     </RoutesProvider>
   )

diff --git a/assets/tests/components/propertiesPanel/miniMap.test.tsx b/assets/tests/components/propertiesPanel/miniMap.test.tsx
@@ -70,7 +70,12 @@ describe("MiniMap", () => {
       render(
         <MemoryRouter initialEntries={["/"]}>
           <StateDispatchProvider state={initialState} dispatch={mockDispatch}>
-            <MiniMap vehicle={vehicle} routeVehicles={[]} shapes={[]} />
+            <MiniMap
+              vehicle={vehicle}
+              routeVehicles={[]}
+              shapes={[]}
+              openMapEnabled={true}
+            />
           </StateDispatchProvider>
         </MemoryRouter>
       )
@@ -88,10 +93,35 @@ describe("MiniMap", () => {
       )
     })
 
+    test("Map does not include link to open vehicle in search map page when disabled by prop", async () => {
+      const mockDispatch = jest.fn()
+
+      render(
+        <MemoryRouter initialEntries={["/"]}>
+          <StateDispatchProvider state={initialState} dispatch={mockDispatch}>
+            <MiniMap
+              vehicle={vehicle}
+              routeVehicles={[]}
+              shapes={[]}
+              openMapEnabled={false}
+            />
+          </StateDispatchProvider>
+        </MemoryRouter>
+      )
+      expect(
+        screen.queryByRole("link", { name: "Open Map" })
+      ).not.toBeInTheDocument()
+    })
+
     test("Map doesn't include fullscreen button", () => {
       render(
         <MemoryRouter initialEntries={["/"]}>
-          <MiniMap vehicle={vehicle} routeVehicles={[]} shapes={[]} />
+          <MiniMap
+            vehicle={vehicle}
+            routeVehicles={[]}
+            shapes={[]}
+            openMapEnabled={true}
+          />
         </MemoryRouter>
       )
       expect(
@@ -107,7 +137,12 @@ describe("MiniMap", () => {
     test("Map does not include link to open vehicle in search map page", () => {
       render(
         <MemoryRouter initialEntries={["/"]}>
-          <MiniMap vehicle={vehicle} routeVehicles={[]} shapes={[]} />
+          <MiniMap
+            vehicle={vehicle}
+            routeVehicles={[]}
+            shapes={[]}
+            openMapEnabled={true}
+          />
         </MemoryRouter>
       )
       expect(
@@ -118,7 +153,12 @@ describe("MiniMap", () => {
     test("Map does include fullscreen button", () => {
       render(
         <MemoryRouter initialEntries={["/"]}>
-          <MiniMap vehicle={vehicle} routeVehicles={[]} shapes={[]} />
+          <MiniMap
+            vehicle={vehicle}
+            routeVehicles={[]}
+            shapes={[]}
+            openMapEnabled={true}
+          />
         </MemoryRouter>
       )
       expect(
@@ -129,7 +169,12 @@ describe("MiniMap", () => {
     test("Doesn't have layers control", () => {
       render(
         <MemoryRouter initialEntries={["/"]}>
-          <MiniMap vehicle={vehicle} routeVehicles={[]} shapes={[]} />
+          <MiniMap
+            vehicle={vehicle}
+            routeVehicles={[]}
+            shapes={[]}
+            openMapEnabled={true}
+          />
         </MemoryRouter>
       )
       expect(layersControlButton.query()).toBeNull()