[pull] main from keephq:main

keep-ui/.gitignore

@@ -49,3 +49,6 @@ app/topology/mock-topology-data.tsx
 
 # Monaco workers (generated at build time for turbopack dev)
 public/monaco-workers/
+
+# TypeScript build info
+tsconfig.tsbuildinfo

keep-ui/app/(keep)/incidents/[id]/route.tsx

@@ -1,11 +1,9 @@
 import { redirect } from "next/navigation";
 
-type PageProps = {
-  params: Promise<{ id: string }>;
-  searchParams: Promise<{ [key: string]: string | string[] | undefined }>;
-};
-
 // This is just a redirect from legacy route
-export async function GET(request: Request, props: PageProps) {
+export async function GET(
+  request: Request,
+  props: { params: Promise<{ id: string }> }
+) {
   redirect(`/incidents/${(await props.params).id}/alerts`);
 }

keep-ui/app/(keep)/rules/GroupedByCel.tsx

@@ -1,3 +1,4 @@
+import React from "react";
 import { PlusIcon } from "@radix-ui/react-icons";
 import { Badge, Icon } from "@tremor/react";
 import * as Tooltip from "@radix-ui/react-tooltip";
@@ -15,7 +16,7 @@ export const GroupedByCell = ({ fields }: GroupedByCellProps) => {
     fieldsInTooltip = fields.slice(1);
   }
 
-  function renderFields(fields: string[]): JSX.Element[] | JSX.Element {
+  function renderFields(fields: string[]): React.JSX.Element[] | React.JSX.Element {
     return fields.map((group, index) => (
       <>
         <Badge color="orange" key={group}>

keep-ui/app/(keep)/topology/ui/map/topology-map.tsx

@@ -152,7 +152,7 @@ export function TopologyMap({
   const [nodes, setNodes] = useState<TopologyNode[]>([]);
   const [edges, setEdges] = useState<Edge[]>([]);
 
-  const reactFlowInstanceRef = useRef<ReactFlowInstance<TopologyNode, Edge>>();
+  const reactFlowInstanceRef = useRef<ReactFlowInstance<TopologyNode, Edge> | null>(null);
 
   const highlightNodes = useCallback((nodeIds: string[]) => {
     setNodes((nds) =>

keep-ui/components/LinkWithIcon.tsx

@@ -1,4 +1,4 @@
-import { AnchorHTMLAttributes, ReactNode, useState } from "react";
+import React, { AnchorHTMLAttributes, ReactNode, useState } from "react";
 import Link, { LinkProps } from "next/link";
 import { IconType } from "react-icons/lib";
 import { Badge, Icon } from "@tremor/react";
@@ -18,7 +18,7 @@ type LinkWithIconProps = {
   testId?: string;
   isExact?: boolean;
   iconClassName?: string;
-  renderBeforeCount?: () => JSX.Element | undefined;
+  renderBeforeCount?: () => React.JSX.Element | undefined;
   onIconClick?: (e: React.MouseEvent) => void;
 } & LinkProps &
   AnchorHTMLAttributes<HTMLAnchorElement>;

keep-ui/components/ui/useTimeframeState.ts

@@ -86,7 +86,7 @@ export function useTimeframeState({
   defaultTimeframe,
 }: typeof defaultOptions) {
   const searchParams = useSearchParams();
-  const defaultTimeframeRef = useRef<TimeFrameV2>();
+  const defaultTimeframeRef = useRef<TimeFrameV2 | undefined>(undefined);
   defaultTimeframeRef.current =
     defaultTimeframe || defaultOptions.defaultTimeframe;
 

keep-ui/features/filter/facet-value.tsx

@@ -1,3 +1,4 @@
+import React from "react";
 import { ShortNumber } from "@/components/ui";
 import { Text } from "@tremor/react";
 import clsx from "clsx";
@@ -9,8 +10,8 @@ export interface FacetValueProps {
   isSelected: boolean;
   isSelectable: boolean;
   showIcon: boolean;
-  renderLabel?: () => JSX.Element | string | undefined;
-  renderIcon?: () => JSX.Element | undefined;
+  renderLabel?: () => React.JSX.Element | string | undefined;
+  renderIcon?: () => React.JSX.Element | undefined;
   onSelectOneOption: (value: string) => void;
   onSelectAllOptions: () => void;
   onToggleOption: (value: string) => void;

keep-ui/features/filter/facets-panel.tsx

@@ -28,11 +28,11 @@ export interface FacetsPanelProps {
   renderFacetOptionLabel?: (
     facetName: string,
     optionDisplayName: string
-  ) => JSX.Element | string | undefined;
+  ) => React.JSX.Element | string | undefined;
   renderFacetOptionIcon?: (
     facetName: string,
     optionDisplayName: string
-  ) => JSX.Element | undefined;
+  ) => React.JSX.Element | undefined;
   onCelChange?: (cel: string) => void;
   onAddFacet: () => void;
   onDeleteFacet: (facetId: string) => void;

keep-ui/features/filter/models.tsx

@@ -1,12 +1,14 @@
+import React from "react";
+
 export type FacetState = Record<string, any | null>;
 
 export interface FacetConfig {
   canHitEmptyState?: boolean;
   checkedByDefaultOptionValues?: string[];
-  renderOptionIcon?: (facetOption: FacetOptionDto) => JSX.Element | undefined;
+  renderOptionIcon?: (facetOption: FacetOptionDto) => React.JSX.Element | undefined;
   renderOptionLabel?: (
     facetOption: FacetOptionDto
-  ) => JSX.Element | string | undefined;
+  ) => React.JSX.Element | string | undefined;
   sortCallback?: (facetOption: FacetOptionDto) => number;
 }
 

keep-ui/features/filter/store/use-query-params/use-query-params.ts

@@ -72,7 +72,7 @@ function replaceQueryParams(searchParams: URLSearchParams): void {
 }
 
 export function useQueryParams(store: StoreApi<FacetsPanelState>) {
-  const searchParamsRef = useRef<ReadonlyURLSearchParams>();
+  const searchParamsRef = useRef<ReadonlyURLSearchParams | undefined>(undefined);
   searchParamsRef.current = useSearchParams();
   const pathname = usePathname();
   const facets = useStore(store, (state) => state.facets);

keep-ui/features/filter/store/use-store.tsx

@@ -13,7 +13,7 @@ import { useInitialStateHandler } from "./use-initial-state-handler";
 // import { useFacetsStateHandler } from "./use-facets-state-handler";
 
 export function useNewFacetStore(facetsConfig: FacetsConfig | undefined) {
-  const storeRef = useRef<ReturnType<typeof createFacetsPanelStore>>();
+  const storeRef = useRef<ReturnType<typeof createFacetsPanelStore> | undefined>(undefined);
 
   if (!storeRef.current) {
     storeRef.current = createFacetsPanelStore(); // New store per provider

keep-ui/features/incidents/incident-list/ui/incidents-report/incidents-report.tsx

@@ -1,3 +1,4 @@
+import React from "react";
 import { IncidentData } from "./models";
 import { IncidentSeverityMetric } from "./incident-severity-metric";
 import { PieChart } from "./pie-chart";
@@ -50,7 +51,7 @@ export const IncidentsReport: React.FC<IncidentsReportProps> = ({
   function renderTimeMetric(
     metricName: string,
     metricValueInSeconds: number | undefined
-  ): JSX.Element {
+  ): React.JSX.Element {
     return (
       <p className="incidents-time-metric font-medium text-lg">
         <strong>{metricName}:&nbsp;</strong>
@@ -61,7 +62,7 @@ export const IncidentsReport: React.FC<IncidentsReportProps> = ({
     );
   }
 
-  function renderMainReasons(): JSX.Element {
+  function renderMainReasons(): React.JSX.Element {
     return (
       <div className="break-inside-avoid incidents-main-reasons text-lg">
         <p className="font-bold mb-2">Most of the incidents reasons:</p>
@@ -78,7 +79,7 @@ export const IncidentsReport: React.FC<IncidentsReportProps> = ({
     );
   }
 
-  function renderAffectedServices(): JSX.Element {
+  function renderAffectedServices(): React.JSX.Element {
     return (
       <div className="break-inside-avoid text-lg">
         <p className="font-bold mb-2">Affected services:</p>
@@ -95,7 +96,7 @@ export const IncidentsReport: React.FC<IncidentsReportProps> = ({
     );
   }
 
-  function renderRecurringIncidents(): JSX.Element {
+  function renderRecurringIncidents(): React.JSX.Element {
     return (
       <div className="text-lg break-inside-avoid">
         <p className="font-bold mb-2">Recurring incidents:</p>
@@ -112,7 +113,7 @@ export const IncidentsReport: React.FC<IncidentsReportProps> = ({
     );
   }
 
-  function renderTimeMetrics(): JSX.Element {
+  function renderTimeMetrics(): React.JSX.Element {
     return (
       <div className="break-inside-avoid">
         <p className="font-bold text-lg">Incident Metrics:</p>