Skip to content

Conversation

Younique98
Copy link
Contributor

@Younique98 Younique98 commented Sep 16, 2025

πŸ”— Relevant links

πŸ—’οΈ What

This PR merges the et/sandbox-feature-release branch into main, delivering a comprehensive set of features, refactors, and improvements, including:

Co-Authored: @im2nguyen

  • Multi-lab and Multi-product Sandbox Support:

    • Adds support for multiple labs per playground and product, with improved navigation and configuration.
    • Product-specific sandbox pages and navigation, including robust handling of lab IDs and Instruqt track paths.
    • Persistent embedded terminal across navigation, with improved error handling and user experience.
    • Enhanced sandbox authoring documentation and validation schema for lab configuration and tokens.
  • UI/UX and Accessibility Enhancements:

    • Refactors and improves the sandbox/playground dropdowns, cards, and resource navigation.
    • Adds product-specific labels, improved copy, and consistent styling for sandbox-related UI.
    • Improves loading, error, and retry states for lab embeds, with better accessibility and mobile support.
    • Refactors and reuses shared components for sandbox and tutorial card grids.
  • Analytics and Tracking Improvements:

    • Refactors PostHog event tracking to use enums and robust guards, ensuring events are only sent when PostHog is available.
    • Consolidates and improves tracking for sandbox and video events.
    • Adds error tracking for lab embed and context errors, with user-friendly messages and developer logging.
  • Code Quality, Testing, and Infrastructure:

    • Refactors for clarity, maintainability, and robustness across sandbox, embed, and context logic.
    • Adds and improves test coverage for lab embed, error boundaries, and UI components.
    • Updates dependencies, type definitions, and CI workflows for reliability and compatibility.
    • Removes deprecated patterns (e.g., InteractiveLabWrapper) and cleans up unused or redundant code.
  • Bug Fixes and Stability:

    • Fixes for playground and tutorial lab loading, configuration, and navigation.
    • Improved error boundaries and fallback UI for MDX alerts and sandbox errors.
    • Addresses build errors, test flakiness, and edge cases in embed and navigation logic.

🀷 Why

  • To deliver a robust, flexible, and user-friendly sandbox experience across all supported products.
  • To ensure analytics and error tracking are reliable and actionable for both product and engineering teams.
  • To align with new architectural and design patterns, and to keep the codebase clean and maintainable.
  • To address bugs, improve test reliability, and support future feature development.

πŸ› οΈ How

  • Extensive refactoring, test additions, and dependency updates.
  • Manual and automated testing to ensure stability and correctness.

πŸ“Έ Design Screenshots

Screen.Recording.2025-09-19.at.12.29.44.PM.mov

πŸ§ͺ Testing

  • Verify all sandbox and playground features work as expected for all products.
  • Confirm analytics events (sandbox, video, error) are tracked in PostHog.
  • Check that embedded terminals persist and function across navigation.
  • Validate all new and updated documentation renders correctly.
  • Run all automated tests and confirm they pass.
  • Review UI for regressions or inconsistencies.

πŸ’­ Anything else?

@Younique98 Younique98 requested a review from a team as a code owner September 16, 2025 15:41
Copy link

vercel bot commented Sep 16, 2025

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Preview Comments Updated (UTC)
dev-portal Ready Ready Preview Comment Oct 2, 2025 1:36pm

Copy link

github-actions bot commented Sep 16, 2025

πŸ“¦ Next.js Bundle Analysis

This analysis was generated by the next.js bundle analysis action πŸ€–

⚠️ Global Bundle Size Increased

Page Size (compressed)
global 300.31 KB (🟑 +51.29 KB)
Details

The global bundle is the javascript bundle that loads alongside every page. It is in its own category because its impact is much higher - an increase to its size means that every page on your website loads slower, and a decrease means every page loads faster.

Any third party scripts you have added directly to your app using the <script> tag are not accounted for in this analysis

If you want further insight into what is behind the changes, give @next/bundle-analyzer a try!

New Page Added

The following page was added to the bundle from the code in this PR:

Page Size (compressed) First Load
/[productSlug]/sandbox 179.7Β KB 480.01Β KB

Ninety-eight Pages Changed Size

The following pages changed size from the code in this PR compared to its base branch:

Page Size (compressed) First Load
/ 135.71 KB (🟑 +2.53 KB) 436.02 KB
/404 115.97 KB (🟑 +2.54 KB) 416.28 KB
/500 115.97 KB (🟑 +2.54 KB) 416.28 KB
/[productSlug]/docs 188.15 KB (🟑 +1.2 KB) 488.46 KB
/[productSlug]/integrations 146.77 KB (🟑 +2.61 KB) 447.08 KB
/[productSlug]/integrations/[organizationSlug]/[integrationSlug] 170.72 KB (🟑 +3.19 KB) 471.03 KB
/[productSlug]/integrations/[organizationSlug]/[integrationSlug]/[integrationVersion] 170.72 KB (🟑 +3.19 KB) 471.03 KB
/[productSlug]/integrations/[organizationSlug]/[integrationSlug]/[integrationVersion]/components/[componentType]/[componentSlug] 180.41 KB (🟑 +3.19 KB) 480.72 KB
/[productSlug]/tutorials 150.15 KB (🟑 +2.59 KB) 450.46 KB
/[productSlug]/tutorials/[...tutorialSlug] 231.67 KB (🟑 +2.38 KB) 531.98 KB
/[productSlug]/tutorials/[collectionSlug] 197.15 KB (🟑 +3.19 KB) 497.46 KB
/_error 116 KB (🟑 +2.53 KB) 416.31 KB
/boundary 160.32 KB (🟑 +2.6 KB) 460.63 KB
/boundary/api-docs/[[...page]] 162.66 KB (🟑 +3.19 KB) 462.97 KB
/boundary/docs/[...page] 182.36 KB (🟑 +974 B) 482.67 KB
/boundary/install 179.49 KB (🟑 +2.59 KB) 479.8 KB
/certifications 177.03 KB (🟑 +3.13 KB) 477.34 KB
/certifications/[slug] 177.68 KB (🟑 +3.13 KB) 477.99 KB
/certifications/signin 176.93 KB (🟑 +3.13 KB) 477.24 KB
/consul 160.32 KB (🟑 +2.59 KB) 460.63 KB
/consul/api-docs/[[...page]] 182.37 KB (🟑 +976 B) 482.68 KB
/consul/commands/[[...page]] 182.37 KB (🟑 +975 B) 482.68 KB
/consul/docs/[...page] 182.36 KB (🟑 +975 B) 482.67 KB
/consul/install 172.97 KB (🟑 +2.6 KB) 473.28 KB
/consul/install/enterprise 173 KB (🟑 +2.59 KB) 473.31 KB
/hcp 160.32 KB (🟑 +2.59 KB) 460.63 KB
/hcp/api-docs/consul/[[...page]] 160.12 KB (🟑 +3.19 KB) 460.43 KB
/hcp/api-docs/hvn/[[...page]] 160.11 KB (🟑 +3.19 KB) 460.42 KB
/hcp/api-docs/identity/[[...page]] 160.12 KB (🟑 +3.19 KB) 460.43 KB
/hcp/api-docs/operations/[[...page]] 160.12 KB (🟑 +3.19 KB) 460.43 KB
/hcp/api-docs/packer/[[...page]] 160.12 KB (🟑 +3.19 KB) 460.43 KB
/hcp/api-docs/rbac/[[...page]] 160.12 KB (🟑 +3.19 KB) 460.43 KB
/hcp/api-docs/vagrant-box-registry/[[...page]] 160.13 KB (🟑 +3.19 KB) 460.44 KB
/hcp/api-docs/vault-secrets/[[...page]] 158.42 KB (🟑 +3.19 KB) 458.73 KB
/hcp/api-docs/vault/[[...page]] 158.42 KB (🟑 +3.19 KB) 458.73 KB
/hcp/api-docs/waypoint/[[...page]] 160.12 KB (🟑 +3.19 KB) 460.43 KB
/hcp/api-docs/webhook/[[...page]] 160.12 KB (🟑 +3.19 KB) 460.43 KB
/hcp/docs/[...page] 182.36 KB (🟑 +977 B) 482.67 KB
/nomad 160.32 KB (🟑 +2.59 KB) 460.63 KB
/nomad/api-docs/[[...page]] 182.37 KB (🟑 +975 B) 482.68 KB
/nomad/commands/[[...page]] 182.37 KB (🟑 +976 B) 482.68 KB
/nomad/docs/[...page] 182.36 KB (🟑 +975 B) 482.67 KB
/nomad/install 172.45 KB (🟑 +2.59 KB) 472.76 KB
/nomad/install/enterprise 172.43 KB (🟑 +2.59 KB) 472.74 KB
/nomad/plugins/[[...page]] 182.37 KB (🟑 +975 B) 482.68 KB
/nomad/tools/[[...page]] 182.37 KB (🟑 +976 B) 482.68 KB
/open-api-docs-preview 164.21 KB (🟑 +3.19 KB) 464.52 KB
/open-api-docs-preview-v2/[[...page]] 163.01 KB (🟑 +3.19 KB) 463.32 KB
/packer 160.32 KB (🟑 +2.59 KB) 460.63 KB
/packer/docs/[...page] 182.36 KB (🟑 +980 B) 482.67 KB
/packer/guides/[[...page]] 182.37 KB (🟑 +977 B) 482.68 KB
/packer/install 172.43 KB (🟑 +2.59 KB) 472.74 KB
/profile/account 136.19 KB (🟑 +2.59 KB) 436.5 KB
/profile/bookmarks 137.21 KB (🟑 +2.6 KB) 437.52 KB
/sentinel 160.32 KB (🟑 +2.59 KB) 460.63 KB
/sentinel/docs/[...page] 182.36 KB (🟑 +976 B) 482.67 KB
/sentinel/install 172.43 KB (🟑 +2.59 KB) 472.74 KB
/terraform 160.32 KB (🟑 +2.6 KB) 460.63 KB
/terraform/cdktf/[[...page]] 182.37 KB (🟑 +975 B) 482.68 KB
/terraform/cli/[[...page]] 182.37 KB (🟑 +974 B) 482.68 KB
/terraform/cloud-docs/[[...page]] 182.37 KB (🟑 +971 B) 482.68 KB
/terraform/cloud-docs/agents/[[...page]] 182.38 KB (🟑 +973 B) 482.68 KB
/terraform/docs/[...page] 182.36 KB (🟑 +972 B) 482.67 KB
/terraform/enterprise/[[...page]] 182.37 KB (🟑 +971 B) 482.68 KB
/terraform/install 172.43 KB (🟑 +2.59 KB) 472.74 KB
/terraform/internals/[[...page]] 182.37 KB (🟑 +975 B) 482.68 KB
/terraform/intro/[[...page]] 182.37 KB (🟑 +973 B) 482.68 KB
/terraform/language/[[...page]] 182.37 KB (🟑 +974 B) 482.68 KB
/terraform/migrate/[[...page]] 182.37 KB (🟑 +973 B) 482.68 KB
/terraform/plugin/[[...page]] 182.37 KB (🟑 +973 B) 482.68 KB
/terraform/plugin/framework/[[...page]] 182.38 KB (🟑 +973 B) 482.68 KB
/terraform/plugin/log/[[...page]] 182.37 KB (🟑 +973 B) 482.68 KB
/terraform/plugin/mux/[[...page]] 182.37 KB (🟑 +973 B) 482.68 KB
/terraform/plugin/sdkv2/[[...page]] 182.37 KB (🟑 +971 B) 482.68 KB
/terraform/plugin/testing/[[...page]] 182.37 KB (🟑 +973 B) 482.68 KB
/terraform/registry/[[...page]] 182.37 KB (🟑 +974 B) 482.68 KB
/tutorials 127.39 KB (🟑 +2.54 KB) 427.7 KB
/tutorials/library 149.01 KB (🟑 +2.59 KB) 449.32 KB
/vagrant 160.32 KB (🟑 +2.59 KB) 460.63 KB
/vagrant/docs/[...page] 182.36 KB (🟑 +974 B) 482.67 KB
/vagrant/install 172.93 KB (🟑 +2.59 KB) 473.24 KB
/vagrant/install/vmware 172.43 KB (🟑 +2.6 KB) 472.74 KB
/vagrant/intro/[[...page]] 182.37 KB (🟑 +975 B) 482.68 KB
/vagrant/vagrant-cloud/[[...page]] 182.37 KB (🟑 +975 B) 482.68 KB
/validated-designs 122.49 KB (🟑 +2.53 KB) 422.8 KB
/validated-designs/[...slug] 177.66 KB (🟑 +805 B) 477.97 KB
/validated-patterns 152.93 KB (🟑 +2.59 KB) 453.24 KB
/validated-patterns/[...tutorialSlug] 191.43 KB (🟑 +2.08 KB) 491.74 KB
/validated-patterns/[collectionSlug] 137.52 KB (🟑 +2.59 KB) 437.83 KB
/vault 160.32 KB (🟑 +2.59 KB) 460.63 KB
/vault/api-docs/[[...page]] 182.37 KB (🟑 +976 B) 482.68 KB
/vault/docs/[...page] 182.36 KB (🟑 +974 B) 482.67 KB
/vault/install 172.42 KB (🟑 +2.59 KB) 472.73 KB
/vault/install/enterprise 172.43 KB (🟑 +2.59 KB) 472.74 KB
/waypoint 160.32 KB (🟑 +2.6 KB) 460.63 KB
/waypoint/docs/[...page] 182.36 KB (🟑 +973 B) 482.67 KB
/well-architected-framework 175.58 KB (🟑 +3.78 KB) 475.89 KB
/well-architected-framework/[...page] 182.38 KB (🟑 +975 B) 482.69 KB
Details

Only the gzipped size is provided here based on an expert tip.

First Load is the size of the global bundle plus the bundle for the individual page. If a user were to show up to your website and land on a given page, the first load size represents the amount of javascript that user would need to download. If next/link is used, subsequent page loads would only need to download that page's bundle (the number in the "Size" column), since the global bundle has already been downloaded.

Any third party scripts you have added directly to your app using the <script> tag are not accounted for in this analysis

Next to the size is how much the size has increased or decreased compared with the base branch of this PR. If this percentage has increased by 20% or more, there will be a red status indicator applied, indicating that special attention should be given to this.

im2nguyen and others added 26 commits September 30, 2025 11:58
Improves the lab embed component with enhanced error handling, loading states, and accessibility features.

This commit introduces:
- A loading state with a spinner and informative text
- An error state with retry functionality and user-friendly messages
- Comprehensive testing to cover rendering, state transitions, edge cases, and accessibility
- Improved state management using `useState` and `useCallback` for better performance
- Mobile device support for the resizable panel

The changes also include validation of the sandbox configuration to prevent runtime errors due to configuration issues.

 improved error handling and simplified logic.

This change improves code readability and maintainability, and enables a more declarative approach to rendering the fallback UI.

update for consistency and readability.

This improves code readability and maintainability.

Improves lab embed element resilience

Enhances the Instruqt lab embed element by improving error handling and retry logic.

This change implements a retry mechanism with a maximum of 3 attempts to address intermittent loading failures, enhancing the user experience.

Also provides more informative error messages and screen reader announcements.

Enhances Instruqt embed tests and context

Refactors the Instruqt embed tests and context for improved clarity and reliability.
This includes streamlining mock setups, enhancing test coverage for error and retry states,
and improving localStorage persistence.

Improves sandbox lab embedding and configuration

Enhances the Instruqt lab embedding process by adding a loading delay and retry mechanism for smoother initial loading.

Updates the sandbox configuration to use separate `labId` (unique identifier) and `instruqtTrack` (track path) properties for more flexibility and clarity. Introduces a utility function to build the complete lab ID, including tokens and parameters, ensuring proper configuration for embedding.

Also fixes minor UI and accessibility issues related to resizing and keyboard support for the lab panel.

Enhances Instruqt lab embed usability

Improves the resizer component by preventing unwanted CSS transitions, providing a smoother user experience.

Enhances keyboard accessibility for resizing.

Improves the resilience of the Instruqt lab context by handling potential storage corruption and access issues, such as in private browsing or when storage is full/disabled, allowing the app to continue without persistence.

Allows for overriding default sandbox tokens via environment variables.

Enhances lab embed loading and responsiveness

Improves the perceived performance of lab embed loading by reducing initial delays and implementing a smoother fade-in transition.

The timeout delays for initial readiness and iframe source setting are reduced for faster response.
The iframe flicker is reduced by using opacity transitions instead of visibility changes.
Subtle visual feedback is added to the resizer component on hover.

Improves Instruqt embed loading and error handling

Refactors the Instruqt embed component to improve loading speed and error handling.

Removes unnecessary delays and opacity manipulations that caused flickering during iframe loading, resulting in a smoother user experience.

Improves the display of loading and error states by ensuring they cover the entire embed area.

Simplifies the iframe reloading logic by directly setting the `src` attribute.

Adds error boundary to MDX alert component

Wraps the `MdxInlineAlert` component with an error boundary.

This change prevents the component from crashing the entire page when it encounters an error, such as invalid props or missing children. Instead, it renders a fallback UI, improving the user experience and providing more graceful error handling.

Includes tests for the error boundary component and updates existing tests for the alert component to verify the fallback UI is rendered when errors occur.

Also includes configuration validation to prevent the sandbox from initializing with invalid configurations, and displays these errors in the UI.

Adds enhanced error boundary component

Implements a more robust error boundary with improved fallback UI, reset capabilities, and context sharing.

This allows for better error handling and recovery in React applications. It provides mechanisms for resetting the error state and sharing error handling logic across components.

Enhances MdxInlineAlert component robustness

Improves the MdxInlineAlert component by adding specific tests to handle cases where the children prop is empty or the type prop is invalid. This ensures that the component gracefully handles these scenarios by rendering an error fallback instead of throwing an error, enhancing the component's overall robustness and user experience. Also adds test case for rendering multiple children.

Simplifies MdxInlineAlert tests

Removes unnecessary comments in MdxInlineAlert tests, improving readability and maintainability.

Removes redundant validation error logging

Simplifies the error handling within the MdxInlineAlert component by removing redundant logging of validation errors, streamlining the error reporting process.

Adds error tracking for MdxInlineAlert

Improves error handling for the MdxInlineAlert component by adding error tracking via PostHog and enhanced console logging in development environments. This provides better visibility into component errors and aids in debugging.

Improves lab embed UX and stability

Refactors the lab embed component for improved user experience and stability.

Simplifies iframe loading and error handling to prevent flickering and race conditions.

Enhances resizing behavior on mobile devices.

Updates testing suite.

Adds Instruqt context error tracking

Implements error tracking for the Instruqt context using PostHog and console logging.

This enhances debugging and monitoring of issues related to sandbox configuration, storage, and lab operations by:
- Capturing specific error types, messages, and relevant context.
- Logging errors in the console for development environments.
- Adding checks before opening labs, and improving error messages.

Enhances Instruqt sandbox error tracking

Improves error handling and reporting within the Instruqt sandbox context and sandbox page.

- Introduces a centralized error tracking function that captures errors and warnings in PostHog and development console.
- Implements error tracking for configuration validation, storage operations, lab loading failures, and documentation rendering.
- Displays user-friendly toast messages for critical sandbox errors, improving user experience.

This enhancement allows for better monitoring and debugging of sandbox-related issues.
Ensures navigation to the product sandbox page when a lab's primary product differs from the current page.

This prevents errors and improves user experience by directing users to the relevant product context.
Simplifies resize listener management by directly adding and removing listeners within the `enableResize` and cleanup effect.

This change eliminates the need for separate `addListeners` and `removeListeners` useCallback functions, reducing code complexity and improving readability.
Updates the @types/node dependency to the latest version.

This change ensures that the project benefits from the latest type definitions for Node.js, providing better type safety and compatibility with newer Node.js features.
Updates the import statement for `unist-util-visit` to use the default import syntax. This aligns with common usage and potentially improves compatibility.
Ensures the latest npm version is used in CI workflows.
This can help avoid potential issues caused by outdated npm versions.
NavBar and SideBar are now utilizing the same functionality so developer has to update the token and url's in one location versus multiple.
Refactors sandbox lab ID handling to support both simple lab IDs (for direct launch) and full Instruqt track paths (for embedded scenarios).
This allows launching sandboxes from different contexts
and ensures the correct lab is launched based on the available information.

Updates the sandbox configuration to use the track name to retrieve the correct token and start the correct lab.
Adds `.env` to `.gitignore` file.
Simplifies Instruqt token retrieval by directly assigning default values.

This eliminates the dependency on environment variables for these tokens, streamlining the configuration process and making it more predictable.
Adds a document explaining how to update sandbox configurations and tokens.

This guide outlines the locations for updating track paths, scenarios, and tokens for the HashiCorp sandbox environments within the dev-portal project.
- Move tokens from config/base.json into sandbox.json instruqtTrack URLs
- Remove token definitions from base configuration
- Update sandbox configuration schema to validate tokens in URLs
- Update lab configuration interface to remove separate token field
- Simplify buildLabId to use complete instruqtTrack URL
- Update documentation to reflect new configuration pattern
- Remove separate token field from validateSandboxLab schema
- Update instruqtTrack URL pattern validation to include token parameter
- Align lab validation schema with unified token approach
- Fix test cases to validate correct URL format

This change completes the migration to embedding tokens directly in instruqtTrack
URLs, ensuring consistent validation across the sandbox configuration.
- Replace !! operator with Boolean() for type coercion in build-instruqt-url
- Move sandbox error boundary styles to CSS module
- Create sandbox-error-boundary.module.css
- Update components to use CSS module classes
- Maintain existing functionality and visual styles

These changes improve code quality by:
- Using explicit Boolean() constructor instead of double negation
- Following project conventions for CSS modules
- Removing inline styles for better maintainability
Updates `postcss` and `source-map` dependencies in `package.json` and `package-lock.json`.

Removes the unnecessary step of installing the latest npm version in the CI workflow, as the default npm version is sufficient.
* Temporarily removes "Other Sandboxes" section

Removes the "Other Sandboxes" section from the sandbox dropdown.

This change is part of a redesign effort and the section will be re-evaluated and potentially re-introduced later. The related test is also temporarily removed.

* [COMPLIANCE] Add Copyright and License Headers (#2733)

Co-authored-by: hashicorp-copywrite[bot] <110428419+hashicorp-copywrite[bot]@users.noreply.github.com>

* Removes other sandboxes from dropdown

Removes the "Other Sandboxes" section from the sandbox dropdown in preparation for a redesign.
This change removes the related UI elements and associated logic.

---------

Co-authored-by: hashicorp-copywrite[bot] <110428419+hashicorp-copywrite[bot]@users.noreply.github.com>
* Replaces button with ButtonLink component

Replaces the standard HTML button with the ButtonLink component for launching sandboxes.
This change ensures consistent styling and behavior by leveraging the existing ButtonLink component.

* Improves sandbox card styling

Enhances the appearance of sandbox cards by adding a class to the Card component.

This change ensures the card takes up the full width and is centered within its container.

* Fixes empty href for launch button

Updates the launch button href to "#" to prevent unexpected navigation when the feature is not yet implemented or a11y issues.
* Refactors sandbox list to use shared component

Replaces the custom sandbox listing with the shared `TutorialCardsGridList` component.

This change improves code reuse and ensures consistency in styling and behavior across the application. It also adds an error boundary to gracefully handle potential issues when loading the other sandboxes.

* Improves sandbox grid layout and styling

Wraps sandbox cards in a grid layout for better visual organization.
Adds styling to ensure consistent card heights and responsiveness.
This enhances the user experience on the sandbox page by providing a
more structured and visually appealing presentation of available
sandboxes and tutorials.

* Uses Instruqt track ID for lab launch

Uses the Instruqt track ID to launch labs in the sandbox. This ensures that the correct lab environment is launched, especially when multiple labs share the same base lab ID.

Also, refactors sandbox card rendering to improve code readability and maintainability by using the TutorialCardsGridList component directly.

* Removes unnecessary type assertion

Removes an unnecessary `as any` type assertion in the SandboxView component.

This simplifies the code and avoids potentially masking type errors.

* Improves sandbox card responsiveness

Updates sandbox card styles to be more responsive on smaller screens.
The maximum width of the card is adjusted for better viewing experience.

* Improves test suite reliability and error handling

- Mocks HTMLCanvasElement to prevent JSDOM errors in tests.
- Enhances MdxInlineAlert tests to verify console error messages on invalid states and restores mocks after tests.
- Modifies EmbedElement tests to properly simulate retry logic and iframe loading, ensuring accurate state transitions.
- Refactors rewriteTutorialsLink tests to improve mock management and prevent potential errors.

* Improves test reliability with act and error handling

Ensures test stability by wrapping user interactions with `act` for state updates, preventing React warnings.

Additionally, enhances error handling in tutorial link rewriting by throwing an error for unrecognized product slugs, preventing unexpected behavior and logging.

* Simplifies canvas context mocking in tests

Refactors canvas context mocking in tests to improve readability.

The previous implementation used an arrow function with an explicit return statement.
This change simplifies the mock by using an implicit return arrow function.
…design and Consul sandbox launch reliability (#2857)

* Improves sandbox card layout for responsiveness

Updates sandbox card styles to ensure responsiveness across various screen sizes.

Ensures cards take up full available width and height, and introduces a flex container for better layout.

Addresses issues with card sizing and overflow on smaller screens.

* Enhances sandbox dropdown for product navigation

Improves the sandbox dropdown by displaying relevant product information and providing a direct navigation link to the corresponding sandbox page.

This change ensures that users can easily access and understand the available sandboxes for the current product, whether they are already on the sandbox page or navigating from elsewhere.

* Consolidates sandbox dropdown styles

Removes inline styles from the sandbox dropdown component
and applies CSS classes instead. This improves code
readability and maintainability by centralizing styles in
the CSS module.

* Improves sandbox dropdown appearance in light theme

Enhances the visual styling of the sandbox dropdown menu to
provide a better user experience when the light theme is enabled.

This includes adjusting background colors and hover states to
ensure proper contrast and readability in the light theme. Adds
a visual distinction for intro sandbox items and product sandbox
list items on hover, improving visual consistency.

* Improves lab ID validation logic

Updates lab ID validation to handle query parameters and track names.

This ensures that labs are correctly identified and activated even when the ID contains additional information.

* Updates sandbox dropdown tests and logic

Updates the sandbox dropdown tests to match the actual rendered text in the UI.

Also, fixes an issue where `isOnSandboxPage` was not correctly evaluating to false when expected.

* Refactors sandbox dropdown for accessibility

Makes the sandbox dropdown item a button instead of a div
to improve accessibility and keyboard navigation.

Removes conditional rendering based on the current page.
The sandbox page is now always rendered as a link.

* Updates sandbox dropdown style

Updates the sandbox dropdown button style to improve the user interface.

It changes the button's appearance by adding a background color and a border, enhancing its visibility and making it more visually appealing.

* Simplifies test assertions

Removes redundant comments in tests that do not add significant
value or context, leading to cleaner and more readable test files.

* Simplifies sandbox page check

Simplifies the logic for determining if the user is currently on a sandbox page.

The previous check included unnecessary conditional logic that has been removed for a more concise and readable expression.

* Refines sandbox dropdown appearance

Improves the visual appearance of the sandbox dropdown by adjusting padding and margins for better spacing.

Adds dynamic styling to the intro sandbox items based on the current theme, ensuring appropriate background colors and borders for both light and dark themes.

This change enhances the user experience by providing a more visually appealing and consistent interface.

* Refines sandbox dropdown spacing and padding

Improves the visual appearance of the sandbox dropdown by adjusting padding and spacing.

This change aims to provide a more balanced and visually appealing layout within the dropdown. It adjusts padding in several areas including the dropdown container, and link items.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

6 participants