Merge branch 'main' into Matvey-Kuk/moving-background-tasks-outside-o…

…f-the-server

keep-ui/app/ai/ai.tsx

@@ -1,7 +1,7 @@
 "use client";
 import { Card, List, ListItem, Title, Subtitle } from "@tremor/react";
 import { useAIStats, usePollAILogs } from "utils/hooks/useAI";
-import { useSession } from "next-auth/react";
+import { useHydratedSession as useSession } from "@/shared/lib/hooks/useHydratedSession";
 import { useApiUrl } from "utils/hooks/useConfig";
 import { toast } from "react-toastify";
 import { useEffect, useState, useRef, FormEvent } from "react";

keep-ui/app/alerts/ViewAlertModal.tsx

@@ -3,7 +3,7 @@ import Modal from "@/components/ui/Modal"; // Ensure this path matches your proj
 import { Button, Icon, Switch, Text } from "@tremor/react";
 import { toast } from "react-toastify";
 import { useApiUrl } from "utils/hooks/useConfig";
-import { useSession } from "next-auth/react";
+import { useHydratedSession as useSession } from "@/shared/lib/hooks/useHydratedSession";
 import { XMarkIcon } from "@heroicons/react/24/outline";
 import "./ViewAlertModal.css";
 import React, { useState } from "react";

keep-ui/app/alerts/[id]/page.tsx

@@ -1,4 +1,4 @@
-import AlertsPage from "../alerts.client";
+import AlertsPage from "../alerts";
 
 type PageProps = {
   params: { id: string };

keep-ui/app/alerts/alert-assign-ticket-modal.tsx

@@ -4,7 +4,7 @@ import { Button, TextInput, Text } from "@tremor/react";
 import { PlusIcon } from "@heroicons/react/20/solid";
 import { useForm, Controller, SubmitHandler } from "react-hook-form";
 import { Providers } from "./../providers/providers";
-import { useSession } from "next-auth/react";
+import { useHydratedSession as useSession } from "@/shared/lib/hooks/useHydratedSession";
 import { useApiUrl } from "utils/hooks/useConfig";
 import { AlertDto } from "./models";
 import Modal from "@/components/ui/Modal";

keep-ui/app/alerts/alert-associate-incident-modal.tsx

@@ -2,7 +2,7 @@ import Modal from "@/components/ui/Modal";
 import { Button, Divider, Title } from "@tremor/react";
 import Select from "@/components/ui/Select";
 import { CreateOrUpdateIncidentForm } from "@/features/create-or-update-incident";
-import { useSession } from "next-auth/react";
+import { useHydratedSession as useSession } from "@/shared/lib/hooks/useHydratedSession";
 import { FormEvent, useCallback, useEffect, useState } from "react";
 import { toast } from "react-toastify";
 import { useApiUrl } from "utils/hooks/useConfig";

keep-ui/app/alerts/alert-change-status-modal.tsx

@@ -9,7 +9,7 @@ import Select, {
 import { useState } from "react";
 import { AlertDto, Status } from "./models";
 import { useApiUrl } from "utils/hooks/useConfig";
-import { useSession } from "next-auth/react";
+import { useHydratedSession as useSession } from "@/shared/lib/hooks/useHydratedSession";
 import { toast } from "react-toastify";
 import {
   CheckCircleIcon,

keep-ui/app/alerts/alert-create-incident-ai-modal.tsx

@@ -1,7 +1,7 @@
 import React, { useState } from "react";
 import Modal from "@/components/ui/Modal";
 import { Callout, Button, Title, Card } from "@tremor/react";
-import { useSession } from "next-auth/react";
+import { useHydratedSession as useSession } from "@/shared/lib/hooks/useHydratedSession";
 import { toast } from "react-toastify";
 import Loading from "../loading";
 import { AlertDto } from "./models";

keep-ui/app/alerts/alert-dismiss-modal.tsx

@@ -17,7 +17,7 @@ import "react-quill/dist/quill.snow.css";
 import { AlertDto } from "./models";
 import { format, set, isSameDay, isAfter, addMinutes } from "date-fns";
 import { useApiUrl } from "utils/hooks/useConfig";
-import { useSession } from "next-auth/react";
+import { useHydratedSession as useSession } from "@/shared/lib/hooks/useHydratedSession";
 import { usePresets } from "utils/hooks/usePresets";
 import { useAlerts } from "utils/hooks/useAlerts";
 import { toast } from "react-toastify";

keep-ui/app/alerts/alert-menu.tsx

@@ -12,7 +12,7 @@ import {
 } from "@heroicons/react/24/outline";
 import { IoNotificationsOffOutline } from "react-icons/io5";
 
-import { useSession } from "next-auth/react";
+import { useHydratedSession as useSession } from "@/shared/lib/hooks/useHydratedSession";
 import { useApiUrl } from "utils/hooks/useConfig";
 import Link from "next/link";
 import { ProviderMethod } from "app/providers/providers";

keep-ui/app/alerts/alert-note-modal.tsx

@@ -7,7 +7,7 @@ const ReactQuill =
 import "react-quill/dist/quill.snow.css";
 import { Button } from "@tremor/react";
 import { useApiUrl } from "utils/hooks/useConfig";
-import { useSession } from "next-auth/react";
+import { useHydratedSession as useSession } from "@/shared/lib/hooks/useHydratedSession";
 import { AlertDto } from "./models";
 import Modal from "@/components/ui/Modal";
 

keep-ui/app/alerts/alert-presets.tsx

@@ -4,7 +4,7 @@ import Modal from "@/components/ui/Modal";
 import { Button, Subtitle, TextInput, Switch, Text } from "@tremor/react";
 import { useApiUrl } from "utils/hooks/useConfig";
 import { toast } from "react-toastify";
-import { useSession } from "next-auth/react";
+import { useHydratedSession as useSession } from "@/shared/lib/hooks/useHydratedSession";
 import { usePresets } from "utils/hooks/usePresets";
 import { useTags } from "utils/hooks/useTags";
 import { useRouter } from "next/navigation";

keep-ui/app/alerts/alert-push-alert-to-server-modal.tsx

@@ -7,7 +7,7 @@ import {
   FieldValues,
 } from "react-hook-form";
 import Modal from "@/components/ui/Modal";
-import { useSession } from "next-auth/react";
+import { useHydratedSession as useSession } from "@/shared/lib/hooks/useHydratedSession";
 import { useApiUrl } from "utils/hooks/useConfig";
 import { useProviders } from "utils/hooks/useProviders";
 import ImageWithFallback from "@/components/ImageWithFallback";

keep-ui/app/alerts/alert-run-workflow-modal.tsx

@@ -3,7 +3,7 @@ import { AlertDto } from "./models";
 import Modal from "@/components/ui/Modal";
 import { useWorkflows } from "utils/hooks/useWorkflows";
 import { useState } from "react";
-import { useSession } from "next-auth/react";
+import { useHydratedSession as useSession } from "@/shared/lib/hooks/useHydratedSession";
 import { useApiUrl } from "utils/hooks/useConfig";
 import { toast } from "react-toastify";
 import { useRouter } from "next/navigation";

keep-ui/app/alerts/alert-tab-modal.tsx

@@ -2,7 +2,7 @@ import { useState } from "react";
 import Modal from "@/components/ui/Modal";
 import { Button, TextInput } from "@tremor/react";
 import { AlertsRulesBuilder } from "app/alerts/alerts-rules-builder";
-import { useSession } from "next-auth/react";
+import { useHydratedSession as useSession } from "@/shared/lib/hooks/useHydratedSession";
 import { useApiUrl } from "utils/hooks/useConfig";
 
 interface AlertTabModalProps {
@@ -114,8 +114,8 @@ const AlertTabModal = ({
             !newTabName
               ? "Tab name is required"
               : !newTabFilter
-              ? "Tab filter is required (notice you need to click 'enter' to apply the filter)"
-              : ""
+                ? "Tab filter is required (notice you need to click 'enter' to apply the filter)"
+                : ""
           }
         >
           Add Tab

keep-ui/app/alerts/alert-table-alert-facets.tsx

@@ -16,6 +16,7 @@ import {
   AddFacetModal,
 } from "./alert-table-facet-dynamic";
 import { PlusIcon } from "@heroicons/react/24/outline";
+import { usePathname } from "next/navigation";
 
 export const AlertFacets: React.FC<AlertFacetsProps> = ({
   alerts,
@@ -26,7 +27,9 @@ export const AlertFacets: React.FC<AlertFacetsProps> = ({
   onDelete,
   className,
   table,
+  showSkeleton,
 }) => {
+  const pathname = usePathname();
   const timeRangeFilter = table
     .getState()
     .columnFilters.find((filter) => filter.id === "lastReceived");
@@ -35,7 +38,7 @@ export const AlertFacets: React.FC<AlertFacetsProps> = ({
     | { start: Date; end: Date; isFromCalendar: boolean }
     | undefined;
 
-  const presetName = window.location.pathname.split("/").pop() || "default";
+  const presetName = pathname?.split("/").pop() || "default";
 
   const [isModalOpen, setIsModalOpen] = useLocalStorage<boolean>(
     `addFacetModalOpen-${presetName}`,
@@ -207,6 +210,7 @@ export const AlertFacets: React.FC<AlertFacetsProps> = ({
           }
           facetKey="severity"
           facetFilters={facetFilters}
+          showSkeleton={showSkeleton}
         />
         <Facet
           name="Status"
@@ -216,6 +220,7 @@ export const AlertFacets: React.FC<AlertFacetsProps> = ({
           }
           facetKey="status"
           facetFilters={facetFilters}
+          showSkeleton={showSkeleton}
         />
         <Facet
           name="Source"
@@ -225,6 +230,7 @@ export const AlertFacets: React.FC<AlertFacetsProps> = ({
           }
           facetKey="source"
           facetFilters={facetFilters}
+          showSkeleton={showSkeleton}
         />
         <Facet
           name="Assignee"
@@ -234,6 +240,7 @@ export const AlertFacets: React.FC<AlertFacetsProps> = ({
           }
           facetKey="assignee"
           facetFilters={facetFilters}
+          showSkeleton={showSkeleton}
         />
         <Facet
           name="Dismissed"
@@ -243,6 +250,7 @@ export const AlertFacets: React.FC<AlertFacetsProps> = ({
           }
           facetKey="dismissed"
           facetFilters={facetFilters}
+          showSkeleton={showSkeleton}
         />
         <Facet
           name="Incident Related"
@@ -252,6 +260,7 @@ export const AlertFacets: React.FC<AlertFacetsProps> = ({
             handleSelect("incident", value, exclusive, isAllOnly)
           }
           facetFilters={facetFilters}
+          showSkeleton={showSkeleton}
         />
         {/* Dynamic facets */}
         {dynamicFacets.map((facet) => (

keep-ui/app/alerts/alert-table-facet-types.tsx

@@ -29,6 +29,7 @@ export interface FacetProps {
   facetKey: string;
   facetFilters: FacetFilters;
   showIcon?: boolean;
+  showSkeleton?: boolean;
 }
 
 export interface AlertFacetsProps {
@@ -44,4 +45,5 @@ export interface AlertFacetsProps {
   onDelete: (facetKey: string) => void;
   className?: string;
   table: Table<AlertDto>;
+  showSkeleton?: boolean;
 }

keep-ui/app/alerts/alert-table-facet.tsx

@@ -4,6 +4,8 @@ import { ChevronDownIcon, ChevronRightIcon } from "@heroicons/react/20/solid";
 import { FacetProps } from "./alert-table-facet-types";
 import { FacetValue } from "./alert-table-facet-value";
 import { useLocalStorage } from "utils/hooks/useLocalStorage";
+import { usePathname } from "next/navigation";
+import Skeleton from "react-loading-skeleton";
 
 export const Facet: React.FC<FacetProps> = ({
   name,
@@ -12,9 +14,11 @@ export const Facet: React.FC<FacetProps> = ({
   facetKey,
   facetFilters,
   showIcon = true,
+  showSkeleton,
 }) => {
+  const pathname = usePathname();
   // Get preset name from URL
-  const presetName = window.location.pathname.split("/").pop() || "default";
+  const presetName = pathname?.split("/").pop() || "default";
 
   // Store open/close state in localStorage with a unique key per preset and facet
   const [isOpen, setIsOpen] = useLocalStorage<boolean>(
@@ -60,7 +64,17 @@ export const Facet: React.FC<FacetProps> = ({
             </div>
           )}
           <div className="max-h-60 overflow-y-auto">
-            {values.length > 0 ? (
+            {showSkeleton ? (
+              Array.from({ length: 3 }).map((_, index) => (
+                <div
+                  key={`skeleton-${index}`}
+                  className="flex items-center px-2 py-1 gap-2"
+                >
+                  <Skeleton containerClassName="h-4 w-4" />
+                  <Skeleton containerClassName="h-4 flex-1" />
+                </div>
+              ))
+            ) : values.length > 0 ? (
               filteredValues.map((value) => (
                 <FacetValue
                   key={value.label}

keep-ui/app/alerts/alert-table-utils.tsx

@@ -192,7 +192,7 @@ export const useAlertTableCols = (
       ? [
           columnHelper.display({
             id: "checkbox",
-            size: 10,
+            size: 46,
             header: (context) => (
               <AlertTableCheckbox
                 checked={context.table.getIsAllRowsSelected()}

keep-ui/app/alerts/alert-table.tsx

@@ -250,10 +250,10 @@ export function AlertTable({
     return acc.concat(alertId);
   }, []);
 
-  // show skeleton if no alerts are loaded
-  let showSkeleton = table.getFilteredRowModel().rows.length === 0;
-  // if showSkeleton and not loading, show empty state
-  let showEmptyState = !isAsyncLoading && showSkeleton;
+  let showSkeleton =
+    table.getFilteredRowModel().rows.length === 0 && isAsyncLoading;
+  let showEmptyState =
+    table.getFilteredRowModel().rows.length === 0 && !isAsyncLoading;
 
   const handleRowClick = (alert: AlertDto) => {
     // if presetName is alert-history, do not open sidebar
@@ -303,21 +303,12 @@ export function AlertTable({
             setDynamicFacets={setDynamicFacets}
             onDelete={handleFacetDelete}
             table={table}
+            showSkeleton={showSkeleton}
           />
         </div>
         <div className="flex flex-col gap-4 min-w-0">
           <Card className="flex-grow h-full flex flex-col p-0">
             <div className="flex-grow">
-              {isAsyncLoading && (
-                <Callout
-                  title="Getting your alerts..."
-                  icon={CircleStackIcon}
-                  color="gray"
-                  className="m-5"
-                >
-                  Alerts will show up in this table as they are added to Keep...
-                </Callout>
-              )}
               {/* For dynamic preset, add alert tabs*/}
               {!presetStatic && (
                 <AlertTabs

keep-ui/app/alerts/alert-tabs.tsx

@@ -1,19 +1,11 @@
-import { FormEventHandler, useState } from "react";
-import {
-  Button,
-  TextInput,
-  Tab,
-  TabGroup,
-  TabList,
-  TabPanel,
-  TabPanels,
-} from "@tremor/react";
+import { useState } from "react";
+import { Tab, TabGroup, TabList, TabPanel, TabPanels } from "@tremor/react";
 import { AlertDto } from "./models";
 import AlertTabModal from "./alert-tab-modal";
 import { evalWithContext } from "./alerts-rules-builder";
 import { XMarkIcon } from "@heroicons/react/24/outline";
 import { useApiUrl } from "utils/hooks/useConfig";
-import { useSession } from "next-auth/react";
+import { useHydratedSession as useSession } from "@/shared/lib/hooks/useHydratedSession";
 interface Tab {
   id?: string;
   name: string;

keep-ui/app/alerts/alerts-table-body.tsx

@@ -35,7 +35,7 @@ export function AlertsTableBody({
   if (showEmptyState) {
     return (
       <>
-        <div className="flex flex-col justify-center items-center h-96 w-full absolute top-1/3">
+        <div className="flex flex-col justify-center items-center h-96 w-full absolute p-4">
           <EmptyStateCard
             title="No alerts to display"
             description="It is because you have not connected any data source yet or there are no alerts matching the filter."
@@ -71,6 +71,30 @@ export function AlertsTableBody({
     onRowClick(alert);
   };
 
+
+  if (showSkeleton) {
+    return (
+      <TableBody>
+        {Array(20)
+          .fill("")
+          .map((index, rowIndex) => (
+            <TableRow key={`row-${index}-${rowIndex}`}>
+              {table.getAllColumns().map((c, cellIndex) => (
+                <TableCell
+                  key={clsx(
+                    `cell-${c.id}-${cellIndex}`,
+                    c.columnDef.meta?.tdClassName
+                  )}
+                >
+                  <Skeleton containerClassName="w-full" />
+                </TableCell>
+              ))}
+            </TableRow>
+          ))}
+      </TableBody>
+    );
+  }
+
   return (
     <TableBody>
       {table.getRowModel().rows.map((row) => {
@@ -100,11 +124,7 @@ export function AlertsTableBody({
                     "relative z-[1]" // Ensure cell content is above the border
                   )}
                 >
-                  {showSkeleton ? (
-                    <Skeleton />
-                  ) : (
-                    flexRender(cell.column.columnDef.cell, cell.getContext())
-                  )}
+                  {flexRender(cell.column.columnDef.cell, cell.getContext())}
                 </TableCell>
               );
             })}