This is an automated email from the ASF dual-hosted git repository.
jackie pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/pinot.git
The following commit(s) were added to refs/heads/master by this push:
new 0423890 add option to wrap lines in custom code mirror (#7857)
0423890 is described below
commit 0423890089c96ae2f1c73e70241d8be9eca137c0
Author: Johan Adami <[email protected]>
AuthorDate: Mon Dec 6 18:25:05 2021 -0500
add option to wrap lines in custom code mirror (#7857)
---
.../resources/app/components/CustomCodemirror.tsx | 56 +++++++++++++++-------
.../src/main/resources/app/pages/ZookeeperPage.tsx | 4 +-
2 files changed, 42 insertions(+), 18 deletions(-)
diff --git
a/pinot-controller/src/main/resources/app/components/CustomCodemirror.tsx
b/pinot-controller/src/main/resources/app/components/CustomCodemirror.tsx
index 07c8b59..65fda0b 100644
--- a/pinot-controller/src/main/resources/app/components/CustomCodemirror.tsx
+++ b/pinot-controller/src/main/resources/app/components/CustomCodemirror.tsx
@@ -18,7 +18,7 @@
* 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';
@@ -26,7 +26,7 @@ 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,18 +41,38 @@ 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',
@@ -60,20 +80,24 @@ const CustomCodemirror = ({data, isEditable,
returnCodemirrorValue, customClass
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;
\ No newline at end of file
+export default CustomCodemirror;
diff --git a/pinot-controller/src/main/resources/app/pages/ZookeeperPage.tsx
b/pinot-controller/src/main/resources/app/pages/ZookeeperPage.tsx
index abaf4a2..8a44de6 100644
--- a/pinot-controller/src/main/resources/app/pages/ZookeeperPage.tsx
+++ b/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>
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
