Feature/issue 92

[sliu008]

This pull request introduces a major user-facing update by adding a prominent decommissioning banner to the application, alerting users about the upcoming retirement of the HiTIDE GUI. It also updates the Earthdata application client ID in both SIT and UAT configuration files, and includes a minor CSS adjustment related to the navigation sidebar.

User Interface Updates:

• Added a fixed, dismissible banner at the top of the page (infoBanner) in src/index.html to inform users about the upcoming decommissioning of the HiTIDE GUI and transition to the Earthdata Search HiTIDE portal. Includes inline styling and a close button with associated JavaScript for dismissing the banner and resetting the sidebar margin. [1] [2]
• Updated the #navSidebar CSS in App.css to add a top margin, ensuring the sidebar does not overlap with the new banner.

Configuration Changes:

• Updated the earthDataAppClientId value in both hitideConfig-sit.js and hitideConfig-uat.js to a new client ID. [1] [2]

Documentation:

• Updated the CHANGELOG.md to document the addition of the decommissioning banner and the application ID update.

[Copilot]

Pull Request Overview

This pull request adds a prominent decommissioning banner to inform users about the upcoming retirement of the HiTIDE GUI and the transition to Earthdata Search HiTIDE portal. It also updates the Earthdata application client ID across SIT and UAT environments.

Key Changes:

• Added a fixed, dismissible banner at the top of the page with decommissioning information and a link to the new portal
• Updated Earthdata application client IDs in both SIT and UAT configuration files
• Adjusted sidebar styling to accommodate the new banner

Reviewed Changes

Copilot reviewed 5 out of 5 changed files in this pull request and generated 4 comments.

Show a summary per file

File	Description
src/index.html	Added dismissible decommissioning banner with inline styling and JavaScript for banner dismissal
src/app/resources/App.css	Added top margin to navigation sidebar to prevent overlap with banner
configs/hitideConfig-uat.js	Updated earthDataAppClientId to new client ID
configs/hitideConfig-sit.js	Updated earthDataAppClientId to new client ID
CHANGELOG.md	Documented banner addition and application ID update

---

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

[Copilot]

Inline onclick handler is duplicated with the JavaScript code below (lines 79-84) which attempts to override it. Remove the inline onclick attribute and rely solely on the addEventListener approach in the script block for better maintainability and consistency.

Suggested change

	<span onclick="var b=document.getElementById('infoBanner'); b.style.opacity='0'; setTimeout(()=>b.style.display='none',300);" style="position:absolute;right:18px;top:12px;cursor:pointer;font-size:1.5em;line-height:1;color:#fff;">&times;</span>
	<span style="position:absolute;right:18px;top:12px;cursor:pointer;font-size:1.5em;line-height:1;color:#fff;">&times;</span>

[Copilot]

The script assigns a function to onclick property but the inline onclick handler (line 38) will take precedence, preventing this code from executing. Additionally, the navSidebar margin reset logic won't trigger since this function never runs. Remove the inline onclick attribute to allow this event handler to work properly.

[Copilot]

[nitpick] Extensive inline styling should be moved to a CSS class for better maintainability and separation of concerns. Consider creating a dedicated CSS class in App.css for the banner styles.

[Copilot]

The close button lacks proper accessibility attributes. Add role='button', aria-label='Close banner', and tabindex='0' to make it keyboard accessible and screen reader friendly. Also ensure keyboard events (onkeydown) are handled for Enter/Space keys.

Suggested change

	<span onclick="var b=document.getElementById('infoBanner'); b.style.opacity='0'; setTimeout(()=>b.style.display='none',300);" style="position:absolute;right:18px;top:12px;cursor:pointer;font-size:1.5em;line-height:1;color:#fff;">&times;</span>
	<span
	role="button"
	aria-label="Close banner"
	tabindex="0"
	onclick="var b=document.getElementById('infoBanner'); b.style.opacity='0'; setTimeout(()=>b.style.display='none',300);"
	onkeydown="if(event.key==='Enter'||event.key===' '){var b=document.getElementById('infoBanner'); b.style.opacity='0'; setTimeout(()=>b.style.display='none',300); event.preventDefault();}"
	style="position:absolute;right:18px;top:12px;cursor:pointer;font-size:1.5em;line-height:1;color:#fff;"
	>&times;</span>