feat: fix items list datatable.

client/src/components/Dashboard/DashboardActionViewsList.js

@@ -10,22 +10,20 @@ import {
   Position,
 } from '@blueprintjs/core';
 import { FormattedMessage as T } from 'react-intl';
-import { useHistory } from 'react-router-dom';
 import { Icon } from 'components';
 
+/**
+ * Dashboard action views list.
+ */
 export default function DashboardActionViewsList({
   resourceName,
   views,
   onChange,
 }) {
-  const history = useHistory();
-
   const handleClickViewItem = (view) => {
-    history.push(
-      view ? `/${resourceName}/${view.id}/custom_view` : '/accounts',
-    );
     onChange && onChange(view);
   };
+
   const viewsMenuItems = views.map((view) => {
     return (
       <MenuItem onClick={() => handleClickViewItem(view)} text={view.name} />

client/src/components/Dashboard/DashboardTopbar.js

@@ -19,13 +19,14 @@ import { Icon, Hint, If } from 'components';
 import withSearch from 'containers/GeneralSearch/withSearch';
 import withDashboardActions from 'containers/Dashboard/withDashboardActions';
 import withDashboard from 'containers/Dashboard/withDashboard';
+import withSettings from 'containers/Settings/withSettings';
+
 import QuickNewDropdown from 'containers/QuickNewDropdown/QuickNewDropdown';
 import { compose } from 'utils';
 
 function DashboardTopbar({
   // #withDashboard
   pageTitle,
-  pageSubtitle,
   editViewId,
 
   // #withDashboardActions
@@ -35,6 +36,9 @@ function DashboardTopbar({
   // #withDashboard
   sidebarExpended,
 
+  // #withSettings
+  organizationName,
+
   // #withGlobalSearch
   openGlobalSearch,
 }) {
@@ -100,11 +104,7 @@ function DashboardTopbar({
             </div>
           </If>
 
-          <If condition={pageSubtitle}>
-            <h3>{pageSubtitle}</h3>
-          </If>
-
-          <If condition={pageSubtitle && editViewId}>
+          <If condition={editViewId}>
             <Button
               className={Classes.MINIMAL + ' button--view-edit'}
               icon={<Icon icon="pen" iconSize={13} />}
@@ -117,6 +117,10 @@ function DashboardTopbar({
           <DashboardBreadcrumbs />
         </div>
 
+        {/* <div class="dashboard__organization-name">
+          { organizationName }
+        </div> */}
+
         <DashboardBackLink />
       </div>
 
@@ -158,11 +162,13 @@ function DashboardTopbar({
 
 export default compose(
   withSearch,
-  withDashboard(({ pageTitle, pageSubtitle, editViewId, sidebarExpended }) => ({
+  withDashboard(({ pageTitle, editViewId, sidebarExpended }) => ({
     pageTitle,
-    pageSubtitle,
     editViewId,
     sidebarExpended,
   })),
+  withSettings(({ organizationSettings }) => ({
+    organizationName: organizationSettings.name,
+  })),
   withDashboardActions,
 )(DashboardTopbar);

client/src/components/Dashboard/DashboardViewsTabs.js

@@ -1,15 +1,19 @@
-import React, { useState, useRef, useMemo } from 'react';
+import React, { useRef, useState, useEffect } from 'react';
 import { FormattedMessage as T } from 'react-intl';
 import PropTypes from 'prop-types';
 import { Button, Tabs, Tab, Tooltip, Position } from '@blueprintjs/core';
-import { debounce } from 'lodash';
 import { useHistory } from 'react-router';
+import { debounce } from 'lodash';
 import { If, Icon } from 'components';
-import { saveInvoke }  from 'utils';
+import { saveInvoke } from 'utils';
 
+/**
+ * Dashboard views tabs.
+ *
+ */
 export default function DashboardViewsTabs({
   initialViewId = 0,
-  viewId,
+  currentViewId,
   tabs,
   defaultTabText = <T id={'all'} />,
   allTab = true,
@@ -17,41 +21,38 @@ export default function DashboardViewsTabs({
   resourceName,
   onNewViewTabClick,
   onChange,
-  onTabClick,
+  OnThrottledChange,
+  throttleTime = 250,
 }) {
   const history = useHistory();
   const [currentView, setCurrentView] = useState(initialViewId || 0);
 
+  useEffect(() => {
+    if (typeof currentViewId !== 'undefined' && currentViewId !== currentView) {
+      setCurrentView(currentViewId || 0);
+    }
+  }, [currentView, setCurrentView, currentViewId]);
+
+  const throttledOnChange = useRef(
+    debounce((viewId) => saveInvoke(OnThrottledChange, viewId), throttleTime),
+  );
+
+  // Trigger `onChange` and `onThrottledChange` events.
+  const triggerOnChange = (viewId) => {
+    saveInvoke(onChange, viewId);
+    throttledOnChange.current(viewId);
+  };
+
+  // Handles click a new view.
   const handleClickNewView = () => {
     history.push(`/custom_views/${resourceName}/new`);
     onNewViewTabClick && onNewViewTabClick();
   };
 
-  const handleTabClick = (viewId) => {
-    saveInvoke(onTabClick, viewId);
-  };
-
-  const mappedTabs = useMemo(
-    () => tabs.map((tab) => ({ ...tab, onTabClick: handleTabClick })),
-    [tabs, handleTabClick],
-  );
-
-  const handleViewLinkClick = () => {
-    saveInvoke(onNewViewTabClick);
-  };
-
-  const debounceChangeHistory = useRef(
-    debounce((toUrl) => {
-      history.push(toUrl);
-    }, 250),
-  );
-
+  // Handle tabs change.
   const handleTabsChange = (viewId) => {
-    const toPath = viewId ? `${viewId}/custom_view` : '';
-    debounceChangeHistory.current(`/${resourceName}/${toPath}`);
-
     setCurrentView(viewId);
-    saveInvoke(onChange, viewId);
+    triggerOnChange(viewId)
   };
 
   return (
@@ -62,13 +63,11 @@ export default function DashboardViewsTabs({
       className="tabs--dashboard-views"
       onChange={handleTabsChange}
     >
-      {allTab && (
-        <Tab id={0} title={defaultTabText} onClick={handleViewLinkClick} />
-      )}
-      {mappedTabs.map((tab) => (
-        <Tab id={tab.id} title={tab.name} onClick={handleTabClick} />
-      ))}
+      {allTab && <Tab id={0} title={defaultTabText} />}
 
+      {tabs.map((tab) => (
+        <Tab id={tab.id} title={tab.name} />
+      ))}
       <If condition={newViewTab}>
         <Tooltip
           content={<T id={'create_a_new_view'} />}
@@ -93,5 +92,6 @@ DashboardViewsTabs.propTypes = {
 
   onNewViewTabClick: PropTypes.func,
   onChange: PropTypes.func,
-  onTabClick: PropTypes.func,
+  OnThrottledChange: PropTypes.func,
+  throttleTime: PropTypes.number,
 };