implemented the css of the table

src/client/js/components/ComparePathsTable.jsx

@@ -14,7 +14,7 @@ function ComparePathsTable(props) {
   const { path } = pageContainer.state;
 
   return (
-    <table className="table table-bordered">
+    <table className="table table-bordered compare-page-tabel">
       <thead>
         <tr>
           <th className="w-50">{t('original_path')}</th>

src/client/js/components/PageDuplicateModal.jsx

@@ -50,8 +50,7 @@ const PageDuplicateModal = (props) => {
    */
   function ppacInputChangeHandler(value) {
     getSubordinatedDuplicateList(value);
-    setErrorCode(null);
-    setErrorMessage(null);
+    setErrs(null);
     setPageNameInput(value);
   }
 
@@ -61,8 +60,7 @@ const PageDuplicateModal = (props) => {
    */
   function inputChangeHandler(value) {
     getSubordinatedDuplicateList(value);
-    setErrorCode(null);
-    setErrorMessage(null);
+    setErrs(null);
     setPageNameInput(value);
   }
 

src/client/js/components/PageRenameModal.jsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect, useCallback } from 'react';
 import PropTypes from 'prop-types';
 
 import {
@@ -12,6 +12,7 @@ import { withUnstatedContainers } from './UnstatedUtils';
 import AppContainer from '../services/AppContainer';
 import PageContainer from '../services/PageContainer';
 import ApiErrorMessageList from './PageManagement/ApiErrorMessageList';
+import ComparePathsTable from './ComparePathsTable';
 
 const PageRenameModal = (props) => {
   const {
@@ -26,6 +27,7 @@ const PageRenameModal = (props) => {
 
   const [errs, setErrs] = useState(null);
 
+  const [subordinatedPages, setSubordinatedPages] = useState([]);
   const [isRenameRecursively, SetIsRenameRecursively] = useState(true);
   const [isRenameRedirect, SetIsRenameRedirect] = useState(false);
   const [isRenameMetadata, SetIsRenameMetadata] = useState(false);
@@ -64,6 +66,24 @@ const PageRenameModal = (props) => {
     SetIsRenameMetadata(!isRenameMetadata);
   }
 
+  const getSubordinatedList = useCallback(async() => {
+    try {
+      const res = await appContainer.apiv3Get('/pages/subordinated-list', { path });
+      const { subordinatedPaths } = res.data;
+      setSubordinatedPages(subordinatedPaths);
+    }
+    catch (err) {
+      setErrs(err);
+      toastError(t('modal_duplicate.label.Fail to get subordinated pages'));
+    }
+  }, [appContainer, path, t]);
+
+  useEffect(() => {
+    if (props.isOpen) {
+      getSubordinatedList();
+    }
+  }, [props.isOpen, getSubordinatedList]);
+
   /**
    * change pageNameInput
    * @param {string} value
@@ -155,11 +175,7 @@ const PageRenameModal = (props) => {
               { t('modal_duplicate.label.Duplicate without exist path') }
             </label>
           </div>
-          <div className="rename-new-path-content">
-            <ul>
-              {isRenameRecursively && isDuplicateExistList.length !== 0 && isDuplicateExistList}
-            </ul>
-          </div>
+          {isRenameRecursively && <ComparePathsTable subordinatedPages={subordinatedPages} newPagePath={pageNameInput} />}
         </div>
 
         <div className="custom-control custom-checkbox custom-checkbox-success">

src/client/styles/scss/_create-page.scss

@@ -13,11 +13,28 @@
     font-family: $font-family-monospace-not-strictly;
   }
 
-  .rename-new-path-content {
-    height: 100px;
-    padding: 4px;
-    margin-bottom: 8px;
-    overflow: scroll;
-    border: 1px solid #000;
+  .compare-page-tabel {
+    width: 100%;
+  }
+
+  .compare-page-tabel tbody {
+    width: 100%;
+    height: 200px;
+    overflow-y: auto;
+  }
+
+  .compare-page-tabel thead,
+  tbody,
+  tr,
+  td,
+  th {
+    display: block;
+  }
+  .compare-page-tabel tbody td {
+    float: left;
+  }
+
+  .compare-page-tabel thead tr th {
+    float: left;
   }
 }