Get update history data for quays

Author: suvikankare

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

@@ -526,6 +526,12 @@ describe('Stop details', () => {
         .shouldHaveText('Pohjoisesplanadi|Norraesplanaden');
       stopDetailsPage.validityPeriod().should('contain', '20.3.2020-31.5.2050');
 
+      stopDetailsPage
+        .changeHistoryLink()
+        .shouldBeVisible()
+        .invoke('text')
+        .should('match', /\d{2}\.\d{2}\.\d{4}\s+\d{2}:\d{2}/); // Matches format: DD.MM.YYYY HH:mm
+
       stopDetailsPage.headerSummaryRow.lineCount().should('have.text', 0);
 
       stopDetailsPage.basicDetailsTabPanel().should('be.visible');

cypress/pageObjects/stop-registry/StopDetailsPage.ts

@@ -58,6 +58,10 @@ export class StopDetailsPage {
     return cy.getByTestId('StopDetailsPage::editStopValidityButton');
   }
 
+  changeHistoryLink() {
+    return cy.getByTestId('StopDetailsPage::changeHistoryLink');
+  }
+
   basicDetailsTabButton() {
     return cy.getByTestId('StopDetailsPage::basicDetailsTabButton');
   }

ui/src/components/stop-registry/stops/queries/useGetQuayChangeHistory.ts

@@ -0,0 +1,68 @@
+import { gql } from '@apollo/client';
+import {
+  StopsDatabaseQuayBoolExp,
+  useGetLatestQuayChangeQuery,
+  useGetQuayChangeHistoryQuery,
+} from '../../../../generated/graphql';
+
+const GQL_GET_QUAY_CHANGE_HISTORY = gql`
+  query GetQuayChangeHistory($where: stops_database_quay_bool_exp) {
+    stopsDb: stops_database {
+      quay: stops_database_quay(where: $where, order_by: { version: desc }) {
+        changed
+        changed_by
+        public_code
+        version
+        version_comment
+      }
+    }
+  }
+`;
+
+const GQL_GET_LATEST_QUAY_CHANGE = gql`
+  query GetLatestQuayChange($where: stops_database_quay_bool_exp) {
+    stopsDb: stops_database {
+      quay: stops_database_quay(
+        where: $where
+        order_by: { version: desc }
+        limit: 1
+      ) {
+        changed
+        changed_by
+        public_code
+      }
+    }
+  }
+`;
+
+export const useGetQuayChangeHistory = (where: StopsDatabaseQuayBoolExp) => {
+  const { data, ...rest } = useGetQuayChangeHistoryQuery({
+    variables: { where },
+  });
+
+  const quayVersions = data?.stopsDb?.quay ?? [];
+
+  return {
+    ...rest,
+    quayVersions,
+  };
+};
+
+export const useGetLatestQuayChange = (where: StopsDatabaseQuayBoolExp) => {
+  const { data, ...rest } = useGetLatestQuayChangeQuery({
+    variables: { where },
+  });
+
+  const latestQuay = data?.stopsDb?.quay?.[0];
+
+  const getLatestQuayChangeData = () => ({
+    changed: latestQuay?.changed ?? null,
+    changedBy: latestQuay?.changed_by ?? null,
+    publicCode: latestQuay?.public_code ?? null,
+  });
+
+  return {
+    ...rest,
+    getLatestQuayChangeData,
+  };
+};

ui/src/components/stop-registry/stops/stop-details/StopDetailsPage.tsx

@@ -1,9 +1,11 @@
 import { FC, useContext, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { MdWarning } from 'react-icons/md';
+import { Link } from 'react-router';
 import { useRequiredParams } from '../../../../hooks';
 import { Container, Visible } from '../../../../layoutComponents';
-import { mapToShortDate } from '../../../../time';
+import { Path, routeDetails } from '../../../../router/routeDetails';
+import { mapToShortDate, mapUTCToDateTime } from '../../../../time';
 import { LoadingWrapper } from '../../../../uiComponents/LoadingWrapper';
 import { navigationBlockerContext } from '../../../forms/common/NavigationBlocker';
 import { BasicDetailsSection } from './basic-details';
@@ -33,6 +35,7 @@ const testIds = {
   technicalFeaturesTabPanel: 'StopDetailsPage::technicalFeaturesTabPanel',
   infoSpotsTabPanel: 'StopDetailsPage::infoSpotsTabPanel',
   loadingStopDetails: 'StopDetailsPage::loadingStopDetails',
+  changeHistoryLink: 'StopDetailsPage::changeHistoryLink',
 };
 
 export const StopDetailsPage: FC = () => {
@@ -55,16 +58,27 @@ export const StopDetailsPage: FC = () => {
       <StopDetailsVersion label={label} />
       <hr className="my-4" />
       <div className="my-4 flex items-center gap-2">
-        <h2>{t('stopDetails.stopDetails')}</h2>
-        <div
-          title={t('accessibility:stops.validityPeriod')}
-          data-testid={testIds.validityPeriod}
-        >
-          {mapToShortDate(stopDetails?.validity_start)}
-          <span className="mx-1">-</span>
-          {mapToShortDate(stopDetails?.validity_end)}
+        <div className="my-4 flex items-center gap-2">
+          <h2>{t('stopDetails.stopDetails')}</h2>
+          <div
+            title={t('accessibility:stops.validityPeriod')}
+            data-testid={testIds.validityPeriod}
+          >
+            {mapToShortDate(stopDetails?.validity_start)}
+            <span className="mx-1">-</span>
+            {mapToShortDate(stopDetails?.validity_end)}
+          </div>
+          <EditStopValidityButton stop={stopDetails} />
         </div>
-        <EditStopValidityButton stop={stopDetails} />
+        <Link
+          to={routeDetails[Path.stopDetails].getLink(label)}
+          className="ml-auto flex items-center text-base text-tweaked-brand hover:underline"
+          data-testid={testIds.changeHistoryLink}
+        >
+          {mapUTCToDateTime(stopDetails?.quay?.changed)} |{' '}
+          {stopDetails?.quay?.changedByUserName ?? 'HSL'}{' '}
+          <i className="icon-history text-xl" aria-hidden />
+        </Link>
       </div>
       <DetailTabSelector
         className="mb-3"

ui/src/components/stop-registry/stops/stop-details/useGetStopDetails.ts

@@ -15,6 +15,7 @@ import {
   useObservationDateQueryParam,
   useUrlQuery,
 } from '../../../../hooks/urlQuery';
+import { useGetUserNames } from '../../../../hooks/useGetUserNames';
 import { useRequiredParams } from '../../../../hooks/useRequiredParams';
 import {
   EnrichedStopPlace,
@@ -31,6 +32,7 @@ import {
   getStopPlacesFromQueryResult,
 } from '../../../../utils';
 import { mapToEnrichedQuay } from '../../utils';
+import { useGetLatestQuayChange } from '../queries/useGetQuayChangeHistory';
 
 const GQL_SCHEDULED_STOP_POINT_DETAIL_FIELDS = gql`
   fragment scheduled_stop_point_detail_fields on service_pattern_scheduled_stop_point {
@@ -367,6 +369,12 @@ const getStopDetails = (
   observationDateTs: number,
   priority: number,
   label: string,
+  getUserNameById: (userId: string | null | undefined) => string | null,
+  getQuayChangeData: () => {
+    changed: string | null;
+    changedBy: string | null;
+    publicCode: string | null;
+  },
 ): StopWithDetails | null => {
   const stopPlaceResults = data?.stopsDb?.newestVersion ?? [];
 
@@ -397,13 +405,18 @@ const getStopDetails = (
     return null;
   }
 
+  const quayChangeData = getQuayChangeData();
+  const changedByUserName = getUserNameById(quayChangeData.changedBy);
+
   return {
     ...result.stopPoint,
     location: getGeometryPoint(result.stopPoint.measured_location),
     stop_place: getEnrichedStopPlace(result.stopPlace),
     quay: mapToEnrichedQuay(
       result.selectedQuay,
       result.stopPlace?.accessibilityAssessment,
+      quayChangeData.changed,
+      changedByUserName,
     ),
   };
 };
@@ -426,40 +439,77 @@ export const useGetStopDetails = () => {
   const { observationDate } = useObservationDateQueryParam();
   const { queryParams } = useUrlQuery();
   const priority = Number(queryParams.priority);
+  const { getUserNameById } = useGetUserNames();
 
   const where = getWhereCondition(label);
   const { data, ...rest } = useGetStopDetailsQuery({ variables: { where } });
 
+  const { getLatestQuayChangeData } = useGetLatestQuayChange({
+    public_code: { _eq: label },
+  });
+
   const observationDateTs = observationDate.valueOf();
   const stopDetails = useMemo(
-    () => getStopDetails(data, observationDateTs, priority, label),
-    [data, observationDateTs, priority, label],
+    () =>
+      getStopDetails(
+        data,
+        observationDateTs,
+        priority,
+        label,
+        getUserNameById,
+        getLatestQuayChangeData,
+      ),
+    [
+      data,
+      observationDateTs,
+      priority,
+      label,
+      getUserNameById,
+      getLatestQuayChangeData,
+    ],
   );
 
   return { ...rest, stopDetails };
 };
 
 export const useGetStopDetailsLazy = () => {
   const [getStopDetailsLazy] = useGetStopDetailsLazyQuery();
+  const { getUserNameById } = useGetUserNames();
 
   return useCallback(
-    async (label: string, observationDate: DateTime, priority: number) => {
+    async (
+      label: string,
+      observationDate: DateTime,
+      priority: number,
+      getQuayChangeData?: () => {
+        changed: string | null;
+        changedBy: string | null;
+        publicCode: string | null;
+      },
+    ) => {
       const where = getWhereCondition(label);
       const { data, ...rest } = await getStopDetailsLazy({
         variables: { where },
       });
 
       const observationDateTs = observationDate.valueOf();
+      const defaultChangeData = () => ({
+        changed: null,
+        changedBy: null,
+        publicCode: null,
+      });
       const stopDetails = getStopDetails(
         data,
         observationDateTs,
         priority,
         label,
+        getUserNameById,
+        getQuayChangeData ?? defaultChangeData,
       );
 
       return { ...rest, stopDetails };
     },
-    [getStopDetailsLazy],
+    [getStopDetailsLazy, getUserNameById],
   );
 };
 

ui/src/components/stop-registry/utils/mapToEnrichedQuay.ts

@@ -29,6 +29,8 @@ export function mapToEnrichedQuay(
     | AccessibilityAssessmentDetailsFragment
     | null
     | undefined,
+  changed: string | null,
+  changedByUserName: string | null,
 ): EnrichedQuay | null {
   if (!quay) {
     return null;
@@ -37,6 +39,8 @@ export function mapToEnrichedQuay(
   return {
     ...quay,
     ...getQuayDetailsForEnrichment(quay, accessibilityAssessment),
+    changed,
+    changedByUserName,
     infoSpots: sortInfoSpots(quay.infoSpots).map((infoSpot) => ({
       ...infoSpot,
       poster: sortPosters(infoSpot.poster),