Merge remote-tracking branch 'origin/master' into support/omit-appcontainer

.github/workflows/release-rc.yml

@@ -43,14 +43,6 @@ jobs:
     - name: Set up Docker Buildx
       uses: docker/setup-buildx-action@v1
 
-    - name: Cache Docker layers
-      uses: actions/cache@v3
-      with:
-        path: /tmp/.buildx-cache
-        key: ${{ runner.os }}-buildx-app-${{ github.sha }}
-        restore-keys: |
-          ${{ runner.os }}-buildx-app-
-
     - name: Build and push
       uses: docker/build-push-action@v2
       with:
@@ -58,8 +50,9 @@ jobs:
         file: ./packages/app/docker/Dockerfile
         platforms: linux/amd64
         push: true
-        cache-from: type=local,src=/tmp/.buildx-cache
-        cache-to: type=local,mode=max,dest=/tmp/.buildx-cache-new
+        builder: ${{ steps.buildx.outputs.name }}
+        cache-from: type=gha
+        cache-to: type=gha,mode=max
         tags: ${{ steps.meta.outputs.tags }}
 
     - name: Move cache

.github/workflows/release-slackbot-proxy.yml

@@ -56,14 +56,6 @@ jobs:
     - name: Set up Docker Buildx
       uses: docker/setup-buildx-action@v1
 
-    - name: Cache Docker layers
-      uses: actions/cache@v3
-      with:
-        path: /tmp/.buildx-cache
-        key: ${{ runner.os }}-buildx-slackbot-proxy-${{ github.sha }}
-        restore-keys: |
-          ${{ runner.os }}-buildx-slackbot-proxy-
-
     - name: Build and push
       uses: docker/build-push-action@v2
       with:
@@ -71,8 +63,9 @@ jobs:
         file: ./packages/slackbot-proxy/docker/Dockerfile
         platforms: linux/amd64
         push: true
-        cache-from: type=local,src=/tmp/.buildx-cache
-        cache-to: type=local,mode=max,dest=/tmp/.buildx-cache-new
+        builder: ${{ steps.buildx.outputs.name }}
+        cache-from: type=gha
+        cache-to: type=gha,mode=max
         tags: ${{ steps.meta.outputs.tags }}
 
     - name: Move cache

.github/workflows/release.yml

@@ -169,15 +169,6 @@ jobs:
     - name: Set up Docker Buildx
       uses: docker/setup-buildx-action@v1
 
-    - name: Cache Docker layers
-      uses: actions/cache@v3
-      with:
-        path: /tmp/.buildx-cache
-        key: ${{ runner.os }}-buildx-app-${{ matrix.flavor }}-${{ github.sha }}
-        restore-keys: |
-          ${{ runner.os }}-buildx-app-${{ matrix.flavor }}-
-          ${{ runner.os }}-buildx-app-
-
     - name: Build and push
       uses: docker/build-push-action@v2
       with:
@@ -187,8 +178,9 @@ jobs:
         push: true
         build-args: |
           flavor=${{ matrix.flavor }}
-        cache-from: type=local,src=/tmp/.buildx-cache
-        cache-to: type=local,mode=max,dest=/tmp/.buildx-cache-new
+        builder: ${{ steps.buildx.outputs.name }}
+        cache-from: type=gha
+        cache-to: type=gha,mode=max
         tags: ${{ steps.meta.outputs.tags }}
 
     - name: Move cache

packages/app/docker/Dockerfile

@@ -1,4 +1,4 @@
-# syntax = docker/dockerfile:1
+# syntax = docker/dockerfile:1.4
 
 ARG flavor=default
 
@@ -157,11 +157,7 @@ RUN tar -xf node_modules.tar
 RUN tar -xf packages.tar
 RUN rm node_modules.tar packages.tar
 
-USER root
-
-COPY packages/app/docker/docker-entrypoint.sh /
-RUN chmod 700 /docker-entrypoint.sh
-RUN chown node:node ${appDir}
+COPY --chown=node:node --chmod=700 packages/app/docker/docker-entrypoint.sh /
 
 WORKDIR ${appDir}/packages/app
 

packages/app/resource/locales/en_US/translation.json

@@ -100,6 +100,7 @@
   "Connected": "Connected",
   "Show": "Show",
   "Hide": "Hide",
+  "Loading": "Loading...",
   "Disclose E-mail": "Disclose E-mail",
   "page exists": "this page already exists",
   "Error occurred": "Error occurred",
@@ -148,6 +149,7 @@
   "Shareable link": "Shareable link",
   "The whitelist of registration permission E-mail address": "The whitelist of registration permission E-mail address",
   "Add tags for this page": "Add tags for this page",
+  "popular_tags": "Popular tags",
   "Check All tags": "check all tags",
   "You have no tag, You can set tags on pages": "You have no tag, You can set tags on pages",
   "Show latest": "Show latest",
@@ -394,7 +396,7 @@
   },
   "page_api_error": {
     "notfound_or_forbidden": "Original page is not found or forbidden.",
-    "already_exists": "New page is already exists.",
+    "already_exists": "Page with the path already exists.",
     "outdated": "Page is updated someone and now outdated.",
     "user_not_admin": "Only admin user can delete"
   },

packages/app/resource/locales/ja_JP/translation.json

@@ -100,6 +100,7 @@
   "Connected": "接続されています",
   "Show": "公開",
   "Hide": "非公開",
+  "Loading": "読み込み中...",
   "Disclose E-mail": "メールアドレスの公開",
   "page exists": "このページはすでに存在しています",
   "Error occurred": "エラーが発生しました",
@@ -147,7 +148,8 @@
   "Shareable link": "このページの共有用URL",
   "The whitelist of registration permission E-mail address": "登録許可メールアドレスの<br>ホワイトリスト",
   "Add tags for this page": "タグを付ける",
-  "Check All tags": "全てのタグをチェックする",
+  "popular_tags": "人気のタグ",
+  "Check All tags": "全てのタグを見る",
   "You have no tag, You can set tags on pages": "使用中のタグがありません",
   "Show latest": "最新のページを表示",
   "Load latest": "最新版を読み込む",
@@ -393,7 +395,7 @@
   },
   "page_api_error": {
     "notfound_or_forbidden": "元のページが見つからないか、アクセス権がありません。",
-    "already_exists": "新しいページが既に存在しています。",
+    "already_exists": "そのパスを持つページは既に存在しています。",
     "outdated": "ページが他のユーザーによって更新されました。",
     "user_not_admin": "権限のあるユーザーのみが削除できます"
   },

packages/app/resource/locales/zh_CN/translation.json

@@ -107,6 +107,7 @@
 	"Connected": "Connected",
 	"Show": "显示",
 	"Hide": "隐藏",
+  "Loading": "加载...",
 	"Reset": "重置",
 	"Disclose E-mail": "显示邮箱",
 	"page exists": "页面已存在",
@@ -156,6 +157,7 @@
 	"Shareable link": "可分享链接",
 	"The whitelist of registration permission E-mail address": "注册许可电子邮件地址的白名单",
 	"Add tags for this page": "添加标签",
+  "popular_tags": "流行标签",
   "Check All tags": "检查所有标签",
 	"You have no tag, You can set tags on pages": "你没有标签，可以在页面上设置标签",
 	"Show latest": "显示最新",
@@ -372,7 +374,7 @@
   },
 	"page_api_error": {
 		"notfound_or_forbidden": "未找到或禁止原始页。",
-		"already_exists": "新建页面已存在",
+		"already_exists": "具有该路径的页面已存在",
 		"outdated": "页面已被某人更新，现在已过时。",
 		"user_not_admin": "仅管理员用户可以删除"
   },

packages/app/src/client/app.jsx

@@ -1,28 +1,26 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
-import { Provider } from 'unstated';
-import { I18nextProvider } from 'react-i18next';
+
 import { DndProvider } from 'react-dnd';
 import { HTML5Backend } from 'react-dnd-html5-backend';
-
+import ReactDOM from 'react-dom';
+import { I18nextProvider } from 'react-i18next';
 import { SWRConfig } from 'swr';
+import { Provider } from 'unstated';
 
+import CommentContainer from '~/client/services/CommentContainer';
+import ContextExtractor from '~/client/services/ContextExtractor';
+import EditorContainer from '~/client/services/EditorContainer';
+import PageContainer from '~/client/services/PageContainer';
+import PageHistoryContainer from '~/client/services/PageHistoryContainer';
+import PersonalContainer from '~/client/services/PersonalContainer';
+import RevisionComparerContainer from '~/client/services/RevisionComparerContainer';
+import TagContainer from '~/client/services/TagContainer';
+import IdenticalPathPage from '~/components/IdenticalPathPage';
+import { PrivateLegacyPages } from '~/components/PrivateLegacyPages';
 import loggerFactory from '~/utils/logger';
 import { swrGlobalConfiguration } from '~/utils/swr-utils';
 
-import InAppNotificationPage from '../components/InAppNotification/InAppNotificationPage';
 import ErrorBoundary from '../components/ErrorBoudary';
-import Sidebar from '../components/Sidebar';
-import { SearchPage } from '../components/SearchPage';
-import TagsList from '../components/TagsList';
-import DisplaySwitcher from '../components/Page/DisplaySwitcher';
-import { defaultEditorOptions, defaultPreviewOptions } from '../components/PageEditor/OptionsSelector';
-import Page from '../components/Page';
-import PageContentFooter from '../components/PageContentFooter';
-import PageComment from '../components/PageComment';
-import PageTimeline from '../components/PageTimeline';
-import CommentEditorLazyRenderer from '../components/PageComment/CommentEditorLazyRenderer';
-import ShareLinkAlert from '../components/Page/ShareLinkAlert';
 import RedirectedAlert from '../components/Page/RedirectedAlert';
 import TrashPageList from '../components/TrashPageList';
 import TrashPageAlert from '../components/Page/TrashPageAlert';
@@ -35,23 +33,25 @@ import RecentlyCreatedIcon from '../components/Icons/RecentlyCreatedIcon';
 import MyDraftList from '../components/MyDraftList/MyDraftList';
 import BookmarkList from '../components/PageList/BookmarkList';
 import Fab from '../components/Fab';
+import InAppNotificationPage from '../components/InAppNotification/InAppNotificationPage';
 import PersonalSettings from '../components/Me/PersonalSettings';
 import GrowiContextualSubNavigation from '../components/Navbar/GrowiContextualSubNavigation';
 import GrowiSubNavigationSwitcher from '../components/Navbar/GrowiSubNavigationSwitcher';
-import IdenticalPathPage from '~/components/IdenticalPathPage';
-
-import ContextExtractor from '~/client/services/ContextExtractor';
-import PageContainer from '~/client/services/PageContainer';
-import PageHistoryContainer from '~/client/services/PageHistoryContainer';
-import RevisionComparerContainer from '~/client/services/RevisionComparerContainer';
-import CommentContainer from '~/client/services/CommentContainer';
-import EditorContainer from '~/client/services/EditorContainer';
-import TagContainer from '~/client/services/TagContainer';
-import PersonalContainer from '~/client/services/PersonalContainer';
+import Page from '../components/Page';
+import DisplaySwitcher from '../components/Page/DisplaySwitcher';
+import ShareLinkAlert from '../components/Page/ShareLinkAlert';
+import PageComment from '../components/PageComment';
+import CommentEditorLazyRenderer from '../components/PageComment/CommentEditorLazyRenderer';
+import PageContentFooter from '../components/PageContentFooter';
+import { defaultEditorOptions, defaultPreviewOptions } from '../components/PageEditor/OptionsSelector';
+import PageTimeline from '../components/PageTimeline';
+import { SearchPage } from '../components/SearchPage';
+import Sidebar from '../components/Sidebar';
+import TagPage from '../components/TagPage';
 
 import { appContainer, componentMappings } from './base';
 import { toastError } from './util/apiNotification';
-import { PrivateLegacyPages } from '~/components/PrivateLegacyPages';
+
 
 const logger = loggerFactory('growi:cli:app');
 
@@ -90,7 +90,7 @@ Object.assign(componentMappings, {
   'identical-path-page': <IdenticalPathPage />,
 
   // 'revision-history': <PageHistory pageId={pageId} />,
-  'tags-page': <TagsList crowi={appContainer} />,
+  'tags-page': <TagPage />,
 
   'grw-page-status-alert-container': <PageStatusAlert />,
 

packages/app/src/components/InAppNotification/InAppNotificationElm.tsx

@@ -1,16 +1,18 @@
 import React, {
   FC, useRef,
 } from 'react';
-import { DropdownItem } from 'reactstrap';
 
 import { UserPicture } from '@growi/ui';
-import { IInAppNotification, InAppNotificationStatuses } from '~/interfaces/in-app-notification';
+import { DropdownItem } from 'reactstrap';
+
+import { IInAppNotificationOpenable } from '~/client/interfaces/in-app-notification-openable';
+import { apiv3Post } from '~/client/util/apiv3-client';
 import { HasObjectId } from '~/interfaces/has-object-id';
+import { IInAppNotification, InAppNotificationStatuses } from '~/interfaces/in-app-notification';
 
 // Change the display for each targetmodel
 import PageModelNotification from './PageNotification/PageModelNotification';
-import { IInAppNotificationOpenable } from '~/client/interfaces/in-app-notification-openable';
-import { apiv3Post } from '~/client/util/apiv3-client';
+
 
 interface Props {
   notification: IInAppNotification & HasObjectId
@@ -101,6 +103,10 @@ const InAppNotificationElm: FC<Props> = (props: Props) => {
       actionMsg = 'renamed';
       actionIcon = 'icon-action-redo';
       break;
+    case 'PAGE_DUPLICATE':
+      actionMsg = 'duplicated';
+      actionIcon = 'icon-docs';
+      break;
     case 'PAGE_DELETE':
       actionMsg = 'deleted';
       actionIcon = 'icon-trash';
@@ -109,6 +115,10 @@ const InAppNotificationElm: FC<Props> = (props: Props) => {
       actionMsg = 'completely deleted';
       actionIcon = 'icon-fire';
       break;
+    case 'PAGE_REVERT':
+      actionMsg = 'reverted';
+      actionIcon = 'icon-action-undo';
+      break;
     case 'COMMENT_CREATE':
       actionMsg = 'commented on';
       actionIcon = 'icon-bubble';

packages/app/src/components/PutbackPageModal.jsx

@@ -1,13 +1,14 @@
 import React, { useState } from 'react';
 
+
+import { useTranslation } from 'react-i18next';
 import {
   Modal, ModalHeader, ModalBody, ModalFooter,
 } from 'reactstrap';
 
-import { useTranslation } from 'react-i18next';
-
-import { usePutBackPageModal } from '~/stores/modal';
 import { apiPost } from '~/client/util/apiv1-client';
+import { PathAlreadyExistsError } from '~/server/models/errors';
+import { usePutBackPageModal } from '~/stores/modal';
 
 import ApiErrorMessageList from './PageManagement/ApiErrorMessageList';
 
@@ -20,6 +21,7 @@ const PutBackPageModal = () => {
   const onPutBacked = pageDataToRevert.opts?.onPutBacked;
 
   const [errs, setErrs] = useState(null);
+  const [targetPath, setTargetPath] = useState(null);
 
   const [isPutbackRecursively, setIsPutbackRecursively] = useState(true);
 
@@ -46,7 +48,8 @@ const PutBackPageModal = () => {
       closePutBackPageModal();
     }
     catch (err) {
-      setErrs(err);
+      setTargetPath(err.data);
+      setErrs([err]);
     }
   }
 
@@ -78,7 +81,7 @@ const PutBackPageModal = () => {
         </div>
       </ModalBody>
       <ModalFooter>
-        <ApiErrorMessageList errs={errs} />
+        <ApiErrorMessageList errs={errs} targetPath={targetPath} />
         <button type="button" className="btn btn-info" onClick={putbackPageButtonHandler}>
           <i className="icon-action-undo mr-2" aria-hidden="true"></i> { t('Put Back') }
         </button>

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

@@ -86,7 +86,7 @@ const SidebarNav: FC<Props> = (props: Props) => {
         <PrimaryItem contents={SidebarContentsType.RECENT} label="Recent Changes" iconName="update" onItemSelected={onItemSelected} />
         {/* <PrimaryItem id="tag" label="Tags" iconName="icon-tag" /> */}
         {/* <PrimaryItem id="favorite" label="Favorite" iconName="fa fa-bookmark-o" /> */}
-        <PrimaryItem contents={SidebarContentsType.TAG} label="Tags" iconName="tag" onItemSelected={onItemSelected} />
+        <PrimaryItem contents={SidebarContentsType.TAG} label="Tags" iconName="local_offer" onItemSelected={onItemSelected} />
         {/* <PrimaryItem id="favorite" label="Favorite" iconName="icon-star" /> */}
         {/* eslint-enable max-len */}
       </div>

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

@@ -1,43 +1,81 @@
-import React, { FC, useState, useEffect } from 'react';
+import React, { FC, useState, useCallback } from 'react';
 
 import { useTranslation } from 'react-i18next';
 
-import TagsList from '../TagsList';
+import { ITagCountHasId } from '~/interfaces/tag';
+import { useSWRxTagsList } from '~/stores/tag';
+
+import TagCloudBox from '../TagCloudBox';
+import TagList from '../TagList';
+
+
+const PAGING_LIMIT = 10;
 
 const Tag: FC = () => {
+  const [activePage, setActivePage] = useState<number>(1);
+  const [offset, setOffset] = useState<number>(0);
+
+  const { data: tagDataList, mutate: mutateTagDataList, error } = useSWRxTagsList(PAGING_LIMIT, offset);
+  const tagData: ITagCountHasId[] = tagDataList?.data || [];
+  const totalCount: number = tagDataList?.totalCount || 0;
+  const isLoading = tagDataList === undefined && error == null;
+
   const { t } = useTranslation('');
-  const [isOnReload, setIsOnReload] = useState<boolean>(false);
 
-  useEffect(() => {
-    setIsOnReload(false);
-  }, [isOnReload]);
+  const setOffsetByPageNumber = useCallback((selectedPageNumber: number) => {
+    setActivePage(selectedPageNumber);
+    setOffset((selectedPageNumber - 1) * PAGING_LIMIT);
+  }, []);
+
+  const onReload = useCallback(() => {
+    mutateTagDataList();
+  }, [mutateTagDataList]);
 
+  // todo: adjust design by XD
   return (
-    <div data-testid="grw-sidebar-content-tags">
-      <div className="grw-sidebar-content-header p-3 d-flex">
+    <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-rc"
-          onClick={() => {
-            setIsOnReload(true);
-          }}
+          onClick={onReload}
         >
           <i className="icon icon-reload"></i>
         </button>
       </div>
-      <div className="d-flex justify-content-center">
+      <h2 className="my-3">{t('popular_tags')}</h2>
+
+      <div className="px-3 text-center">
+        <TagCloudBox tags={tagData} />
+      </div>
+
+      <div className="d-flex justify-content-center my-5">
         <button
-          className="btn btn-primary my-4"
+          className="btn btn-primary rounded px-5"
           type="button"
           onClick={() => { window.location.href = '/tags' }}
         >
           {t('Check All tags')}
         </button>
       </div>
-      <div className="grw-container-convertible mb-5 pb-5">
-        <TagsList isOnReload={isOnReload} />
-      </div>
+
+      { isLoading
+        ? (
+          <div className="text-muted text-center">
+            <i className="fa fa-2x fa-spinner fa-pulse mt-3"></i>
+          </div>
+        )
+        : (
+          <TagList
+            tagData={tagData}
+            totalTags={totalCount}
+            activePage={activePage}
+            onChangePage={setOffsetByPageNumber}
+            pagingLimit={PAGING_LIMIT}
+          />
+        )
+      }
     </div>
   );
 

packages/app/src/components/TagCloudBox.tsx

@@ -1,34 +1,51 @@
-import React, { FC } from 'react';
-
+import React, { FC, memo } from 'react';
 import { TagCloud } from 'react-tagcloud';
-
-import { ITagHasCount } from '~/interfaces/tag';
+import { ITagCountHasId } from '~/interfaces/tag';
 
 type Props = {
-  tags: ITagHasCount[],
+  tags:ITagCountHasId[],
   minSize?: number,
   maxSize?: number,
-}
+  maxTagTextLength?: number,
+  isDisableRandomColor?: boolean,
+};
+
+const defaultProps = {
+  isDisableRandomColor: true,
+};
+
+const MIN_FONT_SIZE = 10;
+const MAX_FONT_SIZE = 24;
+const MAX_TAG_TEXT_LENGTH = 8;
 
-const MIN_FONT_SIZE = 12;
-const MAX_FONT_SIZE = 36;
+const TagCloudBox: FC<Props> = memo((props:(Props & typeof defaultProps)) => {
+  const {
+    tags, minSize, maxSize, isDisableRandomColor,
+  } = props;
+  const maxTagTextLength: number = props.maxTagTextLength ?? MAX_TAG_TEXT_LENGTH;
 
-const TagCloudBox: FC<Props> = (props:Props) => {
   return (
     <>
       <TagCloud
-        minSize={props.minSize || MIN_FONT_SIZE}
-        maxSize={props.maxSize || MAX_FONT_SIZE}
-        tags={props.tags.map((tag) => {
-          return { value: tag.name, count: tag.count };
+        minSize={minSize ?? MIN_FONT_SIZE}
+        maxSize={maxSize ?? MAX_FONT_SIZE}
+        tags={tags.map((tag:ITagCountHasId) => {
+          return {
+            // text truncation
+            value: (tag.name).length > maxTagTextLength ? `${(tag.name).slice(0, maxTagTextLength)}...` : tag.name,
+            count: tag.count,
+          };
         })}
+        disableRandomColor={isDisableRandomColor}
         style={{ cursor: 'pointer' }}
-        className="simple-cloud"
+        className="simple-cloud text-secondary"
         onClick={(target) => { window.location.href = `/_search?q=tag:${encodeURIComponent(target.value)}` }}
       />
     </>
   );
 
-};
+});
+
+TagCloudBox.defaultProps = defaultProps;
 
 export default TagCloudBox;

packages/app/src/components/TagList.tsx

@@ -0,0 +1,76 @@
+import React, {
+  FC, useCallback,
+} from 'react';
+
+import { useTranslation } from 'react-i18next';
+
+import { ITagCountHasId } from '~/interfaces/tag';
+
+import PaginationWrapper from './PaginationWrapper';
+
+type TagListProps = {
+  tagData: ITagCountHasId[],
+  totalTags: number,
+  activePage: number,
+  onChangePage?: (selectedPageNumber: number) => void,
+  pagingLimit: number,
+  isPaginationShown?: boolean,
+}
+
+const defaultProps = {
+  isPaginationShown: true,
+};
+
+const TagList: FC<TagListProps> = (props:(TagListProps & typeof defaultProps)) => {
+  const {
+    tagData, totalTags, activePage, onChangePage, pagingLimit, isPaginationShown,
+  } = props;
+  const isTagExist: boolean = tagData.length > 0;
+  const { t } = useTranslation('');
+
+  const generateTagList = useCallback((tagData) => {
+    return tagData.map((tag:ITagCountHasId, index:number) => {
+      const tagListClasses: string = index === 0 ? 'list-group-item d-flex' : 'list-group-item d-flex border-top-0';
+
+      return (
+        <a
+          key={tag._id}
+          href={`/_search?q=tag:${encodeURIComponent(tag.name)}`}
+          className={tagListClasses}
+        >
+          <div className="text-truncate">{tag.name}</div>
+          <div className="ml-4 my-auto py-1 px-2 list-tag-count badge badge-secondary text-white">{tag.count}</div>
+        </a>
+      );
+    });
+  }, []);
+
+  if (!isTagExist) {
+    return <h3>{ t('You have no tag, You can set tags on pages') }</h3>;
+  }
+
+  return (
+    <>
+      <ul className="list-group text-left mb-4">
+        {generateTagList(tagData)}
+      </ul>
+      {isPaginationShown
+      && (
+        <PaginationWrapper
+          activePage={activePage}
+          changePage={onChangePage}
+          totalItemsCount={totalTags}
+          pagingLimit={pagingLimit}
+          align="center"
+          size="md"
+        />
+      )
+      }
+    </>
+  );
+
+};
+
+TagList.defaultProps = defaultProps;
+
+export default TagList;

packages/app/src/components/TagPage.tsx

@@ -0,0 +1,59 @@
+import React, { FC, useState, useCallback } from 'react';
+
+import { useTranslation } from 'react-i18next';
+
+import { ITagCountHasId } from '~/interfaces/tag';
+import { useSWRxTagsList } from '~/stores/tag';
+
+import TagCloudBox from './TagCloudBox';
+import TagList from './TagList';
+
+const PAGING_LIMIT = 10;
+
+const TagPage: FC = () => {
+  const [activePage, setActivePage] = useState<number>(1);
+  const [offset, setOffset] = useState<number>(0);
+
+  const { data: tagDataList, error } = useSWRxTagsList(PAGING_LIMIT, offset);
+  const tagData: ITagCountHasId[] = tagDataList?.data || [];
+  const totalCount: number = tagDataList?.totalCount || 0;
+  const isLoading = tagDataList === undefined && error == null;
+
+  const { t } = useTranslation('');
+
+  const setOffsetByPageNumber = useCallback((selectedPageNumber: number) => {
+    setActivePage(selectedPageNumber);
+    setOffset((selectedPageNumber - 1) * PAGING_LIMIT);
+  }, []);
+
+  // todo: adjust margin and redesign tags page
+  return (
+    <div className="grw-container-convertible mb-5 pb-5">
+      <h2 className="my-3">{`${t('Tags')}(${totalCount})`}</h2>
+      <div className="px-3 mb-5 text-center">
+        <TagCloudBox tags={tagData} minSize={20} />
+      </div>
+      { 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>
+  );
+
+};
+
+export default TagPage;

packages/app/src/components/TagsList.tsx

@@ -1,85 +0,0 @@
-import React, { FC, useEffect, useState } from 'react';
-
-import { useTranslation } from 'react-i18next';
-
-import { useSWRxTagsList } from '~/stores/tag';
-
-import PaginationWrapper from './PaginationWrapper';
-import TagCloudBox from './TagCloudBox';
-
-
-const PAGING_LIMIT = 10;
-
-type Props = {
-  isOnReload: boolean
-}
-
-const TagsList: FC<Props> = (props: Props) => {
-  const { t } = useTranslation();
-
-  const [activePage, setActivePage] = useState<number>(1);
-  const [pagingOffset, setPagingOffset] = useState<number>(0);
-
-  const { data: tagsList, error, mutate } = useSWRxTagsList(PAGING_LIMIT, pagingOffset);
-
-  const handlePage = (selectedPageNumber: number) => {
-    setActivePage(selectedPageNumber);
-    setPagingOffset((selectedPageNumber - 1) * PAGING_LIMIT);
-  };
-
-  useEffect(() => {
-    if (props.isOnReload) {
-      mutate();
-    }
-  }, [mutate, props.isOnReload]);
-
-  const isLoading = tagsList === undefined && error == null;
-  if (isLoading) {
-    return (
-      <div className="text-muted text-center">
-        <i className="fa fa-2x fa-spinner fa-pulse mt-3"></i>
-      </div>
-    );
-  }
-
-  return (
-    <div data-testid="grw-tags-list">
-      <header className="py-0">
-        <h1 className="title text-center mt-5 mb-3 font-weight-bold">{`${t('Tags')}(${tagsList?.totalCount || 0})`}</h1>
-      </header>
-      <div className="row text-center">
-        <div className="col-12 mb-5 px-5">
-          <TagCloudBox tags={tagsList?.data || []} minSize={20} />
-        </div>
-        <div className="col-12 tag-list mb-4">
-          <ul className="list-group text-left">
-            {
-              tagsList?.data != null && tagsList.data.length > 0
-                ? tagsList.data.map((tag) => {
-                  return (
-                    <a key={tag.name} href={`/_search?q=tag:${tag.name}`} className="list-group-item">
-                      <i className="icon-tag mr-2"></i>{tag.name}
-                      <span className="ml-4 list-tag-count badge badge-secondary text-muted">{tag.count}</span>
-                    </a>
-                  );
-                })
-                : <h3>{ t('You have no tag, You can set tags on pages') }</h3>
-            }
-          </ul>
-        </div>
-        <div className="col-12 tag-list-pagination">
-          <PaginationWrapper
-            activePage={activePage}
-            changePage={handlePage}
-            totalItemsCount={tagsList?.totalCount || 0}
-            pagingLimit={PAGING_LIMIT}
-            align="center"
-            size="md"
-          />
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default TagsList;

packages/app/src/interfaces/tag.ts

@@ -1,9 +1,13 @@
+import { HasObjectId } from './has-object-id';
+
 export type ITag = {
   name: string,
   createdAt: Date;
 }
 
-export type ITagHasCount = ITag & { count: number }
+export type ITagCount = Omit<ITag, 'createdAt'> & {count: number}
+
+export type ITagCountHasId = ITagCount & HasObjectId
 
 export type ITagsSearchApiv1Result = {
   ok: boolean,
@@ -12,6 +16,6 @@ export type ITagsSearchApiv1Result = {
 
 export type ITagsListApiv1Result = {
   ok: boolean,
-  data: ITagHasCount[],
+  data: ITagCountHasId[],
   totalCount: number,
 }

packages/app/src/server/models/errors.ts

@@ -0,0 +1,12 @@
+import ExtensibleCustomError from 'extensible-custom-error';
+
+export class PathAlreadyExistsError extends ExtensibleCustomError {
+
+  targetPath: string;
+
+  constructor(message: string, targetPath: string) {
+    super(message);
+    this.targetPath = targetPath;
+  }
+
+}

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

@@ -1,9 +1,11 @@
 import { pagePathUtils } from '@growi/core';
-import urljoin from 'url-join';
 import { body } from 'express-validator';
 import mongoose from 'mongoose';
+import urljoin from 'url-join';
 
 import loggerFactory from '~/utils/logger';
+
+import { PathAlreadyExistsError } from '../models/errors';
 import UpdatePost from '../models/update-post';
 
 const { isCreatablePage, isTopPage, isUsersHomePage } = pagePathUtils;
@@ -1261,6 +1263,10 @@ module.exports = function(crowi, app) {
       page = await crowi.pageService.revertDeletedPage(page, req.user, {}, isRecursively);
     }
     catch (err) {
+      if (err instanceof PathAlreadyExistsError) {
+        logger.error('Path already exists', err);
+        return res.json(ApiResponse.error(err, 'already_exists', err.targetPath));
+      }
       logger.error('Error occured while get setting', err);
       return res.json(ApiResponse.error(err));
     }

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

@@ -1,33 +1,36 @@
+import pathlib from 'path';
+import { Readable, Writable } from 'stream';
+
 import { pagePathUtils, pathUtils } from '@growi/core';
-import mongoose, { ObjectId, QueryCursor } from 'mongoose';
 import escapeStringRegexp from 'escape-string-regexp';
+import mongoose, { ObjectId, QueryCursor } from 'mongoose';
 import streamToPromise from 'stream-to-promise';
-import pathlib from 'path';
-import { Readable, Writable } from 'stream';
 
-import { createBatchStream } from '~/server/util/batch-stream';
-import loggerFactory from '~/utils/logger';
-import {
-  CreateMethod, PageCreateOptions, PageModel, PageDocument,
-} from '~/server/models/page';
-import { stringifySnapshot } from '~/models/serializers/in-app-notification-snapshot/page';
+import { Ref } from '~/interfaces/common';
+import { HasObjectId } from '~/interfaces/has-object-id';
 import {
   IPage, IPageInfo, IPageInfoForEntity, IPageWithMeta,
 } from '~/interfaces/page';
-import { serializePageSecurely } from '../models/serializers/page-serializer';
-import { PageRedirectModel } from '../models/page-redirect';
-import Subscription from '../models/subscription';
-import { ObjectIdLike } from '../interfaces/mongoose-utils';
-import { IUserHasId } from '~/interfaces/user';
-import { Ref } from '~/interfaces/common';
-import { HasObjectId } from '~/interfaces/has-object-id';
-import { SocketEventName, UpdateDescCountRawData } from '~/interfaces/websocket';
 import {
   PageDeleteConfigValue, IPageDeleteConfigValueToProcessValidation,
 } from '~/interfaces/page-delete-config';
+import { IUserHasId } from '~/interfaces/user';
+import { SocketEventName, UpdateDescCountRawData } from '~/interfaces/websocket';
+import { stringifySnapshot } from '~/models/serializers/in-app-notification-snapshot/page';
+import {
+  CreateMethod, PageCreateOptions, PageModel, PageDocument,
+} from '~/server/models/page';
+import { createBatchStream } from '~/server/util/batch-stream';
+import loggerFactory from '~/utils/logger';
+import { prepareDeleteConfigValuesForCalc } from '~/utils/page-delete-config';
+
+import { ObjectIdLike } from '../interfaces/mongoose-utils';
+import { PathAlreadyExistsError } from '../models/errors';
 import PageOperation, { PageActionStage, PageActionType } from '../models/page-operation';
+import { PageRedirectModel } from '../models/page-redirect';
+import { serializePageSecurely } from '../models/serializers/page-serializer';
+import Subscription from '../models/subscription';
 import ActivityDefine from '../util/activityDefine';
-import { prepareDeleteConfigValuesForCalc } from '~/utils/page-delete-config';
 
 const debug = require('debug')('growi:services:page');
 
@@ -171,6 +174,16 @@ class PageService {
       }
     });
 
+    // duplicate
+    this.pageEvent.on('duplicate', async(page, user) => {
+      try {
+        await this.createAndSendNotifications(page, user, ActivityDefine.ACTION_PAGE_DUPLICATE);
+      }
+      catch (err) {
+        logger.error(err);
+      }
+    });
+
     // delete
     this.pageEvent.on('delete', async(page, user) => {
       try {
@@ -191,6 +204,16 @@ class PageService {
       }
     });
 
+    // revert
+    this.pageEvent.on('revert', async(page, user) => {
+      try {
+        await this.createAndSendNotifications(page, user, ActivityDefine.ACTION_PAGE_REVERT);
+      }
+      catch (err) {
+        logger.error(err);
+      }
+    });
+
     // likes
     this.pageEvent.on('like', async(page, user) => {
       try {
@@ -963,6 +986,7 @@ class PageService {
         newPagePath, page.revision.body, user, options,
       );
     }
+    this.pageEvent.emit('duplicate', page, user);
 
     // 4. Take over tags
     const originTags = await page.findRelatedTagsById();
@@ -1057,6 +1081,7 @@ class PageService {
     const createdPage = await Page.create(
       newPagePath, page.revision.body, user, options,
     );
+    this.pageEvent.emit('duplicate', page, user);
 
     if (isRecursively) {
       this.duplicateDescendantsWithStream(page, newPagePath, user);
@@ -1879,7 +1904,7 @@ class PageService {
 
     // throw if any page already exists
     if (originPage != null) {
-      throw Error(`This page cannot be reverted since a page with path "${originPage.path}" already exists. Rename the existing pages first.`);
+      throw new PathAlreadyExistsError('already_exists', originPage.path);
     }
 
     // 2. Revert target
@@ -1891,6 +1916,8 @@ class PageService {
     }, { new: true });
     await PageTagRelation.updateMany({ relatedPage: page._id }, { $set: { isPageTrashed: false } });
 
+    this.pageEvent.emit('revert', page, user);
+
     if (!isRecursively) {
       await this.updateDescendantCountOfAncestors(parent._id, 1, true);
     }
@@ -1973,7 +2000,7 @@ class PageService {
     const newPath = Page.getRevertDeletedPageName(page.path);
     const originPage = await Page.findByPath(newPath);
     if (originPage != null) {
-      throw Error(`This page cannot be reverted since a page with path "${originPage.path}" already exists.`);
+      throw new PathAlreadyExistsError('already_exists', originPage.path);
     }
 
     if (isRecursively) {
@@ -1990,6 +2017,8 @@ class PageService {
     }, { new: true });
     await PageTagRelation.updateMany({ relatedPage: page._id }, { $set: { isPageTrashed: false } });
 
+    this.pageEvent.emit('revert', page, user);
+
     return updatedPage;
   }
 

packages/app/src/server/util/activityDefine.ts

@@ -1,12 +1,16 @@
+// TargetModel
 const MODEL_PAGE = 'Page';
 const MODEL_COMMENT = 'Comment';
 
+// Activity
 const ACTION_PAGE_LIKE = 'PAGE_LIKE';
 const ACTION_PAGE_BOOKMARK = 'PAGE_BOOKMARK';
 const ACTION_PAGE_UPDATE = 'PAGE_UPDATE';
 const ACTION_PAGE_RENAME = 'PAGE_RENAME';
+const ACTION_PAGE_DUPLICATE = 'PAGE_DUPLICATE';
 const ACTION_PAGE_DELETE = 'PAGE_DELETE';
 const ACTION_PAGE_DELETE_COMPLETELY = 'PAGE_DELETE_COMPLETELY';
+const ACTION_PAGE_REVERT = 'PAGE_REVERT';
 const ACTION_COMMENT_CREATE = 'COMMENT_CREATE';
 const ACTION_COMMENT_UPDATE = 'COMMENT_UPDATE';
 
@@ -24,8 +28,10 @@ const getSupportActionNames = () => {
     ACTION_PAGE_BOOKMARK,
     ACTION_PAGE_UPDATE,
     ACTION_PAGE_RENAME,
+    ACTION_PAGE_DUPLICATE,
     ACTION_PAGE_DELETE,
     ACTION_PAGE_DELETE_COMPLETELY,
+    ACTION_PAGE_REVERT,
     ACTION_COMMENT_CREATE,
     ACTION_COMMENT_UPDATE,
   ];
@@ -39,8 +45,10 @@ const activityDefine = {
   ACTION_PAGE_BOOKMARK,
   ACTION_PAGE_UPDATE,
   ACTION_PAGE_RENAME,
+  ACTION_PAGE_DUPLICATE,
   ACTION_PAGE_DELETE,
   ACTION_PAGE_DELETE_COMPLETELY,
+  ACTION_PAGE_REVERT,
   ACTION_COMMENT_CREATE,
   ACTION_COMMENT_UPDATE,
 

packages/app/src/stores/tag.tsx

@@ -1,11 +1,9 @@
 import { SWRResponse } from 'swr';
 import useSWRImmutable from 'swr/immutable';
 
+import { apiGet } from '~/client/util/apiv1-client';
 import { ITagsListApiv1Result } from '~/interfaces/tag';
 
-import { apiGet } from '../client/util/apiv1-client';
-
-
 export const useSWRxTagsList = (limit?: number, offset?: number): SWRResponse<ITagsListApiv1Result, Error> => {
   return useSWRImmutable(
     ['/tags.list', limit, offset],

packages/app/src/styles/_page_list.scss

@@ -49,15 +49,23 @@ body .page-list {
         margin-right: 2px;
       }
 
+      .footstamp-icon {
+        svg {
+          width: 14px;
+          height: 14px;
+        }
+      }
       .seen-users-count {
-        &.strength-1 {
+        &.strength-0,
+        &.strength-1,
+        &.strength-2 {
           font-weight: bold;
         }
-        &.strength-2 {
+        &.strength-3 {
           font-weight: normal;
         }
-        &.strength-3 {
-          opacity: 0.6;
+        &.strength-4 {
+          opacity: 0.5;
         }
       }
     }
@@ -78,17 +86,6 @@ body .page-list {
     .list-group-item {
       min-height: 136px;
 
-      .page-list-meta {
-        .meta-icon {
-          width: 14px;
-          height: 14px;
-          margin-right: 14px;
-        }
-        .footstamp-icon {
-          margin-right: 2px;
-        }
-      }
-
       .page-list-updated-at {
         font-size: 12px;
       }

packages/plugin-lsx/src/client/js/components/Lsx.jsx

@@ -60,7 +60,7 @@ export class Lsx extends React.Component {
     try {
       const res = await this.props.appContainer.apiGet('/plugins/lsx', { pagePath, options: lsxContext.options });
 
-      lsxContext.activeUsersCount = res.activeUsersCount;
+      lsxContext.toppageViewersCount = res.toppageViewersCount;
 
       if (res.ok) {
         const nodeTree = this.generatePageNodeTree(pagePath, res.pages);

packages/plugin-lsx/src/client/js/components/LsxPageList/LsxPage.jsx

@@ -79,7 +79,7 @@ export class LsxPage extends React.Component {
 
   render() {
     const pageNode = this.props.pageNode;
-    const { activeUsersCount } = this.props.lsxContext;
+    const { toppageViewersCount } = this.props.lsxContext;
 
     // create PagePath element
     let pagePathNode = <PagePathWrapper pagePath={pageNode.pagePath} isExists={this.state.isExists} />;
@@ -88,7 +88,7 @@ export class LsxPage extends React.Component {
     }
 
     // create PageListMeta element
-    const pageListMeta = (this.state.isExists) ? <PageListMeta page={pageNode.page} activeUsersCount={activeUsersCount} /> : '';
+    const pageListMeta = (this.state.isExists) ? <PageListMeta page={pageNode.page} basisViewersCount={toppageViewersCount} /> : '';
 
     return (
       <li className="page-list-li">

packages/plugin-lsx/src/server/routes/lsx.js

@@ -208,10 +208,17 @@ module.exports = (crowi, app) => {
 
     const builder = await generateBaseQueryBuilder(pagePath, user);
 
-    // count active users
-    let activeUsersCount;
+    // count viewers of `/`
+    let toppageViewersCount;
     try {
-      activeUsersCount = await User.countListByStatus(User.STATUS_ACTIVE);
+      const aggRes = await Page.aggregate([
+        { $match: { path: '/' } },
+        { $project: { count: { $size: '$seenUsers' } } },
+      ]);
+
+      toppageViewersCount = aggRes.length > 0
+        ? aggRes[0].count
+        : 1;
     }
     catch (error) {
       return res.json(ApiResponse.error(error));
@@ -237,7 +244,7 @@ module.exports = (crowi, app) => {
       query = Lsx.addSortCondition(query, pagePath, options.sort, options.reverse);
 
       const pages = await query.exec();
-      res.json(ApiResponse.success({ pages, activeUsersCount }));
+      res.json(ApiResponse.success({ pages, toppageViewersCount }));
     }
     catch (error) {
       return res.json(ApiResponse.error(error));

packages/slackbot-proxy/docker/Dockerfile

@@ -1,4 +1,4 @@
-# syntax = docker/dockerfile:1
+# syntax = docker/dockerfile:1.4
 
 ##
 ## packages-json-picker
@@ -103,18 +103,16 @@ ENV NODE_ENV production
 ENV optDir /opt
 ENV appDir ${optDir}
 
+USER node
+
+WORKDIR ${appDir}
 # copy artifacts
 COPY --from=deps-resolver-prod --chown=node:node \
-  ${optDir}/dependencies.tar ${appDir}/
+  ${optDir}/dependencies.tar ./
 COPY --from=builder --chown=node:node \
-  ${optDir}/packages.tar ${appDir}/
-
-RUN chown node:node ${appDir}
-
-USER node
+  ${optDir}/packages.tar ./
 
 # extract artifacts
-WORKDIR ${appDir}
 RUN tar -xf dependencies.tar
 RUN tar -xf packages.tar
 RUN rm dependencies.tar packages.tar

packages/ui/src/components/PagePath/PageListMeta.tsx

@@ -12,38 +12,38 @@ const { checkTemplatePath } = templateChecker;
 
 
 const SEEN_USERS_HIDE_THRES__ACTIVE_USERS_COUNT = 5;
-const MIN_STRENGTH_LEVEL = -3;
+const MAX_STRENGTH_LEVEL = 4;
 
 type SeenUsersCountProps = {
   count: number,
-  activeUsersCount?: number,
+  basisViewersCount?: number,
   shouldSpaceOutIcon?: boolean,
 }
 
 const SeenUsersCount = (props: SeenUsersCountProps): JSX.Element => {
 
-  const { count, shouldSpaceOutIcon, activeUsersCount } = props;
+  const { count, shouldSpaceOutIcon, basisViewersCount } = props;
 
   if (count === 0) {
     return <></>;
   }
 
-  if (activeUsersCount != null && activeUsersCount <= SEEN_USERS_HIDE_THRES__ACTIVE_USERS_COUNT) {
+  if (basisViewersCount != null && basisViewersCount <= SEEN_USERS_HIDE_THRES__ACTIVE_USERS_COUNT) {
     return <></>;
   }
 
-  const strengthLevel = Math.log(count / (activeUsersCount ?? count)); // Max: 0
+  const strengthLevel = Math.ceil(
+    Math.min(0, Math.log(count / (basisViewersCount ?? count))) // Max: 0
+    * 2 * -1,
+  );
 
-  if (strengthLevel <= MIN_STRENGTH_LEVEL) {
+  if (strengthLevel > MAX_STRENGTH_LEVEL) {
     return <></>;
   }
 
-  assert(strengthLevel > MIN_STRENGTH_LEVEL); // [0, MIN_STRENGTH_LEVEL)
+  assert(strengthLevel >= 0 && strengthLevel <= MAX_STRENGTH_LEVEL); // [0, MAX_STRENGTH_LEVEL)
 
-  let strengthClass = '';
-  if (strengthLevel < 0) {
-    strengthClass = `strength-${Math.ceil(strengthLevel * -1)}`; // strength-{0, 1, 2, 3}
-  }
+  const strengthClass = `strength-${strengthLevel}`; // strength-{0, 1, 2, 3, 4}
 
   return (
     <span className={`seen-users-count ${shouldSpaceOutIcon ? 'mr-3' : ''} ${strengthClass}`}>
@@ -60,12 +60,12 @@ type PageListMetaProps = {
   likerCount?: number,
   bookmarkCount?: number,
   shouldSpaceOutIcon?: boolean,
-  activeUsersCount?: number,
+  basisViewersCount?: number,
 }
 
 export const PageListMeta: FC<PageListMetaProps> = (props: PageListMetaProps) => {
 
-  const { page, shouldSpaceOutIcon, activeUsersCount } = props;
+  const { page, shouldSpaceOutIcon, basisViewersCount } = props;
 
   // top check
   let topLabel;
@@ -103,7 +103,7 @@ export const PageListMeta: FC<PageListMetaProps> = (props: PageListMetaProps) =>
     <span className="page-list-meta">
       {topLabel}
       {templateLabel}
-      <SeenUsersCount count={page.seenUsers.length} activeUsersCount={activeUsersCount} />
+      <SeenUsersCount count={page.seenUsers.length} basisViewersCount={basisViewersCount} />
       {commentCount}
       {likerCount}
       {locked}