Get update history data for stop areas

Author: suvikankare

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

@@ -217,6 +217,12 @@ describe('Stop area details', () => {
       .getValidityPeriod()
       .shouldHaveText(validity);
 
+    stopAreaDetailsPage.versioningRow
+      .getChangeHistoryLink()
+      .shouldBeVisible()
+      .invoke('text')
+      .should('match', /\d{2}\.\d{2}\.\d{4}\s+\d{2}:\d{2}/); // Matches format: DD.MM.YYYY HH:mm
+
     const { details } = stopAreaDetailsPage;
     details.getName().shouldHaveText(expected.name);
     details.getNameSwe().shouldHaveText(expected.nameSwe);

cypress/pageObjects/stop-registry/stop-area-details/StopAreaVersioningRow.ts

@@ -1,4 +1,7 @@
 export class StopAreaVersioningRow {
   getValidityPeriod = () =>
     cy.getByTestId('StopAreaVersioningRow::validityPeriod');
+
+  getChangeHistoryLink = () =>
+    cy.getByTestId('StopAreaVersioningRow::changeHistoryLink');
 }

ui/src/components/forms/stop-area/useUpsertStopArea.ts

@@ -130,7 +130,7 @@ export const useUpsertStopArea = () => {
   const tryHandleApolloError = useStopAreaDetailsApolloErrorHandler();
   const [upsertStopAreaMutation] = useUpsertStopAreaMutation({
     awaitRefetchQueries: true,
-    refetchQueries: ['GetStopAreasByLocation'],
+    refetchQueries: ['GetStopAreasByLocation', 'GetLatestStopPlaceChange'],
   });
 
   /**

ui/src/components/stop-registry/stop-areas/stop-area-details/components/StopAreaVersioningRow.tsx

@@ -1,11 +1,14 @@
 import { FC } from 'react';
 import { useTranslation } from 'react-i18next';
+import { Link } from 'react-router';
 import { twMerge } from 'tailwind-merge';
-import { mapToShortDate } from '../../../../../time';
+import { Path, routeDetails } from '../../../../../router/routeDetails';
+import { mapToShortDate, mapUTCToDateTime } from '../../../../../time';
 import { StopAreaComponentProps } from '../types';
 
 const testIds = {
   validityPeriod: 'StopAreaVersioningRow::validityPeriod',
+  changeHistoryLink: 'StopAreaVersioningRow::changeHistoryLink',
 };
 
 export const StopAreaVersioningRow: FC<StopAreaComponentProps> = ({
@@ -15,18 +18,26 @@ export const StopAreaVersioningRow: FC<StopAreaComponentProps> = ({
   const { t } = useTranslation();
 
   return (
-    <div className={twMerge('flex items-center', className)}>
+    <div className={twMerge('my-4 flex items-center gap-2', className)}>
       <h2>{t('stopAreaDetails.title')}</h2>
 
       <div
-        className="ml-4"
         title={t('accessibility:stops.validityPeriod')}
         data-testid={testIds.validityPeriod}
       >
         {mapToShortDate(area.validityStart)}
         <span className="mx-1">-</span>
         {mapToShortDate(area.validityEnd)}
       </div>
+
+      <Link
+        to={routeDetails[Path.stopAreaDetails].getLink(area.privateCode?.value)}
+        className="ml-auto flex items-center text-base text-tweaked-brand hover:underline"
+        data-testid={testIds.changeHistoryLink}
+      >
+        {mapUTCToDateTime(area.changed)} | {area.changedByUserName ?? 'HSL'}{' '}
+        <i className="icon-history text-xl" aria-hidden />
+      </Link>
     </div>
   );
 };

ui/src/components/stop-registry/stop-areas/stop-area-details/hooks/useGetStopPlaceChangeHistory.ts

@@ -0,0 +1,73 @@
+import { gql } from '@apollo/client';
+import {
+  StopsDatabaseStopPlaceBoolExp,
+  useGetLatestStopPlaceChangeQuery,
+  useGetStopPlaceChangeHistoryQuery,
+} from '../../../../../generated/graphql';
+
+const GQL_GET_STOP_PLACE_CHANGE_HISTORY = gql`
+  query GetStopPlaceChangeHistory($where: stops_database_stop_place_bool_exp!) {
+    stopsDb: stops_database {
+      stopPlace: stops_database_stop_place(
+        where: $where
+        order_by: { version: desc }
+      ) {
+        changed
+        changed_by
+        private_code_value
+        netex_id
+        version
+        version_comment
+      }
+    }
+  }
+`;
+
+const GQL_GET_LATEST_STOP_PLACE_CHANGE = gql`
+  query GetLatestStopPlaceChange($where: stops_database_stop_place_bool_exp!) {
+    stopsDb: stops_database {
+      stopPlace: stops_database_stop_place(
+        where: $where
+        order_by: { version: desc }
+        limit: 1
+      ) {
+        changed
+        changed_by
+        private_code_value
+        netex_id
+      }
+    }
+  }
+`;
+
+export function useGetStopPlaceChangeHistory(
+  where: StopsDatabaseStopPlaceBoolExp,
+) {
+  const { data, ...rest } = useGetStopPlaceChangeHistoryQuery({
+    variables: { where },
+  });
+
+  const stopPlaceVersions = data?.stopsDb?.stopPlace ?? [];
+
+  return {
+    ...rest,
+    stopPlaceVersions,
+  };
+}
+
+export function useGetLatestStopPlaceChange(
+  where: StopsDatabaseStopPlaceBoolExp,
+) {
+  const { data, ...rest } = useGetLatestStopPlaceChangeQuery({
+    variables: { where },
+  });
+
+  const latestStopPlace = data?.stopsDb?.stopPlace?.[0];
+
+  const latestStopPlaceChangeData = {
+    changed: latestStopPlace?.changed ?? null,
+    changedBy: latestStopPlace?.changed_by ?? null,
+  };
+
+  return { ...rest, latestStopPlaceChangeData };
+}

ui/src/components/stop-registry/stop-areas/stop-area-details/useGetStopAreaDetails.ts

@@ -7,6 +7,7 @@ import {
   useGetStopPlaceDetailsQuery,
 } from '../../../../generated/graphql';
 import {
+  useGetUserNames,
   useObservationDateQueryParam,
   useRequiredParams,
 } from '../../../../hooks';
@@ -15,6 +16,7 @@ import {
   getStopPlaceDetailsForEnrichment,
   getStopPlacesFromQueryResult,
 } from '../../../../utils';
+import { useGetLatestStopPlaceChange } from './hooks/useGetStopPlaceChangeHistory';
 
 const GQL_GET_STOP_AREA_DETAILS = gql`
   query getStopPlaceDetails(
@@ -111,11 +113,19 @@ const GQL_GET_STOP_AREA_DETAILS = gql`
 
 export function getEnrichedStopPlace(
   stopPlace: StopPlaceDetailsFragment | null | undefined,
+  getUserNameById?: (userId: string | null | undefined) => string | null,
+  stopPlaceChangeData?: {
+    changed: string | null;
+    changedBy: string | null;
+  },
 ): EnrichedStopPlace | null {
   if (!stopPlace) {
     return null;
   }
 
+  const changeData = stopPlaceChangeData;
+  const changedByUserName = getUserNameById?.(changeData?.changedBy);
+
   const transformedStopPlace = {
     ...stopPlace,
     parentStopPlace: stopPlace.parentStopPlace
@@ -126,11 +136,18 @@ export function getEnrichedStopPlace(
   return {
     ...stopPlace,
     ...getStopPlaceDetailsForEnrichment(transformedStopPlace),
+    changed: changeData?.changed,
+    changedByUserName,
   };
 }
 
 function useGetStopPlaceDetailsByWhere(
   where: StopsDatabaseStopPlaceNewestVersionBoolExp | null,
+  getUserNameById?: (userId: string | null | undefined) => string | null,
+  stopPlaceChangeData?: {
+    changed: string | null;
+    changedBy: string | null;
+  },
 ) {
   const { data, ...rest } = useGetStopPlaceDetailsQuery(
     where ? { variables: { where } } : { skip: true },
@@ -140,8 +157,9 @@ function useGetStopPlaceDetailsByWhere(
     data?.stopsDb?.newestVersion.at(0)?.TiamatStopPlace,
   ).at(0);
   const stopPlaceDetails = useMemo(
-    () => getEnrichedStopPlace(rawStopPlace),
-    [rawStopPlace],
+    () =>
+      getEnrichedStopPlace(rawStopPlace, getUserNameById, stopPlaceChangeData),
+    [rawStopPlace, getUserNameById, stopPlaceChangeData],
   );
 
   return { ...rest, stopPlaceDetails };
@@ -198,12 +216,22 @@ function useGetStopPlaceDetailsWhereConditionsWithDate(): StopsDatabaseStopPlace
 }
 
 export function useGetStopPlaceDetails() {
+  const { getUserNameById } = useGetUserNames();
+
+  const { latestStopPlaceChangeData } = useGetLatestStopPlaceChange(
+    useGetStopPlaceDetailsWhereConditions(),
+  );
+
   const validResult = useGetStopPlaceDetailsByWhere(
     useGetStopPlaceDetailsWhereConditionsWithDate(),
+    getUserNameById,
+    latestStopPlaceChangeData,
   );
 
   const fallbackResult = useGetStopPlaceDetailsByWhere(
     useGetStopPlaceDetailsWhereConditions(),
+    getUserNameById,
+    latestStopPlaceChangeData,
   );
 
   const hasValidData = !!validResult.stopPlaceDetails;

ui/src/generated/graphql.tsx

@@ -46,6 +46,8 @@ export type SharedEnrichmentProperties = {
   readonly locationLong?: number | undefined;
   readonly validityStart?: string | undefined;
   readonly validityEnd?: string | undefined;
+  readonly changed?: string | null;
+  readonly changedByUserName?: string | null;
 };
 
 export type QuayEnrichmentProperties = {