Merge pull request #4933 from weseek/feat/81920-83419-fix-search-right-pane

Feat/81920 83419 fix search right pane

packages/app/src/components/Page/PageManagement.jsx

@@ -206,7 +206,7 @@ const LegacyPageManagemenet = (props) => {
           className={`btn-link nav-link dropdown-toggle dropdown-toggle-no-caret border-0 rounded grw-btn-page-management ${isCompactMode && 'py-0'}`}
           data-toggle="dropdown"
         >
-          <i className="icon-options"></i>
+          <i className="text-muted icon-options"></i>
         </button>
       </>
     );
@@ -220,7 +220,7 @@ const LegacyPageManagemenet = (props) => {
           className={`btn nav-link bg-transparent dropdown-toggle dropdown-toggle-no-caret disabled ${isCompactMode && 'py-0'}`}
           id="icon-options-guest-tltips"
         >
-          <i className="icon-options"></i>
+          <i className="text-muted icon-options"></i>
         </button>
         <UncontrolledTooltip placement="top" target="icon-options-guest-tltips" fade={false}>
           {t('Not available for guest')}

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

@@ -22,20 +22,22 @@ const SearchResultContent: FC<Props> = (props: Props) => {
   if (page == null) return <></>;
   const growiRenderer = props.appContainer.getRenderer('searchresult');
   return (
-    <div key={page._id} className="search-result-page mb-5">
+    <div key={page._id} className="search-result-page grw-page-path-text-muted-container d-flex flex-column">
       <SearchResultContentSubNavigation
         pageId={page._id}
         revisionId={page.revision}
         path={page.path}
       >
       </SearchResultContentSubNavigation>
-      <RevisionLoader
-        growiRenderer={growiRenderer}
-        pageId={page._id}
-        pagePath={page.path}
-        revisionId={page.revision}
-        highlightKeywords={props.searchingKeyword}
-      />
+      <div className="search-result-page-content">
+        <RevisionLoader
+          growiRenderer={growiRenderer}
+          pageId={page._id}
+          pagePath={page.path}
+          revisionId={page.revision}
+          highlightKeywords={props.searchingKeyword}
+        />
+      </div>
     </div>
   );
 };

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

@@ -1,11 +1,8 @@
-import React, { FC, useCallback } from 'react';
+import React, { FC } from 'react';
 import { pagePathUtils } from '@growi/core';
 import PagePathNav from '../PagePathNav';
 import { withUnstatedContainers } from '../UnstatedUtils';
 import AppContainer from '../../client/services/AppContainer';
-import TagLabels from '../Page/TagLabels';
-import { toastSuccess, toastError } from '../../client/util/apiNotification';
-import { apiPost } from '../../client/util/apiv1-client';
 import { useSWRTagsInfo } from '../../stores/page';
 import SubNavButtons from '../Navbar/SubNavButtons';
 
@@ -26,18 +23,7 @@ const SearchResultContentSubNavigation: FC<Props> = (props : Props) => {
 
   const { isTrashPage, isDeletablePage } = pagePathUtils;
 
-  const { data: tagInfoData, error: tagInfoError, mutate: mutateTagInfo } = useSWRTagsInfo(pageId);
-
-  const tagsUpdatedHandler = useCallback(async(newTags) => {
-    try {
-      await apiPost('/tags.update', { pageId, tags: newTags });
-      toastSuccess('updated tags successfully');
-      mutateTagInfo();
-    }
-    catch (err) {
-      toastError(err, 'fail to update tags');
-    }
-  }, [pageId, mutateTagInfo]);
+  const { data: tagInfoData, error: tagInfoError } = useSWRTagsInfo(pageId);
 
   if (tagInfoError != null || tagInfoData == null) {
     return <></>;
@@ -46,33 +32,30 @@ const SearchResultContentSubNavigation: FC<Props> = (props : Props) => {
   const { isSharedUser } = appContainer;
   const isAbleToShowPageManagement = !(isTrashPage(path)) && !isSharedUser;
   return (
-    <div className={`grw-subnav container-fluid d-flex align-items-center justify-content-between ${isCompactMode ? 'grw-subnav-compact d-print-none' : ''}`}>
-      {/* Left side */}
-      <div className="grw-path-nav-container">
-        {!isSharedUser && !isCompactMode && (
-          <div className="grw-taglabels-container">
-            <TagLabels tags={tagInfoData.tags} tagsUpdateInvoked={tagsUpdatedHandler} />
-          </div>
-        )}
-        <PagePathNav pageId={pageId} pagePath={path} isCompactMode={isCompactMode} isSingleLineMode={isSignleLineMode} />
-      </div>
-      {/* Right side */}
-      {/*
-        DeleteCompletely is currently disabled
-        TODO : Retrive isAbleToDeleteCompleltly state everywhere in the system via swr.
-        story: https://redmine.weseek.co.jp/issues/82222
-      */}
-      <div className="d-flex">
-        <SubNavButtons
-          isCompactMode={isCompactMode}
-          pageId={pageId}
-          revisionId={revisionId}
-          path={path}
-          isDeletable={isPageDeletable}
-          // isAbleToDeleteCompletely={}
-          willShowPageManagement={isAbleToShowPageManagement}
-        >
-        </SubNavButtons>
+    <div className="position-sticky fixed-top shadow-sm search-result-content-nav">
+      <div className={`grw-subnav container-fluid d-flex align-items-start justify-content-between ${isCompactMode ? 'grw-subnav-compact d-print-none' : ''}`}>
+        {/* Left side */}
+        <div className="grw-path-nav-container">
+          <PagePathNav pageId={pageId} pagePath={path} isCompactMode={isCompactMode} isSingleLineMode={isSignleLineMode} />
+        </div>
+        {/* Right side */}
+        {/*
+          DeleteCompletely is currently disabled
+          TODO : Retrive isAbleToDeleteCompleltly state everywhere in the system via swr.
+          story: https://redmine.weseek.co.jp/issues/82222
+        */}
+        <div className="d-flex">
+          <SubNavButtons
+            isCompactMode={isCompactMode}
+            pageId={pageId}
+            revisionId={revisionId}
+            path={path}
+            isDeletable={isPageDeletable}
+            // isAbleToDeleteCompletely={}
+            willShowPageManagement={isAbleToShowPageManagement}
+          >
+          </SubNavButtons>
+        </div>
       </div>
     </div>
   );

packages/app/src/styles/_search.scss

@@ -250,12 +250,17 @@
     }
   }
   .search-result-content {
-    padding-bottom: 36px;
+    .search-result-content-nav {
+      min-height: $grw-subnav-search-preview-min-height;
+      overflow: auto;
+
+      .grw-subnav {
+        min-height: inherit;
+      }
+    }
 
     .search-result-page {
-      padding-top: 64px;
-      // adjust for anchor links by the height of fixed .search-page-input
-      margin-top: -64px;
+      height: calc(100vh - ($grw-navbar-height + $grw-navbar-border-width));
 
       > h2 {
         margin-right: 10px;
@@ -267,10 +272,14 @@
         margin-top: 0;
       }
 
-      .wiki {
-        padding: 16px;
-        font-size: 13px;
-        border: solid 1px $gray-300;
+      .search-result-page-content {
+        overflow-y: auto;
+
+        .wiki {
+          padding: 16px;
+          font-size: 13px;
+          border: solid 1px $gray-300;
+        }
       }
     }
   }

packages/app/src/styles/_variables.scss

@@ -21,6 +21,8 @@ $grw-subnav-min-height-md: 115px;
 $grw-subnav-height-on-edit: 95px;
 $grw-subnav-height-lg-on-edit: 50px;
 
+$grw-subnav-search-preview-min-height: 90px;
+
 $grw-navbar-bottom-height: 48px;
 $grw-editor-navbar-bottom-height: 48px;