chore(compass-components): Do not use uuid as a key for Documents and Elements (#3080)

Author: gribnoysup

packages/compass-components/src/components/document-list/document.tsx

@@ -9,8 +9,10 @@ import { fontFamilies, spacing } from '@leafygreen-ui/tokens';
 import { AutoFocusContext } from './auto-focus-context';
 import { useForceUpdate } from './use-force-update';
 import { HadronElement } from './element';
+import { usePrevious } from './use-previous';
 
 function useHadronDocument(doc: HadronDocumentType) {
+  const prevDoc = usePrevious(doc);
   const forceUpdate = useForceUpdate();
 
   const onDocumentFieldsAddedOrRemoved = useCallback(
@@ -28,6 +30,13 @@ function useHadronDocument(doc: HadronDocumentType) {
     [doc, forceUpdate]
   );
 
+  useEffect(() => {
+    // Force update if the document that was passed to the component changed
+    if (prevDoc && prevDoc !== doc) {
+      forceUpdate();
+    }
+  }, [prevDoc, doc, forceUpdate]);
+
   useEffect(() => {
     doc.on(ElementEvents.Added, onDocumentFieldsAddedOrRemoved);
     doc.on(ElementEvents.Removed, onDocumentFieldsAddedOrRemoved);
@@ -91,11 +100,11 @@ const HadronDocument: React.FunctionComponent<{
       data-id={document.uuid}
     >
       <AutoFocusContext.Provider value={autoFocus}>
-        {visibleElements.map((el) => {
+        {visibleElements.map((el, idx) => {
           return (
             <HadronElement
+              key={idx}
               value={el}
-              key={el.uuid}
               editable={editable}
               editingEnabled={editing}
               allExpanded={expanded}

packages/compass-components/src/components/document-list/element.tsx

@@ -19,6 +19,7 @@ import { EditActions, AddFieldActions } from './element-actions';
 import { FontAwesomeIcon } from './font-awesome-icon';
 import { useAutoFocusContext } from './auto-focus-context';
 import { useForceUpdate } from './use-force-update';
+import { usePrevious } from './use-previous';
 
 function getEditorByType(type: HadronElementType['type']) {
   switch (type) {
@@ -54,6 +55,7 @@ function useElementEditor(el: HadronElementType) {
 
 function useHadronElement(el: HadronElementType) {
   const forceUpdate = useForceUpdate();
+  const prevEl = usePrevious(el);
   const editor = useElementEditor(el);
   // NB: Duplicate key state is kept local to the component and not derived on
   // every change so that only the changed key is highlighed as duplicate
@@ -82,6 +84,12 @@ function useHadronElement(el: HadronElementType) {
     [el, forceUpdate]
   );
 
+  useEffect(() => {
+    if (prevEl && prevEl !== el) {
+      forceUpdate();
+    }
+  }, [el, prevEl, forceUpdate]);
+
   useEffect(() => {
     el.on(ElementEvents.Converted, onElementChanged);
     el.on(ElementEvents.Edited, onElementChanged);
@@ -550,10 +558,10 @@ export const HadronElement: React.FunctionComponent<{
       </div>
       {expandable &&
         expanded &&
-        children.map((el) => {
+        children.map((el, idx) => {
           return (
             <HadronElement
-              key={el.uuid}
+              key={idx}
               value={el}
               editable={editable}
               editingEnabled={editingEnabled}

packages/compass-components/src/components/document-list/use-previous.tsx

@@ -0,0 +1,9 @@
+import { useEffect, useRef } from 'react';
+
+export function usePrevious<T>(value: T): T | undefined {
+  const ref = useRef<T | undefined>();
+  useEffect(() => {
+    ref.current = value;
+  }, [value]);
+  return ref.current;
+}

packages/compass-crud/src/components/document-list-view.jsx

@@ -29,11 +29,10 @@ class DocumentListView extends React.Component {
    * @return {Array} The document list item components.
    */
   renderDocuments() {
-    return this.props.docs.map((doc) => {
+    return this.props.docs.map((doc, index) => {
       return (
-        <li className={LIST_ITEM_CLASS} data-test-id={LIST_ITEM_TEST_ID} key={doc.uuid}>
+        <li className={LIST_ITEM_CLASS} data-test-id={LIST_ITEM_TEST_ID} key={index}>
           <Document
-            key={doc.uuid}
             doc={doc}
             editable={this.props.isEditable}
             isTimeSeries={this.props.isTimeSeries}