Code improvement

https://youtrack.weseek.co.jp/issue/GW-7826
- Change icon to switch button
- Add condition to show / hide content width switcher button
- Add Dropdown item divider
- Disable change class on-search
- Remove unused constant
- Disable Switch content width on search result
- Update null check of page.isContainerFluid
- Rename validator and request body param

packages/app/src/client/services/page-operation.ts

@@ -37,9 +37,9 @@ export const toggleBookmark = async(pageId: string, currentValue?: boolean): Pro
   }
 };
 
-export const toggleContentWidth = async(pageId: string, currentValue?: boolean): Promise<void> => {
+export const toggleContentWidth = async(pageId: string, currentValue: boolean): Promise<void> => {
   try {
-    await apiv3Put('/page/content-width', { pageId, bool: !currentValue });
+    await apiv3Put('/page/content-width', { pageId, isContainerFluid: !currentValue });
   }
   catch (err) {
     toastError(err);

packages/app/src/components/Common/Dropdown/PageItemControl.tsx

@@ -22,6 +22,7 @@ export const MenuItemType = {
   DELETE: 'delete',
   REVERT: 'revert',
   PATH_RECOVERY: 'pathRecovery',
+  SWITCH_CONTENT_WIDTH: 'switch_content_width',
 } as const;
 export type MenuItemType = typeof MenuItemType[keyof typeof MenuItemType];
 
@@ -156,16 +157,28 @@ const PageItemControlDropdownMenu = React.memo((props: DropdownMenuProps): JSX.E
           </DropdownItem>
         ) }
 
-        { isEnableActions && !pageInfo.isEmpty && isIPageInfoForOperation(pageInfo) && (
+        {/* Content width switcher */}
+        { !forceHideMenuItems?.includes(MenuItemType.SWITCH_CONTENT_WIDTH) && isEnableActions && !pageInfo.isEmpty && isIPageInfoForOperation(pageInfo) && (
           <DropdownItem
             onClick={switchContentWidthHandler}
             className="grw-page-control-dropdown-item"
           >
-            <i className={`fa fa-fw ${!pageInfo.isContainerFluid ? 'fa-toggle-off' : 'fa-toggle-on'} grw-page-control-dropdown-icon`}>
-            </i>
-            { t('wide_view') }
+            <div className="custom-control custom-switch ml-1">
+              <input
+                id="switchContentWidth"
+                className="custom-control-input"
+                type="checkbox"
+                checked={pageInfo.isContainerFluid}
+                onChange={() => {}}
+              />
+              <label className="custom-control-label" htmlFor="switchContentWidth">
+                { t('wide_view') }
+              </label>
+            </div>
           </DropdownItem>
         ) }
+        { !forceHideMenuItems?.includes(MenuItemType.SWITCH_CONTENT_WIDTH) && <DropdownItem divider /> }
+
 
         {/* Bookmark */}
         { !forceHideMenuItems?.includes(MenuItemType.BOOKMARK) && isEnableActions && !pageInfo.isEmpty && isIPageInfoForOperation(pageInfo) && (
@@ -286,7 +299,7 @@ export const PageItemControlSubstance = (props: PageItemControlSubstanceProps):
     if (!isIPageInfoForOperation(presetPageInfo) && isOpen) {
       setShouldFetch(true);
     }
-    if (presetPageInfo?.isContainerFluid) {
+    if (presetPageInfo?.isContainerFluid && !$('body').hasClass('on-search')) {
       if (!$('body').hasClass('growi-layout-fluid')) {
         $('body').addClass('growi-layout-fluid');
       }

packages/app/src/components/Navbar/SubNavButtons.tsx

@@ -158,7 +158,7 @@ const SubNavButtonsSubstance = (props: SubNavButtonsSubstanceProps): JSX.Element
   }
 
   const {
-    sumOfLikers, sumOfSeenUsers, isLiked, bookmarkCount, isBookmarked, isContainerFluid,
+    sumOfLikers, sumOfSeenUsers, isLiked, bookmarkCount, isBookmarked,
   } = pageInfo;
 
   const forceHideMenuItemsWithBookmark = forceHideMenuItems ?? [];

packages/app/src/components/SearchPage/SearchResultList.tsx

@@ -2,7 +2,9 @@ import React, {
   forwardRef,
   ForwardRefRenderFunction, useCallback, useImperativeHandle, useRef,
 } from 'react';
+
 import { useTranslation } from 'react-i18next';
+
 import { ISelectable, ISelectableAll } from '~/client/interfaces/selectable-all';
 import { toastSuccess } from '~/client/util/apiNotification';
 import {
@@ -14,8 +16,8 @@ import { useIsGuestUser } from '~/stores/context';
 import { useSWRxPageInfoForList } from '~/stores/page';
 import { usePageTreeTermManager } from '~/stores/page-listing';
 import { useFullTextSearchTermManager } from '~/stores/search';
-import { ForceHideMenuItems } from '../Common/Dropdown/PageItemControl';
 
+import { ForceHideMenuItems, MenuItemType } from '../Common/Dropdown/PageItemControl';
 import { PageListItemL } from '../PageList/PageListItemL';
 
 
@@ -124,7 +126,8 @@ const SearchResultListSubstance: ForwardRefRenderFunction<ISelectableAll, Props>
     advanceFts();
   };
 
-
+  const forceHideMenuItemsWithSwitchContent = forceHideMenuItems ?? [];
+  forceHideMenuItemsWithSwitchContent.push(MenuItemType.SWITCH_CONTENT_WIDTH);
   return (
     <ul data-testid="search-result-list" className="page-list-ul list-group list-group-flush">
       { (injectedPages ?? pages).map((page, i) => {
@@ -136,7 +139,7 @@ const SearchResultListSubstance: ForwardRefRenderFunction<ISelectableAll, Props>
             page={page}
             isEnableActions={!isGuestUser}
             isSelected={page.data._id === selectedPageId}
-            forceHideMenuItems={forceHideMenuItems}
+            forceHideMenuItems={forceHideMenuItemsWithSwitchContent}
             onClickItem={clickItemHandler}
             onCheckboxChanged={props.onCheckboxChanged}
             onPageDuplicated={duplicatedHandler}

packages/app/src/interfaces/page.ts

@@ -54,7 +54,7 @@ export type IPageInfo = {
   isDeletable: boolean,
   isAbleToDeleteCompletely: boolean,
   isRevertible: boolean,
-  isContainerFluid?: boolean,
+  isContainerFluid: boolean,
 }
 
 export type IPageInfoForEntity = IPageInfo & {

packages/app/src/server/routes/apiv3/page.js

@@ -224,7 +224,7 @@ module.exports = (crowi) => {
     ],
     contentWidth: [
       body('pageId').isString(),
-      body('bool').isBoolean(),
+      body('isContainerFluid').isBoolean(),
     ],
   };
 
@@ -796,8 +796,9 @@ module.exports = (crowi) => {
     }
   });
 
+
   router.put('/content-width', apiLimiter, accessTokenParser, loginRequiredStrictly, csrf, validator.contentWidth, apiV3FormValidator, async(req, res) => {
-    const { pageId, bool: isContainerFluid } = req.body;
+    const { pageId, isContainerFluid } = req.body;
 
     try {
       const page = await Page.updateOne({ _id: pageId }, { $set: { isContainerFluid } });

packages/app/src/server/service/page.ts

@@ -323,6 +323,7 @@ class PageService {
           isDeletable: false,
           isAbleToDeleteCompletely: false,
           isRevertible: false,
+          isContainerFluid: page.isContainerFluid,
         },
       };
     }
@@ -350,7 +351,7 @@ class PageService {
     const isAbleToDeleteCompletely: boolean = this.canDeleteCompletely((page.creator as IUserHasId)?._id, user, false); // use normal delete config
 
     const subscription = await Subscription.findByUserIdAndTargetId(user._id, pageId);
-    const isContainerFluid: boolean = page.isContainerFluid !== undefined
+    const isContainerFluid: boolean = page.isContainerFluid != null
       ? page.isContainerFluid
       : this.crowi.configManager.getConfig('crowi', 'customize:isContainerFluid');
 
@@ -2186,6 +2187,7 @@ class PageService {
         isDeletable: false,
         isAbleToDeleteCompletely: false,
         isRevertible: false,
+        isContainerFluid: false,
       };
     }
 
@@ -2203,6 +2205,7 @@ class PageService {
       isDeletable: isMovable,
       isAbleToDeleteCompletely: false,
       isRevertible: isTrashPage(page.path),
+      isContainerFluid: page.isContainerFluid,
     };
 
   }