Implement Root notifications tab

packages/admin-ui/src/components/sidebar/navbarItems.ts

@@ -15,6 +15,7 @@ import {
   MdWifi,
   MdPeople
 } from "react-icons/md";
+import { FaRegBell } from "react-icons/fa";
 import { SiEthereum } from "react-icons/si";
 import { BiGitRepoForked } from "react-icons/bi";
 import { GiRolledCloth } from "react-icons/gi";
@@ -31,6 +32,7 @@ import { relativePath as communityRelativePath } from "pages/community";
 import { relativePath as stakersRelativePath } from "pages/stakers";
 import { relativePath as rollupsRelativePath } from "pages/rollups";
 import { relativePath as repositoryRelativePath } from "pages/repository";
+import { relativePath as notificationsRelativePath } from "pages/notifications";
 
 export const fundedBy: { logo: string; text: string; link: string }[] = [
   {
@@ -116,6 +118,12 @@ export const sidenavItems: {
     icon: MdSettings,
     show: true
   },
+  {
+    name: "Notifications",
+    href: notificationsRelativePath,
+    icon: FaRegBell,
+    show: true
+  },
   {
     name: "Community",
     href: communityRelativePath,

packages/admin-ui/src/pages/index.ts

@@ -10,6 +10,7 @@ import * as community from "./community";
 import * as stakers from "./stakers";
 import * as rollups from "./rollups";
 import * as repository from "./repository";
+import * as notifications from "./notifications";
 
 export const pages = {
   dashboard,
@@ -23,7 +24,8 @@ export const pages = {
   support,
   community,
   system,
-  repository
+  repository,
+  notifications
 };
 
 export const defaultPage = dashboard;

packages/admin-ui/src/pages/notifications/NotificationsRoot.tsx

@@ -0,0 +1,54 @@
+import React from "react";
+import { Routes, Route, NavLink } from "react-router-dom";
+import { useApi } from "api";
+// Own module
+import { title } from "./data";
+import { InstallNotificationsPkg } from "./tabs/InstallNotifications/InstallNotifications";
+// Components
+import Title from "components/Title";
+import { renderResponse } from "components/SwrRender";
+
+export const NotificationsRoot: React.FC = () => {
+  const availableRoutes: {
+    name: string;
+    subPath: string;
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    component: React.ComponentType;
+  }[] = [];
+
+  const dnpsRequest = useApi.packagesGet();
+
+  return renderResponse(dnpsRequest, ["Loading notifications"], (dnps) => {
+    const notificationsDnpName = "notifications.dnp.dappnode.eth";
+    const isNotificationsPkgInstalled = dnps?.some((dnp) => dnp.dnpName === notificationsDnpName);
+
+    return (
+      <>
+        <Title title={title} />
+        {!isNotificationsPkgInstalled ? (
+          <InstallNotificationsPkg pkgName={notificationsDnpName} />
+        ) : (
+          <>
+            <div className="horizontal-navbar">
+              {availableRoutes.map((route) => (
+                <button key={route.subPath} className="item-container">
+                  <NavLink to={route.subPath} className="item no-a-style" style={{ whiteSpace: "nowrap" }}>
+                    {route.name}
+                  </NavLink>
+                </button>
+              ))}
+            </div>
+
+            <div className="section-spacing">
+              <Routes>
+                {availableRoutes.map((route) => (
+                  <Route key={route.subPath} path={route.subPath} element={<route.component />} />
+                ))}
+              </Routes>
+            </div>
+          </>
+        )}
+      </>
+    );
+  });
+};

packages/admin-ui/src/pages/notifications/data.tsx

@@ -0,0 +1,10 @@
+export const relativePath = "notifications";
+export const rootPath = "notifications/*";
+export const title = "Notifications";
+
+// Additional data
+
+// SubPaths
+export const subPaths = {
+
+};

packages/admin-ui/src/pages/notifications/index.ts

@@ -0,0 +1,4 @@
+import { NotificationsRoot } from "./NotificationsRoot";
+
+export { rootPath, relativePath } from "./data";
+export const RootComponent = NotificationsRoot;

packages/admin-ui/src/pages/notifications/tabs/InstallNotifications/InstallNotifications.tsx

@@ -0,0 +1,26 @@
+import React from "react";
+import { NavLink } from "react-router-dom";
+import Button from "components/Button";
+import { getInstallerPath } from "pages/installer/data";
+import SubTitle from "components/SubTitle";
+import Card from "components/Card";
+
+import "./installNotifications.scss";
+
+interface InstallNotificationsPkgProps {
+  pkgName: string;
+}
+
+export const InstallNotificationsPkg: React.FC<InstallNotificationsPkgProps> = ({ pkgName }) => {
+  const installerPath = getInstallerPath(pkgName);
+
+  return (
+    <Card className="install-notifications-card">
+      <SubTitle>Install notifications package</SubTitle>
+      <p>To receive notifications on your Dappnode, you must install the Notifications Dappnode Package.</p>
+      <NavLink to={installerPath + "/" + pkgName}>
+        <Button variant="dappnode">Install</Button>
+      </NavLink>
+    </Card>
+  );
+};

packages/admin-ui/src/pages/notifications/tabs/InstallNotifications/installNotifications.scss

@@ -0,0 +1,7 @@
+.install-notifications-card {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+  }
+