More

plugins/talk-plugin-moderation-actions/client/components/BanUserDialog.js

@@ -1,10 +1,12 @@
 import React from 'react';
+import PropTypes from 'prop-types';
+import cn from 'classnames';
 import styles from './BanUserDialog.css';
 import {t} from 'plugin-api/beta/client/services';
 import {Dialog, Button} from 'plugin-api/beta/client/components/ui';
 
-export default ({showBanDialog, closeBanDialog, banUser}) => (
-  <Dialog open={showBanDialog} className={styles.dialog}>
+const BanUserDialog = ({showBanDialog, closeBanDialog, banUser}) => (
+  <Dialog open={showBanDialog} className={cn(styles.dialog, 'talk-ban-user-dialog')}>
     <span className={styles.close} onClick={closeBanDialog}>×</span>
     <h2>{t('talk-plugin-moderation-actions.ban_user_dialog_headline')}</h2>
     <h3>{t('talk-plugin-moderation-actions.ban_user_dialog_sub')}</h3>
@@ -12,12 +14,28 @@ export default ({showBanDialog, closeBanDialog, banUser}) => (
       {t('talk-plugin-moderation-actions.ban_user_dialog_copy')}
     </p>
     <div className={styles.buttons}>
-      <Button cStyle="cancel" onClick={closeBanDialog} className={styles.cancel} raised>
+      <Button
+        cStyle="cancel"
+        onClick={closeBanDialog}
+        className={cn(styles.cancel, 'talk-ban-user-dialog-button-cancel')}
+        raised >
         {t('talk-plugin-moderation-actions.ban_user_dialog_cancel')}
       </Button>
-      <Button cStyle="black" onClick={banUser} className={styles.confirm} raised>
+      <Button
+        cStyle="black"
+        onClick={banUser}
+        className={cn(styles.confirm, 'talk-ban-user-dialog-button-confirm')}
+        raised >
         {t('talk-plugin-moderation-actions.ban_user_dialog_yes')}
       </Button>
     </div>
   </Dialog>
 );
+
+BanUserDialog.propTypes = {
+  showBanDialog: PropTypes.func.isRequired,
+  closeBanDialog: PropTypes.func.isRequired,
+  banUser: PropTypes.func.isRequired,
+};
+
+export default BanUserDialog;