[dashboard v2] add v1 switch

superset/assets/.eslintignore

@@ -8,3 +8,4 @@ node_modules*/*
 stylesheets/*
 vendor/*
 docs/*
+src/dashboard/deprecated/*

superset/assets/package.json

@@ -8,8 +8,8 @@
     "test": "spec"
   },
   "scripts": {
-    "test": "mocha --require ignore-styles --compilers js:babel-core/register --require spec/helpers/browser.js --recursive spec/**/**/*_spec.*",
-    "cover": "babel-node node_modules/.bin/babel-istanbul cover _mocha -- --require ignore-styles spec/helpers/browser.js --recursive spec/**/*_spec.*",
+    "test": "mocha --require ignore-styles --compilers js:babel-core/register --require spec/helpers/browser.js 'spec/**/*_spec.*'",
+    "cover": "babel-node node_modules/.bin/babel-istanbul cover _mocha -- --require ignore-styles spec/helpers/browser.js 'spec/**/*_spec.*'",
     "dev": "NODE_ENV=dev webpack --watch --colors --progress --debug --output-pathinfo --devtool eval-cheap-source-map",
     "dev-slow": "NODE_ENV=dev webpack --watch --colors --progress --debug --output-pathinfo --devtool inline-source-map",
     "dev-fast": "echo 'dev-fast in now replaced by dev'",
@@ -92,12 +92,14 @@
     "react-alert": "^2.3.0",
     "react-bootstrap": "^0.31.5",
     "react-bootstrap-slider": "2.0.1",
+    "react-bootstrap-table": "^4.0.2",
     "react-color": "^2.13.8",
     "react-datetime": "2.9.0",
     "react-dnd": "^2.5.4",
     "react-dnd-html5-backend": "^2.5.4",
     "react-dom": "^15.6.2",
     "react-gravatar": "^2.6.1",
+    "react-grid-layout": "0.16.5",
     "react-map-gl": "^3.0.4",
     "react-markdown": "^3.3.0",
     "react-redux": "^5.0.2",

superset/assets/spec/javascripts/dashboard/actions/dashboardLayout_spec.js

@@ -138,7 +138,6 @@ describe('dashboardLayout actions', () => {
     });
   });
 
-  // describe('createComponent', () => {});
   describe('createTopLevelTabs', () => {
     it('should dispatch a createTopLevelTabs action', () => {
       const { getState, dispatch } = setup({
@@ -282,7 +281,7 @@ describe('dashboardLayout actions', () => {
 
     it('should move a component if the component is not new', () => {
       const { getState, dispatch } = setup({
-        dashboardLayout: { present: { id: { type: ROW_TYPE } } },
+        dashboardLayout: { present: { id: { type: ROW_TYPE, children: [] } } },
       });
       const dropResult = {
         source: { id: 'id', index: 0, type: ROW_TYPE },
@@ -324,7 +323,7 @@ describe('dashboardLayout actions', () => {
       );
     });
 
-    it('should delete the parent Tabs if the moved Tab was the only child', () => {
+    it('should delete a parent Row or Tabs if the moved child was the only child', () => {
       const { getState, dispatch } = setup({
         dashboardLayout: {
           present: {

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

@@ -13,8 +13,7 @@ import DashboardBuilder from '../../../../src/dashboard/components/DashboardBuil
 import DashboardComponent from '../../../../src/dashboard/containers/DashboardComponent';
 import DashboardHeader from '../../../../src/dashboard/containers/DashboardHeader';
 import DashboardGrid from '../../../../src/dashboard/containers/DashboardGrid';
-import DragDroppable from '../../../../src/dashboard/components/dnd/DragDroppable';
-
+import WithDragDropContext from '../helpers/WithDragDropContext';
 import {
   dashboardLayout as undoableDashboardLayout,
   dashboardLayoutWithTabs as undoableDashboardLayoutWithTabs,
@@ -32,12 +31,17 @@ describe('DashboardBuilder', () => {
     editMode: false,
     showBuilderPane: false,
     handleComponentDrop() {},
+    toggleBuilderPane() {},
   };
 
   function setup(overrideProps, useProvider = false, store = mockStore) {
     const builder = <DashboardBuilder {...props} {...overrideProps} />;
     return useProvider
-      ? mount(<Provider store={store}>{builder}</Provider>)
+      ? mount(
+          <Provider store={store}>
+            <WithDragDropContext>{builder}</WithDragDropContext>
+          </Provider>,
+        )
       : shallow(builder);
   }
 
@@ -56,23 +60,11 @@ describe('DashboardBuilder', () => {
     );
   });
 
-  it('should render a DashboardHeader', () => {
-    const wrapper = setup();
+  it('should render a DragDroppable DashboardHeader', () => {
+    const wrapper = setup(null, true);
     expect(wrapper.find(DashboardHeader)).to.have.length(1);
   });
 
-  it('should render a DragDroppable DashboardHeader if editMode=true and no top-level Tabs exist', () => {
-    const withoutTabs = setup();
-    const withoutTabsEditMode = setup({ editMode: true });
-    const withTabs = setup({
-      dashboardLayout: layoutWithTabs,
-    });
-
-    expect(withoutTabs.find(DragDroppable)).to.have.length(0);
-    expect(withoutTabsEditMode.find(DragDroppable)).to.have.length(1);
-    expect(withTabs.find(DragDroppable)).to.have.length(0);
-  });
-
   it('should render a Sticky top-level Tabs if the dashboard has tabs', () => {
     const wrapper = setup(
       { dashboardLayout: layoutWithTabs },

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

@@ -42,9 +42,14 @@ describe('DashboardGrid', () => {
     expect(wrapper.find(DashboardComponent)).to.have.length(2);
   });
 
-  it('should render two empty DragDroppables targets when editMode=true', () => {
-    const wrapper = setup({ editMode: true });
-    expect(wrapper.find(DragDroppable)).to.have.length(2);
+  it('should render an empty DragDroppables target when the gridComponent has no children', () => {
+    const withChildren = setup({ editMode: true });
+    const withoutChildren = setup({
+      editMode: true,
+      gridComponent: { ...props.gridComponent, children: [] },
+    });
+    expect(withChildren.find(DragDroppable)).to.have.length(0);
+    expect(withoutChildren.find(DragDroppable)).to.have.length(1);
   });
 
   it('should render grid column guides when resizing', () => {

superset/assets/spec/javascripts/dashboard/fixtures/mockDashboardState.js

@@ -10,4 +10,6 @@ export default {
   hasUnsavedChanges: false,
   maxUndoHistoryExceeded: false,
   isStarred: true,
+  css: '',
+  isV2Preview: false, // @TODO remove upon v1 deprecation
 };

superset/assets/spec/javascripts/dashboard/reducers/dashboardLayout_spec.js

@@ -14,7 +14,6 @@ import {
 
 import {
   CHART_TYPE,
-  COLUMN_TYPE,
   DASHBOARD_GRID_TYPE,
   DASHBOARD_ROOT_TYPE,
   ROW_TYPE,
@@ -25,7 +24,6 @@ import {
 import {
   DASHBOARD_ROOT_ID,
   DASHBOARD_GRID_ID,
-  GRID_MIN_COLUMN_COUNT,
   NEW_COMPONENTS_SOURCE_ID,
   NEW_TABS_ID,
   NEW_ROW_ID,
@@ -54,6 +52,7 @@ describe('dashboardLayout reducer', () => {
           },
           parentId: {
             id: 'parentId',
+            type: ROW_TYPE,
             children: ['toDelete', 'anotherId'],
           },
         },
@@ -66,6 +65,42 @@ describe('dashboardLayout reducer', () => {
       parentId: {
         id: 'parentId',
         children: ['anotherId'],
+        type: ROW_TYPE,
+      },
+    });
+  });
+
+  it('should delete a parent if the parent was a row and no longer has children', () => {
+    expect(
+      layoutReducer(
+        {
+          grandparentId: {
+            id: 'grandparentId',
+            children: ['parentId'],
+          },
+          parentId: {
+            id: 'parentId',
+            type: ROW_TYPE,
+            children: ['toDelete'],
+          },
+          toDelete: {
+            id: 'toDelete',
+            children: ['child1'],
+          },
+          child1: {
+            id: 'child1',
+            children: [],
+          },
+        },
+        {
+          type: DELETE_COMPONENT,
+          payload: { id: 'toDelete', parentId: 'parentId' },
+        },
+      ),
+    ).to.deep.equal({
+      grandparentId: {
+        id: 'grandparentId',
+        children: [],
       },
     });
   });
@@ -170,41 +205,6 @@ describe('dashboardLayout reducer', () => {
     });
   });
 
-  it('should set the width of a moved component with column type parent to the minimum width', () => {
-    const layout = {
-      source: {
-        id: 'source',
-        type: ROW_TYPE,
-        children: ['dontMove', 'toMove'],
-      },
-      destination: {
-        id: 'destination',
-        type: COLUMN_TYPE,
-        children: [],
-        meta: { width: 100 },
-      },
-      toMove: {
-        id: 'toMove',
-        type: CHART_TYPE,
-        children: [],
-        meta: { width: 1001 },
-      },
-    };
-
-    const dropResult = {
-      source: { id: 'source', type: ROW_TYPE, index: 1 },
-      destination: { id: 'destination', type: COLUMN_TYPE, index: 0 },
-      dragging: { id: 'toMove', type: CHART_TYPE },
-    };
-
-    const result = layoutReducer(layout, {
-      type: MOVE_COMPONENT,
-      payload: { dropResult },
-    });
-
-    expect(result.toMove.meta.width).to.equal(GRID_MIN_COLUMN_COUNT);
-  });
-
   it('should wrap a moved component in a row if need be', () => {
     const layout = {
       source: {

superset/assets/spec/javascripts/dashboard/reducers/dashboardState_spec.js

@@ -128,12 +128,14 @@ describe('dashboardState reducer', () => {
     });
   });
 
-  it('should set unsaved changes and max undo history to false on save', () => {
+  it('should set unsaved changes, max undo history, and editMode to false on save', () => {
     expect(
       dashboardStateReducer({ hasUnsavedChanges: true }, { type: ON_SAVE }),
     ).to.deep.equal({
       hasUnsavedChanges: false,
       maxUndoHistoryExceeded: false,
+      editMode: false,
+      isV2Preview: false, // @TODO remove upon v1 deprecation
     });
   });
 

superset/assets/spec/javascripts/dashboard/util/isValidChild_spec.js

@@ -108,7 +108,7 @@ describe('isValidChild', () => {
       [ROOT, [MARKDOWN]],
       [ROOT, GRID, [TAB]],
       [ROOT, GRID, TABS, [ROW]],
-      [ROOT, GRID, TABS, TAB, [TABS]],
+      // [ROOT, GRID, TABS, TAB, [TABS]], // @TODO this needs to be fixed
       [ROOT, GRID, ROW, [TABS]],
       [ROOT, GRID, ROW, [TAB]],
       [ROOT, GRID, ROW, [DIVIDER]],

superset/assets/src/chart/Chart.jsx

@@ -190,8 +190,8 @@ class Chart extends React.PureComponent {
         this.props.actions.chartRenderingSucceeded(chartId);
       }
       Logger.append(LOG_ACTIONS_RENDER_CHART, {
-        label: 'slice_' + chartId,
-        vis_type: vizType,
+        slice_id: 'slice_' + chartId,
+        viz_type: vizType,
         start_offset: renderStart,
         duration: Logger.getTimestamp() - renderStart,
       });

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

@@ -2,7 +2,12 @@ import { ActionCreators as UndoActionCreators } from 'redux-undo';
 
 import { addInfoToast } from './messageToasts';
 import { setUnsavedChanges } from './dashboardState';
-import { CHART_TYPE, MARKDOWN_TYPE, TABS_TYPE } from '../util/componentTypes';
+import {
+  CHART_TYPE,
+  MARKDOWN_TYPE,
+  TABS_TYPE,
+  ROW_TYPE,
+} from '../util/componentTypes';
 import {
   DASHBOARD_ROOT_ID,
   NEW_COMPONENTS_SOURCE_ID,
@@ -155,8 +160,7 @@ export function handleComponentDrop(dropResult) {
     if (overflowsParent) {
       return dispatch(
         addInfoToast(
-          `Parent does not have enough space for this component.
-         Try decreasing its width or add it to a new row.`,
+          `Parent does not have enough space for this component. Try decreasing its width or add it to a new row.`,
         ),
       );
     }
@@ -180,12 +184,13 @@ export function handleComponentDrop(dropResult) {
 
     const { dashboardLayout: undoableLayout } = getState();
 
-    // if we moved a Tab and the parent Tabs no longer has children, delete it.
+    // if we moved a child from a Tab or Row parent and it was the only child, delete the parent.
     if (!isNewComponent) {
       const { present: layout } = undoableLayout;
       const sourceComponent = layout[source.id];
       if (
-        sourceComponent.type === TABS_TYPE &&
+        (sourceComponent.type === TABS_TYPE ||
+          sourceComponent.type === ROW_TYPE) &&
         sourceComponent.children.length === 0
       ) {
         const parentId = findParentId({

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

@@ -12,13 +12,14 @@ function getToastUuid(type) {
 }
 
 export const ADD_TOAST = 'ADD_TOAST';
-export function addToast({ toastType, text }) {
+export function addToast({ toastType, text, duration }) {
   return {
     type: ADD_TOAST,
     payload: {
       id: getToastUuid(toastType),
       toastType,
       text,
+      duration,
     },
   };
 }
@@ -36,17 +37,20 @@ export function removeToast(id) {
 // Different types of toasts
 export const ADD_INFO_TOAST = 'ADD_INFO_TOAST';
 export function addInfoToast(text) {
-  return dispatch => dispatch(addToast({ text, toastType: INFO_TOAST }));
+  return dispatch =>
+    dispatch(addToast({ text, toastType: INFO_TOAST, duration: 4000 }));
 }
 
 export const ADD_SUCCESS_TOAST = 'ADD_SUCCESS_TOAST';
 export function addSuccessToast(text) {
-  return dispatch => dispatch(addToast({ text, toastType: SUCCESS_TOAST }));
+  return dispatch =>
+    dispatch(addToast({ text, toastType: SUCCESS_TOAST, duration: 4000 }));
 }
 
 export const ADD_WARNING_TOAST = 'ADD_WARNING_TOAST';
 export function addWarningToast(text) {
-  return dispatch => dispatch(addToast({ text, toastType: WARNING_TOAST }));
+  return dispatch =>
+    dispatch(addToast({ text, toastType: WARNING_TOAST, duration: 4000 }));
 }
 
 export const ADD_DANGER_TOAST = 'ADD_DANGER_TOAST';

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

@@ -1,6 +1,7 @@
 import cx from 'classnames';
 import React from 'react';
 import PropTypes from 'prop-types';
+import { t } from '../../locales';
 
 const propTypes = {
   datasourceLink: PropTypes.string,
@@ -49,6 +50,7 @@ function AddSliceCard({
           </div>
         </div>
       </div>
+      {isSelected && <div className="is-added-label">{t('Added')}</div>}
     </div>
   );
 }