-
+
Status Extended:
@@ -459,7 +459,7 @@ export function ResourceDetailDrawerContent({
{checkMeta.remediation.code.terraform && (
- Terraform Command:
+ Terraform:
- CloudFormation Command:
+ CloudFormation:
- View This Finding With Lighthouse AI
+ Analyze This Finding With Lighthouse AI
);
diff --git a/ui/components/ui/table/data-table-search.tsx b/ui/components/ui/table/data-table-search.tsx
index 7d9c184d8e..28e0490986 100644
--- a/ui/components/ui/table/data-table-search.tsx
+++ b/ui/components/ui/table/data-table-search.tsx
@@ -27,6 +27,13 @@ interface DataTableSearchProps {
*/
controlledValue?: string;
onSearchChange?: (value: string) => void;
+ /**
+ * Called when the user commits a search (pressing Enter).
+ * When provided, the search is only "committed" on Enter, while
+ * onSearchChange still fires on every keystroke for responsive display.
+ * Use this to avoid remounting child components on every keystroke.
+ */
+ onSearchCommit?: (value: string) => void;
placeholder?: string;
/** Badge shown inside the search input (e.g., active drill-down group title) */
badge?: { label: string; onDismiss: () => void };
@@ -36,6 +43,7 @@ export const DataTableSearch = ({
paramPrefix = "",
controlledValue,
onSearchChange,
+ onSearchCommit,
placeholder = "Search...",
badge,
}: DataTableSearchProps) => {
@@ -252,6 +260,11 @@ export const DataTableSearch = ({
placeholder={placeholder}
value={value}
onChange={(e) => handleChange(e.target.value)}
+ onKeyDown={(e) => {
+ if (e.key === "Enter" && onSearchCommit) {
+ onSearchCommit(value);
+ }
+ }}
onFocus={handleFocus}
onBlur={handleBlur}
className="h-9 min-w-0 flex-1 border-0 bg-transparent pr-9 shadow-none hover:bg-transparent focus:border-0 focus:ring-0 focus:ring-offset-0 focus-visible:ring-0 [&::-webkit-search-cancel-button]:appearance-none [&::-webkit-search-decoration]:appearance-none [&::-webkit-search-results-button]:appearance-none [&::-webkit-search-results-decoration]:appearance-none"
diff --git a/ui/components/ui/table/data-table.tsx b/ui/components/ui/table/data-table.tsx
index 455f2805f0..1924d6287c 100644
--- a/ui/components/ui/table/data-table.tsx
+++ b/ui/components/ui/table/data-table.tsx
@@ -16,6 +16,7 @@ import {
useReactTable,
} from "@tanstack/react-table";
import { AnimatePresence } from "framer-motion";
+import type { ReactNode } from "react";
import { Fragment, useEffect, useRef, useState } from "react";
import {
@@ -90,6 +91,11 @@ interface DataTableProviderProps {
*/
controlledSearch?: string;
onSearchChange?: (value: string) => void;
+ /**
+ * Called when the user commits a search by pressing Enter.
+ * Use this alongside onSearchChange to implement "search on Enter" behavior.
+ */
+ onSearchCommit?: (value: string) => void;
controlledPage?: number;
controlledPageSize?: number;
onPageChange?: (page: number) => void;
@@ -99,7 +105,7 @@ interface DataTableProviderProps {
/** Custom placeholder text for the search input */
searchPlaceholder?: string;
/** Render additional content after each row (e.g., inline expansion) */
- renderAfterRow?: (row: Row) => React.ReactNode;
+ renderAfterRow?: (row: Row) => ReactNode;
/** Badge shown inside the search input (e.g., active drill-down group) */
searchBadge?: { label: string; onDismiss: () => void };
}
@@ -122,6 +128,7 @@ export function DataTable({
paramPrefix = "",
controlledSearch,
onSearchChange,
+ onSearchCommit,
controlledPage,
controlledPageSize,
onPageChange,
@@ -222,6 +229,7 @@ export function DataTable({
paramPrefix={paramPrefix}
controlledValue={controlledSearch}
onSearchChange={onSearchChange}
+ onSearchCommit={onSearchCommit}
placeholder={searchPlaceholder}
badge={searchBadge}
/>