+
+
\ No newline at end of file
diff --git a/core/examples/luigi-sample-angular/webpack.config.js b/core/examples/luigi-sample-angular/webpack.config.js
index 8e6876e7f4..e277eedf48 100644
--- a/core/examples/luigi-sample-angular/webpack.config.js
+++ b/core/examples/luigi-sample-angular/webpack.config.js
@@ -28,7 +28,7 @@ const baseHref = '';
const deployUrl = '';
const projectRoot = process.cwd();
const maximumInlineSize = 10;
-const postcssPlugins = function(loader) {
+const postcssPlugins = function (loader) {
return [
postcssImports({
resolve: (url, context) => {
@@ -390,6 +390,13 @@ module.exports = {
glob: '**',
dot: true
}
+ },
+ {
+ context: 'node_modules/@kyma-project/luigi-client',
+ to: './luigi-client',
+ from: {
+ glob: 'luigi-client.js'
+ }
}
],
{
diff --git a/core/package-lock.json b/core/package-lock.json
index d2fb05e416..550d6e181e 100644
--- a/core/package-lock.json
+++ b/core/package-lock.json
@@ -2468,6 +2468,11 @@
"stream-shift": "^1.0.0"
}
},
+ "eases-jsnext": {
+ "version": "1.0.10",
+ "resolved": "https://registry.npmjs.org/eases-jsnext/-/eases-jsnext-1.0.10.tgz",
+ "integrity": "sha512-1bO1+FIuqtOZpcyoIJuTnw8PU9X+RHHA248mZ1m+CPiiKFGCiNLWecITlhO4DXe7whZmBoJyfKwUoMW0KK5mNw=="
+ },
"ecc-jsbn": {
"version": "0.1.2",
"resolved": "https://registry.npmjs.org/ecc-jsbn/-/ecc-jsbn-0.1.2.tgz",
@@ -13376,6 +13381,46 @@
"svelte-dev-helper": "^1.1.9"
}
},
+ "svelte-transitions": {
+ "version": "1.2.0",
+ "resolved": "https://registry.npmjs.org/svelte-transitions/-/svelte-transitions-1.2.0.tgz",
+ "integrity": "sha512-8KRhNi75bx7Z5s6kJMXv4s8mizwttktm//uA3CvVSBcvwI9tTgq4QXOiYjVRcyQBq/jfLpnnwT19h/WEI7ZF8Q==",
+ "requires": {
+ "svelte-transitions-draw": "^1.0.0",
+ "svelte-transitions-fade": "^1.0.0",
+ "svelte-transitions-fly": "^1.0.1",
+ "svelte-transitions-slide": "^1.0.0"
+ }
+ },
+ "svelte-transitions-draw": {
+ "version": "1.0.0",
+ "resolved": "https://registry.npmjs.org/svelte-transitions-draw/-/svelte-transitions-draw-1.0.0.tgz",
+ "integrity": "sha512-yRE/Y8+kN492It7L4xX+WxPI31mO9CJG+asxxjhc8sAY4xf/HwtvY+rPyA/i5J7QqYsZvPoRubiZRHvVrQc5lw==",
+ "requires": {
+ "eases-jsnext": "^1.0.9"
+ }
+ },
+ "svelte-transitions-fade": {
+ "version": "1.0.0",
+ "resolved": "https://registry.npmjs.org/svelte-transitions-fade/-/svelte-transitions-fade-1.0.0.tgz",
+ "integrity": "sha1-2+FSDfH1tTcL1hr+/Gfy0v/2MwM="
+ },
+ "svelte-transitions-fly": {
+ "version": "1.0.4",
+ "resolved": "https://registry.npmjs.org/svelte-transitions-fly/-/svelte-transitions-fly-1.0.4.tgz",
+ "integrity": "sha512-OIVVCloqOQZY1GNVMhCP2StWkKrd+FDiZuD/+SSyN+eWhhwaA+C/kfeYGHQMCC0wPsVCPv9fottojPQKeMVdDA==",
+ "requires": {
+ "eases-jsnext": "^1.0.9"
+ }
+ },
+ "svelte-transitions-slide": {
+ "version": "1.0.0",
+ "resolved": "https://registry.npmjs.org/svelte-transitions-slide/-/svelte-transitions-slide-1.0.0.tgz",
+ "integrity": "sha1-FQ3Zy455+p4vJQ4ZjH1plgvyGZQ=",
+ "requires": {
+ "eases-jsnext": "^1.0.9"
+ }
+ },
"svgo": {
"version": "0.7.2",
"resolved": "https://registry.npmjs.org/svgo/-/svgo-0.7.2.tgz",
diff --git a/core/package.json b/core/package.json
index 791eac618f..21151c118e 100644
--- a/core/package.json
+++ b/core/package.json
@@ -28,6 +28,7 @@
"style-loader": "^0.21.0",
"svelte": "^2.8.0",
"svelte-loader": "^2.9.1",
+ "svelte-transitions": "^1.2.0",
"url-loader": "^1.0.1",
"webpack": "^4.11.1",
"webpack-cli": "^3.0.3"
@@ -54,6 +55,5 @@
"repository": {
"type": "git",
"url": "ssh://github.com/kyma-project/luigi.git"
- },
- "dependencies": {}
+ }
}
diff --git a/core/src/App.html b/core/src/App.html
index 0b48d517c6..23fd18824a 100644
--- a/core/src/App.html
+++ b/core/src/App.html
@@ -1,14 +1,21 @@
-
-
+
+
+ {#if showLoadingIndicator}
+
+ {/if}
+
@@ -219,7 +241,7 @@
cursor: pointer;
}
- .iframeContainer {
+ .iframeContainer, .spinnerContainer {
position: fixed;
top: 50px;
left: 320px;
@@ -237,18 +259,20 @@
height: 100%;
}
- .iframeContainerNoNav {
- position: fixed;
- top: 0;
- left: 0;
- bottom: 0;
- right: 0;
+ .spinnerContainer {
+ background: rgba(243,244,245,0.8);
+ display: flex;
+ align-items: center;
+ justify-content: center;
}
- .iframeContainerNoNav :global(iframe) {
- border: none;
- width: 100%;
- height: 100%;
+ .no-nav {
+ .iframeContainer, .spinnerContainer {
+ position: fixed;
+ top: 0;
+ left: 0;
+ bottom: 0;
+ right: 0;
+ }
}
-
diff --git a/core/src/main.js b/core/src/main.js
index ca7171a2d6..03bcf14f67 100644
--- a/core/src/main.js
+++ b/core/src/main.js
@@ -4,34 +4,41 @@ import { getConfigValue } from './services/config';
import { waitForKeyExistency } from './utilities/async-helpers.js';
let app;
-waitForKeyExistency(window.Luigi, 'config').then(isLuigiConfigLoaded => {
- if (isLuigiConfigLoaded) {
- const authLib = getConfigValue('auth.use');
- if (authLib && authLibraries[authLib]) {
- authLibraries[authLib]();
- }
+waitForKeyExistency(window.Luigi, 'config').then(
+ isLuigiConfigLoaded => {
+ if (isLuigiConfigLoaded) {
+ const authLib = getConfigValue('auth.use');
+ if (authLib && authLibraries[authLib]) {
+ authLibraries[authLib]();
+ }
- app = new App({
- target: document.querySelector('body'),
- data: {}
- });
- window.app = app;
- }
-}, e => {
- const errorMsg = 'Ups.. Looks like Luigi was not configured. Please use Luigi.setConfig(config) function to configure Luigi.';
- console.error(errorMsg);
- var errorTextNode = document.createTextNode(errorMsg);
- var fd_ui = document.createElement("div");
- fd_ui.setAttribute("class", "fd-ui");
- fd_ui.setAttribute("style","text-align: center;" )
+ app = new App({
+ target: document.querySelector('body'),
+ data: {}
+ });
+ window.app = app;
+ }
+ },
+ e => {
+ const errorMsg =
+ 'Ups.. Looks like Luigi was not configured. Please use Luigi.setConfig(config) function to configure Luigi.';
+ console.error(errorMsg);
+ var errorTextNode = document.createTextNode(errorMsg);
+ var fd_ui = document.createElement('div');
+ fd_ui.setAttribute('class', 'fd-ui');
+ fd_ui.setAttribute('style', 'text-align: center;');
- var errorDiv = document.createElement("div");
- errorDiv.setAttribute("class", "fd-alert fd-alert--error")
- errorDiv.setAttribute("style", "max-width: 800px; display: inline-block; margin-top: 40px;")
- errorDiv.appendChild(errorTextNode);
+ var errorDiv = document.createElement('div');
+ errorDiv.setAttribute('class', 'fd-alert fd-alert--error');
+ errorDiv.setAttribute(
+ 'style',
+ 'max-width: 800px; display: inline-block; margin-top: 40px;'
+ );
+ errorDiv.appendChild(errorTextNode);
- fd_ui.appendChild(errorDiv);
- document.body.appendChild(fd_ui);
-});
+ fd_ui.appendChild(errorDiv);
+ document.body.appendChild(fd_ui);
+ }
+);
export default app;
diff --git a/core/src/services/navigation.js b/core/src/services/navigation.js
index a6a05c2fde..45b4cb6bfc 100644
--- a/core/src/services/navigation.js
+++ b/core/src/services/navigation.js
@@ -1,13 +1,23 @@
import { getConfigValue, getConfigValueFromObjectAsync } from './config';
import { isFunction } from '../utilities/helpers';
-const isNodeAccessPermitted = (nodeToCheckPermissionFor, parentNode, currentContext) => {
- const permissionCheckerFn = getConfigValue('navigation.nodeAccessibilityResolver');
+const isNodeAccessPermitted = (
+ nodeToCheckPermissionFor,
+ parentNode,
+ currentContext
+) => {
+ const permissionCheckerFn = getConfigValue(
+ 'navigation.nodeAccessibilityResolver'
+ );
if (typeof permissionCheckerFn !== 'function') {
return true;
}
- return permissionCheckerFn(nodeToCheckPermissionFor, parentNode, currentContext);
-}
+ return permissionCheckerFn(
+ nodeToCheckPermissionFor,
+ parentNode,
+ currentContext
+ );
+};
export const getNavigationPath = async (rootNavProviderPromise, activePath) => {
const rootNode = {};
@@ -41,7 +51,12 @@ export const getChildren = async (node, context) => {
'_childrenProvider',
context ? context : node.context
);
- node.children = (children instanceof Array) && children.filter((child) => isNodeAccessPermitted(child, node, context)) || [];
+ node.children =
+ (children instanceof Array &&
+ children.filter(child =>
+ isNodeAccessPermitted(child, node, context)
+ )) ||
+ [];
bindChildrenToParent(node);
node._childrenProviderUsed = true;
return node.children;
@@ -123,14 +138,23 @@ const applyContext = (context, addition, navigationContext) => {
export const findMatchingNode = (urlPathElement, nodes) => {
let result = null;
- const dynamicSegmentsLength = nodes.filter(n => n.pathSegment.startsWith(':')).length;
+ const dynamicSegmentsLength = nodes.filter(n => n.pathSegment.startsWith(':'))
+ .length;
if (nodes.length > 1) {
if (dynamicSegmentsLength === 1) {
- console.warn('Invalid Node setup detected. \nStatic and dynamic nodes cannot be used together on the same level. Static node gets cleaned up. \nRemove the static Node from the configuration to resolve this warning. \nAffected pathSegment:', urlPathElement, 'Children:', nodes);
+ console.warn(
+ 'Invalid Node setup detected. \nStatic and dynamic nodes cannot be used together on the same level. Static node gets cleaned up. \nRemove the static Node from the configuration to resolve this warning. \nAffected pathSegment:',
+ urlPathElement,
+ 'Children:',
+ nodes
+ );
nodes = nodes.filter(n => n.pathSegment.startsWith(':'));
}
if (dynamicSegmentsLength > 1) {
- console.error('Invalid Node setup detected. \nMultiple dynamic Nodes are not allowed on the same level. Stopped navigation. \nInvalid Children:', nodes);
+ console.error(
+ 'Invalid Node setup detected. \nMultiple dynamic Nodes are not allowed on the same level. Stopped navigation. \nInvalid Children:',
+ nodes
+ );
return null;
}
}
@@ -153,7 +177,7 @@ export const findMatchingNode = (urlPathElement, nodes) => {
node.pathSegment = node.pathSegment.replace(key, urlPathElement);
node.viewUrl = node.viewUrl.replace(key, urlPathElement);
if (node.context) {
- Object.entries(node.context).map((entry) => {
+ Object.entries(node.context).map(entry => {
const dynKey = entry[1];
if (dynKey === key) {
node.context[entry[0]] = dynKey.replace(dynKey, urlPathElement);
diff --git a/core/src/services/routing.js b/core/src/services/routing.js
index b035ae8e63..f638ece780 100644
--- a/core/src/services/routing.js
+++ b/core/src/services/routing.js
@@ -2,7 +2,8 @@ import { getNavigationPath } from './navigation';
import {
getConfigValue,
getConfigValueAsync,
- getConfigBooleanValue
+ getConfigBooleanValue,
+ getConfigValueFromObject
} from './config';
import { getPathWithoutHash, getUrlWithoutHash } from '../utilities/helpers';
@@ -15,7 +16,7 @@ const getLastNodeObject = pathData => {
return lastElement ? lastElement : {};
};
-const getDefaultChildNode = function (pathData) {
+const getDefaultChildNode = function(pathData) {
const lastElement =
pathData.navigationPath[pathData.navigationPath.length - 1];
@@ -30,7 +31,7 @@ const getDefaultChildNode = function (pathData) {
}
};
-const isExistingRoute = function (path, pathData) {
+const isExistingRoute = function(path, pathData) {
if (path === '') {
return true;
}
@@ -87,7 +88,9 @@ const removeElementChildren = node => {
export const isNotSameDomain = (config, component) => {
if (config.iframe) {
const componentData = component.get();
- const previousUrl = getUrlWithoutHash(componentData.previousNodeValues.viewUrl);
+ const previousUrl = getUrlWithoutHash(
+ componentData.previousNodeValues.viewUrl
+ );
const nextUrl = getUrlWithoutHash(componentData.viewUrl);
return previousUrl != nextUrl;
}
@@ -96,8 +99,10 @@ export const isNotSameDomain = (config, component) => {
export const hasIframeIsolation = component => {
const componentData = component.get();
- return componentData.isolateView || componentData.previousNodeValues.isolateView;
-}
+ return (
+ componentData.isolateView || componentData.previousNodeValues.isolateView
+ );
+};
export const getContentViewParamPrefix = () => {
return (
@@ -143,9 +148,10 @@ const navigateIframe = (config, component, node) => {
);
}
- if (isNotSameDomain(config, component)
- || hasIframeIsolation(component)
- || Boolean(config.builderCompatibilityMode)
+ if (
+ isNotSameDomain(config, component) ||
+ hasIframeIsolation(component) ||
+ Boolean(config.builderCompatibilityMode)
) {
const componentData = component.get();
// preserveView, hide other frames, else remove
@@ -156,6 +162,17 @@ const navigateIframe = (config, component, node) => {
}
if (componentData.viewUrl) {
+ if (
+ getConfigValueFromObject(
+ componentData,
+ 'currentNode.loadingIndicator.enabled'
+ ) !== false
+ ) {
+ component.set({ showLoadingIndicator: true });
+ } else {
+ component.set({ showLoadingIndicator: false });
+ }
+ config.navigateOk = undefined;
config.iframe = document.createElement('iframe');
config.iframe.src = viewUrl;
@@ -163,6 +180,7 @@ const navigateIframe = (config, component, node) => {
if (config.builderCompatibilityMode) {
config.iframe.addEventListener('load', () => {
+ window.postMessage({ msg: 'luigi.hide-loading-indicator' }, '*');
config.iframe.contentWindow.postMessage(
['init', JSON.stringify(componentData.context)],
'*'
@@ -240,9 +258,12 @@ const getNodeParams = params => {
const getPathParams = nodes => {
const params = {};
- nodes.filter(n => n.pathParam).map(n => (n.pathParam)).forEach(pp => {
- params[pp.key.replace(':', '')] = pp.value;
- });
+ nodes
+ .filter(n => n.pathParam)
+ .map(n => n.pathParam)
+ .forEach(pp => {
+ params[pp.key.replace(':', '')] = pp.value;
+ });
return params;
};
@@ -289,10 +310,12 @@ export const handleRouteChange = async (path, component, node, config) => {
nodeParams,
pathParams,
isolateView,
- previousNodeValues: (previousCompData) ? {
- viewUrl: previousCompData.viewUrl,
- isolateView: previousCompData.isolateView
- } : {}
+ previousNodeValues: previousCompData
+ ? {
+ viewUrl: previousCompData.viewUrl,
+ isolateView: previousCompData.isolateView
+ }
+ : {}
});
navigateIframe(config, component, node);
diff --git a/core/src/utilities/async-helpers.js b/core/src/utilities/async-helpers.js
index 883b8d597a..ebb5ddc4e3 100644
--- a/core/src/utilities/async-helpers.js
+++ b/core/src/utilities/async-helpers.js
@@ -3,17 +3,21 @@ const handles = {};
export const keyExistencyTimeout = 2000;
export const keyExistencyCheckInterval = 50;
-export const waitForKeyExistency = (obj, name, timeout = keyExistencyTimeout) => {
+export const waitForKeyExistency = (
+ obj,
+ name,
+ timeout = keyExistencyTimeout
+) => {
const startTimer = Date.now();
return new Promise((resolve, reject) => {
handles[name] = setInterval(() => {
if (obj[name]) {
return resolve(true);
}
- if ((Date.now() - startTimer) > timeout) {
+ if (Date.now() - startTimer > timeout) {
clearInterval(handles[name]);
return reject(false);
}
}, keyExistencyCheckInterval);
});
-}
\ No newline at end of file
+};
diff --git a/core/src/variables.scss b/core/src/variables.scss
index 98cb571935..95ad9d5a6a 100644
--- a/core/src/variables.scss
+++ b/core/src/variables.scss
@@ -1,3 +1,2 @@
-$bg1: #F4F4F4;
+$bg1: #f4f4f4;
$bg2: black;
-
\ No newline at end of file
diff --git a/core/test/navigation.spec.js b/core/test/navigation.spec.js
index 6f83ffa8b0..4b20421ab7 100644
--- a/core/test/navigation.spec.js
+++ b/core/test/navigation.spec.js
@@ -4,9 +4,9 @@ const expect = chai.expect;
const assert = chai.assert;
const sinon = require('sinon');
-const sampleNavPromise = new Promise(function (resolve) {
+const sampleNavPromise = new Promise(function(resolve) {
const lazyLoadedChildrenNodesProviderFn = () => {
- return new Promise(function (resolve) {
+ return new Promise(function(resolve) {
resolve([
{
pathSegment: 'b1',
@@ -50,14 +50,14 @@ const sampleNavPromise = new Promise(function (resolve) {
]);
});
-describe('Navigation', function () {
+describe('Navigation', function() {
afterEach(() => {
// reset
window.Luigi = {
config: {}
};
});
- describe('getNavigationPath()', function () {
+ describe('getNavigationPath()', function() {
it('should not fail for undefined arguments', () => {
navigation.getNavigationPath(undefined, undefined);
});
@@ -205,7 +205,11 @@ describe('Navigation', function () {
window.Luigi = {
config: {
navigation: {
- nodeAccessibilityResolver: (nodeToCheckPermissionFor, currentNode, currentContext) => {
+ nodeAccessibilityResolver: (
+ nodeToCheckPermissionFor,
+ currentNode,
+ currentContext
+ ) => {
if (nodeToCheckPermissionFor.constraints) {
return nodeToCheckPermissionFor.constraints === 'other_scope';
}
@@ -222,9 +226,7 @@ describe('Navigation', function () {
{ label: 'child2' }
]
};
- const children = await navigation.getChildren(
- nodeWithChildren
- );
+ const children = await navigation.getChildren(nodeWithChildren);
expect(children.length).to.equal(1);
expect(children[0].label).to.equal('child2');
});
@@ -257,8 +259,9 @@ describe('Navigation', function () {
// truthy tests
// when
const resStaticOk = navigation.findMatchingNode('other', [staticNode()]);
- const resDynamicOk = navigation.findMatchingNode('avengers', [dynamicNode()]);
-
+ const resDynamicOk = navigation.findMatchingNode('avengers', [
+ dynamicNode()
+ ]);
// // then
expect(resStaticOk.pathSegment).to.equal('other');
@@ -271,11 +274,20 @@ describe('Navigation', function () {
expect(resNull).to.equal(null);
sinon.assert.notCalled(console.warn);
- const resStaticWarning = navigation.findMatchingNode('avengers', [staticNode(), dynamicNode()]);
- expect(resStaticWarning.pathSegment).to.equal('avengers', 'static warning pathSegment: ' + resStaticWarning.pathSegment);
+ const resStaticWarning = navigation.findMatchingNode('avengers', [
+ staticNode(),
+ dynamicNode()
+ ]);
+ expect(resStaticWarning.pathSegment).to.equal(
+ 'avengers',
+ 'static warning pathSegment: ' + resStaticWarning.pathSegment
+ );
sinon.assert.calledOnce(console.warn);
- const resMultipleDynamicError = navigation.findMatchingNode('twoDynamic', [dynamicNode(), dynamicNode()]);
+ const resMultipleDynamicError = navigation.findMatchingNode(
+ 'twoDynamic',
+ [dynamicNode(), dynamicNode()]
+ );
expect(resMultipleDynamicError).to.equal(null);
sinon.assert.calledOnce(console.warn);
sinon.assert.calledOnce(console.error);
diff --git a/core/test/routing.spec.js b/core/test/routing.spec.js
index 9cb264c728..2fdf171b66 100644
--- a/core/test/routing.spec.js
+++ b/core/test/routing.spec.js
@@ -11,13 +11,14 @@ import { afterEach } from 'mocha';
describe('Routing', () => {
let component;
beforeEach(() => {
+ let lastObj = {};
component = {
set: obj => {
- component.get = () => obj;
+ Object.assign(lastObj, obj);
},
- get: () => ({})
+ get: () => lastObj
};
- })
+ });
afterEach(() => {
if (document.createElement.restore) {
document.createElement.restore();
@@ -119,9 +120,10 @@ describe('Routing', () => {
navigateOk: null
};
- // when
window.Luigi = {};
window.Luigi.config = sampleLuigiConfig;
+
+ // when
sinon.stub(document, 'createElement').callsFake(() => ({ src: null }));
await routing.handleRouteChange(path, component, node, config, window);
@@ -131,6 +133,43 @@ describe('Routing', () => {
component.get().hideNav,
window.Luigi.config.settings.hideNavigation
);
+ assert.equal(component.get().showLoadingIndicator, true);
+ });
+
+ it('should set component data with hash path using disabled loadingIndicator', async () => {
+ // given
+ const path = '#/projects';
+ const expectedViewUrl = '/aaa.html';
+
+ const node = {
+ pathSegment: 'projects',
+ label: 'AAA',
+ viewUrl: '/aaa.html',
+ loadingIndicator: {
+ enabled: false
+ },
+ prepend: sinon.spy()
+ };
+
+ const config = {
+ iframe: null,
+ builderCompatibilityMode: false,
+ navigateOk: null
+ };
+
+ // when
+ window.Luigi = {};
+ window.Luigi.config = {
+ navigation: {
+ nodes: () => [node]
+ }
+ };
+ sinon.stub(document, 'createElement').callsFake(() => ({ src: null }));
+ await routing.handleRouteChange(path, component, node, config, window);
+
+ // then
+ assert.equal(component.get().viewUrl, expectedViewUrl);
+ assert.equal(component.get().showLoadingIndicator, false);
});
it('should set component data without hash path', async () => {
@@ -203,7 +242,13 @@ describe('Routing', () => {
.returns({ src: null })
.once();
- await routing.handleRouteChange(path, componentSaved, node, config, window);
+ await routing.handleRouteChange(
+ path,
+ componentSaved,
+ node,
+ config,
+ window
+ );
// then
assert.equal(componentSaved.get().viewUrl, expectedViewUrl);
@@ -585,31 +630,46 @@ describe('Routing', () => {
src: 'http://url.com/app.html!#/prevUrl'
}
};
- component.set({ viewUrl: 'http://url.com/app.html!#/someUrl', previousNodeValues: { viewUrl: config.iframe.src } });
+ component.set({
+ viewUrl: 'http://url.com/app.html!#/someUrl',
+ previousNodeValues: { viewUrl: config.iframe.src }
+ });
assert.isFalse(routing.isNotSameDomain(config, component));
- component.set({ viewUrl: 'http://otherurl.de/app.html!#/someUrl', previousNodeValues: { viewUrl: config.iframe.src } });
+ component.set({
+ viewUrl: 'http://otherurl.de/app.html!#/someUrl',
+ previousNodeValues: { viewUrl: config.iframe.src }
+ });
assert.isTrue(routing.isNotSameDomain(config, component));
});
it('hasIframeIsolation', () => {
// no node is set to isolateView
- component.set({ isolateView: false, previousNodeValues: { isolateView: false } });
+ component.set({
+ isolateView: false,
+ previousNodeValues: { isolateView: false }
+ });
assert.isFalse(routing.hasIframeIsolation(component));
// new node is set to isolateView
- component.set({ isolateView: true, previousNodeValues: { isolateView: false } });
+ component.set({
+ isolateView: true,
+ previousNodeValues: { isolateView: false }
+ });
assert.isTrue(routing.hasIframeIsolation(component));
// current node is set to isolateView
- component.set({ isolateView: false, previousNodeValues: { isolateView: true } });
+ component.set({
+ isolateView: false,
+ previousNodeValues: { isolateView: true }
+ });
assert.isTrue(routing.hasIframeIsolation(component));
});
describe('defaultChildNodes', () => {
const routing = rewire('../src/services/routing');
const getDefaultChildNode = routing.__get__('getDefaultChildNode');
- const getPathData = function() {
+ const getPathData = function () {
return {
navigationPath: [
{
diff --git a/docs/navigation-configuration.md b/docs/navigation-configuration.md
index bd983089e1..544e6140ac 100644
--- a/docs/navigation-configuration.md
+++ b/docs/navigation-configuration.md
@@ -73,6 +73,8 @@ window.Luigi.setConfig({
- **context** sends the specified object as context to the view. Use this parameter in combination with the dynamic **pathSegment** to receive the context through the context listeners of **Luigi client**. This is an alternative to using the dynamic value in the **viewUrl**.
- **defaultChildNode** sets the child node that Luigi activates automatically if the current node has no **viewUrl** defined. Provide **pathSegment** of the child node you want to activate as a string.
- **isolateView** renders the view in a new frame when you enter and leave the Node. This setting overrides the same-domain frame re-usage. The **isolateView** is disabled by default.
+- **loadingIndicator.enabled** shows a loading indicator when switching between micro front-ends. If you have a super fast micro front-end, you can disable this feature to prevent the flickering of the loading indicator. The **loadingIndicator.loadingIndicator** is enabled by default.
+- **loadingIndicator.hideAutomatically** disables the automatic hiding of the loading indicator once the micro front-end is loaded. Only considered if the loading indicator is enabled. Does not apply if the loading indicator is activated manually with the `LuigiClient.uxManager().showLoadingIndicator()` function. If the loading indicator is enabled and automatic hiding is disabled, use `LuigiClient.uxManager().hideLoadingIndicator()` to hide it manually in your micro front-end during the startup. The **loadingIndicator.hideAutomatically** is enabled by default.
### A dynamic viewURL
diff --git a/docs/ux-manager.md b/docs/ux-manager.md
index c4cf86880a..f083670d90 100644
--- a/docs/ux-manager.md
+++ b/docs/ux-manager.md
@@ -7,7 +7,12 @@ Here is a code sample and a definition of the different parameters:
````
LuigiClient.uxManager().addBackdrop()
LuigiClient.uxManager().removeBackdrop()
+LuigiClient.uxManager().showLoadingIndicator()
+LuigiClient.uxManager().hideLoadingIndicator()
````
+
- **addBackdrop()** adds a backdrop to block the top and side navigation. It is based on Fundamental UI Modal, which you can use in your micro front-end to achieve the same behaviour.
-- **removeBackdrop()** removes the backdrop.
\ No newline at end of file
+- **removeBackdrop()** removes the backdrop.
+- **showLoadingIndicator()** adds a backdrop with a loading indicator for the micro front-end frame. This overrides the **loadingIndicator.enabled** setting.
+- **hideLoadingIndicator()** removes the loading indicator. Use it after calling **showLoadingIndicator()** or to hide the indicator when you use the `loadingIndicator.hideAutomatically: false` Node configuration.
\ No newline at end of file