codenotch-react 1.0.21 → 1.0.23

package/dist/auml.d.ts

@@ -0,0 +1,29 @@
+import React from "react";
+import { SpaRenderStatus } from '@echino/echino.ui.framework/components/SpaBuilder/common/ISpaRenderProps';
+interface IRenderAumlProps {
+    auml: string;
+}
+interface IRenderAumlState {
+    loaded: boolean;
+    inspectorEnabled: boolean;
+}
+export declare class RenderAuml extends React.Component<IRenderAumlProps, IRenderAumlState> {
+    _refreshTokenTimer: NodeJS.Timeout | undefined;
+    constructor(props: IRenderAumlProps);
+    componentDidMount(): void;
+    componentWillUnmount(): void;
+    progress(s: SpaRenderStatus): void;
+    getLogo(): React.JSX.Element;
+    getMode(theme: boolean | undefined): "dark" | "light";
+    retrieveInputs(): {
+        [k: string]: string;
+    };
+    getTimeToTokenExpiration(): number | null;
+    getTimeToNewTokenExpiration(expirationDateTime: string): number;
+    msToTime(ms: number): string;
+    parseJwt(token: string): any;
+    render(): React.JSX.Element;
+    refreshExpiredToken(): Promise<void>;
+}
+export {};
+//# sourceMappingURL=auml.d.ts.map

package/dist/auml.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"auml.d.ts","sourceRoot":"","sources":["../src/auml.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,eAAe,EAAE,MAAM,0EAA0E,CAAC;AAmB3G,UAAU,gBAAgB;IACtB,IAAI,EAAE,MAAM,CAAC;CAChB;AACD,UAAU,gBAAgB;IACtB,MAAM,EAAE,OAAO,CAAC;IAChB,gBAAgB,EAAE,OAAO,CAAC;CAC7B;AAED,qBAAa,UAAW,SAAQ,KAAK,CAAC,SAAS,CAAC,gBAAgB,EAAE,gBAAgB,CAAC;IAE/E,kBAAkB,EAAE,MAAM,CAAC,OAAO,GAAG,SAAS,CAAC;gBAEnC,KAAK,EAAE,gBAAgB;IAqBnC,iBAAiB;IAmCjB,oBAAoB;IAQpB,QAAQ,CAAC,CAAC,EAAE,eAAe;IAO3B,OAAO;IAYP,OAAO,CAAC,KAAK,EAAE,OAAO,GAAG,SAAS;IAclC,cAAc;;;IAMd,wBAAwB,IAAI,MAAM,GAAG,IAAI;IAoCzC,2BAA2B,CAAC,kBAAkB,EAAE,MAAM,GAAG,MAAM;IAO/D,QAAQ,CAAC,EAAE,EAAE,MAAM;IAmBnB,QAAQ,CAAC,KAAK,EAAE,MAAM;IAUtB,MAAM;IAiDA,mBAAmB;CAqC5B"}

package/dist/auml.js

@@ -0,0 +1,185 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RenderAuml = void 0;
+const react_1 = __importDefault(require("react"));
+const SpaRenderWithBrowserRouter_1 = require("@echino/echino.ui.framework/components/SpaBuilder/SpaRender/SpaRenderWithBrowserRouter");
+class RenderAuml extends react_1.default.Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            loaded: false,
+            inspectorEnabled: false
+        };
+        // Add a function that we can call from the browser console, allowing us to debug the page
+        //TODO we may not want to do that for prod pages
+        //@ts-ignore
+        window.toggleInspector = () => {
+            this.setState({
+                inspectorEnabled: !this.state.inspectorEnabled
+            }, () => console.log(`Auml inspector is now ${this.state.inspectorEnabled ? 'enabled' : 'disabled'}`));
+        };
+    }
+    componentDidMount() {
+        try {
+            // Setup a method to refresh our access token when it expires
+            if (this._refreshTokenTimer) {
+                clearTimeout(this._refreshTokenTimer);
+            }
+            if (!user) {
+                console.log("No user found, will not refresh the token");
+                return;
+            }
+            let timeToExpireMs = this.getTimeToTokenExpiration();
+            if (timeToExpireMs === null) {
+                console.log("No identity token found, attempting refreshing the token in 5 minutes");
+                this._refreshTokenTimer = setTimeout(() => this.refreshExpiredToken(), 5 * 60 * 1000);
+                return;
+            }
+            if (timeToExpireMs <= 0) {
+                // Refresh it immediatelty
+                this.refreshExpiredToken();
+            }
+            else {
+                this._refreshTokenTimer = setTimeout(() => this.refreshExpiredToken(), timeToExpireMs);
+            }
+        }
+        catch (err) {
+            console.warn("Could not setup token refresh timer: " + err);
+        }
+    }
+    componentWillUnmount() {
+        // Cleanup the refresh of the token
+        if (this._refreshTokenTimer) {
+            clearTimeout(this._refreshTokenTimer);
+        }
+    }
+    progress(s) {
+        //console.log('progessStatus ', s);
+        if (s === 'completed') {
+            this.setState({ loaded: true });
+        }
+    }
+    getLogo() {
+        //@ts-ignore
+        let tenant = global.tenant;
+        if (tenant.logoUrl) {
+            return react_1.default.createElement("img", { src: tenant.logoUrl, alt: tenant.displayName });
+        }
+        else {
+            return react_1.default.createElement("div", { className: 'app-loading-title' }, tenant.displayName);
+        }
+    }
+    getMode(theme) {
+        if (theme !== undefined) {
+            return theme ? 'dark' : 'light';
+        }
+        if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+            return 'dark';
+        }
+        return 'light';
+    }
+    // Get input from the query parameters in the url
+    retrieveInputs() {
+        return Object.fromEntries(new URLSearchParams(window.location.search).entries());
+    }
+    getTimeToTokenExpiration() {
+        // The identity token is the only one we have access here on the client
+        // We use it to know when the access token (which we can't read) will expire
+        let identityToken = null;
+        let identityTokenKey = `${tenant.name}IdToken=`;
+        let cookies = document.cookie.split(';');
+        for (let c of cookies) {
+            if (c.trim().startsWith(identityTokenKey)) {
+                identityToken = c.trim().slice(identityTokenKey.length);
+                break;
+            }
+        }
+        if (identityToken === null) {
+            return null; // token not found
+        }
+        let identityTokenParsed = this.parseJwt(identityToken);
+        let expires = identityTokenParsed.exp; // Timestamp in second since Unix epoch
+        let timeToExpiresMs = expires * 1000 - new Date().getTime();
+        let timeToExpireStr = this.msToTime(timeToExpiresMs);
+        console.log(`Token will expire at ${new Date(expires * 1000).toISOString()} (in ${timeToExpireStr}), setting up a timer to refresh it`);
+        // Refresh it a bit before the expiration (5 min)
+        timeToExpiresMs -= 5 * 60 * 1000;
+        return timeToExpiresMs;
+    }
+    getTimeToNewTokenExpiration(expirationDateTime) {
+        let timeToExpiresMs = new Date(expirationDateTime).getTime() - new Date().getTime();
+        // Refresh it a bit before the expiration (5 min)
+        timeToExpiresMs -= 5 * 60 * 1000;
+        return timeToExpiresMs;
+    }
+    msToTime(ms) {
+        let seconds = Math.floor((ms / 1000) % 60), minutes = Math.floor((ms / (1000 * 60)) % 60), hours = Math.floor((ms / (1000 * 60 * 60)) % 24);
+        let timeString = seconds + " seconds";
+        if (minutes > 0) {
+            timeString = minutes + " minutes " + timeString;
+        }
+        if (hours > 0) {
+            timeString = hours + " hours " + timeString;
+        }
+        return timeString;
+    }
+    parseJwt(token) {
+        var base64Url = token.split('.')[1];
+        var base64 = base64Url.replace(/-/g, '+').replace(/_/g, '/');
+        var jsonPayload = decodeURIComponent(window.atob(base64).split('').map(function (c) {
+            return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2);
+        }).join(''));
+        return JSON.parse(jsonPayload);
+    }
+    render() {
+        //var clusterUrl = this.figureOutClusterUrl();
+        let inputs = this.retrieveInputs();
+        let theme = undefined;
+        if (inputs["_theme"]) {
+            theme = inputs["_theme"].toLowerCase() === "dark";
+        }
+        let aumlManifest = null;
+        try {
+            let appManifestObj = JSON.parse(appManifest);
+            aumlManifest = appManifestObj.auml;
+        }
+        catch { }
+        return (react_1.default.createElement("div", { className: "app" },
+            react_1.default.createElement(SpaRenderWithBrowserRouter_1.SpaRenderWithBrowserRouter, { appDescription: this.props.auml, tenant: tenant, serviceName: serviceName, packageVersions: packageVersions, user: user, languages: languages, onProgress: (s) => this.progress(s), input: inputs, theme: theme, manifest: aumlManifest, inspectorEnabled: this.state.inspectorEnabled, children: [] }),
+            !this.state.loaded &&
+                react_1.default.createElement("div", { className: `app-loading ${this.getMode(theme)}` },
+                    this.getLogo(),
+                    react_1.default.createElement("i", { className: "fas fa-circle-notch fa-spin" }))));
+    }
+    async refreshExpiredToken() {
+        console.log("Token will expire soon, requesting a new one...");
+        // Using the refresh token we ask for a new access token using /portal/login/refresh
+        // If the refresh token has also expired, we will be redirected to the login page
+        let redirectUrl = window.location.href; // Where to send us back in case we need to be redirected to the login page
+        let url = `${tenant.clusterUrl}/portal/login/refresh?redirectUrl=${encodeURIComponent(redirectUrl)}`;
+        let response = await fetch(url); // For this request to work, we need to have a refresh token in the cookies
+        if (response.ok) {
+            // Setup next refresh
+            let timeToExpireMs;
+            try {
+                let newTokenExpiration = await response.text();
+                timeToExpireMs = this.getTimeToNewTokenExpiration(newTokenExpiration);
+            }
+            catch {
+                timeToExpireMs = 2 * 60 * 60 * 1000; // refresh in 2 hours
+            }
+            console.log(`Refresh request ok, next refresh in ${this.msToTime(timeToExpireMs)}`);
+            this._refreshTokenTimer = setTimeout(() => this.refreshExpiredToken(), timeToExpireMs);
+        }
+        else {
+            let content = await response.text();
+            console.error("Could not refresh the token", content);
+            console.log("Retrying refreshing the token in 5 minutes...");
+            this._refreshTokenTimer = setTimeout(() => this.refreshExpiredToken(), 5 * 60 * 1000);
+        }
+    }
+}
+exports.RenderAuml = RenderAuml;

package/dist/index.d.ts

@@ -31,5 +31,4 @@ export declare function useCodenotch(): ICodenotchApi;
  */
 export declare function useCodenotchApp(props?: ICodenotchEnv): ICodenotchApi;
 export { CODENOTCH_ENV };
-export { Auml, IAumlProps } from './auml/Auml';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,aAAa;IAC1B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,EAAE,CAAC;IACrB,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;CACtB;AAED,MAAM,WAAW,aAAa;IAC1B,GAAG,EAAE,aAAa,CAAC;IACnB,YAAY,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,OAAO,KAAK,OAAO,CAAC,GAAG,CAAC,CAAC;IACjE,YAAY,EAAE,CAAC,WAAW,EAAE,MAAM,KAAK,OAAO,CAAC;QAAE,OAAO,EAAE,OAAO,CAAA;KAAE,CAAC,CAAC;IACrE,QAAQ,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,IAAI,KAAK;QAAE,OAAO,EAAE,MAAM,IAAI,CAAA;KAAE,CAAC;CACjF;AAED,MAAM,MAAM,cAAc,CAAC,CAAC,IAAI,KAAK,CAAC,EAAE,CAAC,CAAC,aAAa,GAAG,CAAC,CAAC,CAAC,CAAC;AAE9D,QAAA,MAAM,aAAa,EAAE,aAAkB,CAAC;AAExC;;;GAGG;AACH,wBAAgB,YAAY,IAAI,aAAa,CA8D5C;AAED;;;;GAIG;AACH,wBAAgB,eAAe,CAAC,KAAK,CAAC,EAAE,aAAa,GAAG,aAAa,CAmBpE;AAGD,OAAO,EAAE,aAAa,EAAE,CAAC;AAGzB,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,aAAa;IAC1B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,EAAE,CAAC;IACrB,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;CACtB;AAED,MAAM,WAAW,aAAa;IAC1B,GAAG,EAAE,aAAa,CAAC;IACnB,YAAY,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,OAAO,KAAK,OAAO,CAAC,GAAG,CAAC,CAAC;IACjE,YAAY,EAAE,CAAC,WAAW,EAAE,MAAM,KAAK,OAAO,CAAC;QAAE,OAAO,EAAE,OAAO,CAAA;KAAE,CAAC,CAAC;IACrE,QAAQ,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,IAAI,KAAK;QAAE,OAAO,EAAE,MAAM,IAAI,CAAA;KAAE,CAAC;CACjF;AAED,MAAM,MAAM,cAAc,CAAC,CAAC,IAAI,KAAK,CAAC,EAAE,CAAC,CAAC,aAAa,GAAG,CAAC,CAAC,CAAC,CAAC;AAE9D,QAAA,MAAM,aAAa,EAAE,aAAkB,CAAC;AAExC;;;GAGG;AACH,wBAAgB,YAAY,IAAI,aAAa,CA8D5C;AAED;;;;GAIG;AACH,wBAAgB,eAAe,CAAC,KAAK,CAAC,EAAE,aAAa,GAAG,aAAa,CAmBpE;AAGD,OAAO,EAAE,aAAa,EAAE,CAAC"}

package/dist/index.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Auml = exports.CODENOTCH_ENV = void 0;
+exports.CODENOTCH_ENV = void 0;
 exports.useCodenotch = useCodenotch;
 exports.useCodenotchApp = useCodenotchApp;
 const CODENOTCH_ENV = {};
@@ -88,6 +88,3 @@ function useCodenotchApp(props) {
     }
     return useCodenotch();
 }
-// Export des composants React
-var Auml_1 = require("./auml/Auml");
-Object.defineProperty(exports, "Auml", { enumerable: true, get: function () { return Auml_1.Auml; } });

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "codenotch-react",
-    "version": "1.0.21",
+    "version": "1.0.23",
     "main": "dist/index.js",
     "types": "dist/index.d.ts",
     "author": "Codenotch SA",
@@ -13,6 +13,9 @@
     "files": [
         "dist/**/*"
     ],
+    "dependencies": {
+        "@echino/echino.ui.framework": "1.1.42"
+    },
     "devDependencies": {
         "@types/node": "^25.3.2",
         "@types/react": "^16.14.69",

package/dist/auml/Auml.d.ts

@@ -1,8 +0,0 @@
-import React from 'react';
-export interface IAumlProps {
-    auml: string;
-}
-export declare class Auml extends React.Component<IAumlProps> {
-    render(): React.JSX.Element | null;
-}
-//# sourceMappingURL=Auml.d.ts.map

package/dist/auml/Auml.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Auml.d.ts","sourceRoot":"","sources":["../../src/auml/Auml.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,MAAM,WAAW,UAAU;IACvB,IAAI,EAAE,MAAM,CAAC;CAChB;AAED,qBAAa,IAAK,SAAQ,KAAK,CAAC,SAAS,CAAC,UAAU,CAAC;IAGjD,MAAM;CAkCT"}

package/dist/auml/Auml.js

@@ -1,36 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Auml = void 0;
-const react_1 = __importDefault(require("react"));
-const __1 = require("..");
-class Auml extends react_1.default.Component {
-    render() {
-        let codenotchEnvironment = __1.CODENOTCH_ENV;
-        try {
-            if (`${this.props.auml ?? ''}`.trim() === '') {
-                return null;
-            }
-            // Try to load SpaRender only when the component is rendered
-            let SpaRender;
-            try {
-                SpaRender = require('@echino/echino.ui.framework').SpaRender;
-            }
-            catch (e) {
-                // Package not available, return an informational message
-                return react_1.default.createElement("div", { style: { background: '#343434', color: '#fbb040', fontSize: 12, padding: 20, borderRadius: 5 } }, "Package '@echino/echino.ui.framework' not available");
-            }
-            return react_1.default.createElement(SpaRender, { appDescription: this.props.auml, languages: codenotchEnvironment.languages ?? [], serviceName: codenotchEnvironment.serviceName ?? 'DEV', tenant: {
-                    name: codenotchEnvironment.tenantName ?? 'DEV',
-                    clusterUrl: codenotchEnvironment.clusterUrl ?? undefined,
-                    displayName: codenotchEnvironment.tenantDisplayName ?? undefined,
-                } });
-        }
-        catch (e) {
-            return react_1.default.createElement("div", { style: { background: '#343434', color: '#fc8181', fontSize: 12, padding: 20, borderRadius: 5 } }, e?.message ?? 'Unknown error');
-        }
-    }
-}
-exports.Auml = Auml;

package/dist/components.d.ts

@@ -1,18 +0,0 @@
-import React from 'react';
-import { ICodenotchEnv } from './index';
-export interface CodenotchProviderProps extends ICodenotchEnv {
-    children: React.ReactNode;
-}
-/**
- * Composant Provider React pour Codenotch
- * Configure automatiquement l'environnement Codenotch pour tous les composants enfants
- */
-export declare const CodenotchProvider: React.FC<CodenotchProviderProps>;
-export interface CodenotchStatusProps {
-    className?: string;
-}
-/**
- * Composant d'affichage du statut de connexion Codenotch
- */
-export declare const CodenotchStatus: React.FC<CodenotchStatusProps>;
-//# sourceMappingURL=components.d.ts.map

package/dist/components.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"components.d.ts","sourceRoot":"","sources":["../src/components.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAExC,MAAM,WAAW,sBAAuB,SAAQ,aAAa;IACzD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC7B;AAED;;;GAGG;AACH,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,sBAAsB,CAwB9D,CAAC;AAEF,MAAM,WAAW,oBAAoB;IACjC,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB;AAED;;GAEG;AACH,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CAW1D,CAAC"}

package/dist/components.js

@@ -1,37 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.CodenotchStatus = exports.CodenotchProvider = void 0;
-const react_1 = __importDefault(require("react"));
-/**
- * Composant Provider React pour Codenotch
- * Configure automatiquement l'environnement Codenotch pour tous les composants enfants
- */
-const CodenotchProvider = ({ children, clusterUrl, serviceName, tenantName, accessToken, ...props }) => {
-    // Configuration de l'environnement Codenotch au montage du composant
-    react_1.default.useEffect(() => {
-        // Logique d'initialisation automatique de Codenotch
-        console.log('Codenotch Provider initialized with:', {
-            clusterUrl,
-            serviceName,
-            tenantName,
-            hasAccessToken: !!accessToken
-        });
-    }, [clusterUrl, serviceName, tenantName, accessToken]);
-    return (react_1.default.createElement("div", { className: "codenotch-provider", "data-codenotch-initialized": "true" }, children));
-};
-exports.CodenotchProvider = CodenotchProvider;
-/**
- * Composant d'affichage du statut de connexion Codenotch
- */
-const CodenotchStatus = ({ className }) => {
-    const [status, setStatus] = react_1.default.useState('disconnected');
-    return (react_1.default.createElement("div", { className: `codenotch-status codenotch-status--${status} ${className || ''}` },
-        react_1.default.createElement("span", { className: "codenotch-status__indicator" }),
-        react_1.default.createElement("span", { className: "codenotch-status__text" },
-            "Codenotch: ",
-            status)));
-};
-exports.CodenotchStatus = CodenotchStatus;