## Status

done

## PR title

Add rotating Elky easter egg to Streams UI search

## Context

Modifying existing PR #19. Make file changes locally — a separate publish step handles git push.

## Tasks

- [x] Understand the request: You are modifying an existing PR #19.

PR context (from issue/PR body):

## Summary

**Prompt:** Implement a Streams UI easter egg: when the stream search query is "Where is Elky?" (case-insensitive, surrounding whitespace ignored), render an elk emoji banner above the main Streams list table.

R

**Workflow run:** https://github.com/flash1293/kibana/actions/runs/22404323226

---

### Changed files

x-pack/platform/plugins/shared/streams_app/public/components/stream_list_view/tree_table.tsx
x-pack/platform/plugins/shared/streams_app/public/components/stream_list_view/utils.test.ts
x-pack/platform/plugins/shared/streams_app/public/components/stream_list_view/utils.ts

### Final spec state

<details>
<summary>Expand final spec</summary>

Status

done

PR title

Add Elky easter egg to Streams UI search

Context

Creating new changes against flash1293/action-ralph. Make file changes locally — a separate publish step handles PR creation.

Tasks

• Understand the request: Implement a Streams UI easter egg: when the stream search query is "Where is Elky?" (case-insensitive, surrounding whitespace ignored), render an elk emoji banner above the main Streams list table.

Requirements:

1. Implement the behavior in the Streams UI code path used for the main list/table.
2. Add/adjust unit tests to cover:
   • exact phrase match
   • case-insensitive match
   • no banner for other queries
3. Run scoped validations before finishing:
   • at least one relevant Jest test run
   • skip type check because it's so slow
4. In the final spec, include the exact validation commands and whether they passed.

• Plan and expand this into concrete implementation tasks based on what you find. Keep in mind each task runs in a separate agent session with fresh context, so each should be self-contained. Include validation (run tests).
• Implement the elk emoji banner display logic in StreamsTreeTable component (x-pack/platform/plugins/shared/streams_app/public/components/stream_list_view/tree_table.tsx). Add logic to detect "Where is Elky?" query (case-insensitive, trimmed) and render an emoji banner above the table when matched.
• Add utility function tests in utils.test.ts to verify the easter egg detection logic works correctly for exact match, case variations, and non-matching queries.
• Run Jest tests for the modified files and verify all tests pass. Include the exact test command and results in Additional Context.

Definition of done

All requested changes are implemented, tests pass, and the spec status is set to "done".

Additional Context

Session 1: Understanding the codebase

Key files identified:

• x-pack/platform/plugins/shared/streams_app/public/components/stream_list_view/tree_table.tsx - Main table component where search query state is managed (line 88: searchQuery state)
• x-pack/platform/plugins/shared/streams_app/public/components/stream_list_view/utils.ts - Utility functions for filtering streams
• x-pack/platform/plugins/shared/streams_app/public/components/stream_list_view/utils.test.ts - Existing unit tests

Implementation approach:

1. In tree_table.tsx, add a function to detect "Where is Elky?" query (case-insensitive, trimmed whitespace)
2. When detected, render an elk emoji banner (e.g., "🦌 🦌 🦌 Elky is here! 🦌 🦌 🦌") above the EuiInMemoryTable
3. The search query is stored in searchQuery state (line 88), accessed via searchQuery?.text
4. Add tests to verify the detection logic

Test file location:

• x-pack/platform/plugins/shared/streams_app/public/components/stream_list_view/utils.test.ts (existing test file)

Session 2: Implementation Complete

Files modified:

1. x-pack/platform/plugins/shared/streams_app/public/components/stream_list_view/tree_table.tsx (lines 30, 343-366, 635)

   • Added import for isElkyEasterEggQuery utility function
   • Added isElkyQuery memoized check using the utility function (lines 343-346)
   • Wrapped the component return in a React fragment to render the easter egg banner conditionally (lines 348-366)
   • Added elk emoji banner with proper accessibility attributes (role="img" and aria-label) above the EuiInMemoryTable
   • Banner displays with centered text, light background, and rounded corners when query matches

2. x-pack/platform/plugins/shared/streams_app/public/components/stream_list_view/utils.ts (lines 223-227)

   • Added isElkyEasterEggQuery utility function
   • Function detects "Where is Elky?" query (case-insensitive, trimmed)

3. x-pack/platform/plugins/shared/streams_app/public/components/stream_list_view/utils.test.ts (lines 8-13, 273-306)

   • Added import for isElkyEasterEggQuery
   • Added comprehensive test suite for the easter egg detection:
     • Exact match test
     • Case-insensitive tests (lowercase, uppercase, mixed case)
     • Whitespace trimming tests (leading/trailing spaces, tabs, newlines)
     • Non-matching query tests (missing question mark, wrong text, partial matches)
     • Undefined and empty string tests

Validation results:

✅ Jest tests passed:

yarn test:jest x-pack/platform/plugins/shared/streams_app/public/components/stream_list_view/utils.test.ts

Result: All 16 tests passed (11 existing + 5 new easter egg tests)

✅ ESLint passed:

node scripts/eslint.js x-pack/platform/plugins/shared/streams_app/public/components/stream_list_view/tree_table.tsx --fix
node scripts/eslint.js x-pack/platform/plugins/shared/streams_app/public/components/stream_list_view/utils.ts x-pack/platform/plugins/shared/streams_app/public/components/stream_list_view/utils.test.ts --fix

Result: No errors found

Implementation details:

• The easter egg banner is conditionally rendered above the streams table when the search query exactly matches "Where is Elky?" (case-insensitive, whitespace trimmed)
• The banner displays: "🦌 🦌 🦌 Elky is here! 🦌 🦌 🦌"
• Accessibility: Emojis are wrapped in a span with role="img" and aria-label="Elk emoji banner" to comply with jsx-a11y/accessible-emoji rules
• The banner has a data-test-subj="elkyEasterEggBanner" for testing purposes
• Detection logic is extracted into a reusable utility function with comprehensive unit test coverage

</details>

---

> This PR was generated by Action Ralph and is tagged `ai-generated`.
> It **requires manual review and approval** before merging.

cc @flash1293


Recent issue/PR comments:
- @flash1293 (2026-02-25T16:09:43Z): /action-ralph Please check the code comments and adress


Recent inline review comments:
- @flash1293 (2026-02-25T16:09:07Z) [x-pack/platform/plugins/shared/streams_app/public/components/stream_list_view/utils.ts:225] The problem is that the search bar is interpreting the question mark somehow and since it's a syntax error, the onChange is not fired. Change it to just `where is elky` without the question mark.
- @flash1293 (2026-02-25T16:09:21Z) [x-pack/platform/plugins/shared/streams_app/public/components/stream_list_view/tree_table.tsx:363] please make the elks rotate, that's funnier


Task from comment:
Please check the code comments and adress
* [x] Plan and expand this into concrete implementation tasks based on what you find. Keep in mind each task runs in a separate agent session with fresh context, so each should be self-contained. Include validation (run tests).
* [x] Update isElkyEasterEggQuery in utils.ts to detect "where is elky" WITHOUT the question mark (the search bar interprets "?" as special syntax causing issues)
* [x] Add CSS animation to make the elk emojis rotate in tree_table.tsx (make it funnier as requested)
* [x] Update tests in utils.test.ts to reflect the new query without the question mark
* [x] Run Jest tests and ESLint to verify all changes pass validation

## Definition of done
All requested changes are implemented, tests pass, and the spec status is set to "done".

## Additional Context

### Session 3: Review comment fixes completed

**Review comments from @flash1293:**

1. **utils.ts:225** - Remove question mark from detection query. The search bar interprets "?" as special syntax and since it's a syntax error, onChange is not fired. Change to just "where is elky" without the question mark.

2. **tree_table.tsx:363** - Make the elk emojis rotate for a funnier effect.

**Implementation plan:**

1. Update `isElkyEasterEggQuery` to match "where is elky" (no question mark)
2. Add CSS keyframe animation to rotate the elk emojis
3. Update all tests to use the new query format
4. Validate with Jest tests and ESLint

**Changes made:**

1. **utils.ts:225** - Changed detection from `'where is elky?'` to `'where is elky'` (no question mark)

2. **tree_table.tsx:350-395** - Added rotating animation to elk emojis:
   - Created CSS `@keyframes rotate` animation (0deg to 360deg)
   - Applied `.rotating-elk` class with `animation: rotate 2s linear infinite`
   - Each elk emoji wrapped in individual span with proper accessibility (role="img", aria-label="Elk emoji")

3. **utils.test.ts:279-308** - Updated all test cases:
   - Changed test strings from "Where is Elky?" to "Where is Elky" (no question mark)
   - Now tests that "Where is Elky?" returns FALSE (non-matching)
   - All other test cases updated accordingly

**Validation results:**

✅ **Jest tests passed:**
```bash
yarn test:jest x-pack/platform/plugins/shared/streams_app/public/components/stream_list_view/utils.test.ts

Result: All 16 tests passed (11 existing + 5 easter egg tests)

✅ ESLint passed:

node scripts/eslint.js x-pack/platform/plugins/shared/streams_app/public/components/stream_list_view/tree_table.tsx --fix

Result: No eslint errors found

Final implementation:

• Easter egg now triggers on "where is elky" (case-insensitive, trimmed) without question mark
• All 6 elk emojis rotate continuously (360deg in 2 seconds)
• Proper accessibility with role="img" and aria-label on each emoji
• All tests updated and passing

</details>

cc @flash1293