feat(client): Editor file visual indication (#59186)

client/src/templates/Challenges/classic/editor.css

@@ -60,6 +60,14 @@ textarea.inputarea {
   white-space: pre-wrap;
 }
 
+.editor-file-name {
+  font-size: 18px;
+  font-weight: bold;
+  border-bottom: 1px solid var(--quaternary-background);
+  padding-left: 11px;
+  overflow: hidden;
+}
+
 .action-row-container,
 .description-container {
   background-color: var(--secondary-background);

client/src/templates/Challenges/classic/editor.tsx

@@ -1317,8 +1317,15 @@ const Editor = (props: EditorProps): JSX.Element => {
     return challengeIsComplete();
   };
 
+  const challengeFile = props.challengeFiles?.find(
+    challengeFile => challengeFile.fileKey === props.fileKey
+  );
+  const showFileName = challengeFile && props.challengeFiles!.length > 1;
   return (
     <Suspense fallback={<Loader loaderDelay={600} />}>
+      {showFileName && (
+        <div className='editor-file-name'>{`${challengeFile.name}.${challengeFile.ext}`}</div>
+      )}
       <span className='notranslate'>
         <MonacoEditor
           editorDidMount={editorDidMount}

e2e/multifile-editor.spec.ts

@@ -12,8 +12,7 @@ test.beforeEach(async ({ page }) => {
 
 test.describe('MultifileEditor Component', () => {
   test('Multiple editors should be selected and able to insert text into', async ({
-    page,
-    isMobile
+    page
   }) => {
     // Spawn second editor to test MultifileEditor component
     const stylesEditor = page.getByRole('button', {
@@ -31,13 +30,7 @@ test.describe('MultifileEditor Component', () => {
     const test_string = 'TestString';
     let index = 0;
     for (const editor of await editors.all()) {
-      // For some reason the click event doesn't work on mobile
-      if (isMobile) {
       await editor.focus();
-      } else {
-        await editor.click();
-      }
-
       await page.keyboard.insertText(test_string + index.toString());
       const text = page.getByText(test_string + index.toString());
       await expect(text).toBeVisible();