Add "Published" feature to dashboards (#4725)

* Allow users to publish dashboards * Rework publish dashboards feature - The eye next to the title has been replaced with a [draft] badge - Published status is now toggled in the Header Action Dropdown - CRUD list shows published status * Fix linter errors * Update javascript tests * Add tests and change DashboardFilter Add some tests to make sure the published status is rendered and Make it so that users cannot see dashboards that are published if they don't have access to any of the slices within * Fix some linter errors * Remove commas from core.py * Fix some failing tests * More linter errors I introduced * Fix more linter errors I introduced * update alembic migration * Update design of publish dash feature * Upgrade migration version * Secure publish endpoint * Remove bad quotes * Give publish span its own style * fix publish rendering * Add new test for publish feature * Update migration * update slug in test * Update migration * Address reviwer comments * Fix linter errors * Add licenses * Remove fetchPublished(), use bootstrap data * Update migration * Update croniter to existing version * Fix linter errors * Upgrade DB Revisions * Fix flake8 linter error * Set all dashboards to published on migration * Migration proper line spacing * Fix migration to work with postgres * UPDATE statement works with postgresql and sqlite hopefully * Update wording to kick off travis
apache · Jul 11, 2019 · 97ffb76 · 97ffb76
1 parent 8d81c30
commit 97ffb76
Show file tree

Hide file tree

Showing 13 changed files with 430 additions and 22 deletions.
diff --git a/superset/assets/spec/javascripts/dashboard/components/Header_spec.jsx b/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);

diff --git a/superset/assets/src/dashboard/actions/dashboardState.js b/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 };

diff --git a/superset/assets/src/dashboard/components/Header.jsx b/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}

diff --git a/superset/assets/src/dashboard/components/PublishedStatus.jsx b/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, 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;
diff --git a/superset/assets/src/dashboard/containers/DashboardHeader.jsx b/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,

diff --git a/superset/assets/src/dashboard/reducers/dashboardState.js b/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,

diff --git a/superset/assets/src/dashboard/reducers/getInitialState.js b/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

diff --git a/superset/assets/src/dashboard/stylesheets/dashboard.less b/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 {

diff --git a/superset/assets/src/dashboard/util/propShapes.jsx b/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,

diff --git a/superset/migrations/versions/d6ffdf31bdd4_add_published_column_to_dashboards.py b/superset/migrations/versions/d6ffdf31bdd4_add_published_column_to_dashboards.py
@@ -0,0 +1,41 @@
+# 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():
+    with op.batch_alter_table("dashboards") as batch_op:
+        batch_op.add_column(sa.Column("published", sa.Boolean(), nullable=True))
+    op.execute("UPDATE dashboards SET published='1'")
+
+
+def downgrade():
+    with op.batch_alter_table("dashboards") as batch_op:
+        batch_op.drop_column("published")
diff --git a/superset/models/core.py b/superset/models/core.py
@@ -420,6 +420,7 @@ class Dashboard(Model, AuditMixinNullable, ImportMixin):
     slug = Column(String(255), unique=True)
     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",
@@ -484,6 +485,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,