[Comment] Comments VQA Round 2 updates (#2782)

- Prevent mention list flicker - Update skeleton loading spinner logic - Make sure comment pop-up is behind item lock modal ![image](https://github.com/zesty-io/manager-ui/assets/28705606/e096476a-5619-4d7d-bd69-87fdbf79f055) https://github.com/zesty-io/manager-ui/assets/28705606/50368e10-6227-4ec4-b756-10e529df15a5 https://github.com/zesty-io/manager-ui/assets/28705606/af1ab6a4-881a-4612-81c3-7bb6076b2cf8
zesty-io · Jul 9, 2024 · 13365f1 · 13365f1
1 parent 2b43ce7
commit 13365f1
Show file tree

Hide file tree

Showing 4 changed files with 66 additions and 41 deletions.
diff --git a/src/apps/content-editor/src/app/views/ItemEdit/ItemEdit.js b/src/apps/content-editor/src/app/views/ItemEdit/ItemEdit.js
@@ -1,4 +1,4 @@
-import { Fragment, useEffect, useState, useMemo } from "react";
+import { Fragment, useEffect, useState, useMemo, createContext } from "react";
 import {
   Switch,
   Route,
@@ -64,6 +64,8 @@ const selectItemHeadTags = createSelector(
       })
 );
 
+export const ItemLockContext = createContext();
+
 export default function ItemEdit() {
   const dispatch = useDispatch();
   const history = useHistory();
@@ -359,19 +361,21 @@ export default function ItemEdit() {
           }
         >
           {isLocked && (
-            <LockedItem
-              timestamp={lockState.timestamp}
-              userFirstName={lockState.firstName}
-              userLastName={lockState.lastName}
-              userEmail={lockState.email}
-              itemName={item?.web?.metaLinkText}
-              handleUnlock={forceUnlock}
-              handleCancel={(evt) => {
-                evt.stopPropagation();
-                history.goBack();
-              }}
-              isLocked={isLocked}
-            />
+            <Box sx={{ zIndex: (theme) => theme.zIndex.modal + 1 }}>
+              <LockedItem
+                timestamp={lockState.timestamp}
+                userFirstName={lockState.firstName}
+                userLastName={lockState.lastName}
+                userEmail={lockState.email}
+                itemName={item?.web?.metaLinkText}
+                handleUnlock={forceUnlock}
+                handleCancel={(evt) => {
+                  evt.stopPropagation();
+                  history.goBack();
+                }}
+                isLocked={isLocked}
+              />
+            </Box>
           )}
 
           <PendingEditsModal
@@ -491,26 +495,28 @@ export default function ItemEdit() {
                     "/content/:modelZUID/:itemZUID/comment/:resourceZUID/:commentZUID",
                   ]}
                   render={() => (
-                    <Content
-                      instance={instance}
-                      modelZUID={modelZUID}
-                      model={model}
-                      fields={fields}
-                      itemZUID={itemZUID}
-                      item={item}
-                      items={items}
-                      user={user}
-                      onSave={save}
-                      dispatch={dispatch}
-                      loading={loading}
-                      saving={saving}
-                      saveClicked={saveClicked}
-                      onUpdateFieldErrors={(errors) => {
-                        setFieldErrors(errors);
-                      }}
-                      fieldErrors={fieldErrors}
-                      hasErrors={hasErrors}
-                    />
+                    <ItemLockContext.Provider value={isLocked}>
+                      <Content
+                        instance={instance}
+                        modelZUID={modelZUID}
+                        model={model}
+                        fields={fields}
+                        itemZUID={itemZUID}
+                        item={item}
+                        items={items}
+                        user={user}
+                        onSave={save}
+                        dispatch={dispatch}
+                        loading={loading}
+                        saving={saving}
+                        saveClicked={saveClicked}
+                        onUpdateFieldErrors={(errors) => {
+                          setFieldErrors(errors);
+                        }}
+                        fieldErrors={fieldErrors}
+                        hasErrors={hasErrors}
+                      />
+                    </ItemLockContext.Provider>
                   )}
                 />
                 <Route

diff --git a/src/shell/components/Comment/CommentsList.tsx b/src/shell/components/Comment/CommentsList.tsx
@@ -21,6 +21,7 @@ import { User } from "../../services/types";
 import { useSelector } from "react-redux";
 import { AppState } from "../../store/types";
 import { MD5 } from "../../../utility/md5";
+import { ItemLockContext } from "../../../apps/content-editor/src/app/views/ItemEdit/ItemEdit";
 
 type PathParams = {
   modelZUID: string;
@@ -33,27 +34,33 @@ type CommentsListProps = {
   onClose: () => void;
   isResolved: boolean;
   parentCommentZUID: string;
+  isLoadingParentCommentZUID: boolean;
 };
 export const CommentsList = ({
   anchorEl,
   onClose,
   isResolved,
   parentCommentZUID,
+  isLoadingParentCommentZUID,
 }: CommentsListProps) => {
   const { resourceZUID, commentZUID } = useParams<PathParams>();
   const [_, __, commentZUIDtoEdit] = useContext(CommentContext);
+  const isLocked = useContext<boolean>(ItemLockContext);
   const [popperTopOffset, setPopperTopOffset] = useState(0);
   const [popperBottomOffset, setPopperBottomOffset] = useState(0);
   const [placement, setPlacement] =
     useState<PopperPlacementType>("bottom-start");
   const topOffsetRef = useRef<HTMLDivElement>();
   const loggedInUser: User = useSelector((state: AppState) => state.user);
 
-  const { data: commentThread, isLoading: isLoadingCommentThread } =
-    useGetCommentThreadQuery(
-      { commentZUID: parentCommentZUID },
-      { skip: !parentCommentZUID }
-    );
+  const {
+    data: commentThread,
+    isLoading: isLoadingCommentThread,
+    isUninitialized: isCommentThreadUninitialized,
+  } = useGetCommentThreadQuery(
+    { commentZUID: parentCommentZUID },
+    { skip: !parentCommentZUID }
+  );
 
   useEffect(() => {
     if (
@@ -119,6 +126,7 @@ export const CommentsList = ({
     >
       <Popper
         open
+        disablePortal={isLocked}
         anchorEl={anchorEl}
         placement={placement}
         sx={{
@@ -146,7 +154,9 @@ export const CommentsList = ({
             boxSizing: "border-box",
           }}
         >
-          {isLoadingCommentThread && <CommentItemLoading />}
+          {(isLoadingCommentThread || isLoadingParentCommentZUID) && (
+            <CommentItemLoading />
+          )}
           {commentThread?.map((comment, index) => (
             <Fragment key={comment.ZUID}>
               <CommentItem
@@ -168,7 +178,10 @@ export const CommentsList = ({
               )}
             </Fragment>
           ))}
-          {!commentThread?.length && !isLoadingCommentThread && (
+          {((!isLoadingCommentThread &&
+            !isCommentThreadUninitialized &&
+            !commentThread?.length) ||
+            (!isLoadingParentCommentZUID && !parentCommentZUID)) && (
             <Stack flex={1} direction="row" gap={1.5} alignItems="center">
               <Avatar
                 sx={{ width: 32, height: 32 }}

diff --git a/src/shell/components/Comment/MentionList.tsx b/src/shell/components/Comment/MentionList.tsx
@@ -125,6 +125,7 @@ export const MentionList = forwardRef(
 
     return (
       <Popper
+        disablePortal
         open
         placement={placement}
         anchorEl={anchorEl}
@@ -140,6 +141,10 @@ export const MentionList = forwardRef(
                 offset: [0, 1],
               },
             },
+            {
+              name: "flip",
+              enabled: false,
+            },
           ],
         }}
       >

diff --git a/src/shell/components/Comment/index.tsx b/src/shell/components/Comment/index.tsx
@@ -148,6 +148,7 @@ export const Comment = ({ resourceZUID }: CommentProps) => {
       </Box>
       {isCommentListOpen && (
         <CommentsList
+          isLoadingParentCommentZUID={isLoadingComment}
           parentCommentZUID={parentComment?.ZUID}
           anchorEl={buttonContainerRef.current}
           onClose={() => {