Merge branch 'improvement/introduce-common-navbar' into q/2.8

scality · Feb 15, 2021 · ae0835a · ae0835a
2 parents c5f4e04 + 18f0a53
commit ae0835a
Show file tree

Hide file tree

Showing 17 changed files with 13,275 additions and 0 deletions.
diff --git a/solutions-ui-navbar/.flowconfig b/solutions-ui-navbar/.flowconfig
@@ -0,0 +1,24 @@
+[ignore]
+.*/node_modules/module-deps/.*
+.*/build/.*
+
+[include]
+src/.*
+
+[libs]
+
+[lints]
+all=error
+untyped-import=off
+unclear-type=off
+sketchy-null=off
+unsafe-getters-setters=warn
+
+[options]
+esproposal.optional_chaining=enable
+react.runtime=automatic
+
+[strict]
+
+[untyped]
+.*/node_modules/react-select/.*
diff --git a/solutions-ui-navbar/.gitignore b/solutions-ui-navbar/.gitignore
@@ -0,0 +1,2 @@
+node_modules
+dist
diff --git a/solutions-ui-navbar/.prettierrc b/solutions-ui-navbar/.prettierrc
@@ -0,0 +1,5 @@
+{
+  "singleQuote": true,
+  "tabWidth": 2,
+  "trailingComma": "all"
+}
diff --git a/solutions-ui-navbar/README.md b/solutions-ui-navbar/README.md
@@ -0,0 +1,56 @@
+# solutions-navbar
+
+Common navbar that can be integrated in metalk8s solution UI to provide the following features : 
+
+ - Authentication : token negociation, token renewal, claims provider
+ - Theming : provide the selected theme to solution UIs
+ - I18n : provide a language selector and expose selected language to solution UIs
+
+## Contribute
+
+```js
+$ npm run start
+```
+
+## Build
+
+```js
+$ npm run build
+```
+
+## Use
+
+```html
+<script src="./dist/main.js"></script>
+<solutions-navbar 
+    oidc-provider-url="https://oidc.provider/" 
+    scopes="openid mail scope"
+
+ />
+```
+
+### Attributes
+
+ - oidc-provider-url : string, required, the component will suffix it with .well-known/openid-configuration to retrieve OIDC configuration
+ - scopes : string, required, scopes negiciated with the oidc provider
+ - client-id : string, required  
+
+ - redirect-url : string, customized redirect uri
+ - options : {[url: string]: {en: string, fr: string, roles: string[]}} -- eg : {"/": {en: "Overview", fr: "Vue generale", roles: ["admin"]}, "/platform": {en: "Platform", fr: "Infrastructure"}, ...} - by default we display the full navbar in static mode, this attribute can be used if we want to extends the menu in a specific context
+
+## Methods 
+
+ - logOut(): void - force logOut, might be called when an UI receive a 401 or 403 status code for example
+ - getClaims(): Promise<Claims>
+ - getIdToken(): Promise<string> - jwtToken
+ - getLanguage(): "en" | "fr"
+ - getTheme(): Theme
+ - getOptions(): {[url: string]: {en: string, fr: string}}
+
+## Events 
+
+ - solutions--authenticated, payload: {token, claims: {roles, instanceIds, firstName, lastName, email, scopes, ...}} --- also called when the token is renewed
+ - solutions--logged-out, payload : {}
+ - solutions--theme-changed, payload: {theme}
+ - solutions--language-changed, payload: {language: "en" | "fr"}
+
diff --git a/solutions-ui-navbar/babel.config.js b/solutions-ui-navbar/babel.config.js
@@ -0,0 +1,16 @@
+if (process.env.NODE_ENV === "test") {
+  module.exports = {
+    "presets": ["@babel/preset-env", "@babel/preset-flow", ["@babel/preset-react", {
+        "runtime": "automatic"
+      }]],
+      "plugins": ["@babel/plugin-transform-modules-commonjs"]
+  }
+} else {
+  module.exports = {
+    "presets": ["@babel/preset-env", "@babel/preset-flow", ["@babel/preset-react", {
+        "runtime": "automatic"
+      }]]
+  }
+
+}
+
diff --git a/solutions-ui-navbar/index-template.html b/solutions-ui-navbar/index-template.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Document</title>
+</head>
+<body>
+  <div id="app"></div>
+</body>
+</html>
+
diff --git a/solutions-ui-navbar/index.js b/solutions-ui-navbar/index.js
@@ -0,0 +1,4 @@
+import ReactDOM from 'react-dom';
+import Mdx from './src/index.mdx';
+
+ReactDOM.render(<Mdx />, document.getElementById('app'));
diff --git a/solutions-ui-navbar/jest.config.js b/solutions-ui-navbar/jest.config.js
@@ -0,0 +1,3 @@
+module.exports = {
+    "transformIgnorePatterns": ["/node_modules/(?!react-to-webcomponent)"]
+}