Rename CodeMirrorComponent -> CodeEditor and ConsoleComponent -> Console

src/App.jsx

@@ -10,7 +10,7 @@ import { expandLink } from './utils/BitlyWorker';
 import TopBar from './components/TopBar';
 import JSONOutput from './components/JSONOutput';
 import FSHOutput from './components/FSHOutput';
-import ConsoleComponent from './components/ConsoleComponent';
+import Console from './components/Console';
 import FSHControls from './components/FSHControls';
 import theme from './theme';
 
@@ -420,7 +420,7 @@ export default function App(props) {
           </ExpandedConsoleContext.Provider>
         </div>
         <div className={expandConsole ? classes.expandedConsole : classes.collapsedConsole}>
-          <ConsoleComponent
+          <Console
             consoleMessages={infoMessages}
             problemMessages={problemMessages}
             problemCount={problemCount}

src/components/CodeMirrorComponent.jsx → src/components/CodeEditor.jsx

@@ -8,7 +8,7 @@ import { makeStyles } from '@material-ui/core/styles';
 import CodeMirror from 'codemirror';
 import { ExpandedConsoleContext } from '../App';
 import ShareLink from './ShareLink';
-import '../style/CodeMirrorComponent.css';
+import '../style/CodeEditor.css';
 import 'codemirror/lib/codemirror.css';
 import 'codemirror/theme/material.css';
 import 'codemirror/addon/fold/foldgutter.css';
@@ -211,7 +211,7 @@ const useStyles = makeStyles((theme) => ({
   }
 }));
 
-export default function CodeMirrorComponent(props) {
+export default function CodeEditor(props) {
   const classes = useStyles();
   const expandedConsoleContext = useContext(ExpandedConsoleContext);
   const [drawerOpen, setDrawerOpen] = useState(true);

src/components/FSHControls.jsx

@@ -31,7 +31,7 @@ import {
 import { runSUSHI, runGoFSH } from '../utils/FSHHelpers';
 import { sliceDependency } from '../utils/helpers';
 import { TreeView, TreeItem } from '@material-ui/lab';
-import CodeMirrorComponent from './CodeMirrorComponent';
+import CodeEditor from './CodeEditor';
 
 const useStyles = makeStyles((theme) => ({
   box: {
@@ -431,7 +431,7 @@ export default function FSHControls(props) {
               </TreeView>
             </Grid>
             <Grid item xs={8}>
-              <CodeMirrorComponent
+              <CodeEditor
                 name={currentExample ? currentExampleName : ''}
                 isExamples={true}
                 value={currentExample}

src/components/FSHOutput.jsx

@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import FileSaver from 'file-saver';
-import CodeMirrorComponent from './CodeMirrorComponent';
+import CodeEditor from './CodeEditor';
 import DeleteConfirmationModal from './DeleteConfirmationModal';
 
 export default function FSHOutput(props) {
@@ -21,7 +21,7 @@ export default function FSHOutput(props) {
 
   return (
     <>
-      <CodeMirrorComponent
+      <CodeEditor
         name={'FSH'}
         isExamples={false}
         value={props.text}

src/components/JSONOutput.jsx

@@ -5,7 +5,7 @@ import { makeStyles } from '@material-ui/core/styles';
 import clsx from 'clsx';
 import { Button, List, ListItem, Tooltip } from '@material-ui/core';
 import { Add, ErrorOutline } from '@material-ui/icons';
-import CodeMirrorComponent from './CodeMirrorComponent';
+import CodeEditor from './CodeEditor';
 import DeleteConfirmationModal from './DeleteConfirmationModal';
 
 const useStyles = makeStyles((theme) => ({
@@ -406,7 +406,7 @@ export default function JSONOutput(props) {
 
   return (
     <>
-      <CodeMirrorComponent
+      <CodeEditor
         name={`FHIR JSON: ${name}`}
         value={displayValue}
         initialText={initialText}

src/tests/components/CodeMirrorComponent.test.jsx → src/tests/components/CodeEditor.test.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { render, fireEvent, waitFor } from '@testing-library/react';
 import { unmountComponentAtNode } from 'react-dom';
-import CodeMirrorComponent from '../../components/CodeMirrorComponent';
+import CodeEditor from '../../components/CodeEditor';
 
 let container = null;
 beforeEach(() => {
@@ -16,7 +16,7 @@ afterEach(() => {
 });
 
 it('Renders initial text in the editor', () => {
-  const { getByText } = render(<CodeMirrorComponent initialText="Edit FSH here!" />, container);
+  const { getByText } = render(<CodeEditor initialText="Edit FSH here!" />, container);
   const textElement = getByText(/Edit FSH here!/i);
 
   expect(textElement).toBeInTheDocument();
@@ -25,7 +25,7 @@ it('Renders initial text in the editor', () => {
 it('Renders a drawer when one is provided in props', () => {
   const renderDrawer = () => <div>Simple drawer contents</div>;
   const { getByText, getByRole } = render(
-    <CodeMirrorComponent initialText="Some text" renderDrawer={renderDrawer} />,
+    <CodeEditor initialText="Some text" renderDrawer={renderDrawer} />,
     container
   );
   const drawerText = getByText(/simple drawer contents/i);
@@ -37,7 +37,7 @@ it('Renders a drawer when one is provided in props', () => {
 it('Drawer can be collapsed and expanded', async () => {
   const renderDrawer = () => <div>Simple drawer contents</div>;
   const { getByRole, queryByRole, getByTestId } = render(
-    <CodeMirrorComponent initialText="Some text" renderDrawer={renderDrawer} />,
+    <CodeEditor initialText="Some text" renderDrawer={renderDrawer} />,
     container
   );
   let drawer = getByTestId('editor-drawer');
@@ -64,24 +64,21 @@ it('Drawer can be collapsed and expanded', async () => {
 });
 
 it('Editor wraps when text wrapping is true', async () => {
-  const { container: renderContainer } = render(
-    <CodeMirrorComponent initialText="Some text" isLineWrapped={true} />,
-    container
-  );
+  const { container: renderContainer } = render(<CodeEditor initialText="Some text" isLineWrapped={true} />, container);
   expect(renderContainer.querySelector('.CodeMirror-wrap')).toBeInTheDocument();
 });
 
 it('Editor does not wrap when text wrapping is false', async () => {
   const { container: renderContainer } = render(
-    <CodeMirrorComponent initialText="Some text" isLineWrapped={false} />,
+    <CodeEditor initialText="Some text" isLineWrapped={false} />,
     container
   );
   expect(renderContainer.querySelector('.CodeMirror-wrap')).not.toBeInTheDocument();
 });
 
 it('Does not renders a drawer or expand button when one is not provided in props', () => {
   // No renderDrawer prop passed in
-  const { queryByRole } = render(<CodeMirrorComponent initialText="Some text" />, container);
+  const { queryByRole } = render(<CodeEditor initialText="Some text" />, container);
   const expandButton = queryByRole('button', { name: /expand/i });
   const collapseButton = queryByRole('button', { name: /collapse/i });
   expect(expandButton).not.toBeInTheDocument();
@@ -93,7 +90,7 @@ it('Renders action buttons for specified actions', () => {
   const saveMock = vi.fn();
   const deleteMock = vi.fn();
   const { getByRole } = render(
-    <CodeMirrorComponent initialText="Edit FSH here!" copy={copyMock} save={saveMock} delete={deleteMock} />,
+    <CodeEditor initialText="Edit FSH here!" copy={copyMock} save={saveMock} delete={deleteMock} />,
     container
   );
 
@@ -108,7 +105,7 @@ it('Renders action buttons for specified actions', () => {
 
 it('Does not render action buttons for unspecified actions', () => {
   const deleteMock = vi.fn();
-  const { queryByRole } = render(<CodeMirrorComponent initialText="Edit FSH here!" delete={deleteMock} />, container);
+  const { queryByRole } = render(<CodeEditor initialText="Edit FSH here!" delete={deleteMock} />, container);
 
   const copyButton = queryByRole('button', { name: /copy/i });
   const saveButton = queryByRole('button', { name: /save/i });
@@ -122,18 +119,15 @@ it('Does not render action buttons for unspecified actions', () => {
 
 it('Renders Share option for fsh mode', () => {
   // set mode to fsh
-  const { getByRole } = render(<CodeMirrorComponent initialText="Edit FSH here!" mode={'fsh'} />, container);
+  const { getByRole } = render(<CodeEditor initialText="Edit FSH here!" mode={'fsh'} />, container);
 
   const shareButton = getByRole('button', { name: /share fsh/i });
   expect(shareButton).toBeInTheDocument();
 });
 
 it('Does not render Share option for non-fsh mode', () => {
   // mode is anything but fsh
-  const { queryByRole } = render(
-    <CodeMirrorComponent initialText="Edit FSH here!" mode={'application/json'} />,
-    container
-  );
+  const { queryByRole } = render(<CodeEditor initialText="Edit FSH here!" mode={'application/json'} />, container);
 
   const shareButton = queryByRole('button', { name: /share fsh/i });
   expect(shareButton).not.toBeInTheDocument();

src/tests/components/ConsoleComponent.test.jsx → src/tests/components/Console.test.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { render } from '@testing-library/react';
 import { unmountComponentAtNode } from 'react-dom';
-import ConsoleComponent from '../../components/ConsoleComponent';
+import Console from '../../components/Console';
 
 let container = null;
 beforeEach(() => {
@@ -16,7 +16,7 @@ afterEach(() => {
 });
 
 it('Renders with the appropriate label', () => {
-  const { getByText } = render(<ConsoleComponent consoleMessages={[]} problemMessages={[]} />, container);
+  const { getByText } = render(<Console consoleMessages={[]} problemMessages={[]} />, container);
   const textElement = getByText('Console');
 
   expect(textElement).toBeInTheDocument();
@@ -25,10 +25,7 @@ it('Renders with the appropriate label', () => {
 it('Renders with proper messages in the console', () => {
   const infoMessages = ['Hello', 'Goodbye', 'How are you?'];
 
-  const { getByText, queryByText } = render(
-    <ConsoleComponent consoleMessages={infoMessages} problemMessages={[]} />,
-    container
-  );
+  const { getByText, queryByText } = render(<Console consoleMessages={infoMessages} problemMessages={[]} />, container);
   const textElement1 = getByText(/Hello/i);
   const textElement2 = getByText(/Goodbye/i);
   const textElement3 = getByText(/How are you\?/i);
@@ -45,7 +42,7 @@ it('Renders error and warning labels when passed in as messages', () => {
   const problemMessages = ['error foo', 'error bar', 'warning foo', 'warning bar'];
 
   const { queryByText } = render(
-    <ConsoleComponent consoleMessages={infoMessages} problemMessages={problemMessages} />,
+    <Console consoleMessages={infoMessages} problemMessages={problemMessages} />,
     container
   );
   const successLabel = queryByText(/Success!/i);

src/tests/components/JSONOutput.test.jsx

@@ -33,7 +33,7 @@ it('Renders with the proper text and updates with proper text when loading', ()
   expect(loadingPlaceholderText).toBeInTheDocument();
 });
 
-// TODO: CodeMirrorComponent doesn't get the package text properly - not sure why
+// TODO: CodeEditor doesn't get the package text properly - not sure why
 it.skip('Renders with the first profile when text is an object (SUSHI Package)', async () => {
   const { getByText } = render(
     <JSONOutput