Merge branch 'tz-poc-startup-js' into 'master'

Startup.js Concept for Repository View

Closes #220511

See merge request gitlab-org/gitlab!34713

app/assets/javascripts/lib/utils/axios_startup_calls.js

+import { isEmpty } from 'lodash';
+import { mergeUrlParams } from './url_utility';
+
+// We should probably not couple this utility to `gon.gitlab_url`
+// Also, this would replace occurrences that aren't at the beginning of the string
+const removeGitLabUrl = url => url.replace(gon.gitlab_url, '');
+
+const getFullUrl = req => {
+  const url = removeGitLabUrl(req.url);
+  return mergeUrlParams(req.params || {}, url);
+};
+
+const setupAxiosStartupCalls = axios => {
+  const { startup_calls: startupCalls } = window.gl || {};
+
+  if (!startupCalls || isEmpty(startupCalls)) {
+    return;
+  }
+
+  // TODO: To save performance of future axios calls, we can
+  // remove this interceptor once the "startupCalls" have been loaded
+  axios.interceptors.request.use(req => {
+    const fullUrl = getFullUrl(req);
+
+    const existing = startupCalls[fullUrl];
+
+    if (existing) {
+      // eslint-disable-next-line no-param-reassign
+      req.adapter = () =>
+        existing.fetchCall.then(res =>
+          // eslint-disable-next-line promise/no-nesting
+          res.json().then(data => ({
+            data,
+            status: res.status,
+            statusText: res.statusText,
+            headers: res.headers,
+            config: req,
+            request: req,
+          })),
+        );
+    }
+
+    return req;
+  });
+};
+
+export default setupAxiosStartupCalls;

app/assets/javascripts/lib/utils/axios_utils.js

 import axios from 'axios';
 import csrf from './csrf';
 import suppressAjaxErrorsDuringNavigation from './suppress_ajax_errors_during_navigation';
+import setupAxiosStartupCalls from './axios_startup_calls';
 
 axios.defaults.headers.common[csrf.headerKey] = csrf.token;
 // Used by Rails to check if it is a valid XHR request
@@ -14,6 +15,8 @@ axios.interceptors.request.use(config => {
   return config;
 });
 
+setupAxiosStartupCalls(axios);
+
 // Remove the global counter
 axios.interceptors.response.use(
   response => {

app/helpers/application_helper.rb

@@ -335,6 +335,15 @@ module ApplicationHelper
     }
   end
 
+  def page_startup_api_calls
+    @api_startup_calls
+  end
+
+  def add_page_startup_api_call(api_path, options: {})
+    @api_startup_calls ||= {}
+    @api_startup_calls[api_path] = options
+  end
+
   def autocomplete_data_sources(object, noteable_type)
     return {} unless object && noteable_type
 

app/views/layouts/_head.html.haml

@@ -25,6 +25,8 @@
 
   %meta{ 'http-equiv' => 'X-UA-Compatible', content: 'IE=edge' }
 
+  = render 'layouts/startup_js'
+
   -# Open Graph - http://ogp.me/
   %meta{ property: 'og:type', content: "object" }
   %meta{ property: 'og:site_name', content: site_name }

app/views/layouts/_startup_js.html.haml

+- return unless page_startup_api_calls.present?
+
+= javascript_tag nonce: true do
+  :plain
+    var gl = window.gl || {};
+    gl.startup_calls = #{page_startup_api_calls.to_json};
+    if (gl.startup_calls && window.fetch) {
+      Object.keys(gl.startup_calls).forEach(apiCall => {
+        gl.startup_calls[apiCall] = {
+          fetchCall: fetch(apiCall)
+        };
+      });
+    }

app/views/projects/_files.html.haml

@@ -4,6 +4,9 @@
 - project = local_assigns.fetch(:project) { @project }
 - content_url = local_assigns.fetch(:content_url) { @tree.readme ? project_blob_path(@project, tree_join(@ref, @tree.readme.path)) : project_tree_path(@project, @ref) }
 - show_auto_devops_callout = show_auto_devops_callout?(@project)
+- add_page_startup_api_call logs_file_project_ref_path(@project, ref, @path, format: "json", offset: 0)
+- if @tree.readme
+  - add_page_startup_api_call project_blob_path(@project, tree_join(@ref, @tree.readme.path), viewer: "rich", format: "json")
 
 #tree-holder.tree-holder.clearfix
   .nav-block

spec/helpers/application_helper_spec.rb

@@ -209,6 +209,16 @@ describe ApplicationHelper do
     end
   end
 
+  describe '#page_startup_api_calls' do
+    it 'returns map containing JS Page Startup Calls' do
+      helper.add_page_startup_api_call("testURL")
+
+      startup_calls = helper.page_startup_api_calls
+
+      expect(startup_calls["testURL"]).to eq({})
+    end
+  end
+
   describe '#autocomplete_data_sources' do
     let(:project) { create(:project) }
     let(:noteable_type) { Issue }