From 73c9b2b8aab397f270c3df5df915e689298f751f Mon Sep 17 00:00:00 2001
From: Levko Kravets <levko.ne@gmail.com>
Date: Fri, 22 Feb 2019 16:19:27 +0200
Subject: [PATCH] Improve list pages layout

---
 .../assets/less/redash/redash-newstyle.less   | 18 -------
 .../components/groups/DetailsPageSidebar.jsx  |  2 +-
 .../components/layouts/ContentWithSidebar.jsx | 53 +++++++++++++++++++
 .../layouts/content-with-sidebar.less         | 42 +++++++++++++++
 client/app/pages/dashboards/DashboardList.jsx | 47 +++++++---------
 client/app/pages/groups/GroupDataSources.jsx  | 32 ++++++-----
 client/app/pages/groups/GroupMembers.jsx      | 32 ++++++-----
 client/app/pages/queries-list/QueriesList.jsx | 47 +++++++---------
 client/app/pages/users/UsersList.jsx          | 43 +++++++--------
 9 files changed, 184 insertions(+), 132 deletions(-)
 create mode 100644 client/app/components/layouts/ContentWithSidebar.jsx
 create mode 100644 client/app/components/layouts/content-with-sidebar.less

diff --git a/client/app/assets/less/redash/redash-newstyle.less b/client/app/assets/less/redash/redash-newstyle.less
index e3e957f94d..78de0e937f 100644
--- a/client/app/assets/less/redash/redash-newstyle.less
+++ b/client/app/assets/less/redash/redash-newstyle.less
@@ -58,24 +58,6 @@ body {
   border-left-color: #1b809e;
 }
 
-.list-content {
-  @media (min-width: 992px) {
-    padding-right: 0;
-  }
-}
-
-.list-control-r-b {
-  @media (max-width: 992px) {
-    display: none;
-  }
-}
-
-.list-control-t {
-  @media (min-width: 992px) {
-    display: none;
-  }
-}
-
 // Fixed width layout for specific pages
 @media (min-width: 768px) {
   settings-screen, home-page, page-dashboard-list, page-queries-list, alerts-list-page, alert-page, queries-search-results-page, .fixed-container {
diff --git a/client/app/components/groups/DetailsPageSidebar.jsx b/client/app/components/groups/DetailsPageSidebar.jsx
index 0b21ed08ff..f0344e2eef 100644
--- a/client/app/components/groups/DetailsPageSidebar.jsx
+++ b/client/app/components/groups/DetailsPageSidebar.jsx
@@ -38,7 +38,7 @@ export default function DetailsPageSidebar({
       {canRemove && (
         <React.Fragment>
           <Divider dashed className="m-t-10 m-b-10" />
-          <DeleteGroupButton className="w-100 m-b-15" group={group} onClick={onGroupDeleted}>Delete Group</DeleteGroupButton>
+          <DeleteGroupButton className="w-100" group={group} onClick={onGroupDeleted}>Delete Group</DeleteGroupButton>
         </React.Fragment>
       )}
     </React.Fragment>
diff --git a/client/app/components/layouts/ContentWithSidebar.jsx b/client/app/components/layouts/ContentWithSidebar.jsx
new file mode 100644
index 0000000000..960c5dd4fe
--- /dev/null
+++ b/client/app/components/layouts/ContentWithSidebar.jsx
@@ -0,0 +1,53 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+
+import './content-with-sidebar.less';
+
+const propTypes = {
+  className: PropTypes.string,
+  children: PropTypes.node,
+};
+
+const defaultProps = {
+  className: null,
+  children: null,
+};
+
+// Sidebar
+
+function Sidebar({ className, children, ...props }) {
+  return (
+    <div className={classNames('layout-sidebar', className)} {...props}>
+      <div>{children}</div>
+    </div>
+  );
+}
+
+Sidebar.propTypes = propTypes;
+Sidebar.defaultProps = defaultProps;
+
+// Content
+
+function Content({ className, children, ...props }) {
+  return (
+    <div className={classNames('layout-content', className)} {...props}>
+      <div>{children}</div>
+    </div>
+  );
+}
+
+Content.propTypes = propTypes;
+Content.defaultProps = defaultProps;
+
+// Layout
+
+export default function Layout({ className, children, ...props }) {
+  return <div className={classNames('layout-with-sidebar', className)} {...props}>{children}</div>;
+}
+
+Layout.propTypes = propTypes;
+Layout.defaultProps = defaultProps;
+
+Layout.Sidebar = Sidebar;
+Layout.Content = Content;
diff --git a/client/app/components/layouts/content-with-sidebar.less b/client/app/components/layouts/content-with-sidebar.less
new file mode 100644
index 0000000000..a0f5dfcb70
--- /dev/null
+++ b/client/app/components/layouts/content-with-sidebar.less
@@ -0,0 +1,42 @@
+.layout-with-sidebar {
+  @spacing: 15px;
+  position: relative;
+
+  display: flex;
+  align-items: stretch;
+  justify-content: stretch;
+  flex-direction: row;
+  margin: 0;
+
+  > .layout-content {
+    flex: 0 0 auto;
+    width: 75%;
+    order: 0;
+    margin: 0;
+  }
+
+  > .layout-sidebar {
+    flex: 0 0 auto;
+    width: 25%;
+    order: 1;
+    margin: 0;
+    padding: 0 0 0 @spacing;
+  }
+
+  @media (max-width: 990px) {
+    flex-direction: column;
+
+    > .layout-content {
+      width: 100%;
+      order: 1;
+      margin: 0;
+    }
+
+    > .layout-sidebar {
+      width: 100%;
+      order: 0;
+      margin: 0 0 @spacing 0;
+      padding: 0;
+    }
+  }
+}
diff --git a/client/app/pages/dashboards/DashboardList.jsx b/client/app/pages/dashboards/DashboardList.jsx
index ed35747fce..b2e3aedf51 100644
--- a/client/app/pages/dashboards/DashboardList.jsx
+++ b/client/app/pages/dashboards/DashboardList.jsx
@@ -13,6 +13,8 @@ import LoadingState from '@/components/items-list/components/LoadingState';
 import * as Sidebar from '@/components/items-list/components/Sidebar';
 import ItemsTable, { Columns } from '@/components/items-list/components/ItemsTable';
 
+import Layout from '@/components/layouts/ContentWithSidebar';
+
 import { Dashboard } from '@/services/dashboard';
 import navigateTo from '@/services/navigateTo';
 import { routesToAngularRoutes } from '@/lib/utils';
@@ -68,35 +70,27 @@ class DashboardList extends React.Component {
 
   onTableRowClick = (event, item) => navigateTo('dashboard/' + item.slug);
 
-  renderSidebar() {
-    const { controller } = this.props;
-    return (
-      <React.Fragment>
-        <Sidebar.SearchInput
-          placeholder="Search Dashboards..."
-          value={controller.searchTerm}
-          onChange={controller.updateSearch}
-        />
-        <Sidebar.Menu items={this.sidebarMenu} selected={controller.params.currentPage} />
-        <Sidebar.Tags url="api/dashboards/tags" onChange={controller.updateSelectedTags} />
-        <Sidebar.PageSizeSelect
-          options={controller.pageSizeOptions}
-          value={controller.itemsPerPage}
-          onChange={itemsPerPage => controller.updatePagination({ itemsPerPage })}
-        />
-      </React.Fragment>
-    );
-  }
-
   render() {
-    const sidebar = this.renderSidebar();
     const { controller } = this.props;
     return (
       <div className="container">
         <PageHeader title={controller.params.title} />
-        <div className="row">
-          <div className="col-md-3 list-control-t">{sidebar}</div>
-          <div className="list-content col-md-9">
+        <Layout className="m-l-15 m-r-15">
+          <Layout.Sidebar className="m-b-0">
+            <Sidebar.SearchInput
+              placeholder="Search Dashboards..."
+              value={controller.searchTerm}
+              onChange={controller.updateSearch}
+            />
+            <Sidebar.Menu items={this.sidebarMenu} selected={controller.params.currentPage} />
+            <Sidebar.Tags url="api/dashboards/tags" onChange={controller.updateSelectedTags} />
+            <Sidebar.PageSizeSelect
+              options={controller.pageSizeOptions}
+              value={controller.itemsPerPage}
+              onChange={itemsPerPage => controller.updatePagination({ itemsPerPage })}
+            />
+          </Layout.Sidebar>
+          <Layout.Content>
             {!controller.isLoaded && <LoadingState />}
             {
               controller.isLoaded && controller.isEmpty && (
@@ -127,9 +121,8 @@ class DashboardList extends React.Component {
                 </div>
               )
             }
-          </div>
-          <div className="col-md-3 list-control-r-b">{sidebar}</div>
-        </div>
+          </Layout.Content>
+        </Layout>
       </div>
     );
   }
diff --git a/client/app/pages/groups/GroupDataSources.jsx b/client/app/pages/groups/GroupDataSources.jsx
index b33db6e83b..c79c10dd5c 100644
--- a/client/app/pages/groups/GroupDataSources.jsx
+++ b/client/app/pages/groups/GroupDataSources.jsx
@@ -20,6 +20,7 @@ import { DataSourcePreviewCard } from '@/components/PreviewCard';
 import GroupName from '@/components/groups/GroupName';
 import ListItemAddon from '@/components/groups/ListItemAddon';
 import Sidebar from '@/components/groups/DetailsPageSidebar';
+import Layout from '@/components/layouts/ContentWithSidebar';
 
 import { toastr } from '@/services/ng';
 import { currentUser } from '@/services/auth';
@@ -164,23 +165,21 @@ class GroupDataSources extends React.Component {
 
   render() {
     const { controller } = this.props;
-    const sidebar = (
-      <Sidebar
-        controller={controller}
-        group={this.group}
-        items={this.sidebarMenu}
-        canAddDataSources={currentUser.isAdmin}
-        onAddDataSourcesClick={this.addDataSources}
-        onGroupDeleted={() => navigateTo('/groups', true)}
-      />
-    );
-
     return (
       <div data-test="Group">
         <GroupName className="d-block m-t-0 m-b-15" group={this.group} onChange={() => this.forceUpdate()} />
-        <div className="row">
-          <div className="col-md-3 list-control-t">{sidebar}</div>
-          <div className="list-content col-md-9">
+        <Layout>
+          <Layout.Sidebar>
+            <Sidebar
+              controller={controller}
+              group={this.group}
+              items={this.sidebarMenu}
+              canAddDataSources={currentUser.isAdmin}
+              onAddDataSourcesClick={this.addDataSources}
+              onGroupDeleted={() => navigateTo('/groups', true)}
+            />
+          </Layout.Sidebar>
+          <Layout.Content>
             {!controller.isLoaded && <LoadingState className="" />}
             {controller.isLoaded && controller.isEmpty && (
               <div className="text-center">
@@ -215,9 +214,8 @@ class GroupDataSources extends React.Component {
                 </div>
               )
             }
-          </div>
-          <div className="col-md-3 list-control-r-b">{sidebar}</div>
-        </div>
+          </Layout.Content>
+        </Layout>
       </div>
     );
   }
diff --git a/client/app/pages/groups/GroupMembers.jsx b/client/app/pages/groups/GroupMembers.jsx
index 115b1e1c00..7ca87b31ad 100644
--- a/client/app/pages/groups/GroupMembers.jsx
+++ b/client/app/pages/groups/GroupMembers.jsx
@@ -17,6 +17,7 @@ import { UserPreviewCard } from '@/components/PreviewCard';
 import GroupName from '@/components/groups/GroupName';
 import ListItemAddon from '@/components/groups/ListItemAddon';
 import Sidebar from '@/components/groups/DetailsPageSidebar';
+import Layout from '@/components/layouts/ContentWithSidebar';
 
 import { toastr } from '@/services/ng';
 import { currentUser } from '@/services/auth';
@@ -129,23 +130,21 @@ class GroupMembers extends React.Component {
 
   render() {
     const { controller } = this.props;
-    const sidebar = (
-      <Sidebar
-        controller={controller}
-        group={this.group}
-        items={this.sidebarMenu}
-        canAddMembers={currentUser.isAdmin}
-        onAddMembersClick={this.addMembers}
-        onGroupDeleted={() => navigateTo('/groups', true)}
-      />
-    );
-
     return (
       <div data-test="Group">
         <GroupName className="d-block m-t-0 m-b-15" group={this.group} onChange={() => this.forceUpdate()} />
-        <div className="row">
-          <div className="col-md-3 list-control-t">{sidebar}</div>
-          <div className="list-content col-md-9">
+        <Layout>
+          <Layout.Sidebar>
+            <Sidebar
+              controller={controller}
+              group={this.group}
+              items={this.sidebarMenu}
+              canAddMembers={currentUser.isAdmin}
+              onAddMembersClick={this.addMembers}
+              onGroupDeleted={() => navigateTo('/groups', true)}
+            />
+          </Layout.Sidebar>
+          <Layout.Content>
             {!controller.isLoaded && <LoadingState className="" />}
             {controller.isLoaded && controller.isEmpty && (
               <div className="text-center">
@@ -180,9 +179,8 @@ class GroupMembers extends React.Component {
                 </div>
               )
             }
-          </div>
-          <div className="col-md-3 list-control-r-b">{sidebar}</div>
-        </div>
+          </Layout.Content>
+        </Layout>
       </div>
     );
   }
diff --git a/client/app/pages/queries-list/QueriesList.jsx b/client/app/pages/queries-list/QueriesList.jsx
index f879b6c244..43775c0e68 100644
--- a/client/app/pages/queries-list/QueriesList.jsx
+++ b/client/app/pages/queries-list/QueriesList.jsx
@@ -14,6 +14,8 @@ import LoadingState from '@/components/items-list/components/LoadingState';
 import * as Sidebar from '@/components/items-list/components/Sidebar';
 import ItemsTable, { Columns } from '@/components/items-list/components/ItemsTable';
 
+import Layout from '@/components/layouts/ContentWithSidebar';
+
 import { Query } from '@/services/query';
 import { currentUser } from '@/services/auth';
 import navigateTo from '@/services/navigateTo';
@@ -84,35 +86,27 @@ class QueriesList extends React.Component {
 
   onTableRowClick = (event, item) => navigateTo('queries/' + item.id);
 
-  renderSidebar() {
-    const { controller } = this.props;
-    return (
-      <React.Fragment>
-        <Sidebar.SearchInput
-          placeholder="Search Queries..."
-          value={controller.searchTerm}
-          onChange={controller.updateSearch}
-        />
-        <Sidebar.Menu items={this.sidebarMenu} selected={controller.params.currentPage} />
-        <Sidebar.Tags url="api/queries/tags" onChange={controller.updateSelectedTags} />
-        <Sidebar.PageSizeSelect
-          options={controller.pageSizeOptions}
-          value={controller.itemsPerPage}
-          onChange={itemsPerPage => controller.updatePagination({ itemsPerPage })}
-        />
-      </React.Fragment>
-    );
-  }
-
   render() {
-    const sidebar = this.renderSidebar();
     const { controller } = this.props;
     return (
       <div className="container">
         <PageHeader title={controller.params.title} />
-        <div className="row">
-          <div className="col-md-3 list-control-t">{sidebar}</div>
-          <div className="list-content col-md-9">
+        <Layout className="m-l-15 m-r-15">
+          <Layout.Sidebar className="m-b-0">
+            <Sidebar.SearchInput
+              placeholder="Search Queries..."
+              value={controller.searchTerm}
+              onChange={controller.updateSearch}
+            />
+            <Sidebar.Menu items={this.sidebarMenu} selected={controller.params.currentPage} />
+            <Sidebar.Tags url="api/queries/tags" onChange={controller.updateSelectedTags} />
+            <Sidebar.PageSizeSelect
+              options={controller.pageSizeOptions}
+              value={controller.itemsPerPage}
+              onChange={itemsPerPage => controller.updatePagination({ itemsPerPage })}
+            />
+          </Layout.Sidebar>
+          <Layout.Content>
             {!controller.isLoaded && <LoadingState />}
             {
               controller.isLoaded && controller.isEmpty && (
@@ -143,9 +137,8 @@ class QueriesList extends React.Component {
                 </div>
               )
             }
-          </div>
-          <div className="col-md-3 list-control-r-b">{sidebar}</div>
-        </div>
+          </Layout.Content>
+        </Layout>
       </div>
     );
   }
diff --git a/client/app/pages/users/UsersList.jsx b/client/app/pages/users/UsersList.jsx
index 2a35728f55..2bd691c188 100644
--- a/client/app/pages/users/UsersList.jsx
+++ b/client/app/pages/users/UsersList.jsx
@@ -17,6 +17,8 @@ import EmptyState from '@/components/items-list/components/EmptyState';
 import * as Sidebar from '@/components/items-list/components/Sidebar';
 import ItemsTable, { Columns } from '@/components/items-list/components/ItemsTable';
 
+import Layout from '@/components/layouts/ContentWithSidebar';
+
 import settingsMenu from '@/services/settingsMenu';
 import { currentUser } from '@/services/auth';
 import { policy } from '@/services/policy';
@@ -156,33 +158,25 @@ class UsersList extends React.Component {
     );
   }
 
-  renderSidebar() {
-    const { controller } = this.props;
-    return (
-      <React.Fragment>
-        <Sidebar.SearchInput
-          value={controller.searchTerm}
-          onChange={controller.updateSearch}
-        />
-        <Sidebar.Menu items={this.sidebarMenu} selected={controller.params.currentPage} />
-        <Sidebar.PageSizeSelect
-          options={controller.pageSizeOptions}
-          value={controller.itemsPerPage}
-          onChange={itemsPerPage => controller.updatePagination({ itemsPerPage })}
-        />
-      </React.Fragment>
-    );
-  }
-
   render() {
-    const sidebar = this.renderSidebar();
     const { controller } = this.props;
     return (
       <React.Fragment>
         {this.renderPageHeader()}
-        <div className="row">
-          <div className="col-md-3 list-control-t">{sidebar}</div>
-          <div className="list-content col-md-9">
+        <Layout>
+          <Layout.Sidebar className="m-b-0">
+            <Sidebar.SearchInput
+              value={controller.searchTerm}
+              onChange={controller.updateSearch}
+            />
+            <Sidebar.Menu items={this.sidebarMenu} selected={controller.params.currentPage} />
+            <Sidebar.PageSizeSelect
+              options={controller.pageSizeOptions}
+              value={controller.itemsPerPage}
+              onChange={itemsPerPage => controller.updatePagination({ itemsPerPage })}
+            />
+          </Layout.Sidebar>
+          <Layout.Content>
             {!controller.isLoaded && <LoadingState className="" />}
             {controller.isLoaded && controller.isEmpty && <EmptyState className="" />}
             {
@@ -206,9 +200,8 @@ class UsersList extends React.Component {
                 </div>
               )
             }
-          </div>
-          <div className="col-md-3 list-control-r-b">{sidebar}</div>
-        </div>
+          </Layout.Content>
+        </Layout>
       </React.Fragment>
     );
   }