UPL refixed

src/client/js/app.jsx

@@ -125,9 +125,8 @@ if (pageContainer.state.pageId != null) {
     'page-comment-write':  <CommentEditorLazyRenderer />,
     'revision-toc': <TableOfContents />,
     'like-button': <LikeButton pageId={pageContainer.state.pageId} isLiked={pageContainer.state.isLiked} />,
-    // TODO: GW-333
-    // 'seen-user-list': <UserPictureList userIds={pageContainer.state.seenUserIds} />,
-    // 'liker-list': <UserPictureList userIds={pageContainer.state.likerUserIds} />,
+    'seen-user-list': <UserPictureList userIds={pageContainer.state.seenUserIds} />,
+    'liker-list': <UserPictureList userIds={pageContainer.state.likerUserIds} />,
     'bookmark-button':  <BookmarkButton pageId={pageContainer.state.pageId} crowi={appContainer} />,
     'bookmark-button-lg':  <BookmarkButton pageId={pageContainer.state.pageId} crowi={appContainer} size="lg" />,
     'rename-page-name-input':  <PagePathAutoComplete crowi={appContainer} initializedPath={pageContainer.state.path} />,

src/client/js/components/User/UserPictureList.jsx

@@ -1,12 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-
-// TODO: GW-333
-// import OverlayTrigger from 'react-bootstrap/es/OverlayTrigger';
-// import Tooltip from 'react-bootstrap/es/Tooltip';
-
-import { Tooltip, Button } from 'reactstrap';
-
+import { UncontrolledTooltip, Button } from 'reactstrap';
 import { createSubscribedElement } from '../UnstatedUtils';
 import AppContainer from '../../services/AppContainer';
 
@@ -32,26 +26,18 @@ class UserPictureList extends React.Component {
 
   render() {
     const users = this.state.users.map((user) => {
-      // create Tooltip
-      // const tooltip = <Tooltip id={`tooltip-${user._id}`}>@{user.username}<br />{user.name}</Tooltip>;
-
-      const [tooltipOpen, setTooltipOpen] = this.props;
-      const toggle = () => setTooltipOpen(!tooltipOpen);
-
       return (
         <span>
           <Button id={`span-${user._id}`}>{/* workaround from https://github.com/react-bootstrap/react-bootstrap/issues/2208#issuecomment-301737531 */}
             <UserPicture user={user} size="xs" ref={`userPicture-${user._id}`} />
           </Button>
-          <Tooltip
+          <UncontrolledTooltip
             id={`tooltip-${user._id}`}
             placement="bottom"
-            isOpen={tooltipOpen}
             target={`span-${user._id}`}
-            toggle={toggle}
           >
             @{user.username}<br />{user.name}
-          </Tooltip>
+          </UncontrolledTooltip>
         </span>
       );
     });