Add "Published" feature to dashboards

superset/assets/spec/javascripts/dashboard/components/Header_spec.jsx

@@ -21,6 +21,7 @@ import { shallow } from 'enzyme';
 import Header from '../../../../src/dashboard/components/Header';
 import EditableTitle from '../../../../src/components/EditableTitle';
 import FaveStar from '../../../../src/components/FaveStar';
+import PublishedStatus from '../../../../src/dashboard/components/PublishedStatus';
 import HeaderActionsDropdown from '../../../../src/dashboard/components/HeaderActionsDropdown';
 import Button from '../../../../src/components/Button';
 import UndoRedoKeylisteners from '../../../../src/dashboard/components/UndoRedoKeylisteners';
@@ -43,6 +44,8 @@ describe('Header', () => {
     fetchFaveStar: () => {},
     fetchCharts: () => {},
     saveFaveStar: () => {},
+    savePublished: () => {},
+    isPublished: () => {},
     startPeriodicRender: () => {},
     updateDashboardTitle: () => {},
     editMode: false,
@@ -78,6 +81,11 @@ describe('Header', () => {
       expect(wrapper.find(EditableTitle)).toHaveLength(1);
     });
 
+    it('should render the PublishedStatus', () => {
+      const wrapper = setup(overrideProps);
+      expect(wrapper.find(PublishedStatus)).toHaveLength(1);
+    });
+
     it('should render the FaveStar', () => {
       const wrapper = setup(overrideProps);
       expect(wrapper.find(FaveStar)).toHaveLength(1);
@@ -110,6 +118,11 @@ describe('Header', () => {
       expect(wrapper.find(EditableTitle)).toHaveLength(1);
     });
 
+    it('should render the PublishedStatus', () => {
+      const wrapper = setup(overrideProps);
+      expect(wrapper.find(PublishedStatus)).toHaveLength(1);
+    });
+
     it('should render the FaveStar', () => {
       const wrapper = setup(overrideProps);
       expect(wrapper.find(FaveStar)).toHaveLength(1);
@@ -147,6 +160,11 @@ describe('Header', () => {
       expect(wrapper.find(FaveStar)).toHaveLength(1);
     });
 
+    it('should render the PublishedStatus', () => {
+      const wrapper = setup(overrideProps);
+      expect(wrapper.find(PublishedStatus)).toHaveLength(1);
+    });
+
     it('should render the HeaderActionsDropdown', () => {
       const wrapper = setup(overrideProps);
       expect(wrapper.find(HeaderActionsDropdown)).toHaveLength(1);

superset/assets/src/dashboard/actions/dashboardState.js

@@ -99,6 +99,32 @@ export function saveFaveStar(id, isStarred) {
   };
 }
 
+export const TOGGLE_PUBLISHED = 'TOGGLE_PUBLISHED';
+export function togglePublished(isPublished) {
+  return { type: TOGGLE_PUBLISHED, isPublished };
+}
+
+export function savePublished(id, isPublished) {
+  return function savePublishedThunk(dispatch) {
+    return SupersetClient.post({
+      endpoint: `/superset/dashboard/${id}/published/`,
+      postPayload: { published: isPublished },
+    })
+      .then(() => {
+        const nowPublished = isPublished ? 'published' : 'hidden';
+        dispatch(addSuccessToast(t(`This dashboard is now ${nowPublished}`)));
+        dispatch(togglePublished(isPublished));
+      })
+      .catch(() => {
+        dispatch(
+          addDangerToast(
+            t('You do not have permissions to edit this dashboard.'),
+          ),
+        );
+      });
+  };
+}
+
 export const TOGGLE_EXPAND_SLICE = 'TOGGLE_EXPAND_SLICE';
 export function toggleExpandSlice(sliceId) {
   return { type: TOGGLE_EXPAND_SLICE, sliceId };

superset/assets/src/dashboard/components/Header.jsx

@@ -26,6 +26,7 @@ import HeaderActionsDropdown from './HeaderActionsDropdown';
 import EditableTitle from '../../components/EditableTitle';
 import Button from '../../components/Button';
 import FaveStar from '../../components/FaveStar';
+import PublishedStatus from './PublishedStatus';
 import UndoRedoKeylisteners from './UndoRedoKeylisteners';
 
 import { chartPropShape } from '../util/propShapes';
@@ -57,12 +58,14 @@ const propTypes = {
   colorNamespace: PropTypes.string,
   colorScheme: PropTypes.string,
   isStarred: PropTypes.bool.isRequired,
+  isPublished: PropTypes.bool.isRequired,
   isLoading: PropTypes.bool.isRequired,
   onSave: PropTypes.func.isRequired,
   onChange: PropTypes.func.isRequired,
   fetchFaveStar: PropTypes.func.isRequired,
   fetchCharts: PropTypes.func.isRequired,
   saveFaveStar: PropTypes.func.isRequired,
+  savePublished: PropTypes.func.isRequired,
   startPeriodicRender: PropTypes.func.isRequired,
   updateDashboardTitle: PropTypes.func.isRequired,
   editMode: PropTypes.bool.isRequired,
@@ -272,6 +275,7 @@ class Header extends React.PureComponent {
       onSave,
       updateCss,
       editMode,
+      isPublished,
       builderPaneType,
       dashboardInfo,
       hasUnsavedChanges,
@@ -293,6 +297,15 @@ class Header extends React.PureComponent {
             onSaveTitle={this.handleChangeText}
             showTooltip={false}
           />
+          <span className="publish">
+            <PublishedStatus
+              dashboardId={dashboardInfo.id}
+              isPublished={isPublished}
+              savePublished={this.props.savePublished}
+              canEdit={userCanEdit}
+              canSave={userCanSaveAs}
+            />
+          </span>
           <span className="favstar">
             <FaveStar
               itemId={dashboardInfo.id}

superset/assets/src/dashboard/components/PublishedStatus.jsx

@@ -0,0 +1,121 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import React from 'react';
+import PropTypes from 'prop-types';
+import { t } from '@superset-ui/translation';
+import TooltipWrapper from '../../components/TooltipWrapper';
+
+const propTypes = {
+  dashboardId: PropTypes.number.isRequired,
+  isPublished: PropTypes.bool.isRequired,
+  savePublished: PropTypes.func.isRequired,
+  canEdit: PropTypes.bool.isRequired,
+  canSave: PropTypes.bool.isRequired,
+};
+
+const draftButtonTooltip = t(
+  'This dashboard is not published which means it will not show up in the list of dashboards. ' +
+    'Click here to publish this dashboard.',
+);
+
+const draftDivTooltip = t(
+  'This dashboard is not published which means it will not show up in the list of dashboards.' +
+    ' Favorite it to see it there or access it by using the URL directly.',
+);
+
+const publishedTooltip = t(
+  'This dashboard is published. Click to make it a draft.',
+);
+
+const divStyle = {
+  border: '1px dotted black',
+  backgroundColor: '#F9F9F9',
+  padding: '3px 7px 3px 7px',
+  fontFamily: 'Monospace',
+  fontSize: '16px',
+};
+
+export default class PublishedStatus extends React.Component {
+  componentDidMount() {
+    this.togglePublished = this.togglePublished.bind(this);
+  }
+
+  togglePublished() {
+    this.props.savePublished(this.props.dashboardId, !this.props.isPublished);
+  }
+
+  render() {
+    // Show everybody the draft badge
+    if (!this.props.isPublished) {
+      // if they can edit the dash, make the badge a button
+      if (this.props.canEdit && this.props.canSave) {
+        return (
+          <TooltipWrapper
+            label="Unpublished Dashboard"
+            placement="bottom"
+            tooltip={draftButtonTooltip}
+          >
+            <button
+              style={divStyle}
+              onClick={() => {
+                this.togglePublished();
+              }}
+            >
+              Draft
+            </button>
+          </TooltipWrapper>
+        );
+      }
+      return (
+        <TooltipWrapper
+          label="Unpublished Dashboard"
+          placement="bottom"
+          tooltip={draftDivTooltip}
+        >
+          <div style={divStyle}>Draft</div>
+        </TooltipWrapper>
+      );
+    }
+
+    // Show the published badge for the owner of the dashboard to toggle
+    else if (this.props.canEdit && this.props.canSave) {
+      return (
+        <TooltipWrapper
+          label="Published Dashboard"
+          placement="bottom"
+          tooltip={publishedTooltip}
+        >
+          <button
+            style={divStyle}
+            onClick={() => {
+              this.togglePublished();
+            }}
+          >
+            Published
+          </button>
+        </TooltipWrapper>
+      );
+    }
+
+    // Don't show anything if one doesn't own the dashboard and it is published
+    return null;
+  }
+}
+
+PublishedStatus.propTypes = propTypes;

superset/assets/src/dashboard/containers/DashboardHeader.jsx

@@ -27,6 +27,7 @@ import {
   showBuilderPane,
   fetchFaveStar,
   saveFaveStar,
+  savePublished,
   fetchCharts,
   startPeriodicRender,
   updateCss,
@@ -76,6 +77,7 @@ function mapStateToProps({
     charts,
     userId: dashboardInfo.userId,
     isStarred: !!dashboardState.isStarred,
+    isPublished: !!dashboardState.isPublished,
     isLoading: isDashboardLoading(charts),
     hasUnsavedChanges: !!dashboardState.hasUnsavedChanges,
     maxUndoHistoryExceeded: !!dashboardState.maxUndoHistoryExceeded,
@@ -96,6 +98,7 @@ function mapDispatchToProps(dispatch) {
       showBuilderPane,
       fetchFaveStar,
       saveFaveStar,
+      savePublished,
       fetchCharts,
       startPeriodicRender,
       updateDashboardTitle,

superset/assets/src/dashboard/reducers/dashboardState.js

@@ -30,6 +30,7 @@ import {
   SHOW_BUILDER_PANE,
   TOGGLE_EXPAND_SLICE,
   TOGGLE_FAVE_STAR,
+  TOGGLE_PUBLISHED,
   UPDATE_CSS,
   SET_REFRESH_FREQUENCY,
 } from '../actions/dashboardState';
@@ -71,6 +72,9 @@ export default function dashboardStateReducer(state = {}, action) {
     [TOGGLE_FAVE_STAR]() {
       return { ...state, isStarred: action.isStarred };
     },
+    [TOGGLE_PUBLISHED]() {
+      return { ...state, isPublished: action.isPublished };
+    },
     [SET_EDIT_MODE]() {
       return {
         ...state,

superset/assets/src/dashboard/reducers/getInitialState.js

@@ -217,6 +217,7 @@ export default function(bootstrapData) {
       colorNamespace: dashboard.metadata.color_namespace,
       colorScheme: dashboard.metadata.color_scheme,
       editMode: dashboard.dash_edit_perm && editMode,
+      isPublished: dashboard.published,
       builderPaneType:
         dashboard.dash_edit_perm && editMode
           ? BUILDER_PANE_TYPE.ADD_COMPONENTS

superset/assets/src/dashboard/stylesheets/dashboard.less

@@ -214,6 +214,11 @@ body {
     position: relative;
     margin-left: 8px;
   }
+
+  .publish {
+    position: relative;
+    margin-left: 8px;
+  }
 }
 
 .ace_gutter {

superset/assets/src/dashboard/util/propShapes.jsx

@@ -72,6 +72,7 @@ export const dashboardStatePropShape = PropTypes.shape({
   filters: PropTypes.object.isRequired,
   expandedSlices: PropTypes.object,
   editMode: PropTypes.bool,
+  isPublished: PropTypes.bool.isRequired,
   builderPaneType: PropTypes.string.isRequired,
   colorNamespace: PropTypes.string,
   colorScheme: PropTypes.string,

superset/migrations/versions/d6ffdf31bdd4_add_published_column_to_dashboards.py

@@ -0,0 +1,38 @@
+# Licensed to the Apache Software Foundation (ASF) under one
+# or more contributor license agreements.  See the NOTICE file
+# distributed with this work for additional information
+# regarding copyright ownership.  The ASF licenses this file
+# to you under the Apache License, Version 2.0 (the
+# "License"); you may not use this file except in compliance
+# with the License.  You may obtain a copy of the License at
+#
+#   http://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing,
+# software distributed under the License is distributed on an
+# "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+# KIND, either express or implied.  See the License for the
+# specific language governing permissions and limitations
+# under the License.
+"""Add published column to dashboards
+
+Revision ID: d6ffdf31bdd4
+Revises: 45e7da7cfeba
+Create Date: 2018-03-30 14:00:44.929483
+
+"""
+
+# revision identifiers, used by Alembic.
+revision = 'd6ffdf31bdd4'
+down_revision = 'd7c1a0d6f2da'
+
+from alembic import op
+import sqlalchemy as sa
+
+
+def upgrade():
+    op.add_column('dashboards', sa.Column('published', sa.Boolean(), nullable=True))
+
+
+def downgrade():
+    op.drop_column('dashboards', 'published')

superset/models/core.py

@@ -409,6 +409,7 @@ class Dashboard(Model, AuditMixinNullable, ImportMixin):
     slices = relationship(
         'Slice', secondary=dashboard_slices, backref='dashboards')
     owners = relationship(security_manager.user_model, secondary=dashboard_user)
+    published = Column(Boolean, default=False)
 
     export_fields = ('dashboard_title', 'position_json', 'json_metadata',
                      'description', 'css', 'slug')
@@ -467,6 +468,7 @@ def data(self):
             'metadata': self.params_dict,
             'css': self.css,
             'dashboard_title': self.dashboard_title,
+            'published': self.published,
             'slug': self.slug,
             'slices': [slc.data for slc in self.slices],
             'position_json': positions,