add control with ui

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

@@ -152,11 +152,19 @@ export const BookmarkFolderItem: FC<BookmarkFolderItemProps> = (props: BookmarkF
     }
   };
 
-  const isDroppable = (item: DragItemDataType, type: string | null| symbol): boolean => {
+  const isDropable = (item: DragItemDataType, type: string | null| symbol): boolean => {
     if (type === DRAG_ITEM_TYPE.FOLDER) {
       if (item.bookmarkFolder.parent === bookmarkFolder._id || item.bookmarkFolder._id === bookmarkFolder._id) {
         return false;
       }
+
+      // Maximum folder hierarchy of 2 levels
+      const dropSourceFolderHasChildren = item.bookmarkFolder.children.length !== 0;
+      const dropDestFolderHasParent = bookmarkFolder.parent != null;
+      if (dropSourceFolderHasChildren || dropDestFolderHasParent) {
+        return false;
+      }
+
       return item.root !== root || item.level >= level;
     }
 
@@ -228,7 +236,7 @@ export const BookmarkFolderItem: FC<BookmarkFolderItemProps> = (props: BookmarkF
         useDragMode={true}
         useDropMode={true}
         onDropItem={itemDropHandler}
-        isDropable={isDroppable}
+        isDropable={isDropable}
       >
         <li
           className={'list-group-item list-group-item-action border-0 py-0 pr-3 d-flex align-items-center'}
@@ -277,13 +285,17 @@ export const BookmarkFolderItem: FC<BookmarkFolderItemProps> = (props: BookmarkF
                 </DropdownToggle>
               </div>
             </BookmarkFolderItemControl>
-            <button
-              type="button"
-              className="border-0 rounded btn btn-page-item-control p-0 grw-visible-on-hover"
-              onClick={onClickPlusButton}
-            >
-              <i className="icon-plus d-block p-0" />
-            </button>
+            {/* Maximum folder hierarchy of 2 levels */}
+            {!(bookmarkFolder.parent != null) && (
+              <button
+                id='create-bookmark-folder-button'
+                type="button"
+                className="border-0 rounded btn btn-page-item-control p-0 grw-visible-on-hover"
+                onClick={onClickPlusButton}
+              >
+                <i className="icon-plus d-block p-0" />
+              </button>
+            )}
           </div>
         </li>
       </DragAndDropWrapper>

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

@@ -5,7 +5,7 @@ import React, {
 import { useTranslation } from 'next-i18next';
 import {
   DropdownItem,
-  DropdownMenu, DropdownToggle, UncontrolledDropdown, UncontrolledTooltip,
+  DropdownMenu, DropdownToggle, UncontrolledDropdown,
 } from 'reactstrap';
 
 import {
@@ -201,29 +201,22 @@ export const BookmarkFolderMenuItem = (props: Props): JSX.Element => {
         >
           <i className="icon-fw icon-trash grw-page-control-dropdown-icon"></i>
         </DropdownToggle>
-        <DropdownToggle
-          color="transparent"
-          onClick={e => e.stopPropagation()}
-          onMouseEnter={onMouseEnterHandler}
-        >
-          {childrenExists
-            ? <TriangleIcon />
-            : (
-              <i className="icon-plus d-block pl-0" />
-            )}
-        </DropdownToggle>
+        {/* Maximum folder hierarchy of 2 levels */}
+        {item.parent == null && (
+          <DropdownToggle
+            color="transparent"
+            onClick={e => e.stopPropagation()}
+            onMouseEnter={onMouseEnterHandler}
+          >
+            {childrenExists
+              ? <TriangleIcon />
+              : <i className="icon-plus d-block pl-0" />
+            }
+          </DropdownToggle>
+        )}
         {renderBookmarkSubMenuItem()}
 
       </UncontrolledDropdown >
-      <UncontrolledTooltip
-        modifiers={{ preventOverflow: { boundariesElement: 'window' } }}
-        autohide={false}
-        placement="top"
-        target={`bookmark-delete-button-${item._id}`}
-        fade={false}
-      >
-        {t('bookmark_folder.delete')}
-      </UncontrolledTooltip>
     </>
   );
 };