feat: roles permission & style & component.

src/containers/Preferences/Users/UsersActions.js

@@ -1,40 +1,41 @@
 import React from 'react';
-import {
-  Button,
-  Intent,
-} from '@blueprintjs/core';
+import { useHistory } from 'react-router-dom';
+
+import { Button, Intent } from '@blueprintjs/core';
 import { FormattedMessage as T } from 'components';
 
 import Icon from 'components/Icon';
 import withDialogActions from 'containers/Dialog/withDialogActions';
-import {compose} from 'utils';
+import { compose } from 'utils';
 
-function UsersActions({
-  openDialog,
-  closeDialog,
-}) {
+function UsersActions({ openDialog, closeDialog }) {
+  const history = useHistory();
   const onClickNewUser = () => {
     openDialog('invite-user');
   };
 
+  const onClickNewRole = () => {
+    history.push('/preferences/roles');
+  };
+
   return (
     <div className="preferences-actions">
       <Button
-        icon={<Icon icon='plus' iconSize={12} />}
+        icon={<Icon icon="plus" iconSize={12} />}
         onClick={onClickNewUser}
-        intent={Intent.PRIMARY}>
+        intent={Intent.PRIMARY}
+      >
         <T id={'invite_user'} />
       </Button>
 
       <Button
-        icon={<Icon icon='plus' iconSize={12} />}
-        onClick={onClickNewUser}>
+        icon={<Icon icon="plus" iconSize={12} />}
+        onClick={onClickNewRole}
+      >
         <T id={'new_role'} />
       </Button>
     </div>
   );
 }
 
-export default compose(
-  withDialogActions,
-)(UsersActions);
+export default compose(withDialogActions)(UsersActions);