feat(web): ts mentions component

Author: cyrusjc

webapp/src/components/sidebar_buttons/index.js

@@ -15,6 +15,7 @@ function mapStateToProps(state) {
     return {
         connected: state[`plugins-${pluginId}`].connected,
         clientId: state[`plugins-${pluginId}`].clientId,
+        mentions: state[`plugins-${pluginId}`].sidebarContent.mentions,
         reviews: state[`plugins-${pluginId}`].sidebarContent.reviews,
         yourPrs: state[`plugins-${pluginId}`].sidebarContent.prs,
         yourAssignments: state[`plugins-${pluginId}`].sidebarContent.assignments,

webapp/src/components/sidebar_buttons/sidebar_buttons.jsx

@@ -14,6 +14,7 @@ export default class SidebarButtons extends React.PureComponent {
         connected: PropTypes.bool,
         clientId: PropTypes.string,
         enterpriseURL: PropTypes.string,
+        mentions: PropTypes.arrayOf(PropTypes.object),
         reviews: PropTypes.arrayOf(PropTypes.object),
         unreads: PropTypes.arrayOf(PropTypes.object),
         yourPrs: PropTypes.arrayOf(PropTypes.object),
@@ -191,6 +192,18 @@ export default class SidebarButtons extends React.PureComponent {
                         {' ' + unreads.length}
                     </a>
                 </OverlayTrigger>
+                <OverlayTrigger
+                    key='githubMentionsLink'
+                    placement={placement}
+                    overlay={<Tooltip id='mentionTooltip'>{'Mentions on Pull Requests'}</Tooltip>}
+                >
+                    <a
+                        onClick={() => this.openRHS(RHSStates.MENTIONS)}
+                        style={button}
+                    >
+                        <i className='fa fa-comment-o'/>
+                    </a>
+                </OverlayTrigger>
                 <OverlayTrigger
                     key='githubRefreshButton'
                     placement={placement}

webapp/src/components/sidebar_right/index.jsx

@@ -11,11 +11,12 @@ import {getSidebarData} from 'src/selectors';
 import SidebarRight from './sidebar_right.jsx';
 
 function mapStateToProps(state) {
-    const {username, reviews, yourPrs, yourAssignments, unreads, enterpriseURL, orgs, rhsState} = getSidebarData(state);
+    const {username, mentions, reviews, yourPrs, yourAssignments, unreads, enterpriseURL, orgs, rhsState} = getSidebarData(state);
     return {
         username,
         reviews,
         yourPrs,
+        mentions,
         yourAssignments,
         unreads,
         enterpriseURL,

webapp/src/components/sidebar_right/sidebar_right.jsx

@@ -68,6 +68,7 @@ export default class SidebarRight extends React.PureComponent {
         username: PropTypes.string,
         orgs: PropTypes.array.isRequired,
         enterpriseURL: PropTypes.string,
+        mentions: PropTypes.arrayOf(PropTypes.object),
         reviews: PropTypes.arrayOf(PropTypes.object),
         unreads: PropTypes.arrayOf(PropTypes.object),
         yourPrs: PropTypes.arrayOf(PropTypes.object),
@@ -107,7 +108,7 @@ export default class SidebarRight extends React.PureComponent {
             orgQuery += ('+org%3A' + org);
             return orgQuery;
         });
-        const {yourPrs, reviews, unreads, yourAssignments, username, rhsState} = this.props;
+        const {yourPrs, mentions, reviews, unreads, yourAssignments, username, rhsState} = this.props;
 
         let title = '';
         let githubItems = [];
@@ -120,6 +121,13 @@ export default class SidebarRight extends React.PureComponent {
             title = 'Your Open Pull Requests';
             listUrl = baseURL + '/pulls?q=is%3Aopen+is%3Apr+author%3A' + username + '+archived%3Afalse' + orgQuery;
 
+            break;
+        case RHSStates.MENTIONS:
+
+            githubItems = mentions;
+            title = 'Your mentions';
+            listUrl = baseURL + '/pulls?q=is%3Aopen+is%3Apr+mentions%3A' + username + '+archived%3Afalse' + orgQuery;
+
             break;
         case RHSStates.REVIEWS:
 

webapp/src/constants/index.js

@@ -10,6 +10,7 @@ export const RHSStates = {
     REVIEWS: 'reviews',
     UNREADS: 'unreads',
     ASSIGNMENTS: 'assignments',
+    MENTIONS: 'mentions',
 };
 
 export const ReviewState = {

webapp/src/selectors.ts

@@ -57,6 +57,7 @@ export const getSidebarData = createSelector(
         const {username, sidebarContent, reviewDetails, yourPrDetails, organizations, rhsState} = pluginState;
         return {
             username,
+            mentions: sidebarContent.mentions || emptyArray,
             reviews: mapPrsToDetails(sidebarContent.reviews || emptyArray, reviewDetails),
             yourPrs: mapPrsToDetails(sidebarContent.prs || emptyArray, yourPrDetails),
             yourAssignments: sidebarContent.assignments || emptyArray,

webapp/src/types/github_types.ts

@@ -109,6 +109,7 @@ export type UnreadsData = {
 }
 
 export type SidebarContentData = {
+    mentions: GithubIssueData[];
     prs: GithubIssueData[];
     reviews: GithubIssueData[];
     assignments: GithubIssueData[];
@@ -148,6 +149,7 @@ export type APIError = {
 
 export type SidebarData = {
     username: string;
+    mentions: GithubIssueData[];
     reviews: GithubIssueData[];
     yourPrs: GithubIssueData[];
     yourAssignments: GithubIssueData[],