Implement external links diffing in stop change history

Author: suvikankare

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

@@ -20,6 +20,8 @@ import { DateTime } from 'luxon';
 import { Tag } from '../../enums';
 import {
   BasicDetailsForm,
+  ExternalLinksForm,
+  ExternalLinksSection,
   InfoSpotViewCard,
   InfoSpotsForm,
   LocationDetailsForm,
@@ -38,8 +40,23 @@ import { UUID } from '../../types';
 import { SupportedResources, insertToDbHelper } from '../../utils';
 import { expectGraphQLCallToSucceed } from '../../utils/assertions';
 import { InsertedStopRegistryIds } from '../utils';
+import {
+  ExternalLinkData,
+  assertExternalLinksChanged,
+} from './externalLinksUtils';
 import { InfoSpotData, assertInfoSpot } from './infoSpotUtils';
 
+const externalLinksTestData = {
+  initialLink: {
+    name: 'Pysäkin Testilinkki',
+    location: 'https://stoptest.fi',
+  },
+  addedLink: {
+    name: 'Test Link',
+    location: 'http://www.example.com',
+  },
+} as const satisfies Readonly<Record<string, ExternalLinkData>>;
+
 const testInfraLinks = [
   {
     externalId: '7d29bd61-6cf7-4d2c-8bd8-b8e835fe90b7:1',
@@ -125,6 +142,12 @@ const stopAreaInput: StopAreaInput = {
         organisations: quayH2003.organisations as
           | StopRegistryStopPlaceOrganisationRefInput[]
           | null,
+        externalLinks: [
+          {
+            name: externalLinksTestData.initialLink.name,
+            location: externalLinksTestData.initialLink.location,
+          },
+        ],
       },
     ],
   },
@@ -1201,6 +1224,52 @@ describe('Stop Change History', { tags }, () => {
           );
       });
     });
+
+    it('Should diff external links', () => {
+      StopDetailsPage.visit('H2003');
+
+      cy.section('Add external link', () => {
+        ExternalLinksSection.getEditButton().click();
+        ExternalLinksForm.getAddNewButton().click();
+        ExternalLinksForm.getNthExternalLink(1).within(() => {
+          ExternalLinksForm.externalLinks
+            .getNameInput()
+            .clearAndType(externalLinksTestData.addedLink.name);
+          ExternalLinksForm.externalLinks
+            .getLocationInput()
+            .clearAndType(externalLinksTestData.addedLink.location);
+        });
+        ExternalLinksForm.getSaveButton().click();
+      });
+
+      StopDetailsPage.changeHistoryLink().click();
+
+      cy.section('Check changed details', () => {
+        StopChangeHistoryPage.changeHistoryTable.group
+          .getAllGroupElements()
+          .eq(0)
+          .within(() => {
+            StopChangeHistoryPage.changeHistoryTable.sectionHeader
+              .getExternalLinksDetails()
+              .shouldBeVisible();
+            StopChangeHistoryPage.changeHistoryTable.changedValues.externalLinksDetails
+              .getLinks()
+              .within(() => {
+                assertExternalLinksChanged(
+                  () =>
+                    StopChangeHistoryPage.changeHistoryTable.changedValues.getOldValue(),
+                  () =>
+                    StopChangeHistoryPage.changeHistoryTable.changedValues.getNewValue(),
+                  [externalLinksTestData.initialLink],
+                  [
+                    externalLinksTestData.initialLink,
+                    externalLinksTestData.addedLink,
+                  ],
+                );
+              });
+          });
+      });
+    });
   });
 
   describe('Sorting', () => {

cypress/pageObjects/stop-registry/StopChangeHistoryPage.ts

@@ -120,6 +120,9 @@ const StopChangeHistoryTable = createSimplePageObject(
     // ChangedValue sections need more complex logic.
     'ChangeHistory::SectionHeader::ShelterDetails',
     'ChangeHistory::SectionHeader::InfoSpotDetails',
+
+    'ChangeHistory::SectionHeader::ExternalLinksDetails',
+    'ChangeHistory::ChangedValues::ExternalLinksDetails::Links',
   ],
   (base) => ({
     ...BaseChangeHistoryTable,

ui/src/components/stop-registry/stops/change-history/components/DataDiffSections.tsx

@@ -20,6 +20,7 @@ import {
   diffSignageDetails,
   diffStopAreaAndTerminal,
 } from '../utils';
+import { diffStopExternalLinks } from '../utils/dataDiffers/diffExternalLinks';
 import {
   useHistoricalStopVersion,
   useRefetchFailedHistoricalStopVersions,
@@ -173,6 +174,16 @@ export const DataDiffSections: FC<DataDiffSectionsProps> = ({
           ),
           testId: 'InfoSpotDetails',
         },
+        {
+          diffVersions: diffStopExternalLinks,
+          sectionTitle: (
+            <SectionTitle
+              historyItem={historyItem}
+              section={t(($) => $.changeHistory.externalLinks.title)}
+            />
+          ),
+          testId: 'ExternalLinksDetails',
+        },
       ]}
     />
   );

ui/src/components/stop-registry/stops/change-history/utils/dataDiffers/diffExternalLinks.tsx

@@ -0,0 +1,32 @@
+import { TFunction } from 'i18next';
+import compact from 'lodash/compact';
+import {
+  ChangedValue,
+  diffKeyedValues,
+} from '../../../../../common/ChangeHistory';
+import {
+  ExternalLinksList,
+  formatLinks,
+} from '../../../../../common/ChangeHistory/utils/externalLinks';
+import { HistoricalStopData } from '../../types';
+
+export function diffStopExternalLinks(
+  t: TFunction,
+  previous: HistoricalStopData,
+  current: HistoricalStopData,
+): Array<ChangedValue> {
+  return compact([
+    diffKeyedValues({
+      key: 'Links',
+      field: null,
+      oldValue: formatLinks(previous.quay.externalLinks, t),
+      newValue: formatLinks(current.quay.externalLinks, t),
+      mapper: (links) =>
+        typeof links === 'string' ? (
+          links
+        ) : (
+          <ExternalLinksList links={links} id={current.quay.id ?? undefined} />
+        ),
+    }),
+  ]);
+}

ui/src/components/stop-registry/stops/change-history/utils/dataDiffers/index.ts

@@ -6,3 +6,4 @@ export * from './diffOwnerDetails';
 export * from './diffShelters';
 export * from './diffSignageDetails';
 export * from './diffStopAreaAndTerminal';
+export * from './diffExternalLinks';

ui/src/components/stop-registry/stops/change-history/utils/latestStopChangeSections.ts

@@ -10,6 +10,7 @@ import {
   diffShelters,
   diffSignageDetails,
   diffStopAreaAndTerminal,
+  diffStopExternalLinks,
 } from '.';
 
 type StopChangeSection = {
@@ -55,5 +56,9 @@ export function latestStopChangeSections(
       title: t(($) => $.stopChangeHistory.infoSpots.title),
       changes: diffInfoSpots(t, prev, curr),
     },
+    {
+      title: t(($) => $.changeHistory.externalLinks.title),
+      changes: diffStopExternalLinks(t, prev, curr),
+    },
   ].filter((s) => s.changes.length > 0);
 }