ability.

src/components/Abilities.js

@@ -0,0 +1,10 @@
+import { AbilityBuilder, defineAbility } from '@casl/ability';
+import { createContextualCan } from '@casl/react';
+import { createContext } from 'react';
+
+export const AbilityContext = createContext();
+export const Can = createContextualCan(AbilityContext.Consumer);
+
+export const ability = defineAbility((can, cannot) => {
+  cannot('Item', 'create');
+});

src/components/Can.js

@@ -0,0 +1,4 @@
+import { createCanBoundTo } from '@casl/react';
+import ability from '../components/Config/ability';
+
+export default createCanBoundTo(ability);

src/components/Config/ability.js

@@ -0,0 +1,10 @@
+import { AbilityBuilder } from '@casl/ability';
+// import { AbilitySubject, ItemAbility } from '../../common/abilityOption';
+
+export function defineAbilitiesFor(role) {
+  const { rules, can } = new AbilityBuilder();
+
+  can('create', 'Item');
+
+  return new Ability(rules);
+}

src/containers/Items/ItemsActionsBar.js

@@ -30,6 +30,9 @@ import withSettings from '../Settings/withSettings';
 import { compose } from 'utils';
 import withSettingsActions from '../Settings/withSettingsActions';
 
+
+import { Can, AbilityContext } from '../../components/Abilities';
+
 /**
  * Items actions bar.
  */
@@ -57,6 +60,8 @@ function ItemsActionsBar({
   // Items refresh action.
   const { refresh } = useRefreshItems();
 
+  const { ability } = React.useContext(AbilityContext);
+
   // History context.
   const history = useHistory();
 
@@ -101,13 +106,14 @@ function ItemsActionsBar({
         />
         <NavbarDivider />
 
-        <Button
+        {/* <Can I="create" a="Item" ability={ability}> */}
-          className={Classes.MINIMAL}
+          <Button
-          icon={<Icon icon="plus" />}
+            className={Classes.MINIMAL}
-          text={<T id={'new_item'} />}
+            icon={<Icon icon="plus" />}
-          onClick={onClickNewItem}
+            text={<T id={'new_item'} />}
-        />
+            onClick={onClickNewItem}
-
+          />
+        {/* </Can> */}
         <AdvancedFilterPopover
           advancedFilterProps={{
             conditions: itemsFilterRoles,