From d6a042f1edba175bdd1e45e18dfb9ae4b04950c0 Mon Sep 17 00:00:00 2001
From: Eric Wittmann <eric.wittmann@gmail.com>
Date: Tue, 12 Nov 2024 08:51:43 -0500
Subject: [PATCH] Fix the conflicting content logic

---
 ui/ui-app/src/app/pages/editor/EditorPage.tsx  | 18 ++++++++++--------
 .../pages/editor/components/EditorContext.tsx  | 10 +++++-----
 2 files changed, 15 insertions(+), 13 deletions(-)

diff --git a/ui/ui-app/src/app/pages/editor/EditorPage.tsx b/ui/ui-app/src/app/pages/editor/EditorPage.tsx
index f2a17a17e..6afaad678 100644
--- a/ui/ui-app/src/app/pages/editor/EditorPage.tsx
+++ b/ui/ui-app/src/app/pages/editor/EditorPage.tsx
@@ -1,5 +1,5 @@
 import React, { CSSProperties, FunctionComponent, useEffect, useState } from "react";
-import { PageSection, PageSectionVariants } from "@patternfly/react-core";
+import { PageSection, PageSectionVariants, useInterval } from "@patternfly/react-core";
 import { ArtifactTypes, ContentTypes } from "@models/common";
 import { DownloadService, useDownloadService } from "@services/useDownloadService.ts";
 import {
@@ -61,6 +61,7 @@ export const EditorPage: FunctionComponent<EditorPageProps> = () => {
         labels: {},
         modifiedBy: "",
         modifiedOn: new Date(),
+        contentId: 0,
         name: "",
         type: "",
         version: ""
@@ -76,7 +77,6 @@ export const EditorPage: FunctionComponent<EditorPageProps> = () => {
     const [isPleaseWaitModalOpen, setPleaseWaitModalOpen] = useState(false);
     const [isConfirmOverwriteModalOpen, setConfirmOverwriteModalOpen] = useState(false);
     const [pleaseWaitMessage, setPleaseWaitMessage] = useState("");
-    const [intervalId, setIntervalId] = useState<any>();
     const [isContentConflicting, setIsContentConflicting] = useState(false);
 
     const { groupId, draftId, version } = useParams();
@@ -84,15 +84,17 @@ export const EditorPage: FunctionComponent<EditorPageProps> = () => {
     const drafts: DraftsService = useDraftsService();
     const downloadSvc: DownloadService = useDownloadService();
 
+    // Poll the server for new content every 60s.  If the content has been updated on
+    // the server then we have a conflict that we need to report to the user.
+    useInterval(() => {
+        detectContentConflict();
+    }, 30000);
+
     const createLoaders = (): Promise<any>[] => {
         return [
             drafts.getDraft(groupId as string, draftId as string, version as string)
                 .then(d => {
                     setDraft(d);
-
-                    // Poll the server for new content every 60s.  If the content has been updated on
-                    // the server then we have a conflict that we need to report to the user.
-                    setIntervalId(setInterval(detectContentConflict, 60000));
                 })
                 .catch(error => {
                     setPageError(toPageError(error, "Error loading page data."));
@@ -110,7 +112,6 @@ export const EditorPage: FunctionComponent<EditorPageProps> = () => {
         // Cleanup any possible event listener we might still have registered
         return () => {
             window.removeEventListener("beforeunload", onBeforeUnload);
-            clearInterval(intervalId);
         };
     }, []);
 
@@ -145,8 +146,9 @@ export const EditorPage: FunctionComponent<EditorPageProps> = () => {
 
     const detectContentConflict = (): void => {
         drafts.getDraft(groupId as string, draftId as string, version as string).then(currentDraft => {
+            console.info(`[EditorPage] Detecting conflicting content.  Latest contentId: ${currentDraft.contentId}  Editor contentId: ${draft.contentId}`);
             if (currentDraft.contentId !== draft.contentId) {
-                console.debug(`[EditorPage] Detected Draft content conflict.  Expected '${draft.contentId}' but found '${currentDraft.contentId}'.'`);
+                console.debug(`[EditorPage] Detected Draft content conflict.  Expected '${draft.contentId}' but found '${currentDraft.contentId}'`);
                 setIsContentConflicting(true);
             }
         });
diff --git a/ui/ui-app/src/app/pages/editor/components/EditorContext.tsx b/ui/ui-app/src/app/pages/editor/components/EditorContext.tsx
index 31e6d3657..3d65d7c52 100644
--- a/ui/ui-app/src/app/pages/editor/components/EditorContext.tsx
+++ b/ui/ui-app/src/app/pages/editor/components/EditorContext.tsx
@@ -85,9 +85,9 @@ export const EditorContext: FunctionComponent<EditorContextProps> = (props: Edit
 
     return (
         <div className="editor-context">
-            <div className="editor-context-breadcrumbs" children={breadcrumbs} />
+            <div key="editor-context-breadcrumbs" className="editor-context-breadcrumbs" children={breadcrumbs} />
             <If condition={props.contentConflict}>
-                <div className="editor-context-conflict">
+                <div key="editor-context-conflict" className="editor-context-conflict">
                     <Icon status="warning">
                         <Popover
                             triggerAction="hover"
@@ -99,12 +99,12 @@ export const EditorContext: FunctionComponent<EditorContextProps> = (props: Edit
                 </div>
             </If>
             <If condition={props.draft.modifiedOn !== undefined}>
-                <div className="editor-context-last-modified">
+                <div key="editor-context-last-modified" className="editor-context-last-modified">
                     <span>Last modified:</span>
                     <FromNow date={props.draft.modifiedOn}/>
                 </div>
             </If>
-            <div className="editor-context-actions">
+            <div key="editor-context-actions" className="editor-context-actions">
                 <ObjectDropdown
                     label="Actions"
                     items={menuItems}
@@ -117,7 +117,7 @@ export const EditorContext: FunctionComponent<EditorContextProps> = (props: Edit
                     itemIsDisabled={item => item.isDisabled === undefined ? false : item.isDisabled()}
                     itemToString={item => item.label} />
             </div>
-            <div className="editor-context-save">
+            <div key="editor-context-save" className="editor-context-save">
                 <Button className="btn-save" variant="primary" onClick={() => props.onSave()} isDisabled={!props.dirty}>Save</Button>
             </div>
         </div>