feat(tools): allow tsx tabs (#61936)

Co-authored-by: Huyen Nguyen <25715018+huyenltnguyen@users.noreply.github.com>

client/utils/__fixtures__/challenges.ts

@@ -70,5 +70,19 @@ export const challengeFiles: ChallengeFile[] = [
     editableRegionBoundaries: [],
     usesMultifileEditor: true,
     path: 'index.jsx',
+  },
+  {
+    contents: 'some tsx',
+    error: null,
+    ext: 'tsx',
+    head: '',
+    history: ['index.tsx'],
+    fileKey: 'indextsx',
+    name: 'index',
+    seed: 'some tsx',
+    tail: '',
+    editableRegionBoundaries: [],
+    usesMultifileEditor: true,
+    path: 'index.tsx',
   }
 ]

client/utils/sort-challengefiles.test.ts

@@ -14,11 +14,12 @@ describe('sort-files', () => {
       expect(sorted.length).toEqual(expected.length);
     });
 
-    it('should sort the objects into jsx, html, css, js, ts order', () => {
+    it('should sort the objects into jsx, tsx, html, css, js, ts order', () => {
       const sorted = sortChallengeFiles(challengeFiles);
       const sortedKeys = sorted.map(({ fileKey }) => fileKey);
       const expected = [
         'indexjsx',
+        'indextsx',
         'indexhtml',
         'stylescss',
         'scriptjs',

client/utils/sort-challengefiles.ts

@@ -4,6 +4,8 @@ export function sortChallengeFiles<File extends { fileKey: string }>(
   return challengeFiles.toSorted((a, b) => {
     if (a.fileKey === 'indexjsx') return -1;
     if (b.fileKey === 'indexjsx') return 1;
+    if (a.fileKey === 'indextsx') return -1;
+    if (b.fileKey === 'indextsx') return 1;
     if (a.fileKey === 'indexhtml') return -1;
     if (b.fileKey === 'indexhtml') return 1;
     if (a.fileKey === 'stylescss') return -1;