header commonalized (#108534)

packages/app/src/components/Sidebar/CustomSidebar.tsx

@@ -9,6 +9,7 @@ import loggerFactory from '~/utils/logger';
 
 import RevisionRenderer from '../Page/RevisionRenderer';
 
+import { SidebarHeader } from './SidebarHeader';
 
 import styles from './CustomSidebar.module.scss';
 
@@ -41,16 +42,7 @@ const CustomSidebar: FC = () => {
 
   return (
     <>
-      <div className="grw-sidebar-content-header p-3 d-flex">
-        <h3 className="mb-0">
-          {t('CustomSidebar')}
-          <a className="h6 ml-2" href="/Sidebar"><i className="icon-pencil"></i></a>
-        </h3>
-        <button type="button" className="btn btn-sm ml-auto grw-btn-reload" onClick={() => mutate()}>
-          <i className="icon icon-reload"></i>
-        </button>
-      </div>
-
+      <SidebarHeader title='CustomSidebar' hasButton isCustom onClick={mutate} />
       {
         isLoading && (
           <div className="text-muted text-center">

packages/app/src/components/Sidebar/PageTree.tsx

@@ -10,6 +10,7 @@ import { useSWRxV5MigrationStatus } from '~/stores/page-listing';
 import ItemsTree from './PageTree/ItemsTree';
 import ItemsTreeSkelton from './PageTree/ItemsTreeSkelton';
 import { PrivateLegacyPagesLink } from './PageTree/PrivateLegacyPagesLink';
+import { SidebarHeader } from './SidebarHeader';
 
 const PageTree: FC = memo(() => {
   const { t } = useTranslation();
@@ -25,9 +26,7 @@ const PageTree: FC = memo(() => {
   if (migrationStatus == null) {
     return (
       <>
-        <div className="grw-sidebar-content-header p-3">
-          <h3 className="mb-0">{t('Page Tree')}</h3>
-        </div>
+        <SidebarHeader title='Page Tree' />
         <ItemsTreeSkelton />
       </>
     );
@@ -38,9 +37,7 @@ const PageTree: FC = memo(() => {
     // Story : https://redmine.weseek.co.jp/issues/83755
     return (
       <>
-        <div className="grw-sidebar-content-header p-3">
-          <h3 className="mb-0">{t('Page Tree')}</h3>
-        </div>
+        <SidebarHeader title='Page Tree' />
         <div className="mt-5 mx-2 text-center">
           <h3 className="text-gray">{t('v5_page_migration.page_tree_not_avaliable')}</h3>
           <a href="/admin">{t('v5_page_migration.go_to_settings')}</a>
@@ -60,10 +57,7 @@ const PageTree: FC = memo(() => {
 
   return (
     <>
-      <div className="grw-sidebar-content-header p-3">
-        <h3 className="mb-0">{t('Page Tree')}</h3>
-      </div>
-
+      <SidebarHeader title='Page Tree' />
       <ItemsTree
         isEnableActions={!isGuestUser}
         targetPath={path}

packages/app/src/components/Sidebar/RecentChanges.tsx

@@ -16,6 +16,7 @@ import loggerFactory from '~/utils/logger';
 import FormattedDistanceDate from '../FormattedDistanceDate';
 
 import InfiniteScroll from './InfiniteScroll';
+import { SidebarHeader } from './SidebarHeader';
 
 import TagLabelsStyles from '../Page/TagLabels.module.scss';
 import styles from './RecentChanges.module.scss';
@@ -154,11 +155,7 @@ const RecentChanges = (): JSX.Element => {
 
   return (
     <div data-testid="grw-recent-changes">
-      <div className="grw-sidebar-content-header p-3 d-flex">
-        <h3 className="mb-0  text-nowrap">{t('Recent Changes')}</h3>
-        <button type="button" className="btn btn-sm ml-auto grw-btn-reload" onClick={() => swr.mutate()}>
-          <i className="icon icon-reload"></i>
-        </button>
+      <SidebarHeader title='Recent Changes' hasButton onClick={swr.mutate} >
         <div className="d-flex align-items-center">
           <div className={`grw-recent-changes-resize-button ${styles['grw-recent-changes-resize-button']} custom-control custom-switch ml-1`}>
             <input
@@ -172,7 +169,7 @@ const RecentChanges = (): JSX.Element => {
             </label>
           </div>
         </div>
-      </div>
+      </SidebarHeader>
       <div className="grw-recent-changes p-3">
         <ul className="list-group list-group-flush">
           <InfiniteScroll

packages/app/src/components/Sidebar/SidebarHeader.tsx

@@ -0,0 +1,30 @@
+import React, { FC } from 'react';
+
+import { useTranslation } from 'next-i18next';
+import Link from 'next/link';
+
+type SidebarHeaderProps = {
+  title: string,
+  hasButton?: boolean,
+  isCustom?: boolean,
+  onClick?,
+  children?
+}
+
+export const SidebarHeader: FC<SidebarHeaderProps> = (props: SidebarHeaderProps) => {
+
+  const { t } = useTranslation();
+
+  return (
+    <div className="grw-sidebar-content-header p-3 d-flex">
+      <h3 className="mb-0 text-nowrap">
+        {t(props.title)}
+        { props.isCustom && (<Link href="/Sidebar"><a className="h6 ml-2"><i className="icon-pencil"></i></a></Link>) }
+      </h3>
+      { props.hasButton && (<button type="button" className="btn btn-sm ml-auto grw-btn-reload" onClick={() => props.onClick()}>
+        <i className="icon icon-reload"></i>
+      </button>) }
+      { props.children }
+    </div>
+  );
+};

packages/app/src/components/Sidebar/Tag.tsx

@@ -9,6 +9,8 @@ import { useSWRxTagsList } from '~/stores/tag';
 import TagCloudBox from '../TagCloudBox';
 import TagList from '../TagList';
 
+import { SidebarHeader } from './SidebarHeader';
+
 
 const PAGING_LIMIT = 10;
 const TAG_CLOUD_LIMIT = 20;
@@ -41,53 +43,45 @@ const Tag: FC = () => {
 
   // todo: adjust design by XD
   return (
-    <div className="grw-container-convertible px-4 mb-5 pb-5" data-testid="grw-sidebar-content-tags">
-      <div className="grw-sidebar-content-header py-3 d-flex">
-        <h3 className="mb-0">{t('Tags')}</h3>
-        <button
-          type="button"
-          className="btn btn-sm ml-auto grw-btn-reload"
-          onClick={onReload}
-        >
-          <i className="icon icon-reload"></i>
-        </button>
-      </div>
-
-      <h3 className="my-3">{t('tag_list')}</h3>
-
-      { isLoading
-        ? (
-          <div className="text-muted text-center">
-            <i className="fa fa-2x fa-spinner fa-pulse mt-3"></i>
-          </div>
-        )
-        : (
-          <div data-testid="grw-tags-list">
-            <TagList
-              tagData={tagData}
-              totalTags={totalCount}
-              activePage={activePage}
-              onChangePage={setOffsetByPageNumber}
-              pagingLimit={PAGING_LIMIT}
-            />
-          </div>
-        )
-      }
-
-      <div className="d-flex justify-content-center my-5">
-        <button
-          className="btn btn-primary rounded px-4"
-          type="button"
-          onClick={() => router.push('/tags')}
-        >
-          {t('Check All tags')}
-        </button>
-      </div>
-
-      <h3 className="my-3">{t('popular_tags')}</h3>
-
-      <div className="text-center">
-        <TagCloudBox tags={tagCloudData} />
+    <div data-testid="grw-sidebar-content-tags">
+      <SidebarHeader title='Tags' hasButton onClick={onReload} />
+      <div className="grw-container-convertible px-4 mb-5 pb-5">
+        <h3 className="my-3">{t('tag_list')}</h3>
+
+        { isLoading
+          ? (
+            <div className="text-muted text-center">
+              <i className="fa fa-2x fa-spinner fa-pulse mt-3"></i>
+            </div>
+          )
+          : (
+            <div data-testid="grw-tags-list">
+              <TagList
+                tagData={tagData}
+                totalTags={totalCount}
+                activePage={activePage}
+                onChangePage={setOffsetByPageNumber}
+                pagingLimit={PAGING_LIMIT}
+              />
+            </div>
+          )
+        }
+
+        <div className="d-flex justify-content-center my-5">
+          <button
+            className="btn btn-primary rounded px-4"
+            type="button"
+            onClick={() => router.push('/tags')}
+          >
+            {t('Check All tags')}
+          </button>
+        </div>
+
+        <h3 className="my-3">{t('popular_tags')}</h3>
+
+        <div className="text-center">
+          <TagCloudBox tags={tagCloudData} />
+        </div>
       </div>
     </div>
   );