Fix 'workpad flash' when loading new workpad

x-pack/legacy/plugins/canvas/public/apps/home/home_app.js → x-pack/legacy/plugins/canvas/public/apps/home/home_app/home_app.js

@@ -6,10 +6,11 @@
 
 import React from 'react';
 import { EuiPage, EuiPageBody, EuiPageContent } from '@elastic/eui';
-import { WorkpadManager } from '../../components/workpad_manager';
-import { setDocTitle } from '../../lib/doc_title';
+import { WorkpadManager } from '../../../components/workpad_manager';
+import { setDocTitle } from '../../../lib/doc_title';
 
-export const HomeApp = () => {
+export const HomeApp = ({ onLoad = () => {} }) => {
+  onLoad();
   setDocTitle('Canvas');
   return (
     <EuiPage className="canvasHomeApp" restrictWidth>

x-pack/legacy/plugins/canvas/public/apps/home/home_app/index.js

@@ -0,0 +1,20 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { connect } from 'react-redux';
+import { resetWorkpad } from '../../../state/actions/workpad';
+import { HomeApp as Component } from './home_app';
+
+const mapDispatchToProps = dispatch => ({
+  onLoad() {
+    dispatch(resetWorkpad());
+  },
+});
+
+export const HomeApp = connect(
+  null,
+  mapDispatchToProps
+)(Component);

x-pack/legacy/plugins/canvas/public/state/actions/workpad.js

@@ -18,6 +18,7 @@ export const setRefreshInterval = createAction('setRefreshInterval');
 export const setWorkpadCSS = createAction('setWorkpadCSS');
 export const enableAutoplay = createAction('enableAutoplay');
 export const setAutoplayInterval = createAction('setAutoplayInterval');
+export const resetWorkpad = createAction('resetWorkpad');
 
 export const initializeWorkpad = createThunk('initializeWorkpad', ({ dispatch }) => {
   dispatch(fetchAllRenderables());

x-pack/legacy/plugins/canvas/public/state/middleware/es_persist.js

@@ -7,7 +7,8 @@
 import { isEqual } from 'lodash';
 import { getWorkpad, getFullWorkpadPersisted, getWorkpadPersisted } from '../selectors/workpad';
 import { getAssetIds } from '../selectors/assets';
-import { setWorkpad, setRefreshInterval } from '../actions/workpad';
+import { appReady } from '../actions/app';
+import { setWorkpad, setRefreshInterval, resetWorkpad } from '../actions/workpad';
 import { setAssets, resetAssets } from '../actions/assets';
 import * as transientActions from '../actions/transient';
 import * as resolvedArgsActions from '../actions/resolved_args';
@@ -28,6 +29,8 @@ const assetsChanged = (before, after) => {
 export const esPersistMiddleware = ({ getState }) => {
   // these are the actions we don't want to trigger a persist call
   const skippedActions = [
+    appReady, // there's no need to resave the workpad once we've loaded it.
+    resetWorkpad, // used for resetting the workpad in state
     setWorkpad, // used for loading and creating workpads
     setAssets, // used when loading assets
     resetAssets, // used when creating new workpads

x-pack/legacy/plugins/canvas/public/state/reducers/workpad.js

@@ -6,13 +6,15 @@
 
 import { handleActions } from 'redux-actions';
 import { recentlyAccessed } from 'ui/persisted_log';
+import { getDefaultWorkpad } from '../defaults';
 import {
   setWorkpad,
   sizeWorkpad,
   setColors,
   setName,
   setWriteable,
   setWorkpadCSS,
+  resetWorkpad,
 } from '../actions/workpad';
 
 import { APP_ROUTE_WORKPAD } from '../../../common/lib/constants';
@@ -44,6 +46,8 @@ export const workpadReducer = handleActions(
     [setWorkpadCSS]: (workpadState, { payload }) => {
       return { ...workpadState, css: payload };
     },
+
+    [resetWorkpad]: () => ({ ...getDefaultWorkpad() }),
   },
   {}
 );

x-pack/legacy/plugins/canvas/public/style/index.scss

@@ -5,7 +5,7 @@
 @import 'main';
 
 // Canvas apps
-@import '../apps/home/home_app';
+@import '../apps/home/home_app/home_app';
 @import '../apps/workpad/workpad_app/workpad_app';
 @import '../apps/export/export/export_app';