From 14380dde699058289d025760cb67bbc7207bea59 Mon Sep 17 00:00:00 2001
From: Vladislav <vladislav.olekseevich18@gmail.com>
Date: Thu, 23 Apr 2020 15:20:29 +0300
Subject: [PATCH] feat(Dashboards): Switches to grid view (LLC-15) (#1522)

---
 lib/constants/dashboard.js                    |   4 +
 lib/models/dashboard.js                       |   1 +
 ui/src/components/DropDownMenu/index.js       |   6 +-
 .../components/IconButton/CopyIconButton.js   |  40 +--
 ui/src/containers/Dashboard/index.js          | 202 +++++++--------
 ui/src/containers/Dashboard/styled/index.js   |  12 +
 .../DashboardCard/assets/blank-dashboard.png  | Bin 0 -> 2748 bytes
 .../DashboardCard/assets/getting-started.png  | Bin 0 -> 4215 bytes
 .../DashboardCard/assets/private.png          | Bin 0 -> 360 bytes
 .../DashboardCard/assets/stream-starter.png   | Bin 0 -> 4288 bytes
 ui/src/containers/DashboardCard/index.js      | 244 ++++++++++++++++++
 ui/src/containers/DashboardCard/styles.css    |  64 +++++
 ui/src/containers/DashboardList/index.js      | 142 ++++++++++
 ui/src/containers/DashboardList/styles.css    |   6 +
 ui/src/containers/DashboardTemplates/index.js |  21 +-
 .../DashboardTemplates/styled/index.js        |   9 +
 ui/src/containers/Dashboards/index.js         | 128 ++++-----
 ui/src/containers/EditConfirm/index.js        | 103 ++++++++
 ui/src/containers/OrganisationHome/index.js   |   6 +
 ui/src/containers/PrivacyToggleModal/index.js |  71 +++++
 ui/src/containers/Widget/index.js             |   2 +-
 .../redux/modules/dashboard/blankDashboard.js |   1 +
 .../redux/modules/dashboard/gettingStarted.js |   1 +
 .../redux/modules/dashboard/streamStarter.js  |   1 +
 ui/src/static/core.css                        |   2 +-
 25 files changed, 854 insertions(+), 212 deletions(-)
 create mode 100644 ui/src/containers/DashboardCard/assets/blank-dashboard.png
 create mode 100644 ui/src/containers/DashboardCard/assets/getting-started.png
 create mode 100644 ui/src/containers/DashboardCard/assets/private.png
 create mode 100644 ui/src/containers/DashboardCard/assets/stream-starter.png
 create mode 100644 ui/src/containers/DashboardCard/index.js
 create mode 100644 ui/src/containers/DashboardCard/styles.css
 create mode 100644 ui/src/containers/DashboardList/index.js
 create mode 100644 ui/src/containers/DashboardList/styles.css
 create mode 100644 ui/src/containers/EditConfirm/index.js
 create mode 100644 ui/src/containers/PrivacyToggleModal/index.js

diff --git a/lib/constants/dashboard.js b/lib/constants/dashboard.js
index 17a99d86ef..13a8b7eb73 100644
--- a/lib/constants/dashboard.js
+++ b/lib/constants/dashboard.js
@@ -1,3 +1,7 @@
 export const JWT_SECURED = 'JWT_SECURED';
 export const ANY = 'ANY';
 export const OFF = 'OFF';
+
+export const BLANK_DASHBOARD = 'blankDashboard';
+export const STREAM_STARTER = 'streamStarter';
+export const GETTING_STARTED = 'gettingStarted';
diff --git a/lib/models/dashboard.js b/lib/models/dashboard.js
index 140df0edcd..3e18e6218d 100644
--- a/lib/models/dashboard.js
+++ b/lib/models/dashboard.js
@@ -71,6 +71,7 @@ export const schema = new mongoose.Schema({
   owner: { type: mongoose.Schema.Types.ObjectId, ref: 'User', index: true },
   isPublic: { type: Boolean, default: false },
   hasBeenMigrated: { type: Boolean, default: false },
+  type: { type: String },
 });
 
 schema.readScopes = keys(scopes.USER_SCOPES);
diff --git a/ui/src/components/DropDownMenu/index.js b/ui/src/components/DropDownMenu/index.js
index c75e6f64b1..f07c9b1d18 100644
--- a/ui/src/components/DropDownMenu/index.js
+++ b/ui/src/components/DropDownMenu/index.js
@@ -53,9 +53,9 @@ class DropDownMenu extends Component {
         {this.props.button}
       </span>
       {this.state.isOpen &&
-        <ul className="dropdown-menu">
-          {React.Children.map(this.props.children, child => (
-            <li>{child}</li>
+        <ul className={`dropdown-menu ${this.props.customClass}`}>
+          {React.Children.map(this.props.children, (child, index) => (
+            <li key={index}>{child}</li>
           ))}
         </ul>
       }
diff --git a/ui/src/components/IconButton/CopyIconButton.js b/ui/src/components/IconButton/CopyIconButton.js
index ec90d85f32..628fd3d6d1 100644
--- a/ui/src/components/IconButton/CopyIconButton.js
+++ b/ui/src/components/IconButton/CopyIconButton.js
@@ -7,7 +7,7 @@ import ConfirmModal from 'ui/components/Modal/ConfirmModal';
  * @param {boolean} _.white - white button? default is btn-inverse
  * @param {() => void} _.onClickConfirm
  */
-const CopyIconButton = ({ message, white, onClickConfirm }) => {
+const CopyIconButton = ({ message, white, onClickConfirm, textFormat }) => {
   const [isModalOpen, setModalOpen] = useState(false);
 
   const closeModal = useCallback(() => setModalOpen(false));
@@ -19,26 +19,36 @@ const CopyIconButton = ({ message, white, onClickConfirm }) => {
     onClickConfirm();
     setModalOpen(false);
   });
+  const renderConfirmModal = (
+    <ConfirmModal
+      isOpen={isModalOpen}
+      title="Confirm copy"
+      message={<span>{message}</span>}
+      onConfirm={onConfirm}
+      onCancel={closeModal} />
+  );
 
   const className = white === true ?
     'btn btn-default btn-sm flat-btn flat-white' :
     'btn btn-sm btn-inverse';
 
   return (
-    <button
-      className={className}
-      title="Copy"
-      onClick={openModal}
-      style={{ width: '33px' }}>
-      <i className="icon ion-ios-copy" />
-
-      <ConfirmModal
-        isOpen={isModalOpen}
-        title="Confirm copy"
-        message={<span>{message}</span>}
-        onConfirm={onConfirm}
-        onCancel={closeModal} />
-    </button>
+    textFormat ? (
+      <span
+        onClick={openModal}>
+        Duplicate
+        {renderConfirmModal}
+      </span>
+    ) : (
+      <button
+        className={className}
+        title="Copy"
+        onClick={openModal}
+        style={{ width: '33px' }}>
+        <i className="icon ion-ios-copy" />
+        {renderConfirmModal}
+      </button>
+    )
   );
 };
 
diff --git a/ui/src/containers/Dashboard/index.js b/ui/src/containers/Dashboard/index.js
index 18f567bffd..8fb7092426 100644
--- a/ui/src/containers/Dashboard/index.js
+++ b/ui/src/containers/Dashboard/index.js
@@ -1,38 +1,29 @@
 import React, { Component } from 'react';
+import { isLoadingSelector } from 'ui/redux/modules/pagination';
 import PropTypes from 'prop-types';
 import * as _ from 'lodash';
 import Scroll from 'react-scroll';
 import { connect } from 'react-redux';
-import { actions as routerActions } from 'redux-router5';
+import { actions, routeNodeSelector } from 'redux-router5';
 import { withProps, compose, lifecycle, withHandlers, mapProps } from 'recompose';
 import { Map, List, is } from 'immutable';
 import Input from 'ui/components/Material/Input';
 import Spinner from 'ui/components/Spinner';
-import CopyIconButton from 'ui/components/IconButton/CopyIconButton';
 import DashboardGrid from 'ui/containers/DashboardGrid';
 import DashboardSharing from 'ui/containers/DashboardSharing';
-import DeleteButton from 'ui/containers/DeleteButton';
-import Owner from 'ui/containers/Owner';
-import PrivacyToggleButton from 'ui/containers/PrivacyToggleButton';
 import WidgetVisualiseCreator from 'ui/containers/WidgetVisualiseCreator';
-import { withModel } from 'ui/utils/hocs';
-import { COPY_DASHBOARD } from 'ui/redux/modules/dashboard/copyDashboard';
-import { getVisualisationsFromDashboard } from 'ui/redux/modules/dashboard/selectors';
+import { withModels, withModel } from 'ui/utils/hocs';
 import { loggedInUserId } from 'ui/redux/selectors';
 import { activeOrgIdSelector } from 'ui/redux/modules/router';
-import { EditInputWrapper, Editor, EditWrapper } from 'ui/containers/Dashboard/styled';
-
-const schema = 'dashboard';
+import { EditWrapper } from 'ui/containers/Dashboard/styled';
 
 class Dashboard extends Component {
   static propTypes = {
     model: PropTypes.instanceOf(Map),
-    navigateTo: PropTypes.func,
     updateModel: PropTypes.func,
     saveModel: PropTypes.func,
     setMetadata: PropTypes.func,
     getMetadata: PropTypes.func,
-    doCopyDashboard: PropTypes.func,
   };
 
   static defaultProps = {
@@ -128,135 +119,134 @@ class Dashboard extends Component {
   };
 
   render() {
-    const { model, organisationId, navigateTo, doCopyDashboard } = this.props;
+    const { model, backToDashboard } = this.props;
 
     if (!model.get('_id')) {
       return <Spinner />;
     }
 
     return (
-      <div className="row">
-        <Editor>
-          <EditWrapper>
-            <EditInputWrapper>
+      <div>
+        <header id="topbar">
+          <div className="heading heading-light">
+            <span className="pull-right open_panel_btn" >
+              <a
+                onClick={this.onClickAddWidget}
+                className="btn btn-primary btn-sm">
+                <i className="ion ion-stats-bars" /> Add widget
+              </a>
+
+              <button
+                className="btn btn-default btn-sm flat-btn flat-white"
+                title="Share"
+                onClick={this.toggleSharing}
+                style={{
+                  backgroundColor: this.props.getMetadata('isSharing') ? '#F5AB35' : null,
+                  color: this.props.getMetadata('isSharing') ? 'white' : null,
+                  marginRight: 0,
+                }}>
+                <i className="icon ion-android-share-alt" />
+              </button>
+            </span>
+            <EditWrapper>
+              <a
+                onClick={backToDashboard} >
+                <i className="icon ion-chevron-left" />
+              </a>
               <Input
                 type="text"
                 name="Title"
-                label="Enter title"
                 value={model.get('title', ' ')}
                 onChange={this.onTitleChange}
-                style={{ fontSize: '13px' }} />
-            </EditInputWrapper>
-
-            &nbsp;&nbsp;
-
-            <a
-              onClick={this.onClickAddWidget}
-              className="btn btn-default btn-sm flat-btn flat-white">
-              <i className="ion ion-stats-bars" /> Add widget
-            </a>
-
-            <PrivacyToggleButton
-              white
-              id={model.get('_id')}
-              schema={schema} />
-
-            <CopyIconButton
-              message="This will copy the dashboard and visualisations. Are you sure?"
-              white
-              onClickConfirm={doCopyDashboard} />
-
-            <DeleteButton
-              white
-              id={model.get('_id')}
-              schema={schema}
-              onDeletedModel={() =>
-                navigateTo('organisation.data.dashboards', { organisationId })
-              } />
-
-            <button
-              className="btn btn-default btn-sm flat-btn flat-white"
-              title="Share"
-              onClick={this.toggleSharing}
-              style={{
-                backgroundColor: this.props.getMetadata('isSharing') ? '#F5AB35' : null,
-                color: this.props.getMetadata('isSharing') ? 'white' : null
-              }}>
-              <i className="icon ion-android-share-alt" />
-            </button>
-
-            <span style={{ marginLeft: 'auto' }}>
-              <Owner model={model} />
-            </span>
-          </EditWrapper>
+                style={{ fontSize: '18px', color: '#929292', padding: 0 }} />
+            </EditWrapper>
+          </div>
+        </header>
+        <div className="row">
           {this.props.getMetadata('isSharing') &&
-            <div>
+            <div className="col-md-12">
               <DashboardSharing
                 shareable={model.get('shareable', new List())}
                 id={model.get('_id')} />
             </div>
           }
-        </Editor>
 
-        <div className="clearfix" />
+          <div className="clearfix" />
 
-        <WidgetVisualiseCreator
-          isOpened={this.state.widgetModalOpen}
-          model={model}
-          onClickClose={() => this.toggleWidgetModal()}
-          onChangeVisualisation={this.createPopulatedWidget} />
+          <WidgetVisualiseCreator
+            isOpened={this.state.widgetModalOpen}
+            model={model}
+            onClickClose={() => this.toggleWidgetModal()}
+            onChangeVisualisation={this.createPopulatedWidget} />
 
-        <DashboardGrid
-          widgets={model.get('widgets')}
-          onChange={this.onChangeWidgets}
-          onChangeTitle={this.onChangeWidgetTitle}
-          onChangeVisualisation={this.onChangeWidgetVisualisation} />
+          <DashboardGrid
+            widgets={model.get('widgets')}
+            onChange={this.onChangeWidgets}
+            onChangeTitle={this.onChangeWidgetTitle}
+            onChangeVisualisation={this.onChangeWidgetVisualisation} />
+        </div>
       </div>
     );
   }
 }
 
 export default compose(
-  withProps(({ params, id }) =>
-    ({
-      schema,
-      id: id || params.dashboardId
+  connect(
+    state => ({
+      isLoading: isLoadingSelector('dashboard', new Map())(state),
+      userId: loggedInUserId(state),
+      route: routeNodeSelector('organisation.dashboards')(state).route,
+      organisation: activeOrgIdSelector(state)
+    }),
+    { navigateTo: actions.navigateTo }
+  ),
+  withProps({
+    schema: 'dashboard',
+    filter: new Map(),
+    first: 300,
+  }),
+  withModels,
+  withProps(
+    ({ route }) => ({
+      id: route.name === 'organisation.data.dashboards.add' ? undefined : route.params.dashboardId
     })
   ),
   withModel,
+  withProps(
+    ({
+      id,
+      models,
+      model
+    }) => {
+      if (model.size === 0 && id) {
+        return ({
+          modelsWithModel: models
+        });
+      }
+
+      return ({
+        modelsWithModel: !id || models.has(id) ? models : models.reverse().set(id, model).reverse()
+      });
+    }
+  ),
   lifecycle({
     componentDidUpdate(previousProps) {
-      if (this.props.model.get('widgets').size > previousProps.model.get('widgets').size && window) {
+      if (
+        this.props.model.get('widgets') && this.props.model.get('widgets').size && previousProps.size &&
+        this.props.model.get('widgets').size > previousProps.model.get('widgets').size && window
+      ) {
         const scroll = Scroll.animateScroll;
         scroll.scrollToBottom({ smooth: true });
       }
     }
   }),
-  connect(
-    state => ({
-      organisationId: activeOrgIdSelector(state),
-      userId: loggedInUserId(state),
-      state,
-    }),
-    dispatch => ({
-      navigateTo: () => dispatch(routerActions.navigateTo),
-      copyDashboard: ({ dashboard, visualisations, organisationId, userId }) => dispatch({
-        type: COPY_DASHBOARD,
-        dispatch,
-        dashboard,
-        visualisations,
-        organisationId,
-        userId,
-      }),
-    }),
-  ),
   withHandlers({
-    doCopyDashboard: ({ model, state, organisationId, copyDashboard, userId }) => () => copyDashboard({
-      dashboard: model,
-      visualisations: getVisualisationsFromDashboard(model.get('_id'))(state),
-      organisationId,
-      userId,
-    })
+    backToDashboard: ({ route, navigateTo }) => () => {
+      const organisationId = route.params.organisationId;
+      navigateTo('organisation.data.dashboards', {
+        organisationId
+      });
+    }
   }),
-  mapProps(original => _.pick(original, ['model', 'navigateTo', 'updateModel', 'saveModel', 'setMetadata', 'getMetadata', 'doCopyDashboard'])),
+  mapProps(original => _.pick(original, ['model', 'updateModel', 'saveModel', 'setMetadata', 'getMetadata', 'backToDashboard'])),
 )(Dashboard);
diff --git a/ui/src/containers/Dashboard/styled/index.js b/ui/src/containers/Dashboard/styled/index.js
index 962ec764e3..b5ea0707e6 100644
--- a/ui/src/containers/Dashboard/styled/index.js
+++ b/ui/src/containers/Dashboard/styled/index.js
@@ -12,6 +12,18 @@ export const EditWrapper = styled.div`
   .btn {
     margin-bottom: auto;
   }
+
+  &:global(.btn) {
+    margin-bottom: auto;
+  }
+
+  div {
+    padding: 0 0 0 15px;
+    font-weight: 300;
+    color: #929292;
+
+    font-family: Arial, sans-serif;
+  }
 `;
 
 export const EditInputWrapper = styled.div`
diff --git a/ui/src/containers/DashboardCard/assets/blank-dashboard.png b/ui/src/containers/DashboardCard/assets/blank-dashboard.png
new file mode 100644
index 0000000000000000000000000000000000000000..24534cf53605cc3f8f095aeb288098ecc86f1edd
GIT binary patch
literal 2748
zcmdT`dsNbC8n&jio7reu-oUY~j;LuC-cl*k%C>MOyr8Dy;H3@ll96~pwk)kNwZ=@-
zlx-|EK-9rdA!R8qi56pu;FZ)g0}V9=LV^8t_RKkZ&hFX2Xa0E4ch38Lf4txOKF|9+
zx4ws;)Zb#ZMMp<R-|v*qIUSvKc3)$YE|5tj=Hr25bK<FxWF4KYhF@dd+p)|w9i1)l
zem=(n2oLASJkMG9t<Ro#+lh32tKVL6^w-3WhbYH|oP#5w9uM<(o4Vp^J6~Aj`M3XK
zWY_GP3$IW7rkfj6>0_v}q0HV#K6dz=YMn^AdB>ftny1kuGkpR<px&K#2^D*-ZlKm3
z+_3fLcgUmLxa)u1WU}LU{oi+A+t|Lt&MNzleWiRVsFo}xqFbe`74CNBVtE~oT+yWT
z@MN)AW>}hFdZIH(h<AY%l%>8Km?aAFC)NC6`Ntn@`H4nc$fGm?eypDhf0fdQAB*2Q
zL2*YG=a~ER*uUj+;Wd0elDwWtRM7`NFo%5=JumY<gbT}W8S8&6SYce63x3Ko4N85H
zUyJCg$s}TuajVNTW=>>yJ@0QQFf}f#{I~qfaA_*8ItMyFxR7=WS$<D^gz_bWth(p&
zUSs|Cjb)Fef6u`-sK|&$F&zXdjTPdxpgCm?NjMZT;^hgNyXrViAQ8I+GBU<}920h#
z<R)6`8*%bAv88;UKmB1^1Uj@*dK2+_8+EirBj)B~)Yk7={jiGxa3lWy15WDJ`$wiQ
zrBU<Sm>G?>K?4+v5w?**g5=q^PpVM3?acFR<cJs1Q?$j{rc2rJYL8huuKnpp$b`ta
z@Ch1P=1@^gg$O*jike6VH+PYkElf|3{oL`I5S-4K3QkjWmpG)m3&B#30W+WDJUP&q
z4V54L^!&6_nZsaD;XGZ*UTL~MM_aIF39xO*nJv47n%P}^1G!>fF|>;QGcYMHGwim3
zHAPfWNKwIpo$O^7jMq#o8p>!uL?C~B_K>v9s2$2!{L2JvRU1I8uZj(hiJji#K}|m&
zanzPXM!IcWORmpiFS{Hs0QHPncBR>elA~I8QtRY|q7|<Hb2DsI2tW3-Z=fQumNJAY
z8sgSvS<)suAPm|i$n4>Tk$~jf7s3m2+n;61+k%eZH=v79<I-B=*s}<9<|Uzx|M7}@
z2RS&owlNa+Tt<Cn6S{p+w0<VXzeSAqt=h}@G8x$7m=xC7*}3S9=B&=3NC}Ww`}|aG
z_7^fR4D=MTbx>FzpL`&QY&&&OzQR@{@k0w4H*8{bp>k7htjuVq-Tl3j2K*Azu|Esp
z{`X3F*R|4~{Mn5=d2(TtvCuM<(O1yT09w$MWuFI7RPRm7V*GosI>tHDqG`>0%^SuT
zHpQwhU@fToksgmLz2JMa<GD*O8*{VNt&DDQO$ovq)XUY3OEnwg+Bx0QciL4KBRkMA
z{afwD1OP!1*&4Cz25Rvi+vN&X{|oVL6>t1Xc$2A|)RuCsBg?ir8+OF={4khE10Ixy
zV>wZM<+4c>sg7ga>{aH#<n?lE^~veM^iq)JoUGhH?tHplN$1&2-i^B&<GOdl|J#Ah
z{pB)B#^Gvhh~mt)W$^3N`ARqNW)rdRW&xEhtw_^7u@ZSfxr%L5QnjHVaORcMuTmV#
z98`5$burR@UYN-Qs8y=1+zAv4IYfo!sdy^bslK(8@vSBXRlPe(H9v_Hma)!}%FZ7M
zR_ZxP16Q*TK{{KVW-^v~D$GbbSVotYsxgjDBFkH={h9<5rm8r3LvGGt=7qI?WAOEZ
z*SplkW}3M7Nd<Z6m4}8)dmI@m?+3?PE$5mC=fIUa?377Rl2}mu=iK_ggD^Ly*8Hhn
zTrbB8d0Yz6u^WYX$s=I%Z~t=<)g!5B^6HE%1v*jU0et%k7!CSZ9Rwx_@iN^o`ifrn
z5VnorDe9+}-`d3&xsJ!qrI3KWb=h-va26il{!-GAM2qO*x=UD}$XT^Q)vgb+tlH6;
z+50%OO015F7XK$;k&No=daLPxK&YW2E<^*FYMv`mFa~qE+k+N=o$k9x)W<YQS&FP$
zyD4>W8=(r0FOf5SI3WT(DIj0ihGtS1DcGdY7XwujaC9d&E2*9%tV5`sMcnXl_<5xg
zB|+BtN)OTKG`;2EXt?f?ma{N8pA%#Gq}MR>N?LOxjA!n{$eniyMP3#^mr4*1Y_RwL
z+8wqR6^{cX<<at0cUIj-u~WY!;ky=7nIuln)?FLjTU_291j{a<)9JeAM&Y1%i-Pkp
zEI=0U-+%;ck5N}}i~4;uZng2J62axuuFkn>X{pUokBTWp=rtx1Z&a7(3f+j2NV=&#
zFZHVl0Z%PP>h^&~1~7Y0L%E@Vh>?-5q)|@KO_OIfUCT*soe9b3BFqD8<{=XU#AAGw
zZ?DM#_1o-AcH|;-dhY<n8V=3<<Z{5krOHc_H1+sQVZk8Nzl;-bCf})Y7~=A7{L0;r
zhy)<lq#Kqc*iG9%9Ug~WXBfILaiV{C{0^0!)aY?6>{CQ_l)8a~m>N1>l*0OI35v>Q
zNBz!X4)A&@yoAd&@=CYq&7bd@hb~Q^5zjg))FgeWGa&t8(_Y5X(199q;5;2irZ0^}
z-!0uVm}f{YBR8xDS#ejFZrnU+e_e6{!Bq_aip_HPvVS1;tV<UCmm$=;)KaaNomI{s
l+cEvlo&UCb(X*^iq=`A*GD6|Z2w+Eb{Cwd)bZ^wPe*wmd{pJ7w

literal 0
HcmV?d00001

diff --git a/ui/src/containers/DashboardCard/assets/getting-started.png b/ui/src/containers/DashboardCard/assets/getting-started.png
new file mode 100644
index 0000000000000000000000000000000000000000..9cdf2d302e920368053cba87af88ef0ce344b1a9
GIT binary patch
literal 4215
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
QeiG>5+7ItlYofyc3%g5*RsaA1

literal 0
HcmV?d00001

diff --git a/ui/src/containers/DashboardCard/assets/private.png b/ui/src/containers/DashboardCard/assets/private.png
new file mode 100644
index 0000000000000000000000000000000000000000..f71af43c7be1893aabb4f479ab4dc52a821d8939
GIT binary patch
literal 360
zcmeAS@N?(olHy`uVBq!ia0vp^0w6XA8<1SE`<)7q;w<opEM{Qf76xHPhFNnYfP#$0
zLGDfr>(0r%1aer?9eo`c7&i8E|4C#8^8b3eIEGX(&Yh$y-W0&owp=LBK!S&b`Cx*H
zM339zi!b~?s7v;`H6Khckmz7xp6H<<z>{~JeXdK{xnj0*`8~UxpClWnD$A~Em)Epb
z4fpeMIxP5+X`R<gX`T;TC+%Ehy{~DbQQ$PMfO)>nCrqOsKmRegJ96_{q02|^^~W9b
zirmrUP~_&Uy<>v#!V^00g=2O;im?pHP+n@XrnB>RMh8d5=I=uH<<z$nHTQl{GI&_9
z!X_grS!KnUioTP(Z$%cf`%lkUwd_>y5|N#TUOLCas<s`9^PZHO^wLf91E*H-&->@f
zxgSk2nJ#8H?QX@<pCNU(U#6(l>&w<x-(PaGZx3VhR^u-&%k2Vy0m0zu>gTe~DWM4f
D)Rc;*

literal 0
HcmV?d00001

diff --git a/ui/src/containers/DashboardCard/assets/stream-starter.png b/ui/src/containers/DashboardCard/assets/stream-starter.png
new file mode 100644
index 0000000000000000000000000000000000000000..cd9bebb8d04d33d3949db7fcd35f36502a3ce1cf
GIT binary patch
literal 4288
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

literal 0
HcmV?d00001

diff --git a/ui/src/containers/DashboardCard/index.js b/ui/src/containers/DashboardCard/index.js
new file mode 100644
index 0000000000..95df7cd329
--- /dev/null
+++ b/ui/src/containers/DashboardCard/index.js
@@ -0,0 +1,244 @@
+import React, { Component } from 'react';
+import Scroll from 'react-scroll';
+import * as _ from 'lodash';
+import classNames from 'classnames';
+import { connect } from 'react-redux';
+import withStyles from 'isomorphic-style-loader/lib/withStyles';
+import { loggedInUserId } from 'ui/redux/selectors';
+import { actions, routeNodeSelector } from 'redux-router5';
+import { activeOrgIdSelector } from 'ui/redux/modules/router';
+import { COPY_DASHBOARD } from 'ui/redux/modules/dashboard/copyDashboard';
+import { withProps, compose, lifecycle, withHandlers, mapProps } from 'recompose';
+import { getVisualisationsFromDashboard } from 'ui/redux/modules/dashboard/selectors';
+import { BLANK_DASHBOARD, STREAM_STARTER } from 'lib/constants/dashboard';
+import Owner from 'ui/containers/Owner';
+import { withModel } from 'ui/utils/hocs';
+import DeleteConfirm from 'ui/containers/DeleteConfirm';
+import DropDownMenu from 'ui/components/DropDownMenu';
+import EditConfirm from 'ui/containers/EditConfirm';
+import PrivacyToggleModal from 'ui/containers/PrivacyToggleModal';
+import ConfirmModal from 'ui/components/Modal/ConfirmModal';
+import blankDashboardIcon from './assets/blank-dashboard.png';
+import streamStarterIcon from './assets/stream-starter.png';
+import gettingStartedIcon from './assets/getting-started.png';
+import privateIcon from './assets/private.png';
+import styles from './styles.css';
+
+const schema = 'dashboard';
+
+export class DashboardCard extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      isEditOpen: null,
+      isDeleteOpen: null,
+      isDuplicateOpen: null,
+      isPrivacyOpen: null
+    };
+  }
+
+  openModal = (modal) => {
+    this.setState({
+      [modal]: true
+    });
+  }
+
+  closeModal = (modal) => {
+    this.setState({
+      [modal]: null
+    });
+  }
+
+  handlerDuplicate = () => {
+    const { doCopyDashboard } = this.props;
+    doCopyDashboard();
+    this.closeModal('isDuplicateOpen');
+  };
+
+  renderMenu = () => {
+    const { model } = this.props;
+    const { isEditOpen, isDeleteOpen, isDuplicateOpen, isPrivacyOpen } = this.state;
+    const isPublic = model.get('isPublic', false);
+
+    return (
+      <div>
+        <DropDownMenu
+          customClass={styles.dashboardCardMenu}
+          button={
+            <a className={styles.menuButton}>
+              <i className="ion ion-navicon-round" />
+            </a>
+          }>
+          <a
+            onClick={() => { this.openModal('isEditOpen'); }}
+            title="Edit Title">
+            Edit Title
+          </a>
+
+          <a
+            onClick={() => { this.openModal('isDuplicateOpen'); }}
+            title="Duplicate">
+            Duplicate
+          </a>
+
+          <a
+            onClick={() => { this.openModal('isPrivacyOpen'); }}
+            title="Privacy toggle">
+            {isPublic
+              ? <span>Set to Private</span>
+              : <span>Set to Public</span>}
+          </a>
+
+          <a
+            onClick={() => { this.openModal('isDeleteOpen'); }}
+            title="Delete button">
+            Delete
+          </a>
+        </DropDownMenu>
+
+        <EditConfirm
+          id={model.get('_id')}
+          schema={schema}
+          onClickClose={() => { this.closeModal('isEditOpen'); }}
+          isOpened={isEditOpen} />
+
+        <ConfirmModal
+          isOpen={isDuplicateOpen}
+          title="Confirm copy"
+          message={<span>This will duplicate the dashboard and visualisations. Are you sure?</span>}
+          onConfirm={this.handlerDuplicate}
+          onCancel={() => { this.closeModal('isDuplicateOpen'); }} />
+
+        <PrivacyToggleModal
+          id={model.get('_id')}
+          schema={schema}
+          onClickClose={() => { this.closeModal('isPrivacyOpen'); }}
+          isOpened={isPrivacyOpen} />
+
+        <DeleteConfirm
+          isOpened={isDeleteOpen}
+          schema={schema}
+          id={model.get('_id')}
+          onClickClose={() => { this.closeModal('isDeleteOpen'); }} />
+      </div>
+    );
+  }
+
+  render = () => {
+    const {
+      model,
+      handleDashboard,
+      index
+    } = this.props;
+    const title = model.get('title', ' ');
+    const isPublic = model.get('isPublic', false);
+
+    const iconType = () => {
+      const type = model.get('type', ' ');
+
+      if (type === BLANK_DASHBOARD) {
+        return blankDashboardIcon;
+      }
+      if (type === STREAM_STARTER) {
+        return streamStarterIcon;
+      }
+      return gettingStartedIcon;
+    };
+
+    return (
+      <div
+        className={styles.dashboardCard} >
+        <div className={styles.menuWrapper}>
+          {this.renderMenu()}
+        </div>
+        <div
+          key={index}
+          onClick={handleDashboard}
+          className={classNames(styles.card)}>
+          <img
+            className={styles.cardIcon}
+            src={iconType()}
+            alt={title} />
+
+          {!isPublic && (
+            <span
+              className={styles.dashboardPrivateIcon} >
+              <img
+                src={privateIcon}
+                alt="private" />
+            </span>
+          )}
+
+
+          <h4
+            className={styles.cardTitle}
+            onClick={handleDashboard} >
+            {title}
+          </h4>
+
+          <span style={{ marginLeft: 'auto' }}>
+            <Owner model={model} />
+          </span>
+        </div>
+      </div>
+    );
+  }
+}
+
+export default compose(
+  withStyles(styles),
+  withProps(({ model }) => ({
+    id: model.get('_id'),
+  })),
+  withModel,
+  lifecycle({
+    componentDidUpdate(previousProps) {
+      if (this.props.model.get('widgets').size > previousProps.model.get('widgets').size && window) {
+        const scroll = Scroll.animateScroll;
+        scroll.scrollToBottom({ smooth: true });
+      }
+    }
+  }),
+  connect(
+    state => ({
+      route: routeNodeSelector('organisation.dashboards')(state).route,
+      organisationId: activeOrgIdSelector(state),
+      userId: loggedInUserId(state),
+      state
+    }),
+    dispatch => ({
+      copyDashboard: ({ dashboard, visualisations, organisationId, userId }) => dispatch({
+        type: COPY_DASHBOARD,
+        dispatch,
+        dashboard,
+        visualisations,
+        organisationId,
+        userId,
+        navigateTo: actions.navigateTo,
+      }),
+    }),
+  ),
+  withHandlers({
+    doCopyDashboard: ({ model, state, organisationId, copyDashboard, userId }) => () => copyDashboard({
+      dashboard: model,
+      visualisations: getVisualisationsFromDashboard(model.get('_id'))(state),
+      organisationId,
+      userId,
+    }),
+    handleDashboard: ({
+      model,
+      navigateTo,
+      route,
+    }) => () => {
+      const organisationId = route.params.organisationId;
+      const dashboardId = model.get('_id');
+      if (dashboardId) {
+        navigateTo('organisation.data.dashboards.id', {
+          organisationId,
+          dashboardId
+        });
+      }
+    }
+  }),
+  mapProps(original => _.pick(original, ['model', 'handleDashboard', 'doCopyDashboard'])),
+)(DashboardCard);
diff --git a/ui/src/containers/DashboardCard/styles.css b/ui/src/containers/DashboardCard/styles.css
new file mode 100644
index 0000000000..524e8a054e
--- /dev/null
+++ b/ui/src/containers/DashboardCard/styles.css
@@ -0,0 +1,64 @@
+
+.dashboardCard {
+  width: 100%;
+  padding: 0;
+  height: 100%;
+  margin-bottom: 0;
+  position: relative;
+  background-color: #fff;
+  border-radius: 0px;
+  -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
+  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
+  box-sizing: border-box;
+  box-shadow: 0 0 0 1px rgba(200, 215, 225, 0.5), 0 1px 2px #e9eff3;
+}
+
+.dashboardCardMenu {
+  right: 0;
+  left: auto;
+}
+
+.dashboardPrivateIcon{
+  vertical-align: top;
+  float: right;
+  margin-right: 30px;
+  display: block;
+  width: 26px;
+  height: 26px;
+  border-radius: 50%;
+  text-align: center;
+  background: rgba(196, 196, 196, 0.25);
+  padding-top: 2px;
+}
+
+.card {
+  padding: 16px;
+  cursor: pointer;
+}
+
+.cardTitle {
+  height: 100px;
+  overflow: hidden;
+}
+
+.cardIcon {
+  max-width: 100px;
+  margin: -15px;
+}
+
+.menuWrapper {
+  position: absolute;
+  right: 5px;
+  padding: 15px;
+}
+
+.menuWrapper ul li a span {
+  width: 100%;
+  display: inline-block;
+}
+
+.menuItem {
+  background: inherit;
+  border: none;
+  padding: 0;
+}
diff --git a/ui/src/containers/DashboardList/index.js b/ui/src/containers/DashboardList/index.js
new file mode 100644
index 0000000000..85d0c66ec0
--- /dev/null
+++ b/ui/src/containers/DashboardList/index.js
@@ -0,0 +1,142 @@
+import React from 'react';
+import { connect } from 'react-redux';
+import PropTypes from 'prop-types';
+import { Iterable } from 'immutable';
+import withStyles from 'isomorphic-style-loader/lib/withStyles';
+import Spinner from 'ui/components/Spinner';
+import { withModels } from 'ui/utils/hocs';
+import { loggedInUserId } from 'ui/redux/modules/auth';
+import { routeNodeSelector, actions } from 'redux-router5';
+import { compose, defaultProps, setPropTypes, withHandlers, withProps } from 'recompose';
+import { activeOrgIdSelector } from 'ui/redux/modules/router';
+import { isLoadingSelector } from 'ui/redux/modules/pagination';
+import DashboardCard from 'ui/containers/DashboardCard';
+import styles from './styles.css';
+
+const enhance = compose(
+  setPropTypes({
+    schema: PropTypes.string.isRequired,
+    isLoading: PropTypes.bool.isRequired,
+    hasMore: PropTypes.bool.isRequired,
+    models: PropTypes.instanceOf(Iterable).isRequired,
+    model: PropTypes.object,
+    fetchMore: PropTypes.func.isRequired,
+    getModelKey: PropTypes.func,
+  }),
+  defaultProps({
+    getModelKey: model => model.get('_id', Math.random().toString()),
+  }),
+  withStyles(styles),
+  connect(
+    state => ({
+      mod: state,
+      isLoading: isLoadingSelector('dashboard', new Map())(state),
+      userId: loggedInUserId(state),
+      route: routeNodeSelector('organisation.dashboards')(state).route,
+      organisation: activeOrgIdSelector(state)
+    }),
+    { navigateTo: actions.navigateTo }
+  ),
+  withProps({
+    schema: 'dashboard',
+    filter: new Map(),
+    first: 12,
+    noItemsDisplay: 'No items.',
+    getModelKey: model => model.get('_id', Math.random().toString())
+  }),
+  withModels,
+  withProps(
+    ({ route }) => ({
+      id: route.name === 'organisation.data.dashboards.add' ? undefined : route.params.dashboardId
+    })
+  ),
+  withProps(
+    ({
+      id,
+      models,
+      model
+    }) => {
+      if (model.size === 0 && id) {
+        return ({
+          modelsWithModel: models
+        });
+      }
+
+      return ({
+        modelsWithModel: !id || models.has(id) ? models : models.reverse().set(id, model).reverse()
+      });
+    }
+  ),
+  withHandlers({
+    handleDashboard: ({
+      navigateTo,
+      route,
+    }) => (dashboardId) => {
+      const organisationId = route.params.organisationId;
+      if (dashboardId) {
+        navigateTo('organisation.data.dashboards.id', {
+          organisationId,
+          dashboardId
+        });
+      }
+    }
+  }),
+);
+
+const renderLoadMoreButton = ({ isLoading, hasMore, fetchMore }) =>
+  (
+    <div style={{ marginTop: '20px' }}>
+      { isLoading ? (
+        <Spinner />
+      ) : (
+        hasMore &&
+          <button className="btn btn-default" onClick={fetchMore} >
+            Load more
+          </button>
+      )}
+    </div>
+  );
+
+const ModelList = ({
+  isLoading,
+  modelsWithModel,
+  hasMore,
+  schema,
+  fetchMore,
+  noItemsDisplay,
+  getModelKey,
+  route,
+  ...other
+}) => {
+  if (modelsWithModel.size > 0) {
+    return (
+      <div className={styles.dashboardList}>
+        {
+          modelsWithModel.map((model, index) => (
+            <DashboardCard
+              {...other}
+              params={route.params}
+              key={getModelKey(model)}
+              index={index}
+              model={model}
+              schema={schema} />
+            )).valueSeq()
+        }
+
+        { isLoading
+          ? <Spinner />
+          : renderLoadMoreButton({ isLoading, hasMore, fetchMore })
+        }
+      </div>
+    );
+  } else if (isLoading) {
+    return <Spinner />;
+  }
+  return (
+    <div className="row">
+      <div className="col-md-12"><h4>{ noItemsDisplay }</h4></div>
+    </div>
+  );
+};
+
+export default enhance(ModelList);
diff --git a/ui/src/containers/DashboardList/styles.css b/ui/src/containers/DashboardList/styles.css
new file mode 100644
index 0000000000..fa1f81b2d1
--- /dev/null
+++ b/ui/src/containers/DashboardList/styles.css
@@ -0,0 +1,6 @@
+/* override styles for <a> tag defined in core.css*/
+.dashboardList {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+  grid-gap: 20px;
+}
diff --git a/ui/src/containers/DashboardTemplates/index.js b/ui/src/containers/DashboardTemplates/index.js
index 856edbc096..04bd4dac7e 100644
--- a/ui/src/containers/DashboardTemplates/index.js
+++ b/ui/src/containers/DashboardTemplates/index.js
@@ -1,15 +1,26 @@
 import React from 'react';
-import { CardList, Panel } from 'ui/containers/DashboardTemplates/styled';
+import { CardList, Panel, DashboardTitle } from 'ui/containers/DashboardTemplates/styled';
 import BlankDashboard from './BlankDashboard';
 import StreamStarter from './StreamStarter';
 import GettingStarted from './GettingStarted';
 
-const DashboardTemplates = () => (
+
+const DashboardTemplates = ({ handleClose }) => (
   <Panel className={'panel panel-default'}>
 
-    <label htmlFor="dashboard-templates">
-      Custom Templates
-    </label>
+    <DashboardTitle>
+      <label htmlFor="dashboard-templates">
+        Add Dashboard
+      </label>
+      <div
+        className="close"
+        onClick={handleClose}>
+        <i className="ion-close-round" />
+      </div>
+    </DashboardTitle>
+    <p>
+      Start by selecting a blank dashboard or choose a template
+    </p>
 
     <CardList id="dashboard-templates">
       <BlankDashboard />
diff --git a/ui/src/containers/DashboardTemplates/styled/index.js b/ui/src/containers/DashboardTemplates/styled/index.js
index 5dcf7d1e8d..695da47cf7 100644
--- a/ui/src/containers/DashboardTemplates/styled/index.js
+++ b/ui/src/containers/DashboardTemplates/styled/index.js
@@ -38,3 +38,12 @@ export const Card = styled.div`
     text-align: center;
   }
 `;
+
+export const DashboardTitle = styled.div`
+  display: flex;
+  justify-content: space-between;
+
+  .close {
+    cursor: pointer;
+  }
+`;
diff --git a/ui/src/containers/Dashboards/index.js b/ui/src/containers/Dashboards/index.js
index a58d99b24a..8560a127b7 100644
--- a/ui/src/containers/Dashboards/index.js
+++ b/ui/src/containers/Dashboards/index.js
@@ -1,52 +1,30 @@
-import React from 'react';
-import { isLoadingSelector } from 'ui/redux/modules/pagination';
-import Tabs from 'ui/components/Material/Tabs';
-import { Tab } from 'react-toolbox/lib/tabs';
+import React, { useState } from 'react';
 import { connect } from 'react-redux';
-import { Map } from 'immutable';
-import { routeNodeSelector, actions } from 'redux-router5';
-import { withProps, compose, withHandlers } from 'recompose';
-import {
-  withModels,
-  withModel
-} from 'ui/utils/hocs';
+import { Map, fromJS } from 'immutable';
+import { routeNodeSelector } from 'redux-router5';
+import { withProps, compose } from 'recompose';
+import { withModels, withModel } from 'ui/utils/hocs';
 import { loggedInUserId } from 'ui/redux/modules/auth';
-import Spinner from 'ui/components/Spinner';
-import Dashboard from 'ui/containers/Dashboard';
+import DashboardList from 'ui/containers/DashboardList';
 import DashboardTemplates from 'ui/containers/DashboardTemplates';
-import { activeOrgIdSelector } from 'ui/redux/modules/router';
-
-const ADD_ROUTE = 'add';
-
-const StyledSpinner = () => (
-  <div style={{ height: '60vh', display: 'flex' }}>
-    <Spinner />
-  </div>
-);
-
-const NoDashboards = () => (
-  <div>
-    <h3>{"You don't have any dashboards yet! Add one to get started."}</h3>
-    <DashboardTemplates />
-  </div>
-);
 
-const renderDashboard = params => (model, index) => (
-  <Tab key={index} label={model.get('title', `Dashboard ${index + 1}`, '')}>
-    <Dashboard id={model.get('_id')} params={params} />
-  </Tab>
-);
+const schema = 'dashboards';
 
+const DashboardLists = compose(
+  withProps({
+    schema,
+    sort: fromJS({ createdAt: -1, _id: -1 }),
+  }),
+  withModels,
+  withModel,
+)(DashboardList);
 
 const enhance = compose(
   connect(
     state => ({
-      isLoading: isLoadingSelector('dashboard', new Map())(state),
       userId: loggedInUserId(state),
       route: routeNodeSelector('organisation.dashboards')(state).route,
-      organisation: activeOrgIdSelector(state)
-    }),
-    { navigateTo: actions.navigateTo }
+    })
   ),
   withProps({
     schema: 'dashboard',
@@ -76,54 +54,42 @@ const enhance = compose(
         modelsWithModel: !id || models.has(id) ? models : models.reverse().set(id, model).reverse()
       });
     }
-  ),
-  withHandlers({
-    handleTabChange: ({
-      models,
-      modelsWithModel,
-      navigateTo,
-      route,
-    }) => (tabIndex) => {
-      const organisationId = route.params.organisationId;
-      if (tabIndex === models.size) {
-        navigateTo('organisation.data.dashboards.add', { organisationId });
-        return;
-      }
-      const selectedDashboard = modelsWithModel.toList().get(tabIndex);
-      navigateTo('organisation.data.dashboards.id', {
-        organisationId,
-        dashboardId: selectedDashboard.get('_id'),
-      });
-    }
-  }),
+  )
 );
 
-const Dashboards = ({
-  handleTabChange,
-  isLoading,
-  modelsWithModel,
-  models,
-  route,
-}) => {
-  if (isLoading) {
-    return <StyledSpinner />;
-  }
+const Dashboards = () => {
+  const [addDashbord, setAddDashbord] = useState(false);
 
-  if (modelsWithModel.size === 0) {
-    return <NoDashboards />;
-  }
-
-  const activeTab = (route.name === 'organisation.data.dashboards.add') ?
-    models.size :
-    modelsWithModel.toList().keyOf(modelsWithModel.get(route.params.dashboardId));
+  const openDashboard = () => setAddDashbord(true);
+  const closeDashboard = () => setAddDashbord(false);
 
   return (
-    <Tabs index={activeTab} onChange={handleTabChange}>
-      {modelsWithModel.map(renderDashboard(route.params)).valueSeq()}
-      <Tab label={ADD_ROUTE} >
-        <DashboardTemplates />
-      </Tab>
-    </Tabs>
+    <div>
+      <header id="topbar">
+        <div className="heading heading-light">
+          <span className="pull-right open_panel_btn" >
+            <button
+              className="btn btn-primary btn-sm"
+              ref={() => {}}
+              onClick={openDashboard}>
+              <i className="ion ion-plus" /> Add Dashboard
+            </button>
+          </span>
+          Dashboards
+        </div>
+      </header>
+      <div className="row">
+        {addDashbord && (
+          <div className="col-md-12">
+            <DashboardTemplates handleClose={closeDashboard} />
+          </div>
+        )}
+
+        <div className="col-md-12">
+          <DashboardLists />
+        </div>
+      </div>
+    </div>
   );
 };
 
diff --git a/ui/src/containers/EditConfirm/index.js b/ui/src/containers/EditConfirm/index.js
new file mode 100644
index 0000000000..e37a0f7bd5
--- /dev/null
+++ b/ui/src/containers/EditConfirm/index.js
@@ -0,0 +1,103 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import Portal from 'react-portal';
+import { compose, withHandlers, setPropTypes } from 'recompose';
+import { withModel } from 'ui/utils/hocs';
+import Input from 'ui/components/Material/Input';
+
+const enhance = compose(
+  setPropTypes({
+    onClickClose: PropTypes.func.isRequired
+  }),
+  withModel,
+  withHandlers({
+    onTitleChange: ({ updateModel }) => (value) => {
+      updateModel({ path: ['title'], value });
+    }
+  })
+);
+
+
+class EditConfirm extends Component {
+  static propTypes = {
+    model: PropTypes.instanceOf(Map).isRequired,
+    isOpened: PropTypes.bool.isRequired,
+    onClickClose: PropTypes.func.isRequired,
+    onTitleChange: PropTypes.func.isRequired,
+  };
+
+  constructor(props) {
+    super(props);
+
+    const { model } = this.props;
+    this.state = {
+      title: model.get('title', ' '),
+    };
+  }
+
+  onTitleChange = (value) => {
+    this.setState({
+      title: value
+    });
+  };
+
+  handlerTitle = () => {
+    const { onTitleChange, onClickClose } = this.props;
+    const { title } = this.state;
+    onTitleChange(title);
+    onClickClose();
+  };
+
+  render() {
+    const { isOpened, onClickClose } = this.props;
+    const { title } = this.state;
+
+    return (
+      <Portal isOpened={isOpened}>
+        <span>
+          <div className="modal animated fast fadeIn">
+            <div className="modal-dialog">
+              <div className="modal-content">
+
+                <div className="modal-header modal-header-bg">
+                  <button type="button" className="close" aria-label="Close" onClick={onClickClose}>
+                    <span aria-hidden="true">&times;</span>
+                  </button>
+                  <h4 className="modal-title">Edit Dashboard Title</h4>
+                </div>
+
+                <div
+                  className="modal-body clearfix"
+                  style={{ maxHeight: '500px', minWidth: '350px', overflow: 'auto', textAlign: 'center' }}>
+                  <Input
+                    type="text"
+                    name="Title"
+                    label="Dashboard Title"
+                    value={title}
+                    onChange={this.onTitleChange}
+                    style={{ fontSize: '13px' }} />
+                </div>
+
+                <div className="modal-footer" style={{ textAlign: 'center' }}>
+                  <a
+                    onClick={this.handlerTitle}
+                    className="btn btn-primary btn-sm">
+                    <i className="icon ion-checkmark" /> Confirm
+                    </a>
+                  <a
+                    onClick={onClickClose}
+                    className="btn btn-primary btn-sm">
+                    <i className="icon ion-close-round" /> Cancel
+                    </a>
+                </div>
+              </div>
+            </div>
+            <div className="modal-backdrop" onClick={onClickClose.bind(null)} />
+          </div>
+        </span>
+      </Portal>
+    );
+  }
+}
+
+export default enhance(EditConfirm);
diff --git a/ui/src/containers/OrganisationHome/index.js b/ui/src/containers/OrganisationHome/index.js
index f7cdb1cb09..07dea1a5b3 100644
--- a/ui/src/containers/OrganisationHome/index.js
+++ b/ui/src/containers/OrganisationHome/index.js
@@ -13,6 +13,12 @@ const renderPage = (routeName) => {
   const testRoute = startsWithSegment(routeName);
 
   // Data //
+  if (testRoute('organisation.data.dashboards.id')) {
+    return React.createElement(createAsyncComponent({
+      loader: System.import('ui/containers/Dashboard')
+    }));
+  }
+
   if (testRoute('organisation.data.dashboards')) {
     return React.createElement(createAsyncComponent({
       loader: System.import('ui/containers/Dashboards')
diff --git a/ui/src/containers/PrivacyToggleModal/index.js b/ui/src/containers/PrivacyToggleModal/index.js
new file mode 100644
index 0000000000..7840ec0c67
--- /dev/null
+++ b/ui/src/containers/PrivacyToggleModal/index.js
@@ -0,0 +1,71 @@
+import React from 'react';
+import Portal from 'react-portal';
+import { compose, withHandlers } from 'recompose';
+import { withModel } from 'ui/utils/hocs';
+
+const enhance = compose(
+  withModel,
+  withHandlers({
+    togglePrivacy: ({ model, updateModel, onClickClose }) => (event) => {
+      const value = !model.get('isPublic', false);
+      updateModel({ path: ['isPublic'], value });
+      onClickClose();
+      event.stopPropagation();
+    }
+  })
+);
+
+const render = ({ isOpened, togglePrivacy, onClickClose, model }) => {
+  const isPublic = model.get('isPublic', false);
+
+  return (
+    <Portal isOpened={isOpened}>
+      <span>
+        <div className="modal animated fast fadeIn">
+          <div className="modal-dialog">
+            <div className="modal-content">
+
+              <div className="modal-header modal-header-bg">
+                <button type="button" className="close" aria-label="Close" onClick={onClickClose}>
+                  <span aria-hidden="true">&times;</span>
+                </button>
+                <h4 className="modal-title">
+                  <span>
+                      Confirm
+                      {isPublic
+                        ? <span> Set to Private</span>
+                        : <span> Set to Public</span>}
+                  </span>
+                </h4>
+              </div>
+
+              <div
+                className="modal-body clearfix"
+                style={{ maxHeight: '500px', overflow: 'auto', textAlign: 'center' }}>
+                {isPublic
+                    ? <span>This will hide the dashboard for others in your organisations. Are you sure?</span>
+                    : <span>This will show the dashboard to others in your organisations. Are you sure?</span>}
+              </div>
+
+              <div className="modal-footer" style={{ textAlign: 'center' }}>
+                <a
+                  onClick={togglePrivacy}
+                  className="btn btn-primary btn-sm">
+                  <i className="icon ion-checkmark" /> Confirm
+                    </a>
+                <a
+                  onClick={onClickClose}
+                  className="btn btn-primary btn-sm">
+                  <i className="icon ion-close-round" /> Cancel
+                    </a>
+              </div>
+            </div>
+          </div>
+          <div className="modal-backdrop" onClick={onClickClose.bind(null)} />
+        </div>
+      </span>
+    </Portal>
+  );
+};
+
+export default enhance(render);
diff --git a/ui/src/containers/Widget/index.js b/ui/src/containers/Widget/index.js
index b3f2080871..19cf49829f 100644
--- a/ui/src/containers/Widget/index.js
+++ b/ui/src/containers/Widget/index.js
@@ -245,7 +245,7 @@ class Widget extends Component {
               onChangeTitle={this.props.onChangeTitle}
               onChangeVisualisation={this.props.onChangeVisualisation} />
           }
-          <DeleteConfirm isOpened={isDeleteOpen} {...delPopupProps} />
+          <DeleteConfirm key={model.get('_id')} isOpened={isDeleteOpen} {...delPopupProps} />
         </WidgetContent>
       </StyledWidget>
     );
diff --git a/ui/src/redux/modules/dashboard/blankDashboard.js b/ui/src/redux/modules/dashboard/blankDashboard.js
index a21386e0b9..aea2e30328 100644
--- a/ui/src/redux/modules/dashboard/blankDashboard.js
+++ b/ui/src/redux/modules/dashboard/blankDashboard.js
@@ -10,6 +10,7 @@ function* createBlankDashboard({ userId, organisationId, dispatch }) {
     props: {
       owner: userId,
       title: 'Blank Dashboard',
+      type: 'blankDashboard',
       isExpanded: true,
     },
   }));
diff --git a/ui/src/redux/modules/dashboard/gettingStarted.js b/ui/src/redux/modules/dashboard/gettingStarted.js
index e51a06e9c5..5066a45af3 100644
--- a/ui/src/redux/modules/dashboard/gettingStarted.js
+++ b/ui/src/redux/modules/dashboard/gettingStarted.js
@@ -67,6 +67,7 @@ function* createGettingStarted({ userId, organisationId, dispatch }) {
     props: {
       owner: userId,
       title: 'Getting Started',
+      type: 'gettingStarted',
       isExpanded: true,
       widgets: [
         { x: 0, y: 0, w: 6, h: 8, visualisation: visualisationIds[0] },
diff --git a/ui/src/redux/modules/dashboard/streamStarter.js b/ui/src/redux/modules/dashboard/streamStarter.js
index db532b7336..e24862d1f7 100644
--- a/ui/src/redux/modules/dashboard/streamStarter.js
+++ b/ui/src/redux/modules/dashboard/streamStarter.js
@@ -73,6 +73,7 @@ function* createStreamStarter({ userId, organisationId, dispatch }) {
     props: {
       owner: userId,
       title: 'Stream Starter',
+      type: 'streamStarter',
       isExpanded: true,
       widgets: [
         { x: 0, y: 0, w: 6, h: 8, visualisation: visualisationIds[0] },
diff --git a/ui/src/static/core.css b/ui/src/static/core.css
index bc747af935..b2d664fec5 100644
--- a/ui/src/static/core.css
+++ b/ui/src/static/core.css
@@ -3576,7 +3576,7 @@ tbody.collapse.in {
   position: absolute;
   top: 100%;
   left: 0;
-  z-index: 1000;
+  z-index: 10;
   display: none;
   float: left;
   min-width: 160px;