Remove unnecessary Edit tab in WebIDE

- https://gitlab.com/gitlab-org/gitlab/-/issues/347522
- Also updates editor to resize when tabs are being shown/hidden

Changelog: changed

app/assets/javascripts/ide/components/repo_editor.vue

@@ -147,6 +147,9 @@ export default {
     fileType() {
       return this.previewMode?.id || '';
     },
+    showTabs() {
+      return !this.shouldHideEditor && this.isEditModeActive && this.previewMode;
+    },
   },
   watch: {
     'file.name': {
@@ -194,6 +197,9 @@ export default {
         this.refreshEditorDimensions();
       }
     },
+    showTabs() {
+      this.$nextTick(() => this.refreshEditorDimensions());
+    },
     rightPaneIsOpen() {
       this.refreshEditorDimensions();
     },
@@ -410,7 +416,7 @@ export default {
       }
     },
     refreshEditorDimensions() {
-      if (this.showEditor) {
+      if (this.showEditor && this.editor) {
         this.editor.updateDimensions();
       }
     },
@@ -495,7 +501,7 @@ export default {
 
 <template>
   <div id="ide" class="blob-viewer-container blob-editor-container">
-    <div v-if="!shouldHideEditor && isEditModeActive" class="ide-mode-tabs clearfix">
+    <div v-if="showTabs" class="ide-mode-tabs clearfix">
       <ul class="nav-links float-left border-bottom-0">
         <li :class="editTabCSS">
           <a
@@ -506,7 +512,7 @@ export default {
             >{{ __('Edit') }}</a
           >
         </li>
-        <li v-if="previewMode" :class="previewTabCSS">
+        <li :class="previewTabCSS">
           <a
             href="javascript:void(0);"
             role="button"

spec/frontend/ide/components/repo_editor_spec.js

@@ -169,12 +169,11 @@ describe('RepoEditor', () => {
       expect(findEditor().isVisible()).toBe(true);
     });
 
-    it('renders only an edit tab', async () => {
+    it('renders no tabs', async () => {
       await createComponent();
       const tabs = findTabs();
 
-      expect(tabs).toHaveLength(1);
-      expect(tabs.at(0).text()).toBe('Edit');
+      expect(tabs).toHaveLength(0);
     });
   });
 
@@ -196,25 +195,48 @@ describe('RepoEditor', () => {
       mock.restore();
     });
 
-    it('renders an Edit and a Preview Tab', async () => {
-      await createComponent({ activeFile });
-      const tabs = findTabs();
+    describe('when files is markdown', () => {
+      let layoutSpy;
 
-      expect(tabs).toHaveLength(2);
-      expect(tabs.at(0).text()).toBe('Edit');
-      expect(tabs.at(1).text()).toBe('Preview Markdown');
-    });
+      beforeEach(async () => {
+        await createComponent({ activeFile });
+        layoutSpy = jest.spyOn(wrapper.vm.editor, 'layout');
+      });
 
-    it('renders markdown for tempFile', async () => {
-      // by default files created in the spec are temp: no need for explicitly sending the param
-      await createComponent({ activeFile });
+      it('renders an Edit and a Preview Tab', () => {
+        const tabs = findTabs();
 
-      findPreviewTab().trigger('click');
-      await waitForPromises();
-      expect(wrapper.find(ContentViewer).html()).toContain(defaultFileProps.content);
+        expect(tabs).toHaveLength(2);
+        expect(tabs.at(0).text()).toBe('Edit');
+        expect(tabs.at(1).text()).toBe('Preview Markdown');
+      });
+
+      it('renders markdown for tempFile', async () => {
+        findPreviewTab().trigger('click');
+        await waitForPromises();
+        expect(wrapper.find(ContentViewer).html()).toContain(defaultFileProps.content);
+      });
+
+      it('should not trigger layout', async () => {
+        expect(layoutSpy).not.toHaveBeenCalled();
+      });
+
+      describe('when file changes to non-markdown file', () => {
+        beforeEach(async () => {
+          wrapper.setProps({ file: dummyFile.empty });
+        });
+
+        it('should hide tabs', () => {
+          expect(findTabs()).toHaveLength(0);
+        });
+
+        it('should trigger refresh dimensions', async () => {
+          expect(layoutSpy).toHaveBeenCalledTimes(1);
+        });
+      });
     });
 
-    it('shows no tabs when not in Edit mode', async () => {
+    it('when not in edit mode, shows no tabs', async () => {
       await createComponent({
         state: {
           currentActivityView: leftSidebarViews.review.name,
@@ -405,7 +427,7 @@ describe('RepoEditor', () => {
 
     it.each`
       mode        | isVisible
-      ${'edit'}   | ${true}
+      ${'edit'}   | ${false}
       ${'review'} | ${false}
       ${'commit'} | ${false}
     `('tabs in $mode are $isVisible', async ({ mode, isVisible } = {}) => {