update modal header elements

apps/app/_obsolete/src/components/PageEditor/ConflictDiffModal.tsx

@@ -130,20 +130,16 @@ const ConflictDiffModalCore = (props: ConflictDiffModalCoreProps): JSX.Element =
 
   }, [afterResolvedHandler, close, currentPagePath, currentPathname, optionsToSave, pageId, remoteRevisionId, saveOrUpdate, setRemoteLatestPageData]);
 
-  // TODO: No longer support custom close icon in bootstrap v5
-  // https://redmine.weseek.co.jp/issues/128470
-  // const resizeAndCloseButtons = useMemo(() => (
-  //   <div className="d-flex flex-nowrap">
-  //     <ExpandOrContractButton
-  //       isWindowExpanded={isModalExpanded}
-  //       expandWindow={() => setIsModalExpanded(true)}
-  //       contractWindow={() => setIsModalExpanded(false)}
-  //     />
-  //     <button type="button" className="close text-white" onClick={close} aria-label="Close">
-  //       <span aria-hidden="true">&times;</span>
-  //     </button>
-  //   </div>
-  // ), [isModalExpanded, close]);
+  const resizeAndCloseButtons = useMemo(() => (
+    <div className='me-3 text-right'>
+      <ExpandOrContractButton
+        isWindowExpanded={isModalExpanded}
+        expandWindow={() => setIsModalExpanded(true)}
+        contractWindow={() => setIsModalExpanded(false)}
+      />
+      <button type="button" className="btn btn-close text-white" onClick={close} aria-label="Close"></button>
+    </div>
+  ), [isModalExpanded, close]);
 
   const isOpen = props.isOpen ?? false;
 
@@ -155,8 +151,7 @@ const ConflictDiffModalCore = (props: ConflictDiffModalCoreProps): JSX.Element =
       className={`${isModalExpanded ? ' grw-modal-expanded' : ''}`}
       size="xl"
     >
-      {/* <ModalHeader tag="h4" toggle={onClose} className="bg-primary text-light align-items-center py-3" close={resizeAndCloseButtons}> */}
-      <ModalHeader tag="h4" toggle={onClose} className="bg-primary text-light align-items-center py-3">
+      <ModalHeader tag="h4" toggle={onClose} className="bg-primary text-light align-items-center py-3" close={resizeAndCloseButtons}>
         <i className="icon-fw icon-exclamation" />{t('modal_resolve_conflict.resolve_conflict')}
       </ModalHeader>
       <ModalBody className="mx-4 my-1">

apps/app/src/components/DescendantsPageListModal.tsx

@@ -70,21 +70,16 @@ export const DescendantsPageListModal = (): JSX.Element => {
     };
   }, [isSharedUser, status, t]);
 
-  // TODO: No longer support custom close icon in bootstrap v5
-  // https://redmine.weseek.co.jp/issues/128470
-  // const buttons = useMemo(() => (
-  //   <div className="d-flex flex-nowrap">
-  //     <ExpandOrContractButton
-  //       isWindowExpanded={isWindowExpanded}
-  //       expandWindow={() => setIsWindowExpanded(true)}
-  //       contractWindow={() => setIsWindowExpanded(false)}
-  //     />
-  //     <button type="button" className="close" onClick={close} aria-label="Close">
-  //       <span aria-hidden="true">&times;</span>
-  //     </button>
-  //   </div>
-  // ), [close, isWindowExpanded]);
-
+  const buttons = useMemo(() => (
+    <div className='me-3 text-right'>
+      <ExpandOrContractButton
+        isWindowExpanded={isWindowExpanded}
+        expandWindow={() => setIsWindowExpanded(true)}
+        contractWindow={() => setIsWindowExpanded(false)}
+      />
+      <button type="button" className="btn btn-close" onClick={close} aria-label="Close"></button>
+    </div>
+  ), [close, isWindowExpanded]);
 
   if (status == null) {
     return <></>;
@@ -100,8 +95,7 @@ export const DescendantsPageListModal = (): JSX.Element => {
       data-testid="descendants-page-list-modal"
       className={`grw-descendants-page-list-modal ${styles['grw-descendants-page-list-modal']} ${isWindowExpanded ? 'grw-modal-expanded' : ''} `}
     >
-      {/* <ModalHeader className="p-0" toggle={close} close={buttons}> */}
-      <ModalHeader className="p-0" toggle={close}>
+      <ModalHeader className="p-0" toggle={close} close={buttons}>
         <CustomNavTab
           activeTab={activeTab}
           navTabMapping={navTabMapping}

apps/app/src/components/PageAccessoriesModal/PageAccessoriesModal.tsx

@@ -71,20 +71,16 @@ export const PageAccessoriesModal = (): JSX.Element => {
     };
   }, [t, close, isGuestUser, isReadOnlyUser, isSharedUser, isLinkSharingDisabled]);
 
-  // TODO: No longer support custom close icon in bootstrap v5
-  // https://redmine.weseek.co.jp/issues/128470
-  // const buttons = useMemo(() => (
-  //   <div className="d-flex flex-nowrap">
-  //     <ExpandOrContractButton
-  //       isWindowExpanded={isWindowExpanded}
-  //       expandWindow={() => setIsWindowExpanded(true)}
-  //       contractWindow={() => setIsWindowExpanded(false)}
-  //     />
-  //     <button type="button" className="close" onClick={close} aria-label="Close">
-  //       <span aria-hidden="true">&times;</span>
-  //     </button>
-  //   </div>
-  // ), [close, isWindowExpanded]);
+  const buttons = useMemo(() => (
+    <div className='me-3 text-right'>
+      <ExpandOrContractButton
+        isWindowExpanded={isWindowExpanded}
+        expandWindow={() => setIsWindowExpanded(true)}
+        contractWindow={() => setIsWindowExpanded(false)}
+      />
+      <button type="button" className="btn btn-close" onClick={close} aria-label="Close"></button>
+    </div>
+  ), [close, isWindowExpanded]);
 
   if (status == null || status.activatedContents == null) {
     return <></>;
@@ -100,8 +96,7 @@ export const PageAccessoriesModal = (): JSX.Element => {
       data-testid="page-accessories-modal"
       className={`grw-page-accessories-modal ${styles['grw-page-accessories-modal']} ${isWindowExpanded ? 'grw-modal-expanded' : ''} `}
     >
-      {/* <ModalHeader className="p-0" toggle={close} close={buttons}> */}
-      <ModalHeader className="p-0" toggle={close}>
+      <ModalHeader className="p-0" toggle={close} close={buttons}>
         <CustomNavTab
           activeTab={status.activatedContents}
           navTabMapping={navTabMapping}

apps/app/src/components/PageEditor/HandsontableModal.tsx

@@ -428,21 +428,17 @@ export const HandsontableModal = (): JSX.Element => {
     contextMenu: createCustomizedContextMenu(),
   });
 
-  // TODO: No longer support custom close icon in bootstrap v5
-  // https://redmine.weseek.co.jp/issues/128470
-  // const closeButton = (
-  //   <span>
-  //     {/* change order because of `float: right` by '.close' class */}
-  //     <button type="button" className="close" onClick={cancel} aria-label="Close">
-  //       <span aria-hidden="true">&times;</span>
-  //     </button>
-  //     <ExpandOrContractButton
-  //       isWindowExpanded={isWindowExpanded}
-  //       contractWindow={contractWindow}
-  //       expandWindow={expandWindow}
-  //     />
-  //   </span>
-  // );
+  const closeButton = (
+    <span>
+      {/* change order because of `float: right` by '.close' class */}
+      <button type="button" className="btn btn-close" onClick={cancel} aria-label="Close"></button>
+      <ExpandOrContractButton
+        isWindowExpanded={isWindowExpanded}
+        contractWindow={contractWindow}
+        expandWindow={expandWindow}
+      />
+    </span>
+  );
 
   return (
     <Modal
@@ -455,8 +451,7 @@ export const HandsontableModal = (): JSX.Element => {
       className={`handsontable-modal ${isWindowExpanded && 'grw-modal-expanded'}`}
       onOpened={handleModalOpen}
     >
-      {/* <ModalHeader tag="h4" toggle={cancel} close={closeButton} className="bg-primary text-light"> */}
-      <ModalHeader tag="h4" toggle={cancel} className="bg-primary text-light">
+      <ModalHeader tag="h4" toggle={cancel} close={closeButton} className="bg-primary text-light">
         {t('handsontable_modal.title')}
       </ModalHeader>
       <ModalBody className="p-0 d-flex flex-column">