[Maps] remove toasts for layer add and layer load error (#30584)

* [Maps] remove toasts for layer add and layer load error

* remove side-effects of LAYER_DATA_LOAD_ERROR action

* more cleanup

x-pack/plugins/maps/public/actions/store_actions.js

@@ -107,11 +107,11 @@ export function addLayer(layerDescriptor) {
   };
 }
 
-export function setLayerErrorStatus(id, errorMessage) {
+export function setLayerErrorStatus(layerId, errorMessage) {
   return dispatch => {
     dispatch({
       type: SET_LAYER_ERROR_STATUS,
-      layerId: id,
+      layerId,
       errorMessage,
     });
   };
@@ -318,13 +318,16 @@ export function endDataLoad(layerId, dataId, requestToken, data, meta) {
 }
 
 export function onDataLoadError(layerId, dataId, requestToken, errorMessage) {
-  return ({
-    type: LAYER_DATA_LOAD_ERROR,
-    layerId,
-    dataId,
-    requestToken,
-    errorMessage
-  });
+  return async (dispatch) => {
+    dispatch({
+      type: LAYER_DATA_LOAD_ERROR,
+      layerId,
+      dataId,
+      requestToken,
+    });
+
+    dispatch(setLayerErrorStatus(layerId, errorMessage));
+  };
 }
 
 export function updateSourceProp(layerId, propName, value) {

x-pack/plugins/maps/public/actions/ui_actions.js

@@ -1,13 +0,0 @@
-/*
- * 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.
- */
-
-export const RESET_LAYER_LOAD = 'RESET_LAYER_LOAD';
-
-export const resetLayerLoad = () => {
-  return {
-    type: RESET_LAYER_LOAD
-  };
-};

x-pack/plugins/maps/public/components/_index.scss

@@ -1,5 +1,4 @@
 @import './gis_map/gis_map';
 @import './layer_addpanel/layer_addpanel';
 @import './layer_panel/index';
-@import './toasts/toasts';
 @import './widget_overlay/index';

x-pack/plugins/maps/public/components/gis_map/view.js

@@ -10,7 +10,6 @@ import { WidgetOverlay } from '../widget_overlay/index';
 import { LayerPanel } from '../layer_panel/index';
 import { AddLayerPanel } from '../layer_addpanel/index';
 import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
-import { Toasts } from '../toasts';
 import { ExitFullScreenButton } from 'ui/exit_full_screen';
 
 export class GisMap extends Component {
@@ -99,7 +98,6 @@ export class GisMap extends Component {
           {currentPanel}
         </EuiFlexItem>
 
-        <Toasts/>
         {exitFullScreenButton}
       </EuiFlexGroup>
     );

x-pack/plugins/maps/public/components/toasts/_toasts.scss

@@ -1,4 +0,0 @@
-.mapLayerToast {
-  margin-top: -150px !important;
-  pointer-events: none;
-}

x-pack/plugins/maps/public/components/toasts/index.js

@@ -1,34 +0,0 @@
-/*
- * 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 { LAYER_LOAD_STATE } from '../../store/ui';
-import { Toasts } from './view';
-import { resetLayerLoad } from '../../actions/ui_actions';
-
-const layerLoadStatus = ({ ui }) => {
-  const toastStatuses = {
-    error: 'error',
-    success: 'success'
-  };
-  const { layerLoad } = ui;
-  return layerLoad.status === LAYER_LOAD_STATE.complete && toastStatuses.success ||
-    layerLoad.status === LAYER_LOAD_STATE.error && toastStatuses.error;
-};
-
-function mapStateToProps(state = {}) {
-  return {
-    layerLoadToast: layerLoadStatus(state)
-  };
-}
-function mapDispatchToProps(dispatch) {
-  return {
-    clearLayerLoadToast: () => dispatch(resetLayerLoad())
-  };
-}
-
-const connectedToast = connect(mapStateToProps, mapDispatchToProps)(Toasts);
-export { connectedToast as Toasts };

x-pack/plugins/maps/public/components/toasts/view.js

@@ -1,24 +0,0 @@
-/*
- * 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 { toastNotifications } from 'ui/notify';
-
-export function Toasts({ layerLoadToast, clearLayerLoadToast }) {
-  if (layerLoadToast === 'success') {
-    toastNotifications.add({
-      title: 'Layer added',
-      className: 'mapLayerToast'
-    }) && clearLayerLoadToast();
-  } else if (layerLoadToast === 'error') {
-    toastNotifications.addDanger({
-      title: 'Error adding layer',
-      className: 'mapLayerToast'
-    }) && clearLayerLoadToast();
-  } else {
-    // Do nothing
-  }
-  return null; // renderless component
-}

x-pack/plugins/maps/public/store/map.js

@@ -128,13 +128,29 @@ export function map(state = INITIAL_STATE, action) {
         ...state,
         goto: null,
       };
+    case SET_LAYER_ERROR_STATUS:
+      const { layerList } = state;
+      const layerIdx = getLayerIndex(layerList, action.layerId);
+      if (layerIdx === -1) {
+        return state;
+      }
+
+      return {
+        ...state,
+        layerList: [
+          ...layerList.slice(0, layerIdx),
+          {
+            ...layerList[layerIdx],
+            __isInErrorState: true,
+            __errorMessage: action.errorMessage
+          },
+          ...layerList.slice(layerIdx + 1)
+        ]
+      };
     case LAYER_DATA_LOAD_STARTED:
       return updateWithDataRequest(state, action);
-    case SET_LAYER_ERROR_STATUS:
-      return setErrorStatus(state, action);
     case LAYER_DATA_LOAD_ERROR:
-      const errorRequestResetState = resetDataRequest(state, action);
-      return setErrorStatus(errorRequestResetState, action);
+      return resetDataRequest(state, action);
     case LAYER_DATA_LOAD_ENDED:
       return updateWithDataResponse(state, action);
     case TOUCH_LAYER:
@@ -268,15 +284,6 @@ export function map(state = INITIAL_STATE, action) {
   }
 }
 
-function setErrorStatus(state, { layerId, errorMessage }) {
-  const tmsErrorLayer = state.layerList.find(({ id }) => id === layerId);
-  return tmsErrorLayer
-    ? updateLayerInList(
-      updateLayerInList(state, tmsErrorLayer.id, '__isInErrorState', true),
-      tmsErrorLayer.id, '__errorMessage', errorMessage)
-    : state;
-}
-
 function findDataRequest(layerDescriptor, dataRequestAction) {
 
   if (!layerDescriptor.__dataRequests) {

x-pack/plugins/maps/public/store/ui.js

@@ -4,9 +4,6 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 import _ from 'lodash';
-import { PROMOTE_TEMPORARY_LAYERS, LAYER_DATA_LOAD_ERROR }
-  from '../actions/store_actions';
-import { RESET_LAYER_LOAD } from '../actions/ui_actions';
 
 export const UPDATE_FLYOUT = 'UPDATE_FLYOUT';
 export const CLOSE_SET_VIEW = 'CLOSE_SET_VIEW';
@@ -17,33 +14,15 @@ export const FLYOUT_STATE = {
   LAYER_PANEL: 'LAYER_PANEL',
   ADD_LAYER_WIZARD: 'ADD_LAYER_WIZARD'
 };
-export const LAYER_LOAD_STATE = {
-  complete: 'complete',
-  error: 'error',
-  inactive: 'inactive'
-};
 
 const INITIAL_STATE = {
   flyoutDisplay: FLYOUT_STATE.NONE,
-  layerLoad: {
-    status: LAYER_LOAD_STATE.inactive,
-    time: Date()
-  },
   isFullScreen: false,
 };
 
 // Reducer
 function ui(state = INITIAL_STATE, action) {
   switch (action.type) {
-    case PROMOTE_TEMPORARY_LAYERS:
-      return { ...state, layerLoad: { status: LAYER_LOAD_STATE.complete,
-        time: Date() } };
-    case LAYER_DATA_LOAD_ERROR:
-      return { ...state, layerLoad: { status: LAYER_LOAD_STATE.error,
-        time: Date() } };
-    case RESET_LAYER_LOAD:
-      return { ...state, layerLoad: { status: LAYER_LOAD_STATE.inactive,
-        time: Date() } };
     case UPDATE_FLYOUT:
       return { ...state, flyoutDisplay: action.display };
     case CLOSE_SET_VIEW: