fix(navbar): prevent undefined cloud profile URLs#962
fix(navbar): prevent undefined cloud profile URLs#962
Conversation
Avoid building Cloud avatar and profile URLs from missing profile fields so authenticated visitors do not trigger requests to /cloud/undefined. Fixes #961 Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> Signed-off-by: Lee Calcote <lee.calcote@layer5.io>
There was a problem hiding this comment.
Pull request overview
This PR updates the docs site navbar’s Cloud-authenticated user UI to avoid generating invalid/relative URLs (notably /cloud/undefined) when the profile payload is missing expected fields.
Changes:
- Adds a
cloudAppUrlconstant and uses it to build the Cloud profile API request URL. - Introduces helpers to safely derive
avatar_urland the user profile link, with fallbacks when missing. - Updates the authenticated navbar UI to avoid setting a background image when no avatar URL is present, and to fall back to the Cloud home page when no user ID is available.
|
🚀 Preview deployment: https://layer5io.github.io/docs/pr-preview/pr-962/
|
There was a problem hiding this comment.
Code Review
This pull request refactors the navbar's user profile logic by centralizing the base URL and introducing helper functions for avatar and profile URL generation. The review feedback suggests further improvements, including using Hugo variables for the base URL to reduce duplication, adopting optional chaining for more idiomatic JavaScript, and adding safety checks for DOM elements to prevent potential runtime errors.
| cur.href = "javascript: void(0)"; | ||
| } | ||
|
|
||
| const cloudAppUrl = "https://cloud.layer5.io"; |
There was a problem hiding this comment.
The URL https://cloud.layer5.io is hardcoded in multiple places within this file (lines 189, 192, and 263). Since this is a Hugo template, it is recommended to define this URL as a single variable (e.g., using a Hugo variable or a Site parameter) to ensure consistency and simplify future updates.
There was a problem hiding this comment.
Consolidated the Cloud base URL into shared Hugo variables in this partial so the sign-in, profile, and academy links all derive from one source.
| if (response && response.id !== undefined && response.id !== null && response.id !== "") { | ||
| return `${cloudAppUrl}/user/${encodeURIComponent(response.id)}`; | ||
| } |
There was a problem hiding this comment.
This condition is quite verbose. Using optional chaining and a truthiness check is more idiomatic in modern JavaScript and effectively covers null, undefined, and empty strings for the id field.
| if (response && response.id !== undefined && response.id !== null && response.id !== "") { | |
| return `${cloudAppUrl}/user/${encodeURIComponent(response.id)}`; | |
| } | |
| const userId = response?.id; | |
| if (userId) { | |
| return cloudAppUrl + "/user/" + encodeURIComponent(userId); | |
| } |
There was a problem hiding this comment.
Updated the helper to use an idiomatic optional-chaining check for the user ID before building the profile URL.
| const avatarContainer = document.querySelector('.avatar-container'); | ||
| avatarContainer.style.backgroundImage = avatarUrl ? `url("${avatarUrl}")` : "none"; | ||
| avatarContainer.style.backgroundSize = avatarUrl ? "cover" : ""; |
There was a problem hiding this comment.
It is safer to verify that avatarContainer exists before attempting to modify its style properties. If the element is missing from the DOM, this script will throw a TypeError, which could prevent subsequent logic (like setting isUserAuthenticated) from executing.
| const avatarContainer = document.querySelector('.avatar-container'); | |
| avatarContainer.style.backgroundImage = avatarUrl ? `url("${avatarUrl}")` : "none"; | |
| avatarContainer.style.backgroundSize = avatarUrl ? "cover" : ""; | |
| const avatarContainer = document.querySelector('.avatar-container'); | |
| if (avatarContainer) { | |
| avatarContainer.style.backgroundImage = avatarUrl ? "url(\"" + avatarUrl + "\")" : "none"; | |
| avatarContainer.style.backgroundSize = avatarUrl ? "cover" : ""; | |
| } |
There was a problem hiding this comment.
Added a guard around the avatar container before setting its styles so the auth UI does not throw if that element is absent.
Use shared Hugo variables for Cloud URLs in the navbar so sign-in, profile, and academy links stay consistent while preserving the undefined-path fix. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> Signed-off-by: Lee Calcote <lee.calcote@layer5.io>
Simplify the profile URL fallback logic and avoid touching avatar styles when the navbar avatar element is absent. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> Signed-off-by: Lee Calcote <lee.calcote@layer5.io>
Summary
Related Issue
Fixes #961