Merge branch 'development' of github.com:EyeSeeTea/home-page-app-dev …

…into feature/migrations
EyeSeeTea · Jun 3, 2024 · ba3beed · ba3beed
2 parents 39235ae + db5d69c
commit ba3beed
Show file tree

Hide file tree

Showing 11 changed files with 55 additions and 48 deletions.
diff --git a/i18n/en.pot b/i18n/en.pot
@@ -449,6 +449,9 @@ msgstr ""
 msgid "New action"
 msgstr ""
 
+msgid "You do not have access to this page."
+msgstr ""
+
 msgid "First load can take a couple of minutes, please wait..."
 msgstr ""
 

diff --git a/i18n/es.po b/i18n/es.po
@@ -448,6 +448,9 @@ msgstr ""
 msgid "New action"
 msgstr ""
 
+msgid "You do not have access to this page."
+msgstr ""
+
 msgid "First load can take a couple of minutes, please wait..."
 msgstr ""
 

diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
     "name": "home-page",
     "description": "Home Page App",
-    "version": "1.7.0",
+    "version": "1.7.1",
     "license": "GPL-3.0",
     "author": "EyeSeeTea team",
     "homepage": ".",

diff --git a/public/index.html b/public/index.html
@@ -3,15 +3,16 @@
     <head>
         <script async src="https://www.googletagmanager.com/gtag/js?id=%REACT_APP_GOOGLE_ANALYTICS_4%"></script>
         <script>
-          window.dataLayer = window.dataLayer || [];
-          function gtag() { dataLayer.push(arguments); }
-          gtag('js', new Date());
-
-          gtag('config', '%REACT_APP_GOOGLE_ANALYTICS_4%');
+            window.dataLayer = window.dataLayer || [];
+            function gtag() {
+                dataLayer.push(arguments);
+            }
+            gtag("js", new Date());
+
+            gtag("config", "%REACT_APP_GOOGLE_ANALYTICS_4%");
         </script>
         <meta charset="utf-8" />
         <link rel="shortcut icon" href="%PUBLIC_URL%/icon-sm.png" sizes="192x192" />
-        <link rel="icon" href="%PUBLIC_URL%/icon-small.png" sizes="192x192" />
 
         <link type="text/css" rel="stylesheet" href="%PUBLIC_URL%/includes/material-design-icons/material-icons.css" />
         <link type="text/css" rel="stylesheet" href="%PUBLIC_URL%/includes/roboto-font.css" />

diff --git a/src/domain/entities/LandingNode.ts b/src/domain/entities/LandingNode.ts
@@ -132,4 +132,8 @@ export function getPrimaryRedirectUrl(
     return redirectUrl;
 }
 
+export function flattenLandingNodes(nodes: LandingNode[]): LandingNode[] {
+    return nodes.flatMap(node => [node, ...flattenLandingNodes(node.children)]);
+}
+
 type Url = string;
diff --git a/src/webapp/components/additional-components/AdditionalComponents.tsx b/src/webapp/components/additional-components/AdditionalComponents.tsx
@@ -1,37 +1,26 @@
-import { useConfig } from "../../pages/settings/useConfig";
-import i18n from "@eyeseetea/d2-ui-components/locales";
 import React from "react";
-import { LandingNode, updateLandingNodes } from "../../../domain/entities/LandingNode";
+import { useConfig } from "../../pages/settings/useConfig";
+import { LandingNode } from "../../../domain/entities/LandingNode";
 import { useAppContext } from "../../contexts/app-context";
 import { BigCard } from "../card-board/BigCard";
 import { Cardboard } from "../card-board/Cardboard";
 import { LandingParagraph } from "../landing-layout";
 import { useAnalytics } from "../../hooks/useAnalytics";
 import { Action, getPageActions } from "../../../domain/entities/Action";
 import { useSnackbar } from "@eyeseetea/d2-ui-components";
+import i18n from "@eyeseetea/d2-ui-components/locales";
 
 export const AdditionalComponents: React.FC<{
     isRoot: boolean;
     currentPage: LandingNode;
     openPage(page: LandingNode): void;
 }> = React.memo(props => {
     const { isRoot, currentPage, openPage } = props;
-    const { actions, translate, launchAppBaseUrl, landings } = useAppContext();
-    const { showAllActions, landingPagePermissions, user } = useConfig();
+    const { actions, translate, launchAppBaseUrl, getLandingNodeById } = useAppContext();
+    const { showAllActions, user } = useConfig();
     const analytics = useAnalytics();
     const snackbar = useSnackbar();
 
-    const userLandings = React.useMemo<LandingNode[] | undefined>(() => {
-        return landings && landingPagePermissions && user
-            ? updateLandingNodes(landings, landingPagePermissions, user)
-            : undefined;
-    }, [landingPagePermissions, landings, user]);
-
-    const getLandingNodeById = React.useCallback(
-        (id: string) => userLandings?.find(landing => landing.id === id),
-        [userLandings]
-    );
-
     const actionHandleClick = React.useCallback(
         (action: Action) => {
             switch (action.type) {

diff --git a/src/webapp/components/item-category/ItemCategory.tsx b/src/webapp/components/item-category/ItemCategory.tsx
@@ -46,7 +46,7 @@ export const ItemCategory: React.FC<{
                 </Cardboard>
                 {showAdditionalComponents && (
                     <AdditionalComponents currentPage={currentPage} isRoot={isRoot} openPage={openPage} />
-                )}{" "}
+                )}
             </LandingContent>
         </GroupContainer>
     );

diff --git a/src/webapp/components/item-root/ItemRoot.tsx b/src/webapp/components/item-root/ItemRoot.tsx
@@ -32,12 +32,7 @@ export const ItemRoot: React.FC<{
 
                 {currentPage.pageRendering === "single" ? (
                     currentPage.children.map(node => (
-                        <Item
-                            key={`node-${node.id}`}
-                            isRoot={isRoot}
-                            openPage={() => openPage(node)}
-                            currentPage={node}
-                        />
+                        <Item key={`node-${node.id}`} isRoot={isRoot} openPage={openPage} currentPage={node} />
                     ))
                 ) : (
                     <Cardboard rowSize={4} key={`group-${currentPage.id}`}>

diff --git a/src/webapp/contexts/app-context.tsx b/src/webapp/contexts/app-context.tsx
@@ -9,10 +9,12 @@ import { cacheImages } from "../utils/image-cache";
 import { Instance } from "../../data/entities/Instance";
 import { Typography } from "@material-ui/core";
 import i18n from "../../locales";
+import { Maybe } from "../../types/utils";
 
 const AppContext = React.createContext<AppContextState | null>(null);
 
 export const AppContextProvider: React.FC<AppContextProviderProps> = ({ children, baseUrl, locale }) => {
+    const [compositionRoot, setCompositionRoot] = React.useState<CompositionRoot>();
     const [actions, setActions] = useState<Action[]>([]);
     const [landings, setLandings] = useState<LandingNode[] | undefined>();
     const [hasSettingsAccess, setHasSettingsAccess] = useState(false);
@@ -22,7 +24,7 @@ export const AppContextProvider: React.FC<AppContextProviderProps> = ({ children
     const [launchAppBaseUrl, setLaunchAppBaseUrl] = useState<string>("");
     const translate = buildTranslate(locale);
 
-    const [compositionRoot, setCompositionRoot] = React.useState<CompositionRoot>();
+    const getLandingNodeById = useCallback((id: string) => landings?.find(landing => landing.id === id), [landings]);
 
     React.useEffect(() => {
         getCompositionRoot(new Instance({ url: baseUrl })).then(compositionRoot => {
@@ -66,6 +68,7 @@ export const AppContextProvider: React.FC<AppContextProviderProps> = ({ children
                 hasSettingsAccess,
                 isAdmin,
                 launchAppBaseUrl,
+                getLandingNodeById,
             }}
         >
             {children}
@@ -112,4 +115,5 @@ export interface AppContextState {
     hasSettingsAccess: boolean;
     isAdmin: boolean;
     launchAppBaseUrl: string;
+    getLandingNodeById: (id: string) => Maybe<LandingNode>;
 }
diff --git a/src/webapp/pages/home/HomePage.tsx b/src/webapp/pages/home/HomePage.tsx
@@ -1,12 +1,12 @@
 import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import CircularProgress from "material-ui/CircularProgress";
 import styled from "styled-components";
+import { useSnackbar } from "@eyeseetea/d2-ui-components";
 import {
     LandingNode,
+    flattenLandingNodes,
     getPrimaryRedirectUrl as getPrimaryActionUrl,
-    updateLandingNodes,
 } from "../../../domain/entities/LandingNode";
-import i18n from "../../../locales";
 import { LandingLayout, LandingContent } from "../../components/landing-layout";
 import { useAppContext } from "../../contexts/app-context";
 import { useNavigate } from "react-router-dom";
@@ -18,29 +18,24 @@ import { goTo } from "../../utils/routes";
 import { defaultIcon, defaultTitle } from "../../router/Router";
 import { useAnalytics } from "../../hooks/useAnalytics";
 import { Maybe } from "../../../types/utils";
+import i18n from "../../../locales";
 
 export const HomePage: React.FC = React.memo(() => {
-    const { hasSettingsAccess, landings, reload, isLoading, launchAppBaseUrl, translate, compositionRoot } =
-        useAppContext();
-    const { defaultApplication, landingPagePermissions, user } = useConfig();
-
-    const userLandings = useMemo<LandingNode[] | undefined>(() => {
-        return landings && landingPagePermissions && user
-            ? updateLandingNodes(landings, landingPagePermissions, user)
-            : undefined;
-    }, [landingPagePermissions, landings, user]);
+    const { hasSettingsAccess, reload, isLoading, launchAppBaseUrl, translate, compositionRoot } = useAppContext();
+    const { defaultApplication, userLandings } = useConfig();
 
     const initLandings = useMemo(() => userLandings?.filter(landing => landing.executeOnInit), [userLandings]);
 
     const navigate = useNavigate();
     const analytics = useAnalytics();
+    const snackbar = useSnackbar();
     const [history, updateHistory] = useState<LandingNode[]>([]);
     const [isLoadingLong, setLoadingLong] = useState<boolean>(false);
     const [pageType, setPageType] = useState<"userLandings" | "singleLanding">(
         userLandings && userLandings?.length > 1 ? "userLandings" : "singleLanding"
     );
 
-    const favicon = useRef<HTMLLinkElement>(document.head.querySelector('link[rel="icon"]'));
+    const favicon = useRef<HTMLLinkElement>(document.head.querySelector('link[rel="shortcut icon"]'));
 
     const currentPage = useMemo<LandingNode | undefined>(() => {
         return history[0] ?? initLandings?.[0];
@@ -59,10 +54,15 @@ export const HomePage: React.FC = React.memo(() => {
 
     const openPage = useCallback(
         (page: LandingNode) => {
-            compositionRoot.analytics.sendPageView({ title: page.name.referenceValue, location: undefined });
-            updateHistory(history => [page, ...history]);
+            const nodes = userLandings && flattenLandingNodes(userLandings);
+            if (nodes?.some(landing => landing.id === page.id)) {
+                compositionRoot.analytics.sendPageView({ title: page.name.referenceValue, location: undefined });
+                updateHistory(history => [page, ...history]);
+            } else {
+                snackbar.error(i18n.t("You do not have access to this page."));
+            }
         },
-        [compositionRoot.analytics]
+        [compositionRoot.analytics, userLandings, snackbar]
     );
 
     const goBack = useCallback(() => {

diff --git a/src/webapp/pages/settings/useConfig.ts b/src/webapp/pages/settings/useConfig.ts
@@ -1,19 +1,25 @@
-import { useState, useEffect, useCallback } from "react";
+import { useState, useEffect, useCallback, useMemo } from "react";
 import { LandingPagePermission, Permission } from "../../../domain/entities/Permission";
 import { SharedUpdate } from "../../components/permissions-dialog/PermissionsDialog";
 import { useAppContext } from "../../contexts/app-context";
 import { User } from "../../../domain/entities/User";
 import { Maybe } from "../../../types/utils";
+import { LandingNode, updateLandingNodes } from "../../../domain/entities/LandingNode";
 
 export function useConfig(): useConfigPloc {
-    const { compositionRoot } = useAppContext();
+    const { compositionRoot, landings } = useAppContext();
     const [showAllActions, setShowAllActions] = useState(false);
     const [defaultApplication, setDefaultApplication] = useState<string>("");
     const [googleAnalyticsCode, setGoogleAnalyticsCode] = useState<Maybe<string>>();
     const [settingsPermissions, setSettingsPermissions] = useState<Permission>();
     const [landingPagePermissions, setLandingPagePermissions] = useState<LandingPagePermission[]>();
     const [user, setUser] = useState<User>();
 
+    const userLandings = useMemo<LandingNode[] | undefined>(() => {
+        if (!(landings && landingPagePermissions && user)) return undefined;
+        return updateLandingNodes(landings, landingPagePermissions, user);
+    }, [landingPagePermissions, landings, user]);
+
     useEffect(() => {
         compositionRoot.config.getShowAllActions().then(setShowAllActions);
         compositionRoot.config.getDefaultApplication().then(setDefaultApplication);
@@ -89,6 +95,7 @@ export function useConfig(): useConfigPloc {
         landingPagePermissions,
         updateLandingPagePermissions,
         googleAnalyticsCode,
+        userLandings,
     };
 }
 
@@ -104,4 +111,5 @@ interface useConfigPloc {
     landingPagePermissions?: LandingPagePermission[];
     updateLandingPagePermissions: (sharedUpdate: SharedUpdate, id: string) => Promise<void>;
     googleAnalyticsCode: Maybe<string>;
+    userLandings: Maybe<LandingNode[]>;
 }