[CHORE] Get rid of react-json-tree (#387)

kafka-ui-react-app/package.json

@@ -21,7 +21,6 @@
     "react-datepicker": "^3.7.0",
     "react-dom": "^17.0.1",
     "react-hook-form": "^6.15.5",
-    "react-json-tree": "^0.15.0",
     "react-multi-select-component": "^4.0.0",
     "react-redux": "^7.2.2",
     "react-router": "^5.2.0",

kafka-ui-react-app/src/components/ConsumerGroups/Details/Details.tsx

@@ -54,7 +54,6 @@ const Details: React.FC<Props> = ({
 
       {isFetched ? (
         <div className="box">
-          <div className="table-container">
           <table className="table is-striped is-fullwidth">
             <thead>
               <tr>
@@ -78,7 +77,6 @@ const Details: React.FC<Props> = ({
             </tbody>
           </table>
         </div>
-        </div>
       ) : (
         <PageLoader />
       )}

kafka-ui-react-app/src/components/ConsumerGroups/List/List.tsx

@@ -37,7 +37,6 @@ const List: React.FC<Props> = ({ consumerGroups }) => {
                 />
               </div>
             </div>
-            <div className="table-container">
             <table className="table is-striped is-fullwidth is-hoverable">
               <thead>
                 <tr>
@@ -62,7 +61,6 @@ const List: React.FC<Props> = ({ consumerGroups }) => {
               </tbody>
             </table>
           </div>
-          </div>
         ) : (
           'No active consumer groups'
         )}

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

@@ -112,8 +112,7 @@ const Details: React.FC<DetailsProps> = ({
             <LatestVersionItem schema={schema} />
           </div>
           <div className="box">
-            <div className="table-container">
+            <table className="table is-fullwidth">
-              <table className="table is-striped is-fullwidth">
               <thead>
                 <tr>
                   <th>Version</th>
@@ -128,7 +127,6 @@ const Details: React.FC<DetailsProps> = ({
               </tbody>
             </table>
           </div>
-          </div>
         </>
       ) : (
         <PageLoader />

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import { SchemaSubject } from 'generated-sources';
-import JSONViewer from 'components/common/JSONViewer/JSONViewer';
+import JSONEditor from 'components/common/JSONEditor/JSONEditor';
 
 interface LatestVersionProps {
   schema: SchemaSubject;
@@ -12,7 +12,6 @@ const LatestVersionItem: React.FC<LatestVersionProps> = ({
   <div className="tile is-ancestor mt-1">
     <div className="tile is-4 is-parent">
       <div className="tile is-child">
-        <div className="table-container">
         <table className="table is-fullwidth">
           <tbody>
             <tr>
@@ -31,10 +30,14 @@ const LatestVersionItem: React.FC<LatestVersionProps> = ({
         </table>
       </div>
     </div>
-    </div>
     <div className="tile is-parent">
-      <div className="tile is-child box py-1">
+      <div className="tile is-child box">
-        <JSONViewer data={JSON.parse(schema)} />
+        <JSONEditor
+          name="schema"
+          value={JSON.stringify(JSON.parse(schema), null, '\t')}
+          showGutter={false}
+          readOnly
+        />
       </div>
     </div>
   </div>

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import { SchemaSubject } from 'generated-sources';
-import JSONViewer from 'components/common/JSONViewer/JSONViewer';
+import JSONEditor from 'components/common/JSONEditor/JSONEditor';
 
 interface SchemaVersionProps {
   version: SchemaSubject;
@@ -13,8 +13,13 @@ const SchemaVersion: React.FC<SchemaVersionProps> = ({
     <tr>
       <td>{version}</td>
       <td>{id}</td>
-      <td className="py-0">
+      <td>
-        <JSONViewer data={JSON.parse(schema)} />
+        <JSONEditor
+          name="schema"
+          value={JSON.stringify(JSON.parse(schema), null, '\t')}
+          showGutter={false}
+          readOnly
+        />
       </td>
     </tr>
   );

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

@@ -10,7 +10,7 @@ describe('LatestVersionItem', () => {
 
     expect(wrapper.find('table').length).toEqual(1);
     expect(wrapper.find('td').at(1).text()).toEqual('1');
-    expect(wrapper.exists('JSONViewer')).toBeTruthy();
+    expect(wrapper.exists('JSONEditor')).toBeTruthy();
   });
 
   it('matches snapshot', () => {

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

@@ -9,7 +9,7 @@ describe('SchemaVersion', () => {
     const wrapper = shallow(<SchemaVersion version={versions[0]} />);
 
     expect(wrapper.find('td').length).toEqual(3);
-    expect(wrapper.exists('JSONViewer')).toBeTruthy();
+    expect(wrapper.exists('JSONEditor')).toBeTruthy();
   });
 
   it('matches snapshot', () => {

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

@@ -93,12 +93,9 @@ exports[`Details View Initial state matches snapshot 1`] = `
   </div>
   <div
     className="box"
-  >
-    <div
-      className="table-container"
   >
     <table
-        className="table is-striped is-fullwidth"
+      className="table is-fullwidth"
     >
       <thead>
         <tr>
@@ -116,7 +113,6 @@ exports[`Details View Initial state matches snapshot 1`] = `
       <tbody />
     </table>
   </div>
-  </div>
 </div>
 `;
 
@@ -237,12 +233,9 @@ exports[`Details View when page with schema versions loaded when schema has vers
   </div>
   <div
     className="box"
-  >
-    <div
-      className="table-container"
   >
     <table
-        className="table is-striped is-fullwidth"
+      className="table is-fullwidth"
     >
       <thead>
         <tr>
@@ -287,7 +280,6 @@ exports[`Details View when page with schema versions loaded when schema has vers
       </tbody>
     </table>
   </div>
-  </div>
 </div>
 `;
 
@@ -384,12 +376,9 @@ exports[`Details View when page with schema versions loaded when versions are em
   </div>
   <div
     className="box"
-  >
-    <div
-      className="table-container"
   >
     <table
-        className="table is-striped is-fullwidth"
+      className="table is-fullwidth"
     >
       <thead>
         <tr>
@@ -407,7 +396,6 @@ exports[`Details View when page with schema versions loaded when versions are em
       <tbody />
     </table>
   </div>
-  </div>
 </div>
 `;
 

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

@@ -9,9 +9,6 @@ exports[`LatestVersionItem matches snapshot 1`] = `
   >
     <div
       className="tile is-child"
-    >
-      <div
-        className="table-container"
     >
       <table
         className="table is-fullwidth"
@@ -45,27 +42,27 @@ exports[`LatestVersionItem matches snapshot 1`] = `
       </table>
     </div>
   </div>
-  </div>
   <div
     className="tile is-parent"
   >
     <div
-      className="tile is-child box py-1"
+      className="tile is-child box"
     >
-      <JSONViewer
+      <JSONEditor
-        data={
+        name="schema"
-          Object {
+        readOnly={true}
-            "fields": Array [
+        showGutter={false}
-              Object {
+        value="{
-                "name": "id",
+	\\"type\\": \\"record\\",
-                "type": "long",
+	\\"name\\": \\"MyRecord1\\",
-              },
+	\\"namespace\\": \\"com.mycompany\\",
-            ],
+	\\"fields\\": [
-            "name": "MyRecord1",
+		{
-            "namespace": "com.mycompany",
+			\\"name\\": \\"id\\",
-            "type": "record",
+			\\"type\\": \\"long\\"
-          }
 		}
+	]
+}"
       />
     </div>
   </div>

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

@@ -8,23 +8,22 @@ exports[`SchemaVersion matches snapshot 1`] = `
   <td>
     1
   </td>
-  <td
+  <td>
-    className="py-0"
+    <JSONEditor
-  >
+      name="schema"
-    <JSONViewer
+      readOnly={true}
-      data={
+      showGutter={false}
-        Object {
+      value="{
-          "fields": Array [
+	\\"type\\": \\"record\\",
-            Object {
+	\\"name\\": \\"MyRecord1\\",
-              "name": "id",
+	\\"namespace\\": \\"com.mycompany\\",
-              "type": "long",
+	\\"fields\\": [
-            },
+		{
-          ],
+			\\"name\\": \\"id\\",
-          "name": "MyRecord1",
+			\\"type\\": \\"long\\"
-          "namespace": "com.mycompany",
-          "type": "record",
-        }
 		}
+	]
+}"
     />
   </td>
 </tr>

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

@@ -1,16 +1,16 @@
-import Breadcrumb from 'components/common/Breadcrumb/Breadcrumb';
+import React from 'react';
+import { useHistory } from 'react-router';
+import { useForm, Controller } from 'react-hook-form';
 import {
   CompatibilityLevelCompatibilityEnum,
   SchemaSubject,
   SchemaType,
 } from 'generated-sources';
 import { clusterSchemaPath, clusterSchemasPath } from 'lib/paths';
-import React from 'react';
 import { ClusterName, NewSchemaSubjectRaw, SchemaName } from 'redux/interfaces';
 import PageLoader from 'components/common/PageLoader/PageLoader';
-import { useHistory } from 'react-router';
 import JSONEditor from 'components/common/JSONEditor/JSONEditor';
-import { useForm } from 'react-hook-form';
+import Breadcrumb from 'components/common/Breadcrumb/Breadcrumb';
 
 export interface EditProps {
   subject: SchemaName;
@@ -143,17 +143,24 @@ const Edit = ({
               <div className="column is-one-half">
                 <h4 className="title is-5 mb-2">Latest Schema</h4>
                 <JSONEditor
-                  readonly
+                  readOnly
                   value={getFormattedSchema()}
                   name="latestSchema"
+                  highlightActiveLine={false}
                 />
               </div>
               <div className="column is-one-half">
                 <h4 className="title is-5 mb-2">New Schema</h4>
-                <JSONEditor
+                <Controller
                   control={control}
-                  value={getFormattedSchema()}
                   name="newSchema"
+                  render={({ name, onChange }) => (
+                    <JSONEditor
+                      defaultValue={getFormattedSchema()}
+                      name={name}
+                      onChange={onChange}
+                    />
+                  )}
                 />
               </div>
             </div>

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

@@ -54,7 +54,10 @@ describe('Edit Component', () => {
       expect(component).toMatchSnapshot();
     });
     it('shows editor', () => {
-      expect(component.find('JSONEditor').length).toEqual(2);
+      expect(component.find('JSONEditor[name="latestSchema"]').length).toEqual(
+        1
+      );
+      expect(component.find('Controller[name="newSchema"]').length).toEqual(1);
       expect(component.find('button').exists()).toBeTruthy();
     });
     it('does not fetch them', () => {

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

@@ -143,8 +143,9 @@ exports[`Edit Component when schemas are fetched matches the snapshot 1`] = `
             Latest Schema
           </h4>
           <JSONEditor
+            highlightActiveLine={false}
             name="latestSchema"
-            readonly={true}
+            readOnly={true}
             value="{
 	\\"schema\\": \\"schema\\"
 }"
@@ -158,7 +159,7 @@ exports[`Edit Component when schemas are fetched matches the snapshot 1`] = `
           >
             New Schema
           </h4>
-          <JSONEditor
+          <Controller
             control={
               Object {
                 "defaultValuesRef": Object {
@@ -261,9 +262,7 @@ exports[`Edit Component when schemas are fetched matches the snapshot 1`] = `
               }
             }
             name="newSchema"
-            value="{
+            render={[Function]}
-	\\"schema\\": \\"schema\\"
-}"
           />
         </div>
       </div>

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

@@ -49,7 +49,6 @@ const List: React.FC<ListProps> = ({
         <PageLoader />
       ) : (
         <div className="box">
-          <div className="table-container">
           <table className="table is-striped is-fullwidth">
             <thead>
               <tr>
@@ -70,7 +69,6 @@ const List: React.FC<ListProps> = ({
             </tbody>
           </table>
         </div>
-        </div>
       )}
     </div>
   );

kafka-ui-react-app/src/components/Topics/List/List.tsx

@@ -88,7 +88,6 @@ const List: React.FC<Props> = ({
         <PageLoader />
       ) : (
         <div className="box">
-          <div className="table-container">
           <table className="table is-fullwidth">
             <thead>
               <tr>
@@ -118,7 +117,6 @@ const List: React.FC<Props> = ({
           </table>
           <Pagination totalPages={totalPages} />
         </div>
-        </div>
       )}
     </div>
   );

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

@@ -1,10 +1,9 @@
 import React from 'react';
 import { format } from 'date-fns';
 import { TopicMessage } from 'generated-sources';
-import JSONViewer from 'components/common/JSONViewer/JSONViewer';
-import { isObject } from 'lodash';
 import Dropdown from 'components/common/Dropdown/Dropdown';
 import DropdownItem from 'components/common/Dropdown/DropdownItem';
+import JSONEditor from 'components/common/JSONEditor/JSONEditor';
 import useDataSaver from 'lib/hooks/useDataSaver';
 
 export interface MessageItemProp {
@@ -24,18 +23,19 @@ const MessageItem: React.FC<MessageItemProp> = ({
     'topic-message',
     (content as Record<string, string>) || ''
   );
-
   return (
     <tr>
       <td style={{ width: 200 }}>{format(timestamp, 'yyyy-MM-dd HH:mm:ss')}</td>
       <td style={{ width: 150 }}>{offset}</td>
       <td style={{ width: 100 }}>{partition}</td>
       <td style={{ wordBreak: 'break-word' }}>
-        {isObject(content) ? (
+        <JSONEditor
-          <JSONViewer data={content as Record<string, string>} />
+          readOnly
-        ) : (
+          value={JSON.stringify(content, null, '\t')}
-          content
+          name="latestSchema"
-        )}
+          highlightActiveLine={false}
+          height="300px"
+        />
       </td>
       <td className="has-text-right">
         <Dropdown

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

@@ -16,7 +16,6 @@ const MessagesTable: React.FC<MessagesTableProp> = ({ messages, onNext }) => {
 
   return (
     <>
-      <div className="table-container">
       <table className="table is-fullwidth">
         <thead>
           <tr>
@@ -41,7 +40,6 @@ const MessagesTable: React.FC<MessagesTableProp> = ({ messages, onNext }) => {
           )}
         </tbody>
       </table>
-      </div>
       <div className="columns">
         <div className="column is-full">
           <CustomParamButton

kafka-ui-react-app/src/components/Topics/Topic/Details/Messages/__test__/MessageItem.spec.tsx

@@ -10,12 +10,12 @@ jest.mock('date-fns', () => ({
 
 describe('MessageItem', () => {
   describe('when content is defined', () => {
-    it('renders table row with JSONTree', () => {
+    it('renders table row with JSONEditor', () => {
       const wrapper = shallow(<MessageItem {...messages[0]} />);
 
       expect(wrapper.find('tr').length).toEqual(1);
       expect(wrapper.find('td').length).toEqual(5);
-      expect(wrapper.find('JSONViewer').length).toEqual(1);
+      expect(wrapper.find('JSONEditor').length).toEqual(1);
     });
 
     it('matches snapshot', () => {
@@ -24,14 +24,6 @@ describe('MessageItem', () => {
   });
 
   describe('when content is undefined', () => {
-    it('renders table row without JSONTree', () => {
-      const wrapper = shallow(<MessageItem {...messages[1]} />);
-
-      expect(wrapper.find('tr').length).toEqual(1);
-      expect(wrapper.find('td').length).toEqual(5);
-      expect(wrapper.find('JSONViewer').length).toEqual(0);
-    });
-
     it('matches snapshot', () => {
       expect(shallow(<MessageItem {...messages[1]} />)).toMatchSnapshot();
     });

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

@@ -65,8 +65,8 @@ describe('Messages', () => {
         it('renders table', () => {
           expect(messagesWrapper.exists('.table.is-fullwidth')).toBeTruthy();
         });
-        it('renders JSONTree', () => {
+        it('renders JSONEditor', () => {
-          expect(messagesWrapper.find('JSONTree').length).toEqual(1);
+          expect(messagesWrapper.find('JSONEditor').length).toEqual(1);
         });
         it('parses message content correctly', () => {
           const messages = [

kafka-ui-react-app/src/components/Topics/Topic/Details/Messages/__test__/MessagesTable.spec.tsx

@@ -16,7 +16,7 @@ describe('MessagesTable', () => {
   );
 
   describe('when topic is empty', () => {
-    it('renders table row with JSONTree', () => {
+    it('renders table row with JSONEditor', () => {
       const wrapper = shallow(setupWrapper());
       expect(wrapper.exists('table')).toBeFalsy();
       expect(wrapper.exists('CustomParamButton')).toBeFalsy();
@@ -32,7 +32,7 @@ describe('MessagesTable', () => {
     const onNext = jest.fn();
     const wrapper = shallow(setupWrapper({ messages, onNext }));
 
-    it('renders table row without JSONTree', () => {
+    it('renders table row without JSONEditor', () => {
       expect(wrapper.exists('table')).toBeTruthy();
       expect(wrapper.exists('CustomParamButton')).toBeTruthy();
       expect(wrapper.find('MessageItem').length).toEqual(2);

kafka-ui-react-app/src/components/Topics/Topic/Details/Messages/__test__/__snapshots__/MessageItem.spec.tsx.snap

@@ -36,13 +36,15 @@ exports[`MessageItem when content is defined matches snapshot 1`] = `
       }
     }
   >
-    <JSONViewer
+    <JSONEditor
-      data={
+      height="300px"
-        Object {
+      highlightActiveLine={false}
-          "foo": "bar",
+      name="latestSchema"
-          "key": "val",
+      readOnly={true}
-        }
+      value="{
-      }
+	\\"foo\\": \\"bar\\",
+	\\"key\\": \\"val\\"
+}"
     />
   </td>
   <td
@@ -110,7 +112,14 @@ exports[`MessageItem when content is undefined matches snapshot 1`] = `
         "wordBreak": "break-word",
       }
     }
+  >
+    <JSONEditor
+      height="300px"
+      highlightActiveLine={false}
+      name="latestSchema"
+      readOnly={true}
     />
+  </td>
   <td
     className="has-text-right"
   >

kafka-ui-react-app/src/components/Topics/Topic/Details/Messages/__test__/__snapshots__/MessagesTable.spec.tsx.snap

@@ -2,9 +2,6 @@
 
 exports[`MessagesTable when topic contains messages matches snapshot 1`] = `
 <Fragment>
-  <div
-    className="table-container"
-  >
   <table
     className="table is-fullwidth"
   >
@@ -48,7 +45,6 @@ exports[`MessagesTable when topic contains messages matches snapshot 1`] = `
       />
     </tbody>
   </table>
-  </div>
   <div
     className="columns"
   >

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

@@ -47,7 +47,6 @@ const Settings: React.FC<Props> = ({
 
   return (
     <div className="box">
-      <div className="table-container">
       <table className="table is-striped is-fullwidth">
         <thead>
           <tr>
@@ -63,7 +62,6 @@ const Settings: React.FC<Props> = ({
         </tbody>
       </table>
     </div>
-    </div>
   );
 };
 

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

@@ -1,56 +1,18 @@
-import AceEditor from 'react-ace';
+/* 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-dawn';
+import 'ace-builds/src-noconflict/theme-textmate';
 import React from 'react';
-import { Control, Controller } from 'react-hook-form';
 
-interface JSONEditorProps {
+const JSONEditor: React.FC<IAceEditorProps> = (props) => (
-  readonly?: boolean;
-  onChange?: (e: string) => void;
-  value: string;
-  name: string;
-  control?: Control;
-}
-
-const JSONEditor: React.FC<JSONEditorProps> = ({
-  readonly,
-  onChange,
-  value,
-  name,
-  control,
-}) => {
-  if (control) {
-    return (
-      <Controller
-        control={control}
-        name={name}
-        as={
   <AceEditor
-            defaultValue={value}
     mode="json5"
-            theme="dawn"
+    theme="textmate"
-            name={name}
     tabSize={2}
     width="100%"
     wrapEnabled
+    {...props}
   />
-        }
+);
-      />
-    );
-  }
-  return (
-    <AceEditor
-      mode="json5"
-      theme="dawn"
-      name={name}
-      value={value}
-      tabSize={2}
-      width="100%"
-      readOnly={readonly}
-      onChange={onChange}
-      wrapEnabled
-    />
-  );
-};
 
 export default JSONEditor;

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

@@ -35,7 +35,7 @@ exports[`JSONEditor component matches the snapshot 1`] = `
   showPrintMargin={true}
   style={Object {}}
   tabSize={2}
-  theme="dawn"
+  theme="textmate"
   value="{}"
   width="100%"
   wrapEnabled={true}

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

@@ -1,13 +0,0 @@
-import React from 'react';
-import JSONTree from 'react-json-tree';
-import theme from 'components/common/JSONViewer/themes/google';
-
-interface JSONViewerProps {
-  data: Record<string, string>;
-}
-
-const JSONViewer: React.FC<JSONViewerProps> = ({ data }) => (
-  <JSONTree data={data} theme={theme} shouldExpandNode={() => true} hideRoot />
-);
-
-export default JSONViewer;

kafka-ui-react-app/src/components/common/JSONViewer/themes/google.ts

@@ -1,20 +0,0 @@
-export default {
-  scheme: 'google',
-  author: 'seth wright (http://sethawright.com)',
-  base00: '#1d1f21',
-  base01: '#282a2e',
-  base02: '#373b41',
-  base03: '#969896',
-  base04: '#b4b7b4',
-  base05: '#c5c8c6',
-  base06: '#e0e0e0',
-  base07: '#ffffff',
-  base08: '#CC342B',
-  base09: '#F96A38',
-  base0A: '#FBA922',
-  base0B: '#198844',
-  base0C: '#3971ED',
-  base0D: '#3971ED',
-  base0E: '#A36AC7',
-  base0F: '#3971ED',
-};

kafka-ui-react-app/src/redux/reducers/schemas/__test__/selectors.spec.ts

@@ -1,3 +1,4 @@
+import { orderBy } from 'lodash';
 import {
   createSchemaAction,
   fetchSchemasByClusterNameAction,
@@ -65,9 +66,9 @@ describe('Schemas selectors', () => {
       );
     });
 
-    it('returns sorted versions of schema', () => {
+    it('returns ordered versions of schema', () => {
       expect(selectors.getSortedSchemaVersions(store.getState())).toEqual(
-        schemaVersionsPayload
+        orderBy(schemaVersionsPayload, 'id', 'desc')
       );
     });
   });

kafka-ui-react-app/src/redux/reducers/schemas/selectors.ts

@@ -1,7 +1,7 @@
 import { createSelector } from 'reselect';
+import { orderBy } from 'lodash';
 import { RootState, SchemasState } from 'redux/interfaces';
 import { createFetchingSelector } from 'redux/reducers/loader/selectors';
-import { sortBy } from 'lodash';
 
 const schemasState = ({ schemas }: RootState): SchemasState => schemas;
 
@@ -56,5 +56,6 @@ export const getSchema = createSelector(
 
 export const getSortedSchemaVersions = createSelector(
   schemasState,
-  ({ currentSchemaVersions }) => sortBy(currentSchemaVersions, ['id'])
+  ({ currentSchemaVersions }) =>
+    orderBy(currentSchemaVersions, ['id'], ['desc'])
 );