From 6d7afc7bbc90130363e6a999260e2ffab13593af Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Mon, 30 Oct 2017 08:07:03 -0300
Subject: [PATCH] Adding missing classes and props

---
 .../src/components/ApproveButton.js           |  5 +--
 .../src/components/RejectButton.js            |  5 +--
 .../Community/components/FlaggedAccounts.js   |  3 +-
 .../Community/components/FlaggedUser.js       | 32 ++++++++++++-------
 4 files changed, 28 insertions(+), 17 deletions(-)

diff --git a/client/coral-admin/src/components/ApproveButton.js b/client/coral-admin/src/components/ApproveButton.js
index 151a5ca29..8ab455510 100644
--- a/client/coral-admin/src/components/ApproveButton.js
+++ b/client/coral-admin/src/components/ApproveButton.js
@@ -7,11 +7,11 @@ import {Icon} from 'coral-ui';
 
 import t from 'coral-framework/services/i18n';
 
-const ApproveButton = ({active, minimal, onClick}) => {
+const ApproveButton = ({active, minimal, onClick, className}) => {
   const text = active ? t('modqueue.approved') : t('modqueue.approve');
   return (
     <button
-      className={cn(styles.root, {[styles.minimal]: minimal, [styles.active]: active})}
+      className={cn(styles.root, {[styles.minimal]: minimal, [styles.active]: active}, className)}
       onClick={onClick}
     >
       <Icon name={'done'} className={styles.icon} />
@@ -21,6 +21,7 @@ const ApproveButton = ({active, minimal, onClick}) => {
 };
 
 ApproveButton.propTypes = {
+  className: PropTypes.string,
   active: PropTypes.bool,
   minimal: PropTypes.bool,
   onClick: PropTypes.func,
diff --git a/client/coral-admin/src/components/RejectButton.js b/client/coral-admin/src/components/RejectButton.js
index e01102dc3..8e0873162 100644
--- a/client/coral-admin/src/components/RejectButton.js
+++ b/client/coral-admin/src/components/RejectButton.js
@@ -7,11 +7,11 @@ import {Icon} from 'coral-ui';
 
 import t from 'coral-framework/services/i18n';
 
-const RejectButton = ({active, minimal, onClick}) => {
+const RejectButton = ({active, minimal, onClick, className}) => {
   const text = active ? t('modqueue.rejected') : t('modqueue.reject');
   return (
     <button
-      className={cn(styles.root, {[styles.minimal]: minimal, [styles.active]: active})}
+      className={cn(styles.root, {[styles.minimal]: minimal, [styles.active]: active}, className)}
       onClick={onClick}
     >
       <Icon name={'close'} className={styles.icon} />
@@ -21,6 +21,7 @@ const RejectButton = ({active, minimal, onClick}) => {
 };
 
 RejectButton.propTypes = {
+  className: PropTypes.string,
   active: PropTypes.bool,
   minimal: PropTypes.bool,
   onClick: PropTypes.func,
diff --git a/client/coral-admin/src/routes/Community/components/FlaggedAccounts.js b/client/coral-admin/src/routes/Community/components/FlaggedAccounts.js
index 1559b0507..cbfd903c6 100644
--- a/client/coral-admin/src/routes/Community/components/FlaggedAccounts.js
+++ b/client/coral-admin/src/routes/Community/components/FlaggedAccounts.js
@@ -1,5 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import cn from 'classnames';
 import t from 'coral-framework/services/i18n';
 import EmptyCard from 'coral-admin/src/components/EmptyCard';
 import LoadMore from '../../../components/LoadMore';
@@ -23,7 +24,7 @@ class FlaggedAccounts extends React.Component {
     const hasResults = users.nodes && !!users.nodes.length;
 
     return (
-      <div className={styles.container}>
+      <div className={cn('talk-adnin-community-flagged-accounts', styles.container)}>
         <div className={styles.mainFlaggedContent}>
           {
             hasResults
diff --git a/client/coral-admin/src/routes/Community/components/FlaggedUser.js b/client/coral-admin/src/routes/Community/components/FlaggedUser.js
index 409e867a3..69f94179d 100644
--- a/client/coral-admin/src/routes/Community/components/FlaggedUser.js
+++ b/client/coral-admin/src/routes/Community/components/FlaggedUser.js
@@ -1,18 +1,14 @@
 import React from 'react';
 import styles from './FlaggedUser.css';
-
-// TODO: Should not rely on plugin.
+import PropTypes from 'prop-types';
+import cn from 'classnames';
+import t from 'coral-framework/services/i18n';
 import {username} from 'talk-plugin-flags/helpers/flagReasons';
-
 import ActionsMenu from 'coral-admin/src/components/ActionsMenu';
 import ActionsMenuItem from 'coral-admin/src/components/ActionsMenuItem';
 import ApproveButton from 'coral-admin/src/components/ApproveButton';
 import RejectButton from 'coral-admin/src/components/RejectButton';
 
-import cn from 'classnames';
-import t from 'coral-framework/services/i18n';
-
-// TODO: Should work with custom flags too.
 const shortReasons = {
   [username.other]: t('community.other'),
   [username.spam]: t('community.spam_ads'),
@@ -21,7 +17,6 @@ const shortReasons = {
   [username.impersonating]: t('community.impersonating'),
 };
 
-// Render a single user for the list
 class User extends React.Component {
 
   showSuspenUserDialog = () => this.props.showSuspendUserDialog({
@@ -54,8 +49,8 @@ class User extends React.Component {
         tabIndex={0}
         className={cn(className, styles.root, {[styles.rootSelected]: selected})}
       >
-        <div className={styles.container}>
-          <div className={styles.header}>
+        <div className={cn('talk-admin-community-flagged-user', styles.container)}>
+          <div className={cn('talk-admin-community-flagged-user-header', styles.header)}>
             <div className={styles.author}>
               <button
                 onClick={this.viewAuthorDetail}
@@ -78,8 +73,7 @@ class User extends React.Component {
               }
             </div>
           </div>
-
-          <div className={styles.body}>
+          <div className={cn('talk-admin-community-flagged-user-body', styles.body)}>
             <div className={styles.flagged}>
               <div className={styles.flaggedByCount}>
                 <i className={cn('material-icons', styles.flagIcon)}>flag</i>
@@ -127,9 +121,11 @@ class User extends React.Component {
             <div className={styles.sideActions}>
               <div className={styles.actions}>
                 <ApproveButton
+                  className="talk-admin-flagged-user-approve-button"
                   onClick={this.approveUser}
                 />
                 <RejectButton
+                  className="talk-admin-flagged-user-reject-button"
                   onClick={this.showRejectUsernameDialog}
                 />
               </div>
@@ -141,4 +137,16 @@ class User extends React.Component {
   }
 }
 
+User.propTypes = {
+  showSuspendUserDialog: PropTypes.func,
+  showBanUserDialog: PropTypes.func,
+  viewUserDetail: PropTypes.object,
+  showRejectUsernameDialog: PropTypes.func,
+  approveUser: PropTypes.func,
+  user: PropTypes.object,
+  className: PropTypes.string,
+  selected: PropTypes.bool,
+  me: PropTypes.object,
+};
+
 export default User;