Preserve order of relation members in element info table (#780)

Author: jake-low

package.json

@@ -24,6 +24,7 @@
     "buffer": "^6.0.3",
     "date-fns": "^2.22.1",
     "deep-equal": "^2.2.3",
+    "diff": "^7.0.0",
     "dompurify": "^3.0.3",
     "history": "^4.10.1",
     "immutable": "^3.8.2",

src/components/element_info.js

@@ -1,5 +1,6 @@
 import React, { useState, useEffect } from 'react';
 import { connect } from 'react-redux';
+import { diffArrays } from 'diff';
 
 import { osmUrl } from '../config/constants.js';
 import { flagFeature, unflagFeature } from '../network/changeset';
@@ -295,16 +296,12 @@ function TagsTable({ action }) {
 }
 
 function RelationMembersTable({ action, setHighlight }) {
-  let allMembers;
+  let oldMemberIds = action.old?.members.map(m => `${m.type}/${m.ref}`) ?? [];
+  let newMemberIds = action.new?.members.map(m => `${m.type}/${m.ref}`) ?? [];
 
-  if (action.type === 'create') {
-    allMembers = action.new.members;
-  } else {
-    allMembers = [...action.old.members, ...action.new.members];
-  }
-
-  let allMemberIds = new Set(allMembers.map(m => `${m.type}/${m.ref}`));
-  allMemberIds = [...allMemberIds].sort();
+  let diff = diffArrays(oldMemberIds, newMemberIds, {
+    oneChangePerToken: true
+  });
 
   return (
     <table className="member-table">
@@ -315,7 +312,8 @@ function RelationMembersTable({ action, setHighlight }) {
         </tr>
       </thead>
       <tbody>
-        {allMemberIds.map(id => {
+        {diff.map(({ value }) => {
+          const id = value[0];
           const [type, ref] = id.split('/');
           const oldMember = action.old?.members.find(
             m => m.type === type && m.ref === +ref

yarn.lock

@@ -5438,6 +5438,11 @@ diff-sequences@^27.5.1:
   resolved "https://registry.yarnpkg.com/diff-sequences/-/diff-sequences-27.5.1.tgz#eaecc0d327fd68c8d9672a1e64ab8dccb2ef5327"
   integrity sha512-k1gCAXAsNgLwEL+Y8Wvl+M6oEFj5bgazfZULpS5CneoPPXRaCCW7dm+q21Ky2VEE5X+VeRDBVg1Pcvvsr4TtNQ==
 
+diff@^7.0.0:
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/diff/-/diff-7.0.0.tgz#3fb34d387cd76d803f6eebea67b921dab0182a9a"
+  integrity sha512-PJWHUb1RFevKCwaFA9RlG5tCd+FO5iRh9A8HEtkmBH2Li03iJriB6m6JIN4rGz3K3JLawI7/veA1xzRKP6ISBw==
+
 dir-glob@^3.0.1:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/dir-glob/-/dir-glob-3.0.1.tgz#56dbf73d992a4a93ba1584f4534063fd2e41717f"