[WIP] Notifications tab

packages/admin-ui/src/__mock-backend__/index.ts

@@ -386,7 +386,12 @@ export const otherCalls: Omit<Routes, keyof typeof namedSpacedCalls> = {
     dockerLatestVersion: "20.10.8"
   }),
   getIsConnectedToInternet: async () => false,
-  getCoreVersion: async () => "0.2.92"
+  getCoreVersion: async () => "0.2.92",
+  gatusGetEndpoints: async () => {
+    return { "geth.dnp.dappnode.eth": [] };
+  },
+  gatusUpdateEndpoints: async () => {},
+  gatuGetAllNotifications: async () => []
 };
 
 export const calls: Routes = {

packages/admin-ui/src/components/Slider.scss

@@ -0,0 +1,39 @@
+.slider-container {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+}
+
+.slider-component {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 100%;
+  height: 4px;
+  background: #c0c0c0;
+  border-radius: 2px;
+
+  &::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    appearance: none;
+    width: 16px;
+    height: 16px;
+    background: var(--dappnode-color);
+    border-radius: 50%;
+    cursor: pointer;
+  }
+
+  &::-moz-range-thumb {
+    width: 16px;
+    height: 16px;
+    background: var(--dappnode-color);
+    border-radius: 50%;
+    cursor: pointer;
+  }
+}
+
+.slider-value {
+  color: #c0c0c0;
+  font-weight: bold;
+  min-width: fit-content;
+}

packages/admin-ui/src/components/Slider.tsx

@@ -0,0 +1,57 @@
+import React, { useState } from "react";
+import "./Slider.scss";
+
+interface SliderProps {
+  min?: number;
+  max?: number;
+  step?: number;
+  value?: number;
+  unit?: string;
+  onChange?: (value: number) => void;
+  onChangeComplete?: (value: number) => void;
+}
+
+const Slider: React.FC<SliderProps> = ({
+  min = 0,
+  max = 100,
+  step = 1,
+  value = 50,
+  unit = "%",
+  onChange,
+  onChangeComplete, // In order to trigger an action when the user releases the slider
+}) => {
+  const [sliderValue, setSliderValue] = useState(value);
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const newValue = Number(e.target.value);
+    setSliderValue(newValue);
+    if (onChange) onChange(newValue);
+  };
+
+  const handleMouseUp = () => {
+    if (onChangeComplete) onChangeComplete(sliderValue);
+  };
+
+  const handleTouchEnd = () => {
+    if (onChangeComplete) onChangeComplete(sliderValue);
+  };
+
+  return (
+    <div className="slider-container">
+      <input
+        type="range"
+        min={min}
+        max={max}
+        step={step}
+        value={sliderValue}
+        onChange={handleChange}
+        onMouseUp={handleMouseUp} // For mouse support
+        onTouchEnd={handleTouchEnd} // For mobile support
+        className="slider-component"
+      />
+      <span className="slider-value">{sliderValue} {unit && unit}</span>
+    </div>
+  );
+};
+
+export default Slider;

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/installer/components/InstallDnpView.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useEffect, useRef } from "react";
-import { api } from "api";
+import { api, useApi } from "api";
 import { useDispatch } from "react-redux";
 import { Routes, Route, useNavigate, useLocation, useParams, NavLink } from "react-router-dom";
 import { isEmpty, throttle } from "lodash-es";
@@ -28,6 +28,7 @@ import { RequestedDnp, UserSettingsAllDnps } from "@dappnode/types";
 import { diff } from "semver";
 import Button from "components/Button";
 import { pathName as systemPathName, subPaths as systemSubPaths } from "pages/system/data";
+import { Notifications } from "./Steps/Notifications";
 
 interface InstallDnpViewProps {
   dnp: RequestedDnp;
@@ -54,6 +55,8 @@ const InstallDnpView: React.FC<InstallDnpViewProps> = ({ dnp, progressLogs }) =>
   const dispatch = useDispatch();
 
   const { dnpName, reqVersion, semVersion, settings, manifest, setupWizard, isInstalled, installedVersion } = dnp;
+  console.log("manifest", manifest);
+
   const updateType = installedVersion && diff(installedVersion, semVersion);
   const areUpdateWarnings =
     manifest.warnings?.onPatchUpdate || manifest.warnings?.onMinorUpdate || manifest.warnings?.onMajorUpdate;
@@ -172,13 +175,20 @@ const InstallDnpView: React.FC<InstallDnpViewProps> = ({ dnp, progressLogs }) =>
     }
   ].filter((option) => option.available);
 
+  const dnpsRequest = useApi.packagesGet();
+  const installedDnps = dnpsRequest.data;
+  const isNotificationsPkgInstalled = installedDnps?.some((dnp) => dnp.dnpName === "notifications.dnp.dappnode.eth");
+
+  const dnpNotificationEndpoints = manifest.notifications?.endpoints || [];
+
   const disableInstallation =
     !isEmpty(progressLogs) || requiresCoreUpdate || requiresDockerUpdate || packagesToBeUninstalled.length > 0;
 
   const setupSubPath = "setup";
   const permissionsSubPath = "permissions";
   const warningsSubPath = "warnings";
   const disclaimerSubPath = "disclaimer";
+  const notificationsSubPath = "notifications";
   const installSubPath = "install";
 
   const availableRoutes: {
@@ -228,6 +238,12 @@ const InstallDnpView: React.FC<InstallDnpViewProps> = ({ dnp, progressLogs }) =>
       render: () => <Disclaimer disclaimers={disclaimers} onAccept={goNext} goBack={goBack} />,
       available: disclaimers.length > 0
     },
+    {
+      name: "Notifications",
+      subPath: notificationsSubPath,
+      render: () => <Notifications endpoints={dnpNotificationEndpoints || []} goBack={goBack} goNext={goNext} dnpName={dnpName}/>,
+      available: isNotificationsPkgInstalled && dnpNotificationEndpoints && dnpNotificationEndpoints.length > 0
+    },
     // Placeholder for the final step in the horizontal stepper
     {
       name: "Install",

packages/admin-ui/src/pages/installer/components/Steps/Notifications.tsx

@@ -0,0 +1,49 @@
+import React, { useMemo } from "react";
+import Button from "components/Button";
+import { ManagePackageSection } from "pages/notifications/tabs/Settings/components/ManagePackageSection";
+import { Endpoint } from "@dappnode/types";
+import { useApi } from "api";
+
+interface NotificationsProps {
+  endpoints: Endpoint[];
+  dnpName: string;
+  goNext: () => void;
+  goBack: () => void;
+}
+
+export const Notifications: React.FC<NotificationsProps> = ({ endpoints, goBack, goNext, dnpName }) => {
+  const endpointsCall = useApi.gatusGetEndpoints();
+  const pkgEndpointsData = endpointsCall.data?.[dnpName];
+
+  // Merge endpoints in order to preserve existing endpoints config when updating a package 
+  const mergedEndpoints = useMemo(() => {
+    if (!pkgEndpointsData) return endpoints;
+
+    const endpointMap = new Map<string, Endpoint>();
+
+    endpoints.forEach((endpoint) => {
+      endpointMap.set(endpoint.name, endpoint);
+    });
+
+    pkgEndpointsData.forEach((retrievedEndpoint: Endpoint) => {
+      endpointMap.set(retrievedEndpoint.name, {
+        ...endpointMap.get(retrievedEndpoint.name), // Preserve existing config if it exists
+        ...retrievedEndpoint, // Overwrite with new data
+      });
+    });
+
+    return Array.from(endpointMap.values());
+  }, [endpoints, pkgEndpointsData]);
+
+  return (
+    <>
+      <ManagePackageSection dnpName="Enable notifications" endpoints={mergedEndpoints} />
+      <div className="button-group">
+        <Button onClick={goBack}>Back</Button>
+        <Button variant="dappnode" onClick={goNext}>
+          Next
+        </Button>
+      </div>
+    </>
+  );
+};

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

@@ -0,0 +1,67 @@
+import React from "react";
+import { Routes, Route, NavLink } from "react-router-dom";
+import { useApi } from "api";
+// Own module
+import { title, subPaths } from "./data";
+import { Inbox } from "./tabs/Inbox/Inbox";
+import { NotificationsSettings } from "./tabs/Settings/Settings";
+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;
+  }[] = [
+    {
+      name: "Inbox",
+      subPath: subPaths.inbox,
+      component: Inbox
+    },
+    {
+      name: "Settings",
+      subPath: subPaths.settings,
+      component: NotificationsSettings
+    }
+  ];
+
+  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.ts

@@ -0,0 +1,11 @@
+export const relativePath = "notifications/inbox"; // default redirect to inbox
+export const rootPath = "notifications/*";
+export const title = "Notifications";
+
+// Additional data
+
+// SubPaths
+export const subPaths = {
+  inbox: "inbox",
+  settings: "settings"
+};

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;