Merge pull request #8608 from weseek/fix/141824-143080-correct-update-bookmark-button-clicked

fix: Uncorrect update bookmark button clicked on page control

apps/app/_obsolete/src/styles/theme/_apply-colors-light.scss

@@ -304,18 +304,16 @@
   }
 
   // Bookmark dropdown menu
-  .grw-bookmark-folder-dropdown  {
-    .grw-bookmark-folder-menu {
-      .form-control{
-        &:focus {
-          color: $body-color
-        }
+  .grw-bookmark-folder-menu {
+    .form-control{
+      &:focus {
+        color: $body-color
       }
-      .grw-bookmark-folder-menu-item {
-        @include mixins-buttons.button-outline-svg-icon-variant($gray-400, $primary);
-        .grw-bookmark-folder-menu-item-title {
-          color: $body-color
-        }
+    }
+    .grw-bookmark-folder-menu-item {
+      @include mixins-buttons.button-outline-svg-icon-variant($gray-400, $primary);
+      .grw-bookmark-folder-menu-item-title {
+        color: $body-color
       }
     }
   }

apps/app/src/components/Bookmarks/BookmarkFolderMenu.module.scss

@@ -0,0 +1,10 @@
+.grw-bookmark-folder-menu  :global {
+  max-width: 65%;
+
+  .grw-bookmark-folder-menu-item-folder-first {
+    padding-left: 40px;
+  }
+  .grw-bookmark-folder-menu-item-folder-second {
+    padding-left: 60px;
+  }
+}

apps/app/src/components/Bookmarks/BookmarkFolderMenu.tsx

@@ -12,6 +12,7 @@ import { useSWRMUTxPageInfo } from '~/stores/page';
 
 import { BookmarkFolderMenuItem } from './BookmarkFolderMenuItem';
 
+import styles from './BookmarkFolderMenu.module.scss';
 
 type BookmarkFolderMenuProps = {
   isOpen: boolean,
@@ -116,7 +117,7 @@ export const BookmarkFolderMenu = (props: BookmarkFolderMenuProps): JSX.Element
         <DropdownItem
           toggle={false}
           onClick={onUnbookmarkHandler}
-          className="grw-bookmark-folder-menu-item text-danger"
+          className="grw-bookmark-folder-menu-item text-danger text-truncate"
         >
           <span className="material-symbols-outlined">bookmark</span>{' '}
           <span className="mx-2">
@@ -129,7 +130,7 @@ export const BookmarkFolderMenu = (props: BookmarkFolderMenuProps): JSX.Element
             <DropdownItem divider />
             <div key="root">
               <div
-                className="dropdown-item grw-bookmark-folder-menu-item list-group-item list-group-item-action border-0 py-0"
+                className="dropdown-item grw-bookmark-folder-menu-item list-group-item list-group-item-action px-4"
                 tabIndex={0}
                 role="menuitem"
                 onClick={e => onMenuItemClickHandler(e, 'root')}
@@ -144,8 +145,7 @@ export const BookmarkFolderMenu = (props: BookmarkFolderMenuProps): JSX.Element
             {bookmarkFolders?.map(folder => (
               <React.Fragment key={`bookmark-folders-${folder._id}`}>
                 <div
-                  className="dropdown-item grw-bookmark-folder-menu-item list-group-item list-group-item-action border-0 py-0"
-                  style={{ paddingLeft: '40px' }}
+                  className="dropdown-item grw-bookmark-folder-menu-item grw-bookmark-folder-menu-item-folder-first list-group-item list-group-item-action"
                   tabIndex={0}
                   role="menuitem"
                   onClick={e => onMenuItemClickHandler(e, folder._id)}
@@ -159,8 +159,7 @@ export const BookmarkFolderMenu = (props: BookmarkFolderMenuProps): JSX.Element
                 {folder.children?.map(child => (
                   <div key={child._id}>
                     <div
-                      className="dropdown-item grw-bookmark-folder-menu-item list-group-item list-group-item-action border-0 py-0"
-                      style={{ paddingLeft: '60px' }}
+                      className="dropdown-item grw-bookmark-folder-menu-item grw-bookmark-folder-menu-item-folder-second list-group-item list-group-item-action"
                       tabIndex={0}
                       role="menuitem"
                       onClick={e => onMenuItemClickHandler(e, child._id)}
@@ -185,15 +184,14 @@ export const BookmarkFolderMenu = (props: BookmarkFolderMenuProps): JSX.Element
     <UncontrolledDropdown
       isOpen={isOpen}
       onToggle={toggleHandler}
-      direction={isBookmarkFolderExists ? 'up' : 'down'}
-      className="grw-bookmark-folder-dropdown"
     >
       {children}
       <DropdownMenu
         end
         persist
         strategy="fixed"
-        className="grw-bookmark-folder-menu"
+        container="body"
+        className={`grw-bookmark-folder-menu ${styles['grw-bookmark-folder-menu']}`}
       >
         { renderBookmarkMenuItem() }
       </DropdownMenu>

apps/app/src/components/Bookmarks/BookmarkFolderMenuItem.tsx

@@ -19,7 +19,7 @@ export const BookmarkFolderMenuItem: React.FC<{
         onChange={e => e.stopPropagation()}
         onClick={e => e.stopPropagation()}
       />
-      <label htmlFor={`bookmark-folder-menu-item-${itemId}`} className="p-2 m-0 form-label">
+      <label htmlFor={`bookmark-folder-menu-item-${itemId}`} className="p-2 m-0 form-label text-truncate">
         {itemName}
       </label>
     </div>

apps/app/src/components/DeleteBookmarkFolderModal.tsx

@@ -1,5 +1,6 @@
 
-import React, { FC } from 'react';
+import type { FC } from 'react';
+import React from 'react';
 
 import { useTranslation } from 'next-i18next';
 import {
@@ -46,7 +47,7 @@ const DeleteBookmarkFolderModal: FC = () => {
         {t('bookmark_folder.delete_modal.modal_header_label')}
       </ModalHeader>
       <ModalBody>
-        <div className="pb-1">
+        <div className="pb-1 text-break">
           <label className="form-label">{ t('bookmark_folder.delete_modal.modal_body_description') }:</label><br />
           <FolderIcon isOpen={false} /> {deleteBookmarkFolderModalData?.bookmarkFolder?.name}
         </div>

apps/app/src/stores/page.tsx

@@ -214,12 +214,15 @@ export const useSWRMUTxPageInfo = (
     shareLinkId?: string | null,
 ): SWRMutationResponse<IPageInfo | IPageInfoForOperation> => {
 
+  // Cache remains from guest mode when logging in via the Login lead, so add 'isGuestUser' key
+  const { data: isGuestUser } = useIsGuestUser();
+
   // assign null if shareLinkId is undefined in order to identify SWR key only by pageId
   const fixedShareLinkId = shareLinkId ?? null;
 
   const key = useMemo(() => {
-    return pageId != null ? ['/page/info', pageId, fixedShareLinkId] : null;
-  }, [fixedShareLinkId, pageId]);
+    return pageId != null ? ['/page/info', pageId, fixedShareLinkId, isGuestUser] : null;
+  }, [fixedShareLinkId, isGuestUser, pageId]);
 
   return useSWRMutation(
     key,