elastic/kibana

[Watcher] Webhook password field breaks dark mode when filled

Open

#180967 opened on Apr 16, 2024

View on GitHub
 (1 comment) (0 reactions) (0 assignees)TypeScript (19,065 stars) (8,021 forks)batch import
Feature:WatcherTeam:Kibana Managementbuggood first issue

Description

When testing https://github.com/elastic/kibana/pull/180331, I noticed that in the Watcher plugin there is a small issue when using the dark mode. To reproduce:

  1. The browser needs to have a password saved and configured to automatically fill out the fields
  2. Enable the dark mode in the Advanced settings
  3. Navigate to Watcher and start creating a threshold alert
  4. Add a webhook in the dropdown "Add action"
  5. The pre-filled password field is not displayed correctly in the dark mode

Screen recording

https://github.com/elastic/kibana/assets/6585477/af210331-1c42-4d41-8960-11a8b7d4bb1e

Screenshot

Contributor guide

Tech stack
typescriptreact
Domain
frontendaccessibility
Issue type
bug
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
2
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
1-3 hours
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
fresh
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
mostly clear
Prerequisites
CSS knowledgeKibana dev environment setup
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
70
Research direction
Investigate the Watcher plugin's webhook password field styling. The issue is a CSS bug where a pre filled password field does not adhere to dark mode styles. Look at the component rendering the password input in the webhook form, likely under `plugins/watcher/public/` or similar. Check if the dark mode CSS variables or classes are correctly applied. A potential fix could involve adding a CSS rule for `.euiFieldPassword` or similar when the input is autofilled, ensuring it uses the dark theme background and text colors. Review the linked PR #180331 for context. The fix should be localized to the password field's styling in dark mode.