feat(ui): nextauth5 (#2563)

Author: shahargl

keep-ui/app/(keep)/[...not-found]/page.tsx

@@ -0,0 +1,8 @@
+"use client";
+
+import { notFound } from "next/navigation";
+
+// https://github.com/vercel/next.js/discussions/50034
+export default function NotFoundDummy() {
+  notFound();
+}

keep-ui/app/ai/ai.tsx keep-ui/app/(keep)/ai/ai.tsxkeep-ui/app/ai/ai.tsx renamed to keep-ui/app/(keep)/ai/ai.tsx

@@ -3,9 +3,9 @@ export interface AIStats {
   incidents_count: number;
   first_alert_datetime?: Date;
   is_mining_enabled: boolean;
-  algorithm_verbose_name: string
+  algorithm_verbose_name: string;
 }
 
 export interface AILogs {
   log: string;
-}
+}

keep-ui/app/ai/model.ts keep-ui/app/(keep)/ai/model.tskeep-ui/app/ai/model.ts renamed to keep-ui/app/(keep)/ai/model.ts

@@ -1,43 +1,54 @@
-import React, { useState, Fragment, useRef, FormEvent } from 'react';
-import { Popover } from '@headlessui/react';
-import { Button, Tab, TabGroup, TabList, TabPanels, TabPanel } from "@tremor/react";
-import { IoColorPaletteOutline } from 'react-icons/io5';
+import React, { useState, Fragment, useRef, FormEvent } from "react";
+import { Popover } from "@headlessui/react";
+import {
+  Button,
+  Tab,
+  TabGroup,
+  TabList,
+  TabPanels,
+  TabPanel,
+} from "@tremor/react";
+import { IoColorPaletteOutline } from "react-icons/io5";
 import { FloatingArrow, arrow, offset, useFloating } from "@floating-ui/react";
 
 const predefinedThemes = {
   Transparent: {
-    critical: 'bg-white',
-    high: 'bg-white',
-    warning: 'bg-white',
-    low: 'bg-white',
-    info: 'bg-white'
+    critical: "bg-white",
+    high: "bg-white",
+    warning: "bg-white",
+    low: "bg-white",
+    info: "bg-white",
   },
   Keep: {
-    critical: 'bg-orange-400', // Highest opacity for critical
-    high: 'bg-orange-300',
-    warning: 'bg-orange-200',
-    low: 'bg-orange-100',
-    info: 'bg-orange-50' // Lowest opacity for info
+    critical: "bg-orange-400", // Highest opacity for critical
+    high: "bg-orange-300",
+    warning: "bg-orange-200",
+    low: "bg-orange-100",
+    info: "bg-orange-50", // Lowest opacity for info
   },
   Basic: {
-    critical: 'bg-red-200',
-    high: 'bg-orange-200',
-    warning: 'bg-yellow-200',
-    low: 'bg-green-200',
-    info: 'bg-blue-200'
-  }
+    critical: "bg-red-200",
+    high: "bg-orange-200",
+    warning: "bg-yellow-200",
+    low: "bg-green-200",
+    info: "bg-blue-200",
+  },
 };
 
 const themeKeyMapping = {
-  0: 'Transparent',
-  1: 'Keep',
-  2: 'Basic'
+  0: "Transparent",
+  1: "Keep",
+  2: "Basic",
 };
 type ThemeName = keyof typeof predefinedThemes;
 
-export const ThemeSelection = ({ onThemeChange }: { onThemeChange: (theme: any) => void }) => {
+export const ThemeSelection = ({
+  onThemeChange,
+}: {
+  onThemeChange: (theme: any) => void;
+}) => {
   const arrowRef = useRef(null);
-  const [selectedTab, setSelectedTab] = useState<ThemeName>('Transparent');
+  const [selectedTab, setSelectedTab] = useState<ThemeName>("Transparent");
 
   const { refs, floatingStyles, context } = useFloating({
     strategy: "fixed",
@@ -50,22 +61,17 @@ export const ThemeSelection = ({ onThemeChange }: { onThemeChange: (theme: any)
     handleApplyTheme(themeIndex as 0 | 1 | 2);
   };
 
-
-
-
   const handleApplyTheme = (themeKey: keyof typeof themeKeyMapping) => {
     const themeName = themeKeyMapping[themeKey];
     setSelectedTab(themeName as ThemeName);
-};
-
-
+  };
 
   const onApplyTheme = (close: () => void) => {
     // themeName is now assured to be a key of predefinedThemes
     const themeName: ThemeName = selectedTab;
     const newTheme = predefinedThemes[themeName]; // This should now be error-free
     onThemeChange(newTheme);
-    setSelectedTab('Transparent'); // Assuming 'Transparent' is a valid key
+    setSelectedTab("Transparent"); // Assuming 'Transparent' is a valid key
     close(); // Close the popover
   };
 
@@ -85,7 +91,7 @@ export const ThemeSelection = ({ onThemeChange }: { onThemeChange: (theme: any)
           <Popover.Panel
             className="bg-white z-30 p-4 rounded-sm"
             ref={refs.setFloating}
-            style={{ ...floatingStyles, minWidth: '250px' }} // Adjust width here
+            style={{ ...floatingStyles, minWidth: "250px" }} // Adjust width here
           >
             <FloatingArrow
               className="fill-white [&>path:last-of-type]:stroke-white"
@@ -100,19 +106,35 @@ export const ThemeSelection = ({ onThemeChange }: { onThemeChange: (theme: any)
                 <Tab>Basic</Tab>
               </TabList>
               <TabPanels>
-                {Object.keys(predefinedThemes).map(themeName => (
+                {Object.keys(predefinedThemes).map((themeName) => (
                   <TabPanel key={themeName}>
-                    {Object.entries(predefinedThemes[themeName as keyof typeof predefinedThemes]).map(([severity, color]) => (
-                      <div key={severity} className="flex justify-between items-center my-2">
-                        <span>{severity.charAt(0).toUpperCase() + severity.slice(1).toLowerCase()}</span>
-                        <div className={`w-6 h-6 rounded-full border border-gray-400 ${color}`}></div>
+                    {Object.entries(
+                      predefinedThemes[
+                        themeName as keyof typeof predefinedThemes
+                      ]
+                    ).map(([severity, color]) => (
+                      <div
+                        key={severity}
+                        className="flex justify-between items-center my-2"
+                      >
+                        <span>
+                          {severity.charAt(0).toUpperCase() +
+                            severity.slice(1).toLowerCase()}
+                        </span>
+                        <div
+                          className={`w-6 h-6 rounded-full border border-gray-400 ${color}`}
+                        ></div>
                       </div>
                     ))}
                   </TabPanel>
                 ))}
               </TabPanels>
             </TabGroup>
-             <Button className="mt-5" color="orange" onClick={() => onApplyTheme(close)}>
+            <Button
+              className="mt-5"
+              color="orange"
+              onClick={() => onApplyTheme(close)}
+            >
               Apply theme
             </Button>
           </Popover.Panel>