fix: improve keyboard navigation and event handling for logs columns popup

[ahmadshaheer]

Summary

• Replace window.addEventListener with React's onKeyDown handler
• Add arrow key navigation to select first/last dropdown options if there is no selected option
• Fix edge cases in option selection logic (don't allow selection options if options array is empty)

Related Issues / PR's

Fixes this Sentry

Screenshots

Before:

2024-12-05.12-32-30.mov

After:

2024-12-05.13-59-12.mov

Affected Areas and Manually Tested Areas

• Add new column popup for logs
• Tested
  • Pressing enter when no option is selected, should not break the page
  • If no option is selected, pressing up arrow should select the last item
  • If no option is selected, pressing down arrow should select the first item
  • Pressing enter should add the column

---

Important

Improves keyboard navigation and event handling in LogsFormatOptionsMenu by using onKeyDown and handling edge cases.

• Behavior:
  • Replaces window.addEventListener with onKeyDown handler in LogsFormatOptionsMenu.tsx for keyboard events.
  • Adds arrow key navigation to select first/last dropdown options if no option is selected.
  • Prevents option selection if options array is empty.
• Styles:
  • Adds focus-visible style to .add-new-column-container in LogsFormatOptionsMenu.styles.scss.

^{This description was created by for f76c505. It will automatically update as commits are pushed.}

[github-actions]

Build Error! No Linked Issue found. Please link an issue or mention it in the body using #<issue_id>

[github-actions]

Build Error! No Linked Issue found. Please link an issue or mention it in the body using #<issue_id>

[ellipsis-dev]

👍 Looks good to me! Reviewed everything up to f76c505 in 29 seconds

More details

• Looked at 211 lines of code in 2 files
• Skipped 0 files when reviewing.
• Skipped posting 4 drafted comments based on config settings.

1. frontend/src/components/LogsFormatOptionsMenu/LogsFormatOptionsMenu.tsx:142

• Draft comment:
  Ensure that the dependencies for useCallback hooks are accurate. The current implementation seems correct, but double-check that addColumn and selectedValue are the only dependencies needed for handleColumnSelection, and addColumn?.options, selectedValue, and handleColumnSelection for handleKeyDown.
• Reason this comment was not posted:
  Confidence changes required: 20%
  The use of useCallback for handleColumnSelection and handleKeyDown is appropriate, but the dependencies should be checked. The handleColumnSelection function uses addColumn and selectedValue, so these should be in the dependency array. The handleKeyDown function uses addColumn?.options, selectedValue, and handleColumnSelection, so these should be in the dependency array. The current implementation seems correct, but it's good to ensure that these dependencies are accurate.

2. frontend/src/components/LogsFormatOptionsMenu/LogsFormatOptionsMenu.tsx:158

• Draft comment:
  Consider making the logic for handling the Enter key when no option is selected more explicit. Currently, it returns early, but explicitly stating that no action is taken might improve readability.
• Reason this comment was not posted:
  Confidence changes required: 10%
  The handleKeyDown function is correctly using e.preventDefault() to prevent default behavior for certain keys, which is good practice. However, the logic for handling the Enter key when no option is selected could be more explicit. Currently, it returns early, but it might be clearer to explicitly state that no action is taken when Enter is pressed without a selection.

3. frontend/src/components/LogsFormatOptionsMenu/LogsFormatOptionsMenu.styles.scss:651

• Draft comment:
  Use design tokens or predefined color constants instead of hardcoding color values like #1d212d to maintain consistency in design and theming. This is also applicable to other hardcoded color values in this file.
• Reason this comment was not posted:
  Comment was not on a valid diff hunk.

4. frontend/src/components/LogsFormatOptionsMenu/LogsFormatOptionsMenu.tsx:283

• Draft comment:
  Avoid using inline styles in React components. Instead, use external stylesheets, CSS classes, or styled components. This is also applicable to other inline styles in this file.
• Reason this comment was not posted:
  Comment was not on a valid diff hunk.

Workflow ID: wflow_lgz5X4pKLKLfugMK

---

You can customize Ellipsis with 👍 / 👎 feedback, review rules, user-specific overrides, quiet mode, and more.

[github-actions]

Build Error! No Linked Issue found. Please link an issue or mention it in the body using #<issue_id>