Skip to content

[Feature] HoverToolbar#455

Merged
csAyushDubey merged 14 commits intodevelop_v3from
VE-6600-Hover-Toolbar-Support
Jul 16, 2025
Merged

[Feature] HoverToolbar#455
csAyushDubey merged 14 commits intodevelop_v3from
VE-6600-Hover-Toolbar-Support

Conversation

@csAyushDubey
Copy link
Copy Markdown
Contributor

Title

This adds HoverToolbar feature support to SDK

Description

It does the following few things:

  • PostMessage communication channel between SDK and Builder
  • Toolbar rendering logic on element hover (debounced and throttled)
  • Referenced Data rendering on a separate hover Tooltip
  • Tooltip visibility logic with respect to field path dropdown
  • ContentType name on HoverToolbar
  • Added test cases for the change

SS

Screen.Recording.2025-07-10.at.12.00.42.PM.mov

@csAyushDubey csAyushDubey requested a review from a team as a code owner July 10, 2025 07:45
@github-actions
Copy link
Copy Markdown

github-actions Bot commented Jul 10, 2025

Coverage Report

Status Category Percentage Covered / Total
🔵 Lines 71.4% 8729 / 12225
🔵 Statements 71.4% 8729 / 12225
🔵 Functions 71.46% 313 / 438
🔵 Branches 84.03% 1100 / 1309
File Coverage
File Stmts Branches Functions Lines Uncovered Lines
Changed Files
src/__test__/utils.ts 82.75% 94.11% 66.66% 82.75% 11-12, 28-29, 31-32, 70-76, 89-90
src/visualBuilder/index.ts 57.14% 66.66% 42.85% 57.14% 96-103, 106-110, 113-125, 128-201, 207-239, 247-269, 320-323, 326-327
src/visualBuilder/visualBuilder.style.ts 100% 100% 100% 100%
src/visualBuilder/components/Tooltip.tsx 6.03% 50% 33.33% 6.03% 29-170, 176-182
src/visualBuilder/components/fieldLabelWrapper.tsx 80.37% 70% 80% 80.37% 45-47, 55-57, 140-151, 154-158, 216-217, 221-226, 230, 285-287, 293-311, 316-328
src/visualBuilder/components/icons/index.tsx 75.08% 94.11% 75% 75.08% 210-234, 286-312, 315-329, 332-344
src/visualBuilder/generators/generateToolbar.tsx 89.72% 86.66% 83.33% 89.72% 28-29, 87-92, 140-144, 186-187
src/visualBuilder/listeners/index.ts 93.05% 100% 100% 93.05% 44-46, 48-49
src/visualBuilder/listeners/mouseClick.ts 74.62% 80% 90.9% 74.62% 104-105, 108-113, 126-154, 180-181, 226, 284-290, 314-319, 328-334, 352-362
src/visualBuilder/listeners/mouseHover.ts 61.19% 50% 62.5% 61.19% 52-59, 76-77, 94-97, 127-137, 143-144, 151-154, 157-159, 165, 179-180, 189-201, 208-210, 212-252, 260-262, 264-266, 274-282, 285-289, 291, 293-295, 310-314, 336-339
src/visualBuilder/utils/handleIndividualFields.ts 98.34% 85.71% 100% 98.34% 92-93
src/visualBuilder/utils/types/postMessage.types.ts 100% 100% 100% 100%
Generated in workflow #463 for commit da638dd by the Vitest Coverage Report Action

<></>
),
isReference,
isEmbedded: false,
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

When do we set isEmbeded as true?

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

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

no was added when we were considering a different Icon for embeded entries, not needed now
Had removed it in a cleanup commit, missed to push that commit

visualBuilderPostMessage?.on<ReferenceMapPostMessageEventData>(
VisualBuilderPostMessageEvents.REFERENCE_MAP,
(event) => {
console.log("REFERENCE_MAP", event.data);
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

This is expected?

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

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

no not needed, pushed the cleanup commit

) as HTMLDivElement | null;
const { editableElement: targetElement, fieldMetadata } = eventDetails;

if (fieldLabelWrapper) {
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Suggested change
if (fieldLabelWrapper) {
if (fieldLabelWrapper && isHover){

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

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

Actually here I want to go in the if block if it is fieldLabelWrapper irrespective of if it is isHover, inside the if block I handle hover state and focus state differently
Suggested change would result in more that one focus toolbars

Comment on lines +55 to +57
export interface ReferenceMapPostMessageEventData {

} No newline at end of file
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Is this expected?

Copy link
Copy Markdown
Contributor Author

@csAyushDubey csAyushDubey Jul 15, 2025

Choose a reason for hiding this comment

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

no, part of the cleanup commit

Copy link
Copy Markdown
Contributor

@hiteshshetty-dev hiteshshetty-dev left a comment

Choose a reason for hiding this comment

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

LGTM!!

@csAyushDubey csAyushDubey merged commit 0d36fbc into develop_v3 Jul 16, 2025
10 of 11 checks passed
@csAyushDubey csAyushDubey deleted the VE-6600-Hover-Toolbar-Support branch July 16, 2025 06:19
csAdityaPachauri pushed a commit that referenced this pull request Jul 24, 2025
csAdityaPachauri pushed a commit that referenced this pull request Jul 24, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants