feat: style read-only drawers.

fix: empty state in resources tables.

client/src/containers/Customers/CustomersLanding/CustomersList.js

@@ -21,9 +21,10 @@ import { compose } from 'utils';
 function CustomersList({
   // #withCustomers
   customersTableState,
+  customersTableStateChanged,
 
   // #withCustomersActions
-  setCustomersTableState
+  setCustomersTableState,
 }) {
   // Resets the accounts table state once the page unmount.
   useEffect(
@@ -38,7 +39,10 @@ function CustomersList({
   );
 
   return (
-    <CustomersListProvider tableState={customersTableState}>
+    <CustomersListProvider
+      tableState={customersTableState}
+      tableStateChanged={customersTableStateChanged}
+    >
       <CustomersActionsBar />
 
       <DashboardPageContent>
@@ -54,6 +58,9 @@ function CustomersList({
 }
 
 export default compose(
-  withCustomers(({ customersTableState }) => ({ customersTableState })),
-  withCustomersActions
+  withCustomers(({ customersTableState, customersTableStateChanged }) => ({
+    customersTableState,
+    customersTableStateChanged,
+  })),
+  withCustomersActions,
 )(CustomersList);

client/src/containers/Customers/CustomersLanding/CustomersListProvider.js

@@ -1,13 +1,14 @@
 import React, { createContext } from 'react';
+import { isEmpty } from 'lodash';
 
 import DashboardInsider from 'components/Dashboard/DashboardInsider';
 import { useResourceMeta, useResourceViews, useCustomers } from 'hooks/query';
-import { isTableEmptyStatus, getFieldsFromResourceMeta } from 'utils';
+import { getFieldsFromResourceMeta } from 'utils';
 import { transformCustomersStateToQuery } from './utils';
 
 const CustomersListContext = createContext();
 
-function CustomersListProvider({ tableState, ...props }) {
+function CustomersListProvider({ tableState, tableStateChanged, ...props }) {
   // Transformes the table state to fetch query.
   const tableQuery = transformCustomersStateToQuery(tableState);
 
@@ -31,13 +32,7 @@ function CustomersListProvider({ tableState, ...props }) {
 
   // Detarmines the datatable empty status.
   const isEmptyStatus =
-    isTableEmptyStatus({
-      data: customers,
-      pagination,
-      filterMeta,
-    }) &&
-    !isCustomersFetching &&
-    !tableState.inactiveMode;
+    isEmpty(customers) && !isCustomersLoading && !tableStateChanged;
 
   const state = {
     customersViews,

client/src/containers/Customers/CustomersLanding/withCustomers.js

@@ -1,12 +1,18 @@
 import { connect } from 'react-redux';
-import { getCustomersTableStateFactory } from 'store/customers/customers.selectors';
+import {
+  getCustomersTableStateFactory,
+  customersTableStateChangedFactory,
+} from 'store/customers/customers.selectors';
+
 
 export default (mapState) => {
   const getCustomersTableState = getCustomersTableStateFactory();
+  const customersTableStateChanged = customersTableStateChangedFactory();
 
   const mapStateToProps = (state, props) => {
     const mapped = {
       customersTableState: getCustomersTableState(state, props),
+      customersTableStateChanged: customersTableStateChanged(state, props),
     };
     return mapState ? mapState(mapped, state, props) : mapped;
   };