Hide commit form for lint and viz tabs in pipeline editor

app/assets/javascripts/pipeline_editor/constants.js

@@ -28,7 +28,6 @@ export const TABS_INDEX = {
   [LINT_TAB]: '2',
   [MERGED_TAB]: '3',
 };
-export const TABS_WITH_COMMIT_FORM = [CREATE_TAB, LINT_TAB, VISUALIZE_TAB];
 export const TAB_QUERY_PARAM = 'tab';
 
 export const COMMIT_ACTION_CREATE = 'CREATE';

app/assets/javascripts/pipeline_editor/pipeline_editor_home.vue

@@ -4,7 +4,7 @@ import PipelineEditorDrawer from './components/drawer/pipeline_editor_drawer.vue
 import PipelineEditorFileNav from './components/file_nav/pipeline_editor_file_nav.vue';
 import PipelineEditorHeader from './components/header/pipeline_editor_header.vue';
 import PipelineEditorTabs from './components/pipeline_editor_tabs.vue';
-import { CREATE_TAB, TABS_WITH_COMMIT_FORM } from './constants';
+import { CREATE_TAB } from './constants';
 
 export default {
   components: {
@@ -40,7 +40,7 @@ export default {
   },
   computed: {
     showCommitForm() {
-      return TABS_WITH_COMMIT_FORM.includes(this.currentTab);
+      return this.currentTab === CREATE_TAB;
     },
   },
   methods: {

spec/frontend/pipeline_editor/pipeline_editor_home_spec.js

@@ -6,7 +6,7 @@ import PipelineEditorDrawer from '~/pipeline_editor/components/drawer/pipeline_e
 import PipelineEditorFileNav from '~/pipeline_editor/components/file_nav/pipeline_editor_file_nav.vue';
 import PipelineEditorHeader from '~/pipeline_editor/components/header/pipeline_editor_header.vue';
 import PipelineEditorTabs from '~/pipeline_editor/components/pipeline_editor_tabs.vue';
-import { MERGED_TAB, VISUALIZE_TAB } from '~/pipeline_editor/constants';
+import { MERGED_TAB, VISUALIZE_TAB, CREATE_TAB, LINT_TAB } from '~/pipeline_editor/constants';
 import PipelineEditorHome from '~/pipeline_editor/pipeline_editor_home.vue';
 
 import { mockLintResponse, mockCiYml } from './mock_data';
@@ -72,22 +72,33 @@ describe('Pipeline editor home wrapper', () => {
       createComponent();
     });
 
-    it('hides the commit form when in the merged tab', async () => {
-      expect(findCommitSection().exists()).toBe(true);
+    it.each`
+      tab              | shouldShow
+      ${MERGED_TAB}    | ${false}
+      ${VISUALIZE_TAB} | ${false}
+      ${LINT_TAB}      | ${false}
+      ${CREATE_TAB}    | ${true}
+    `(
+      'when the active tab is $tab the commit form is shown: $shouldShow',
+      async ({ tab, shouldShow }) => {
+        expect(findCommitSection().exists()).toBe(true);
 
-      findPipelineEditorTabs().vm.$emit('set-current-tab', MERGED_TAB);
-      await nextTick();
-      expect(findCommitSection().exists()).toBe(false);
-    });
+        findPipelineEditorTabs().vm.$emit('set-current-tab', tab);
+
+        await nextTick();
+
+        expect(findCommitSection().exists()).toBe(shouldShow);
+      },
+    );
 
-    it('shows the form again when leaving the merged tab', async () => {
+    it('shows the commit form again when coming back to the create tab', async () => {
       expect(findCommitSection().exists()).toBe(true);
 
       findPipelineEditorTabs().vm.$emit('set-current-tab', MERGED_TAB);
       await nextTick();
       expect(findCommitSection().exists()).toBe(false);
 
-      findPipelineEditorTabs().vm.$emit('set-current-tab', VISUALIZE_TAB);
+      findPipelineEditorTabs().vm.$emit('set-current-tab', CREATE_TAB);
       await nextTick();
       expect(findCommitSection().exists()).toBe(true);
     });