sap / luigi Goto Github PK
View Code? Open in Web Editor NEWMicro frontend framework
Home Page: https://luigi-project.io
License: Apache License 2.0
Micro frontend framework
Home Page: https://luigi-project.io
License: Apache License 2.0
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.
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.
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:
See https://devportal.yaas.io/tools/buildersdk/index.html#IntegrateaBuildermodule, section "Dynamic nodes in navigation tree" for more info.
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
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:
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.
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.
Description
We would like add a npm script to luigi project that would run e2e tests in a headless browser.
AC:
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.
Description
If you have a nested navigation structure using 'defaulPathSegment' property, luigi won't redirect you to the deepmost node.
e.g.:
Expected result
One can expect that he will be redirected like this: "" --> "home" --> "home/example"
Actual result
Luigi will stop after redirection to "home"/
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
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.
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).
Reasons
To have a out-of-the-box example for integration with an example OIDC
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
#
or another char in query,content
view in Kyma Console
, and in the future also in catalog-service
and instances
.Description
It looks like there are files which are not needed (anymore).
I.e
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.
Luigi.token = currentContext.context.idToken;
// Luigi.linkManagerData = currentContext.context.linkManagerData;
// Luigi.currentEnvironmentId = currentContext.context.currentEnvironmentId;
// Luigi.sessionId = currentContext.context.sessionId;
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)
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.
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
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
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"
}
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.
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
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.
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:
In Luigi Core specify target when using the postMessage API to send messages to microfrontends:
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.
Description
When configuring navigation nodes it would be helpful to also be able to define small 16x16 icons.
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.
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.
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.
Description
npm audit
shows vulnerable dependencies in luigi repo.
Steps to reproduce
npm audit
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.
Confirm these statements before you submit the issue:
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.
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
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',
}
}
We want to get some fresh ideas about the structure of the luigi documentation.
Description
We need:
Reasons
To give high level overview for the potential users/collaborators about Luigi.
Attachments
Description
Provide es5 compatible versions for :
Reasons
There seem to be interest in having es5 compatible luigi (core and client)
Confirm these statements before you submit the issue:
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.
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)
Description
The goal is to implement a new view in sample application showing a list of features with links:
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.
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:
Remove TODO from routing.js::handleRouteChange function.
Reasons
User is not given a clear message that the exact path was not reachable.
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:
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.
Description
Hi, It'd be great to have generic solution to display alerts and confirmation boxes.
Alerts:
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:
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.
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.
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.
I have 2 microfrontends (A and B) which have possibility to navigate to the second one (A->B, B->A).
Steps to reproduce:
Introduce a static link node that only has the properties
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.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.