Merge branch 'frontend-pipeline-sha-etag' into 'master'

Add etag caching for pipeline status in pipeline editor

See merge request gitlab-org/gitlab!59672

app/assets/javascripts/pipeline_editor/components/commit/commit_section.vue

@@ -11,6 +11,7 @@ import commitCIFile from '../../graphql/mutations/commit_ci_file.mutation.graphq
 import getCommitSha from '../../graphql/queries/client/commit_sha.graphql';
 import getCurrentBranch from '../../graphql/queries/client/current_branch.graphql';
 import getIsNewCiConfigFile from '../../graphql/queries/client/is_new_ci_config_file.graphql';
+import getPipelineEtag from '../../graphql/queries/client/pipeline_etag.graphql';
 
 import CommitForm from './commit_form.vue';
 
@@ -94,10 +95,15 @@ export default {
           },
           update(store, { data }) {
             const commitSha = data?.commitCreate?.commit?.sha;
+            const pipelineEtag = data?.commitCreate?.commit?.commitPipelinePath;
 
             if (commitSha) {
               store.writeQuery({ query: getCommitSha, data: { commitSha } });
             }
+
+            if (pipelineEtag) {
+              store.writeQuery({ query: getPipelineEtag, data: { pipelineEtag } });
+            }
           },
         });
 

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

@@ -5,7 +5,11 @@ import { truncateSha } from '~/lib/utils/text_utility';
 import { s__ } from '~/locale';
 import getCommitSha from '~/pipeline_editor/graphql/queries/client/commit_sha.graphql';
 import getPipelineQuery from '~/pipeline_editor/graphql/queries/client/pipeline.graphql';
-import { toggleQueryPollingByVisibility } from '~/pipelines/components/graph/utils';
+import getPipelineEtag from '~/pipeline_editor/graphql/queries/client/pipeline_etag.graphql';
+import {
+  getQueryHeaders,
+  toggleQueryPollingByVisibility,
+} from '~/pipelines/components/graph/utils';
 import CiIcon from '~/vue_shared/components/ci_icon.vue';
 
 const POLL_INTERVAL = 10000;
@@ -31,7 +35,13 @@ export default {
     commitSha: {
       query: getCommitSha,
     },
+    pipelineEtag: {
+      query: getPipelineEtag,
+    },
     pipeline: {
+      context() {
+        return getQueryHeaders(this.pipelineEtag);
+      },
       query: getPipelineQuery,
       variables() {
         return {

app/assets/javascripts/pipeline_editor/graphql/mutations/commit_ci_file.mutation.graphql

@@ -22,6 +22,7 @@ mutation commitCIFile(
     commit {
       sha
     }
+    commitPipelinePath
     errors
   }
 }

app/assets/javascripts/pipeline_editor/graphql/queries/client/pipeline_etag.graphql

+query getPipelineEtag {
+  pipelineEtag @client
+}

app/assets/javascripts/pipeline_editor/index.js

@@ -6,6 +6,7 @@ import { resetServiceWorkersPublicPath } from '../lib/utils/webpack';
 import { CODE_SNIPPET_SOURCE_SETTINGS } from './components/code_snippet_alert/constants';
 import getCommitSha from './graphql/queries/client/commit_sha.graphql';
 import getCurrentBranch from './graphql/queries/client/current_branch.graphql';
+import getPipelineEtag from './graphql/queries/client/pipeline_etag.graphql';
 import { resolvers } from './graphql/resolvers';
 import typeDefs from './graphql/typedefs.graphql';
 import PipelineEditorApp from './pipeline_editor_app.vue';
@@ -26,6 +27,7 @@ export const initPipelineEditor = (selector = '#js-pipeline-editor') => {
     // Add to apollo cache as it can be updated by future queries
     commitSha,
     initialBranchName,
+    pipelineEtag,
     // Add to provide/inject API for static values
     ciConfigPath,
     defaultBranch,
@@ -48,7 +50,7 @@ export const initPipelineEditor = (selector = '#js-pipeline-editor') => {
   Vue.use(VueApollo);
 
   const apolloProvider = new VueApollo({
-    defaultClient: createDefaultClient(resolvers, { typeDefs }),
+    defaultClient: createDefaultClient(resolvers, { typeDefs, useGet: true }),
   });
   const { cache } = apolloProvider.clients.defaultClient;
 
@@ -66,6 +68,13 @@ export const initPipelineEditor = (selector = '#js-pipeline-editor') => {
     },
   });
 
+  cache.writeQuery({
+    query: getPipelineEtag,
+    data: {
+      pipelineEtag,
+    },
+  });
+
   return new Vue({
     el,
     apolloProvider,

app/helpers/ci/pipeline_editor_helper.rb

@@ -9,14 +9,16 @@ module Ci
     end
 
     def js_pipeline_editor_data(project)
+      commit_sha = project.commit ? project.commit.sha : ''
       {
         "ci-config-path": project.ci_config_path_or_default,
-        "commit-sha" => project.commit ? project.commit.sha : '',
+        "commit-sha" => commit_sha,
         "default-branch" => project.default_branch,
         "empty-state-illustration-path" => image_path('illustrations/empty-state/empty-dag-md.svg'),
         "initial-branch-name": params[:branch_name],
         "lint-help-page-path" => help_page_path('ci/lint', anchor: 'validate-basic-logic-and-syntax'),
         "new-merge-request-path" => namespace_project_new_merge_request_path,
+        "pipeline_etag" => graphql_etag_pipeline_sha_path(project.commit.sha),
         "project-path" => project.path,
         "project-full-path" => project.full_path,
         "project-namespace" => project.namespace.full_path,

spec/helpers/ci/pipeline_editor_helper_spec.rb

@@ -45,6 +45,7 @@ RSpec.describe Ci::PipelineEditorHelper do
         "initial-branch-name": nil,
         "lint-help-page-path" => help_page_path('ci/lint', anchor: 'validate-basic-logic-and-syntax'),
         "new-merge-request-path" => '/mock/project/-/merge_requests/new',
+        "pipeline_etag" => graphql_etag_pipeline_sha_path(project.commit.sha),
         "project-path" => project.path,
         "project-full-path" => project.full_path,
         "project-namespace" => project.namespace.full_path,