Hide pipeline status in pipeline editor for new projects

When a user opens a new project and uses the pipeline editor to create a
new CI configuration file, the pipeline status should be hidden since
there are no triggered pipelines yet for the project. It will be visible
once the user creates their first commit (and thus, triggers their first
pipeline).

app/assets/javascripts/pipeline_editor/components/header/pipeline_editor_header.vue

@@ -35,10 +35,14 @@ export default {
       type: Object,
       required: true,
     },
+    isNewCiConfigFile: {
+      type: Boolean,
+      required: true,
+    },
   },
   computed: {
     showPipelineStatus() {
-      return this.glFeatures.pipelineStatusForPipelineEditor;
+      return this.glFeatures.pipelineStatusForPipelineEditor && !this.isNewCiConfigFile;
     },
     // make sure corners are rounded correctly depending on if
     // pipeline status is rendered

app/assets/javascripts/pipeline_editor/pipeline_editor_app.vue

@@ -278,6 +278,7 @@ export default {
       <pipeline-editor-home
         :ci-config-data="ciConfigData"
         :ci-file-content="currentCiFileContent"
+        :is-new-ci-config-file="isNewCiConfigFile"
         @commit="updateOnCommit"
         @resetContent="resetContent"
         @showError="showErrorAlert"

app/assets/javascripts/pipeline_editor/pipeline_editor_home.vue

@@ -19,6 +19,10 @@ export default {
       type: String,
       required: true,
     },
+    isNewCiConfigFile: {
+      type: Boolean,
+      required: true,
+    },
   },
   data() {
     return {
@@ -40,7 +44,10 @@ export default {
 
 <template>
   <div>
-    <pipeline-editor-header :ci-config-data="ciConfigData" />
+    <pipeline-editor-header
+      :ci-config-data="ciConfigData"
+      :is-new-ci-config-file="isNewCiConfigFile"
+    />
     <pipeline-editor-tabs
       :ci-config-data="ciConfigData"
       :ci-file-content="ciFileContent"

spec/frontend/pipeline_editor/components/header/pipeline_editor_header_spec.js

@@ -13,7 +13,7 @@ describe('Pipeline editor header', () => {
     },
   };
 
-  const createComponent = ({ provide = {} } = {}) => {
+  const createComponent = ({ provide = {}, props = {} } = {}) => {
     wrapper = shallowMount(PipelineEditorHeader, {
       provide: {
         ...mockProvide,
@@ -23,6 +23,8 @@ describe('Pipeline editor header', () => {
         ciConfigData: mockLintResponse,
         ciFileContent: mockCiYml,
         isCiConfigDataLoading: false,
+        isNewCiConfigFile: false,
+        ...props,
       },
     });
   };
@@ -36,15 +38,21 @@ describe('Pipeline editor header', () => {
   });
 
   describe('template', () => {
-    beforeEach(() => {
-      createComponent();
+    it('hides the pipeline status for new projects without a CI file', () => {
+      createComponent({ props: { isNewCiConfigFile: true } });
+
+      expect(findPipelineStatus().exists()).toBe(false);
     });
 
-    it('renders the pipeline status', () => {
+    it('renders the pipeline status when CI file exists', () => {
+      createComponent({ props: { isNewCiConfigFile: false } });
+
       expect(findPipelineStatus().exists()).toBe(true);
     });
 
     it('renders the validation segment', () => {
+      createComponent();
+
       expect(findValidationSegment().exists()).toBe(true);
     });
   });

spec/frontend/pipeline_editor/pipeline_editor_home_spec.js

@@ -18,6 +18,7 @@ describe('Pipeline editor home wrapper', () => {
         ciConfigData: mockLintResponse,
         ciFileContent: mockCiYml,
         isCiConfigDataLoading: false,
+        isNewCiConfigFile: false,
         ...props,
       },
     });