fix: render popover template content

[danish9039]

Problem

PopoverDirective creates and attaches the overlay component before assigning its message or template portal. A deferred markForCheck() does not render newly assigned content before the dynamically attached card becomes visible, so the date-time popover can appear empty.

Change

• Perform an immediate overlay view check in show() after assigning the message, template portal, and classes.
• Keep updatePosition() on deferred markForCheck() so dynamic string-input updates do not trigger synchronous change detection during the parent check.
• Register one afterHidden() subscription with take(1) per attached popover instance so rapid re-entry cannot accumulate duplicate detach callbacks.
• Add regression coverage for repeated date-time template hovers, rendering and updating a string-message popover while shown, and rapid re-entry before a pending hide completes.
• Verify that leaving removes the overlay pane.

Red-green evidence

With the original behavior, the date-time regression test fails because the overlay text is empty. With the immediate view check in show(), Local and UTC values render across repeated hover cycles, while dynamic string messages also render and update correctly. The rapid re-entry test fails with two detach() calls before the lifecycle correction and passes with one subscription per popover instance.

Verification

• npm run format:check
• npm run lint-check
• npm run test:prod (63 tests passed)
• npm run build

Fixes #1252

[google-oss-prow]

[APPROVALNOTIFIER] This PR is NOT APPROVED

This pull-request has been approved by:
Once this PR has been reviewed and has the lgtm label, please assign thesuperzapper for approval. For more information see the Kubernetes Code Review Process.

The full list of commands accepted by this bot can be found here.

Details

Needs approval from an approver in each of these files:

• components/crud-web-apps/OWNERS

Approvers can indicate their approval by writing /approve in a comment
Approvers can cancel approval by writing /approve cancel in a comment

[danish9039]

@juliusvonkohout @christian-heusel @thesuperzapper

[danish9039]

Before, we were having empty white cards when hovering on links, look after 39 seconds

evidence.mp4

After fix

Screencast.from.2026-07-16.18-34-50.webm

[Copilot]

Pull request overview

This PR fixes an Angular CDK overlay timing issue where PopoverDirective could show an empty popover when content (string message or TemplatePortal) is assigned after the overlay component is attached, and adds regression tests to prevent recurrence (notably for the date-time popover use case in #1252).

Changes:

• Force an immediate change-detection pass for the dynamically attached popover component during show() so newly assigned message/template content renders before the popover becomes visible.
• Expose a detectChanges() helper on PopoverComponent to support the above.
• Add regression tests for: (a) updating a string-message popover while it is shown, and (b) repeated date-time template hovers without overlay accumulation.

Reviewed changes

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

File	Description
components/crud-web-apps/common/frontend/kubeflow-common-lib/projects/kubeflow/src/lib/popover/popover.directive.ts	Triggers synchronous change detection after assigning message/template/class to ensure content is rendered before visibility changes.
components/crud-web-apps/common/frontend/kubeflow-common-lib/projects/kubeflow/src/lib/popover/popover.component.ts	Adds a detectChanges() wrapper on the component’s ChangeDetectorRef.
components/crud-web-apps/common/frontend/kubeflow-common-lib/projects/kubeflow/src/lib/popover/popover.directive.spec.ts	New test covering rendering + updating string popover content while shown and verifying overlay pane removal.
components/crud-web-apps/common/frontend/kubeflow-common-lib/projects/kubeflow/src/lib/date-time/date-time.component.spec.ts	Adds repeated-hover regression coverage for date-time template popovers and verifies overlays are not accumulated.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[danish9039]

Moved the one-shot afterHidden() subscription into createPopover() and added a rapid re-entry regression test that verifies each popover instance detaches exactly once.

[danish9039]

/retest

[christian-heusel]

/cc @paulovmr @thaorell
for the needed frontend knowledge

[christian-heusel]

Thanks a lot for your contribution! 🤗

Did you use AI in any capacity while creating these changes? I see that your commits do not carry any Assisted-By: <...> / Co-authored-by: <...> tags, so I wanted to make sure that you're aware of the Kubeflow AI Policy. 🤗 🤖