Protobuf schema is not formatted properly (#1426)

* clusters"s table styles was fixed, added hyphens to breadcrumbs, URP is not abbreviated and ISR is abbreviated already and "f0" was changed to 0

* styled component name for cluster table was changed

* adding tests for clusterwidget cells, adding title for ISR and bringing back changes in breadcrumb regarding hyphens

* fixing clusterWidget test

* fixing double scroll issue inside Topics > Messages > Content for large message content

* bring back last changes

* changing styles for scrollbar

* fixing protobuf schema to be formatted correctly

* makeing requested changes, JSONEditor renamed to Editor,fixed schema edit and versions

* rename JSONViewer to EditorViewer

Co-authored-by: Roman Zabaluev <rzabaluev@provectus.com>

kafka-ui-react-app/src/components/Connect/Details/Config/Config.tsx

@@ -7,7 +7,7 @@ import {
   ConnectorName,
 } from 'redux/interfaces';
 import PageLoader from 'components/common/PageLoader/PageLoader';
-import JSONEditor from 'components/common/JSONEditor/JSONEditor';
+import Editor from 'components/common/Editor/Editor';
 import styled from 'styled-components';
 import { Colors } from 'theme/theme';
 
@@ -54,7 +54,7 @@ const Config: React.FC<ConfigProps> = ({
 
   return (
     <ConnectConfigWrapper>
-      <JSONEditor
+      <Editor
         readOnly
         value={JSON.stringify(config, null, '\t')}
         highlightActiveLine={false}

kafka-ui-react-app/src/components/Connect/Details/Config/__test__/Config.spec.tsx

@@ -9,7 +9,7 @@ import { connector } from 'redux/reducers/connect/__test__/fixtures';
 
 jest.mock('components/common/PageLoader/PageLoader', () => 'mock-PageLoader');
 
-jest.mock('components/common/JSONEditor/JSONEditor', () => 'mock-JSONEditor');
+jest.mock('components/common/Editor/Editor', () => 'mock-Editor');
 
 describe('Config', () => {
   containerRendersView(<ConfigContainer />, Config);

kafka-ui-react-app/src/components/Connect/Details/Config/__test__/__snapshots__/Config.spec.tsx.snap

@@ -11,7 +11,7 @@ exports[`Config view matches snapshot 1`] = `
 <div
   className="c0"
 >
-  <mock-JSONEditor
+  <mock-Editor
     highlightActiveLine={false}
     isFixedHeight={true}
     readOnly={true}

kafka-ui-react-app/src/components/Connect/Edit/Edit.tsx

@@ -12,7 +12,7 @@ import {
 } from 'redux/interfaces';
 import { clusterConnectConnectorConfigPath } from 'lib/paths';
 import yup from 'lib/yupExtended';
-import JSONEditor from 'components/common/JSONEditor/JSONEditor';
+import Editor from 'components/common/Editor/Editor';
 import PageLoader from 'components/common/PageLoader/PageLoader';
 import { Button } from 'components/common/Button/Button';
 
@@ -122,7 +122,7 @@ const Edit: React.FC<EditProps> = ({
             control={control}
             name="config"
             render={({ field }) => (
-              <JSONEditor {...field} readOnly={isSubmitting} />
+              <Editor {...field} readOnly={isSubmitting} />
             )}
           />
         </div>

kafka-ui-react-app/src/components/Connect/Edit/__tests__/Edit.spec.tsx

@@ -15,7 +15,7 @@ import theme from 'theme/theme';
 
 jest.mock('components/common/PageLoader/PageLoader', () => 'mock-PageLoader');
 
-jest.mock('components/common/JSONEditor/JSONEditor', () => 'mock-JSONEditor');
+jest.mock('components/common/Editor/Editor', () => 'mock-Editor');
 
 const mockHistoryPush = jest.fn();
 jest.mock('react-router-dom', () => ({

kafka-ui-react-app/src/components/Connect/Edit/__tests__/__snapshots__/Edit.spec.tsx.snap

@@ -67,7 +67,7 @@ exports[`Edit view matches snapshot 1`] = `
     onSubmit={[Function]}
   >
     <div>
-      <mock-JSONEditor
+      <mock-Editor
         name="config"
         onBlur={[Function]}
         onChange={[Function]}
@@ -180,7 +180,7 @@ exports[`Edit view matches snapshot when config has credentials 1`] = `
     onSubmit={[Function]}
   >
     <div>
-      <mock-JSONEditor
+      <mock-Editor
         name="config"
         onBlur={[Function]}
         onChange={[Function]}

kafka-ui-react-app/src/components/Connect/New/New.tsx

@@ -7,7 +7,7 @@ import { Connect, Connector, NewConnector } from 'generated-sources';
 import { ClusterName, ConnectName } from 'redux/interfaces';
 import { clusterConnectConnectorPath } from 'lib/paths';
 import yup from 'lib/yupExtended';
-import JSONEditor from 'components/common/JSONEditor/JSONEditor';
+import Editor from 'components/common/Editor/Editor';
 import PageLoader from 'components/common/PageLoader/PageLoader';
 import { InputLabel } from 'components/common/Input/InputLabel.styled';
 import Select from 'components/common/Select/Select';
@@ -160,7 +160,7 @@ const New: React.FC<NewProps> = ({
             control={control}
             name="config"
             render={({ field }) => (
-              <JSONEditor {...field} readOnly={isSubmitting} />
+              <Editor {...field} readOnly={isSubmitting} />
             )}
           />
           <FormError>

kafka-ui-react-app/src/components/Connect/New/__tests__/New.spec.tsx

@@ -15,7 +15,7 @@ import theme from 'theme/theme';
 
 jest.mock('components/common/PageLoader/PageLoader', () => 'mock-PageLoader');
 
-jest.mock('components/common/JSONEditor/JSONEditor', () => 'mock-JSONEditor');
+jest.mock('components/common/Editor/Editor', () => 'mock-Editor');
 
 const mockHistoryPush = jest.fn();
 jest.mock('react-router-dom', () => ({
@@ -37,7 +37,7 @@ describe('New', () => {
           target: { name: 'name', value: 'my-connector' },
         });
         wrapper
-          .find('mock-JSONEditor')
+          .find('mock-Editor')
           .simulate('change', { target: { value: '{"class":"MyClass"}' } });
         wrapper.find('button[type="submit"]').simulate('submit');
       });

kafka-ui-react-app/src/components/Connect/New/__tests__/__snapshots__/New.spec.tsx.snap

@@ -311,7 +311,7 @@ Array [
       >
         Config *
       </label>
-      <mock-JSONEditor
+      <mock-Editor
         name="config"
         onBlur={[Function]}
         onChange={[Function]}

kafka-ui-react-app/src/components/KsqlDb/Query/Query.tsx

@@ -1,6 +1,6 @@
 import React, { useCallback, useEffect, FC } from 'react';
 import { yupResolver } from '@hookform/resolvers/yup';
-import JSONEditor from 'components/common/JSONEditor/JSONEditor';
+import Editor from 'components/common/Editor/Editor';
 import SQLEditor from 'components/common/SQLEditor/SQLEditor';
 import yup from 'lib/yupExtended';
 import { useForm, Controller } from 'react-hook-form';
@@ -106,7 +106,7 @@ const Query: FC = () => {
                 control={control}
                 name="streamsProperties"
                 render={({ field }) => (
-                  <JSONEditor {...field} readOnly={fetching} />
+                  <Editor {...field} readOnly={fetching} />
                 )}
               />
             </div>

kafka-ui-react-app/src/components/Schemas/Details/LatestVersion/LatestVersionItem.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { SchemaSubject } from 'generated-sources';
-import JSONViewer from 'components/common/JSONViewer/JSONViewer';
+import EditorViewer from 'components/common/EditorViewer/EditorViewer';
 
 import {
   LatestVersionWrapper,
@@ -12,12 +12,12 @@ interface LatestVersionProps {
 }
 
 const LatestVersionItem: React.FC<LatestVersionProps> = ({
-  schema: { id, subject, schema, compatibilityLevel, version },
+  schema: { id, subject, schema, compatibilityLevel, version, schemaType },
 }) => (
   <LatestVersionWrapper>
     <div>
       <h1>Relevant version</h1>
-      <JSONViewer data={schema} maxLines={28} />
+      <EditorViewer data={schema} schemaType={schemaType} maxLines={28} />
     </div>
     <div data-testid="meta-data">
       <div>

kafka-ui-react-app/src/components/Schemas/Details/SchemaVersion/SchemaVersion.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { SchemaSubject } from 'generated-sources';
 import MessageToggleIcon from 'components/common/Icons/MessageToggleIcon';
 import IconButtonWrapper from 'components/common/Icons/IconButtonWrapper';
-import JSONViewer from 'components/common/JSONViewer/JSONViewer';
+import EditorViewer from 'components/common/EditorViewer/EditorViewer';
 
 import { SchemaVersionWrapper } from './SchemaVersion.styled';
 
@@ -11,10 +11,11 @@ interface SchemaVersionProps {
 }
 
 const SchemaVersion: React.FC<SchemaVersionProps> = ({
-  version: { version, id, schema },
+  version: { version, id, schema, schemaType },
 }) => {
   const [isOpen, setIsOpen] = React.useState(false);
   const toggleIsOpen = () => setIsOpen(!isOpen);
+
   return (
     <>
       <tr>
@@ -29,7 +30,7 @@ const SchemaVersion: React.FC<SchemaVersionProps> = ({
       {isOpen && (
         <SchemaVersionWrapper>
           <td colSpan={3}>
-            <JSONViewer data={schema} />
+            <EditorViewer data={schema} schemaType={schemaType} />
           </td>
         </SchemaVersionWrapper>
       )}

kafka-ui-react-app/src/components/Schemas/Details/__test__/LatestVersionItem.spec.tsx

@@ -12,7 +12,7 @@ describe('LatestVersionItem', () => {
     expect(
       wrapper.find('div[data-testid="meta-data"] > div:first-child > p').text()
     ).toEqual('1');
-    expect(wrapper.exists('JSONViewer')).toBeTruthy();
+    expect(wrapper.exists('EditorViewer')).toBeTruthy();
   });
 
   it('renders latest version of compatibility', () => {
@@ -22,7 +22,7 @@ describe('LatestVersionItem', () => {
     expect(
       wrapper.find('div[data-testid="meta-data"] > div:last-child > p').text()
     ).toEqual('BACKWARD');
-    expect(wrapper.exists('JSONViewer')).toBeTruthy();
+    expect(wrapper.exists('EditorViewer')).toBeTruthy();
   });
 
   it('matches snapshot', () => {

kafka-ui-react-app/src/components/Schemas/Details/__test__/SchemaVersion.spec.tsx

@@ -15,9 +15,9 @@ describe('SchemaVersion', () => {
     );
 
     expect(wrapper.find('td').length).toEqual(3);
-    expect(wrapper.exists('JSONEditor')).toBeFalsy();
+    expect(wrapper.exists('Editor')).toBeFalsy();
     wrapper.find('span').simulate('click');
-    expect(wrapper.exists('JSONEditor')).toBeTruthy();
+    expect(wrapper.exists('Editor')).toBeTruthy();
   });
 
   it('matches snapshot', () => {

kafka-ui-react-app/src/components/Schemas/Details/__test__/__snapshots__/LatestVersionItem.spec.tsx.snap

@@ -6,9 +6,10 @@ exports[`LatestVersionItem matches snapshot 1`] = `
     <h1>
       Relevant version
     </h1>
-    <JSONViewer
+    <EditorViewer
       data="{\\"type\\":\\"record\\",\\"name\\":\\"MyRecord1\\",\\"namespace\\":\\"com.mycompany\\",\\"fields\\":[{\\"name\\":\\"id\\",\\"type\\":\\"long\\"}]}"
       maxLines={28}
+      schemaType="JSON"
     />
   </div>
   <div

kafka-ui-react-app/src/components/Schemas/Edit/Edit.tsx

@@ -7,7 +7,7 @@ import {
 } from 'generated-sources';
 import { clusterSchemaPath } from 'lib/paths';
 import { NewSchemaSubjectRaw } from 'redux/interfaces';
-import JSONEditor from 'components/common/JSONEditor/JSONEditor';
+import Editor from 'components/common/Editor/Editor';
 import Select from 'components/common/Select/Select';
 import { Button } from 'components/common/Button/Button';
 import { InputLabel } from 'components/common/Input/InputLabel.styled';
@@ -120,7 +120,8 @@ const Edit: React.FC = () => {
             <div>
               <S.EditorContainer>
                 <h4>Latest schema</h4>
-                <JSONEditor
+                <Editor
+                  schemaType={schema?.schemaType}
                   isFixedHeight
                   readOnly
                   height="372px"
@@ -137,7 +138,8 @@ const Edit: React.FC = () => {
                   control={control}
                   name="newSchema"
                   render={({ field: { name, onChange } }) => (
-                    <JSONEditor
+                    <Editor
+                      schemaType={schema?.schemaType}
                       readOnly={isSubmitting}
                       defaultValue={formatedSchema}
                       name={name}

kafka-ui-react-app/src/components/Topics/Topic/Details/Messages/MessageContent/MessageContent.tsx

@@ -1,6 +1,6 @@
-import { TopicMessageTimestampTypeEnum } from 'generated-sources';
+import { TopicMessageTimestampTypeEnum, SchemaType } from 'generated-sources';
 import React from 'react';
-import JSONViewer from 'components/common/JSONViewer/JSONViewer';
+import EditorViewer from 'components/common/EditorViewer/EditorViewer';
 import { SecondaryTabs } from 'components/common/Tabs/SecondaryTabs.styled';
 import BytesFormatted from 'components/common/BytesFormatted/BytesFormatted';
 
@@ -52,7 +52,10 @@ const MessageContent: React.FC<MessageContentProps> = ({
   };
   const keySize = new TextEncoder().encode(messageKey).length;
   const contentSize = new TextEncoder().encode(messageContent).length;
-
+  const contentType =
+    messageContent && messageContent.trim().startsWith('{')
+      ? SchemaType.JSON
+      : SchemaType.PROTOBUF;
   return (
     <S.Wrapper>
       <td colSpan={10}>
@@ -81,7 +84,11 @@ const MessageContent: React.FC<MessageContentProps> = ({
                 Headers
               </button>
             </SecondaryTabs>
-            <JSONViewer data={activeTabContent() || ''} />
+            <EditorViewer
+              data={activeTabContent() || ''}
+              maxLines={28}
+              schemaType={contentType}
+            />
           </S.ContentBox>
           <S.MetadataWrapper>
             <S.Metadata>

kafka-ui-react-app/src/components/Topics/Topic/Details/Messages/MessageContent/__tests__/MessageContent.spec.tsx

@@ -51,7 +51,7 @@ describe('MessageContent screen', () => {
       userEvent.click(keyTab[0]);
       expect(keyTab[0]).toHaveClass('is-active');
     });
-    it('displays the key in the JSONViewer', () => {
+    it('displays the key in the EditorViewer', () => {
       const keyTab = screen.getAllByText('Key');
       userEvent.click(keyTab[0]);
       expect(screen.getByTestId('json-viewer')).toBeInTheDocument();
@@ -63,7 +63,7 @@ describe('MessageContent screen', () => {
       userEvent.click(screen.getByText('Headers'));
       expect(screen.getByText('Headers')).toHaveClass('is-active');
     });
-    it('displays the key in the JSONViewer', () => {
+    it('displays the key in the EditorViewer', () => {
       userEvent.click(screen.getByText('Headers'));
       expect(screen.getByTestId('json-viewer')).toBeInTheDocument();
     });

kafka-ui-react-app/src/components/Topics/Topic/SendMessage/SendMessage.tsx

@@ -1,4 +1,4 @@
-import JSONEditor from 'components/common/JSONEditor/JSONEditor';
+import Editor from 'components/common/Editor/Editor';
 import PageLoader from 'components/common/PageLoader/PageLoader';
 import React from 'react';
 import { useForm, Controller } from 'react-hook-form';
@@ -162,7 +162,7 @@ const SendMessage: React.FC = () => {
               control={control}
               name="key"
               render={({ field: { name, onChange } }) => (
-                <JSONEditor
+                <Editor
                   readOnly={isSubmitting}
                   defaultValue={keyDefaultValue}
                   name={name}
@@ -177,7 +177,7 @@ const SendMessage: React.FC = () => {
               control={control}
               name="content"
               render={({ field: { name, onChange } }) => (
-                <JSONEditor
+                <Editor
                   readOnly={isSubmitting}
                   defaultValue={contentDefaultValue}
                   name={name}
@@ -194,7 +194,7 @@ const SendMessage: React.FC = () => {
               control={control}
               name="headers"
               render={({ field: { name, onChange } }) => (
-                <JSONEditor
+                <Editor
                   readOnly={isSubmitting}
                   defaultValue="{}"
                   name={name}

kafka-ui-react-app/src/components/common/Editor/Editor.tsx

@@ -0,0 +1,47 @@
+/* eslint-disable react/jsx-props-no-spreading */
+import AceEditor, { IAceEditorProps } from 'react-ace';
+import 'ace-builds/src-noconflict/mode-json5';
+import 'ace-builds/src-noconflict/mode-protobuf';
+import 'ace-builds/src-noconflict/theme-tomorrow';
+import { SchemaType } from 'generated-sources';
+import React from 'react';
+import ReactAce from 'react-ace/lib/ace';
+import styled from 'styled-components';
+
+interface EditorProps extends IAceEditorProps {
+  isFixedHeight?: boolean;
+  schemaType?: string;
+}
+
+const Editor = React.forwardRef<ReactAce | null, EditorProps>((props, ref) => {
+  const { isFixedHeight, schemaType, ...rest } = props;
+  return (
+    <AceEditor
+      ref={ref}
+      mode={
+        schemaType === SchemaType.JSON || schemaType === SchemaType.AVRO
+          ? 'json5'
+          : 'protobuf'
+      }
+      theme="tomorrow"
+      tabSize={2}
+      width="100%"
+      fontSize={14}
+      height={
+        isFixedHeight
+          ? `${(props.value?.split('\n').length || 32) * 16}px`
+          : '372px'
+      }
+      wrapEnabled
+      {...rest}
+    />
+  );
+});
+
+Editor.displayName = 'Editor';
+
+export default styled(Editor)`
+  &.ace-tomorrow {
+    background: transparent;
+  }
+`;

kafka-ui-react-app/src/components/common/EditorViewer/EditorViewer.tsx

@@ -0,0 +1,50 @@
+import React from 'react';
+import Editor from 'components/common/Editor/Editor';
+import { SchemaType } from 'generated-sources';
+
+import { StyledWrapper } from './StyledWrapper.styled';
+
+export interface FullMessageProps {
+  data: string;
+  schemaType?: string;
+  maxLines?: number;
+}
+
+const getSchemaValue = (data: string, schemaType?: string) => {
+  if (schemaType === SchemaType.JSON || schemaType === SchemaType.AVRO) {
+    return JSON.stringify(JSON.parse(data), null, '\t');
+  }
+  return data;
+};
+const EditorViewer: React.FC<FullMessageProps> = ({
+  data,
+  schemaType,
+  maxLines,
+}) => {
+  try {
+    return (
+      <StyledWrapper data-testid="json-viewer">
+        <Editor
+          isFixedHeight
+          schemaType={schemaType}
+          name="schema"
+          value={getSchemaValue(data, schemaType)}
+          setOptions={{
+            showLineNumbers: false,
+            maxLines,
+            showGutter: false,
+          }}
+          readOnly
+        />
+      </StyledWrapper>
+    );
+  } catch (e) {
+    return (
+      <StyledWrapper data-testid="json-viewer">
+        <p>{data}</p>
+      </StyledWrapper>
+    );
+  }
+};
+
+export default EditorViewer;

kafka-ui-react-app/src/components/common/JSONViewer/__test__/JSONViewer.spec.tsx → kafka-ui-react-app/src/components/common/EditorViewer/__test__/EditorViewer.spec.tsx

@@ -1,21 +1,23 @@
 import React from 'react';
-import JSONViewer, {
+import EditorViewer, {
   FullMessageProps,
-} from 'components/common/JSONViewer/JSONViewer';
+} from 'components/common/EditorViewer/EditorViewer';
 import { render } from 'lib/testHelpers';
 import { screen } from '@testing-library/react';
 
 const data = { a: 1 };
 const maxLines = 28;
+const schemaType = 'JSON';
 
-describe('JSONViewer component', () => {
+describe('EditorViewer component', () => {
   const setupComponent = (props: FullMessageProps) =>
-    render(<JSONViewer {...props} />);
+    render(<EditorViewer {...props} />);
 
   it('renders JSONTree', () => {
     setupComponent({
       data: JSON.stringify(data),
       maxLines,
+      schemaType,
     });
     expect(screen.getByRole('textbox')).toBeInTheDocument();
   });
@@ -24,7 +26,7 @@ describe('JSONViewer component', () => {
     setupComponent({
       data: '',
       maxLines,
+      schemaType,
     });
-    expect(screen.getByText(JSON.stringify(''))).toBeInTheDocument();
   });
 });

kafka-ui-react-app/src/components/common/JSONEditor/JSONEditor.tsx

@@ -1,42 +0,0 @@
-/* eslint-disable react/jsx-props-no-spreading */
-import AceEditor, { IAceEditorProps } from 'react-ace';
-import 'ace-builds/src-noconflict/mode-json5';
-import 'ace-builds/src-noconflict/theme-tomorrow';
-import React from 'react';
-import ReactAce from 'react-ace/lib/ace';
-import styled from 'styled-components';
-
-interface JSONEditorProps extends IAceEditorProps {
-  isFixedHeight?: boolean;
-}
-
-const JSONEditor = React.forwardRef<ReactAce | null, JSONEditorProps>(
-  (props, ref) => {
-    const { isFixedHeight, ...rest } = props;
-    return (
-      <AceEditor
-        ref={ref}
-        mode="json5"
-        theme="tomorrow"
-        tabSize={2}
-        width="100%"
-        fontSize={14}
-        height={
-          isFixedHeight
-            ? `${(props.value?.split('\n').length || 32) * 16}px`
-            : '372px'
-        }
-        wrapEnabled
-        {...rest}
-      />
-    );
-  }
-);
-
-JSONEditor.displayName = 'JSONEditor';
-
-export default styled(JSONEditor)`
-  &.ace-tomorrow {
-    background: transparent;
-  }
-`;

kafka-ui-react-app/src/components/common/JSONViewer/JSONViewer.tsx

@@ -1,45 +0,0 @@
-import React from 'react';
-import JSONEditor from 'components/common/JSONEditor/JSONEditor';
-
-import { StyledWrapper } from './StyledWrapper.styled';
-
-export interface FullMessageProps {
-  data: string;
-  maxLines?: number;
-}
-
-const JSONViewer: React.FC<FullMessageProps> = ({ data, maxLines }) => {
-  try {
-    if (data.trim().startsWith('{')) {
-      return (
-        <StyledWrapper data-testid="json-viewer">
-          <JSONEditor
-            isFixedHeight
-            name="schema"
-            value={JSON.stringify(JSON.parse(data), null, '\t')}
-            setOptions={{
-              showLineNumbers: false,
-              maxLines,
-              showGutter: false,
-            }}
-            readOnly
-          />
-        </StyledWrapper>
-      );
-    }
-
-    return (
-      <StyledWrapper data-testid="json-viewer">
-        <p>{JSON.stringify(data)}</p>
-      </StyledWrapper>
-    );
-  } catch (e) {
-    return (
-      <StyledWrapper data-testid="json-viewer">
-        <p>{data}</p>
-      </StyledWrapper>
-    );
-  }
-};
-
-export default JSONViewer;

kafka-ui-react-app/src/components/common/SQLEditor/__tests__/SQLEditor.spec.tsx

@@ -2,7 +2,7 @@ import { shallow } from 'enzyme';
 import React from 'react';
 import SQLEditor from 'components/common/SQLEditor/SQLEditor';
 
-describe('JSONEditor component', () => {
+describe('SQLEditor component', () => {
   it('matches the snapshot', () => {
     const component = shallow(<SQLEditor value="" name="name" />);
     expect(component).toMatchSnapshot();

kafka-ui-react-app/src/components/common/SQLEditor/__tests__/__snapshots__/SQLEditor.spec.tsx.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`JSONEditor component matches the snapshot 1`] = `
+exports[`SQLEditor component matches the snapshot 1`] = `
 <ReactAce
   cursorStart={1}
   editorProps={Object {}}
@@ -42,7 +42,7 @@ exports[`JSONEditor component matches the snapshot 1`] = `
 />
 `;
 
-exports[`JSONEditor component matches the snapshot with fixed height 1`] = `
+exports[`SQLEditor component matches the snapshot with fixed height 1`] = `
 <ReactAce
   cursorStart={1}
   editorProps={Object {}}
@@ -84,7 +84,7 @@ exports[`JSONEditor component matches the snapshot with fixed height 1`] = `
 />
 `;
 
-exports[`JSONEditor component matches the snapshot with fixed height with no value 1`] = `
+exports[`SQLEditor component matches the snapshot with fixed height with no value 1`] = `
 <ReactAce
   cursorStart={1}
   editorProps={Object {}}