fixes edit mode callback bug in Saved Object Panels (#420) (#437)

* fix for SOpanels editMode Signed-off-by: Shenoy Pratik <sgguruda@amazon.com> * rename edit button data-test-subj Signed-off-by: Shenoy Pratik <sgguruda@amazon.com> --------- Signed-off-by: Shenoy Pratik <sgguruda@amazon.com> (cherry picked from commit b3c0847) Co-authored-by: Shenoy Pratik <sgguruda@amazon.com>
opensearch-project · Apr 27, 2023 · 8c706bb · 8c706bb
1 parent c66896a
commit 8c706bb
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 67 deletions.
diff --git a/public/components/custom_panels/custom_panel_view_so.tsx b/public/components/custom_panels/custom_panel_view_so.tsx
@@ -55,17 +55,14 @@ import { PanelGridSO } from './panel_modules/panel_grid/panel_grid_so';
 import { VisaulizationFlyoutSO } from './panel_modules/visualization_flyout/visualization_flyout_so';
 import {
   clonePanel,
-  createPanel,
   deletePanels,
   fetchPanel,
-  newPanelTemplate,
   selectPanel,
   setPanel,
-  setPanelEt,
-  setPanelId,
-  setPanelSt,
   updatePanel,
 } from './redux/panel_slice';
+import PPLService from '../../services/requests/ppl';
+import DSLService from '../../services/requests/dsl';
 
 /*
  * "CustomPanelsView" module used to render an Observability Dashboard
@@ -277,20 +274,10 @@ export const CustomPanelViewSO = (props: CustomPanelViewProps) => {
   };
 
   // toggle between panel edit mode
-
-  const startEdit = () => {
-    setIsEditing(true);
-  };
-
-  const applyEdits = useCallback(() => {
-    dispatch(updatePanel(panel));
-    setIsEditing(false);
-    setEditActionType('save');
-  }, [panel]);
-
-  const cancelEdit = () => {
-    dispatch(fetchPanel(panelId));
-    setIsEditing(false);
+  const editPanel = (editType: string) => {
+    setIsEditing(!isEditing);
+    if (editType === 'cancel') dispatch(fetchPanel(panelId));
+    setEditActionType(editType);
   };
 
   const closeFlyout = () => {
@@ -406,14 +393,14 @@ export const CustomPanelViewSO = (props: CustomPanelViewProps) => {
       data-test-subj="cancelPanelButton"
       iconType="cross"
       color="danger"
-      onClick={cancelEdit}
+      onClick={() => editPanel('cancel')}
     >
       Cancel
     </EuiButton>
   );
 
   const saveButton = (
-    <EuiButton data-test-subj="savePanelButton" iconType="save" onClick={applyEdits}>
+    <EuiButton data-test-subj="savePanelButton" iconType="save" onClick={() => editPanel('save')}>
       Save
     </EuiButton>
   );
@@ -422,7 +409,7 @@ export const CustomPanelViewSO = (props: CustomPanelViewProps) => {
     <EuiButton
       data-test-subj="editPanelButton"
       iconType="pencil"
-      onClick={startEdit}
+      onClick={() => editPanel('edit')}
       disabled={editDisabled}
     >
       Edit

diff --git a/public/components/custom_panels/panel_modules/panel_grid/panel_grid_so.tsx b/public/components/custom_panels/panel_modules/panel_grid/panel_grid_so.tsx
@@ -153,17 +153,14 @@ export const PanelGridSO = (props: PanelGridProps) => {
   };
 
   // Save Visualization Layouts when not in edit mode anymore (after users saves the panel)
-  const saveVisualizationLayouts = useCallback(
-    async (panelID: string, visualizationParams: any) => {
-      const newVisualizations = updateLayout(panel.visualizations, visualizationParams);
-      const updateRes = await coreRefs.savedObjectsClient?.update('observability-panel', panelID, {
-        ...panel,
-        visualizations: newVisualizations,
-      });
-      setPanelVisualizations(updateRes?.attributes?.visualizations || []);
-    },
-    [panel]
-  );
+  const saveVisualizationLayouts = async (panelID: string, visualizationParams: any) => {
+    const newVisualizations = updateLayout(panel.visualizations, visualizationParams);
+    const updateRes = await coreRefs.savedObjectsClient?.update('observability-panel', panelID, {
+      ...panel,
+      visualizations: newVisualizations,
+    });
+    setPanelVisualizations(updateRes?.attributes?.visualizations || []);
+  };
 
   // Update layout whenever user edit gets completed
   useEffect(() => {

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
@@ -38,12 +38,13 @@ import { useDispatch, useSelector } from 'react-redux';
 import { CoreStart } from '../../../../../../../src/core/public';
 import { SAVED_VISUALIZATION } from '../../../../../common/constants/explorer';
 import {
-  PplResponse,
+  PPLResponse,
   SavedVisualizationType,
   VisualizationType,
   VizContainerError,
 } from '../../../../../common/types/custom_panels';
 import { uiSettingsService } from '../../../../../common/utils';
+
 import PPLService from '../../../../services/requests/ppl';
 import { SavedObjectsActions } from '../../../../services/saved_objects/saved_object_client/saved_objects_actions';
 import { ObservabilitySavedVisualization } from '../../../../services/saved_objects/saved_object_client/types';
@@ -121,7 +122,7 @@ export const VisaulizationFlyoutSO = ({
   const [newVisualizationTimeField, setNewVisualizationTimeField] = useState('');
   const [previewMetaData, setPreviewMetaData] = useState<SavedVisualizationType>();
   const [pplQuery, setPPLQuery] = useState('');
-  const [previewData, setPreviewData] = useState<PplResponse>({} as PplResponse);
+  const [previewData, setPreviewData] = useState<PPLResponse>({} as PPLResponse);
   const [previewArea, setPreviewArea] = useState(<></>);
   const [previewLoading, setPreviewLoading] = useState(false);
   const [isPreviewError, setIsPreviewError] = useState({} as VizContainerError);
@@ -182,43 +183,11 @@ export const VisaulizationFlyoutSO = ({
     if (!isInputValid()) return;
 
     if (isFlyoutReplacement) {
-      // http
-      //   .post(`${CUSTOM_PANELS_API_PREFIX}/visualizations/replace`, {
-      //     body: JSON.stringify({
-      //       panelId,
-      //       savedVisualizationId: selectValue,
-      //       oldVisualizationId: replaceVisualizationId,
-      //     }),
-      //   })
-      //   .then(async (res) => {
-      //     setPanelVisualizations(res.visualizations);
-      //     setToast(`Visualization ${newVisualizationTitle} successfully added!`, 'success');
-      //   })
-      //   .catch((err) => {
-      //     setToast(`Error in adding ${newVisualizationTitle} visualization to the panel`, 'danger');
-      //     console.error(err);
-      //   });
       dispatch(replaceVizInPanel(panel, replaceVisualizationId, selectValue));
     } else {
       const visualizationsWithNewPanel = addVisualizationPanel({
         savedVisualizationId: selectValue,
       });
-
-      // http
-      //   .post(`${CUSTOM_PANELS_API_PREFIX}/visualizations`, {
-      //     body: JSON.stringify({
-      //       panelId,
-      //       savedVisualizationId: selectValue,
-      //     }),
-      //   })
-      //   .then(async (res) => {
-      //     setPanelVisualizations(res.visualizations);
-      //     setToast(`Visualization ${newVisualizationTitle} successfully added!`, 'success');
-      //   })
-      //   .catch((err) => {
-      //     setToast(`Error in adding ${newVisualizationTitle} visualization to the panel`, 'danger');
-      //     console.error(err);
-      //   });
     }
     closeFlyout();
   };