@codenotch/codenotch.react 1.0.82 → 2.0.1

package/src/models/Codenotch.ts

@@ -1,4 +1,5 @@
-import { ProjectManifest, IAppManifest } from "@codenotch/codenotch.core";
+import type { ReactNode } from "react";
+import { IAppManifest, ICodenotchProjectManifest } from "@codenotch/codenotch.core";
 import { ICodenotchSignal, IDisposable } from "./Misc";
 
 /**
@@ -20,9 +21,7 @@ export interface ICodenotchEnv {
     accessToken?: string;
     /** Base URL of the current application. */
     baseUrl?: string;
-    /** Translation dictionaries, keyed by language then by translation key: `i18n[language][key] = text`. */
-    i18n?: { [language: string]: { [key: string]: string } };
-    /** Current language code (e.g. `"en"`). Defaults to the first language found in {@link i18n}. */
+    /** Current language code (e.g. `"en"`). */
     language?: string;
     /** Current UI theme. Resolved from the `_theme` URL parameter, or `prefers-color-scheme` as a fallback. */
     theme?: 'light' | 'dark';
@@ -30,94 +29,12 @@ export interface ICodenotchEnv {
     /** Manifest of the current application (the `<AppName>.manifest.json` file next to the app). */
     appManifest?: IAppManifest;
     /** Manifest of the Codenotch project (the project's `manifest.json` file). */
-    projectManifest?: ProjectManifest;
+    projectManifest?: ICodenotchProjectManifest;
 
     /** Any additional environment variable passed to `init()`. */
     [key: string]: any; // Allow additional properties
 }
 
-
-/**
- * Registry of the project's BPMN processes, used to type {@link ICodenotchApi.startProcess}.
- *
- * Empty by default: the Codenotch IDE fills it through declaration merging in the
- * auto-generated `typings/process.d.ts` file of each project, with one entry per
- * BPMN process. Each entry maps the process name to its start events (`nodes`,
- * keyed by start node id, valued with the start event's input parameters) and to
- * the `output` of its end event.
- *
- * When the registry has not been augmented (project built without the IDE
- * typings), `startProcess` falls back to plain string names and untyped inputs,
- * so the code still compiles.
- *
- * @example
- * // typings/process.d.ts (auto-generated by the Codenotch IDE)
- * import 'codenotch-react';
- * declare module 'codenotch-react' {
- *     interface ProcessRegistry {
- *         'getTodos': {
- *             nodes: { 'start': { UserId: string } };
- *             output: { todos: any[] };
- *         };
- *     }
- * }
- */
-export interface ProcessRegistry {
-    // Extended by codenotch IDE
-}
-
-/**
- * Registry of the project's translation keys, used to type {@link ICodenotchApi.i18n}.
- *
- * Empty by default: the Codenotch IDE fills it through declaration merging in the
- * auto-generated `typings/i18n.d.ts` file of each project, from the project's
- * `.i18n.csv` files. Each entry maps a translation key to the tuple of arguments
- * expected by its `{0}`, `{1}`, … placeholders.
- *
- * When the registry has not been augmented (project built without the IDE
- * typings), `i18n` falls back to plain string keys and untyped arguments,
- * so the code still compiles.
- *
- * @example
- * // typings/i18n.d.ts (auto-generated by the Codenotch IDE)
- * import 'codenotch-react';
- * declare module 'codenotch-react' {
- *     interface TranslationRegistry {
- *         'welcome': [];
- *         'greeting': [arg1: any, arg2: any];
- *     }
- * }
- */
-export interface TranslationRegistry {
-    // Extended by codenotch IDE
-}
-
-// When the codenotch IDE has not augmented the registries, `keyof Registry` is `never`
-// and every call would fail to compile. These helpers fall back to plain string keys
-// and untyped arguments so the API stays usable without code generation.
-
-/** A BPMN process name: a key of {@link ProcessRegistry}, or any string when the registry is empty. */
-export type ProcessName = keyof ProcessRegistry extends never ? string : keyof ProcessRegistry;
-
-/** The start nodes of process `P`: its `nodes` map from {@link ProcessRegistry}, or an open map when unknown. */
-export type ProcessNodes<P> = P extends keyof ProcessRegistry
-    ? ProcessRegistry[P] extends { nodes: infer N } ? N : { [nodeId: string]: any }
-    : { [nodeId: string]: any };
-
-/** The end-event output of process `P` from {@link ProcessRegistry}, or `any` when unknown. */
-export type ProcessOutput<P> = P extends keyof ProcessRegistry
-    ? ProcessRegistry[P] extends { output: infer O } ? O : any
-    : any;
-
-/** A translation key: a key of {@link TranslationRegistry}, or any string when the registry is empty. */
-export type TranslationKey = keyof TranslationRegistry extends never ? string : keyof TranslationRegistry;
-
-/** The placeholder arguments of translation key `K` from {@link TranslationRegistry}, or `any[]` when unknown. */
-export type TranslationArgs<K> = K extends keyof TranslationRegistry
-    ? TranslationRegistry[K] extends any[] ? TranslationRegistry[K] : any[]
-    : any[];
-
-
 /**
  * Result of a BPMN process execution started with {@link ICodenotchApi.startProcess}.
  */
@@ -134,59 +51,24 @@ export interface IProcessResult<T = any> {
 }
 
 /**
- * The Codenotch client API, obtained by calling `useCodenotch()`.
+ * The Codenotch client API.
+ *
+ * Obtained with the `useCodenotch()` hook in function components, through the
+ * `cn` prop injected by `withCodenotch()` in class components, or with the
+ * plain `getCodenotch()` function anywhere else (handlers, modules, services).
  *
  * It is the bridge between a React app and the Codenotch runtime: it starts
- * server-side BPMN processes, runs CNQL queries, translates i18n keys,
+ * server-side BPMN processes, runs CNQL queries,
  * listens to real-time signals and manages theme/language.
- *
- * @example
- * import { useCodenotch } from 'codenotch-react';
- *
- * const cn = useCodenotch();
- * const title = cn.i18n('welcome');
- * const result = await cn.startProcess('getTodos', 'start', { UserId: '42' });
  */
 export interface ICodenotchApi {
 
     /**
      * Start a server-side BPMN process and wait for its completion.
-     *
-     * @param processName Name of the process — the `.bpmn` file name without extension (e.g. `processes/getTodos.bpmn` → `'getTodos'`).
-     * @param startNodeId Id of the start event to trigger (conventionally `'start'`).
-     * @param inputs Input parameters declared by that start event.
-     * @returns The process result; check `isError` before using `output` (the parameters of the end event reached).
-     * @example
-     * const result = await cn.startProcess('getTodos', 'start', { UserId: userId });
-     * if (!result.isError) {
-     *     setTodos(result.output.todos);
-     * }
-     */
-    startProcess<P extends ProcessName, N extends keyof ProcessNodes<P>>(
-        processName: P,
-        startNodeId: N,
-        inputs: ProcessNodes<P>[N]
-    ): Promise<IProcessResult<ProcessOutput<P>>>;
-
-    /**
-     * Translate a key for the current language ({@link ICodenotchEnv.language}).
-     *
-     * Placeholders `{0}`, `{1}`, … in the translated text are replaced by `args`.
-     * Never throws: if the key or the language is missing, a warning is logged
-     * and the key itself is returned.
-     *
-     * @param key Translation key, as defined in the project's `.i18n.csv` files.
-     * @param args Values for the `{0}`, `{1}`, … placeholders of the translation.
-     * @example
-     * cn.i18n('welcome');                    // "Bienvenue"
-     * cn.i18n('greeting', 'Fabian', 3);      // "Bonjour Fabian, 3 messages" (from "Bonjour {0}, {1} messages")
      */
-    i18n<K extends TranslationKey>(
-        key: K,
-        ...args: TranslationArgs<K>
-    ): string;
+    startProcess<TProcess, TInput, TOutput>(process: TProcess, inputs: TInput): Promise<IProcessResult<TOutput>>;
 
-    /** Runtime environment (cluster, service, language, theme, i18n dictionaries, manifests…). Populated by `init()`. */
+    /** Runtime environment (cluster, service, language, theme dictionaries, manifests…). Populated by `init()`. */
     readonly env: ICodenotchEnv;
 
     /**
@@ -223,7 +105,7 @@ export interface ICodenotchApi {
      *     </div>
      * );
      */
-    readonly showDialog: (node: JSX.Element) => ICodenotchDialog;
+    readonly showDialog: (node: ReactNode) => ICodenotchDialog;
 
     /**
      * Fetch the text content of a file of the deployed Codenotch project.
@@ -238,26 +120,11 @@ export interface ICodenotchApi {
      */
     readonly getProjectFileUrl: (relativePath: string) => string;
 
-    /**
-     * Subscribe to a real-time signal emitted by the project's BPMN processes (via SignalR).
-     *
-     * @param signalId Id of the signal, as declared in the BPMN process.
-     * @param callback Called each time the signal is received, with `{ signalId, data }`.
-     * @returns A disposable — call `dispose()` to unsubscribe (e.g. in a `useEffect` cleanup).
-     * @example
-     * useEffect(() => {
-     *     let sub: IDisposable | undefined;
-     *     cn.listenSignal('todosChanged', () => refresh()).then(s => sub = s);
-     *     return () => sub?.dispose();
-     * }, []);
-     */
-    readonly listenSignal: (signalId: string, callback: (data: ICodenotchSignal) => void) => Promise<IDisposable>;
-
     /** Set the UI theme. Also toggles the `light`/`dark` class on `<html>` (Tailwind `dark:` variants). */
     readonly setTheme: (theme: 'light' | 'dark') => void;
     /** Current UI theme, if resolved. */
     readonly getTheme: () => 'light' | 'dark' | undefined;
-    /** Set the current language used by {@link i18n}. Must be one of the project's languages. */
+    /** Set the current language. Must be one of the project's languages. */
     readonly setLanguage: (lang: string) => void;
     /** Current language code, if any. */
     readonly getLanguage: () => string | undefined;
@@ -268,11 +135,25 @@ export interface ICodenotchApi {
     /** Generate a random UUID v4. */
     readonly uuid: () => string;
     /** Manifest of the Codenotch project. Throws if not available in the environment. */
-    readonly getProjectManifest: () => ProjectManifest;
+    readonly getProjectManifest: () => ICodenotchProjectManifest;
     /** Manifest of the current application, if any. */
     readonly getAppManifest: () => IAppManifest | undefined;
 }
 
+/**
+ * Props injected by the `withCodenotch()` higher-order component.
+ * Extend it in the props of a class component wrapped by `withCodenotch`.
+ *
+ * @example
+ * interface Props extends WithCodenotchProps { userId: string }
+ * class TodoList extends React.Component<Props> { ... }
+ * export default withCodenotch(TodoList);
+ */
+export interface WithCodenotchProps {
+    /** The Codenotch client API; refreshed (new reference) whenever the environment changes. */
+    cn: ICodenotchApi;
+}
+
 /**
  * Handle on a dialog opened with {@link ICodenotchApi.showDialog}.
  */

package/README.md

@@ -1,145 +0,0 @@
-# codenotch-react
-
-React bindings for [Codenotch](https://codenotch.com) applications.
-
-Codenotch is a full-stack development platform: a project combines server-side **BPMN processes**, **SQL tables** / **NoSQL documents**, **i18n** translations and **React** apps. This package is the client-side bridge between those React apps and the Codenotch runtime: it lets a component start BPMN processes, run CNQL queries, translate i18n keys, listen to real-time signals, and manage theme/language.
-
-> **Requirements** — Codenotch apps run on **React 16** (`react@^16.14.0`). Do not use React 17/18 APIs (`createRoot`, `useId`, automatic JSX runtime…); hooks work fine.
-
-## Quick start
-
-```tsx
-import React from 'react';
-import { useCodenotch } from 'codenotch-react';
-
-const MyApp: React.FC = () => {
-    const cn = useCodenotch();
-
-    return <div className="p-4">
-        <h1 className="text-xl font-bold">{cn.i18n('welcome')}</h1>
-    </div>;
-};
-
-export default MyApp;
-```
-
-`useCodenotch()` is **not a React hook** despite its name: it is a plain function that returns the API object bound to the current environment. It can be called anywhere — components, event handlers, plain modules.
-
-The environment (cluster URL, service name, language, translations…) is set up by `init(envVariables)`, which the Codenotch runtime calls automatically from the page hosting the application. You only call `init` yourself in custom hosting scenarios.
-
-## API overview
-
-| Member | Description |
-|--------|-------------|
-| `cn.env` | Readonly environment: `clusterUrl`, `serviceName`, `tenantName`, `accessToken`, `language`, `theme`, `i18n`, `appManifest`, `projectManifest`. |
-| `cn.i18n(key, ...args)` | Translate a key for the current language, filling `{0}`, `{1}`, … placeholders. |
-| `cn.startProcess(name, startNodeId, inputs)` | Start a server-side BPMN process and await its result. |
-| `cn.requestCnql(cnql, verbose?)` | Run a CNQL query (XML, SELECT-only) against the project's tables. |
-| `cn.listenSignal(signalId, callback)` | Subscribe to real-time signals emitted by BPMN processes. |
-| `cn.showDialog(jsx)` | Render a JSX element in a fullscreen modal dialog. |
-| `cn.setTheme(t)` / `cn.getTheme()` | `'light' \| 'dark'`; `setTheme` also toggles the class on `<html>` (Tailwind `dark:`). |
-| `cn.setLanguage(l)` / `cn.getLanguage()` / `cn.getLanguages()` | Current language and the languages declared in `manifest.json`. |
-| `cn.getProjectFile(path)` / `cn.getProjectFileUrl(path)` | Read/link a file of the deployed project. |
-| `cn.getUrlParams()` | Query-string parameters of the current URL as a plain object. |
-| `cn.uuid()` | Random UUID v4. |
-| `cn.getProjectManifest()` / `cn.getAppManifest()` | Project / application manifests. |
-
-Full signatures and JSDoc live in `dist/index.d.ts` (sources in `src/`).
-
-## Calling a BPMN process
-
-`processName` is the `.bpmn` file name without extension; `startNodeId` is the id of the start event to trigger (conventionally `'start'`); `inputs` are the input parameters declared by that start event. The result's `output` contains the parameters of the end event reached.
-
-```tsx
-const result = await cn.startProcess('getTodos', 'start', { UserId: userId });
-
-if (!result.isError) {
-    setTodos(result.output.todos);
-} else {
-    console.error(result.errorMessage);
-}
-```
-
-## Querying tables with CNQL
-
-CNQL is Codenotch's XML query language over the project's SQL tables (SELECT only — writes go through BPMN processes). The root `xmlns` must be the project's `serviceName`; each queried table's `Ref` attribute names its result set:
-
-```tsx
-const data = await cn.requestCnql(`
-    <CNQL xmlns="myproject" PageSize="10" PageIndex="0">
-        <Users Ref="results">
-            <Id />
-            <Email />
-            <IsAdmin Equal="true" />
-        </Users>
-    </CNQL>`);
-
-console.log(data.results); // [{ Id: '...', Email: '...' }, ...]
-```
-
-## Translations (i18n)
-
-Translations come from the project's `.i18n.csv` files and are injected into `cn.env.i18n` at startup. `cn.i18n(key, ...args)` translates for the current language and replaces `{0}`, `{1}`, … placeholders; it never throws — an unknown key is returned as-is (with a console warning).
-
-```tsx
-cn.i18n('welcome');               // "Bienvenue"
-cn.i18n('greeting', 'Ada', 3);    // "Bonjour Ada, 3 messages"  (from "Bonjour {0}, {1} messages")
-cn.setLanguage('en');             // switch language at runtime
-```
-
-## Real-time signals
-
-BPMN processes can broadcast signals; subscribe from the UI with `listenSignal`:
-
-```tsx
-useEffect(() => {
-    let sub: IDisposable | undefined;
-    cn.listenSignal('todosChanged', (signal) => refresh(signal.data))
-        .then(s => { sub = s; });
-    return () => sub?.dispose();
-}, []);
-```
-
-## Dialogs
-
-```tsx
-const dialog = cn.showDialog(
-    <div className="bg-white dark:bg-gray-800 p-6 rounded shadow">
-        <p>{cn.i18n('confirm.message')}</p>
-        <button onClick={() => dialog.close()}>{cn.i18n('close')}</button>
-    </div>
-);
-```
-
-The dialog stays open until you call `dialog.close()`.
-
-## Type-safe processes and translation keys
-
-`startProcess` and `i18n` are typed through two registries, `ProcessRegistry` and `TranslationRegistry`, that the **Codenotch IDE fills by declaration merging**: it generates `typings/process.d.ts` and `typings/i18n.d.ts` in each project from the `.bpmn` and `.i18n.csv` files (never edit those files — refresh the project instead). The generated files look like:
-
-```ts
-import 'codenotch-react';
-
-declare module 'codenotch-react' {
-    interface TranslationRegistry {
-        'welcome': [];
-        'greeting': [arg1: any, arg2: any];
-    }
-
-    interface ProcessRegistry {
-        'getTodos': {
-            nodes: { 'start': { UserId: string } };
-            output: { todos: any[] };
-        };
-    }
-}
-```
-
-With these in the compilation, keys, inputs and outputs are strictly checked and autocompleted. **Without them** (project compiled outside the IDE), the registries are empty and both methods gracefully fall back to plain `string` keys and untyped arguments — the code still compiles.
-
-## Notes for AI assistants
-
-- The complete typed API surface is in `dist/index.d.ts`; the readable implementation ships in `src/` (entry point `src/index.ts`).
-- `useCodenotch()` is a plain function, not a hook — no hook rules apply.
-- Never hand-edit a project's `typings/i18n.d.ts` / `typings/process.d.ts`: they are regenerated by the Codenotch IDE.
-- Codenotch apps are React 16 + Tailwind CSS; CNQL is SELECT-only (writes go through BPMN processes via `startProcess`).

package/dist/components/Auml.d.ts

@@ -1,46 +0,0 @@
-import React from "react";
-import { SpaRenderStatus } from '@echino/echino.ui.framework/components/SpaBuilder/common/ISpaRenderProps';
-import type { ICodenotchEnv } from "../models/Codenotch";
-interface IAumlProps {
-    /** The AUML (XML) application description to render. */
-    value: string;
-    /** When `true`, logs compilation and token-refresh details to the console. */
-    verbose?: boolean;
-    /** Codenotch environment; provides the i18n dictionaries injected into the AUML and the theme. */
-    env?: ICodenotchEnv;
-}
-interface IAumlState {
-    loaded: boolean;
-    inspectorEnabled: boolean;
-}
-/**
- * Renders a legacy AUML (XML) application description inside a React app.
- *
- * Compiles the AUML with the environment's i18n variables, renders it through
- * the Echino SPA renderer, shows a loading overlay until completed, and keeps
- * the user's access token refreshed in the background.
- *
- * Relies on globals injected by the Codenotch runtime hosting page
- * (`serviceName`, `tenant`, `user`, `languages`, `appManifest`…) — it is not
- * usable outside a Codenotch-served application.
- */
-export declare class Auml extends React.Component<IAumlProps, IAumlState> {
-    _refreshTokenTimer: NodeJS.Timeout | undefined;
-    constructor(props: IAumlProps);
-    componentDidMount(): void;
-    registerRefreshToken(): void;
-    componentWillUnmount(): void;
-    progress(s: SpaRenderStatus): void;
-    retrieveInputs(): {
-        [k: string]: string;
-    };
-    getTimeToTokenExpiration(): number | null;
-    getTimeToNewTokenExpiration(expirationDateTime: string): number;
-    msToTime(ms: number): string;
-    parseJwt(token: string): any;
-    render(): React.JSX.Element;
-    renderLoadingContent(): React.JSX.Element;
-    refreshExpiredToken(): Promise<void>;
-}
-export {};
-//# sourceMappingURL=Auml.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"Auml.d.ts","sourceRoot":"","sources":["../../src/components/Auml.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,eAAe,EAAE,MAAM,0EAA0E,CAAC;AAE3G,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AASzD,UAAU,UAAU;IAChB,wDAAwD;IACxD,KAAK,EAAE,MAAM,CAAC;IACd,8EAA8E;IAC9E,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,kGAAkG;IAClG,GAAG,CAAC,EAAE,aAAa,CAAC;CACvB;AAED,UAAU,UAAU;IAChB,MAAM,EAAE,OAAO,CAAC;IAChB,gBAAgB,EAAE,OAAO,CAAC;CAC7B;AAED;;;;;;;;;;GAUG;AACH,qBAAa,IAAK,SAAQ,KAAK,CAAC,SAAS,CAAC,UAAU,EAAE,UAAU,CAAC;IAE7D,kBAAkB,EAAE,MAAM,CAAC,OAAO,GAAG,SAAS,CAAC;gBAEnC,KAAK,EAAE,UAAU;IAa7B,iBAAiB;IAIjB,oBAAoB;IAoCpB,oBAAoB;IAOpB,QAAQ,CAAC,CAAC,EAAE,eAAe;IAS3B,cAAc;;;IAMd,wBAAwB,IAAI,MAAM,GAAG,IAAI;IAqCzC,2BAA2B,CAAC,kBAAkB,EAAE,MAAM,GAAG,MAAM;IAO/D,QAAQ,CAAC,EAAE,EAAE,MAAM;IAmBnB,QAAQ,CAAC,KAAK,EAAE,MAAM;IAUtB,MAAM;IAoDN,oBAAoB;IAkBd,mBAAmB;CAoC5B"}

package/dist/components/Auml.js

@@ -1,208 +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 SpaRenderWithBrowserRouter_1 = require("@echino/echino.ui.framework/components/SpaBuilder/SpaRender/SpaRenderWithBrowserRouter");
-const I18nUtils_1 = __importDefault(require("../utils/I18nUtils"));
-/**
- * Renders a legacy AUML (XML) application description inside a React app.
- *
- * Compiles the AUML with the environment's i18n variables, renders it through
- * the Echino SPA renderer, shows a loading overlay until completed, and keeps
- * the user's access token refreshed in the background.
- *
- * Relies on globals injected by the Codenotch runtime hosting page
- * (`serviceName`, `tenant`, `user`, `languages`, `appManifest`…) — it is not
- * usable outside a Codenotch-served application.
- */
-class Auml extends react_1.default.Component {
-    constructor(props) {
-        super(props);
-        this.state = {
-            loaded: false,
-            inspectorEnabled: false
-        };
-        if (typeof user === 'undefined') {
-            let globalObject = typeof window !== 'undefined' ? window : globalThis;
-            globalObject['user'] = null; // Make sure user is defined
-        }
-    }
-    componentDidMount() {
-        this.registerRefreshToken();
-    }
-    registerRefreshToken() {
-        try {
-            // Setup a method to refresh our access token when it expires
-            if (this._refreshTokenTimer) {
-                clearTimeout(this._refreshTokenTimer);
-            }
-            if (user === null) {
-                if (this.props.verbose === true) {
-                    console.log("No user found, will not refresh the token");
-                }
-                return;
-            }
-            let timeToExpireMs = this.getTimeToTokenExpiration();
-            if (timeToExpireMs === null) {
-                if (this.props.verbose === true) {
-                    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 });
-        }
-    }
-    // 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);
-        if (this.props.verbose === true) {
-            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() {
-        let inputs = this.retrieveInputs();
-        let theme = this.props.env?.theme === "dark";
-        let aumlManifest = null;
-        try {
-            let appManifestObj = JSON.parse(appManifest);
-            aumlManifest = appManifestObj.auml;
-        }
-        catch { }
-        let auml = this.props.value;
-        if (this.props.env) {
-            try {
-                auml = I18nUtils_1.default.compileAuml(auml, this.props.env);
-                if (this.props.verbose === true) {
-                    console.log("Compiled AUML with i18n variables: ", auml);
-                    console.log("i18n variables: ", this.props.env.i18n);
-                }
-            }
-            catch (err) {
-                console.error("Error compiling AUML with i18n variables: " + err);
-            }
-        }
-        return react_1.default.createElement("div", { className: "app" },
-            react_1.default.createElement(SpaRenderWithBrowserRouter_1.SpaRenderWithBrowserRouter, { appDescription: 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.props.env?.theme ?? 'light'}` },
-                    this.renderLoadingContent(),
-                    react_1.default.createElement("i", { className: "fas fa-circle-notch fa-spin" })));
-    }
-    renderLoadingContent() {
-        try {
-            //@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);
-            }
-        }
-        catch (e) {
-            console.warn("Could not load tenant information: " + e);
-            return react_1.default.createElement("div", { className: 'app-loading-title' }, "Loading...");
-        }
-    }
-    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.Auml = Auml;