chore: fix filter editing issue in infra monitoring

[amlannandy]

Summary

If a quick filters was already applied and we'd try to edit it later, the filter would get temporarily removed from the query and the list would be unfiltered. Fixed the issue here.

Related Issues / PR's

Fixes #6884

Screenshots

NA

Affected Areas and Manually Tested Areas

Infra Monitoring

---

Important

Fixes filter editing issue in QueryBuilderSearch for infra monitoring by managing editing state and conditionally triggering onChange.

• Behavior:
  • Fixes issue where editing a quick filter in infra monitoring temporarily removed it from the query.
  • Introduces isEditingTag state in QueryBuilderSearch to track editing status.
  • Modifies onChange logic to only trigger when editing is complete in infra monitoring mode.
• Functions:
  • Adds toggleEditMode function to manage editing state transitions.
  • Updates onTagRender, onInputKeyDownHandler, and onBlur to use toggleEditMode for managing edit state.
• Misc:
  • Minor adjustments to onChangeHandler and useEffect for handling tag filters.

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

[ellipsis-dev]

👍 Looks good to me! Reviewed everything up to 4980b5a in 20 seconds

More details

• Looked at 88 lines of code in 1 files
• Skipped 0 files when reviewing.
• Skipped posting 3 drafted comments based on config settings.

1. frontend/src/container/QueryBuilder/filters/QueryBuilderSearch/index.tsx:294

• Draft comment:
  Typo in comment: 'monitoiring' should be 'monitoring'.
• Reason this comment was not posted:
  Confidence changes required: 10%
  The typo in the comment could lead to confusion.

2. frontend/src/container/QueryBuilder/filters/QueryBuilderSearch/index.tsx:395

• Draft comment:
  Typo in variable name: 'dynamicPlacholder' should be 'dynamicPlaceholder'.
• Reason this comment was not posted:
  Confidence changes required: 20%
  The typo in the comment could lead to confusion.

3. frontend/src/container/QueryBuilder/filters/QueryBuilderSearch/index.tsx:395

• Draft comment:
  Avoid using inline styles in React components. Consider using external stylesheets, CSS classes, or styled components instead. 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_D5dSXNxQJE6BsBE8

---

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

[ellipsis-dev]

👍 Looks good to me! Incremental review on e20652a in 20 seconds

More details

• Looked at 88 lines of code in 1 files
• Skipped 0 files when reviewing.
• Skipped posting 3 drafted comments based on config settings.

1. frontend/src/container/QueryBuilder/filters/QueryBuilderSearch/index.tsx:209

• Draft comment:
  Consider using toggleEditMode(false) consistently to ensure editing mode is properly toggled off. This is already done in some places but should be consistent across all relevant handlers.
• Reason this comment was not posted:
  Confidence changes required: 50%
  The function toggleEditMode is defined but not used consistently. It should be used in all places where editing mode is toggled.

2. frontend/src/container/QueryBuilder/filters/QueryBuilderSearch/index.tsx:401

• Draft comment:
  Consider using toggleEditMode(false) consistently to ensure editing mode is properly toggled off. This is already done in some places but should be consistent across all relevant handlers.
• Reason this comment was not posted:
  Confidence changes required: 50%
  The function toggleEditMode is defined but not used consistently. It should be used in all places where editing mode is toggled.

3. frontend/src/container/QueryBuilder/filters/QueryBuilderSearch/index.tsx:395

• Draft comment:
  Avoid using inline styles. Consider using external stylesheets, CSS classes, or styled components instead. This is also applicable in other parts of the code where inline styles are used.
• Reason this comment was not posted:
  Comment was not on a valid diff hunk.

Workflow ID: wflow_C8Is6fPqc1X6h25C

---

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