- Organize database seeds.

- Optimize design dashboard top bar.

client/src/components/Accounts/AccountsDataTable.js

@@ -51,9 +51,7 @@ function AccountsDataTable({
     ]);
   });
 
-  useEffect(() => {
-    fetchHook.execute();
-  }, [filterConditions]);
+  useEffect(() => { fetchHook.execute(); }, [filterConditions]);
 
   // Refetch accounts list after custom view id change.
   useEffect(() => {
@@ -64,20 +62,13 @@ function AccountsDataTable({
       changeCurrentView(customViewId);
       setTopbarEditView(customViewId);
     }
-    if (customViewId && viewMeta) {
-      changePageSubtitle(viewMeta.name);
-    } else {
-      changePageSubtitle('');
-    }
+    changePageSubtitle((customViewId && viewMeta) ? viewMeta.name : '');
   }, [customViewId]);
 
-  useEffect(
-    () => () => {
-      // Clear page subtitle when unmount the page.
-      changePageSubtitle('');
-    },
-    []
-  );
+  useEffect(() => () => {
+    // Clear page subtitle when unmount the page.
+    changePageSubtitle('');
+  }, []);
 
   const handleEditAccount = account => () => {
     openDialog('account-form', { action: 'edit', id: account.id });
@@ -91,12 +82,10 @@ function AccountsDataTable({
       <MenuDivider />
       <MenuItem
         text='Inactivate Account'
-        onClick={() => onInactiveAccount(account)}
-      />
+        onClick={() => onInactiveAccount(account)} />
       <MenuItem
         text='Delete Account'
-        onClick={() => onDeleteAccount(account)}
-      />
+        onClick={() => onDeleteAccount(account)} />
     </Menu>
   );
 

client/src/components/Accounts/AccountsViewsTabs.js

@@ -14,18 +14,29 @@ import Icon from 'components/Icon';
 import { Link } from 'react-router-dom';
 import { compose } from 'utils';
 import AccountsConnect from 'connectors/Accounts.connector';
+import DashboardConnect from 'connectors/Dashboard.connector';
 
-function AccountsViewsTabs({ views }) {
+function AccountsViewsTabs({
+  views,
+  setTopbarEditView,  
+}) {
   const history = useHistory();
   const { custom_view_id: customViewId } = useParams();
 
   const handleClickNewView = () => {
+    setTopbarEditView(null);
     history.push('/dashboard/custom_views/accounts/new');
   };
+  const handleViewLinkClick = () => {
+    setTopbarEditView(customViewId);
+  }
   const tabs = views.map(view => {
     const baseUrl = '/dashboard/accounts';
     const link = (
-      <Link to={`${baseUrl}/${view.id}/custom_view`}>{view.name}</Link>
+      <Link
+        to={`${baseUrl}/${view.id}/custom_view`}
+        onClick={handleViewLinkClick}
+      >{view.name}</Link>
     );
     return <Tab id={`custom_view_${view.id}`} title={link} />;
   });
@@ -52,4 +63,7 @@ function AccountsViewsTabs({ views }) {
   );
 }
 
-export default compose(AccountsConnect)(AccountsViewsTabs);
+export default compose(
+  AccountsConnect,
+  DashboardConnect,
+)(AccountsViewsTabs);

client/src/components/Dashboard/DashboardTopbar.js

@@ -25,6 +25,14 @@ function DashboardTopbar({
   const handlerClickEditView = () => {
     history.push(`/dashboard/custom_views/${editViewId}/edit`)
   }
+
+  const maybleRenderPageSubtitle = pageSubtitle && (<h3>{ pageSubtitle }</h3>);
+  const maybeRenderEditViewBtn = (pageSubtitle && editViewId) && (
+    <Button
+      className={Classes.MINIMAL + ' button--view-edit'}
+      icon={<Icon icon="pen" iconSize={13} />}
+      onClick={handlerClickEditView} />
+  );
   return (
     <div class="dashboard__topbar">
       <div class="dashboard__topbar-left">
@@ -39,17 +47,8 @@ function DashboardTopbar({
 
         <div class="dashboard__title">
           <h1>{ pageTitle }</h1>
-
-          { pageSubtitle && (
-            <>
-              <span class="sep"></span>
-              <h3>{ pageSubtitle }</h3>  
-              <Button
-                className="button--view-edit"
-                icon={<Icon icon="pen" />}
-                onClick={handlerClickEditView} />
-            </>
-          )}
+          {maybleRenderPageSubtitle}
+          {maybeRenderEditViewBtn}
         </div>
 
         <div class="dashboard__breadcrumbs">