[Maps] Design updates for draw shape mode and timeslider

x-pack/plugins/maps/public/_animations.scss

@@ -0,0 +1,39 @@
+@keyframes headShake {
+  0% {
+    transform: translateX(0);
+  }
+
+  6.5% {
+    transform: translateX(-6px) rotateY(-9deg);
+  }
+
+  18.5% {
+    transform: translateX(5px) rotateY(7deg);
+  }
+
+  31.5% {
+    transform: translateX(-3px) rotateY(-5deg);
+  }
+
+  43.5% {
+    transform: translateX(2px) rotateY(3deg);
+  }
+
+  50% {
+    transform: translateX(0);
+  }
+}
+
+@keyframes pulse {
+  from {
+    transform: scale3d(1, 1, 1);
+  }
+
+  50% {
+    transform: scale3d(1.005, 1.005, 1.005);
+  }
+
+  to {
+    transform: scale3d(1, 1, 1);
+  }
+}

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

@@ -13,3 +13,4 @@
 @import 'connected_components/index';
 @import 'components/index';
 @import 'classes/index';
+@import 'animations';

x-pack/plugins/maps/public/actions/layer_actions.ts

@@ -256,9 +256,10 @@ export function setSelectedLayer(layerId: string | null) {
     }
     if (layerId) {
       dispatch(trackCurrentLayerState(layerId));
-    }
-    if (getDrawMode(getState()) !== DRAW_MODE.NONE) {
-      dispatch(setDrawMode(DRAW_MODE.NONE));
+      // Reset draw mode only if setting a new selected layer
+      if (getDrawMode(getState()) !== DRAW_MODE.NONE) {
+        dispatch(setDrawMode(DRAW_MODE.NONE));
+      }
     }
     dispatch({
       type: SET_SELECTED_LAYER,

x-pack/plugins/maps/public/actions/map_actions.ts

@@ -26,7 +26,7 @@ import {
   getSearchSessionId,
   getSearchSessionMapBuffer,
   getLayerById,
-  getEditState,
+  getEditState, getSelectedLayerId,
 } from '../selectors/map_selectors';
 import {
   CLEAR_GOTO,
@@ -342,6 +342,19 @@ export function updateEditShape(shapeToDraw: DRAW_SHAPE | null) {
   };
 }
 
+export function setSelectedLayerToEditLayer() {
+  return async (
+    dispatch: ThunkDispatch<MapStoreState, void, AnyAction>,
+    getState: () => MapStoreState
+  ) => {
+    const layerId = getSelectedLayerId(getState());
+    if (!layerId) {
+      return;
+    }
+    dispatch(updateEditLayer(layerId));
+  };
+}
+
 export function updateEditLayer(layerId: string | null) {
   return (dispatch: Dispatch) => {
     if (layerId !== null) {

x-pack/plugins/maps/public/classes/layers/layer_wizard_registry.ts

@@ -37,6 +37,7 @@ export type LayerWizard = {
   prerequisiteSteps?: Array<{ id: string; label: string }>;
   renderWizard(renderWizardArguments: RenderWizardArguments): ReactElement<any>;
   title: string;
+  showFeatureEditTools?: boolean;
 };
 
 export type LayerWizardWithMeta = LayerWizard & {

x-pack/plugins/maps/public/classes/layers/new_vector_layer_wizard/config.tsx

@@ -43,6 +43,7 @@ export const newVectorLayerWizardConfig: LayerWizard = {
   renderWizard: (renderWizardArguments: RenderWizardArguments) => {
     return <NewVectorLayerEditor {...renderWizardArguments} />;
   },
+  showFeatureEditTools: true,
   title: i18n.translate('xpack.maps.newVectorLayerWizard.title', {
     defaultMessage: 'Create new layer',
   }),

x-pack/plugins/maps/public/components/tooltip_selector/add_tooltip_field_popover.tsx

@@ -164,14 +164,14 @@ export class AddTooltipFieldPopover extends Component<Props, State> {
         >
           {(list, search) => (
             <div style={{ width: '300px' }}>
-              <EuiPopoverTitle>{search}</EuiPopoverTitle>
+              <EuiPopoverTitle paddingSize="s">{search}</EuiPopoverTitle>
               {list}
             </div>
           )}
         </EuiSelectable>
 
         <EuiSpacer size="xs" />
-        <EuiPopoverFooter>
+        <EuiPopoverFooter paddingSize="s">
           <EuiTextAlign textAlign="right">
             <EuiButton
               fill

x-pack/plugins/maps/public/connected_components/add_layer_panel/index.ts

@@ -14,12 +14,15 @@ import {
   addPreviewLayers,
   promotePreviewLayers,
   removePreviewLayers,
+  setDrawMode,
   setFirstPreviewLayerToSelectedLayer,
+  setSelectedLayerToEditLayer,
   updateFlyout,
 } from '../../actions';
 import { MapStoreState } from '../../reducers/store';
 import { LayerDescriptor } from '../../../common/descriptor_types';
 import { hasPreviewLayers, isLoadingPreviewLayers } from '../../selectors/map_selectors';
+import { DRAW_MODE } from '../../../common';
 
 function mapStateToProps(state: MapStoreState) {
   return {
@@ -42,6 +45,10 @@ function mapDispatchToProps(dispatch: ThunkDispatch<MapStoreState, void, AnyActi
       dispatch(updateFlyout(FLYOUT_STATE.NONE));
       dispatch(removePreviewLayers());
     },
+    enableEditMode: () => {
+      dispatch(setSelectedLayerToEditLayer());
+      dispatch(setDrawMode(DRAW_MODE.DRAW_SHAPES));
+    },
   };
 }
 

x-pack/plugins/maps/public/connected_components/add_layer_panel/view.tsx

@@ -33,6 +33,7 @@ export interface Props {
   hasPreviewLayers: boolean;
   isLoadingPreviewLayers: boolean;
   promotePreviewLayers: () => void;
+  enableEditMode: () => void;
 }
 
 interface State {
@@ -42,6 +43,7 @@ interface State {
   layerWizard: LayerWizard | null;
   isNextStepBtnEnabled: boolean;
   isStepLoading: boolean;
+  editModeEnabled: boolean;
 }
 
 const INITIAL_STATE: State = {
@@ -51,6 +53,7 @@ const INITIAL_STATE: State = {
   layerWizard: null,
   isNextStepBtnEnabled: false,
   isStepLoading: false,
+  editModeEnabled: false,
 };
 
 export class AddLayerPanel extends Component<Props, State> {
@@ -80,6 +83,7 @@ export class AddLayerPanel extends Component<Props, State> {
       layerWizard,
       layerSteps,
       currentStep: layerSteps[0],
+      editModeEnabled: !!layerWizard.showFeatureEditTools,
     });
   };
 
@@ -91,6 +95,9 @@ export class AddLayerPanel extends Component<Props, State> {
     if (this.state.layerSteps.length - 1 === this.state.currentStepIndex) {
       // last step
       this.props.promotePreviewLayers();
+      if (this.state.editModeEnabled) {
+        this.props.enableEditMode();
+      }
     } else {
       this.setState((prevState) => {
         const nextIndex = prevState.currentStepIndex + 1;

x-pack/plugins/maps/public/connected_components/right_side_controls/layer_control/layer_toc/toc_entry/_toc_entry.scss

@@ -32,6 +32,10 @@
 
 .mapTocEntry-isInEditingMode {
   background-color: tintOrShade($euiColorPrimary, 90%, 70%) !important;
+
+  &__row {
+    margin-left: $euiSizeL;
+  }
 }
 
 .mapTocEntry-isDragging {

x-pack/plugins/maps/public/connected_components/right_side_controls/layer_control/layer_toc/toc_entry/index.ts

@@ -29,7 +29,9 @@ import {
   hideTOCDetails,
   showTOCDetails,
   toggleLayerVisible,
+  setDrawMode,
 } from '../../../../../actions';
+import { DRAW_MODE } from '../../../../../../common';
 
 function mapStateToProps(state: MapStoreState, ownProps: OwnProps): ReduxStateProps {
   const flyoutDisplay = getFlyoutDisplay(state);
@@ -63,6 +65,9 @@ function mapDispatchToProps(dispatch: ThunkDispatch<MapStoreState, void, AnyActi
     toggleVisible: (layerId: string) => {
       dispatch(toggleLayerVisible(layerId));
     },
+    cancelEditing: () => {
+      dispatch(setDrawMode(DRAW_MODE.NONE));
+    },
   };
 }
 

x-pack/plugins/maps/public/connected_components/right_side_controls/layer_control/layer_toc/toc_entry/toc_entry.tsx

@@ -8,8 +8,8 @@
 import React, { Component } from 'react';
 import classNames from 'classnames';
 import type { DraggableProvidedDragHandleProps } from 'react-beautiful-dnd';
-
-import { EuiIcon, EuiButtonIcon, EuiConfirmModal } from '@elastic/eui';
+import { FormattedMessage } from '@kbn/i18n/react';
+import { EuiIcon, EuiButtonIcon, EuiConfirmModal, EuiButtonEmpty } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { TOCEntryActionsPopover } from './toc_entry_actions_popover';
 import {
@@ -40,6 +40,7 @@ export interface ReduxDispatchProps {
   hideTOCDetails: (layerId: string) => void;
   showTOCDetails: (layerId: string) => void;
   toggleVisible: (layerId: string) => void;
+  cancelEditing: () => void;
 }
 
 export interface OwnProps {
@@ -332,6 +333,23 @@ export class TOCEntry extends Component<Props, State> {
         {this._renderDetailsToggle()}
 
         {this._renderCancelModal()}
+
+        {this.props.editModeActiveForLayer && (
+          <div className="mapTocEntry-isInEditingMode__row">
+            <EuiButtonEmpty
+              size="xs"
+              color="danger"
+              iconType="vector"
+              flush="left"
+              onClick={this.props.cancelEditing}
+            >
+              <FormattedMessage
+                id="xpack.maps.layerControl.tocEntry.exitEditModeAriaLabel"
+                defaultMessage="Exit feature editing"
+              />
+            </EuiButtonEmpty>
+          </div>
+        )}
       </div>
     );
   }

x-pack/plugins/maps/public/connected_components/timeslider/_index.scss

@@ -1,53 +1,17 @@
+$timesliderWidth: 585px;
+
 .mapTimeslider {
   @include euiBottomShadowLarge;
   position: fixed;
   left: 50%;
   bottom: $euiSize;
-  transform: translateX(-50%);
-  min-width: 530px;
+  // we could center with translateX but this would impact the animation
+  margin-left: -($timesliderWidth / 2);
+  width: $timesliderWidth;
   z-index: 99999;
   background: $euiColorEmptyShade;
-  padding: $euiSizeL $euiSizeXL;
+  padding: $euiSizeL $euiSize;
   border-radius: $euiSize;
-
-  .euiRangeTick {
-    overflow-x: hidden;
-    text-overflow: ellipsis;
-    font-size: $euiFontSizeXS;
-    position: relative;
-    padding-top: $euiSize;
-    color: $euiColorDarkShade;
-
-    &::before {
-      @include size($euiSizeXS);
-      width: 3px;
-      height: $euiSizeS;
-      content: '';
-      background-color: $euiColorLightShade;
-      position: absolute;
-      top: $euiSizeXS;
-      left: calc(50% - #{($euiSizeXS/2)});
-    }
-
-    &--isCustom {
-      position: absolute;
-      transform: translateX(-50%);
-    }
-
-    &:enabled:hover,
-    &:focus,
-    &--selected {
-      color: $euiColorPrimary;
-    }
-
-    &--selected {
-      font-weight: $euiFontWeightMedium;
-    }
-
-    &:disabled {
-      cursor: not-allowed;
-    }
-  }
 }
 
 .mapTimeslider__row {
@@ -60,6 +24,10 @@
   > * {
     align-items: center;
   }
+
+  &:first-child {
+    padding: 0 $euiSize;
+  }
 }
 
 .mapTimeslider__close {
@@ -77,6 +45,10 @@
 
 .mapTimeslider__controls {
   margin-left: $euiSizeS;
+
+  .euiButtonIcon + .euiButtonIcon {
+    margin-left: $euiSizeXS;
+  }
 }
 
 .mapTimeslider__innerPanel {
@@ -87,3 +59,11 @@
   display: inline-flex;
   align-items: center;
 }
+
+.mapTimeslider__playButton {
+  border-radius: 50%;
+}
+
+.mapTimeslider--animation {
+  animation: pulse .6s ease-in-out;
+}