[Vis Builder] Add metric to metric, bucket to bucket aggregation pers…

…istence (#3495)

* Add metric to metric, bucket to bucket aggregation persistance

Signed-off-by: abbyhu2000 <[email protected]>

* Add logics to avoid exceeding the max count for each schema field

Signed-off-by: abbyhu2000 <[email protected]>

* Add changelog entry

Signed-off-by: abbyhu2000 <[email protected]>

* addressing comments

Signed-off-by: abbyhu2000 <[email protected]>

* Add unit tests for functions in use_persisted_agg_params

Signed-off-by: abbyhu2000 <[email protected]>

* rewrite unit tests to test the entire functionality

Signed-off-by: abbyhu2000 <[email protected]>

---------

Signed-off-by: abbyhu2000 <[email protected]>
Co-authored-by: Anan Zhuang <[email protected]>
(cherry picked from commit 525b033)
Signed-off-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

src/plugins/vis_builder/public/application/components/right_nav.tsx

@@ -17,7 +17,12 @@ import { useVisualizationType } from '../utils/use';
 import './side_nav.scss';
 import { useOpenSearchDashboards } from '../../../../opensearch_dashboards_react/public';
 import { VisBuilderServices } from '../../types';
-import { setActiveVisualization, useTypedDispatch } from '../utils/state_management';
+import {
+  setActiveVisualization,
+  useTypedDispatch,
+  useTypedSelector,
+} from '../utils/state_management';
+import { usePersistedAggParams } from '../utils/use/use_persisted_agg_params';
 
 export const RightNav = () => {
   const [newVisType, setNewVisType] = useState<string>();
@@ -28,6 +33,15 @@ export const RightNav = () => {
   const dispatch = useTypedDispatch();
   const StyleSection = ui.containerConfig.style.render;
 
+  const { activeVisualization } = useTypedSelector((state) => state.visualization);
+  const aggConfigParams = activeVisualization?.aggConfigParams ?? [];
+  const persistedAggParams = usePersistedAggParams(
+    types,
+    aggConfigParams,
+    activeVisName,
+    newVisType
+  );
+
   const options: Array<EuiSuperSelectOption<string>> = types.all().map(({ name, icon, title }) => ({
     value: name,
     inputDisplay: <OptionItem icon={icon} title={title} />,
@@ -68,6 +82,7 @@ export const RightNav = () => {
               setActiveVisualization({
                 name: newVisType,
                 style: types.get(newVisType)?.ui.containerConfig.style.defaults,
+                aggConfigParams: persistedAggParams,
               })
             );
 

src/plugins/vis_builder/public/application/utils/mocks.ts

@@ -55,6 +55,7 @@ export const createVisBuilderServicesMock = () => {
           },
         },
       ],
+      get: jest.fn(),
     },
   };
 

src/plugins/vis_builder/public/application/utils/state_management/shared_actions.ts

@@ -4,11 +4,13 @@
  */
 
 import { createAction } from '@reduxjs/toolkit';
+import { CreateAggConfigParams } from '../../../../../data/common';
 import { VisualizationType } from '../../../services/type_service/visualization_type';
 
 interface ActiveVisPayload {
   name: VisualizationType['name'];
   style: VisualizationType['ui']['containerConfig']['style']['defaults'];
+  aggConfigParams: CreateAggConfigParams[];
 }
 
 export const setActiveVisualization = createAction<ActiveVisPayload>('setActiveVisualzation');

src/plugins/vis_builder/public/application/utils/state_management/visualization_slice.ts

@@ -123,7 +123,7 @@ export const slice = createSlice({
     builder.addCase(setActiveVisualization, (state, action) => {
       state.activeVisualization = {
         name: action.payload.name,
-        aggConfigParams: [],
+        aggConfigParams: action.payload.aggConfigParams,
       };
     });
   },