Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Fixes #26424: prevent table text selection turn white & anchor table actions to active cell#27225

Merged
aniketkatkar97 merged 23 commits intoopen-metadata:mainfrom
hassaansaleem28:fix/26424-textColor-turns-white
Apr 17, 2026
Merged

Fixes #26424: prevent table text selection turn white & anchor table actions to active cell#27225
aniketkatkar97 merged 23 commits intoopen-metadata:mainfrom
hassaansaleem28:fix/26424-textColor-turns-white

Conversation

@hassaansaleem28
Copy link
Copy Markdown
Contributor

@hassaansaleem28 hassaansaleem28 commented Apr 10, 2026

Describe your changes:

Fixes #26424

I worked on issue #26424 that reported two UX problems:

  • selected text became unreadable (turns white) during selection
  • row and column action controls were hard to use in large tables when working in the middle

What and Why I changed :

  • Updated table selection styling in block-editor.less so selected text remains readable.
  • Updated table menu anchoring in TableMenu.tsx so actions are accessible where the user is working.
  • Added regression tests in TableMenu.test.tsx for testing.

BEFORE :

Screencast from 2026-04-09 22-46-23.webm (Desc text turns white on selecting & menu for row/col doesn't appear in mid of table)

AFTER :

Screencast from 2026-04-17 06-06-02.webm(Text doesn't turn white & menu for row/col appears in middle of table also as expected)

Type of change:

  • Bug fix

Checklist:

  • I have read the CONTRIBUTING document.
  • My PR title is Fixes #26424: prevent table text selection turn white & anchor table actions to active cell
  • I have commented on my code, particularly in hard-to-understand areas.
  • For JSON Schema changes: I updated the migration scripts or explained why it is not needed.
  • I have added a test that covers the exact scenario we are fixing. For complex issues, comment the issue number in the test for future reference.

  • I have added tests around the new logic.

@github-actions
Copy link
Copy Markdown
Contributor

Hi there 👋 Thanks for your contribution!

The OpenMetadata team will review the PR shortly! Once it has been labeled as safe to test, the CI workflows
will start executing and we'll be able to make sure everything is working as expected.

Let us know if you need any help!

@github-actions
Copy link
Copy Markdown
Contributor

Hi there 👋 Thanks for your contribution!

The OpenMetadata team will review the PR shortly! Once it has been labeled as safe to test, the CI workflows
will start executing and we'll be able to make sure everything is working as expected.

Let us know if you need any help!

@hassaansaleem28 hassaansaleem28 marked this pull request as ready for review April 10, 2026 06:01
@hassaansaleem28 hassaansaleem28 requested a review from a team as a code owner April 10, 2026 06:01
Copilot AI review requested due to automatic review settings April 10, 2026 06:01
Copy link
Copy Markdown
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

This PR addresses two UX regressions in the Block Editor’s table experience: selected text in table descriptions becoming unreadable during selection, and table row/column actions being difficult to access when working in the middle of large tables.

Changes:

  • Adjusts table menu positioning logic to anchor actions to the active cell (or selected-cell bounding area) instead of the full table wrapper.
  • Adds unit tests to validate the new anchoring behavior and its fallbacks.
  • Updates table selection styling to keep selected text readable inside table content.

Reviewed changes

Copilot reviewed 3 out of 3 changed files in this pull request and generated no comments.

File Description
openmetadata-ui/src/main/resources/ui/src/components/BlockEditor/TableMenu/TableMenu.tsx Anchors the table actions popup to the clicked cell / selected cells area via a dynamic getReferenceClientRect.
openmetadata-ui/src/main/resources/ui/src/components/BlockEditor/TableMenu/TableMenu.test.tsx Adds regression tests verifying anchoring to cell, selected-cells bounding rect, and wrapper fallback.
openmetadata-ui/src/main/resources/ui/src/components/BlockEditor/block-editor.less Ensures table text selection color stays readable within .tableWrapper.

@github-actions
Copy link
Copy Markdown
Contributor

Hi there 👋 Thanks for your contribution!

The OpenMetadata team will review the PR shortly! Once it has been labeled as safe to test, the CI workflows
will start executing and we'll be able to make sure everything is working as expected.

Let us know if you need any help!

@github-actions
Copy link
Copy Markdown
Contributor

github-actions Bot commented Apr 11, 2026

Jest test Coverage

UI tests summary

Lines Statements Branches Functions
Coverage: 63%
63.74% (59633/93550) 43.66% (31378/71854) 46.75% (9431/20170)

Copilot AI review requested due to automatic review settings April 11, 2026 06:55
Copy link
Copy Markdown
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

Copilot reviewed 3 out of 3 changed files in this pull request and generated 1 comment.

Copilot AI review requested due to automatic review settings April 16, 2026 02:38
Copy link
Copy Markdown
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

Copilot reviewed 4 out of 4 changed files in this pull request and generated 1 comment.

Signed-off-by: hassaansaleem28 <[email protected]>
Copy link
Copy Markdown
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

Copilot reviewed 4 out of 4 changed files in this pull request and generated 1 comment.

Comment thread openmetadata-ui/src/main/resources/ui/index.html Outdated
Comment thread openmetadata-ui/src/main/resources/ui/index.html Outdated
Copy link
Copy Markdown
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

Copilot reviewed 3 out of 3 changed files in this pull request and generated no new comments.

@gitar-bot
Copy link
Copy Markdown

gitar-bot Bot commented Apr 16, 2026

Code Review ✅ Approved 4 resolved / 4 findings

Prevents text selection issues and anchors table actions to the active cell. Redundant DOM traversal, merge conflicts, CSP nonce removal, and unsafe innerHTML injection have been resolved.

✅ 4 resolved
Quality: Redundant .closest() traversal in referenceElement resolution

📄 openmetadata-ui/src/main/resources/ui/src/components/BlockEditor/TableMenu/TableMenu.tsx:122-128
Lines 122-125 resolve referenceElement by calling target.closest(TABLE_CELL_SELECTOR) then target.closest(TABLE_WRAPPER_SELECTOR). However, getReferenceRect (line 85-101) performs the exact same .closest() chain internally. Since referenceElement is already resolved to a td/th or .tableWrapper, the lookups inside getReferenceRect are redundant (they'll just return self).

This isn't a bug—closest() matches the element itself—but it's unnecessary work on every tippy repositioning call. Consider either:

  • Passing the resolved element directly to getBoundingClientRect() (skipping getReferenceRect), or
  • Keeping only the getReferenceRect(target) call but wrapping it in the arrow function (which is the actual fix for dynamic repositioning).
Bug: Unresolved git merge conflict markers in test file

📄 openmetadata-ui/src/main/resources/ui/src/components/BlockEditor/TableMenu/TableMenu.test.tsx:154-160
The test file contains unresolved git merge conflict markers (<<<<<<< HEAD, =======, >>>>>>> a8a1ed21e2) at lines 154-160. This will cause the test file to fail to parse and all tests in this file will be broken. The conflict appears to be between two approaches for mocking getBoundingClientRect: the direct assignment (jest.fn()) vs. the mockBoundingClientRect helper using Object.defineProperty.

This must be resolved before merging.

Security: CSP nonce removed from inline scripts weakens XSS protection

📄 openmetadata-ui/src/main/resources/ui/index.html:29 📄 openmetadata-ui/src/main/resources/ui/index.html:92 📄 openmetadata-ui/src/main/resources/ui/index.html:105
All three <script> tags had their nonce="${cspNonce}" attribute removed. CSP nonces are a critical defense-in-depth mechanism that allows only server-authorized inline scripts to execute. Without them, if the application has a Content-Security-Policy header that relies on nonces (which is the standard pattern when ${cspNonce} is templated server-side), these scripts will either:

  1. Break entirely if CSP is enforced — the browser will refuse to run unnonce'd inline scripts.
  2. Weaken security if CSP is loosened to compensate (e.g., adding 'unsafe-inline') — any injected script on the page would also be allowed to run, defeating XSS protection.

This change appears unrelated to the stated goal of fixing table text selection styling and menu anchoring. The commit message says "drop unintended ui index.html change" but the file is still modified in the final diff.

Security: GTM rewrite uses innerHTML to inject executable script

📄 openmetadata-ui/src/main/resources/ui/index.html:109-119
The Google Tag Manager initialization was rewritten from a safe document.createElement('script') + src pattern to assigning a string of JavaScript to gtmTagScript.innerHTML and appending it. While the content is static and not user-controlled, this pattern:

  1. Is flagged by many security scanners and CSP policies ('unsafe-inline' would be required).
  2. Is a regression from the previous approach which set .src to load GTM externally — a cleaner and more CSP-friendly pattern.
  3. The previous code also correctly set the nonce on the dynamically created script (gtmScript.setAttribute('nonce', ...)), which this version loses.

Note: scripts injected via innerHTML on a <script> element that is then appended to the DOM do not execute in modern browsers. The innerHTML-assigned script content is typically ignored. The previous document.createElement('script') + .src approach was correct.

Options

Display: compact → Showing less information.

Comment with these commands to change:

Compact
gitar display:verbose         

Was this helpful? React with 👍 / 👎 | Gitar

@sonarqubecloud
Copy link
Copy Markdown

@hassaansaleem28
Copy link
Copy Markdown
Contributor Author

Hi @ShaileshParmar11, I have now updated the PR. All changes addressed and all tests are passing.
See Screencast from 2026-04-17 06-06-02.webm

Let me know if further changes are required!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

safe to test Add this label to run secure Github workflows on PRs

Projects

None yet

Development

Successfully merging this pull request may close these issues.

When selecting text in a table in the description it turns white.

5 participants