Merge branch 'feat/77524-search-result-conent-page' into feat/77524-80481-SubNavButtons-refactor

* feat/77524-search-result-conent-page:
  78782 fb props nullable
  removed diffs
  tag conditional rendering
  code orginized
  78782 PagePathNav to tsx component
  78782 SearchResutlContentSubNavigation component
  78782 pagePathNav to component
  78782 diff
  78782 removed withTranslation
  78782 added todo comments
  78782 delete SearchResultContentSubNavigation
  78782 GrowiSubNavigation refactor
  todo comment
  const require
  78782 todo added
  78782
  78782 add comment
  78782 SearchResultContentSubNavigation to tsx
  78782 wip search result conent

packages/app/src/components/Navbar/GrowiSubNavigation.jsx

@@ -1,18 +1,11 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import { withTranslation } from 'react-i18next';
-
-import { DevidedPagePath } from '@growi/core';
-import PagePathHierarchicalLink from '~/components/PagePathHierarchicalLink';
-import LinkedPagePath from '~/models/linked-page-path';
-
 import { withUnstatedContainers } from '../UnstatedUtils';
 import AppContainer from '~/client/services/AppContainer';
 import NavigationContainer from '~/client/services/NavigationContainer';
 import PageContainer from '~/client/services/PageContainer';
 
-import CopyDropdown from '../Page/CopyDropdown';
 import TagLabels from '../Page/TagLabels';
 import SubnavButtons from './SubNavButtons';
 import PageEditorModeManager from './PageEditorModeManager';
@@ -20,51 +13,7 @@ import PageEditorModeManager from './PageEditorModeManager';
 import AuthorInfo from './AuthorInfo';
 import DrawerToggler from './DrawerToggler';
 
-const PagePathNav = ({
-  // eslint-disable-next-line react/prop-types
-  pageId, pagePath, isEditorMode, isCompactMode,
-}) => {
-
-  const dPagePath = new DevidedPagePath(pagePath, false, true);
-
-  let formerLink;
-  let latterLink;
-
-  // one line
-  if (dPagePath.isRoot || dPagePath.isFormerRoot || isEditorMode) {
-    const linkedPagePath = new LinkedPagePath(pagePath);
-    latterLink = <PagePathHierarchicalLink linkedPagePath={linkedPagePath} />;
-  }
-  // two line
-  else {
-    const linkedPagePathFormer = new LinkedPagePath(dPagePath.former);
-    const linkedPagePathLatter = new LinkedPagePath(dPagePath.latter);
-    formerLink = <PagePathHierarchicalLink linkedPagePath={linkedPagePathFormer} />;
-    latterLink = <PagePathHierarchicalLink linkedPagePath={linkedPagePathLatter} basePath={dPagePath.former} />;
-  }
-
-  const copyDropdownId = `copydropdown${isCompactMode ? '-subnav-compact' : ''}-${pageId}`;
-  const copyDropdownToggleClassName = 'd-block text-muted bg-transparent btn-copy border-0 py-0';
-
-  return (
-    <div className="grw-page-path-nav">
-      {formerLink}
-      <span className="d-flex align-items-center">
-        <h1 className="m-0">{latterLink}</h1>
-        <div className="mx-2">
-          <CopyDropdown
-            pageId={pageId}
-            pagePath={pagePath}
-            dropdownToggleId={copyDropdownId}
-            dropdownToggleClassName={copyDropdownToggleClassName}
-          >
-            <i className="ti-clipboard"></i>
-          </CopyDropdown>
-        </div>
-      </span>
-    </div>
-  );
-};
+import PagePathNav from '../PagePathNav';
 
 const GrowiSubNavigation = (props) => {
   const {
@@ -101,7 +50,7 @@ const GrowiSubNavigation = (props) => {
               <TagLabels editorMode={editorMode} />
             </div>
           ) }
-          <PagePathNav pageId={pageId} pagePath={path} isEditorMode={isEditorMode} isCompactMode={isCompactMode} />
+          <PagePathNav pageId={pageId} pagePath={path} isSingleLineMode={isEditorMode} isCompactMode={isCompactMode} />
         </div>
       </div>
 
@@ -136,10 +85,8 @@ const GrowiSubNavigation = (props) => {
           </ul>
         ) }
       </div>
-
     </div>
   );
-
 };
 
 /**
@@ -149,7 +96,6 @@ const GrowiSubNavigationWrapper = withUnstatedContainers(GrowiSubNavigation, [Ap
 
 
 GrowiSubNavigation.propTypes = {
-  t: PropTypes.func.isRequired, //  i18next
   appContainer: PropTypes.instanceOf(AppContainer).isRequired,
   navigationContainer: PropTypes.instanceOf(NavigationContainer).isRequired,
   pageContainer: PropTypes.instanceOf(PageContainer).isRequired,
@@ -157,4 +103,4 @@ GrowiSubNavigation.propTypes = {
   isCompactMode: PropTypes.bool,
 };
 
-export default withTranslation()(GrowiSubNavigationWrapper);
+export default GrowiSubNavigationWrapper;

packages/app/src/components/PagePathNav.tsx

@@ -0,0 +1,56 @@
+import React, { FC } from 'react';
+import { DevidedPagePath } from '@growi/core';
+import PagePathHierarchicalLink from './PagePathHierarchicalLink';
+import CopyDropdown from './Page/CopyDropdown';
+
+import LinkedPagePath from '../models/linked-page-path';
+
+
+type Props = {
+  pageId :string,
+  pagePath:string,
+  isSingleLineMode?:boolean,
+  isCompactMode?:boolean,
+}
+
+const PagePathNav: FC<Props> = (props: Props) => {
+  const {
+    pageId, pagePath, isSingleLineMode, isCompactMode,
+  } = props;
+  const dPagePath = new DevidedPagePath(pagePath, false, true);
+
+  let formerLink;
+  let latterLink;
+
+  // one line
+  if (dPagePath.isRoot || dPagePath.isFormerRoot || isSingleLineMode) {
+    const linkedPagePath = new LinkedPagePath(pagePath);
+    latterLink = <PagePathHierarchicalLink linkedPagePath={linkedPagePath} />;
+  }
+  // two line
+  else {
+    const linkedPagePathFormer = new LinkedPagePath(dPagePath.former);
+    const linkedPagePathLatter = new LinkedPagePath(dPagePath.latter);
+    formerLink = <PagePathHierarchicalLink linkedPagePath={linkedPagePathFormer} />;
+    latterLink = <PagePathHierarchicalLink linkedPagePath={linkedPagePathLatter} basePath={dPagePath.former} />;
+  }
+
+  const copyDropdownId = `copydropdown${isCompactMode ? '-subnav-compact' : ''}-${pageId}`;
+  const copyDropdownToggleClassName = 'd-block text-muted bg-transparent btn-copy border-0 py-0';
+
+  return (
+    <div className="grw-page-path-nav">
+      {formerLink}
+      <span className="d-flex align-items-center">
+        <h1 className="m-0">{latterLink}</h1>
+        <div className="mx-2">
+          <CopyDropdown pageId={pageId} pagePath={pagePath} dropdownToggleId={copyDropdownId} dropdownToggleClassName={copyDropdownToggleClassName}>
+            <i className="ti-clipboard"></i>
+          </CopyDropdown>
+        </div>
+      </span>
+    </div>
+  );
+};
+
+export default PagePathNav;

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

@@ -2,7 +2,7 @@ import React, { FC } from 'react';
 
 import RevisionLoader from '../Page/RevisionLoader';
 import AppContainer from '../../client/services/AppContainer';
-
+import SearchResultContentSubNavigation from './SearchResultContentSubNavigation';
 
 type Props ={
   appContainer: AppContainer,
@@ -15,21 +15,13 @@ const SearchResultContent: FC<Props> = (props: Props) => {
   // Temporaly workaround for lint error
   // later needs to be fixed: RevisoinRender to typescriptcomponet
   const RevisionLoaderTypeAny: any = RevisionLoader;
+  const SearchResultContentSubNavigationTypeAny: any = SearchResultContentSubNavigation;
   const growiRenderer = props.appContainer.getRenderer('searchresult');
   let showTags = false;
   if (page.tags != null && page.tags.length > 0) { showTags = true }
   return (
     <div key={page._id} className="search-result-page mb-5">
-      <h2>
-        <a href={page.path} className="text-break">
-          {page.path}
-        </a>
-        {showTags && (
-          <div className="mt-1 small">
-            <i className="tag-icon icon-tag"></i> {page.tags.join(', ')}
-          </div>
-        )}
-      </h2>
+      <SearchResultContentSubNavigationTypeAny pageId={page._id} path={page.path}></SearchResultContentSubNavigationTypeAny>
       <RevisionLoaderTypeAny
         growiRenderer={growiRenderer}
         pageId={page._id}

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

@@ -0,0 +1,55 @@
+import React, { FC } from 'react';
+import PagePathNav from '../PagePathNav';
+import { withUnstatedContainers } from '../UnstatedUtils';
+import AppContainer from '../../client/services/AppContainer';
+
+type Props = {
+  appContainer:AppContainer
+  pageId: string,
+  path: string,
+  isSignleLineMode?: boolean,
+  isCompactMode?: boolean,
+}
+
+const SearchResultContentSubNavigation: FC<Props> = (props : Props) => {
+  const {
+    appContainer, pageId, path, isCompactMode, isSignleLineMode,
+  } = props;
+
+  const { isSharedUser } = appContainer;
+  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">
+        {/* TODO : refactor TagLabels in a way that it can be used independently from pageContainenr
+              TASK: #80623 https://estoc.weseek.co.jp/redmine/issues/80623
+              CONDITION reference : https://dev.growi.org/5fabddf8bbeb1a0048bcb9e9
+              userPage is not included in search so chekcing only isSharedUser or not.
+          */}
+        {/* { !isSharedUser &&  !isCompactMode &&  (
+          <div className="grw-taglabels-container">
+            <TagLabels editorMode={editorMode} />
+          </div>
+        )} */}
+        <PagePathNav pageId={pageId} pagePath={path} isCompactMode={isCompactMode} isSingleLineMode={isSignleLineMode} />
+      </div>
+      {/* Right side */}
+      <div className="d-flex">
+        {/* TODO: refactor SubNavButtons in a way that it can be used independently from pageContainer
+              TASK : #80481 https://estoc.weseek.co.jp/redmine/issues/80481
+              CONDITION reference: https://dev.growi.org/5fabddf8bbeb1a0048bcb9e9
+        */}
+        {/* <SubnavButtons isCompactMode={isCompactMode} /> */}
+      </div>
+    </div>
+  );
+};
+
+
+/**
+ * Wrapper component for using unstated
+ */
+const SearchResultContentSubNavigationWrapper = withUnstatedContainers(SearchResultContentSubNavigation, [AppContainer]);
+
+
+export default SearchResultContentSubNavigationWrapper;