guibranco / guibranco/logstream-ui

[FEATURE] Context field search inputs in Search screen

Open
#162 0 comments 0 reactions 0 assignees View on GitHub
✨ feature 🎨 ux enhancement good first issue hacktoberfest help wanted
Dominant language
TypeScript
Stars
1
Forks
0
Avg merge
15m
Merged PRs (30d)
49

Description

## Summary

Extend the Search screen filter panel with inputs for **context key-value search** and **fulltext context search**, corresponding to the new `context[key]=value` and `context_search=term` query parameters on the server.

> **Depends on:** [`[FEATURE] Context field search`](https://github.com/guibranco/logstream-server/issues) in `guibranco/logstream-server`

## Motivation

The `context` field holds the richest structured data (invoice IDs, user IDs, error codes) but is currently invisible in the search UI. Engineers must use the raw API to filter by it.

## Proposed UI additions

### Fulltext context search

A single input in the existing filter panel:

```
Context contains: [________________________]
```

Maps to: `?context_search=card_declined`

### Key-value context filter

A dynamic key-value pair builder:

```
Context filters:
[invoice_id ] = [1234 ] [×]
[code ] = [card_declined] [×]
[+ Add context filter]
```

Maps to: `?context[invoice_id]=1234&context[code]=card_declined`

## Files to create / modify

- `src/components/search/ContextSearchInput.tsx` — fulltext context search field
- `src/components/search/ContextKeyValueFilter.tsx` — dynamic add/remove key-value rows
- `src/screens/SearchScreen.tsx` — integrate new inputs into filter panel
- `src/hooks/useSearch.ts` — extend filter state and URL serialisation for context params

## UX details

- Context filters appear in a collapsible **"Advanced filters"** section below the main filters to avoid cluttering the default view
- Active context filters are shown as badge chips in the active filter summary bar
- Context filters are included in the Saved Searches feature
- Show a tooltip on the section header: *"Context search requires MariaDB storage"* when `storage_type: file` is returned by `GET /api/info`; inputs are disabled with a greyed-out appearance

## Acceptance criteria

- [ ] Fulltext context search input added to filter panel
- [ ] Key-value filter builder with add/remove rows
- [ ] Filters correctly serialised to `context[key]=value` query params
- [ ] Active context filters shown as chips in filter summary
- [ ] Inputs disabled with tooltip when server is in file storage mode
- [ ] Context filters included when exporting or saving a search
- [ ] URL reflects context filter state (shareable links)

Contributor guide

Open the contributing guide

Research direction

Start with src/screens/SearchScreen.tsx and src/hooks/useSearch.ts to understand the existing filter panel, state, URL serialization, saved searches, and export flow. Then read the proposed ContextSearchInput.tsx and ContextKeyValueFilter.tsx responsibilities and the existing filter summary components. Done means context_search and context[key] values work in shareable URLs, appear as chips, are saved/exported, and are disabled with the specified tooltip for file storage mode.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript, vite
Domain
frontend, search
Issue type
Feature
Difficulty
4/5
Estimated time
3-5 days
Activity status
Quiet
Clarity
Clearly specified
Newbie friendliness
58/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.