Fix endless pipeline status loop when no pipeline was triggered

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

@@ -21,6 +21,9 @@ export const i18n = {
     `Pipeline|Pipeline %{idStart}#%{idEnd} %{statusStart}%{statusEnd} for %{commitStart}%{commitEnd}`,
   ),
   viewBtn: s__('Pipeline|View pipeline'),
+  pipelineNotTriggeredMsg: s__(
+    'Pipeline|No pipeline was triggered for the latest changes due to the current CI/CD configuration.',
+  ),
 };
 
 export default {
@@ -73,16 +76,22 @@ export default {
       result(res) {
         if (res.data?.project?.pipeline) {
           this.hasError = false;
+        } else {
+          this.hasError = true;
+          this.pipelineNotTriggered = true;
         }
       },
       error() {
         this.hasError = true;
+        this.networkError = true;
       },
       pollInterval: POLL_INTERVAL,
     },
   },
   data() {
     return {
+      networkError: false,
+      pipelineNotTriggered: false,
       hasError: false,
     };
   },
@@ -126,10 +135,16 @@ export default {
       </div>
     </template>
     <template v-else-if="hasError">
-      <div>
+      <div v-if="networkError">
         <gl-icon class="gl-mr-auto" name="warning-solid" />
         <span data-testid="pipeline-error-msg">{{ $options.i18n.fetchError }}</span>
       </div>
+      <div v-else>
+        <gl-icon class="gl-mr-auto" name="information-o" />
+        <span data-testid="pipeline-not-triggered-error-msg">
+          {{ $options.i18n.pipelineNotTriggeredMsg }}
+        </span>
+      </div>
     </template>
     <template v-else>
       <div>

locale/gitlab.pot

@@ -25369,6 +25369,9 @@ msgstr ""
 msgid "Pipeline|Merged result pipeline"
 msgstr ""
 
+msgid "Pipeline|No pipeline was triggered for the latest changes due to the current CI/CD configuration."
+msgstr ""
+
 msgid "Pipeline|Passed"
 msgstr ""
 

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

@@ -40,6 +40,8 @@ describe('Pipeline Status', () => {
   const findPipelineId = () => wrapper.find('[data-testid="pipeline-id"]');
   const findPipelineCommit = () => wrapper.find('[data-testid="pipeline-commit"]');
   const findPipelineErrorMsg = () => wrapper.find('[data-testid="pipeline-error-msg"]');
+  const findPipelineNotTriggeredErrorMsg = () =>
+    wrapper.find('[data-testid="pipeline-not-triggered-error-msg"]');
   const findPipelineLoadingMsg = () => wrapper.find('[data-testid="pipeline-loading-msg"]');
   const findPipelineViewBtn = () => wrapper.find('[data-testid="pipeline-view-btn"]');
   const findStatusIcon = () => wrapper.find('[data-testid="pipeline-status-icon"]');
@@ -117,7 +119,8 @@ describe('Pipeline Status', () => {
         await waitForPromises();
       });
 
-      it('renders error', () => {
+      it('renders api error', () => {
+        expect(findPipelineNotTriggeredErrorMsg().exists()).toBe(false);
         expect(findIcon().attributes('name')).toBe('warning-solid');
         expect(findPipelineErrorMsg().text()).toBe(i18n.fetchError);
       });
@@ -129,6 +132,23 @@ describe('Pipeline Status', () => {
         expect(findPipelineViewBtn().exists()).toBe(false);
       });
     });
+
+    describe('when pipeline is null', () => {
+      beforeEach(() => {
+        mockPipelineQuery.mockResolvedValue({
+          data: { project: { pipeline: null } },
+        });
+
+        createComponentWithApollo();
+        waitForPromises();
+      });
+
+      it('renders pipeline not triggered error', () => {
+        expect(findPipelineErrorMsg().exists()).toBe(false);
+        expect(findIcon().attributes('name')).toBe('information-o');
+        expect(findPipelineNotTriggeredErrorMsg().text()).toBe(i18n.pipelineNotTriggeredMsg);
+      });
+    });
   });
 
   describe('when feature flag for pipeline mini graph is enabled', () => {