Implement copy stop on map

cypress/e2e/editStop.cy.ts → cypress/e2e/map/editStop.cy.ts

@@ -8,24 +8,25 @@ import {
   buildStopsOnInfraLinks,
   getClonedBaseDbResources,
   testInfraLinkExternalIds,
-} from '../datasets/base';
-import { getClonedBaseStopRegistryData } from '../datasets/stopRegistry';
-import { Tag } from '../enums';
+} from '../../datasets/base';
+import { getClonedBaseStopRegistryData } from '../../datasets/stopRegistry';
+import { Tag } from '../../enums';
 import {
   BaseStopFormInfo,
   ConfirmationDialog,
   FilterPanel,
   Map,
   MapPage,
   NavigationBlockedDialog,
+  StopDetailsPage,
   StopForm,
   Toast,
   ToastType,
-} from '../pageObjects';
-import { UUID } from '../types';
-import { SupportedResources, insertToDbHelper } from '../utils';
-import { expectGraphQLCallToSucceed } from '../utils/assertions';
-import { InsertedStopRegistryIds, mapViewport } from './utils';
+} from '../../pageObjects';
+import { UUID } from '../../types';
+import { SupportedResources, insertToDbHelper } from '../../utils';
+import { expectGraphQLCallToSucceed } from '../../utils/assertions';
+import { InsertedStopRegistryIds, mapViewport } from '../utils';
 
 const testTimingPlaceLabels = {
   label1: 'Test created timing place label 1',
@@ -44,6 +45,7 @@ describe('Stop editing tests', () => {
   const confirmationDialog = new ConfirmationDialog();
   const stopForm = new StopForm();
   const toast = new Toast();
+  const stopDetailsPage = new StopDetailsPage();
 
   const baseDbResources = getClonedBaseDbResources();
   const baseStopRegistryData = getClonedBaseStopRegistryData();
@@ -160,6 +162,62 @@ describe('Stop editing tests', () => {
     },
   );
 
+  it(
+    'Should copy a stop',
+    { tags: Tag.Stops, scrollBehavior: 'bottom' },
+    () => {
+      mapFilterPanel.toggleShowStops(ReusableComponentsVehicleModeEnum.Bus);
+
+      map.waitForLoadToComplete();
+
+      map
+        .getStopByStopLabelAndPriority(stops[7].label, stops[0].priority)
+        .click({ force: true });
+
+      map.stopPopUp.getCopyButton().click();
+      confirmationDialog.getConfirmButton().click();
+      map.clickRelativePoint(63, 22);
+
+      // Check that public code is disabled and set
+      cy.getByTestId('CopyStopModal').shouldBeVisible();
+      stopForm.getPublicCodeInput().shouldBeDisabled();
+      stopForm.getPublicCodeInput().should('have.value', stops[7].label);
+      stopForm.getLatitudeInput().clearAndType('60.16654513');
+      stopForm.getLongitudeInput().clearAndType('24.93727036');
+      stopForm.getLocationFinInput().clearAndType('Kopioitu');
+      stopForm.getLocationSweInput().clearAndType('Kopierad');
+      stopForm.getVersionNameInput().clearAndType('Kopioitu versio');
+      stopForm.priorityForm.setAsTemporary();
+      cy.getByTestId('Modal::saveButton').click();
+
+      expectGraphQLCallToSucceed('@gqlInsertQuayIntoStopPlace');
+      expectGraphQLCallToSucceed('@gqlInsertStopPoint');
+      expectGraphQLCallToSucceed('@gqlUpdateInfoSpot');
+      map.waitForLoadToComplete();
+      map.stopPopUp.getLabel().shouldBeVisible();
+
+      // Open copied version
+      cy.visit(
+        `/stop-registry/stops/E2E008?observationDate=2020-03-20&priority=20`,
+      );
+
+      // Check that info spots were correctly copied
+      stopDetailsPage.page().shouldBeVisible();
+      stopDetailsPage.infoSpotsTabButton().click();
+      stopDetailsPage.infoSpots.viewCard
+        .getSectionContainers()
+        .shouldBeVisible();
+      stopDetailsPage.infoSpots.viewCard
+        .getLabel()
+        .shouldHaveText('E2E_INFO_001');
+      stopDetailsPage.infoSpots.viewCard.getNthPosterContainer(0).within(() => {
+        stopDetailsPage.infoSpots.viewCard
+          .getPosterLabel()
+          .shouldHaveText('E2E_POSTER_001');
+      });
+    },
+  );
+
   it(
     'Should edit stop info',
     { tags: Tag.Stops, scrollBehavior: 'bottom' },
@@ -343,6 +401,40 @@ describe('Stop editing tests', () => {
     );
   });
 
+  it(
+    'Should prevent copy creating an overlapping stop',
+    { tags: Tag.Stops, scrollBehavior: 'bottom' },
+    () => {
+      mapFilterPanel.toggleShowStops(ReusableComponentsVehicleModeEnum.Bus);
+
+      map.waitForLoadToComplete();
+
+      map
+        .getStopByStopLabelAndPriority(stops[7].label, stops[0].priority)
+        .click({ force: true });
+
+      map.stopPopUp.getCopyButton().click();
+      confirmationDialog.getConfirmButton().click();
+      map.clickRelativePoint(63, 22);
+
+      // Check that public code is disabled and set
+      cy.getByTestId('CopyStopModal').shouldBeVisible();
+      stopForm.getPublicCodeInput().shouldBeDisabled();
+      stopForm.getPublicCodeInput().should('have.value', stops[7].label);
+      stopForm.getLatitudeInput().clearAndType('60.16654513');
+      stopForm.getLongitudeInput().clearAndType('24.93727036');
+      stopForm.getLocationFinInput().clearAndType('Kopioitu');
+      stopForm.getLocationSweInput().clearAndType('Kopierad');
+      stopForm.getVersionNameInput().clearAndType('Kopioitu versio');
+      stopForm.priorityForm.setAsStandard();
+      cy.getByTestId('Modal::saveButton').click();
+
+      toast.expectDangerToast(
+        'Pysäkin kopiointi epäonnistui: voimassaoloaika ja prioriteetti aiheuttavat päällekkäisyyden olemassa olevan version kanssa.',
+      );
+    },
+  );
+
   it(
     'Should warn about unsaved forms',
     { tags: Tag.Stops, scrollBehavior: 'bottom' },

cypress/pageObjects/StopForm.ts

@@ -74,6 +74,10 @@ export class StopForm {
     return cy.getByTestId('StopFormComponent::addTimingPlaceButton');
   }
 
+  getVersionNameInput() {
+    return cy.getByTestId('StopFormComponent::versionName');
+  }
+
   getModal() {
     return cy.getByTestId('EditStopModal');
   }

cypress/pageObjects/StopPopUp.ts

@@ -11,6 +11,10 @@ export class StopPopUp {
     return cy.getByTestId('StopPopUp::deleteButton');
   }
 
+  getCopyButton() {
+    return cy.getByTestId('StopPopUp::copyButton');
+  }
+
   getCloseButton() {
     return cy.getByTestId('StopPopUp::closeButton');
   }

ui/src/components/forms/stop/StopForm.tsx

@@ -251,13 +251,27 @@ type StopFormProps = {
   readonly className?: string;
   readonly editing: boolean;
   readonly defaultValues: DefaultValues<StopFormState>;
-  readonly onSubmit: (changes: CreateChanges | EditChanges) => void;
-};
+} & (
+  | {
+      readonly onSubmit: (changes: CreateChanges | EditChanges) => void;
+      readonly submitState?: false | never;
+    }
+  | {
+      readonly onSubmit: (
+        changes: CreateChanges | EditChanges,
+        state: StopFormState,
+      ) => void;
+      readonly submitState: true;
+    }
+);
 
 const StopFormComponent: ForwardRefRenderFunction<
   HTMLFormElement,
   StopFormProps
-> = ({ className = '', editing, defaultValues, onSubmit }, ref) => {
+> = (
+  { className = '', editing, defaultValues, onSubmit, submitState },
+  ref,
+) => {
   const { t } = useTranslation();
 
   const methods = useForm<StopFormState>({
@@ -320,7 +334,7 @@ const StopFormComponent: ForwardRefRenderFunction<
         ? await onEdit(state)
         : await onCreate(state);
       setIsLoading(false);
-      return onSubmit(changes);
+      return submitState ? onSubmit(changes, state) : onSubmit(changes);
     } catch (err) {
       setIsLoading(false);
       return defaultErrorHandler(err as Error);

ui/src/components/forms/stop/components/StopAreaInfoSection.tsx

@@ -65,7 +65,10 @@ export const StopAreaInfoSection: FC<StopAreaInfoSectionProps> = ({
         <span className="mr-2 font-bold">{stopArea.privateCode}</span>
         <span className="mr-2">{stopArea.nameFin ?? stopArea.nameSwe}</span>
         <span className="mr-2 font-bold">
-          {`(${formatIsoDateString(stopArea.validityStart)} - ${formatIsoDateString(stopArea.validityEnd)})`}
+          {`(${formatIsoDateString(stopArea.validityStart)}`}
+          {stopArea.validityEnd
+            ? ` - ${formatIsoDateString(stopArea.validityEnd)})`
+            : ' - )'}
         </span>
         <i className="icon-open-in-new" role="presentation" />
       </Link>

ui/src/components/map/FloatingAddModeFooter.tsx

@@ -1,8 +1,9 @@
 import { FC } from 'react';
 import { useTranslation } from 'react-i18next';
-import { useAppDispatch } from '../../hooks';
+import { useAppAction, useAppDispatch } from '../../hooks';
 import {
   MapEntityEditorViewState,
+  setCopyStopIdAction,
   setRouteMetadataFormOpenAction,
 } from '../../redux';
 import { FloatingFooter } from './FloatingFooter';
@@ -21,13 +22,17 @@ export const FloatingAddModeFooter: FC<FloatingAddModeFooterProps> = ({
   const dispatch = useAppDispatch();
 
   const [mapViewState, setMapViewState] = useMapViewState();
+  const setCopyStopId = useAppAction(setCopyStopIdAction);
 
   const onCancelAddMode = () => {
     setMapViewState({
       stops: MapEntityEditorViewState.NONE,
       stopAreas: MapEntityEditorViewState.NONE,
       terminals: MapEntityEditorViewState.NONE,
     });
+
+    // Reset copy stop mode
+    setCopyStopId(undefined);
   };
 
   const onCancelDrawMode = () => {
@@ -52,6 +57,9 @@ export const FloatingAddModeFooter: FC<FloatingAddModeFooterProps> = ({
     if (mapViewState.stops === MapEntityEditorViewState.PLACE) {
       return t('map.addStop');
     }
+    if (mapViewState.stops === MapEntityEditorViewState.PLACECOPY) {
+      return t('map.copyStop');
+    }
     if (mapViewState.stopAreas === MapEntityEditorViewState.PLACE) {
       return t('map.createNewStopArea');
     }

ui/src/components/map/Map.tsx

@@ -140,6 +140,10 @@ function useOnClickMap(
       return stopsRef.current?.onCreateStop(e);
     }
 
+    if (mapStopViewState === MapEntityEditorViewState.PLACECOPY) {
+      return stopsRef.current?.onCopyStop(e);
+    }
+
     if (mapStopViewState === MapEntityEditorViewState.MOVE) {
       return stopsRef.current?.onMoveStop(e);
     }

ui/src/components/map/MapFooter.tsx

@@ -22,7 +22,9 @@ function useActiveModes() {
 
   const isInPlaceMode = some(
     mapViewState,
-    (state) => state === MapEntityEditorViewState.PLACE,
+    (state) =>
+      state === MapEntityEditorViewState.PLACE ||
+      state === MapEntityEditorViewState.PLACECOPY,
   );
 
   const isInDrawingMode = drawingMode === Mode.Draw && creatingNewRoute;

ui/src/components/map/MapPage.tsx

@@ -2,6 +2,7 @@ import { FC, useRef } from 'react';
 import { useAppAction, useNavigateBackSafely } from '../../hooks';
 import {
   MapEntityEditorViewState,
+  setCopyStopIdAction,
   setSelectedMapStopAreaIdAction,
   setSelectedStopIdAction,
   setSelectedTerminalIdAction,
@@ -26,6 +27,7 @@ export const MapPage: FC = () => {
 
   const [, setMapViewState] = useMapViewState();
   const setSelectedStopId = useAppAction(setSelectedStopIdAction);
+  const setCopyStopId = useAppAction(setCopyStopIdAction);
   const setSelectedStopAreaId = useAppAction(setSelectedMapStopAreaIdAction);
   const setSelectedTerminalId = useAppAction(setSelectedTerminalIdAction);
 
@@ -41,6 +43,7 @@ export const MapPage: FC = () => {
 
     // Also reset any active selections on exit
     setSelectedStopId(undefined);
+    setCopyStopId(undefined);
     setSelectedStopAreaId(undefined);
     setSelectedTerminalId(undefined);
 

ui/src/components/map/refTypes.ts

@@ -18,6 +18,7 @@ export type EditStoplayerRef = {
 export type StopsRef = {
   readonly onMoveStop: (e: MapLayerMouseEvent) => Promise<void>;
   readonly onCreateStop: (e: MapLayerMouseEvent) => Promise<void>;
+  readonly onCopyStop: (e: MapLayerMouseEvent) => Promise<void>;
 };
 
 export type EditStopAreaLayerRef = {

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

@@ -0,0 +1,29 @@
+import { FC } from 'react';
+import { useTranslation } from 'react-i18next';
+import { ConfirmationDialog } from '../../../uiComponents';
+
+type CopyStopConfirmationDialogProps = {
+  readonly isOpen: boolean;
+  readonly onConfirm: () => void;
+  readonly onCancel: () => void;
+  readonly className?: string;
+};
+export const CopyStopConfirmationDialog: FC<
+  CopyStopConfirmationDialogProps
+> = ({ isOpen, onConfirm, onCancel, className = '' }) => {
+  const { t } = useTranslation();
+
+  return (
+    <ConfirmationDialog
+      className={className}
+      isOpen={isOpen}
+      onCancel={onCancel}
+      onConfirm={onConfirm}
+      title={t('confirmStopCopyDialog.title')}
+      description={t('confirmStopCopyDialog.description')}
+      confirmText={t('confirmStopCopyDialog.confirmText')}
+      cancelText={t('cancel')}
+      widthClassName="w-235"
+    />
+  );
+};