UVE: Visual anomaly when trying to edit disallowed external pages

dcolina commented 1 week ago

Parent Issue

No parent issue identified.

Problem Statement

When the allowedDevURLs configuration is not set, any access to an external page using the clientHost URL parameter should be denied, and the user should remain on the main page without any additional actions. However, an anomaly occurs: when attempting to access an external page not permitted (due to devURLWhitelist being unset), the main page appears with a semi-transparent modal, giving the impression that something went wrong. Refreshing the page restores normal appearance, but this visual issue impacts user experience.

Steps to Reproduce

Ensure the allowedDevURLs configuration is not set.
Open the dotCMS instance using the Docker image dotcms/dotcms:nightly_f21795e.
Use Firefox to access the instance.
Attempt to edit an external page using the clientHost URL parameter.
Observe the behavior when the page access is denied.

Acceptance Criteria

If the allowedDevURLs is not configured, any access attempt to an external page via the clientHost parameter should:
- Deny the access cleanly by keeping the user on the main page.
- Ensure there are no visual anomalies (e.g., no semi-transparent modal).
- Maintain a consistent user experience without requiring a page refresh.

dotCMS Version

Tested with Docker image dotcms/dotcms:nightly_f21795e.

Proposed Objective

User Experience

Proposed Priority

Priority 2 - Important

External Links... Slack Conversations, Support Tickets, Figma Designs, etc.

Attached video showing the sequence of events leading to the issue.

https://github.com/user-attachments/assets/22778a68-20bf-48b7-90e1-9bbbf65da8b7

Assumptions & Initiation Needs

Ensure that the devURLWhitelist is unset or not configured for testing.
Confirm that the environment is properly set up with the specified Docker image and Firefox.

Quality Assurance Notes & Workarounds

There is no workaround at the moment; the visual anomaly occurs when access to a non-permitted page is attempted. Refreshing the page temporarily restores normal appearance, but this is not an ideal user experience.

Sub-Tasks & Estimates

[ ] Investigate the cause of the semi-transparent modal when an unauthorized page access is attempted.
[ ] Implement a fix to prevent visual anomalies and ensure consistent behavior.
[ ] Test the fix across all supported browsers: Chrome, Firefox, and Edge.

dcolina commented 1 week ago

valentinogiardino commented 1 week ago

Observation:

This issue is also occurring even when the allowedDevURLs configuration is set. Specifically, it happens when the clientHost URL parameter is set to the same value as the fallback URL

https://github.com/user-attachments/assets/f0e31a84-4718-4bd5-a4bc-f6120f091f3b

nollymar commented 1 week ago

Note to QA: Please, additionally test cases # 12 & 34 of the Regression Tests spreadsheet

dotCMS / core