Skip to content

Commit

Permalink
update: code editor in dashboard config
Browse files Browse the repository at this point in the history
  • Loading branch information
bilalesi committed May 28, 2024
1 parent 75957bf commit 7ac74af
Show file tree
Hide file tree
Showing 2 changed files with 52 additions and 10 deletions.
36 changes: 29 additions & 7 deletions src/shared/components/EditTableForm.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ import {
Spin,
Tooltip,
} from 'antd';

import codemirror from 'codemirror';
import React from 'react';
import { Controlled as CodeMirror } from 'react-codemirror2';
import { useQuery } from 'react-query';
Expand All @@ -27,9 +27,8 @@ import {
querySparql,
} from '../hooks/useAccessDataForTable';
import ColumnConfig from './ColumnConfig';
import './EditTableForm.scss';
import { isNil } from 'lodash';
import { ErrorComponent } from './ErrorComponent';
import { INDENT_UNIT } from './ResourceEditor/editorUtils';
import 'codemirror/addon/fold/brace-fold';
import 'codemirror/addon/fold/foldcode';
import 'codemirror/addon/fold/foldgutter';
Expand All @@ -39,6 +38,8 @@ import 'codemirror/mode/sparql/sparql';
import 'codemirror/theme/base16-light.css';
import 'codemirror/addon/display/placeholder';

import './EditTableForm.scss';

const DEFAULT_SPARQL_QUERY =
'prefix nxv: <https://bluebrain.github.io/nexus/vocabulary/> \nSELECT DISTINCT ?self ?s WHERE { ?s nxv:self ?self } LIMIT 20';
const DEFAULT_ES_QUERY = '{}';
Expand Down Expand Up @@ -94,6 +95,8 @@ const EditTableForm: React.FC<{
busy,
formName = 'Edit',
}) => {
const editorRef = React.useRef<codemirror.Editor>();
const wrapperRef = React.useRef(null);
// state
const [name, setName] = React.useState<string | undefined>(table?.name);
const [nameError, setNameError] = React.useState<boolean>(false);
Expand Down Expand Up @@ -517,10 +520,10 @@ const EditTableForm: React.FC<{
if (table.projection['@id']) {
setProjectionId(table.projection['@id']);
} else {
/*
when no projection id it means search all of the
specified projection type
*/
/*
when no projection id it means search all of the
specified projection type
*/
setProjectionId(`All_${table.projection['@type']}`);
}
} else {
Expand Down Expand Up @@ -692,12 +695,31 @@ const EditTableForm: React.FC<{
theme: 'base16-light',
lineNumbers: true,
lineWrapping: true,
viewportMargin: Infinity,
foldGutter: true,
indentUnit: INDENT_UNIT,
autoRefresh: true,
placeholder: placeHolder,
}}
onBeforeChange={(editor, data, value) => {
setPreview(false);
handleQueryChange(value);
}}
editorDidMount={editorElement => {
(editorRef as React.MutableRefObject<
codemirror.Editor
>).current = editorElement;
}}
editorWillUnmount={() => {
(editorRef as React.MutableRefObject<CodeMirror.Editor>).current
.getWrapperElement()
?.remove();
if (wrapperRef.current) {
(wrapperRef.current as {
hydrated: boolean;
}).hydrated = false;
}
}}
/>
</div>
</div>
Expand Down
26 changes: 23 additions & 3 deletions src/subapps/admin/components/ViewForm/ElasticSearchQueryInput.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,20 +4,23 @@ import {
CheckCircleOutlined,
ExclamationCircleOutlined,
} from '@ant-design/icons';
import './ElasticSearchQueryInput.scss';

import codemirror from 'codemirror';
import { UnControlled as CodeMirror } from 'react-codemirror2';
import 'codemirror/addon/display/placeholder';
import 'codemirror/mode/javascript/javascript';
import 'codemirror/addon/fold/foldcode';
import 'codemirror/addon/fold/foldgutter';
import 'codemirror/addon/fold/brace-fold';

import 'codemirror/lib/codemirror.css';
import './ElasticSearchQueryInput.scss';

const ElasticSearchQueryInput: React.FunctionComponent<{
value?: string;
onChange?: (query: string) => void;
}> = ({ value = '', onChange }) => {
const editorRef = React.useRef<codemirror.Editor>();
const wrapperRef = React.useRef(null);

const [valid, setValid] = React.useState(true);

const handleChange = (editor: any, data: any, value: string) => {
Expand All @@ -42,15 +45,32 @@ const ElasticSearchQueryInput: React.FunctionComponent<{
</div>
<div className="code">
<CodeMirror
ref={wrapperRef}
value={value}
options={{
mode: { name: 'javascript', json: true },
theme: 'base16-light',
lineNumbers: true,
lineWrapping: true,
foldGutter: true,
indentUnit: 4,
viewportMargin: Infinity,
placeholder: 'Enter a valid ElasticSearch query',
}}
onChange={handleChange}
editorDidMount={editorElement => {
(editorRef as React.MutableRefObject<
codemirror.Editor
>).current = editorElement;
}}
editorWillUnmount={() => {
(editorRef as React.MutableRefObject<CodeMirror.Editor>).current
.getWrapperElement()
?.remove();
if (wrapperRef.current) {
(wrapperRef.current as { hydrated: boolean }).hydrated = false;
}
}}
/>
</div>
</div>
Expand Down

0 comments on commit 7ac74af

Please sign in to comment.