@splunk/react-page 6.1.0 → 6.2.0

package/CHANGELOG.md

@@ -1,9 +1,24 @@
 Change Log
 ============
 
+6.2.0 - July 27, 2023
+----------
+New Features:
+* `options.lazyLoadLayout` parameter has been added to `layout` to allow lazy loading of layout (SPL-241546).
+* `options.splunkBarFallback` and `options.appBarFallback` parameters have been added to `layout` to allow customization of fallback components for the layout (SPL-241546).
+
+Notes:
+* An container element has been added to the DOM for the app content to support `lazyLoadLayout`
+
+6.1.1 - June 6, 2023
+----------
+API Changes:
+* Added support for the latest `styled-components@5` (SUI-5467).
+
 6.1.0 - May 2, 2023
+----------
 New Features:
-* a new `options.loader` parameter has been added to `layout` to allow `requirejs` to be used instead of `scriptjs` (SUI-5341).
+* A new `options.loader` parameter has been added to `layout` to allow `requirejs` to be used instead of `scriptjs` (SUI-5341).
 
 Bug Fixes:
 * `layout` will no longer automatically fall back to `requirejs` if `scriptjs` fails to load, reversing the behavior introduced in 6.0.4 (SUI-5341).

package/cypress.config.js

@@ -0,0 +1,21 @@
+/* eslint-env node */
+const { defineConfig } = require('cypress');
+
+module.exports = defineConfig({
+    env: {},
+    defaultCommandTimeout: 1000,
+    fixturesFolder: false,
+    video: false,
+    videoUploadOnPasses: false,
+    e2e: {
+        setupNodeEvents(on) {
+            on('before:browser:launch', (browser = {}, launchOptions) => {
+                if (browser.name === 'chrome') {
+                    launchOptions.args.push('--disable-gpu');
+                }
+            });
+        },
+        baseUrl: 'http://localhost:8000',
+        specPattern: 'src/tests/**.spec.js',
+    },
+});

package/lib/index.js

@@ -113,13 +113,13 @@ module.exports = require("react-dom");
 /* 4 */
 /***/ (function(module, exports) {
 
-module.exports = require("@splunk/themes/SplunkThemeProvider");
+module.exports = require("prop-types");
 
 /***/ }),
 /* 5 */
 /***/ (function(module, exports) {
 
-module.exports = require("prop-types");
+module.exports = require("@splunk/themes/SplunkThemeProvider");
 
 /***/ }),
 /* 6 */
@@ -177,20 +177,9 @@ var Layer_ = __webpack_require__(7);
 var url_ = __webpack_require__(8);
 
 // EXTERNAL MODULE: external "@splunk/themes/SplunkThemeProvider"
-var SplunkThemeProvider_ = __webpack_require__(4);
+var SplunkThemeProvider_ = __webpack_require__(5);
 var SplunkThemeProvider_default = /*#__PURE__*/__webpack_require__.n(SplunkThemeProvider_);
 
-// EXTERNAL MODULE: external "prop-types"
-var external_prop_types_ = __webpack_require__(5);
-var external_prop_types_default = /*#__PURE__*/__webpack_require__.n(external_prop_types_);
-
-// EXTERNAL MODULE: external "@splunk/react-ui/ScreenReaderContent"
-var ScreenReaderContent_ = __webpack_require__(9);
-var ScreenReaderContent_default = /*#__PURE__*/__webpack_require__.n(ScreenReaderContent_);
-
-// EXTERNAL MODULE: external "@splunk/ui-utils/i18n"
-var i18n_ = __webpack_require__(10);
-
 // EXTERNAL MODULE: external "styled-components"
 var external_styled_components_ = __webpack_require__(2);
 var external_styled_components_default = /*#__PURE__*/__webpack_require__.n(external_styled_components_);
@@ -220,7 +209,7 @@ function _templateObject5() {
 }
 
 function _templateObject4() {
-  var data = _taggedTemplateLiteral(["\n    background-color: ", ";\n    min-height: 44px;\n"]);
+  var data = _taggedTemplateLiteral(["\n    background-color: ", ";\n    min-height: ", "px;\n"]);
 
   _templateObject4 = function _templateObject4() {
     return data;
@@ -230,7 +219,7 @@ function _templateObject4() {
 }
 
 function _templateObject3() {
-  var data = _taggedTemplateLiteral(["\n    padding: 0;\n    background-color: ", ";\n    height: 34px;\n"]);
+  var data = _taggedTemplateLiteral(["\n    padding: 0;\n    background-color: ", ";\n    height: ", "px;\n"]);
 
   _templateObject3 = function _templateObject3() {
     return data;
@@ -263,22 +252,35 @@ function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(
 
 
 
+var APPBAR_HEIGHT = 45;
+var SPLUNKBAR_HEIGHT = 34;
 var blink = Object(external_styled_components_["keyframes"])(_templateObject());
 var Main = external_styled_components_default.a.div(_templateObject2(), themes_["variables"].backgroundColorPage);
 var SplunkBar = external_styled_components_default.a.div(_templateObject3(), Object(themes_["pick"])({
   prisma: themes_["variables"].backgroundColorSection,
   enterprise: themes_["variables"].gray20
-}));
+}), SPLUNKBAR_HEIGHT);
 var AppBar = external_styled_components_default.a.div(_templateObject4(), Object(themes_["pick"])({
   prisma: themes_["variables"].backgroundColorPopup,
   enterprise: themes_["variables"].gray30
-}));
+}), APPBAR_HEIGHT);
 var AppBody = external_styled_components_default.a.div(_templateObject5(), themes_["variables"].contentColorInverted);
 var Dot = external_styled_components_default.a.div(_templateObject6(), blink, themes_["variables"].neutral500, Object(themes_["pick"])({
   prisma: themes_["variables"].spacingMedium,
   enterprise: themes_["variables"].spacingHalf
 }));
 
+// EXTERNAL MODULE: external "prop-types"
+var external_prop_types_ = __webpack_require__(4);
+var external_prop_types_default = /*#__PURE__*/__webpack_require__.n(external_prop_types_);
+
+// EXTERNAL MODULE: external "@splunk/react-ui/ScreenReaderContent"
+var ScreenReaderContent_ = __webpack_require__(9);
+var ScreenReaderContent_default = /*#__PURE__*/__webpack_require__.n(ScreenReaderContent_);
+
+// EXTERNAL MODULE: external "@splunk/ui-utils/i18n"
+var i18n_ = __webpack_require__(10);
+
 // CONCATENATED MODULE: ./src/Loading.jsx
 
 
@@ -288,19 +290,25 @@ var Dot = external_styled_components_default.a.div(_templateObject6(), blink, th
 var propTypes = {
   hideAppBar: external_prop_types_default.a.bool,
   hideChrome: external_prop_types_default.a.bool,
-  hideSplunkBar: external_prop_types_default.a.bool
+  hideSplunkBar: external_prop_types_default.a.bool,
+  AppBarFallback: external_prop_types_default.a.elementType,
+  SplunkBarFallback: external_prop_types_default.a.elementType
 };
 var defaultProps = {
   hideAppBar: false,
   hideChrome: false,
-  hideSplunkBar: false
+  hideSplunkBar: false,
+  AppBarFallback: AppBar,
+  SplunkBarFallback: SplunkBar
 };
 
 function Loading(_ref) {
   var hideAppBar = _ref.hideAppBar,
       hideChrome = _ref.hideChrome,
-      hideSplunkBar = _ref.hideSplunkBar;
-  return /*#__PURE__*/external_react_default.a.createElement(Main, null, !hideChrome && !hideSplunkBar && /*#__PURE__*/external_react_default.a.createElement(SplunkBar, null), !hideChrome && !hideAppBar && /*#__PURE__*/external_react_default.a.createElement(AppBar, null), /*#__PURE__*/external_react_default.a.createElement(AppBody, null, /*#__PURE__*/external_react_default.a.createElement(Dot, null), /*#__PURE__*/external_react_default.a.createElement(Dot, null), /*#__PURE__*/external_react_default.a.createElement(Dot, null), /*#__PURE__*/external_react_default.a.createElement(ScreenReaderContent_default.a, null, Object(i18n_["_"])('Loading'))));
+      hideSplunkBar = _ref.hideSplunkBar,
+      SplunkBarFallback = _ref.SplunkBarFallback,
+      AppBarFallback = _ref.AppBarFallback;
+  return /*#__PURE__*/external_react_default.a.createElement(Main, null, !hideChrome && !hideSplunkBar && /*#__PURE__*/external_react_default.a.createElement(SplunkBarFallback, null), !hideChrome && !hideAppBar && /*#__PURE__*/external_react_default.a.createElement(AppBarFallback, null), /*#__PURE__*/external_react_default.a.createElement(AppBody, null, /*#__PURE__*/external_react_default.a.createElement(Dot, null), /*#__PURE__*/external_react_default.a.createElement(Dot, null), /*#__PURE__*/external_react_default.a.createElement(Dot, null), /*#__PURE__*/external_react_default.a.createElement(ScreenReaderContent_default.a, null, Object(i18n_["_"])('Loading'))));
 }
 
 Loading.propTypes = propTypes;
@@ -318,8 +326,10 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 
 
 
+
 var LIGHT_LAYOUT = 'build/api/layout.js';
 var DARK_LAYOUT = 'build/api/layout-dark.js';
+var HEADER_SELECTOR = 'header[data-view="splunkjs/mvc/headerview"]';
 /**
  * Loads the layout from the server, using requirejs if available on the window and scriptjs if not.
  *
@@ -352,6 +362,23 @@ function getLayoutApi(theme, callback) {
     throw new Error('Invalid options.loader configuration: must be "scriptjs" or "requirejs".');
   }
 }
+/**
+ * renders body element and attaches it to container node in DOM
+ *
+ * @param {element} element
+ * @param {HTMLDivElement} container
+ * @param {boolean} useGlobalLayerStack
+ * @param {object} splunkTheme
+ * @private
+ */
+
+
+function renderBody(element, container) {
+  var useGlobalLayerStack = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
+  var splunkTheme = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {};
+  var wrappedElement = useGlobalLayerStack ? /*#__PURE__*/external_react_default.a.createElement(Layer_["LayerStackGlobalProvider"], null, /*#__PURE__*/external_react_default.a.createElement(SplunkThemeProvider_default.a, splunkTheme, element)) : /*#__PURE__*/external_react_default.a.createElement(SplunkThemeProvider_default.a, splunkTheme, element);
+  Object(external_react_dom_["render"])(wrappedElement, container);
+}
 /**
  * Renders a React element into the Layout API.
  * @public
@@ -371,6 +398,9 @@ function getLayoutApi(theme, callback) {
  * @param {String} [options.theme = 'light'] - Used to theme UI elements. Ex. "light" or "dark".
  * @param {String} [options.loader = 'scriptjs'] - Configures the loader used for the loading the layout - available loaders are "scriptjs" and "requirejs".
  * Change this only if the default loader does not work for your application.
+ * @param {Boolean} [options.lazyLoadLayout = false] - Prioritizes loading the React element and lazily fetches and compiles the layout API (navigation bar).
+ * @param {element} [options.SplunkBarFallback = SplunkBar] - A React element used as a placeholder for the splunk bar while the navigation bar is loading.
+ * @param {element} [options.AppBarFallback = AppBar] - A React element used as a placeholder for the app bar while the navigation bar is loading.
  */
 
 
@@ -390,7 +420,17 @@ function layout(element) {
     document.title = pageTitle;
   }
 
-  var loadingContainer = document.createElement('div'); // The "theme" in enterprise used to be "enterprise" instead of "light"...
+  var hideChrome = layoutAPIOptions.hideChrome,
+      hideAppBar = layoutAPIOptions.hideAppBar,
+      hideSplunkBar = layoutAPIOptions.hideSplunkBar,
+      _layoutAPIOptions$Spl = layoutAPIOptions.SplunkBarFallback,
+      SplunkBarFallback = _layoutAPIOptions$Spl === void 0 ? SplunkBar : _layoutAPIOptions$Spl,
+      _layoutAPIOptions$App = layoutAPIOptions.AppBarFallback,
+      AppBarFallback = _layoutAPIOptions$App === void 0 ? AppBar : _layoutAPIOptions$App,
+      _layoutAPIOptions$laz = layoutAPIOptions.lazyLoadLayout,
+      lazyLoadLayout = _layoutAPIOptions$laz === void 0 ? false : _layoutAPIOptions$laz;
+  var bodyContainer = document.createElement('div');
+  var headerContainer = document.createElement('div'); // The "theme" in enterprise used to be "enterprise" instead of "light"...
 
   var colorScheme = theme === 'light' || theme === 'enterprise' ? 'light' : 'dark';
   var splunkTheme = {
@@ -398,8 +438,21 @@ function layout(element) {
     colorScheme: colorScheme,
     density: 'comfortable'
   };
-  document.body.appendChild(loadingContainer);
-  Object(external_react_dom_["render"])( /*#__PURE__*/external_react_default.a.createElement(SplunkThemeProvider_default.a, splunkTheme, /*#__PURE__*/external_react_default.a.createElement(src_Loading, layoutAPIOptions)), loadingContainer);
+
+  if (lazyLoadLayout) {
+    // render the React app immediately without waiting for layout API
+    document.body.appendChild(headerContainer);
+    Object(external_react_dom_["render"])( /*#__PURE__*/external_react_default.a.createElement(external_react_default.a.Fragment, null, !hideChrome && !hideSplunkBar && /*#__PURE__*/external_react_default.a.createElement(SplunkBarFallback, null), !hideChrome && !hideAppBar && /*#__PURE__*/external_react_default.a.createElement(AppBarFallback, null)), headerContainer); // explicitly set height of header container to avoid layout shift when fallback gets replaced
+
+    var headerHeight = headerContainer.offsetHeight;
+    headerContainer.style.cssText = "height: ".concat(headerHeight, "px");
+    document.body.appendChild(bodyContainer);
+    renderBody(element, bodyContainer, useGlobalLayerStack, splunkTheme);
+  } else {
+    document.body.appendChild(bodyContainer);
+    Object(external_react_dom_["render"])( /*#__PURE__*/external_react_default.a.createElement(SplunkThemeProvider_default.a, splunkTheme, /*#__PURE__*/external_react_default.a.createElement(src_Loading, layoutAPIOptions)), bodyContainer);
+  }
+
   getLayoutApi(theme, function (layoutApi) {
     var containerEl;
 
@@ -433,12 +486,21 @@ function layout(element) {
       document.body.appendChild(containerEl);
     }
 
-    setTimeout(function () {
-      Object(external_react_dom_["unmountComponentAtNode"])(loadingContainer);
-      loadingContainer.parentNode.removeChild(loadingContainer);
-      var wrappedElement = useGlobalLayerStack ? /*#__PURE__*/external_react_default.a.createElement(Layer_["LayerStackGlobalProvider"], null, /*#__PURE__*/external_react_default.a.createElement(SplunkThemeProvider_default.a, splunkTheme, element)) : /*#__PURE__*/external_react_default.a.createElement(SplunkThemeProvider_default.a, splunkTheme, element);
-      Object(external_react_dom_["render"])(wrappedElement, containerEl);
-    }, 30);
+    if (lazyLoadLayout) {
+      // replace placeholder nav bar with real nav bar
+      Object(external_react_dom_["unmountComponentAtNode"])(headerContainer);
+      var header = document.querySelector(HEADER_SELECTOR);
+      var containerHeight = (!hideChrome && !hideSplunkBar ? SPLUNKBAR_HEIGHT : 0) + (!hideChrome && !hideAppBar ? APPBAR_HEIGHT : 0);
+      headerContainer.style.cssText = "height: ".concat(containerHeight, "px");
+      headerContainer.appendChild(header);
+      containerEl.appendChild(bodyContainer);
+    } else {
+      setTimeout(function () {
+        Object(external_react_dom_["unmountComponentAtNode"])(bodyContainer);
+        renderBody(element, bodyContainer, useGlobalLayerStack, splunkTheme);
+        containerEl.appendChild(bodyContainer);
+      }, 30);
+    }
   }, {
     loader: loader
   });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@splunk/react-page",
-  "version": "6.1.0",
+  "version": "6.2.0",
   "description": "Load React components into the latest layout from Splunk Enterprise",
   "main": "lib/index.js",
   "license": "Apache-2.0",
@@ -22,16 +22,16 @@
     "test:cypress:ci": "node src/tests/run-cypress-tests.js"
   },
   "dependencies": {
-    "@splunk/react-ui": "^4.16.3",
+    "@splunk/react-ui": "^4.18.0",
     "@splunk/splunk-utils": "^2.3.4",
-    "@splunk/themes": "^0.16.0",
+    "@splunk/themes": "^0.16.1",
     "@splunk/ui-utils": "^1.6.0",
     "prop-types": "^15.6.2",
     "scriptjs": "^2.5.8"
   },
   "devDependencies": {
     "@babel/core": "^7.2.0",
-    "@splunk/babel-preset": "^3.0.0",
+    "@splunk/babel-preset": "^4.0.0",
     "@splunk/cicd-tools": "^0.5.0",
     "@splunk/eslint-config": "^4.0.0",
     "@splunk/stylelint-config": "^4.0.0",
@@ -40,6 +40,7 @@
     "babel-loader": "^8.0.4",
     "babel-plugin-transform-imports": "^2.0.0",
     "cross-env": "^6.0.3",
+    "cypress": "^12.17.1",
     "eslint": "^7.14.0",
     "eslint-config-airbnb": "^18.2.1",
     "eslint-config-prettier": "^6.15.0",
@@ -52,7 +53,7 @@
     "react": "^16.12.0",
     "react-dom": "^16.12.0",
     "style-loader": "^0.23.1",
-    "styled-components": "5.1.1",
+    "styled-components": "^5.3.10",
     "stylelint": "^13.0.0",
     "webpack": "^4.16.2",
     "webpack-cli": "^4.9.2",
@@ -62,7 +63,7 @@
   "peerDependencies": {
     "react": "^16.8",
     "react-dom": "^16.8",
-    "styled-components": "5.1.1"
+    "styled-components": "^5.3.10"
   },
   "engines": {
     "node": ">=6"

package/cypress/plugins/index.js

@@ -1,11 +0,0 @@
-/* eslint-env node */
-
-module.exports = (on, config) => {
-    on('before:browser:launch', (browser = {}, launchOptions) => {
-        if (browser.name === 'chrome') {
-            launchOptions.args.push('--disable-gpu');
-        }
-    });
-
-    return config;
-};

package/cypress.json

@@ -1,10 +0,0 @@
-{
-  "baseUrl": "http://localhost:8000",
-  "env": {},
-  "defaultCommandTimeout": 1000,
-  "fixturesFolder": false,
-  "integrationFolder": "src/tests",
-  "testFiles": "**.spec.js",
-  "video": false,
-  "videoUploadOnPasses": false
-}