feat: Sidebar overlay.

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

@@ -8,6 +8,7 @@ import {
   Popover,
   Position,
   PopoverInteractionKind,
+  Switch
 } from '@blueprintjs/core';
 import { FormattedMessage as T } from 'components';
 import intl from 'react-intl-universal';
@@ -34,15 +35,13 @@ function CustomerActionsBar({
 
   // #withCustomersActions
   setCustomersTableState,
+  accountsInactiveMode,
 
   // #withAlertActions
   openAlert,
 }) {
   // History context.
   const history = useHistory();
-  
-  // React intl
-  
 
   // Customers list context.
   const { customersViews } = useCustomersListContext();
@@ -61,6 +60,11 @@ function CustomerActionsBar({
       customViewId: viewId.id || null,
     });
   };
+  // Handle inactive switch changing.
+  const handleInactiveSwitchChange = (event) => {
+    const checked = event.target.checked;
+    setCustomersTableState({ inactiveMode: checked });
+  };
 
   return (
     <DashboardActionsBar>
@@ -86,7 +90,7 @@ function CustomerActionsBar({
         >
           <Button
             className={classNames(Classes.MINIMAL, 'button--filter')}
-            text={`${intl.get('filters_applied')}`}
+            text={`${intl.get('filter')}`}
             icon={<Icon icon="filter-16" iconSize={16} />}
           />
         </Popover>
@@ -110,6 +114,11 @@ function CustomerActionsBar({
           icon={<Icon icon="file-export-16" iconSize={16} />}
           text={<T id={'export'} />}
         />
+        <Switch
+          labelElement={<T id={'inactive'} />}
+          defaultChecked={accountsInactiveMode}
+          onChange={handleInactiveSwitchChange}
+        />
       </NavbarGroup>
     </DashboardActionsBar>
   );
@@ -117,8 +126,9 @@ function CustomerActionsBar({
 
 export default compose(
   withCustomersActions,
-  withCustomers(({ customersSelectedRows }) => ({
+  withCustomers(({ customersSelectedRows, customersTableState }) => ({
     customersSelectedRows,
+    accountsInactiveMode: customersTableState.inactiveMode,
   })),
   withAlertActions,
 )(CustomerActionsBar);

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

@@ -11,7 +11,7 @@ import CustomersAlerts from 'containers/Customers/CustomersAlerts';
 import { CustomersListProvider } from './CustomersListProvider';
 
 import withCustomers from './withCustomers';
-import { transformTableStateToQuery, compose } from 'utils';
+import { compose } from 'utils';
 
 /**
  * Customers list.
@@ -21,9 +21,7 @@ function CustomersList({
   customersTableState,
 }) {
   return (
-    <CustomersListProvider
-      query={transformTableStateToQuery(customersTableState)}
-    >
+    <CustomersListProvider tableState={customersTableState}>
       <CustomersActionsBar />
 
       <DashboardPageContent>

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

@@ -3,10 +3,14 @@ import React, { createContext } from 'react';
 import DashboardInsider from 'components/Dashboard/DashboardInsider';
 import { useResourceViews, useCustomers } from 'hooks/query';
 import { isTableEmptyStatus } from 'utils';
+import { transformCustomersStateToQuery } from './utils';
 
 const CustomersListContext = createContext();
 
-function CustomersListProvider({ query, ...props }) {
+function CustomersListProvider({ tableState, ...props }) {
+  // Transformes the table state to fetch query.
+  const tableQuery = transformCustomersStateToQuery(tableState);
+
   // Fetch customers resource views and fields.
   const {
     data: customersViews,
@@ -18,12 +22,12 @@ function CustomersListProvider({ query, ...props }) {
     data: { customers, pagination, filterMeta },
     isLoading: isCustomersLoading,
     isFetching: isCustomersFetching,
-  } = useCustomers(query, { keepPreviousData: true });
+  } = useCustomers(tableQuery, { keepPreviousData: true });
 
   // Detarmines the datatable empty status.
   const isEmptyStatus = isTableEmptyStatus({
     data: customers, pagination, filterMeta,
-  }) && !isCustomersFetching;
+  }) && !isCustomersFetching && !tableState.inactiveMode;
 
   const state = {
     customersViews,

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

@@ -0,0 +1,8 @@
+import { transformTableStateToQuery } from 'utils';
+
+export const transformCustomersStateToQuery = (tableState) => {
+  return {
+    ...transformTableStateToQuery(tableState),
+    inactive_mode: tableState.inactiveMode,
+  };
+};