header sharing -> button only

packages/app/src/components/Sidebar.module.scss

@@ -160,6 +160,9 @@
   }
 
   .grw-sidebar-content-header {
+    > h3 {
+      margin-bottom: 0;
+    }
     .grw-btn-reload {
       font-size: 18px;
     }

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

@@ -1,6 +1,7 @@
 import React, { FC } from 'react';
 
 import { useTranslation } from 'next-i18next';
+import Link from 'next/link';
 
 import { IRevision } from '~/interfaces/revision';
 import { useSWRxPageByPath } from '~/stores/page';
@@ -9,7 +10,7 @@ import loggerFactory from '~/utils/logger';
 
 import RevisionRenderer from '../Page/RevisionRenderer';
 
-import { SidebarHeader } from './SidebarHeader';
+import { SidebarHeaderReloadButton } from './SidebarHeaderReloadButton';
 
 import styles from './CustomSidebar.module.scss';
 
@@ -20,9 +21,9 @@ const logger = loggerFactory('growi:cli:CustomSidebar');
 const SidebarNotFound = () => {
   return (
     <div className="grw-sidebar-content-header h5 text-center p-3">
-      <a href="/Sidebar#edit">
-        <i className="icon-magic-wand"></i> Create <strong>/Sidebar</strong> page
-      </a>
+      <Link href="/Sidebar#edit">
+        <a><i className="icon-magic-wand"></i> Create <strong>/Sidebar</strong> page</a>
+      </Link>
     </div>
   );
 };
@@ -42,7 +43,14 @@ const CustomSidebar: FC = () => {
 
   return (
     <>
-      <SidebarHeader title='CustomSidebar' hasButton isCustom onClick={mutate} />
+      <div className="grw-sidebar-content-header p-3 d-flex">
+        <h3>
+          {t('CustomSidebar')}
+          <Link href="/Sidebar"><a className="h6 ml-2"><i className="icon-pencil"></i></a></Link>
+        </h3>
+        <SidebarHeaderReloadButton onClick={mutate} />
+      </div>
+
       {
         isLoading && (
           <div className="text-muted text-center">

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

@@ -10,9 +10,18 @@ import { useSWRxV5MigrationStatus } from '~/stores/page-listing';
 
 import ItemsTree from './PageTree/ItemsTree';
 import { PrivateLegacyPagesLink } from './PageTree/PrivateLegacyPagesLink';
-import { SidebarHeader } from './SidebarHeader';
 import PageTreeContentSkelton from './Skelton/PageTreeContentSkelton';
 
+const PageTreeHeader = () => {
+  const { t } = useTranslation();
+
+  return (
+    <div className="grw-sidebar-content-header p-3">
+      <h3>{t('Page Tree')}</h3>
+    </div>
+  );
+};
+
 const PageTree: FC = memo(() => {
   const { t } = useTranslation();
 
@@ -27,7 +36,7 @@ const PageTree: FC = memo(() => {
   if (migrationStatus == null) {
     return (
       <>
-        <SidebarHeader title='Page Tree' />
+        <PageTreeHeader />
         <PageTreeContentSkelton />
       </>
     );
@@ -38,7 +47,7 @@ const PageTree: FC = memo(() => {
     // Story : https://redmine.weseek.co.jp/issues/83755
     return (
       <>
-        <SidebarHeader title='Page Tree' />
+        <PageTreeHeader />
         <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>
@@ -58,7 +67,7 @@ const PageTree: FC = memo(() => {
 
   return (
     <>
-      <SidebarHeader title='Page Tree' />
+      <PageTreeHeader />
       <ItemsTree
         isEnableActions={!isGuestUser}
         targetPath={path}

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

@@ -16,7 +16,7 @@ import loggerFactory from '~/utils/logger';
 import FormattedDistanceDate from '../FormattedDistanceDate';
 
 import InfiniteScroll from './InfiniteScroll';
-import { SidebarHeader } from './SidebarHeader';
+import { SidebarHeaderReloadButton } from './SidebarHeaderReloadButton';
 
 import TagLabelsStyles from '../Page/TagLabels.module.scss';
 import styles from './RecentChanges.module.scss';
@@ -134,9 +134,11 @@ const RecentChanges = (): JSX.Element => {
   const PER_PAGE = 20;
   const { t } = useTranslation();
   const swr = useSWRInifinitexRecentlyUpdated();
+  const { data, error, mutate } = swr;
   const [isRecentChangesSidebarSmall, setIsRecentChangesSidebarSmall] = useState(false);
-  const isEmpty = swr.data?.[0].length === 0;
-  const isReachingEnd = isEmpty || (swr.data && swr.data[swr.data.length - 1]?.length < PER_PAGE);
+  const isEmpty = data?.[0].length === 0;
+  const isLoading = error == null && data === undefined;
+  const isReachingEnd = isEmpty || (data && data[data.length - 1]?.length < PER_PAGE);
   const retrieveSizePreferenceFromLocalStorage = useCallback(() => {
     if (window.localStorage.isRecentChangesSidebarSmall === 'true') {
       setIsRecentChangesSidebarSmall(true);
@@ -155,7 +157,9 @@ const RecentChanges = (): JSX.Element => {
 
   return (
     <div data-testid="grw-recent-changes">
-      <SidebarHeader title='Recent Changes' hasButton onClick={swr.mutate} >
+      <div className="grw-sidebar-content-header p-3 d-flex">
+        <h3 className="text-nowrap">{t('Recent Changes')}</h3>
+        <SidebarHeaderReloadButton onClick={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
@@ -169,7 +173,7 @@ const RecentChanges = (): JSX.Element => {
             </label>
           </div>
         </div>
-      </SidebarHeader>
+      </div>
       <div className="grw-recent-changes p-3">
         <ul className="list-group list-group-flush">
           <InfiniteScroll

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

@@ -1,30 +0,0 @@
-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/SidebarHeaderReloadButton.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+
+export const SidebarHeaderReloadButton = ({ onClick }) => {
+
+  return (
+    <button type="button" className="btn btn-sm ml-auto grw-btn-reload" onClick={() => onClick()}>
+      <i className="icon icon-reload"></i>
+    </button>
+  );
+};

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

@@ -9,7 +9,7 @@ import { useSWRxTagsList } from '~/stores/tag';
 import TagCloudBox from '../TagCloudBox';
 import TagList from '../TagList';
 
-import { SidebarHeader } from './SidebarHeader';
+import { SidebarHeaderReloadButton } from './SidebarHeaderReloadButton';
 
 
 const PAGING_LIMIT = 10;
@@ -43,45 +43,47 @@ const Tag: FC = () => {
 
   // todo: adjust design by XD
   return (
-    <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 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>{t('Tags')}</h3>
+        <SidebarHeaderReloadButton onClick={onReload}/>
+      </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>
     </div>
   );