Et/sandbox feature release (#2837)

* fix ci tests

* fix more ci tests

* posthog tracking experiment

* debugging posthog logs in dev preview

* playground -> sandbox

* rename straggler to sandbox

* Use enum instead of string

Co-authored-by: Robert Main <[email protected]>

* move posthog events to dedicated lib, use enum instead of string for consistency

* remove interactivelabwrapper since we moved instruqt provider into main app layout

* add test cases

* Update src/data/sandbox.json

Co-authored-by: Brian McClain <[email protected]>

* adds boundary sandbox

* update sandbox labids

* improve copy for launchign sandbox in the dropdown

* revert changes

* Change Consul lab URL

* add and render docs for sandboxes

* update broken tracking/merge error

* fix broken tests, remove unnecessary imports

* fix broken ci tests

* implement multiproduct lab descriptions

* update styles for sandbox dropdown

* add product specific label to learn more

* Refactors lab embed component for robustness

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.

* Navigates to primary product's sandbox page

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.

* Refactors resize listener management

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 @types/node to the latest version

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 `unist-util-visit` import

Updates the import statement for `unist-util-visit` to use the default import syntax. This aligns with common usage and potentially improves compatibility.

* Updates npm to the latest version

Ensures the latest npm version is used in CI workflows.
This can help avoid potential issues caused by outdated npm versions.

* Apply suggestions from code review

* Update src/lib/build-instruqt-url.ts

* Updates sandbox lab ID generation and retrieval

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.

* Removes environment variable dependency for Instruqt tokens

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 sandbox authoring guide

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.

* update validation schema to support tokens in instruqtTrack URLs

- 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.

* refactor: improve code clarity and maintainability

- 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 dependencies and CI workflow

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.

* Removes "Other Sandboxes" section (#2838)

* 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>

* Et/change launch sandbox button to blue (#2840)

* 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.

* Et/remove launch button on other sandboxes cards (#2843)

* 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.

* update copy so it uses experiment instead of learn

* refactor and fix commit error

* add multiple lab support for playgrounds

* update playground page to support multiple labs using the existing component

* fix playground bug

* update terraform sandbox

* embed terminal persist across pages

* update text color

* fix playground configuration, fix consul

* remove extraneous config

* prevent instruqt pane from closing when going to individual tutorials page

* remove min height to ensure embeded element works even when reduced

* fix build error

* fix behavior and styles for playgrounds dropdown, add playground to resources for relevant products

* fix tutorial-view behavior, should load tutorial lab instead of playground by default

* fix tutorial-view behavior, should load tutorial lab instead of playground by default

* fix ci tests

* fix more ci tests

* posthog tracking experiment

* debugging posthog logs in dev preview

* playground -> sandbox

* rename straggler to sandbox

* Use enum instead of string

Co-authored-by: Robert Main <[email protected]>

* move posthog events to dedicated lib, use enum instead of string for consistency

* remove interactivelabwrapper since we moved instruqt provider into main app layout

* add test cases

* Update src/data/sandbox.json

Co-authored-by: Brian McClain <[email protected]>

* adds boundary sandbox

* update sandbox labids

* improve copy for launchign sandbox in the dropdown

* revert changes

* Change Consul lab URL

* add and render docs for sandboxes

* update broken tracking/merge error

* fix broken tests, remove unnecessary imports

* fix broken ci tests

* implement multiproduct lab descriptions

* update styles for sandbox dropdown

* add product specific label to learn more

* Refactors lab embed component for robustness

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.

* Navigates to primary product's sandbox page

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.

* Refactors resize listener management

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 `unist-util-visit` import

Updates the import statement for `unist-util-visit` to use the default import syntax. This aligns with common usage and potentially improves compatibility.

* Updates npm to the latest version

Ensures the latest npm version is used in CI workflows.
This can help avoid potential issues caused by outdated npm versions.

* Apply suggestions from code review

* Update src/lib/build-instruqt-url.ts

* Updates sandbox lab ID generation and retrieval

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.

* Removes environment variable dependency for Instruqt tokens

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.

* update validation schema to support tokens in instruqtTrack URLs

- 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.

* refactor: improve code clarity and maintainability

- 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 dependencies and CI workflow

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.

* Removes "Other Sandboxes" section (#2838)

* 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>

* Et/change launch sandbox button to blue (#2840)

* 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.

* Et/remove launch button on other sandboxes cards (#2843)

* 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.

* update copy so it uses experiment instead of learn

* Removes duplicate Sandbox nav item

Removes the duplicate "Sandbox" navigation item from the Terraform product page.

The item was being added twice due to a conditional check that
was no longer necessary.

* refactor and fix commit error

* add multiple lab support for playgrounds

* update playground page to support multiple labs using the existing component

* fix playground bug

* update terraform sandbox

* embed terminal persist across pages

* update text color

* fix playground configuration, fix consul

* remove extraneous config

* prevent instruqt pane from closing when going to individual tutorials page

* remove min height to ensure embeded element works even when reduced

* fix build error

* fix behavior and styles for playgrounds dropdown, add playground to resources for relevant products

* fix tutorial-view behavior, should load tutorial lab instead of playground by default

* fix tutorial-view behavior, should load tutorial lab instead of playground by default

* fix ci tests

* fix more ci tests

* posthog tracking experiment

* debugging posthog logs in dev preview

* playground -> sandbox

* rename straggler to sandbox

* Use enum instead of string

Co-authored-by: Robert Main <[email protected]>

* move posthog events to dedicated lib, use enum instead of string for consistency

* remove interactivelabwrapper since we moved instruqt provider into main app layout

* add test cases

* Update src/data/sandbox.json

Co-authored-by: Brian McClain <[email protected]>

* adds boundary sandbox

* update sandbox labids

* improve copy for launchign sandbox in the dropdown

* revert changes

* Change Consul lab URL

* add and render docs for sandboxes

* update broken tracking/merge error

* fix broken tests, remove unnecessary imports

* fix broken ci tests

* implement multiproduct lab descriptions

* update styles for sandbox dropdown

* add product specific label to learn more

* Refactors lab embed component for robustness

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.

* Navigates to primary product's sandbox page

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.

* Refactors resize listener management

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 `unist-util-visit` import

Updates the import statement for `unist-util-visit` to use the default import syntax. This aligns with common usage and potentially improves compatibility.

* Updates npm to the latest version

Ensures the latest npm version is used in CI workflows.
This can help avoid potential issues caused by outdated npm versions.

* Apply suggestions from code review

* Update src/lib/build-instruqt-url.ts

* Updates sandbox lab ID generation and retrieval

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.

* Removes environment variable dependency for Instruqt tokens

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.

* update validation schema to support tokens in instruqtTrack URLs

- 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.

* refactor: improve code clarity and maintainability

- 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 dependencies and CI workflow

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.

* Removes "Other Sandboxes" section (#2838)

* 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>

* Et/change launch sandbox button to blue (#2840)

* 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.

* Et/remove launch button on other sandboxes cards (#2843)

* 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.

* update copy so it uses experiment instead of learn

* refactor and fix commit error

* add multiple lab support for playgrounds

* update playground page to support multiple labs using the existing component

* fix playground bug

* update terraform sandbox

* embed terminal persist across pages

* update text color

* fix playground configuration, fix consul

* remove extraneous config

* prevent instruqt pane from closing when going to individual tutorials page

* remove min height to ensure embeded element works even when reduced

* fix build error

* fix behavior and styles for playgrounds dropdown, add playground to resources for relevant products

* fix tutorial-view behavior, should load tutorial lab instead of playground by default

* fix tutorial-view behavior, should load tutorial lab instead of playground by default

* fix ci tests

* fix more ci tests

* posthog tracking experiment

* debugging posthog logs in dev preview

* playground -> sandbox

* rename straggler to sandbox

* Use enum instead of string

Co-authored-by: Robert Main <[email protected]>

* move posthog events to dedicated lib, use enum instead of string for consistency

* remove interactivelabwrapper since we moved instruqt provider into main app layout

* add test cases

* Update src/data/sandbox.json

Co-authored-by: Brian McClain <[email protected]>

* adds boundary sandbox

* update sandbox labids

* improve copy for launchign sandbox in the dropdown

* revert changes

* Change Consul lab URL

* add and render docs for sandboxes

* update broken tracking/merge error

* fix broken tests, remove unnecessary imports

* fix broken ci tests

* implement multiproduct lab descriptions

* update styles for sandbox dropdown

* add product specific label to learn more

* Refactors lab embed component for robustness

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.

* Navigates to primary product's sandbox page

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.

* Refactors resize listener management

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 `unist-util-visit` import

Updates the import statement for `unist-util-visit` to use the default import syntax. This aligns with common usage and potentially improves compatibility.

* Updates npm to the latest version

Ensures the latest npm version is used in CI workflows.
This can help avoid potential issues caused by outdated npm versions.

* Apply suggestions from code review

* Update src/lib/build-instruqt-url.ts

* Updates sandbox lab ID generation and retrieval

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.

* Removes environment variable dependency for Instruqt tokens

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.

* update validation schema to support tokens in instruqtTrack URLs

- 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.

* refactor: improve code clarity and maintainability

- 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 dependencies and CI workflow

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.

* Removes "Other Sandboxes" section (#2838)

* 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>

* Et/change launch sandbox button to blue (#2840)

* 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.

* Et/remove launch button on other sandboxes cards (#2843)

* 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.

* update copy so it uses experiment instead of learn

* 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 them…

Author: 9 people

.npmrc

@@ -1 +1,2 @@
 engine-strict=true
+@hashicorp:registry=https://registry.npmjs.org/

.test/setup-vitest.js

@@ -21,12 +21,18 @@ vi.spyOn(global, 'fetch').mockImplementation((url) => {
 				return Promise.resolve({
 					result: config.flags.unified_docs_migrated_repos
 				})
-			}
+			},
 		})
 	}
 
 	return originalFetch(url)
 })
 
-
 global.__config = unflatten(await loadHashiConfigForEnvironment())
+
+// Mock HTMLCanvasElement.getContext to prevent jsdom errors in tests
+if (typeof HTMLCanvasElement !== 'undefined') {
+	HTMLCanvasElement.prototype.getContext = () => {
+		return {}
+	}
+}

config/base.json

@@ -28,7 +28,10 @@
 			"clientToken": "pubd5cf774aa1cbbd001accd50cb463925b",
 			"service": "non-prod.developer.hashicorp.com"
 		},
-		"product_slugs_with_integrations": ["vault", "nomad", "packer"]
+		"product_slugs_with_integrations": ["vault", "nomad", "packer"],
+		"sandbox": {
+			"instruqt_base_url": "https://play.instruqt.com/embed"
+		}
 	},
 	"learn": {
 		"max_static_paths": 10

config/development.json

@@ -4,7 +4,10 @@
 		"max_static_paths": 1
 	},
 	"dev_dot": {
-		"max_static_paths": 1
+		"max_static_paths": 1,
+		"sandbox": {
+			"instruqt_base_url": "https://play.instruqt.com/embed"
+		}
 	},
 	"learn": {
 		"max_static_paths": 1