add option to wrap lines in custom code mirror

pinot-controller/src/main/resources/app/components/CustomCodemirror.tsx

@@ -18,15 +18,15 @@
  * under the License.
  */
 
-import React, {  } from 'react';
+import React, { useState } from 'react';
 import { UnControlled as CodeMirror } from 'react-codemirror2';
 import 'codemirror/lib/codemirror.css';
 import 'codemirror/theme/material.css';
 import 'codemirror/addon/lint/lint.css';
 import 'codemirror/mode/javascript/javascript';
 import 'codemirror/addon/lint/lint';
 import 'codemirror/addon/lint/json-lint';
-import { makeStyles } from '@material-ui/core';
+import {FormControlLabel, FormGroup, makeStyles, Switch} from '@material-ui/core';
 import clsx from 'clsx';
 
 declare global {
@@ -41,39 +41,63 @@ type Props = {
   data: Object,
   isEditable?: Object,
   returnCodemirrorValue?: Function,
-  customClass?: string
+  customClass?: string,
+  showLineWrapToggle? : boolean,
 };
 
 const useStyles = makeStyles((theme) => ({
   codeMirror: {
     '& .CodeMirror': { height: 600, border: '1px solid #BDCCD9', fontSize: '13px' },
-  }
+  },
+  switch: {
+    '& .MuiFormControlLabel-root': { marginLeft: '0px'},
+  },
 }));
 
-const CustomCodemirror = ({data, isEditable, returnCodemirrorValue, customClass = ''}: Props) => {
+
+const CustomCodemirror = ({data, isEditable, returnCodemirrorValue, customClass = '', showLineWrapToggle=false}: Props) => {
   const classes = useStyles();
 
+  const [isWrappedToggled, setWrappedToggled] = useState(false);
+  const wrapToggle = (
+      <Switch color="primary"/>
+  )
+  const wrapToggleGroup = (
+      <FormGroup className={clsx(classes.switch)}>
+        <FormControlLabel
+            control={wrapToggle}
+            label="Wrap lines"
+            checked={isWrappedToggled}
+            onChange={(event, checked) => setWrappedToggled(checked)}
+        />
+      </FormGroup>
+  )
+
   const jsonoptions = {
     lineNumbers: true,
     mode: 'application/json',
     styleActiveLine: true,
     gutters: ['CodeMirror-lint-markers'],
     lint: isEditable || false,
     theme: 'default',
-    readOnly: !isEditable
+    readOnly: !isEditable,
+    lineWrapping: isWrappedToggled,
   };
 
   return (
-    <CodeMirror
-      options={jsonoptions}
-      value={typeof data === 'string' ? data : JSON.stringify(data, null, 2)}
-      className={clsx(classes.codeMirror, customClass)}
-      autoCursor={false}
-      onChange={(editor, d, value) => {
-        returnCodemirrorValue && returnCodemirrorValue(value);
-      }}
-    />
+    <>
+      {showLineWrapToggle && wrapToggleGroup}
+      <CodeMirror
+        options={jsonoptions}
+        value={typeof data === 'string' ? data : JSON.stringify(data, null, 2)}
+        className={clsx(classes.codeMirror, customClass)}
+        autoCursor={false}
+        onChange={(editor, d, value) => {
+          returnCodemirrorValue && returnCodemirrorValue(value);
+        }}
+      />
+    </>
   );
 };
 
-export default CustomCodemirror;
+export default CustomCodemirror;

pinot-controller/src/main/resources/app/pages/ZookeeperPage.tsx

@@ -193,13 +193,13 @@ const ZookeeperPage = () => {
             >
               {lastRefresh && renderLastRefresh()}
               <div className={classes.codeMirrorDiv}>
-                <CustomCodemirror data={currentNodeData} />
+                <CustomCodemirror data={currentNodeData} showLineWrapToggle />
               </div>
             </TabPanel>
             <TabPanel value={value} index={1} dir={theme.direction}>
               {lastRefresh && renderLastRefresh()}
               <div className={classes.codeMirrorDiv}>
-                <CustomCodemirror data={currentNodeMetadata} />
+                <CustomCodemirror data={currentNodeMetadata} showLineWrapToggle />
               </div>
             </TabPanel>
           </Grid>