feat: style read-only drawers.

fix: empty state in resources tables.

client/src/containers/Items/ItemsList.js

@@ -11,7 +11,9 @@ import ItemsViewsTabs from './ItemsViewsTabs';
 import ItemsDataTable from './ItemsDataTable';
 
 import { ItemsListProvider } from './ItemsListProvider';
+
 import withItems from './withItems';
+import withItemsActions from './withItemsActions';
 
 /**
  * Items list.
@@ -19,9 +21,24 @@ import withItems from './withItems';
 function ItemsList({
   // #withItems
   itemsTableState,
+  itemsTableStateChanged,
+
+  // #withItemsActions
+  resetItemsTableState,
 }) {
+  // Resets items table query state once the page unmount.
+  React.useEffect(
+    () => () => {
+      resetItemsTableState();
+    },
+    [resetItemsTableState],
+  );
+
   return (
-    <ItemsListProvider tableState={itemsTableState}>
+    <ItemsListProvider
+      tableState={itemsTableState}
+      tableStateChanged={itemsTableStateChanged}
+    >
       <ItemsActionsBar />
 
       <DashboardPageContent>
@@ -38,5 +55,9 @@ function ItemsList({
 }
 
 export default compose(
-  withItems(({ itemsTableState }) => ({ itemsTableState })),
+  withItemsActions,
+  withItems(({ itemsTableState, itemsTableStateChanged }) => ({
+    itemsTableState,
+    itemsTableStateChanged,
+  })),
 )(ItemsList);

client/src/containers/Items/ItemsListProvider.js

@@ -1,5 +1,5 @@
 import React, { createContext } from 'react';
-
+import { isEmpty } from 'lodash';
 import {
   getFieldsFromResourceMeta,
   transformTableQueryToParams,
@@ -15,7 +15,7 @@ const ItemsContext = createContext();
 /**
  * Items list provider.
  */
-function ItemsListProvider({ tableState, ...props }) {
+function ItemsListProvider({ tableState, tableStateChanged, ...props }) {
   const tableQuery = transformItemsTableState(tableState);
 
   // Fetch accounts resource views and fields.
@@ -43,13 +43,7 @@ function ItemsListProvider({ tableState, ...props }) {
 
   // Detarmines the datatable empty status.
   const isEmptyStatus =
-    isTableEmptyStatus({
-      data: items,
-      pagination,
-      filterMeta,
-    }) &&
-    !isItemsFetching &&
-    !tableState.inactiveMode;
+    !tableStateChanged && !isItemsLoading && isEmpty(items);
 
   const state = {
     itemsViews,
@@ -68,7 +62,10 @@ function ItemsListProvider({ tableState, ...props }) {
   };
 
   return (
-    <DashboardInsider loading={isItemsLoading || isResourceLoading} name={'items-list'}>
+    <DashboardInsider
+      loading={isItemsLoading || isResourceLoading}
+      name={'items-list'}
+    >
       <ItemsContext.Provider value={state} {...props} />
     </DashboardInsider>
   );

client/src/containers/Items/ItemsViewsTabs.js

@@ -22,7 +22,7 @@ function ItemsViewsTabs({
   const { itemsViews } = useItemsListContext();
 
   // Mapped items views.
-  const tabs = transfromViewsToTabs(itemsViews)
+  const tabs = transfromViewsToTabs(itemsViews);
 
   // Handles the active tab change.
   const handleTabChange = (viewSlug) => {
@@ -46,7 +46,7 @@ function ItemsViewsTabs({
 export default compose(
   withRouter,
   withItems(({ itemsTableState }) => ({
-    itemsCurrentView: itemsTableState?.viewSlug
+    itemsCurrentView: itemsTableState?.viewSlug,
   })),
   withItemsActions,
 )(ItemsViewsTabs);

client/src/containers/Items/withItems.js

@@ -1,15 +1,18 @@
 import {connect} from 'react-redux';
 import {
   getItemsTableStateFactory,
+  isItemsTableStateChangedFactory,
 } from 'store/items/items.selectors';
 
 export default (mapState) => {
   const getItemsTableState = getItemsTableStateFactory();
+  const isItemsTableStateChanged = isItemsTableStateChangedFactory();
 
   const mapStateToProps = (state, props) => {
     const mapped = {
       itemsSelectedRows: state.items.selectedRows,
       itemsTableState: getItemsTableState(state, props),
+      itemsTableStateChanged: isItemsTableStateChanged(state, props),
     };
     return mapState ? mapState(mapped, state, props) : mapped;
   };

client/src/containers/Items/withItemsActions.js

@@ -1,8 +1,12 @@
 import { connect } from 'react-redux';
-import { setItemsTableState }from 'store/items/items.actions';
+import {
+  setItemsTableState,
+  resetItemsTableState,
+} from 'store/items/items.actions';
 
 export const mapDispatchToProps = (dispatch) => ({
   setItemsTableState: (queries) => dispatch(setItemsTableState(queries)),
+  resetItemsTableState: () => dispatch(resetItemsTableState()),
 });
 
 export default connect(null, mapDispatchToProps);