Add GitHub Pages workflow for UX deployment

[akiskips]

🛠️ Description

Added a new GitHub Actions workflow to automatically deploy the UX application to GitHub Pages. This workflow builds and deploys the web application whenever changes are pushed to the pages-action-ux branch or when manually triggered.

Changes

• Created new workflow file ux-pages.yml for GitHub Pages deployment
• Set up proper permissions for GitHub Pages deployment
• Configured workflow to:
  • Install dependencies
  • Build the application
  • Deploy to GitHub Pages environment
• Added concurrency settings to prevent concurrent deployments
• updated the vite.config.yml to set the base to /finops-toolkit/ branch
• updated the router basename configuration for GitHub Pages support
• Fixed an issue where the background image in the Showcase component wasn't loading properly in the production build. The problem was caused by an incorrect relative path reference to the image asset.

Implementation Details

• Uses Node.js 20 for the build process
• Builds from the web directory
• Uploads the built artifacts from dist
• Includes debugging step to list build output before deployment

Usage

Prequisite to run the workflow:

• Workflow yml file (under .github) needs to be merged to the main branch
• Github actions need to be activated and source set to "Github Actions". Go to settings->Pages
• Features/ux branch needs to be allowed to deploy at pages. Set from Settings->Environments-> Deployment branches and tags.

The workflow can be triggered by:

• Pushing to the features/ux branch
• Manually from the Actions tab in GitHub

The deployed site will be available at the URL provided in the workflow run output.

📷 Screenshots

📋 Checklist

🔬 How did you test this change?

• 🤏 Lint tests
• 🤞 PS -WhatIf / az validate
• 👍 Manually deployed + verified
• 💪 Unit tests
• 🙌 Integration tests

• 🚨 This is a breaking change.
• 🤏 The change is less than 20 lines of code.

📑 Did you update docs/changelog.md?

• ✅ Updated changelog (required for dev PRs)
• ➡️ Will add log in a future PR (feature branch PRs only)
• ❎ Log not needed (small/internal change)

📖 Did you update documentation?

• ✅ Public docs in docs (required for dev)
• ✅ Internal dev docs in src (required for dev)
• ➡️ Will add docs in a future PR (feature branch PRs only)
• ❎ Docs not needed (small/internal change)

[Copilot]

Pull Request Overview

This PR adds a GitHub Pages deployment workflow for the UX application and adjusts configuration settings for correct deployment routing.

• Introduces a new GitHub Actions workflow file for GitHub Pages deployment
• Updates Vite and Router configurations to support the GitHub Pages base path
• Fixes an issue with the relative path for the background image in production

Reviewed Changes

Copilot reviewed 7 out of 7 changed files in this pull request and generated no comments.

File	Description
src/web/vite.config.ts	Sets the base path conditionally for production builds
.github/workflows/ux-pages.yml	Defines a workflow to build and deploy the UX application to GitHub Pages
src/web/pages/App.tsx	Adjusts Router basename configuration for GitHub Pages compatibility
src/web/components/tests/SideBar.test.tsx	Adds testing-library/jest-dom import for improved assertions

Comments suppressed due to low confidence (1)

src/web/pages/App.tsx:21

• There is an inconsistency between the base path in vite.config.ts ('/finops-toolkit/') and the Router basename in App.tsx ('/finops-toolkit'). To ensure consistent routing, consider aligning them (e.g., include the trailing slash in both).

<Router basename={window.location.hostname === 'localhost' ? '/' : '/finops-toolkit'}>

[flanakin]

@Ivanmtta can you please review?