fix: show rename form as topbar popup

Author: Isjuanplayer

src/cloud/lib/hooks/useCloudResourceModals.tsx

@@ -36,7 +36,7 @@ import { stringify } from 'querystring'
 import { docPreviewCloseEvent } from './useCloudDocPreview'
 
 export function useCloudResourceModals() {
-  const { openModal, closeLastModal } = useModal()
+  const { openModal, openContextModal, closeLastModal } = useModal()
   const { messageBox } = useDialog()
   const {
     updateFolder,
@@ -71,16 +71,13 @@ export function useCloudResourceModals() {
   )
 
   const openRenameFolderForm = useCallback(
-    (folder: SerializedFolder) => {
-      openModal(
+    (folder: SerializedFolder, event?: React.MouseEvent<Element>) => {
+      const content = (
         <EmojiInputForm
           defaultIcon={mdiFolderOutline}
           defaultInputValue={folder.name}
           defaultEmoji={folder.emoji}
           placeholder={translate(lngKeys.FolderNamePlaceholder)}
-          submitButtonProps={{
-            label: translate(lngKeys.GeneralUpdateVerb),
-          }}
           onSubmit={async (inputValue: string, emoji?: string) => {
             await updateFolder(folder, {
               workspaceId: folder.workspaceId,
@@ -90,19 +87,35 @@ export function useCloudResourceModals() {
             })
             closeLastModal()
           }}
-        />,
-        {
-          showCloseIcon: true,
-          title: translate(lngKeys.RenameFolder),
-        }
+          onBlur={async (inputValue: string, emoji?: string) => {
+            await updateFolder(folder, {
+              workspaceId: folder.workspaceId,
+              parentFolderId: folder.parentFolderId,
+              folderName: inputValue,
+              emoji: typeof emoji === 'string' ? emoji : null,
+            })
+          }}
+        />
       )
+      if (event != null) {
+        openContextModal(event, content, {
+          width: 320,
+          alignment: 'right',
+        })
+        return
+      }
+
+      openModal(content, {
+        showCloseIcon: false,
+        width: 'small',
+      })
     },
-    [openModal, closeLastModal, updateFolder, translate]
+    [openModal, openContextModal, closeLastModal, updateFolder, translate]
   )
 
   const openRenameDocForm = useCallback(
-    (doc: SerializedDoc) => {
-      openModal(
+    (doc: SerializedDoc, event?: React.MouseEvent<Element>) => {
+      const content = (
         <EmojiInputForm
           defaultIcon={mdiFileDocumentOutline}
           defaultInputValue={doc.title}
@@ -125,14 +138,22 @@ export function useCloudResourceModals() {
               emoji: emoji == null ? null : emoji,
             })
           }}
-        />,
-        {
-          showCloseIcon: false,
-          width: 'small',
-        }
+        />
       )
+      if (event != null) {
+        openContextModal(event, content, {
+          width: 320,
+          alignment: 'right',
+        })
+        return
+      }
+
+      openModal(content, {
+        showCloseIcon: false,
+        width: 'small',
+      })
     },
-    [closeLastModal, openModal, translate, updateDoc]
+    [closeLastModal, openModal, openContextModal, translate, updateDoc]
   )
 
   const openNewFolderForm = useCallback(

src/cloud/lib/mappers/topbarBreadcrumbs.ts

@@ -8,6 +8,7 @@ import {
   mdiTrashCanOutline,
 } from '@mdi/js'
 import { TFunction } from 'i18next'
+import type { MouseEvent } from 'react'
 import { TopbarBreadcrumbProps } from '../../../design/components/organisms/Topbar'
 import { getDocLinkHref } from '../../components/Link/DocLink'
 import { getFolderHref } from '../../components/Link/FolderLink'
@@ -48,8 +49,11 @@ export function mapTopbarBreadcrumbs(
     pageDoc?: SerializedDoc
     pageFolder?: SerializedFolder
   },
-  renameFolder?: (folder: SerializedFolder) => void,
-  renameDoc?: (doc: SerializedDoc) => void,
+  renameFolder?: (
+    folder: SerializedFolder,
+    event?: MouseEvent<Element>
+  ) => void,
+  renameDoc?: (doc: SerializedDoc, event?: MouseEvent<Element>) => void,
   openNewDocForm?: (
     body: CloudNewResourceRequestBody,
     options: UIFormOptions
@@ -196,7 +200,7 @@ function getDocBreadcrumb(
   doc: SerializedDoc,
   active: boolean,
   push: (url: string) => void,
-  renameDoc?: (doc: SerializedDoc) => void,
+  renameDoc?: (doc: SerializedDoc, event?: MouseEvent<Element>) => void,
   deleteDoc?: (doc: SerializedDoc) => void
 ): TopbarBreadcrumbProps & AddedProperties {
   return {
@@ -217,7 +221,7 @@ function getDocBreadcrumb(
             {
               icon: mdiPencil,
               label: t(lngKeys.GeneralRenameVerb),
-              onClick: () => renameDoc(doc),
+              onClick: (event: MouseEvent<Element>) => renameDoc(doc, event),
             },
           ]
         : []),
@@ -248,7 +252,10 @@ function getFolderBreadcrumb(
     body: CloudNewResourceRequestBody,
     options: UIFormOptions
   ) => void,
-  renameFolder?: (folder: SerializedFolder) => void,
+  renameFolder?: (
+    folder: SerializedFolder,
+    event?: MouseEvent<Element>
+  ) => void,
   deleteFolder?: (folder: SerializedFolder) => void
 ): TopbarBreadcrumbProps & AddedProperties {
   const newResourceBody = {
@@ -310,7 +317,8 @@ function getFolderBreadcrumb(
             {
               icon: mdiPencil,
               label: t(lngKeys.GeneralRenameVerb),
-              onClick: () => renameFolder(folder),
+              onClick: (event: MouseEvent<Element>) =>
+                renameFolder(folder, event),
             },
           ]
         : []),

src/design/components/organisms/Topbar/atoms/TopbarActionItem.tsx

@@ -14,7 +14,7 @@ interface TopbarActionItemProps {
 export interface TopbarActionItemAttrbs {
   label: string
   icon: string
-  onClick: () => void
+  onClick: (event: React.MouseEvent<Element>) => void
 }
 
 const TopbarActionItem = ({
@@ -40,7 +40,7 @@ const TopbarActionItem = ({
       id={`tree-action-${shortid.generate()}`}
       onClick={(event: React.MouseEvent) => {
         event.preventDefault()
-        item.onClick()
+        item.onClick(event)
       }}
       onFocus={() => setFocused(true)}
       tabIndex={0}

src/design/components/organisms/Topbar/index.tsx

@@ -20,7 +20,7 @@ export interface TopbarBreadcrumbProps {
   icon?: string
   parentId: string
   active?: boolean
-  controls?: { label: string; onClick: () => void; icon: string }[]
+  controls?: TopbarActionItemAttrbs[]
 }
 
 export type TopbarControlButtonProps = ButtonProps & {