[Maps] Design updates for draw shape mode and timeslider (elastic#103493

)

* Timeslider icons and styles

* Exit feature editing. Animations for toolbar and timeslider

* Removing unnecessary line

* Adding padding to tooltip field popover

* Adding pulse animation on open timeslider

* Adding isDraggable to timeslider

* More timeslider styles

* Better positioning of the exit edit mode button

* Enable edit mode when new vector layer added

* Review feedback. Update action name. Remove unneeded component state

* Minor updates. One more action for cancel. Type updates. Snapshot update

* fixing tests and eslint error

* Added new exit mode design. Renamed animations

* Features instead of feature to be consistent with popover

* fix type error

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
Co-authored-by: Aaron Caldwell <aaron.caldwell@elastic.co>

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

@@ -0,0 +1,39 @@
+@keyframes mapAnimationHeadShake {
+  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 mapAnimationPulse {
+  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

@@ -27,6 +27,7 @@ import {
   getSearchSessionMapBuffer,
   getLayerById,
   getEditState,
+  getSelectedLayerId,
 } from '../selectors/map_selectors';
 import {
   CLEAR_GOTO,
@@ -342,6 +343,19 @@ export function updateEditShape(shapeToDraw: DRAW_SHAPE | null) {
   };
 }
 
+export function setEditLayerToSelectedLayer() {
+  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

@@ -38,6 +38,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

@@ -45,6 +45,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,
+  setEditLayerToSelectedLayer,
   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(setEditLayerToSelectedLayer());
+      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 {
@@ -91,6 +92,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.layerWizard?.showFeatureEditTools) {
+        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,23 @@
 
 .mapTocEntry-isInEditingMode {
   background-color: tintOrShade($euiColorPrimary, 90%, 70%) !important;
+  font-size: $euiFontSizeXS;
+  font-weight: $euiFontWeightMedium;
+
+  &__row {
+    margin-left: $euiSizeL;
+    display: inline-flex;
+    align-items: center;
+
+    > * {
+      margin-right: $euiSizeXS;
+    }
+  }
+
+  &__editFeatureText {
+    line-height: 1;
+    padding-right: $euiSizeXS;
+  }
 }
 
 .mapTocEntry-isDragging {

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

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

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

@@ -63,6 +63,7 @@ const defaultProps = {
   hideTOCDetails: () => {},
   showTOCDetails: () => {},
   editModeActiveForLayer: false,
+  cancelEditing: () => {},
 };
 
 describe('TOCEntry', () => {

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,24 @@ export class TOCEntry extends Component<Props, State> {
         {this._renderDetailsToggle()}
 
         {this._renderCancelModal()}
+
+        {this.props.editModeActiveForLayer && (
+          <div className="mapTocEntry-isInEditingMode__row">
+            <EuiIcon type="vector" size="s" />
+            <span className="mapTocEntry-isInEditingMode__editFeatureText">
+              <FormattedMessage
+                id="xpack.maps.layerControl.tocEntry.EditFeatures"
+                defaultMessage="Edit features"
+              />
+            </span>
+            <EuiButtonEmpty size="xs" flush="both" onClick={this.props.cancelEditing}>
+              <FormattedMessage
+                id="xpack.maps.layerControl.tocEntry.exitEditModeAriaLabel"
+                defaultMessage="Exit"
+              />
+            </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: mapAnimationPulse .6s ease-in-out;
+}