Replace codemirror editor react component with react-ace editor compo…

…nent (kubeflow#1890) * Replaced CodeMirror with Editor in PipelineDetails.tsx * Replaced codemirror in DetailsTable with react-ace * Removed codemirror * Updated unit tests for Editor.tsx to test placeholder and value in simplified manner * Updated DetailsTable.test.tsx.snap to reflect changes made in DetailsTable.tsx * Updated PipelineDetails test snapshot * Changed width of Editor in DetailsTable to be 100% instead of 300px * Revert "Updated unit tests for Editor.tsx to test placeholder and value in simplified manner" This reverts commit 40103f2.
numerology · Aug 22, 2019 · 851e7c8 · 851e7c8
1 parent 8c3d6fe
commit 851e7c8
Show file tree

Hide file tree

Showing 6 changed files with 237 additions and 123 deletions.
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -7,7 +7,6 @@
     "@material-ui/icons": "^3.0.1",
     "@types/js-yaml": "^3.11.2",
     "brace": "^0.11.1",
-    "codemirror": "^5.40.2",
     "d3": "^5.7.0",
     "d3-dsv": "^1.0.10",
     "dagre": "^0.8.2",
@@ -20,7 +19,6 @@
     "re-resizable": "^4.9.0",
     "react": "^16.7.0",
     "react-ace": "^7.0.2",
-    "react-codemirror2": "^5.1.0",
     "react-dom": "^16.5.2",
     "react-dropzone": "^5.1.0",
     "react-router-dom": "^4.3.1",
@@ -53,7 +51,6 @@
     "vr-test": "ts-node -O '{\"module\": \"commonjs\"}' backstop.ts"
   },
   "devDependencies": {
-    "@types/codemirror": "0.0.60",
     "@types/d3": "^5.0.0",
     "@types/d3-dsv": "^1.0.33",
     "@types/dagre": "^0.7.40",

diff --git a/frontend/src/components/DetailsTable.tsx b/frontend/src/components/DetailsTable.tsx
@@ -14,17 +14,16 @@
  * limitations under the License.
  */
 
-import 'codemirror/lib/codemirror.css';
-import 'codemirror/mode/javascript/javascript.js';
 import * as React from 'react';
 import { stylesheet } from 'typestyle';
 import { color, spacing, commonCss } from '../Css';
-import { UnControlled as CodeMirror } from 'react-codemirror2';
+import Editor from './Editor';
+import 'brace';
+import 'brace/ext/language_tools';
+import 'brace/mode/json';
+import 'brace/theme/github';
 
 export const css = stylesheet({
-  codeMirrorGutter: {
-    width: 6,
-  },
   key: {
     color: color.strong,
     flex: '0 0 50%',
@@ -57,25 +56,16 @@ export default (props: DetailsTableProps) => {
         try {
           const parsedJson = JSON.parse(f[1]);
           // Nulls, booleans, strings, and numbers can all be parsed as JSON, but we don't care
-          // about rendering those using CodeMirror. Note that `typeOf null` returns 'object'
+          // about rendering. Note that `typeOf null` returns 'object'
           if (parsedJson === null || typeof parsedJson !== 'object') {
             throw new Error('Parsed JSON was neither an array nor an object. Using default renderer');
           }
           return (
             <div key={i} className={css.row}>
               <span className={css.key}>{f[0]}</span>
-              <CodeMirror
-                  className={css.valueJson}
-                  value={JSON.stringify(parsedJson, null, 2) || ''}
-                  editorDidMount={(editor) => editor.refresh()}
-                  options={{
-                    gutters: [css.codeMirrorGutter],
-                    lineWrapping: true,
-                    mode: 'application/json',
-                    readOnly: true,
-                    theme: 'default',
-                  }}
-                />
+              <Editor width='100%' height='300px' mode='json' theme='github'
+                highlightActiveLine={true} showGutter={true} readOnly={true}
+                value={JSON.stringify(parsedJson, null, 2) || ''} />
             </div>
           );
         } catch (err) {