[FIX JENKINS-41966] load and save using the editor from Github (#886)

* JENKINS-41966 load and save using the editor from Github

blueocean-core-js/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jenkins-cd/blueocean-core-js",
-  "version": "0.0.86",
+  "version": "0.0.87",
   "description": "Shared JavaScript libraries for use with Jenkins Blue Ocean",
   "main": "dist/js/index.js",
   "scripts": {

blueocean-core-js/src/js/LoadingIndicator.js

@@ -0,0 +1,80 @@
+/**
+ * This contains a bit that reuses the index.jelly progress bar
+ * so React components can just add a <PageLoading/> indicator,
+ * and overlapping loading should just extend the time, etc.
+ */
+let loadingCount = 0;
+const timeouts = [];
+
+// use a short timeout so fast connections aren't seeing
+// flashes of the progress bar all the time
+const delay = 350;
+const loadbar = typeof document !== 'undefined' && document.getElementById('loadbar');
+
+/**
+ * Remove queued progress additions
+ */
+function clearTimeouts() {
+    while (timeouts.length) {
+        clearTimeout(timeouts.pop());
+    }
+}
+
+/**
+ * Add a timeout to transition the loading animation differently
+ */
+function setLoaderClass(c, t) {
+    timeouts.push(setTimeout(() => {
+        loadbar.classList.add(c);
+    }, t));
+}
+
+/**
+ * Simple mostly css-based loading animation
+ */
+export default {
+    show() {
+        if (loadbar) {
+            if (loadingCount === 0) {
+                // (re)start the loading animation
+                clearTimeouts();
+                loadbar.classList.remove('complete');
+                setLoaderClass('go', delay); // these times need to match the index.jelly CSS definitions
+                setLoaderClass('long', delay + 1000);
+                setLoaderClass('longer', delay + 6000);
+            }
+            loadingCount++;
+        }
+    },
+
+    hide() {
+        if (loadbar) {
+            if (loadingCount > 0) {
+                loadingCount--;
+            }
+
+            if (loadingCount === 0) {
+                // stop the loading animation
+                clearTimeouts();
+                setLoaderClass('complete', 10);
+                timeouts.push(setTimeout(() => {
+                    // The Element.classList is a read-only property
+                    const classList = loadbar.classList;
+                    if (classList && classList.length && classList.length > 0) {
+                        // remove all items - compatible with older browser
+                        classList.remove.apply(classList, [... classList]);
+                    }
+                }, 500));
+            }
+        }
+    },
+
+    // TODO should make this a stack to push/pop
+    setDarkBackground() {
+        if (loadbar) document.getElementsByTagName('body')[0].classList.add('loadbar-light');
+    },
+
+    setLightBackground() {
+        if (loadbar) document.getElementsByTagName('body')[0].classList.remove('loadbar-light');
+    },
+};

blueocean-core-js/src/js/fetch.js

@@ -6,6 +6,7 @@ import config from './config';
 import dedupe from './utils/dedupe-calls';
 import urlconfig from './urlconfig';
 import { prefetchdata } from './scopes';
+import loadingIndicator from './LoadingIndicator';
 
 const Promise = es6Promise.Promise;
 
@@ -45,6 +46,11 @@ export const FetchFunctions = {
         }
         return response;
     },
+
+    stopLoadingIndicator(response) {
+        loadingIndicator.hide();
+        return response;
+    },
 
     /**
      * Adds same-origin option to the fetch.
@@ -141,16 +147,26 @@ export const FetchFunctions = {
      * @param {function} [options.onSuccess] - Optional callback success function.
      * @param {function} [options.onError] - Optional error callback.
      * @param {Object} [options.fetchOptions] - Optional isomorphic-fetch options.
+     * @param {boolean} [options.disableDedupe] - Optional flag to disable dedupe for this request.
+     * @param {boolean} [options.disableLoadingIndicator] - Optional flag to disable loading indicator for this request.
      * @returns JSON body
      */
-    rawFetchJSON(url, { onSuccess, onError, fetchOptions, disableDedupe } = {}) {
+    rawFetchJSON(url, { onSuccess, onError, fetchOptions, disableDedupe, disableLoadingIndicator } = {}) {
         const request = () => {
             let future = getPrefetchedDataFuture(url); // eslint-disable-line no-use-before-define
             if (!future) {
+                if (!disableLoadingIndicator) {
+                    loadingIndicator.show();
+                }
+
                 future = isoFetch(url, FetchFunctions.sameOriginFetchOption(fetchOptions))
                     .then(FetchFunctions.checkRefreshHeader)
                     .then(FetchFunctions.checkStatus)
                     .then(FetchFunctions.parseJSON, FetchFunctions.parseErrorJson);
+
+                if (!disableLoadingIndicator) {
+                    future = future.then(FetchFunctions.stopLoadingIndicator, err => { FetchFunctions.stopLoadingIndicator(); throw err; });
+                }
             }
             if (onSuccess) {
                 return future.then(onSuccess).catch(FetchFunctions.onError(onError));
@@ -175,15 +191,25 @@ export const FetchFunctions = {
      * @param {function} [options.onSuccess] - Optional callback success function.
      * @param {function} [options.onError] - Optional error callback.
      * @param {Object} [options.fetchOptions] - Optional isomorphic-fetch options.
+     * @param {boolean} [options.disableDedupe] - Optional flag to disable dedupe for this request.
+     * @param {boolean} [options.disableLoadingIndicator] - Optional flag to disable loading indicator for this request.
      * @returns fetch response
      */
-    rawFetch(url, { onSuccess, onError, fetchOptions, disableDedupe } = {}) {
+    rawFetch(url, { onSuccess, onError, fetchOptions, disableDedupe, disableLoadingIndicator } = {}) {
         const request = () => {
             let future = getPrefetchedDataFuture(url); // eslint-disable-line no-use-before-define
             if (!future) {
+                if (!disableLoadingIndicator) {
+                    loadingIndicator.show();
+                }
+
                 future = isoFetch(url, FetchFunctions.sameOriginFetchOption(fetchOptions))
                     .then(FetchFunctions.checkRefreshHeader)
                     .then(FetchFunctions.checkStatus);
+
+                if (!disableLoadingIndicator) {
+                    future = future.then(FetchFunctions.stopLoadingIndicator, err => { FetchFunctions.stopLoadingIndicator(); throw err; });
+                }
             }
             if (onSuccess) {
                 return future.then(onSuccess).catch(FetchFunctions.onError(onError));

blueocean-core-js/src/js/index.js

@@ -14,6 +14,7 @@ import { ToastService } from './ToastService';
 export i18nTranslator, { defaultLngDetector } from './i18n/i18n';
 
 export logging from './logging';
+export loadingIndicator from './LoadingIndicator';
 
 export { Fetch, FetchFunctions } from './fetch';
 export UrlBuilder from './UrlBuilder';

blueocean-dashboard/package.json

@@ -39,7 +39,7 @@
     "skin-deep": "0.16.0"
   },
   "dependencies": {
-    "@jenkins-cd/blueocean-core-js": "0.0.86",
+    "@jenkins-cd/blueocean-core-js": "0.0.87",
     "@jenkins-cd/design-language": "0.0.122",
     "@jenkins-cd/js-extensions": "0.0.33",
     "@jenkins-cd/js-modules": "0.0.8",

blueocean-dashboard/src/main/js/Dashboard.jsx

@@ -7,7 +7,6 @@ import {
     connect,
     createSelector,
 } from './redux';
-import loadingIndicator from './LoadingIndicator';
 
 class Dashboard extends Component {
 
@@ -22,12 +21,6 @@ class Dashboard extends Component {
         this._context.location = this.props.location;
         return this._context;
     }
-    componentDidMount() {
-        loadingIndicator.setDarkBackground();
-    }
-    componentWillUnmount() {
-        loadingIndicator.setLightBackground();
-    }
 
     render() {
         return this.props.children; // Set by router

blueocean-dashboard/src/main/js/PipelineRoutes.jsx

@@ -97,14 +97,20 @@ function isRemovePersistedBackgroundRoute(prevState, nextState) {
  * Note this must be done early (from top-level onChange handler) and can't wait until a modal/dialog will mount
  * due to the fact react router will have already changed the background context.
  */
-function persistBackgroundOnNavigationChange(prevState, nextState, replace, callback) {
+function persistBackgroundOnNavigationChange(prevState, nextState, replace, callback, delay = 200) {
     if (isPersistBackgroundRoute(prevState, nextState)) {
         persistModalBackground();
     } else if (isRemovePersistedBackgroundRoute(prevState, nextState)) {
         // need to delay this a little to let the route re-render
-        setTimeout(discardPersistedBackground, 200);
+        setTimeout(discardPersistedBackground, delay);
     }
-    callback();
+    if (callback) {
+        callback();
+    }
+}
+
+function onLeaveCheckBackground() {
+    persistBackgroundOnNavigationChange({ params: { runId: true } }, { params: {} }, null, null, 0);
 }
 
 export default (
@@ -117,7 +123,7 @@ export default (
             <Route path=":pipeline/activity(/:branch)" component={Activity} />
             <Route path=":pipeline/pr" component={PullRequests} />
 
-            <Route path=":pipeline/detail/:branch/:runId" component={RunDetails}>
+            <Route path=":pipeline/detail/:branch/:runId" component={RunDetails} onLeave={onLeaveCheckBackground}>
                 <IndexRedirect to="pipeline" />
                 <Route path="pipeline" component={RunDetailsPipeline}>
                     <Route path=":node" component={RunDetailsPipeline} />