[feat] Edit a custom base map style redux (#2281)

Signed-off-by: Ihor Dykhta <dikhta.igor@gmail.com>
Co-authored-by: Jacob Wasilkowski <4933392+jwasilgeo@users.noreply.github.com>

src/actions/src/action-types.ts

@@ -134,6 +134,7 @@ export const ActionTypes = {
   INPUT_MAP_STYLE: `${ACTION_PREFIX}INPUT_MAP_STYLE`,
   LOAD_CUSTOM_MAP_STYLE: `${ACTION_PREFIX}LOAD_CUSTOM_MAP_STYLE`,
   ADD_CUSTOM_MAP_STYLE: `${ACTION_PREFIX}ADD_CUSTOM_MAP_STYLE`,
+  EDIT_CUSTOM_MAP_STYLE: `${ACTION_PREFIX}EDIT_CUSTOM_MAP_STYLE`,
   REMOVE_CUSTOM_MAP_STYLE: `${ACTION_PREFIX}REMOVE_CUSTOM_MAP_STYLE`,
   REQUEST_MAP_STYLES: `${ACTION_PREFIX}REQUEST_MAP_STYLES`,
   SET_3D_BUILDING_COLOR: `${ACTION_PREFIX}SET_3D_BUILDING_COLOR`,

src/actions/src/map-style-actions.ts

@@ -48,6 +48,18 @@ export type RemoveCustomMapStyleUpdaterAction = {
   };
 };
 
+/**
+ * Edit map style from user input to reducer.
+ * This action is called when user clicks confirm after editing an existing custom style in the custom map style dialog.
+ * It should not be called from outside kepler.gl without a valid `inputStyle` in the `mapStyle` reducer.
+ * param {void}
+ * @memberof mapStyleActions
+ * @public
+ */
+export const editCustomMapStyle: () => {
+  type: typeof ActionTypes.EDIT_CUSTOM_MAP_STYLE;
+} = createAction(ActionTypes.EDIT_CUSTOM_MAP_STYLE);
+
 /**
  * Remove a custom map style from `state.mapStyle.mapStyles`.
  * @param id

src/reducers/src/map-style-updaters.ts

@@ -749,7 +749,26 @@ export const addCustomMapStyleUpdater = (state: MapStyle): MapStyle => {
   const styleId = state.inputStyle.id;
   if (!styleId) return state;
 
-  const newState: MapStyle = {
+  const newState = getNewStateWithCustomMapStyle(state);
+  // set new style
+  return mapStyleChangeUpdater(newState, {payload: {styleType: styleId}});
+};
+
+/**
+ * Edit map style from user input to reducer.
+ * This action is called when user clicks confirm after editing an existing custom style in the custom map style dialog.
+ * It should not be called from outside kepler.gl without a valid `inputStyle` in the `mapStyle` reducer.
+ * @memberof mapStyleUpdaters
+ */
+export const editCustomMapStyleUpdater = (state: MapStyle): MapStyle => {
+  return getNewStateWithCustomMapStyle(state);
+};
+
+function getNewStateWithCustomMapStyle(state: MapStyle): MapStyle {
+  const styleId = state.inputStyle.id;
+  if (!styleId) return state;
+
+  return {
     ...state,
     // @ts-expect-error Property 'layerGroups' is missing in type 'InputStyle' but required in type 'BaseMapStyle'. Legacy case?
     mapStyles: {
@@ -759,9 +778,7 @@ export const addCustomMapStyleUpdater = (state: MapStyle): MapStyle => {
     // set to default
     inputStyle: getInitialInputStyle()
   };
-  // set new style
-  return mapStyleChangeUpdater(newState, {payload: {styleType: styleId}});
-};
+}
 
 /**
  * Remove a custom map style from `state.mapStyle.mapStyles`.

src/reducers/src/map-style.ts

@@ -37,6 +37,7 @@ const actionHandler = {
   [ActionTypes.RECEIVE_MAP_CONFIG]: mapStyleUpdaters.receiveMapConfigUpdater,
   [ActionTypes.LOAD_CUSTOM_MAP_STYLE]: mapStyleUpdaters.loadCustomMapStyleUpdater,
   [ActionTypes.ADD_CUSTOM_MAP_STYLE]: mapStyleUpdaters.addCustomMapStyleUpdater,
+  [ActionTypes.EDIT_CUSTOM_MAP_STYLE]: mapStyleUpdaters.editCustomMapStyleUpdater,
   [ActionTypes.REMOVE_CUSTOM_MAP_STYLE]: mapStyleUpdaters.removeCustomMapStyleUpdater,
   [ActionTypes.RESET_MAP_CONFIG]: mapStyleUpdaters.resetMapConfigMapStyleUpdater,
   [ActionTypes.SET_3D_BUILDING_COLOR]: mapStyleUpdaters.set3dBuildingColorUpdater,

test/node/reducers/map-style-test.js

@@ -33,6 +33,8 @@ import {
   loadMapStyles,
   mapConfigChange,
   mapStyleChange,
+  inputMapStyle,
+  editCustomMapStyle,
   removeCustomMapStyle
 } from '@kepler.gl/actions';
 import SchemaManager from '@kepler.gl/schemas';
@@ -831,6 +833,62 @@ test('#mapStyleReducer -> MAP_STYLE_CHANGE -> dark basemap to no basemap', t =>
   t.end();
 });
 
+test('#mapStyleReducer -> EDIT_CUSTOM_MAP_STYLE', t => {
+  drainTasksForTesting();
+  const stateWithToken = reducer(
+    InitialMapStyle,
+    keplerGlInit({
+      mapboxApiAccessToken: 'smoothies_secret_token'
+    })
+  );
+
+  // state with custom style
+  let nextState = reducer(stateWithToken, receiveMapConfig(StateWCustomMapStyleLocal));
+
+  const styleIdToEdit = 'smoothie_the_cat';
+  const {label: originalLabel, url, accessToken, icon, custom} = nextState.mapStyles[styleIdToEdit];
+  const inputMapStyleToEdit = {
+    id: styleIdToEdit,
+    label: 'Smoothie the Super Cool Cat',
+    url,
+    accessToken,
+    icon,
+    custom
+  };
+
+  // set input custom map style and provide an edited label property
+  nextState = reducer(nextState, inputMapStyle(inputMapStyleToEdit));
+
+  t.deepEqual(
+    nextState.inputStyle,
+    {...inputMapStyleToEdit, error: false, isValid: true, style: null, uploadedFile: null},
+    'should set the inputStyle'
+  );
+
+  // edit custom map style
+  nextState = reducer(nextState, editCustomMapStyle());
+
+  t.notEqual(
+    nextState.mapStyles[styleIdToEdit].label,
+    originalLabel,
+    'should commit edit to the label property for custom style with id "smoothie_the_cat"'
+  );
+
+  t.equal(
+    nextState.mapStyles[styleIdToEdit].id,
+    styleIdToEdit,
+    'should not make any changes to the id property of the custom style after committing label property edits'
+  );
+
+  t.deepEqual(
+    nextState.inputStyle,
+    getInitialInputStyle(),
+    'should reset the inputStyle after committing edits'
+  );
+
+  t.end();
+});
+
 test('#mapStyleReducer -> REMOVE_CUSTOM_MAP_STYLE -> removal of currently selected custom style', t => {
   drainTasksForTesting();
   const stateWithToken = reducer(