Skip to content

Commit

Permalink
fixes edit mode callback bug in Saved Object Panels (#420) (#437)
Browse files Browse the repository at this point in the history
* 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>
  • Loading branch information
opensearch-trigger-bot[bot] and ps48 authored Apr 27, 2023
1 parent c66896a commit 8c706bb
Show file tree
Hide file tree
Showing 3 changed files with 20 additions and 67 deletions.
31 changes: 9 additions & 22 deletions public/components/custom_panels/custom_panel_view_so.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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 = () => {
Expand Down Expand Up @@ -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>
);
Expand All @@ -422,7 +409,7 @@ export const CustomPanelViewSO = (props: CustomPanelViewProps) => {
<EuiButton
data-test-subj="editPanelButton"
iconType="pencil"
onClick={startEdit}
onClick={() => editPanel('edit')}
disabled={editDisabled}
>
Edit
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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(() => {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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);
Expand Down Expand Up @@ -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();
};
Expand Down

0 comments on commit 8c706bb

Please sign in to comment.