Merge pull request #6305 from weseek/feat/gw7840-implement-rename-from-bookmark-sidebar

feat: gw7840 implement rename from bookmark sidebar

packages/app/src/components/Sidebar/Bookmarks.tsx

@@ -1,26 +1,33 @@
 
-import React, { useCallback } from 'react';
+import React, { useCallback, useState } from 'react';
+
+import nodePath from 'path';
 
 import { DevidedPagePath, pathUtils } from '@growi/core';
 import { useTranslation } from 'react-i18next';
 import { UncontrolledTooltip, DropdownToggle } from 'reactstrap';
 
 import { unbookmark } from '~/client/services/page-operation';
+import { toastError, toastSuccess } from '~/client/util/apiNotification';
+import { apiv3Put } from '~/client/util/apiv3-client';
 import { IPageHasId } from '~/interfaces/page';
 import { useSWRxCurrentUserBookmarks } from '~/stores/bookmark';
 import { useIsGuestUser } from '~/stores/context';
 
+import ClosableTextInput, { AlertInfo, AlertType } from '../Common/ClosableTextInput';
 import { MenuItemType, PageItemControl } from '../Common/Dropdown/PageItemControl';
 
 
 type Props = {
   bookmarkedPage: IPageHasId,
-  onPageOperationSuccess: () => void
+  onUnbookmarked: () => void,
+  onRenamed: () => void
 }
 
 const BookmarkItem = (props: Props) => {
-  const { bookmarkedPage, onPageOperationSuccess } = props;
-
+  const { bookmarkedPage, onUnbookmarked, onRenamed } = props;
+  const { t } = useTranslation();
+  const [isRenameInputShown, setRenameInputShown] = useState(false);
   const dPagePath = new DevidedPagePath(bookmarkedPage.path, false, true);
   const { latter: pageTitle, former, isRoot } = dPagePath;
   const formerPagePath = isRoot ? pageTitle : pathUtils.addTrailingSlash(former);
@@ -28,20 +35,70 @@ const BookmarkItem = (props: Props) => {
 
   const bookmarkMenuItemClickHandler = useCallback(async() => {
     await unbookmark(bookmarkedPage._id);
-    onPageOperationSuccess();
-  }, [onPageOperationSuccess, bookmarkedPage]);
+    onUnbookmarked();
+  }, [onUnbookmarked, bookmarkedPage]);
+
+  const renameMenuItemClickHandler = useCallback(() => {
+    setRenameInputShown(true);
+  }, []);
+
+  const inputValidator = (title: string | null): AlertInfo | null => {
+    if (title == null || title === '' || title.trim() === '') {
+      return {
+        type: AlertType.WARNING,
+        message: t('form_validation.title_required'),
+      };
+    }
+
+    return null;
+  };
+
+  const pressEnterForRenameHandler = useCallback(async(inputText: string) => {
+    const parentPath = pathUtils.addTrailingSlash(nodePath.dirname(bookmarkedPage.path ?? ''));
+    const newPagePath = nodePath.resolve(parentPath, inputText);
+    if (newPagePath === bookmarkedPage.path) {
+      setRenameInputShown(false);
+      return;
+    }
+
+    try {
+      setRenameInputShown(false);
+      await apiv3Put('/pages/rename', {
+        pageId: bookmarkedPage._id,
+        revisionId: bookmarkedPage.revision,
+        newPagePath,
+      });
+      onRenamed();
+      toastSuccess(t('renamed_pages', { path: bookmarkedPage.path }));
+    }
+    catch (err) {
+      setRenameInputShown(true);
+      toastError(err);
+    }
+  }, [bookmarkedPage, onRenamed, t]);
 
   return (
     <div className="d-flex justify-content-between" key={bookmarkedPage._id}>
       <li className="list-group-item list-group-item-action border-0 py-0 pr-3 d-flex align-items-center" id={bookmarkItemId}>
-        <a href={`/${bookmarkedPage._id}`} className="grw-bookmarks-title-anchor flex-grow-1">
-          <p className={`text-truncate m-auto ${bookmarkedPage.isEmpty && 'grw-sidebar-text-muted'}`}>{pageTitle}</p>
-        </a>
+        { isRenameInputShown ? (
+          <ClosableTextInput
+            value={nodePath.basename(bookmarkedPage.path ?? '')}
+            placeholder={t('Input page name')}
+            onClickOutside={() => { setRenameInputShown(false) }}
+            onPressEnter={pressEnterForRenameHandler}
+            inputValidator={inputValidator}
+          />
+        ) : (
+          <a href={`/${bookmarkedPage._id}`} className="grw-bookmarks-title-anchor flex-grow-1">
+            <p className={`text-truncate m-auto ${bookmarkedPage.isEmpty && 'grw-sidebar-text-muted'}`}>{pageTitle}</p>
+          </a>
+        )}
         <PageItemControl
           pageId={bookmarkedPage._id}
           isEnableActions
           forceHideMenuItems={[MenuItemType.DUPLICATE]}
           onClickBookmarkMenuItem={bookmarkMenuItemClickHandler}
+          onClickRenameMenuItem={renameMenuItemClickHandler}
         >
           <DropdownToggle color="transparent" className="border-0 rounded btn-page-item-control p-0 grw-visible-on-hover mr-1">
             <i className="icon-options fa fa-rotate-90 p-1"></i>
@@ -52,6 +109,7 @@ const BookmarkItem = (props: Props) => {
           autohide={false}
           placement="right"
           target={bookmarkItemId}
+          fade={false}
         >
           { formerPagePath }
         </UncontrolledTooltip>
@@ -78,7 +136,12 @@ const Bookmarks = () : JSX.Element => {
         <div className="grw-bookmarks-item-container">
           { currentUserBookmarksData?.map((currentUserBookmark) => {
             return (
-              <BookmarkItem key={currentUserBookmark._id} bookmarkedPage={currentUserBookmark} onPageOperationSuccess={mutateCurrentUserBookmarks} />
+              <BookmarkItem
+                key={currentUserBookmark._id}
+                bookmarkedPage={currentUserBookmark}
+                onUnbookmarked={mutateCurrentUserBookmarks}
+                onRenamed={mutateCurrentUserBookmarks}
+              />
             );
           })}
         </div>

packages/app/src/components/Sidebar/PageTree/Item.tsx

@@ -260,7 +260,7 @@ const Item: FC<ItemProps> = (props: ItemProps) => {
     setRenameInputShown(true);
   }, []);
 
-  const onPressEnterForRenameHandler = async(inputText: string) => {
+  const pressEnterForRenameHandler = async(inputText: string) => {
     const parentPath = pathUtils.addTrailingSlash(nodePath.dirname(page.path ?? ''));
     const newPagePath = nodePath.resolve(parentPath, inputText);
 
@@ -445,7 +445,7 @@ const Item: FC<ItemProps> = (props: ItemProps) => {
               value={nodePath.basename(page.path ?? '')}
               placeholder={t('Input page name')}
               onClickOutside={() => { setRenameInputShown(false) }}
-              onPressEnter={onPressEnterForRenameHandler}
+              onPressEnter={pressEnterForRenameHandler}
               inputValidator={inputValidator}
             />
           )