sap / luigi

Micro frontend framework

Luigi

Description

Luigi is a micro frontend JavaScript framework that enables you to create an administrative user interface driven by local and distributed views. Luigi allows a web application to communicate with the micro frontends which the application contains. To make sure the communication runs smoothly, you can easily configure the settings such as routing, navigation, authorization, and user experience elements.

Luigi consists of Luigi Core application and Luigi Client libraries. They establish secure communication between the core application and the micro frontend using postMessage API.

Read the Getting started guide to learn more about micro frontends and the structure of Luigi.

Requirements

Luigi can run on any operating system and there are no specific requirements for installing it.

Download and installation

Follow the instructions in this document to install Luigi Core. Read this document to install the Luigi Client.

Usage

Examples

View the application examples to explore Luigi's features.

Go to the Luigi Fiddle site to see Luigi in action and configure a sample application.

Documentation

For details, see Luigi documentation.

Development

Development guidelines for micro frontend developers

For security reasons, follow these guidelines when developing a micro frontend:

• Make the micro frontend accessible only through HTTPS.
• Add Content Security Policies (CSPs).
• Make the Access-Control-Allow-Origin HTTP header as restrictive as possible.
• Maintain an allowlist with trusted domains and compare it with the origin of the Luigi Core application. The origin will be passed when you call the init listener in your micro frontend. Stop further processing if the origin does not match.

NOTE: Luigi follows these sandbox rules for iframes.

Code formatting for contributors

All projects in the repository use Prettier to format source code. Run the npm install command in the root folder to install it along with husky, the Git hooks manager. Both tools ensure proper codebase formatting before committing it.

Unit tests

To ensure that existing features still work as expected after your changes, run unit tests using the npm run test command in the core folder.

E2E tests

To ensure that existing features still work as expected after your changes, you need to run UI tests from the Angular example application. Before running the tests, you need to start our two test applications:

• Start the Angular example application by using the npm start command in the application folder.
• Start the js test application by using the npm run dev command in the application folder.

Once the applications are ready:

• Run npm run e2e:open in the test/e2e-test-application folder to start tests in the interactive mode.
• Run npm run e2e:run in the test/e2e-test-application folder to start tests in the headless browser.

Backward compatibility tests

Use these tests to ensure that applications written for previous versions of Luigi still work after Luigi gets updated with npm. Before running the tests, bundle Luigi by running npm run bundle in the main repository folder.

Install jq using the brew install jq command. It is required for the script to work, however, you can omit it if the command you are using to run your tests is tagged latest.

• Run npm run test:compatibility in the main repository folder to start regression testing. The system will prompt you to select the previous version.
• Run npm run test:compatibility -- --tag latest in the main repository folder to start regression testing with the last version preselected.
• On the CI, run npm run test:compatibility -- --install --tag latest in the main repository folder to install dependencies, bundle Luigi and run the tests with the last version preselected.

How to obtain support

If you have further questions about Luigi, you can check the GitHub Discussions page or contact us on our Slack channel. If you find a specific problem or bug, you can also open a GitHub issue on our repository. Please describe the problem and the steps to reproduce it in your issue.

Contributing

Please refer to the CONTRIBUTING.md file in this repository for instructions on how to contribute to Luigi.

Licensing

Please see our LICENSE for copyright and license information. Detailed information including third-party components and their licensing/copyright information is available via the REUSE tool.

luigi's Issues

Showcase landing page for luigi sample application

Description

The goal is to implement a new view in sample application showing a list of features with links:

• the user lands on that page w/o any navigation (via default node activation feature)
• landing page consist of links that brings the user to a given feature demo
  (backdrop, linkmanager, nodeParams, back context, defaultChildNode)

Fix fonts bundling in Luigi core

Description

We questioned why we need to import fundamental-ui.min.css file in luigi app html. Luigi should satisfy its own dependencies by itself, without the need of any app using Luigi to do that. Therefore, if an app using Luigi has fundamental-ui as a dependency (as our angular example does), this dependency should be used exclusively for the angular app (microfrontend), and under no circumstance by Luigi.

The actual issue is that when Luigi core is bundled, fonts are not properly loaded, including icon fonts. As a consequence, our angular example needs to provide Luigi with them by first importing luigi.min.scss in luigi app html

<link rel='stylesheet' href='/fundamental-ui/fundamental-ui.min.css'>

and second by making fonts and icons available to fundamental-ui.min.scss via the angular app build pipeline

{
  "glob": "fundamental-ui.min.css",
  "input": "node_modules/fundamental-ui/dist",
  "output": "/fundamental-ui"
},
{
  "glob": "fonts/**",
  "input": "node_modules/fundamental-ui/dist",
  "output": "/fundamental-ui"
},
{
  "glob": "SAP-icons.*",
  "input": "node_modules/fundamental-ui/dist",
  "output": "/fundamental-ui"
},

We don't want every user to add this code to their apps using Luigi.

Another drawback of this configuration is that Luigi core uses internally its own dependency of fundamental-ui, while in the angular example app we are supplying Luigi with extra content from fundamental-ui by using example´s own dependency of fundamental-ui. A mismatch of versions between both copies from fundamental-ui might lead to issues.

Findings

In Luigi core build pipeline, our Svelte loader preprocess handler is properly processing the @font-face at-rule, but in the generated luigi.css file all the occurrences of @font-face are empty objects. Most likely the paths of the url property are wrongly referenced, but I reasoned about that and tried different combinations without succeeding. Most likely, as a consequence of using the wrong paths, fonts and icons files are also not being copied to the core public folder.

Expected result

• Luigi build pipeline is copying fonts and icons files to public folder (currently are manually copied)
• Luigi is properly including all icon fonts (check in luigi.css file that @font-face is not an empty object)
• The aforementioned code from angular example is removed
• Application is working properly. Gear icon (login) on top navbar is displayed on both angular and vue.js apps; in safari, this icon is also shown if we login and logout.

Microfrontends do not check origin of postMessage API events

Description

A top level window (Console UI) is holding several nested iframes (microfrontends). Communication between components is built on top of postMessage API. In regards to postMessage API, communication is only possible between microfrontends and parent frame. Custom routing logic is implemented to provide further capabilities as required.

Risk

Message receivers, including parent frame, could accidentally process events received via postMessage API from untrusted origins. That compromises integrity.
Message senders could accidentally post events to untrusted origins. This compromises confidentiality.
Risk accepted on 03/Jul/18 by @gopikannappan

Suggested Mitigation

• In Luigi Core check messages received by postMessage API:

  • check if the event source is one of the iframes that was created be Luigi
  • check if the event origin matches the domain of the microfrontend as rendered or navigated to by Luigi

• In Luigi Core specify target when using the postMessage API to send messages to microfrontends:

  • set the target of the outcoming message to the domain of the microfrontend as rendered or navigated to by Luigi

This should also take care of roundtrip messages - when a microfrontend asks to provide something from Luigi Core and Luigi Core answers, the answer should go back to the same iframe and should target the same domain.

• Block microfrontends from same origin as consoleui (as they would have privileged access on parent frame) .

Vue.JS Example

Confirm these statements before you submit the issue:

• I have searched open and closed issues for duplicates.
• I have read the contributing guidelines.

---

Description

Currently there is only an Angular based example available. I would like to develop with luigi but I prefer developing apps in Vue.JS instead of Angular. Therefore I would like to have also an Vue.JS based example, with the same capabilities, to make development of Vue.JS Apps much easier for anyone else.

Reasons

Enable development of luigi based projects for Vue.JS applications.

Re-login not redirecting to Luigi app

Description:

If you logout, when we redirect to the oidc provider signin page, we are not redirecting back to Luigi app after new login.

Used oidc provider authority 'https://accounts.google.com'

Possible cause:

• When logging out and we redirect to oidc provider signing page, we might not be sending the proper value for redirect_uri.

Limit privileges to microfrontends

Description

A parent frame is holding several nested iframes (microfrontends). Communication between components is built on top of postMessage API. In regards to postMessage API, communication is only possible between microfrontends and parent frame. Custom routing logic is implemented to provide further capabilities as required.

IdTokens are being transferred to microfrontends in order for them to authenticate against backend services when required.

Risk

Malicious code in microfrontends could run with unnecesarily high privileges.

Suggested Mitigation

Evaluate the possibility of making microfrontend iframes sandboxed and define a restrictive by default policy allowing only strictly required privileges.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe

'onAuthSuccessful' event handler is executed on each page refresh

Description :

If user configures a onAuthSuccessful event handler in the configuration, i.e:

auth: {
...
    events: {
      
      onAuthSuccessful: function (data) {
        console.log('onAuthSuccessful', data);
      }
    }

than this event handler is executed on each page refresh, even if the authentication was not performed (because existing auth data is still valid)

404 support for non-existing paths

Description

If user provides a non-existing path (like http://localhost:4200/#/projects/pr5/users in luigi-sample-angular) he is not given any error message.

Instead, luigi traverses nodes structure and displays the deepmost node that is reachable (in this case, Project overview).

It's not the worst solution, but not perfect either. Implement some kind of 404s handling:

• keep the mechanism for navigating to the deep-most node possible, and additionally
• show a error notification (https://sap.github.io/fundamental/demo-pages/alert-overlay-demo-page.html) saying sth like "Could not map the exact target node for the requested route"

Remove TODO from routing.js::handleRouteChange function.

Reasons

User is not given a clear message that the exact path was not reachable.

Oauth token expiration handling

Description

Hi, it'd be great to have out-of-the box oauth token expiration handling.

After token expiration luigi could ask if token should be renewed. Otherwise user should be redirected to the logout page set in the oauth configuration. Please notice that currently it may act weird if there is set the same redirect_uri and logoutUrl because of the auto-login behavior

oAuth2ImplicitGrant: {
                    authorizeUrl: 'http://example.com/oauth/authorize',
                    logoutUrl: 'http://localhost:4200',
                    oAuthData: {
                        client_id: 'my.client',
                        redirect_uri: 'http://localhost:4200',
                        response_type: 'token',
                    }
}

Provide path info to installation commands in luigi-sample-angular readme

Description
There are some commands listed to tell the user how to install and launch the Angular Sample App.
To make it working, user has to perform them in different folders (luigi,luigi/core, ../luigi-exapmple-angular) but the readme does not say anything about it.
Reasons
By default (the way I thought at first) all commands should be performed in app's root folder which is ../luigi-exapmple-angular in this case.

OAuth2 implicit grant flow should use GET as default request method

Description

Current implementation of Oauth2 implicit flow uses POST method. RFC says that default method supported by server must be GET, and optionally POST - https://tools.ietf.org/html/rfc6749#section-1.3.2

The authorization server MUST support the use of the HTTP "GET"
method [RFC2616] for the authorization endpoint and MAY support the
use of the "POST" method as well.

I think that client should be changed to use GET by default.

Introduce a changelog.md file in luigi repo

Description

A nice set of guidelines around this topic could be found here:
https://keepachangelog.com/en/1.0.0/

this page's changelog (as example):
https://github.com/olivierlacan/keep-a-changelog/blob/master/CHANGELOG.md

Reasons

To document changes in released and published versions of luigi

Luigi top-nav dropdown behavior buggy

Description

We're using fundamental-ui's vanillaJs implementation for popover and dropdown (Profile > Logout) in luigi core, which leads to invalid event listener states and unresponsive behaviour.

Refactor it to svelte way or a better event listener handling

Preserve view doesn't work as expected

Preserve view functionality should save the given value and pass it to the previous module view. Right now it saves the value, but doesn't pass it to the previous view properly - this view displays not the last value, but one before that.

1. I call goBack method with value '1' -> nothing is shown in the UI
2. I call goBack method with value '2' -> '1' is shown in the UI
3. I call goBack method with value '3' -> '2' is shown in the UI
   ...

Top navigation dropdown should close when user clicks outside the component

Description

The dropdown component closes only when users clicks on the gear icon or clicks the logout action.
It should be possible to close it by clicking outside the component.

And please change icon from gear to sap-icon--customer

Preserve view only works for child nodes

Description

Navigation with preserveView flag (linkManager().navigate('/someothernode', null, true)) assumes that the next view to open (/someothernode) is a child node of the one where you are currently.

Looks like a bug in https://github.com/kyma-project/luigi/blob/master/core/src/App.html#L55
where we concatenate current path with target path.

Steps to reproduce
Define sibiling navigation nodes (non-child nodes), and try navigate from one to the other LuigiClient.linkManager().navigate('/bla', null, true)
Later, try to call
LuigiClient.linkManager().boBack() on the target node to go back.

Add possibility to disable iframe sharing on node level

Description

By default, content of navigation nodes share the same iframe as the user navigates through the application.
Provide an option to configure navigation nodes in a way to enforce new iframe creation for the content.

fundamental-ui css is not bundled properly after following application setup steps

Description

The script demonstrating application setup for angular 6 doesn't include proper bundling of fundamental-ui.

Actual result

When you follow the application setup, the css from fundamental ui will not be properly bundled and would not be available for index.html to import using href /fundamental-ui/fundamental-ui.min.css:

Refused to apply style from 'http://localhost:4200/fundamental-ui/fundamental-ui.min.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.

Solution proposal

Define additional steps in the script that would assure additional asset entry in angular.json file
I.e:

{
                "glob": "**",
                "input": "node_modules/fundamental-ui/dist",
                "output": "/fundamental-ui"
              }

Enable Travis CI for Luigi

https://github.com/kubernetes/test-infra/tree/master/prow

Visibility restriction base implementation

Description

As a Luigi core developer i want to define a function easily where i can set the visibility of a node/microfrontend based on my constraints.

While/after the Luigi nav tree is constructed, it should be processed through a visibility checking mechansism which removes non-visible nodes.
Add a demo to the sample angular application and a documentation

Solution Proposal :
Introduce a configurable nodeAccessibilityResolver function

Authentication improvements - logout and token expiration handling

Description

Hi, it'd be great to have out-of-the box oauth token expiration handling and builtin logout button.

After token expiration luigi could ask if token should be renewed. Otherwise user should be redirected to the logout page set in the oauth configuration. Please notice that currently it may act weird if there is set the same redirect_uri and logoutUrl because of the auto-login behavior

oAuth2ImplicitGrant: {
                    authorizeUrl: 'http://example.com/oauth/authorize',
                    logoutUrl: 'http://localhost:4200',
                    oAuthData: {
                        client_id: 'my.client',
                        redirect_uri: 'http://localhost:4200',
                        response_type: 'token',
                    }
}

Having the auto-login behavior configurable, would be also a great thing - currently I'm making workarounds to avoid it.

Reasons
To have out-of-the-box oauth login support for all use cases - login and logout.

Go back functionality doesn't work for circular dependencies

I have 2 microfrontends (A and B) which have possibility to navigate to the second one (A->B, B->A).
Steps to reproduce:

1. open A => result: LuigiClient.linkManager().hasBack()==false which is correct
2. navigate from A to B => result: B is opened correctly (LuigiClient.linkManager().hasBack()==true and I can navigate back to B)
3. navigate from B to A => result: A is opened with proper parameters (from B) but LuigiClient.linkManager().hasBack()==false so I cann't navigate back to B

Enable e2e ui tests for luigi sample application

Description

We would like add a npm script to luigi project that would run e2e tests in a headless browser.

AC:

• the test should test is luigi sample application (angular) is operational
• the luigi sample application (what is tested) should use bundled versions of core and client

Reasons :

We want to give the developer a tool that gives him immediate feedback if the changes applied in core/client libraries do not break the application that is using it.

Add basic Doc's

Confirm these statements before you submit the issue:

• I have searched open and closed issues for duplicates.
• I have read the contributing guidelines.

---

Description

please add some basics doc's on:

• LuigiClient core public API, maybe you can just have better inline code docs and link them into a webpage or something.

• Add a getting started guide to integrate a new app.

Reasons

Helps with getting started.

Provide development guidelines for microfrontend developers

Description
Development of microfrontends require a reasonable level of security awareness and some specific knowledge about the specific system features in order to be performed securely.

Risk

A security vulnerability in the frontend could compromise whole application security or affect customer devices (what could be leveraged to perform more sophisticated attacks using affected customer privileges)

Risk accepted on 03/Jul/18 by @gopikannappan

Suggested Remediation

Provide development guidelines, especially for microfrontends, and TLS usage, idp handling

Remove legacy luigi client compatibility properties

Luigi.token = currentContext.context.idToken;
// Luigi.linkManagerData = currentContext.context.linkManagerData;
// Luigi.currentEnvironmentId = currentContext.context.currentEnvironmentId;
// Luigi.sessionId = currentContext.context.sessionId;

Possibility to check whether other microfrontend exists

Description

It would be great if Luigi will provide possibility to check whether other microfrontend exists. Someting like:
LuigiClient.linkManager() .path("/project/other-module") .exists()

Reasons

We want show option to navigate to other microfrontend only if it is available.

navigation node as a link to an external page

Introduce a static link node that only has the properties

• label
• category
• externalLinkUrl
• sameWindow

If a node has a property externalLinkUrl, it is treated as a static link node and all irrelevant properties should be ignored. In the left-side navigation, these nodes should get a dedicated styleclass so they can be later distinguished visually.

Luigi improvements after feedback received

Based on the feedback provided by Artur Nowakowski on #45, I took a deeper look on his proposals, discussed with a team member and decided on action items, and shared with the rest of the team.

Action items:

• Luigi UMD (add some webpack configuration) Invalid
• Add 2 new simple examples (rename folders and files to follow naming conventions) Will add additional example in different issue. Additionally we have documentation instructions describing how to setup luigi applications using different technologies.
• Optimize initialization (remove interval checking, initialize right after setting the config data)

We can get rid of the interval checking in the main.js of the luigi core and bootstrap the Luigi as a callback function of the Luigi.setConfig() fn

There are still some drawbacks regarding removing the public folder on core repo which don´t make it straightforward, therefore this is out of scope for this task. E.g., a different package.json is still needed for released version, path would be different for all files in public folder except luigi.js.

Documentation improvements for navigation configuration section

Description

We document how to pass node params via link manager. But we don't describe how to read them using luigi client. Its hard to guess that without going through the code of the sample application.

Support fragments in path routing

Description

When path routing is used in Luigi Core, it is not possible to use anchors/fragments in the website path. This is a very helpful (and old) feature for navigate inside website (especially in the docs).

Reasons

• more transparent url for users: fragments (via anchors) is more readable than # or another char in query,
• support anchor navigation in content view in Kyma Console, and in the future also in catalog-service and instances.

Processing overlay feature

Description

Hi,
It would be great if Luigi will provide possibility to display processing overlay during component initialisation.

Reasons

As a developer I would like to have opportunity to inform user that component is initialising and then that initialisation is finished by using processing overlay to provide better user experience.

Generic alerts and confirmation boxes

Description

Hi, It'd be great to have generic solution to display alerts and confirmation boxes.

Alerts:

• Types: info, warning, error, success
• Configuration params:
  • Auto close (with timeout) / close with button
  • with/without backdrop
• support for closing it programaticaly
• I think I won't need it but maybe closing could support callback or opening could return promise resolved after close
• alerts should allow displaying urls. It would be great if could use link manager (use case: display error alert like Your request failed because extension you tried to use is not enabled. Go to extension ui and enable it first <deeplink to another ui here>. User clicks link, goes to extension ui, enables extension, clicks back, repeats request, fireworks.gif 😉)

Confirmation boxes:

• list of buttons to display - there may be many use cases, one will want to have "ok" and "cancel" other will want to have "cancel", "save as draft", "save" etc. It should be flexible
• function which displays popup could return promise, resolved after any button click
• support for closing it programaticaly

Reasons
Alerts and confirmation boxes is widely used thing in the user interfaces. Having dedicated mechanism to display them would help developers to provide better user experience, because they would always look and behave the same.

Clean up in luigi core public folder

Description
It looks like there are files which are not needed (anymore).
I.e

• sample-navigation-config.js
• fonts
• index.html
• temp.html
• investigate other files if they are needed

Default child node mechanism not working for nested nodes

Description

If you have a nested navigation structure using 'defaulPathSegment' property, luigi won't redirect you to the deepmost node.

e.g.:

• root node ("") has no viewUrl and defaultPathSegment set to "home"
• "home" has no viewUrl and defaultPathSegment set to "example"

Expected result

One can expect that he will be redirected like this: "" --> "home" --> "home/example"

Actual result

Luigi will stop after redirection to "home"/

Backdrop layer reveal some gaps - CSS bug

Description:

Backdrop layer does not cover the left navigation area properly. There is narrow gap on the right side and a gap at the bottom

"Virtual Children" feature

At the moment you can use "hideFromNav" property to hide a single node from the left-side navigation. In addition we need a new node property "virtualChildren:boolean" that indicates that all childnodes should not have a visual representation but are rather subcomponents of its parent node, so "selected node" indication should stay at the parent node.

See https://devportal.yaas.io/tools/buildersdk/index.html#IntegrateaBuildermodule, section "Virtual children in navigation tree" for more information.

Get rid of build warnings in luigi

when execute npm run bundle in luigi/core the console is polluted by a lot of warning logs. Either fix warnings or change log level.

Request to make navigation tree collapsible

Description

It would be very helpful if the navigation tree is collapsible.
If collapsed, only the icons of the navigation nodes should be displayed. will be handled in #453

Auto-formatting for svelte components

Description

For now Prettier auto-formats only .js/.ts/.css files. Svelte components reside in .html files, thus Prettier skips them. Check if it is possible to apply (and implement ) auto-formatting for js snippets inside .html svelte components.

Navigation to projects view throws an error

Navigation to projects view causes an error:

Uncaught Error: ViewDestroyedError: Attempt to use a destroyed view: detectChanges
    at viewDestroyedError (core.js:7614)
    at Object.debugUpdateDirectives [as updateDirectives] (core.js:11059)
    at checkAndUpdateView (core.js:10459)
    at callWithDebugContext (core.js:11352)
    at Object.debugCheckAndUpdateView [as checkAndUpdateView] (core.js:11030)
    at ViewRef_.push../node_modules/@angular/core/fesm5/core.js.ViewRef_.detectChanges (core.js:8846)
    at project.component.ts:34
    at setContext (luigi-client.js:90)
    at luigi-client.js:109
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:421)

Provide es5 compatible luigi

Description

Provide es5 compatible versions for :

• client - compile it manually and commit to the repo.
• core - set up target version to es5

Reasons

There seem to be interest in having es5 compatible luigi (core and client)

Request for Icon support in Navigation nodes

Description

When configuring navigation nodes it would be helpful to also be able to define small 16x16 icons.

Make auto-login configurable

The auto-login option should be configurable.
If its enabled, there is no login button and the user is redirected to login page automatically (no
content for anonymous session).
Otherwise, user can see a login button.

Broken (hash) routing after successful OIDC authentication

Description

While returning after successful authentication, OIDC redirects back to the application with authentication data in the hash part of the url.
Routing mechanism (hash routing enabled) in Luigi doesn't handle it.
Additionally we are redirecting twice to OIDC server.

Expected result

Luigi consumes the authentication data and clears it from the current location.
Luigi goes to OIDC server only once.
Luigi navigates to the first navigable root node.
Callback be hosted statically /auth/callback.html

Actual result

The application consumes the auth data, but the url is unchanged (still contains hash part) . This url state is not mapped to any navigation node.

Fix npm audit issues for luigi repo

Description

npm audit shows vulnerable dependencies in luigi repo.

Steps to reproduce

npm audit

Landing readme.md for luigi

Description

We need:

• a logo
• some nice content describing which problems Luigi solves
• high level diagram

Reasons

To give high level overview for the potential users/collaborators about Luigi.

Attachments

docu_proposal.txt

Mock IDP for luigi sample application

Description

Implement a client-side mock identity provider for luigi sample applications.
Simple html/js-only mock that can be used for doing an OIDC implicit grant flow (GET-only).

• parses auth request
• shows (static, mocked, non-functional) login page
• redirects back incl. creating required hash params
• its part of our sample application (angular)
• should be used by default in the sample apps

Reasons

To have a out-of-the-box example for integration with an example OIDC

"Dynamic nodes" feature

The dynamic node functionality enables the user to specify the path segment not to be a static string but a dynamic value that is then passed to the context of the view.

Two implementation options:

1. as in yaas builder using a dedicated property "dynamic". Its value is used as the key in the context object.
2. convention in existing pathSegment property, e.g. ":"-prefix, so ":context_key"

See https://devportal.yaas.io/tools/buildersdk/index.html#IntegrateaBuildermodule, section "Dynamic nodes in navigation tree" for more info.

Review luigi documentation structure

We want to get some fresh ideas about the structure of the luigi documentation.