@splunk/react-page 6.0.3 → 6.1.0

package/CHANGELOG.md

@@ -1,6 +1,17 @@
 Change Log
 ============
 
+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).
+
+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).
+
+6.0.4 - April 6, 2023
+----------
+* `layout` will now fall back to `requirejs` if `scriptjs` fails to load (SUI-5341).
+
 6.0.3 - December 6, 2022
 ----------
 * Optimizes bundle sizes of consumers by reducing footprint of "lodash" (SUI-5090).

package/cypress/plugins/index.js

@@ -0,0 +1,11 @@
+/* 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/support/commands.js

@@ -0,0 +1,25 @@
+// ***********************************************
+// This example commands.js shows you how to
+// create various custom commands and overwrite
+// existing commands.
+//
+// For more comprehensive examples of custom
+// commands please read more here:
+// https://on.cypress.io/custom-commands
+// ***********************************************
+//
+//
+// -- This is a parent command --
+// Cypress.Commands.add('login', (email, password) => { ... })
+//
+//
+// -- This is a child command --
+// Cypress.Commands.add('drag', { prevSubject: 'element'}, (subject, options) => { ... })
+//
+//
+// -- This is a dual command --
+// Cypress.Commands.add('dismiss', { prevSubject: 'optional'}, (subject, options) => { ... })
+//
+//
+// -- This will overwrite an existing command --
+// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })

package/cypress/support/index.js

@@ -0,0 +1,20 @@
+// ***********************************************************
+// This example support/index.js is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+// Import commands.js using ES2015 syntax:
+import './commands';
+
+// Alternatively you can use CommonJS syntax:
+// require('./commands')

package/cypress.json

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

package/lib/index.js

@@ -324,16 +324,33 @@ var DARK_LAYOUT = 'build/api/layout-dark.js';
  * Loads the layout from the server, using requirejs if available on the window and scriptjs if not.
  *
  * @param {Function} callback - A callback invoked with the layout module once resolved.
+ * @param {object} [options]
+ * @param {String} [options.loader = 'scriptjs'] - Configures the loader used for the loading the layout - available loaders are "scriptjs" and "requirejs".
  * @private
  */
 
 function getLayoutApi(theme, callback) {
+  var _ref = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {},
+      _ref$loader = _ref.loader,
+      loader = _ref$loader === void 0 ? 'scriptjs' : _ref$loader;
+
   var themedLayout = theme === 'dark' ? DARK_LAYOUT : LIGHT_LAYOUT;
   var url = Object(url_["createStaticURL"])(themedLayout);
-  external_scriptjs_default()(url, function () {
-    // eslint-disable-next-line no-underscore-dangle
-    callback(window.__splunk_layout__);
-  });
+
+  if (loader === 'scriptjs') {
+    external_scriptjs_default()(url, function () {
+      // eslint-disable-next-line no-underscore-dangle
+      callback(window.__splunk_layout__);
+    });
+  } else if (loader === 'requirejs') {
+    if (window.requirejs) {
+      window.requirejs([url], callback);
+    } else {
+      throw new Error('Error in react-page: options.loader = "requirejs" was set but window.requirejs does not exist.');
+    }
+  } else {
+    throw new Error('Invalid options.loader configuration: must be "scriptjs" or "requirejs".');
+  }
 }
 /**
  * Renders a React element into the Layout API.
@@ -352,18 +369,22 @@ function getLayoutApi(theme, callback) {
  * to the edge of the page.
  * @param {Boolean} [options.useGlobalLayerStack = true] - Wraps elements in @splunk/react-ui's LayerStackGlobalProvider.
  * @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.
  */
 
 
 function layout(element) {
-  var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  var _ref2 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
 
-  var _ref$useGlobalLayerSt = _ref.useGlobalLayerStack,
-      useGlobalLayerStack = _ref$useGlobalLayerSt === void 0 ? true : _ref$useGlobalLayerSt,
-      pageTitle = _ref.pageTitle,
-      _ref$theme = _ref.theme,
-      theme = _ref$theme === void 0 ? 'light' : _ref$theme,
-      layoutAPIOptions = _objectWithoutProperties(_ref, ["useGlobalLayerStack", "pageTitle", "theme"]);
+  var _ref2$useGlobalLayerS = _ref2.useGlobalLayerStack,
+      useGlobalLayerStack = _ref2$useGlobalLayerS === void 0 ? true : _ref2$useGlobalLayerS,
+      pageTitle = _ref2.pageTitle,
+      _ref2$theme = _ref2.theme,
+      theme = _ref2$theme === void 0 ? 'light' : _ref2$theme,
+      _ref2$loader = _ref2.loader,
+      loader = _ref2$loader === void 0 ? 'scriptjs' : _ref2$loader,
+      layoutAPIOptions = _objectWithoutProperties(_ref2, ["useGlobalLayerStack", "pageTitle", "theme", "loader"]);
 
   if (pageTitle) {
     document.title = pageTitle;
@@ -418,6 +439,8 @@ function layout(element) {
       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);
+  }, {
+    loader: loader
   });
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@splunk/react-page",
-  "version": "6.0.3",
+  "version": "6.1.0",
   "description": "Load React components into the latest layout from Splunk Enterprise",
   "main": "lib/index.js",
   "license": "Apache-2.0",
@@ -18,18 +18,14 @@
     "lint:ci": "yarn run eslint:ci && yarn run stylelint",
     "start": "cross-env NODE_ENV=development webpack --watch",
     "stylelint": "stylelint \"src/**/*.{js,jsx}\" --config stylelint.config.js",
-    "test:functional:prepare": "node src/tests/helpers/prepare_environment.js 8.0.3",
-    "test:functional": "yarn run test:functional:prepare && splunk-wdio-functional-test-runner functional.local.conf.js",
-    "test:functional:ci": "yarn run test:functional:prepare && splunk-wdio-functional-test-runner functional.ci.conf.js",
-    "test:functional:cloud": "yarn run test:functional:prepare && splunk-wdio-functional-test-runner functional.cloud.conf.js",
-    "test:cypress": "echo TODO: SUI-3442",
-    "test:cypress:ci": "echo TODO: SUI-3442"
+    "test:cypress": "node src/tests/run-cypress-tests.js 8.0.3",
+    "test:cypress:ci": "node src/tests/run-cypress-tests.js"
   },
   "dependencies": {
-    "@splunk/react-ui": "^4.15.0",
-    "@splunk/splunk-utils": "^2.2.4",
-    "@splunk/themes": "^0.13.1",
-    "@splunk/ui-utils": "^1.5.2",
+    "@splunk/react-ui": "^4.16.3",
+    "@splunk/splunk-utils": "^2.3.4",
+    "@splunk/themes": "^0.16.0",
+    "@splunk/ui-utils": "^1.6.0",
     "prop-types": "^15.6.2",
     "scriptjs": "^2.5.8"
   },
@@ -39,7 +35,6 @@
     "@splunk/cicd-tools": "^0.5.0",
     "@splunk/eslint-config": "^4.0.0",
     "@splunk/stylelint-config": "^4.0.0",
-    "@splunk/wdio-functional-test-runner": "^10.1.0",
     "@splunk/webpack-configs": "^6.0.0",
     "babel-eslint": "^10.1.0",
     "babel-loader": "^8.0.4",