Feat: font css string, and inflight indicator timeout (elastic#191)

* feat: add inline css style to font function

* fix: add 10 second inFlight timeout

this is pretty hacky, but it's good enough for now

common/functions/font/font.js

@@ -1,3 +1,4 @@
+import inlineStyle from 'inline-style';
 import Fn from '../fn.js';
 
 export default new Fn({
@@ -44,19 +45,21 @@ export default new Fn({
     },
   },
   fn: (context, args) => {
+    const spec = {
+      ...context.spec,
+      fontSize: `${args.size}px`,
+      fontFamily: args.family,
+      fontWeight: args.weight,
+      fontStyle: args.italic ? 'italic' : 'normal',
+      textDecoration: args.underline ? 'underline' : 'none',
+      textAlign: args.align,
+      color: args.color,
+    };
+
     return {
       type: 'style',
-      spec: {
-        ...context.spec,
-        fontSize: `${args.size}px`,
-        fontFamily: args.family,
-        fontWeight: args.weight,
-        fontStyle: args.italic ? 'italic' : 'normal',
-        textDecoration: args.underline ? 'underline' : 'none',
-        textAlign: args.align,
-        color: args.color,
-      },
-      css: 'TODO: Convert to css string',
+      spec,
+      css: inlineStyle(spec),
     };
   },
 });

package.json

@@ -30,6 +30,7 @@
     "chroma-js": "^1.3.4",
     "elasticsearch": "^13.0.0",
     "handlebars": "^4.0.10",
+    "inline-style": "^2.0.0",
     "jquery": "^3.2.1",
     "lodash": "^4.17.4",
     "lz-string": "^1.4.4",

public/state/middleware/in_flight.js

@@ -4,6 +4,20 @@ import { setLoading, setValue, inFlightActive, inFlightComplete } from '../actio
 export const inFlight = ({ dispatch }) => (next) => {
   const pendingCache = [];
 
+  // TODO: this timer is tracked so we can hide the spinner when things fail
+  // it's an ugly way to handle things, but it'll work for now
+  let clearTimer = () => {};
+  function createTimer(time = 10000) {
+    clearTimer(); // clear any pending timers
+
+    const timer = setTimeout(() => {
+      dispatch(inFlightComplete());
+      pendingCache.splice(0, pendingCache.length); // clear the pending cache
+    }, time);
+
+    clearTimer = () => clearTimeout(timer);
+  }
+
   return action => {
     const isLoading = action.type === setLoading.toString();
     const isSetting = action.type === setValue.toString();
@@ -14,10 +28,15 @@ export const inFlight = ({ dispatch }) => (next) => {
       if (isLoading) {
         pendingCache.push(cacheKey);
         dispatch(inFlightActive());
+
+        createTimer(); // create loading timeout
       } else if (isSetting) {
         const idx = pendingCache.indexOf(cacheKey);
         pendingCache.splice(idx, 1);
-        if (pendingCache.length === 0) dispatch(inFlightComplete());
+        if (pendingCache.length === 0) {
+          clearTimer();
+          dispatch(inFlightComplete());
+        }
       }
     }