Line: Ensure VehicleMode and LineType match

Author: Huulivoide

cypress/e2e/lines.cy.ts

@@ -133,5 +133,16 @@ describe('Lines', { tags: [Tag.Lines] }, () => {
       ObservationDateControl.setObservationDate(withinValidityPeriod);
       cy.getByTestId('LineMissingBox::notValidText').should('not.exist');
     });
+
+    it('should error on invalid vehicle mode and line type combination', () => {
+      LineDetailsPage.getEditLineButton().click();
+
+      LineForm.selectVehicleType('Raitiovaunu');
+
+      LineForm.save();
+      cy.getByTestId('ValidationError::message::typeOfLine').shouldHaveText(
+        'Linjan tyyppi ei vastaa sen kulkumuotoa',
+      );
+    });
   });
 });

cypress/pageObjects/forms/LineForm.ts

@@ -59,6 +59,7 @@ export class LineForm {
   }
 
   static save() {
+    cy.getByTestId('LineForm::saveButton').scrollIntoView();
     return cy.getByTestId('LineForm::saveButton').click();
   }
 

ui/src/components/forms/line/LineForm.tsx

@@ -19,6 +19,7 @@ import {
   FormState as LinePropertiesFormState,
   schema as linePropertiesFormSchema,
 } from './LinePropertiesForm';
+import { lineTypesByVehicleMode } from './LineTypeDropdown';
 
 export type FormState = LinePropertiesFormState & ChangeValidityFormState;
 
@@ -27,9 +28,21 @@ const testIds = {
   cancelButton: 'LineForm::cancelButton',
 };
 
+const INVALID_LINE_TYPE = 'invalidLineType';
+
 const formSchema = linePropertiesFormSchema
   .merge(changeValidityFormSaveFormSchema)
-  .superRefine(refineValidityPeriodSchema);
+  .superRefine(refineValidityPeriodSchema)
+  .superRefine((line, ctx) => {
+    const validLineTypes = lineTypesByVehicleMode[line.primaryVehicleMode];
+    if (!validLineTypes.includes(line.typeOfLine)) {
+      ctx.addIssue({
+        code: 'custom',
+        message: INVALID_LINE_TYPE,
+        path: ['typeOfLine'],
+      });
+    }
+  });
 
 type LineFormProps = {
   readonly defaultValues: Partial<FormState>;

ui/src/components/forms/line/LinePropertiesForm.tsx

@@ -56,16 +56,15 @@ export const LinePropertiesForm: FC<LinePropertiesFormProps> = ({
   editing,
 }) => {
   const { t } = useTranslation();
-  const { getValues } = useFormContext<FormState>();
+  const { getValues, watch } = useFormContext<FormState>();
 
   // if either own of {Swedish name, Finnish short name, Swedish short name} are not defined, open
   // the "name versions" section by default
-  const defaultShowNameVersions =
-    !getValues('name.sv_FI') ||
-    !getValues('shortName.fi_FI') ||
-    !getValues('shortName.sv_FI');
   const [showNameVersions, setShowNameVersions] = useState<boolean>(
-    defaultShowNameVersions,
+    () =>
+      !getValues('name.sv_FI') ||
+      !getValues('shortName.fi_FI') ||
+      !getValues('shortName.sv_FI'),
   );
 
   return (
@@ -175,6 +174,7 @@ export const LinePropertiesForm: FC<LinePropertiesFormProps> = ({
               <LineTypeDropdown
                 // eslint-disable-next-line react/jsx-props-no-spreading
                 {...props}
+                vehicleMode={watch('primaryVehicleMode')}
               />
             )}
           />

ui/src/components/forms/line/LineTypeDropdown.tsx

@@ -1,21 +1,72 @@
+import without from 'lodash/without';
 import { FC } from 'react';
 import { useTranslation } from 'react-i18next';
-import { RouteTypeOfLineEnum } from '../../../generated/graphql';
+import {
+  ReusableComponentsVehicleModeEnum,
+  RouteTypeOfLineEnum,
+} from '../../../generated/graphql';
 import { mapLineTypeToUiName } from '../../../i18n/uiNameMappings';
 import { FormInputProps } from '../../../uiComponents';
 import { AllOptionEnum } from '../../../utils';
 import { EnumDropdown } from '../common';
 
+type LineTypesByVehicleMode = Record<
+  ReusableComponentsVehicleModeEnum,
+  ReadonlyArray<RouteTypeOfLineEnum>
+>;
+
+export const lineTypesByVehicleMode: Readonly<LineTypesByVehicleMode> = {
+  [ReusableComponentsVehicleModeEnum.Bus]: [
+    RouteTypeOfLineEnum.ExpressBusService,
+    RouteTypeOfLineEnum.DemandAndResponseBusService,
+    RouteTypeOfLineEnum.RegionalBusService,
+    RouteTypeOfLineEnum.StoppingBusService,
+  ],
+
+  [ReusableComponentsVehicleModeEnum.Ferry]: [RouteTypeOfLineEnum.FerryService],
+
+  [ReusableComponentsVehicleModeEnum.Train]: [
+    RouteTypeOfLineEnum.RegionalRailService,
+    RouteTypeOfLineEnum.SuburbanRailway,
+  ],
+
+  [ReusableComponentsVehicleModeEnum.Tram]: [
+    RouteTypeOfLineEnum.CityTramService,
+    RouteTypeOfLineEnum.RegionalTramService,
+  ],
+
+  [ReusableComponentsVehicleModeEnum.Metro]: [RouteTypeOfLineEnum.MetroService],
+};
+
+const allRouteTypes: ReadonlyArray<RouteTypeOfLineEnum> =
+  Object.values(RouteTypeOfLineEnum);
+const disabledRouteTypesByVehicleMode: Readonly<LineTypesByVehicleMode> =
+  Object.values(ReusableComponentsVehicleModeEnum).reduce(
+    (disabled, vehicleMode) => ({
+      ...disabled,
+      [vehicleMode]: without(
+        allRouteTypes,
+        ...lineTypesByVehicleMode[vehicleMode],
+      ),
+    }),
+    {} as Record<
+      ReusableComponentsVehicleModeEnum,
+      ReadonlyArray<RouteTypeOfLineEnum>
+    >,
+  );
+
 type LineTypeDropdownProps = FormInputProps & {
   readonly id?: string;
   readonly testId?: string;
   readonly includeAllOption?: boolean;
+  readonly vehicleMode?: ReusableComponentsVehicleModeEnum;
 };
 
 export const LineTypeDropdown: FC<LineTypeDropdownProps> = ({
   id,
   testId,
   includeAllOption,
+  vehicleMode,
   ...formInputProps
 }) => {
   const { t } = useTranslation();
@@ -28,6 +79,9 @@ export const LineTypeDropdown: FC<LineTypeDropdownProps> = ({
       placeholder={t(($) => $.lines.chooseTypeOfLine)}
       uiNameMapper={(value) => mapLineTypeToUiName(t, value)}
       includeAllOption={!!includeAllOption}
+      disabledOptions={
+        vehicleMode && disabledRouteTypesByVehicleMode[vehicleMode]
+      }
       // eslint-disable-next-line react/jsx-props-no-spreading
       {...formInputProps}
     />

ui/src/locales/en-US/common.json

@@ -1140,7 +1140,8 @@
     "invalidValidityEndDate": "Invalid validity end date",
     "invalidValidityStartDate": "Invalid validity start date",
     "validityEndDateBeforeStartDate": "Validity end date cannot be before start date",
-    "nameValueTooLong": "Name has over 21 characters."
+    "nameValueTooLong": "Name has over 21 characters.",
+    "invalidLineType": "Line type must match with it's vehicle mode"
   },
   "errors": {
     "deleteFailed": "Deletion failed",

ui/src/locales/fi-FI/common.json

@@ -1140,7 +1140,8 @@
     "invalidValidityEndDate": "Päättymispäivämäärä on virheellinen",
     "invalidValidityStartDate": "Alkupäivämäärä on virheellinen",
     "validityEndDateBeforeStartDate": "Päättymispäivämäärä ei voi olla ennen alkamispäivämäärää",
-    "nameValueTooLong": "Nimessä on yli 21 merkkiä."
+    "nameValueTooLong": "Nimessä on yli 21 merkkiä.",
+    "invalidLineType": "Linjan tyyppi ei vastaa sen kulkumuotoa"
   },
   "errors": {
     "deleteFailed": "Poistaminen epäonnistui",