feat: search metadata keys using Enter with hint in condition dialog

[abdimo101]

Description

Users can now search metadata keys by pressing Enter in the condition dialog. Searches both key and humanReadableName.

Motivation

Background on use case, changes needed

Fixes:

Please provide a list of the fixes implemented in this PR

• Items added

Changes:

Please provide a list of the changes implemented by this PR

• changes made

Tests included

• Included for each change/fix?
• Passing? (Merge will not be approved unless this is checked)

Documentation

• swagger documentation updated [required]
• official documentation updated [nice-to-have]

official documentation info

If you have updated the official documentation, please provide PR # and URL of the pages where the updates are included

Backend version

• Does it require a specific version of the backend
• which version of the backend is required:

Summary by Sourcery

Add keyboard support and UI hint for applying conditions in the search parameters dialog for datasets and samples.

New Features:

• Allow users to add a condition from the search parameters dialog by pressing the Enter key and show an inline hint for this shortcut.

Enhancements:

• Adjust dialog action buttons to use explicit button types and click handlers instead of relying on form submission.

Tests:

• Update dataset and sample Cypress tests to target the Apply button by label and add coverage for adding a condition via the Enter key.

[sourcery-ai]

Hey - I've found 2 issues, and left some high level feedback:

• The .enter-hint class sets align-items and gap but never specifies a flex display, so these properties have no effect; consider adding display: inline-flex (or similar) to get the desired layout.
• Binding (keydown.enter) on the entire mat-dialog-content may trigger add() when Enter is pressed in other controls inside the dialog; consider attaching the handler directly to the lhs input (or checking the event target) to avoid unintended submissions.

Prompt for AI Agents

Please address the comments from this code review:

## Overall Comments
- The `.enter-hint` class sets `align-items` and `gap` but never specifies a flex display, so these properties have no effect; consider adding `display: inline-flex` (or similar) to get the desired layout.
- Binding `(keydown.enter)` on the entire `mat-dialog-content` may trigger `add()` when Enter is pressed in other controls inside the dialog; consider attaching the handler directly to the `lhs` input (or checking the event target) to avoid unintended submissions.

## Individual Comments

### Comment 1
<location path="src/app/shared/modules/search-parameters-dialog/search-parameters-dialog.component.html" line_range="3" />
<code_context>
 <h2 mat-dialog-title>Add Characteristic</h2>
 <form [formGroup]="parametersForm" class="search-parameters-form">
-  <mat-dialog-content>
+  <mat-dialog-content (keydown.enter)="add()">
     <mat-form-field class="search-field">
       <mat-label>Field</mat-label>
</code_context>
<issue_to_address>
**issue (bug_risk):** Handling Enter on the whole dialog content can trigger `add()` in unintended contexts (e.g. on buttons or other controls).

Binding `(keydown.enter)` on `mat-dialog-content` will call `add()` for any Enter press inside the dialog, including on buttons or future fields. Instead, bind Enter only on the input that should submit (e.g. `lhs` or the form via `(ngSubmit)`), and if needed use `stopPropagation` / `preventDefault` there to avoid duplicate handling.
</issue_to_address>

### Comment 2
<location path="src/app/shared/modules/search-parameters-dialog/search-parameters-dialog.component.html" line_range="108-109" />
<code_context>
   <mat-dialog-actions [attr.align]="'end'">
-    <button mat-button (click)="cancel()">Cancel</button>
-    <button mat-button type="submit" (click)="add()" color="primary">
+    <button mat-button type="button" (click)="cancel()">Cancel</button>
+    <button mat-button type="button" (click)="add()" color="primary">
       Apply
     </button>
</code_context>
<issue_to_address>
**suggestion (bug_risk):** Changing the buttons to `type="button"` removes native form submission behavior, which could be handled more cleanly at the form level.

With both buttons as `type="button"`, the form loses native submit behavior and relies on a container-level `keydown.enter` handler. Consider wiring `(ngSubmit)="add()"` on the form and keeping the Apply button as `type="submit"`. This centralizes submit logic, improves accessibility/keyboard support, and may let you remove the broad keydown listener.

Suggested implementation:

```
  </mat-dialog-content>
  <form (ngSubmit)="add()">
    <mat-dialog-actions [attr.align]="'end'">
      <button mat-button type="button" (click)="cancel()">Cancel</button>
      <button mat-button type="submit" color="primary">
        Apply
      </button>
    </mat-dialog-actions>
  </form>

```

1. If there is a `keydown.enter` or similar global/container-level handler in the corresponding TypeScript file (e.g., `search-parameters-dialog.component.ts`) that was previously used to trigger `add()`, it can likely be removed because the form submit will now handle Enter key presses on any input within the form.
2. Ensure that there is no nested `<form>` higher up in the template (wrapping this dialog), as nested forms are invalid HTML. If there is an outer form, instead add `(ngSubmit)="add()"` and `type="submit"` there, and do not introduce another `<form>` here.
</issue_to_address>

---

Sourcery is free for open source - if you like our reviews please consider sharing them ✨

• X
• Mastodon
• LinkedIn
• Facebook

_{Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.}

[nitrosx]

@abdimo101 can you address the surcery comments, please?

[nitrosx]

please review sorcery comments and make the changes if needed.
We can also discuss in person if needed

[Junjiequan]

I'd expect user journey to be: user type something > press enter > the list refresh > use click an item to apply
and the hint text should be press enter to search