Text editors support line wrapping

src/App.js

@@ -216,6 +216,7 @@ export default function App(props) {
   const [isDragging, setIsDragging] = useState(false);
   const [configToShare, setConfigToShare] = useState({ canonical: '', version: '', fhirVersion: [], dependencies: '' });
   const [sharedConfig, setSharedConfig] = useState({});
+  const [isLineWrapped, setIsLineWrapped] = useState(false);
 
   useEffect(() => {
     async function waitForFSH() {
@@ -313,6 +314,10 @@ export default function App(props) {
     setIsDragging(false);
   }
 
+  function setLineWrap(wrapSelected) {
+    setIsLineWrapped(wrapSelected);
+  }
+
   function debouncedMove(clientX) {
     if (isDragging) {
       const newPercentage = (clientX / window.innerWidth) * 100;
@@ -409,6 +414,8 @@ export default function App(props) {
             exampleMetadata={exampleFilePaths}
             isWaiting={isWaitingForFSHOutput || isWaitingForFHIROutput}
             saveAll={saveAll}
+            setIsLineWrapped={setLineWrap}
+            isLineWrapped={isLineWrapped}
           />
         </div>
         <div className={expandConsole ? classes.collapsedMain : classes.expandedMain}>
@@ -433,6 +440,7 @@ export default function App(props) {
                   isWaiting={isWaitingForFSHOutput}
                   setInitialText={setInitialText}
                   config={configToShare}
+                  isLineWrapped={isLineWrapped}
                 />
               </Grid>
               <Grid
@@ -457,6 +465,7 @@ export default function App(props) {
                   setShowNewText={setShowNewFHIRText}
                   isWaiting={isWaitingForFHIROutput}
                   updateTextValue={updateInputFHIRTextValue}
+                  isLineWrapped={isLineWrapped}
                 />
               </Grid>
             </Grid>

src/components/CodeMirrorComponent.js

@@ -323,7 +323,8 @@ export default function CodeMirrorComponent(props) {
             'Ctrl-Q': (cm) => {
               cm.foldCode(cm.getCursor());
             }
-          }
+          },
+          lineWrapping: props.isLineWrapped
         }}
         onChange={(editor, data, value) => {
           updateText(value);

src/components/FSHControls.js

@@ -172,6 +172,11 @@ export default function FSHControls(props) {
     setIsGoFSHIndented(isIndented);
   };
 
+  const updateLineWrapping = (event) => {
+    const isLineWrappedChecked = event.target.checked;
+    props.setIsLineWrapped(isLineWrappedChecked);
+  };
+
   async function handleSUSHIClick() {
     if (props.isWaiting) {
       // If SUSHI or GoFSH is in the middle of processes, don't do anything
@@ -388,6 +393,14 @@ export default function FSHControls(props) {
             onChange={updateIsGoFSHIndented}
           />
           <FormHelperText>If set, Convert to FSH will output FSH using path rules</FormHelperText>
+          <FormControlLabel
+            id="lineWrap"
+            margin="dense"
+            control={<Checkbox checked={props.isLineWrapped} color="primary" />}
+            label="Line wrap within code editors"
+            onChange={updateLineWrapping}
+          />
+          <FormHelperText>If set, FSH Online will display code with line wrapping</FormHelperText>
         </DialogContent>
         <DialogActions>
           <Button onClick={handleCloseConfig} color="primary">
@@ -426,6 +439,7 @@ export default function FSHControls(props) {
                 updateTextValue={updateExampleValue}
                 mode={'fsh'}
                 placeholder={isFetchingExample ? 'Fetching example...' : 'Select an example'}
+                isLineWrapped={props.isLineWrapped}
               />
             </Grid>
           </Grid>

src/components/FSHOutput.js

@@ -32,6 +32,7 @@ export default function FSHOutput(props) {
         delete={handleOpenDeleteModal}
         save={handleSave}
         config={props.config}
+        isLineWrapped={props.isLineWrapped}
       />
       {openDeleteModal && (
         <DeleteConfirmationModal

src/components/JSONOutput.js

@@ -421,6 +421,7 @@ export default function JSONOutput(props) {
         isExamples={false}
         delete={handleOpenDeleteConfirmation}
         save={() => handleSave(displayValue, name)}
+        isLineWrapped={props.isLineWrapped}
       />
       {openDeleteConfirmation && renderDeleteModal()}
     </>

src/tests/App.test.js

@@ -1,8 +1,14 @@
-import { waitFor } from '@testing-library/react';
-import { decodeFSH } from '../App';
+import { waitFor, render, fireEvent } from '@testing-library/react';
+import App, { decodeFSH } from '../App';
 import * as bitlyWorker from '../utils/BitlyWorker';
 
-test('decodeFSH will return a properly decoded string from base64', async () => {
+it('basic app renders', () => {
+  const { getByText } = render(<App match={{}} />);
+  const linkElement = getByText(/FSH Online/i);
+  expect(linkElement).toBeInTheDocument();
+});
+
+it('decodeFSH will return a properly decoded string from base64', async () => {
   const expandLinkSpy = jest.spyOn(bitlyWorker, 'expandLink').mockReset().mockResolvedValue({
     long_url: 'https://fshschool.org/FSHOnline/#/share/eJzzyNRRKMnILFYAokSFktTiEoW0/CKFlNTk/JTMvHQ9ALALCwU='
   });
@@ -16,3 +22,21 @@ test('decodeFSH will return a properly decoded string from base64', async () =>
     expect(expandLinkSpy).toHaveBeenCalled();
   });
 });
+
+it('line wrapping selection is reflected in parent on selection of checkbox', async () => {
+  const { container, getByRole, getByLabelText } = render(<App match={{}} />);
+  // wrapping not set by default
+  expect(container.querySelector('.CodeMirror')).toBeInTheDocument();
+  expect(container.querySelector('.CodeMirror-wrap')).not.toBeInTheDocument();
+
+  // click check box for line wrapping
+  const configButton = getByRole('button', { name: /Configuration/i });
+  fireEvent.click(configButton);
+  const isLineWrappedCheckbox = getByLabelText('Line wrap within code editors');
+  expect(isLineWrappedCheckbox).not.toBeChecked();
+  fireEvent.click(isLineWrappedCheckbox);
+
+  // line wrapping set after clicked
+  expect(container.querySelector('.CodeMirror')).toBeInTheDocument();
+  expect(container.querySelector('.CodeMirror-wrap')).toBeInTheDocument();
+});

src/tests/components/CodeMirrorComponent.test.js

@@ -63,6 +63,22 @@ 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
+  );
+  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} />,
+    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);

src/tests/components/FSHControls.test.js

@@ -242,6 +242,49 @@ it('calls GoFSH with the indent option if the configuration checkbox is checked'
   });
 });
 
+it('displays code with line wrapping in the code editors if the configuration checkbox is checked', async () => {
+  const examplePatient = {
+    resourceType: 'Patient',
+    id: 'MyPatient',
+    gender: 'female'
+  };
+  const onGoFSHClick = jest.fn();
+  const resetLogMessages = jest.fn();
+  let wrapped = false;
+  const setIsLineWrapped = jest.fn(() => {
+    wrapped = !wrapped;
+  });
+  const { getByRole, getByLabelText, rerender } = render(
+    <FSHControls
+      onGoFSHClick={onGoFSHClick}
+      gofshText={[{ def: JSON.stringify(examplePatient, null, 2) }]}
+      resetLogMessages={resetLogMessages}
+      exampleConfig={[]}
+      setIsLineWrapped={setIsLineWrapped}
+      isLineWrapped={wrapped}
+    />,
+    container
+  );
+
+  const configButton = getByRole('button', { name: /Configuration/i });
+  fireEvent.click(configButton);
+  const isLineWrappedCheckbox = getByLabelText('Line wrap within code editors');
+  expect(isLineWrappedCheckbox).not.toBeChecked();
+  fireEvent.click(isLineWrappedCheckbox);
+  rerender(
+    <FSHControls
+      onGoFSHClick={onGoFSHClick}
+      gofshText={[{ def: JSON.stringify(examplePatient, null, 2) }]}
+      resetLogMessages={resetLogMessages}
+      exampleConfig={[]}
+      setIsLineWrapped={setIsLineWrapped}
+      isLineWrapped={wrapped}
+    />,
+    container
+  );
+  expect(isLineWrappedCheckbox).toBeChecked();
+});
+
 it('uses user provided canonical when calling runSUSHI', async () => {
   const onClick = jest.fn();
   const resetLogMessages = jest.fn();