#777

InseeFrLab · Apr 9, 2024 · a0b7e56 · a0b7e56
1 parent b5f59db
commit a0b7e56
Show file tree

Hide file tree

Showing 4 changed files with 127 additions and 104 deletions.
diff --git a/web/package.json b/web/package.json
@@ -48,7 +48,7 @@
         "oidc-spa": "^4.4.1",
         "onyxia-ui": "^5.1.10",
         "pathe": "^1.1.2",
-        "powerhooks": "^1.0.9",
+        "powerhooks": "^1.0.10",
         "react": "^18.2.0",
         "react-code-blocks": "^0.1.6",
         "react-dom": "^18.2.0",

diff --git a/web/src/ui/App/App.tsx b/web/src/ui/App/App.tsx
@@ -22,6 +22,7 @@ import { GlobalAlert } from "./GlobalAlert";
 import { Main } from "./Main";
 import { AutoLogoutCountdown } from "./AutoLogoutCountdown";
 import { onyxiaInstancePublicUrlKey } from "keycloak-theme/login/onyxiaInstancePublicUrl";
+import { useDomRect } from "powerhooks/useDomRect";
 
 loadThemedFavicon();
 // NOTE: We do that only to showcase the app with an other font with the URL.
@@ -87,14 +88,19 @@ function ScreenScalerOutOfRangeFallback() {
 function ContextualizedApp() {
     useSyncDarkModeWithValueInProfile();
 
-    const { classes } = useStyles();
+    const {
+        ref: globalAlertRef,
+        domRect: { height: globalAlertHeight }
+    } = useDomRect();
+    const { classes } = useStyles({ globalAlertHeight });
     const { isUserLoggedIn } = useCoreState("userAuthentication", "authenticationState");
 
     return (
         <>
             <div className={classes.root}>
                 {env.GLOBAL_ALERT !== undefined && (
                     <GlobalAlert
+                        ref={globalAlertRef}
                         className={classes.globalAlert}
                         severity={env.GLOBAL_ALERT.severity}
                         message={env.GLOBAL_ALERT.message}
@@ -112,55 +118,59 @@ function ContextualizedApp() {
     );
 }
 
-const useStyles = tss.withName({ App }).create(({ theme }) => {
-    const footerHeight = 32;
-
-    const rootRightLeftMargin = theme.spacing(4);
-
-    return {
-        "root": {
-            "height": "100%",
-            "display": "flex",
-            "flexDirection": "column",
-            "backgroundColor": theme.colors.useCases.surfaces.background,
-            "margin": `0 ${rootRightLeftMargin}px`,
-            "position": "relative"
-        },
-        "globalAlert": {
-            "position": "relative",
-            "width": `calc(100% + 2 * ${rootRightLeftMargin}px)`,
-            "left": -rootRightLeftMargin,
-            "marginBottom": theme.spacing(1)
-        },
-        "header": {
-            "paddingBottom": 0 //For the LeftBar shadow
-        },
-        "betweenHeaderAndFooter": {
-            "flex": 1,
-            "overflow": "hidden",
-            "display": "flex",
-            "paddingTop": theme.spacing(2.3), //For the LeftBar shadow
-            "paddingBottom": footerHeight
-        },
-        "footer": {
-            "height": footerHeight,
-            "position": "absolute",
-            "bottom": 0,
-            "width": "100%",
-            "background": "transparent"
-        },
-        "leftBar": {
-            "height": "100%"
-        },
-        "main": {
-            "height": "100%",
-            "flex": 1,
-            //TODO: See if scroll delegation works if we put auto here instead of "hidden"
-            "paddingLeft": theme.spacing(4),
-            "overflow": "hidden"
-        }
-    };
-});
+const useStyles = tss
+    .withName({ App })
+    .withParams<{ globalAlertHeight: number }>()
+    .create(({ theme, globalAlertHeight }) => {
+        const footerHeight = 32;
+
+        const rootRightLeftMargin = theme.spacing(4);
+
+        return {
+            "root": {
+                "height": "100%",
+                "display": "flex",
+                "flexDirection": "column",
+                "backgroundColor": theme.colors.useCases.surfaces.background,
+                "margin": `0 ${rootRightLeftMargin}px`,
+                "position": "relative"
+            },
+            "globalAlert": {
+                "position": "absolute",
+                "width": theme.windowInnerWidth,
+                "left": -rootRightLeftMargin
+            },
+            "header": {
+                "marginTop":
+                    globalAlertHeight === 0 ? 0 : globalAlertHeight + theme.spacing(2),
+                "paddingBottom": 0 //For the LeftBar shadow
+            },
+            "betweenHeaderAndFooter": {
+                "flex": 1,
+                "overflow": "hidden",
+                "display": "flex",
+                "paddingTop": theme.spacing(2.3), //For the LeftBar shadow
+                "paddingBottom": footerHeight
+            },
+            "footer": {
+                "height": footerHeight,
+                "position": "absolute",
+                "bottom": 0,
+                "width": "100%",
+                "background": "transparent"
+            },
+            "leftBar": {
+                "height": "100%"
+            },
+            "main": {
+                "height": "100%",
+                "flex": 1,
+                //TODO: See if scroll delegation works if we put auto here instead of "hidden"
+                "paddingLeft": theme.spacing(4),
+                "overflow": "hidden"
+            }
+        };
+    });
 
 /**
  * This hook to two things:

diff --git a/web/src/ui/App/GlobalAlert.tsx b/web/src/ui/App/GlobalAlert.tsx
@@ -1,4 +1,4 @@
-import { useMemo, useReducer, memo } from "react";
+import { useMemo, useReducer, memo, forwardRef } from "react";
 import { useStyles } from "tss";
 import { symToStr } from "tsafe/symToStr";
 import { useResolveLocalizedString } from "ui/i18n";
@@ -16,69 +16,73 @@ type Props = {
 
 const localStorageKeyPrefix = "global-alert-";
 
-export const GlobalAlert = memo((props: Props) => {
-    const { className, severity = "info", message } = props;
+export const GlobalAlert = memo(
+    forwardRef<HTMLDivElement, Props>((props, ref) => {
+        const { className, severity = "info", message } = props;
 
-    const { resolveLocalizedStringDetailed } = useResolveLocalizedString({
-        "labelWhenMismatchingLanguage": true
-    });
+        const { resolveLocalizedStringDetailed } = useResolveLocalizedString({
+            "labelWhenMismatchingLanguage": true
+        });
 
-    const localStorageKey = useMemo(() => {
-        const { str } = resolveLocalizedStringDetailed(message);
+        const localStorageKey = useMemo(() => {
+            const { str } = resolveLocalizedStringDetailed(message);
 
-        return `${localStorageKeyPrefix}${simpleHash(severity + str)}-closed`;
-    }, [severity, message]);
+            return `${localStorageKeyPrefix}${simpleHash(severity + str)}-closed`;
+        }, [severity, message]);
 
-    const [trigger, pullTrigger] = useReducer(() => ({}), {});
+        const [trigger, pullTrigger] = useReducer(() => ({}), {});
 
-    const isClosed = useMemo(() => {
-        // Remove all the local storage keys that are not used anymore.
-        for (const key of Object.keys(localStorage)) {
-            if (!key.startsWith(localStorageKeyPrefix) || key === localStorageKey) {
-                continue;
+        const isClosed = useMemo(() => {
+            // Remove all the local storage keys that are not used anymore.
+            for (const key of Object.keys(localStorage)) {
+                if (!key.startsWith(localStorageKeyPrefix) || key === localStorageKey) {
+                    continue;
+                }
+                localStorage.removeItem(key);
             }
-            localStorage.removeItem(key);
-        }
 
-        const value = localStorage.getItem(localStorageKey);
+            const value = localStorage.getItem(localStorageKey);
 
-        return value === "true";
-    }, [localStorageKey, trigger]);
+            return value === "true";
+        }, [localStorageKey, trigger]);
 
-    const { css, theme } = useStyles();
+        const { css, theme } = useStyles();
 
-    return (
-        <Alert
-            className={className}
-            severity={severity}
-            doDisplayCross
-            isClosed={isClosed}
-            onClose={() => {
-                localStorage.setItem(localStorageKey, "true");
-                pullTrigger();
-            }}
-        >
-            {(() => {
-                const { str, langAttrValue } = resolveLocalizedStringDetailed(message);
+        return (
+            <Alert
+                ref={ref}
+                className={className}
+                severity={severity}
+                doDisplayCross
+                isClosed={isClosed}
+                onClose={() => {
+                    localStorage.setItem(localStorageKey, "true");
+                    pullTrigger();
+                }}
+            >
+                {(() => {
+                    const { str, langAttrValue } =
+                        resolveLocalizedStringDetailed(message);
 
-                const markdownNode = (
-                    <Markdown
-                        className={css({
-                            "&>p": { ...theme.spacing.topBottom("margin", 2) }
-                        })}
-                    >
-                        {str}
-                    </Markdown>
-                );
+                    const markdownNode = (
+                        <Markdown
+                            className={css({
+                                "&>p": { ...theme.spacing.topBottom("margin", 2) }
+                            })}
+                        >
+                            {str}
+                        </Markdown>
+                    );
 
-                return langAttrValue === undefined ? (
-                    markdownNode
-                ) : (
-                    <div lang={langAttrValue}>{markdownNode}</div>
-                );
-            })()}
-        </Alert>
-    );
-});
+                    return langAttrValue === undefined ? (
+                        markdownNode
+                    ) : (
+                        <div lang={langAttrValue}>{markdownNode}</div>
+                    );
+                })()}
+            </Alert>
+        );
+    })
+);
 
 GlobalAlert.displayName = symToStr({ GlobalAlert });
diff --git a/web/yarn.lock b/web/yarn.lock
@@ -4915,6 +4915,15 @@ postcss@^8.4.35:
     picocolors "^1.0.0"
     source-map-js "^1.0.2"
 
+powerhooks@^1.0.10:
+  version "1.0.10"
+  resolved "https://registry.yarnpkg.com/powerhooks/-/powerhooks-1.0.10.tgz#9d532b23294cba69d5872d859bdf843b91cb9c41"
+  integrity sha512-fJmKSVJk9Bkotl9rK1ryVPSqhY4xOZKxM6deyTaMbICK8jHh/CQztN2mNTxlKu6vkJBIFj1cRd/7N6slh3uM6w==
+  dependencies:
+    evt "^2.5.7"
+    memoizee "^0.4.15"
+    tsafe "^1.6.6"
+
 powerhooks@^1.0.3:
   version "1.0.8"
   resolved "https://registry.yarnpkg.com/powerhooks/-/powerhooks-1.0.8.tgz#e64e10b7f9cb2f367a3e92da2be8d2373f3d2418"