feat: style read-only drawers.

fix: empty state in resources tables.

client/src/containers/Sales/Estimates/EstimatesLanding/EstimatesActionsBar.js

@@ -46,7 +46,6 @@ function EstimateActionsBar({
   const onClickNewEstimate = () => {
     history.push('/estimates/new');
   };
-
   // Estimates refresh action.
   const { refresh } = useRefreshEstimates();
 

client/src/containers/Sales/Estimates/EstimatesLanding/EstimatesList.js

@@ -20,25 +20,23 @@ import { compose, transformTableStateToQuery } from 'utils';
 function EstimatesList({
   // #withEstimate
   estimatesTableState,
+  estimatesTableStateChanged,
 
   // #withEstimatesActions
-  setEstimatesTableState
+  resetEstimatesTableState,
 }) {
   // Resets the estimates table state once the page unmount.
   React.useEffect(
     () => () => {
-      setEstimatesTableState({
-        filterRoles: [],
-        viewSlug: '',
-        pageIndex: 0,
-      });
+      resetEstimatesTableState();
     },
-    [setEstimatesTableState],
+    [resetEstimatesTableState],
   );
 
   return (
     <EstimatesListProvider
       query={transformTableStateToQuery(estimatesTableState)}
+      tableStateChanged={estimatesTableStateChanged}
     >
       <EstimatesActionsBar />
 
@@ -56,6 +54,9 @@ function EstimatesList({
 }
 
 export default compose(
-  withEstimates(({ estimatesTableState }) => ({ estimatesTableState })),
-  withEstimatesActions
+  withEstimates(({ estimatesTableState, estimatesTableStateChanged }) => ({
+    estimatesTableState,
+    estimatesTableStateChanged,
+  })),
+  withEstimatesActions,
 )(EstimatesList);

client/src/containers/Sales/Estimates/EstimatesLanding/EstimatesListProvider.js

@@ -1,16 +1,18 @@
 import React, { createContext } from 'react';
+import { isEmpty } from 'lodash';
 
 import DashboardInsider from 'components/Dashboard/DashboardInsider';
 
 import { useResourceViews, useResourceMeta, useEstimates } from 'hooks/query';
-import { isTableEmptyStatus, getFieldsFromResourceMeta } from 'utils';
+import { getFieldsFromResourceMeta } from 'utils';
 
+// Estimates list context.
 const EstimatesListContext = createContext();
 
 /**
  * Sale estimates data provider.
  */
-function EstimatesListProvider({ query, ...props }) {
+function EstimatesListProvider({ query, tableStateChanged, ...props }) {
   // Fetches estimates resource views and fields.
   const { data: estimatesViews, isLoading: isViewsLoading } =
     useResourceViews('sale_estimates');
@@ -31,11 +33,7 @@ function EstimatesListProvider({ query, ...props }) {
 
   // Detarmines the datatable empty status.
   const isEmptyStatus =
-    isTableEmptyStatus({
-      data: estimates,
-      pagination,
-      filterMeta,
-    }) && !isEstimatesFetching;
+    !isEstimatesLoading && !tableStateChanged && isEmpty(estimates);
 
   // Provider payload.
   const provider = {

client/src/containers/Sales/Estimates/EstimatesLanding/withEstimates.js

@@ -1,14 +1,17 @@
 import { connect } from 'react-redux';
 import {
   getEstimatesTableStateFactory,
+  isEstimatesTableStateChangedFactory,
 } from 'store/Estimate/estimates.selectors';
 
 export default (mapState) => {
   const getEstimatesTableState = getEstimatesTableStateFactory();
+  const isEstimatesTableStateChanged = isEstimatesTableStateChangedFactory();
 
   const mapStateToProps = (state, props) => {
     const mapped = {
       estimatesTableState: getEstimatesTableState(state, props),
+      estimatesTableStateChanged: isEstimatesTableStateChanged(state, props),
     };
     return mapState ? mapState(mapped, state, props) : mapped;
   };

client/src/containers/Sales/Estimates/EstimatesLanding/withEstimatesActions.js

@@ -1,10 +1,12 @@
 import { connect } from 'react-redux';
 import {
   setEstimatesTableState,
+  resetEstimatesTableState,
 } from 'store/Estimate/estimates.actions';
 
 const mapDispatchToProps = (dispatch) => ({
   setEstimatesTableState: (state) => dispatch(setEstimatesTableState(state)),
+  resetEstimatesTableState: () => dispatch(resetEstimatesTableState()),
 });
 
 export default connect(null, mapDispatchToProps);