change to display ParentPagePath in PagePathHeader

apps/app/src/components/PageHeader/PagePathHeader.tsx

@@ -1,7 +1,10 @@
 import type { FC } from 'react';
 import { useMemo, useState, useEffect } from 'react';
 
+import nodePath from 'path';
+
 import type { IPagePopulatedToShowRevision } from '@growi/core';
+import { pathUtils } from '@growi/core/dist/utils';
 
 import { usePageSelectModal } from '~/stores/modal';
 import { EditorMode, useEditorMode } from '~/stores/ui';
@@ -12,6 +15,7 @@ import { PageSelectModal } from '../PageSelectModal/PageSelectModal';
 import { TextInputForPageTitleAndPath, type editingPagePathHandler } from './TextInputForPageTitleAndPath';
 import { usePagePathRenameHandler } from './page-header-utils';
 
+
 export type Props = {
   currentPagePath: string
   currentPage: IPagePopulatedToShowRevision
@@ -29,6 +33,9 @@ export const PagePathHeader: FC<Props> = (props) => {
 
   const { editingPagePath, setEditingPagePath } = editingPagePathHandler;
 
+  const pageTitle = nodePath.basename(currentPagePath ?? '') || '/';
+  const parentPagePath = pathUtils.addHeadingSlash(nodePath.dirname(currentPage.path ?? ''));
+
   const onRenameFinish = () => {
     setRenameInputShown(false);
   };
@@ -50,16 +57,17 @@ export const PagePathHeader: FC<Props> = (props) => {
     <>
       {currentPagePath != null && (
         <PagePathNav
-          pageId={currentPage._id}
-          pagePath={currentPagePath}
+          pagePath={parentPagePath}
           isSingleLineMode={isEditorMode}
         />
       )}
     </>
-  ), [currentPage._id, currentPagePath, isEditorMode]);
+  ), [currentPagePath, isEditorMode, parentPagePath]);
 
   const handleInputChange = (inputText: string) => {
-    setEditingPagePath(inputText);
+    const editingParentPagePath = inputText;
+    const newPagePath = nodePath.resolve(editingParentPagePath, pageTitle);
+    setEditingPagePath(newPagePath);
   };
 
   const handleEditButtonClick = () => {
@@ -103,7 +111,7 @@ export const PagePathHeader: FC<Props> = (props) => {
             currentPage={currentPage}
             stateHandler={stateHandler}
             editingPagePathHandler={editingPagePathHandler}
-            inputValue={editingPagePath}
+            inputValue={parentPagePath}
             CustomComponent={PagePath}
             handleInputChange={handleInputChange}
           />

apps/app/src/components/PageHeader/TextInputForPageTitleAndPath.tsx

@@ -1,10 +1,7 @@
-import { useCallback, useEffect } from 'react';
+import { useCallback } from 'react';
 import type { Dispatch, SetStateAction, FC } from 'react';
 
-import nodePath from 'path';
-
 import type { IPagePopulatedToShowRevision } from '@growi/core';
-import { pathUtils } from '@growi/core/dist/utils';
 import { useTranslation } from 'next-i18next';
 
 import { ValidationTarget } from '~/client/util/input-validator';
@@ -42,7 +39,7 @@ export const TextInputForPageTitleAndPath: FC<Props> = (props) => {
   const { t } = useTranslation();
 
   const { isRenameInputShown, setRenameInputShown } = stateHandler;
-  const { setEditingPagePath } = editingPagePathHandler;
+  const { editingPagePath, setEditingPagePath } = editingPagePathHandler;
 
   const onRenameFinish = () => {
     setRenameInputShown(false);
@@ -54,14 +51,9 @@ export const TextInputForPageTitleAndPath: FC<Props> = (props) => {
 
   const pagePathRenameHandler = usePagePathRenameHandler(currentPage, onRenameFinish, onRenameFailure);
 
-  const onPressEnter = useCallback((inputPagePath: string) => {
-
-    const parentPath = pathUtils.addTrailingSlash(nodePath.dirname(currentPage.path ?? ''));
-    const newPagePath = nodePath.resolve(parentPath, inputPagePath);
-
-    pagePathRenameHandler(newPagePath);
-
-  }, [currentPage.path, pagePathRenameHandler]);
+  const onPressEnter = useCallback(() => {
+    pagePathRenameHandler(editingPagePath);
+  }, [editingPagePath, pagePathRenameHandler]);
 
   const onPressEscape = useCallback(() => {
     setEditingPagePath(currentPage.path);