From b5019000bbfe12dfccfc144293d69285e237d756 Mon Sep 17 00:00:00 2001
From: Oliver Eyton-Williams <ojeytonwilliams@gmail.com>
Date: Fri, 24 Sep 2021 16:40:18 +0200
Subject: [PATCH] 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 ++-
 client/src/templates/Challenges/classic/EditorTabs.js    | 3 ++-
 utils/sort-files.js                                      | 2 ++
 utils/sort-files.test.js                                 | 4 ++--
 4 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/client/src/templates/Challenges/classic/DesktopLayout.js b/client/src/templates/Challenges/classic/DesktopLayout.js
index 123f8e1255..610d8c4653 100644
--- a/client/src/templates/Challenges/classic/DesktopLayout.js
+++ b/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() {
diff --git a/client/src/templates/Challenges/classic/EditorTabs.js b/client/src/templates/Challenges/classic/EditorTabs.js
index 275721494d..98318a666a 100644
--- a/client/src/templates/Challenges/classic/EditorTabs.js
+++ b/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'
diff --git a/utils/sort-files.js b/utils/sort-files.js
index 433a1a8e4d..caec9b25dd 100644
--- a/utils/sort-files.js
+++ b/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;
diff --git a/utils/sort-files.test.js b/utils/sort-files.test.js
index bb17949c7f..12675ac086 100644
--- a/utils/sort-files.test.js
+++ b/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);
     });
   });