fix(client): errors with multiple editor tabs (#43549)

* fix: enforce multifile tab order

* fix: sort challengeFiles to prevent remounts

If the challengeFiles are used unsorted, this can unmount an editor.
The editors rely on the mount hook for initialization, so extra mounts
can cause unwanted behaviour.

* fix: make editor tabs and panes match

client/src/templates/Challenges/classic/DesktopLayout.js

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import { ReflexContainer, ReflexSplitter, ReflexElement } from 'react-reflex';
 import envData from '../../../../../config/env.json';
+import { toSortedArray } from '../../../../../utils/sort-files';
 import EditorTabs from './EditorTabs';
 import ActionRow from './action-row.tsx';
 
@@ -58,7 +59,7 @@ class DesktopLayout extends Component {
 
   getChallengeFile() {
     const { challengeFiles } = this.props;
-    return first(challengeFiles);
+    return first(toSortedArray(challengeFiles));
   }
 
   render() {

client/src/templates/Challenges/classic/EditorTabs.js

@@ -3,6 +3,7 @@ import React, { Component } from 'react';
 import { connect } from 'react-redux';
 import { createSelector } from 'reselect';
 
+import { toSortedArray } from '../../../../../utils/sort-files';
 import {
   toggleVisibleEditor,
   visibleEditorsSelector,
@@ -38,7 +39,7 @@ class EditorTabs extends Component {
     const { challengeFiles, toggleVisibleEditor, visibleEditors } = this.props;
     return (
       <div className='monaco-editor-tabs'>
-        {challengeFiles.map(challengeFile => (
+        {toSortedArray(challengeFiles).map(challengeFile => (
           <button
             aria-selected={visibleEditors[challengeFile.fileKey]}
             className='monaco-editor-tab'

utils/sort-files.js

@@ -5,6 +5,8 @@ exports.toSortedArray = function toSortedArray(challengeFiles) {
   xs.sort((a, b) => {
     if (a.ext === 'html') return -1;
     if (b.ext === 'html') return 1;
+    if (a.ext === 'css') return -1;
+    if (b.ext === 'css') return 1;
     if (a.ext === 'jsx') return -1;
     if (b.ext === 'jsx') return 1;
     if (a.ext === 'js') return -1;

utils/sort-files.test.js

@@ -14,10 +14,10 @@ describe('sort-files', () => {
       expect(sorted.length).toEqual(expected.length);
     });
 
-    it('should sort the objects into html, js, css order', () => {
+    it('should sort the objects into html, css, jsx, js order', () => {
       const sorted = challengeFiles;
       const sortedKeys = sorted.map(({ fileKey }) => fileKey);
-      const expected = ['indexhtml', 'indexjsx', 'indexjs', 'indexcss'];
+      const expected = ['indexhtml', 'indexcss', 'indexjsx', 'indexjs'];
       expect(sortedKeys).toStrictEqual(expected);
     });
   });