feat(runs): add log search with backend LIKE filter and pagination
- add Search pill component with lucide icon and focus highlight - wire debounced search input to GET /run/:id?q= backend filter - backend filters run logs with LIKE %q% via TypeORM - add sectionHeadingRow layout for heading + search alignment - add i18n keys: runs.step_title, logs_search_placeholder
This commit is contained in:
@@ -0,0 +1,36 @@
|
||||
.root {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: var(--space-2);
|
||||
padding: 5px var(--space-3);
|
||||
border: var(--border-width) solid var(--color-border);
|
||||
border-radius: var(--radius-full);
|
||||
background: var(--color-bg-subtle);
|
||||
transition: border-color var(--transition), background var(--transition);
|
||||
}
|
||||
|
||||
.root:focus-within {
|
||||
border-color: var(--color-primary);
|
||||
background: var(--color-bg);
|
||||
}
|
||||
|
||||
.icon {
|
||||
color: var(--color-text-muted);
|
||||
flex-shrink: 0;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.input {
|
||||
border: none;
|
||||
background: transparent;
|
||||
color: var(--color-text);
|
||||
font-family: var(--font-family);
|
||||
font-size: var(--font-size-xs);
|
||||
outline: none;
|
||||
width: 180px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.input::placeholder {
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
@@ -0,0 +1,23 @@
|
||||
import { Search as SearchIcon } from 'lucide-react';
|
||||
import styles from './Search.module.css';
|
||||
|
||||
export interface SearchProps {
|
||||
value: string;
|
||||
onChange: (value: string) => void;
|
||||
placeholder?: string;
|
||||
}
|
||||
|
||||
export function Search({ value, onChange, placeholder = 'Search…' }: SearchProps) {
|
||||
return (
|
||||
<div className={styles.root}>
|
||||
<SearchIcon size={13} className={styles.icon} />
|
||||
<input
|
||||
className={styles.input}
|
||||
type="text"
|
||||
value={value}
|
||||
onChange={(e) => onChange(e.target.value)}
|
||||
placeholder={placeholder}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -33,6 +33,9 @@ export type { TimestampProps } from './Timestamp/Timestamp';
|
||||
export { Pagination } from './Pagination/Pagination';
|
||||
export type { PaginationProps } from './Pagination/Pagination';
|
||||
|
||||
export { Search } from './Search/Search';
|
||||
export type { SearchProps } from './Search/Search';
|
||||
|
||||
export { ContextMenu } from './ContextMenu/ContextMenu';
|
||||
export type { ContextMenuProps, ContextMenuItem } from './ContextMenu/ContextMenu';
|
||||
|
||||
|
||||
Reference in New Issue
Block a user