fix replace in new so panel (opensearch-project#367)

* fix replace in new so panel Signed-off-by: Derek Ho <dxho@amazon.com> * remove unecessary imports Signed-off-by: Derek Ho <dxho@amazon.com> --------- Signed-off-by: Derek Ho <dxho@amazon.com>
joshuali925 · Apr 18, 2023 · 85d5470 · 85d5470
1 parent b554c71
commit 85d5470
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 0 deletions.
diff --git a/...c/components/custom_panels/panel_modules/visualization_flyout/visualization_flyout_so.tsx b/...c/components/custom_panels/panel_modules/visualization_flyout/visualization_flyout_so.tsx
@@ -51,6 +51,8 @@ import {
 import './visualization_flyout.scss';
 import { uiSettingsService } from '../../../../../common/utils';
 import { ILegacyScopedClusterClient } from '../../../../../../../src/core/server';
+import { replaceVizInPanel, selectPanel } from '../../redux/panel_slice';
+import { useDispatch, useSelector } from 'react-redux';
 
 /*
  * VisaulizationFlyoutSO - This module create a flyout to add visualization for SavedObjects custom Panels
@@ -106,6 +108,11 @@ export const VisaulizationFlyoutSO = ({
   replaceVisualizationId,
   addVisualizationPanel,
 }: VisualizationFlyoutSOProps) => {
+
+  const dispatch = useDispatch();
+
+  const panel = useSelector(selectPanel);
+
   const [newVisualizationTitle, setNewVisualizationTitle] = useState('');
   const [newVisualizationType, setNewVisualizationType] = useState('');
   const [newVisualizationTimeField, setNewVisualizationTimeField] = useState('');
@@ -188,6 +195,7 @@ export const VisaulizationFlyoutSO = ({
       //     setToast(`Error in adding ${newVisualizationTitle} visualization to the panel`, 'danger');
       //     console.error(err);
       //   });
+      dispatch(replaceVizInPanel(panel, replaceVisualizationId, selectValue));
     } else {
       const visualizationsWithNewPanel = addVisualizationPanel({
         savedVisualizationId: selectValue,

diff --git a/public/components/custom_panels/redux/panel_slice.ts b/public/components/custom_panels/redux/panel_slice.ts
@@ -124,6 +124,8 @@ const updateLegacyPanel = (panel: CustomPanelType) =>
 
 const updateSavedObjectPanel = (panel: CustomPanelType) => savedObjectPanelsClient.update(panel);
 
+export const uuidRx = /^[0-9a-fA-F]{8}\b-[0-9a-fA-F]{4}\b-[0-9a-fA-F]{4}\b-[0-9a-fA-F]{4}\b-[0-9a-fA-F]{12}$/;
+
 const isUuid = (id) => !!id.match(uuidRx);
 
 export const updatePanel = (panel: CustomPanelType) => async (dispatch, getState) => {
@@ -156,6 +158,21 @@ export const addVizToPanels = (panels, vizId) => async (dispatch, getState) => {
   });
 };
 
+export const replaceVizInPanel = (oldPanel, oldVizId, vizId) => async (dispatch, getState) => {
+  const panel = getState().customPanel.panelList.find((p) => p.id === oldPanel.id);
+
+  const allVisualizations = panel!.visualizations;
+
+  const visualizationsWithNewPanel = addVisualizationPanel(vizId, oldVizId, allVisualizations);
+
+  const updatedPanel = { ...panel, visualizations: visualizationsWithNewPanel };
+  try {
+    dispatch(updatePanel(updatedPanel));
+  } catch (err) {
+    console.error(err?.body?.message || err);
+  }
+};
+
 export const deletePanel = (id) => async (dispatch, getState) => {
   await savedObjectPanelsClient.delete(id);
   const panelList: CustomPanelType[] = getState().panelList.filter((p) => p.id !== id);