Use filter to show and hide tram stops and stop areas on map

 - User story 72790
 - Add vehiclemode to stop data when fetching stops
 - Filter trams and bus stops separately with own toggle buttons
 - Remove placeholder filtering toggle buttons

Author: PasiVuohijoki

cypress/e2e/stop-registry/stopDetails.cy.ts

@@ -3077,12 +3077,17 @@ describe('Stop details', { tags: [Tag.StopRegistry] }, () => {
   });
 
   describe('latest change history', () => {
-    it('should display 5 latest change history items and support show all navigation', () => {
+    it('should display 5 latest change history items', () => {
       StopDetailsPage.visit('H2003');
       StopDetailsPage.page().shouldBeVisible();
 
       StopDetailsPage.latestChangeHistory.container().shouldBeVisible();
-      StopDetailsPage.latestChangeHistory.title().shouldBeVisible();
+      StopDetailsPage.latestChangeHistory
+        .title()
+        .shouldBeVisible()
+        .should('contain.text', 'Muutoshistoria');
+
+      StopDetailsPage.latestChangeHistory.getItems().should('have.length', 1);
 
       cy.section('Make multiple changes to create history', () => {
         // Change 1
@@ -3134,27 +3139,32 @@ describe('Stop details', { tags: [Tag.StopRegistry] }, () => {
 
         StopDetailsPage.latestChangeHistory
           .getNthItem(0)
-          .should('be.visible')
+          .should('contain.text', 'Perustiedot')
+          .and('contain.text', 'ELY-numero:')
           .and('contain.text', '9999999');
 
         StopDetailsPage.latestChangeHistory
           .getNthItem(1)
-          .should('be.visible')
+          .should('contain.text', 'Sijainti')
+          .and('contain.text', 'Postinumero:')
           .and('contain.text', '00200');
 
         StopDetailsPage.latestChangeHistory
           .getNthItem(2)
-          .should('be.visible')
+          .should('contain.text', 'Perustiedot')
+          .and('contain.text', 'Sijainti (suomi):')
           .and('contain.text', 'Uusi sijainti');
 
         StopDetailsPage.latestChangeHistory
           .getNthItem(3)
-          .should('be.visible')
+          .should('contain.text', 'Pysäkkikilvet')
+          .and('contain.text', 'Pysäkkikilpien tyyppi:')
           .and('contain.text', 'Katoskehikko');
 
         StopDetailsPage.latestChangeHistory
           .getNthItem(4)
-          .should('be.visible')
+          .should('contain.text', 'Sijainti')
+          .and('contain.text', 'Pysäkin osoite:')
           .and('contain.text', 'Mannerheimintie 1');
       });
 

cypress/pageObjects/map/MapFooter.ts

@@ -24,15 +24,8 @@ export class MapFooter {
       .and('be.enabled')
       .click();
 
-    if (vehicleMode === ReusableComponentsVehicleModeEnum.Tram) {
-      return cy
-        .getByTestId('AddStopDropdownOption::addTramStop')
-        .should('be.visible')
-        .click();
-    }
-
     return cy
-      .getByTestId('AddStopDropdownOption::addBusStop')
+      .get(`[data-vehicle-mode="${vehicleMode}"]`)
       .should('be.visible')
       .click();
   }

ui/src/components/forms/stop/utils/useFindStopAreas.ts

@@ -73,7 +73,9 @@ export function useFindStopAreas(
       compact(
         (rawAreas ?? [])
           .filter((area) =>
-            !vehicleMode ? true : parseVehicleMode(area.transportMode) === vehicleMode,
+            !vehicleMode
+              ? true
+              : parseVehicleMode(area.transportMode) === vehicleMode,
           )
           .map(parseStopFormStopAreaInfo),
       ),

ui/src/components/map/FilterPanel.tsx

@@ -26,6 +26,8 @@ type Toggle = {
 
 type IconToggle = Toggle & {
   readonly iconClassName: string;
+  readonly activeColorClassName?: string;
+  readonly inactiveColorClassName?: string;
   readonly disabled?: boolean;
   readonly tooltip: (t: TFunction) => string;
   readonly colorClassNames: {
@@ -49,14 +51,17 @@ const ToggleRow: FC<ToggleRowProps> = ({ toggles }) => {
             active,
             onToggle,
             iconClassName,
+            activeColorClassName,
+            inactiveColorClassName,
             disabled,
             testId,
             tooltip,
-            colorClassNames,
           },
           index: number,
         ) => (
           <IconToggle
+            activeColorClassName={activeColorClassName}
+            inactiveColorClassName={inactiveColorClassName}
             // We don't have proper ids to use as keys here.
             // This shouldn't matter as this array isn't dynamic.
             key={index} // eslint-disable-line react/no-array-index-key
@@ -67,56 +72,13 @@ const ToggleRow: FC<ToggleRowProps> = ({ toggles }) => {
             disabled={disabled}
             testId={testId}
             tooltip={tooltip(t)}
-            colorClassNames={colorClassNames}
           />
         ),
       )}
     </Row>
   );
 };
 
-const noop = () => null;
-// placeholder toggles of unimplemented features that can be used
-// for visual purposes.
-export const placeholderToggles: ReadonlyArray<IconToggle> = [
-  {
-    iconClassName: 'icon-train',
-    active: false,
-    onToggle: noop,
-    disabled: true,
-    testId: 'placeholder',
-    tooltip: (t) => t('vehicleModeEnum.train'),
-    colorClassNames: {
-      active: 'bg-tweaked-brand text-white',
-      inactive: 'bg-white text-tweaked-brand',
-    },
-  },
-  {
-    iconClassName: 'icon-ferry',
-    active: false,
-    onToggle: noop,
-    disabled: true,
-    testId: 'placeholder',
-    tooltip: (t) => t('vehicleModeEnum.ferry'),
-    colorClassNames: {
-      active: 'bg-tweaked-brand text-white',
-      inactive: 'bg-white text-tweaked-brand',
-    },
-  },
-  {
-    iconClassName: 'icon-metro',
-    active: false,
-    onToggle: noop,
-    disabled: true,
-    testId: 'placeholder',
-    tooltip: (t) => t('vehicleModeEnum.metro'),
-    colorClassNames: {
-      active: 'bg-tweaked-brand text-white',
-      inactive: 'bg-white text-tweaked-brand',
-    },
-  },
-];
-
 type FilterPanelProps = {
   readonly routes: ReadonlyArray<IconToggle>;
   readonly stops: ReadonlyArray<IconToggle>;

ui/src/components/map/MapFilterPanel.tsx

@@ -1,7 +1,7 @@
 import { Dispatch, FC, SetStateAction } from 'react';
 import { useAppDispatch, useAppSelector } from '../../hooks';
 import { FilterType, selectMapFilter, setStopFilterAction } from '../../redux';
-import { FilterPanel, placeholderToggles } from './FilterPanel';
+import { FilterPanel } from './FilterPanel';
 
 type MapFilterPanelProps = {
   readonly routeDisplayed: boolean;
@@ -35,8 +35,6 @@ export const MapFilterPanel: FC<MapFilterPanelProps> = ({
             inactive: 'bg-white text-tweaked-brand',
           },
         },
-        // We want to show placeholder toggles of unimplemented features for visual purposes
-        ...placeholderToggles,
       ]}
       stops={[
         {
@@ -58,6 +56,8 @@ export const MapFilterPanel: FC<MapFilterPanelProps> = ({
         },
         {
           iconClassName: 'icon-tram',
+          activeColorClassName: 'bg-hsl-tram-dark-green text-white',
+          inactiveColorClassName: 'bg-white text-hsl-tram-dark-green',
           active: stopFilters[FilterType.ShowAllTramStops],
           onToggle: (isActive: boolean) =>
             dispatch(
@@ -73,7 +73,6 @@ export const MapFilterPanel: FC<MapFilterPanelProps> = ({
             inactive: 'bg-white text-hsl-tram-dark-green',
           },
         },
-        ...placeholderToggles,
       ]}
     />
   );

ui/src/components/map/MapFooterAddStopDropdown.tsx

@@ -10,10 +10,10 @@ const testIds: Readonly<Record<string, string>> = {
 };
 
 type MapFooterAddStopDropdownProps = {
-  onAddStops: (vehicleMode: ReusableComponentsVehicleModeEnum) => void;
-  testId: string;
-  disabled?: boolean;
-  inverted?: boolean;
+  readonly onAddStops: (vehicleMode: ReusableComponentsVehicleModeEnum) => void;
+  readonly testId: string;
+  readonly disabled?: boolean;
+  readonly inverted?: boolean;
 };
 
 export const MapFooterAddStopDropdown: FC<MapFooterAddStopDropdownProps> = ({
@@ -32,13 +32,15 @@ export const MapFooterAddStopDropdown: FC<MapFooterAddStopDropdownProps> = ({
       disabledTooltip={t('dataModelRefactor.disabled')}
     >
       <SimpleDropdownMenuItem
-        testId="AddStopDropdownOption::addBusStop"
+        testId={testIds.addBusStop}
+        data-vehicle-mode={ReusableComponentsVehicleModeEnum.Bus}
         onClick={() => onAddStops(ReusableComponentsVehicleModeEnum.Bus)}
       >
         {t('map.addBusStop')}
       </SimpleDropdownMenuItem>
       <SimpleDropdownMenuItem
-        testId="AddStopDropdownOption::addTramStop"
+        testId={testIds.addTramStop}
+        data-vehicle-mode={ReusableComponentsVehicleModeEnum.Tram}
         onClick={() => onAddStops(ReusableComponentsVehicleModeEnum.Tram)}
       >
         {t('map.addTramStop')}

ui/src/components/map/stops/Stop.tsx

@@ -56,20 +56,23 @@ function determineBorderColor(
 function determineFillColor(
   asMemberStop: boolean,
   isSelected: boolean,
-  stopVehicleMode: ReusableComponentsVehicleModeEnum | undefined,
   inSelection: boolean,
+  shouldBeGray: boolean,
+  stopVehicleMode: ReusableComponentsVehicleModeEnum | undefined,
 ) {
   if (isSelected || asMemberStop || inSelection) {
     return 'white';
   }
-  switch (stopVehicleMode) {
-    case ReusableComponentsVehicleModeEnum.Bus:
-      return colors.stops.bus;
-    case ReusableComponentsVehicleModeEnum.Tram:
-      return colors.stops.tram;
-    default:
-      return colors.lightGrey;
+
+  if (shouldBeGray) {
+    return colors.lightGrey;
   }
+
+  if (stopVehicleMode) {
+    return colors.stops[stopVehicleMode] ?? 'white';
+  }
+
+  return 'white';
 }
 
 type BaseStopProps = {
@@ -82,6 +85,7 @@ type BaseStopProps = {
   readonly selected?: boolean;
   readonly testId?: string;
   readonly vehicleMode?: ReusableComponentsVehicleModeEnum;
+  readonly shouldBeGray?: boolean;
 };
 
 type ExistingStopSpecialProps = {
@@ -110,6 +114,7 @@ export const Stop: FC<StopProps> = ({
   selected = false,
   testId,
   vehicleMode,
+  shouldBeGray = false,
   onClick,
   onResolveTitle,
   stop,
@@ -130,8 +135,9 @@ export const Stop: FC<StopProps> = ({
   const iconFillColor = determineFillColor(
     asMemberStop,
     selected,
-    vehicleMode,
     inSelection,
+    shouldBeGray,
+    vehicleMode,
   );
 
   return (

ui/src/components/map/stops/Stops.tsx

@@ -39,6 +39,7 @@ import {
   useDefaultErrorHandler,
   useMapStops,
 } from './hooks';
+import { useFilterStopsByVehicleMode } from './hooks/useFilterStopsByVehicleMode';
 import { Stop } from './Stop';
 
 const testIds = {
@@ -109,8 +110,10 @@ export const StopsImpl: ForwardRefRenderFunction<StopsRef, StopsProps> = (
 
   const { setIsLoading: setIsLoadingSaveStop } = useLoader(Operation.SaveStop);
 
-  const { getStopVehicleMode, getStopHighlighted } =
+  const { getStopVehicleMode, getStopHighlighted, getStopShouldBeGray } =
     useMapStops(displayedRouteIds);
+  const filterStopsByVehicleMode =
+    useFilterStopsByVehicleMode(getStopVehicleMode);
 
   const { setLoadingState: setFetchStopsLoadingState } = useLoader(
     Operation.FetchStops,
@@ -215,10 +218,12 @@ export const StopsImpl: ForwardRefRenderFunction<StopsRef, StopsProps> = (
     (isInSearchResultMode && mapStopSelection.byResultSelection) ||
     selectedStops.includes(stop.netex_id);
 
+  const modeFilteredStops = filterStopsByVehicleMode(filteredStops);
+
   return (
     <>
       {/* Display existing stops */}
-      {filteredStops.map((item) => {
+      {modeFilteredStops.map((item) => {
         const point = mapLngLatToPoint(item.location.coordinates);
 
         return (
@@ -240,6 +245,7 @@ export const StopsImpl: ForwardRefRenderFunction<StopsRef, StopsProps> = (
                 : testIds.stopMarker(item.label, item.priority)
             }
             vehicleMode={getStopVehicleMode(item)}
+            shouldBeGray={getStopShouldBeGray(item)}
           />
         );
       })}