Merge branch '276949-clear-alert' into 'master'

Add handling for large pipeline timeouts

See merge request gitlab-org/gitlab!55523

app/assets/javascripts/pipelines/components/graph/graph_component_wrapper.vue

@@ -59,11 +59,31 @@ export default {
         };
       },
       update(data) {
+        /*
+          This check prevents the pipeline from being overwritten
+          when a poll times out and the data returned is empty.
+          This can be removed once the timeout behavior is updated.
+          See: https://gitlab.com/gitlab-org/gitlab/-/issues/323213.
+        */
+
+        if (!data?.project?.pipeline) {
+          return this.pipeline;
+        }
+
         return unwrapPipelineData(this.pipelineProjectPath, data);
       },
       error(err) {
         this.reportFailure(LOAD_FAILURE, serializeLoadErrors(err));
       },
+      result({ error }) {
+        /*
+          If there is a successful load after a failure, clear
+          the failure notification to avoid confusion.
+        */
+        if (!error && this.alertType === LOAD_FAILURE) {
+          this.hideAlert();
+        }
+      },
     },
   },
   computed: {
@@ -109,6 +129,7 @@ export default {
   methods: {
     hideAlert() {
       this.showAlert = false;
+      this.alertType = null;
     },
     refreshPipelineGraph() {
       this.$apollo.queries.pipeline.refetch();

app/assets/javascripts/pipelines/components/graph/linked_pipelines_column.vue

@@ -94,6 +94,17 @@ export default {
           };
         },
         update(data) {
+          /*
+            This check prevents the pipeline from being overwritten
+            when a poll times out and the data returned is empty.
+            This can be removed once the timeout behavior is updated.
+            See: https://gitlab.com/gitlab-org/gitlab/-/issues/323213.
+          */
+
+          if (!data?.project?.pipeline) {
+            return this.currentPipeline;
+          }
+
           return unwrapPipelineData(projectPath, data);
         },
         result() {

app/assets/javascripts/pipelines/components/graph/utils.js

@@ -32,7 +32,7 @@ const reportToSentry = (component, failureType) => {
 };
 
 const serializeGqlErr = (gqlError) => {
-  const { locations, message, path } = gqlError;
+  const { locations = [], message = '', path = [] } = gqlError;
 
   return `
     ${message}.

spec/frontend/pipelines/graph/graph_component_wrapper_spec.js

@@ -130,4 +130,48 @@ describe('Pipeline graph wrapper', () => {
       expect(wrapper.vm.$apollo.queries.pipeline.refetch).toHaveBeenCalled();
     });
   });
+
+  describe('when query times out', () => {
+    const advanceApolloTimers = async () => {
+      jest.runOnlyPendingTimers();
+      await wrapper.vm.$nextTick();
+      await wrapper.vm.$nextTick();
+    };
+
+    beforeEach(async () => {
+      const errorData = {
+        data: {
+          project: {
+            pipelines: null,
+          },
+        },
+        errors: [{ message: 'timeout' }],
+      };
+
+      const failSucceedFail = jest
+        .fn()
+        .mockResolvedValueOnce(errorData)
+        .mockResolvedValueOnce(mockPipelineResponse)
+        .mockResolvedValueOnce(errorData);
+
+      createComponentWithApollo(failSucceedFail);
+      await wrapper.vm.$nextTick();
+    });
+
+    it('shows correct errors and does not overwrite populated data when data is empty', async () => {
+      /* fails at first, shows error, no data yet */
+      expect(getAlert().exists()).toBe(true);
+      expect(getGraph().exists()).toBe(false);
+
+      /* succeeds, clears error, shows graph */
+      await advanceApolloTimers();
+      expect(getAlert().exists()).toBe(false);
+      expect(getGraph().exists()).toBe(true);
+
+      /* fails again, alert returns but data persists */
+      await advanceApolloTimers();
+      expect(getAlert().exists()).toBe(true);
+      expect(getGraph().exists()).toBe(true);
+    });
+  });
 });