feat(branch & warehouse): fix EmptyStatus.

src/containers/Preferences/Warehouses/WarehousesActions.js

@@ -1,7 +1,8 @@
 import React from 'react';
 import { Button, Intent } from '@blueprintjs/core';
 
-import { FormattedMessage as T, Icon } from 'components';
+import { Features } from 'common';
+import { FeatureCan, FormattedMessage as T, Icon } from 'components';
 import withDialogActions from 'containers/Dialog/withDialogActions';
 import { compose } from 'utils';
 
@@ -18,13 +19,15 @@ function WarehousesActions({
 
   return (
     <React.Fragment>
-      <Button
-        icon={<Icon icon="plus" iconSize={12} />}
-        onClick={handleClickNewWarehouse}
-        intent={Intent.PRIMARY}
-      >
-        <T id={'warehouses.label.new_warehouse'} />
-      </Button>
+      <FeatureCan feature={Features.Warehouses}>
+        <Button
+          icon={<Icon icon="plus" iconSize={12} />}
+          onClick={handleClickNewWarehouse}
+          intent={Intent.PRIMARY}
+        >
+          <T id={'warehouses.label.new_warehouse'} />
+        </Button>
+      </FeatureCan>
     </React.Fragment>
   );
 }

src/containers/Preferences/Warehouses/WarehousesGrid.js

@@ -10,14 +10,18 @@ import WarehousesGridItems from './WarehousesGridItems';
  */
 export default function WarehousesGrid() {
   // Retrieve list context.
-  const { warehouses, isWarehouesLoading } = useWarehousesContext();
+  const {
+    warehouses,
+    isWarehouesLoading,
+    isEmptyStatus,
+  } = useWarehousesContext();
 
   return (
     <React.Fragment>
       <WarehousesList>
         {isWarehouesLoading ? (
           <WarehousesSkeleton />
-        ) : isEmpty(warehouses) ? (
+        ) : isEmptyStatus ? (
           <WarehousesEmptyStatus />
         ) : (
           <WarehousesGridItems warehouses={warehouses} />

src/containers/Preferences/Warehouses/WarehousesProvider.js

@@ -3,7 +3,10 @@ import styled from 'styled-components';
 import classNames from 'classnames';
 import { CLASSES } from 'common/classes';
 import { useWarehouses, useCashflowAccounts } from 'hooks/query';
-import PreferencesPageLoader from '../PreferencesPageLoader';
+import { isEmpty } from 'lodash';
+
+import { Features } from 'common';
+import { useFeatureCan } from 'hooks/state';
 
 const WarehousesContext = React.createContext();
 
@@ -11,16 +14,24 @@ const WarehousesContext = React.createContext();
  * Warehouses data provider.
  */
 function WarehousesProvider({ query, ...props }) {
+  // Features guard.
+  const { featureCan } = useFeatureCan();
+  const isWarehouseFeatureCan = featureCan(Features.Warehouses);
+
   // Fetch warehouses list.
   const { data: warehouses, isLoading: isWarehouesLoading } = useWarehouses(
     query,
-    { keepPreviousData: true },
+    { enabled: isWarehouseFeatureCan },
   );
 
+  // Detarmines the datatable empty status.
+  const isEmptyStatus = isEmpty(warehouses) || !isWarehouseFeatureCan;
+
   // Provider state.
   const provider = {
     warehouses,
     isWarehouesLoading,
+    isEmptyStatus,
   };
 
   return (

src/containers/Preferences/Warehouses/components.js

@@ -107,6 +107,7 @@ export const WarehousesList = styled.div`
   display: flex;
   flex-wrap: wrap;
   margin: 15px;
+  height: 100%;
 `;
 
 export const WarehouseBoxRoot = styled.div`