feat: add account ability.

src/containers/Accounts/AccountsActionsBar.js

@@ -15,6 +15,7 @@ import { FormattedMessage as T } from 'components';
 import {
   AdvancedFilterPopover,
   If,
+  Can,
   DashboardActionViewsList,
   DashboardFilterButton,
   DashboardRowsHeightButton,
@@ -30,6 +31,8 @@ import withAlertActions from 'containers/Alert/withAlertActions';
 import withAccountsTableActions from './withAccountsTableActions';
 import withSettings from '../Settings/withSettings';
 import withSettingsActions from '../Settings/withSettingsActions';
+import { Account_Abilities, AbilitySubject } from '../../common/abilityOption';
+
 import { compose } from 'utils';
 
 /**
@@ -116,13 +119,14 @@ function AccountsActionsBar({
           onChange={handleTabChange}
         />
         <NavbarDivider />
-
+        <Can I={Account_Abilities.Create} a={AbilitySubject.Account}>
           <Button
             className={Classes.MINIMAL}
             icon={<Icon icon="plus" />}
             text={<T id={'new_account'} />}
             onClick={onClickNewAccount}
           />
+        </Can>
         <AdvancedFilterPopover
           advancedFilterProps={{
             conditions: accountsFilterConditions,
@@ -183,11 +187,13 @@ function AccountsActionsBar({
           onChange={handleTableRowSizeChange}
         />
         <NavbarDivider />
+        <Can I={Account_Abilities.Edit} a={AbilitySubject.Account}>
           <Switch
             labelElement={<T id={'inactive'} />}
             defaultChecked={accountsInactiveMode}
             onChange={handleInactiveSwitchChange}
           />
+        </Can>
       </NavbarGroup>
       <NavbarGroup align={Alignment.RIGHT}>
         <Button

src/containers/Accounts/components.js

@@ -8,9 +8,10 @@ import {
   MenuDivider,
   Intent,
 } from '@blueprintjs/core';
-import { Icon, Money, If } from 'components';
+import { Can, Icon, Money, If } from 'components';
 import intl from 'react-intl-universal';
 import { safeCallback } from 'utils';
+import { AbilitySubject, Account_Abilities } from '../../common/abilityOption';
 
 /**
  * Accounts table actions menu.
@@ -34,18 +35,22 @@ export function ActionsMenu({
         text={intl.get('view_details')}
         onClick={safeCallback(onViewDetails, original)}
       />
+      <Can I={Account_Abilities.Edit} a={AbilitySubject.Account}>
         <MenuDivider />
         <MenuItem
           icon={<Icon icon="pen-18" />}
           text={intl.get('edit_account')}
           onClick={safeCallback(onEdit, original)}
         />
+
         <MenuItem
           icon={<Icon icon="plus" />}
           text={intl.get('new_child_account')}
           onClick={safeCallback(onNewChild, original)}
         />
         <MenuDivider />
+      </Can>
+      <Can I={Account_Abilities.Edit} a={AbilitySubject.Account}>
         <If condition={original.active}>
           <MenuItem
             text={intl.get('inactivate_account')}
@@ -60,12 +65,15 @@ export function ActionsMenu({
             onClick={safeCallback(onActivate, original)}
           />
         </If>
+      </Can>
+      <Can I={Account_Abilities.Edit} a={AbilitySubject.Account}>
         <MenuItem
           text={intl.get('delete_account')}
           icon={<Icon icon="trash-16" iconSize={16} />}
           intent={Intent.DANGER}
           onClick={safeCallback(onDelete, original)}
         />
+      </Can>
     </Menu>
   );
 }

src/containers/Drawers/AccountDrawer/AccountDrawerActionBar.js

@@ -7,13 +7,17 @@ import {
   Intent,
   NavbarDivider,
 } from '@blueprintjs/core';
-import { FormattedMessage as T } from 'components';
+import { Can, FormattedMessage as T } from 'components';
 
 import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
 import withDialogActions from 'containers/Dialog/withDialogActions';
 import withAlertsActions from 'containers/Alert/withAlertActions';
 
 import { safeCallback } from 'utils';
+import {
+  Account_Abilities,
+  AbilitySubject,
+} from '../../../common/abilityOption';
 
 import { compose } from 'utils';
 import { useAccountDrawerContext } from './AccountDrawerProvider';
@@ -53,12 +57,14 @@ function AccountDrawerActionBar({
   return (
     <DashboardActionsBar>
       <NavbarGroup>
+        <Can I={Account_Abilities.Edit} a={AbilitySubject.Account}>
           <Button
             className={Classes.MINIMAL}
             icon={<Icon icon="pen-18" />}
             text={<T id={'edit_account'} />}
             onClick={safeCallback(onEditAccount)}
           />
+
           <Button
             className={Classes.MINIMAL}
             icon={<Icon icon="plus" />}
@@ -66,6 +72,8 @@ function AccountDrawerActionBar({
             onClick={safeCallback(onNewChildAccount)}
           />
           <NavbarDivider />
+        </Can>
+        <Can I={Account_Abilities.Delete} a={AbilitySubject.Account}>
           <Button
             className={Classes.MINIMAL}
             icon={<Icon icon={'trash-16'} iconSize={16} />}
@@ -73,6 +81,7 @@ function AccountDrawerActionBar({
             intent={Intent.DANGER}
             onClick={safeCallback(onDeleteAccount)}
           />
+        </Can>
       </NavbarGroup>
     </DashboardActionsBar>
   );