feat(editor-monaco): add ability to use custom markers (#3814)

char0n · web-flow · commit 9be731916dd0 · 2023-02-06T15:57:41.000+01:00
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.
diff --git 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
@@ -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
@@ -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
@@ -6,15 +6,15 @@ import * as editorSelectors from '../../selectors.js';
 import * as editorActions from '../../actions.js';
 
 jest.mock('../../selectors.js', () => ({
-  selectEditorMarkers: jest.fn(),
+  selectMarkers: jest.fn(),
 }));
 
 afterAll(() => {
   jest.unmock('../../selectors.js');
 });
 
 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
@@ -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
@@ -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
@@ -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(

Original file line number	Diff line number	Diff line change
`@@ -9,7 +9,7 @@ const ValidationPane = ({`
`9`	`9`	`onValidationClick,`
`10`	`10`	`alwaysDisplayHeading,`
`11`	`11`	`}) => {`
`12`		`- const markers = editorSelectors.selectEditorMarkers();`
	`12`	`+ const markers = editorSelectors.selectMarkers();`
`13`	`13`	`const columns = React.useMemo(`
`14`	`14`	`() => [`
`15`	`15`	`{`