From 9be731916dd01f5d56d42003e979978d17c1fe0d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Vladim=C3=ADr=20Gorej?= Date: Mon, 6 Feb 2023 15:57:41 +0100 Subject: [PATCH] feat(editor-monaco): add ability to use custom markers (#3814) Refs #3803 BREAKING CHANGE: editor.editorMarkers redux state has been changed to editor.markers. FSA updateEditorMarkers has been renamed to setEditorMarkers. Selector selectEditorMarkers has been renamed to selectMarkers. --- src/plugins/editor-monaco/actions.js | 25 ++++++++++++++++--- .../MonacoEditor/MonacoEditorContainer.jsx | 4 +-- .../ValidationPane/ValidationPane.jsx | 2 +- .../ValidationPane/ValidationPane.test.jsx | 6 ++--- src/plugins/editor-monaco/index.js | 12 ++++++--- src/plugins/editor-monaco/reducers.js | 21 +++++++++++++--- src/plugins/editor-monaco/selectors.js | 9 +++---- 7 files changed, 58 insertions(+), 21 deletions(-) diff --git a/src/plugins/editor-monaco/actions.js b/src/plugins/editor-monaco/actions.js index d9f487da3b2..6f50b46d42a 100644 --- a/src/plugins/editor-monaco/actions.js +++ b/src/plugins/editor-monaco/actions.js @@ -1,5 +1,9 @@ export const EDITOR_UPDATE_THEME = 'editor_update_theme'; -export const EDITOR_ERROR_MARKERS = 'editor_error_markers'; + +export const EDITOR_SET_MARKERS = 'editor_set_markers'; +export const EDITOR_APPEND_MARKERS = 'editor_append_markers'; +export const EDITOR_CLEAR_MARKERS = 'editor_clear_markers'; + export const EDITOR_JUMP_TO_EDITOR_MARKER = 'editor_jump_to_editor_marker'; export const EDITOR_CLEAR_JUMP_TO_EDITOR_MARKER = 'editor_clear_jump_to_editor_marker'; export const EDITOR_SET_REQUEST_JUMP_TO_EDITOR_MARKER = 'editor_set_request_jump_to_editor_marker'; @@ -12,12 +16,27 @@ export const updateEditorTheme = (theme = 'my-vs-dark') => { type: EDITOR_UPDATE_THEME, }; }; -export const updateEditorMarkers = (markers = []) => { + +export const setMarkers = (markers = []) => { + return { + type: EDITOR_SET_MARKERS, + payload: markers, + }; +}; +export const appendMarkers = (markers = []) => { return { + type: EDITOR_APPEND_MARKERS, payload: markers, - type: EDITOR_ERROR_MARKERS, }; }; + +export const clearMarkers = (source = 'apilint') => { + return { + type: EDITOR_CLEAR_MARKERS, + payload: source, + }; +}; + export const setJumpToEditorMarker = (marker = {}) => { return { payload: marker, diff --git a/src/plugins/editor-monaco/components/MonacoEditor/MonacoEditorContainer.jsx b/src/plugins/editor-monaco/components/MonacoEditor/MonacoEditorContainer.jsx index f99860eb8b9..1742d5641c5 100644 --- a/src/plugins/editor-monaco/components/MonacoEditor/MonacoEditorContainer.jsx +++ b/src/plugins/editor-monaco/components/MonacoEditor/MonacoEditorContainer.jsx @@ -33,7 +33,7 @@ const MonacoEditorContainer = ({ editorActions, editorSelectors, isReadOnly }) = const handleEditorMarkersDidChange = useCallback( (markers) => { - editorActions.updateEditorMarkers(markers); + editorActions.setMarkers(markers); }, [editorActions] ); @@ -78,7 +78,7 @@ MonacoEditorContainer.propTypes = { editorSetup: PropTypes.func.isRequired, editorTearDown: PropTypes.func.isRequired, setContentDebounced: PropTypes.func.isRequired, - updateEditorMarkers: PropTypes.func.isRequired, + setMarkers: PropTypes.func.isRequired, clearJumpToEditorMarker: PropTypes.func.isRequired, setJumpToEditorMarker: PropTypes.func.isRequired, clearRequestJumpToEditorMarker: PropTypes.func.isRequired, diff --git a/src/plugins/editor-monaco/components/ValidationPane/ValidationPane.jsx b/src/plugins/editor-monaco/components/ValidationPane/ValidationPane.jsx index 49e5afcd0ab..4cbc08969c5 100644 --- a/src/plugins/editor-monaco/components/ValidationPane/ValidationPane.jsx +++ b/src/plugins/editor-monaco/components/ValidationPane/ValidationPane.jsx @@ -9,7 +9,7 @@ const ValidationPane = ({ onValidationClick, alwaysDisplayHeading, }) => { - const markers = editorSelectors.selectEditorMarkers(); + const markers = editorSelectors.selectMarkers(); const columns = React.useMemo( () => [ { diff --git a/src/plugins/editor-monaco/components/ValidationPane/ValidationPane.test.jsx b/src/plugins/editor-monaco/components/ValidationPane/ValidationPane.test.jsx index 8f216b61f7c..85612b13d82 100644 --- a/src/plugins/editor-monaco/components/ValidationPane/ValidationPane.test.jsx +++ b/src/plugins/editor-monaco/components/ValidationPane/ValidationPane.test.jsx @@ -6,7 +6,7 @@ import * as editorSelectors from '../../selectors.js'; import * as editorActions from '../../actions.js'; jest.mock('../../selectors.js', () => ({ - selectEditorMarkers: jest.fn(), + selectMarkers: jest.fn(), })); afterAll(() => { @@ -14,7 +14,7 @@ afterAll(() => { }); const setup = ({ markerErrorList } = {}) => { - editorSelectors.selectEditorMarkers.mockReturnValue(markerErrorList); + editorSelectors.selectMarkers.mockReturnValue(markerErrorList); const onValidationClick = jest.fn(); const alwaysDisplayHeading = true; return { editorSelectors, editorActions, onValidationClick, alwaysDisplayHeading }; @@ -27,7 +27,7 @@ const renderValidationPane = async (props) => { /> ); - await waitFor(() => expect(editorSelectors.selectEditorMarkers).toBeCalled()); + await waitFor(() => expect(editorSelectors.selectMarkers).toBeCalled()); return { hasTableItem: (selector) => { const item = screen.queryByText(selector, { exact: false }); diff --git a/src/plugins/editor-monaco/index.js b/src/plugins/editor-monaco/index.js index de2f38fc419..3146b444d3b 100644 --- a/src/plugins/editor-monaco/index.js +++ b/src/plugins/editor-monaco/index.js @@ -7,7 +7,9 @@ import EditorPaneBarTopWrapper from './wrap-components/EditorPaneBarTopWrapper.j import EditorPaneBarBottomWrapper from './wrap-components/EditorPaneBarBottomWrapper.jsx'; import { updateEditorTheme, - updateEditorMarkers, + setMarkers, + appendMarkers, + clearMarkers, setJumpToEditorMarker, clearJumpToEditorMarker, setRequestJumpToEditorMarker, @@ -16,7 +18,7 @@ import { import reducers from './reducers.js'; import { selectEditorTheme, - selectEditorMarkers, + selectMarkers, selectEditorJumpToMarker, selectEditorRequestJumpToMarker, } from './selectors.js'; @@ -44,7 +46,9 @@ const EditorMonacoPlugin = (opts = {}) => { editor: { actions: { updateEditorTheme, - updateEditorMarkers, + setMarkers, + appendMarkers, + clearMarkers, setJumpToEditorMarker, clearJumpToEditorMarker, setRequestJumpToEditorMarker, @@ -53,7 +57,7 @@ const EditorMonacoPlugin = (opts = {}) => { reducers, selectors: { selectEditorTheme, - selectEditorMarkers, + selectMarkers, selectEditorJumpToMarker, selectEditorRequestJumpToMarker, }, diff --git a/src/plugins/editor-monaco/reducers.js b/src/plugins/editor-monaco/reducers.js index 19164118753..54a0d0d10df 100644 --- a/src/plugins/editor-monaco/reducers.js +++ b/src/plugins/editor-monaco/reducers.js @@ -1,6 +1,10 @@ +import { fromJS, List } from 'immutable'; + import { EDITOR_UPDATE_THEME, - EDITOR_ERROR_MARKERS, + EDITOR_SET_MARKERS, + EDITOR_CLEAR_MARKERS, + EDITOR_APPEND_MARKERS, EDITOR_JUMP_TO_EDITOR_MARKER, EDITOR_CLEAR_JUMP_TO_EDITOR_MARKER, EDITOR_SET_REQUEST_JUMP_TO_EDITOR_MARKER, @@ -11,8 +15,19 @@ const reducers = { [EDITOR_UPDATE_THEME]: (state, action) => { return state.set('editorTheme', action.payload); }, - [EDITOR_ERROR_MARKERS]: (state, action) => { - return state.set('editorMarkers', action.payload); + [EDITOR_SET_MARKERS]: (state, action) => { + return state.set('markers', fromJS(action.payload)); + }, + [EDITOR_APPEND_MARKERS]: (state, action) => { + const markers = state.get('markers', List()); + return state.set('markers', markers.concat(fromJS(action.payload))); + }, + [EDITOR_CLEAR_MARKERS]: (state, action) => { + const { payload: source } = action; + const markers = state + .get('markers', List()) + .filterNot((marker) => marker.get('source') === source); + return state.set('markers', markers); }, [EDITOR_JUMP_TO_EDITOR_MARKER]: (state, action) => { return state.set('editorJumpToMarker', action.payload); diff --git a/src/plugins/editor-monaco/selectors.js b/src/plugins/editor-monaco/selectors.js index 381ab292f67..010a16725f8 100644 --- a/src/plugins/editor-monaco/selectors.js +++ b/src/plugins/editor-monaco/selectors.js @@ -1,12 +1,11 @@ import { createSelector } from 'reselect'; +import { List } from 'immutable'; export const selectEditorTheme = (state) => state.get('editorTheme') || 'my-vs-dark'; -export const selectEditorMarkers = createSelector( - (state) => state.get('editorMarkers'), - (editorMarkers) => { - return editorMarkers || []; - } +export const selectMarkers = createSelector( + (state) => state.get('markers', List()), + (markers) => markers.toJS() ); export const selectEditorJumpToMarker = createSelector(