fix tab highlight (#2551)

frontend/src/components/review-list-view/review-list-item.js

@@ -31,7 +31,7 @@ class Reviewers extends React.Component {
     let reviewers = '';
 
     this.props.item.reviewers.map(item => {
-      reviewers = reviewers + ' and ' + item.user_name
+      reviewers = reviewers + ' and ' + item.user_name;
     });
 
     this.setState({
@@ -45,9 +45,9 @@ class Reviewers extends React.Component {
     return (
       <div className='position-relative reviewer-list'>
         <span id={'reviewers' + items.id}>
-        {items.reviewers.map((item, index) => (
-          <img key={index} id={'reviewer-tip' + '-' + items.id + '-' + index}  className="avatar avatar-sm reviewer-avatar" src={item.avatar_url} />
-        ))}
+          {items.reviewers.map((item, index) => (
+            <img key={index} id={'reviewer-tip' + '-' + items.id + '-' + index}  className="avatar avatar-sm reviewer-avatar" src={item.avatar_url} alt={item.user_name} />
+          ))}
         </span>
         <Tooltip placement="bottom-end" isOpen={this.state.reviewerTipOpen} target={'reviewers' + items.id} toggle={this.toggle}>
           {reviewerList}
@@ -112,7 +112,7 @@ class ReviewListItem extends React.Component {
         <td className="name a-simulate" style={{width: '26%'}} onClick={this.onReviewsClick}>{fileName}</td>
         <td className='library' style={{width: '25%'}}>{item.draft_origin_repo_name}</td>
         <td className="update" style={{width: '20%'}}>{localTime}</td>
-        <td className="author" style={{width: '10%'}}><img className="avatar avatar-sm avatar-with-tooltip" id={'tip-' + item.id} src={item.author.avatar_url} /></td>
+        <td className="author" style={{width: '10%'}}><img className="avatar avatar-sm avatar-with-tooltip" id={'tip-' + item.id} src={item.author.avatar_url} alt={item.user_name} /></td>
         <td className="reviewer" style={{width: '15%'}}><Reviewers item={item}/></td>
         <Tooltip placement="bottom-end" isOpen={this.state.authorTipOpen} target={'tip-' + item.id} toggle={this.toggle}>
           {item.author.user_name}
@@ -124,4 +124,8 @@ class ReviewListItem extends React.Component {
 
 ReviewListItem.propTypes = propTypes;
 
+Reviewers.propTypes = {
+  item: PropTypes.object.isRequired,
+};
+
 export default ReviewListItem;

frontend/src/components/review-list-view/review-list-view.js

@@ -8,18 +8,20 @@ import ReviewListItem from './review-list-item';
 const propTypes = {
   isItemFreezed: PropTypes.bool.isRequired,
   itemsList: PropTypes.array.isRequired,
+  getReviewList: PropTypes.func.isRequired,
+  activeTab: PropTypes.string.isRequired,
 };
 
 class ReviewListView extends React.Component {
 
-    constructor(props) {
-      super(props);
-      this.toggle = this.toggle.bind(this);
-    }
+  constructor(props) {
+    super(props);
+    this.toggle = this.toggle.bind(this);
+  }
 
   toggle(tab) {
     if (this.props.activeTab !== tab) {
-      this.props.getReviewList(tab)
+      this.props.getReviewList(tab);
     }
   }
 
@@ -32,7 +34,7 @@ class ReviewListView extends React.Component {
             <NavLink
               className={classnames({ active: this.props.activeTab === 'open' })}
               onClick={() => { this.toggle('open');}}
-              >
+            >
               {gettext('Open')}
             </NavLink>
           </NavItem>
@@ -40,7 +42,7 @@ class ReviewListView extends React.Component {
             <NavLink
               className={classnames({ active: this.props.activeTab === 'finished' })}
               onClick={() => { this.toggle('finished');}}
-              >
+            >
               {gettext('Published')}
             </NavLink>
           </NavItem>
@@ -48,7 +50,7 @@ class ReviewListView extends React.Component {
             <NavLink
               className={classnames({ active: this.props.activeTab === 'closed' })}
               onClick={() => { this.toggle('closed');}}
-              >
+            >
               {gettext('Closed')}
             </NavLink>
           </NavItem>
@@ -67,11 +69,11 @@ class ReviewListView extends React.Component {
           <tbody>
             { items && items.map((item) => {
               return (
-                  <ReviewListItem 
-                    key={item.id} 
-                    item={item} 
-                    isItemFreezed={this.props.isItemFreezed}
-                  />
+                <ReviewListItem 
+                  key={item.id} 
+                  item={item} 
+                  isItemFreezed={this.props.isItemFreezed}
+                />
               );
             })}
           </tbody>