Merge branch 'feature/ARTESCA-8593-alert-configuration' into tmp/octo…

…pus/w/126.0/feature/ARTESCA-8593-alert-configuration

shell-ui/README.md

@@ -1,4 +1,20 @@
-# solutions-navbar
+# Dev guideline
+
+When we develop on this project, each time your import component from core-ui.
+Make sure to import the component directly from the component file.
+
+We need to do that because we have this configuration on module federation :
+``` js
+'@scality/core-ui': {
+    singleton: true,
+}
+```
+
+We want to avoid to set the option `eager: true` because will load core-ui 
+completely at the beginning and cause significative performance issues.
+
+
+## Legacy - solutions-navbar
 
 Common navbar that can be integrated in metalk8s solution UI to provide the following features : 
 
@@ -54,4 +70,3 @@ $ npm run build
  - solutions--logged-out, payload : {}
  - solutions--theme-changed, payload: {theme}
  - solutions--language-changed, payload: {language: "en" | "fr"}
-

shell-ui/package.json

@@ -23,6 +23,7 @@
     "@testing-library/react": "^11.2.5",
     "@testing-library/react-hooks": "^5.1.1",
     "@testing-library/user-event": "^13.0.10",
+    "@types/styled-components": "^5.1.26",
     "babel-jest": "^26.6.3",
     "babel-loader": "^8.2.2",
     "babel-plugin-styled-components": "^1.12.0",
@@ -52,7 +53,8 @@
     "@fortawesome/free-regular-svg-icons": "^5.15.4",
     "@fortawesome/free-solid-svg-icons": "^5.15.4",
     "@fortawesome/react-fontawesome": "^0.2.0",
-    "@scality/core-ui": "github:scality/core-ui#v0.81.0",
+    "@js-temporal/polyfill": "0.4.3",
+    "@scality/core-ui": "github:scality/core-ui#v0.85.0",
     "@scality/module-federation": "github:scality/module-federation.git#1.1.0",
     "canvas": "^2.9.3",
     "oidc-client": "^1.11.3",

shell-ui/src/App.tsx

@@ -1,3 +1,4 @@
+import React from 'react';
 import ReactDOM from 'react-dom';
 import App from './FederatedApp';
-ReactDOM.render(<App />, document.getElementById('app'));
+ReactDOM.render(<App />, document.getElementById('app'));

shell-ui/src/FederatedApp.tsx

@@ -1,5 +1,5 @@
 import '@fortawesome/fontawesome-free/css/all.css';
-import type { Node } from 'react';
+import React from 'react';
 import { useEffect, useMemo } from 'react';
 import { QueryClient, QueryClientProvider } from 'react-query';
 import { ErrorPage500 } from '@scality/core-ui/dist/components/error-pages/ErrorPage500.component';
@@ -28,8 +28,10 @@ import { ErrorBoundary } from 'react-error-boundary';
 import { LanguageProvider, useLanguage } from './navbar/lang';
 import './index.css';
 import { ShellHistoryProvider } from './initFederation/ShellHistoryProvider';
+import { CoreUiThemeProvider } from '@scality/core-ui/dist/components/coreuithemeprovider/CoreUiThemeProvider';
+import { ThemeProvider } from './navbar/theme';
 
-export const queryClient: typeof QueryClient = new QueryClient();
+export const queryClient = new QueryClient();
 
 function FederatedRoute({
   url,
@@ -40,7 +42,7 @@ function FederatedRoute({
 }: FederatedComponentProps & {
   groups?: string[];
   app: SolutionUI;
-}): Node {
+}) {
   const { retrieveConfiguration } = useConfigRetriever();
   const { setAuthConfig } = useAuthConfig();
   const { language } = useLanguage();
@@ -80,7 +82,7 @@ function ProtectedFederatedRoute({
 }: FederatedComponentProps & {
   groups?: string[];
   app: SolutionUI;
-}): Node {
+}) {
   const { userData } = useAuth();
   const { retrieveConfiguration } = useConfigRetriever();
 
@@ -105,7 +107,7 @@ function ProtectedFederatedRoute({
   return <></>;
 }
 
-function InternalRouter(): Node {
+function InternalRouter() {
   const discoveredViews = useDiscoveredViews();
   const { retrieveConfiguration } = useConfigRetriever();
   const routes = discoveredViews
@@ -153,7 +155,7 @@ function InternalRouter(): Node {
   );
 }
 
-function InternalApp(): Node {
+function InternalApp() {
   const history = useMemo(() => {
     const history = createBrowserHistory({});
     return history;
@@ -169,7 +171,11 @@ function InternalApp(): Node {
   );
 }
 
-export function WithInitFederationProviders({ children }: { children: Node }) {
+export function WithInitFederationProviders({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
   const { config: shellConfig } = useShellConfig();
   return (
     <UIListProvider discoveryURL={shellConfig.discoveryUrl}>
@@ -217,20 +223,26 @@ const AppProviderWrapper = () => {
   );
 };
 
-export default function App(): Node {
+export default function App() {
   return (
-    <ScrollbarWrapper>
-      <div
-        style={{
-          height: '100vh',
-          display: 'flex',
-          flexDirection: 'column',
-        }}
-      >
-        <LanguageProvider>
-          <AppProviderWrapper />
-        </LanguageProvider>
-      </div>
-    </ScrollbarWrapper>
+    <ThemeProvider>
+      {(theme) => (
+        <CoreUiThemeProvider theme={theme.brand}>
+          <ScrollbarWrapper>
+            <div
+              style={{
+                height: '100vh',
+                display: 'flex',
+                flexDirection: 'column',
+              }}
+            >
+              <LanguageProvider>
+                <AppProviderWrapper />
+              </LanguageProvider>
+            </div>
+          </ScrollbarWrapper>
+        </CoreUiThemeProvider>
+      )}
+    </ThemeProvider>
   );
 }

shell-ui/src/alerts/AlertProvider.tsx

@@ -1,5 +1,4 @@
-import type { Node } from 'react';
-import 'react';
+import React from 'react';
 import { useQuery } from 'react-query';
 import { Loader } from '@scality/core-ui/dist/components/loader/Loader.component';
 import { getAlerts } from './services/alertManager';
@@ -8,7 +7,7 @@ import { AlertContext } from './alertContext';
  * A wrapper fetching alerts and ensuring their accuracy via a polling refresh strategy.
  *
  * @param string alert manager url
- * @param Node children react node
+ * @param React.ReactNode children react node
  * @returns
  */
 
@@ -17,8 +16,8 @@ export default function AlertProvider({
   children,
 }: {
   alertManagerUrl: string;
-  children: Node;
-}): Node {
+  children: React.ReactNode;
+}) {
   const query = useQuery('activeAlerts', () => getAlerts(alertManagerUrl), {
     // refetch the alerts every 10 seconds
     refetchInterval: 30000,
@@ -34,4 +33,4 @@ export default function AlertProvider({
       {query.status !== 'loading' && children}
     </AlertContext.Provider>
   );
-}
+}