Sandbox environments for DevDot 🛝

.github/workflows/ci.yml

@@ -19,6 +19,9 @@ jobs:
         with:
           node-version: 22
 
+      - name: Install latest npm
+        run: npm install --global npm@latest
+
       - run: npm ci
       - run: npm run test:ci
 
@@ -33,6 +36,9 @@ jobs:
         with:
           node-version: 22
 
+      - name: Install latest npm
+        run: npm install --global npm@latest
+
       - name: Install Dependencies
         run: npm ci
 

.npmrc

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

config/base.json

@@ -28,7 +28,18 @@
 			"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",
+			"default_tokens": {
+				"terraform-sandbox": "em_3vgTsBqCLq2blqtQ",
+				"vault-sandbox": "em_CUFCBU0nSfCl2VHi",
+				"boundary-sandbox": "em_YHsmJu4K1Wk3hwht",
+				"consul-sandbox": "em_I5XI2XjO-ZMeH1_w",
+				"consul-sandbox-sd": "em_MdAn4Od_foU6oybz",
+				"nomad-sandbox": "em_0wOuIAyyjAQllLkc"
+			}
+		}
 	},
 	"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

package.json

@@ -61,8 +61,7 @@
 		"@types/google-spreadsheet": "^3.2.2",
 		"@types/js-cookie": "^3.0.6",
 		"@types/jsonwebtoken": "^8.5.9",
-		"@types/node": "^18.18.9",
-		"@types/react": "^18.2.6",
+		"@types/node": "^20.19.0",
 		"@types/react-dom": "^18.2.4",
 		"@types/semver": "^7.3.9",
 		"@types/shortid": "^0.0.29",

src/components/dev-dot-content/mdx-components/mdx-alert/index.test.tsx

@@ -38,11 +38,8 @@ describe('`MdxInlineAlert` Component', () => {
 		const { queryByText, queryByTestId } = render(
 			<MdxInlineAlert>{data.body}</MdxInlineAlert>
 		)
-		// icon renders
 		expect(queryByTestId('icon')).toBeInTheDocument()
-		// default title renders
 		expect(queryByText(data.title)).toBeInTheDocument()
-		// body text renders
 		expect(queryByText(data.body)).toBeInTheDocument()
 	})
 
@@ -51,11 +48,8 @@ describe('`MdxInlineAlert` Component', () => {
 		const { queryByText, queryByTestId } = render(
 			<MdxInlineAlert type="highlight">{data.body}</MdxInlineAlert>
 		)
-		// icon renders
 		expect(queryByTestId('icon')).toBeInTheDocument()
-		// default title renders
 		expect(queryByText(data.title)).toBeInTheDocument()
-		// body text renders
 		expect(queryByText(data.body)).toBeInTheDocument()
 	})
 
@@ -64,11 +58,8 @@ describe('`MdxInlineAlert` Component', () => {
 		const { queryByText, queryByTestId } = render(
 			<MdxInlineAlert type="note">{data.body}</MdxInlineAlert>
 		)
-		// icon renders
 		expect(queryByTestId('icon')).toBeInTheDocument()
-		// default title renders
 		expect(queryByText(data.title)).toBeInTheDocument()
-		// body text renders
 		expect(queryByText(data.body)).toBeInTheDocument()
 	})
 
@@ -77,11 +68,8 @@ describe('`MdxInlineAlert` Component', () => {
 		const { queryByText, queryByTestId } = render(
 			<MdxInlineAlert type="warning">{data.body}</MdxInlineAlert>
 		)
-		// icon renders
 		expect(queryByTestId('icon')).toBeInTheDocument()
-		// default title renders
 		expect(queryByText(data.title)).toBeInTheDocument()
-		// body text renders
 		expect(queryByText(data.body)).toBeInTheDocument()
 	})
 
@@ -94,32 +82,42 @@ describe('`MdxInlineAlert` Component', () => {
 		expect(queryByText(TEST_DATA.customTitle)).toBeInTheDocument()
 	})
 
-	it('throws when children are not passed', () => {
-		// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-		// @ts-ignore
-		expect(() => render(<MdxInlineAlert />)).toThrowError(
-			TEST_DATA.errors.noChildren
-		)
+	it('renders error fallback when children are empty', () => {
+		const { getByText } = render(<MdxInlineAlert>{''}</MdxInlineAlert>)
+
+		// Should render the error fallback UI instead of throwing
+		expect(getByText('Alert Error')).toBeInTheDocument()
+		expect(
+			getByText(
+				'There was an error rendering this alert. Please check the alert configuration.'
+			)
+		).toBeInTheDocument()
 	})
 
-	it('throws when type is invalid', () => {
-		expect(() =>
-			render(
-				// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-				// @ts-ignore
-				<MdxInlineAlert type="doughnut">I am an MdxInlineAlert</MdxInlineAlert>
+	it('renders error fallback when type is invalid', () => {
+		const invalidType = 'doughnut' as 'tip' | 'highlight' | 'note' | 'warning'
+		const { getByText } = render(
+			<MdxInlineAlert type={invalidType}>I am an MdxInlineAlert</MdxInlineAlert>
+		)
+
+		// Should render the error fallback UI instead of throwing
+		expect(getByText('Alert Error')).toBeInTheDocument()
+		expect(
+			getByText(
+				'There was an error rendering this alert. Please check the alert configuration.'
 			)
-		).toThrowError(TEST_DATA.errors.invalidType)
+		).toBeInTheDocument()
 	})
 
 	it('renders multiple children', () => {
-		expect(() =>
-			render(
-				<MdxInlineAlert>
-					<p> Liquorice cake marzipan danish brownie</p>
-					<p>Lollipop gingerbread bear claw muffin croissant</p>
-				</MdxInlineAlert>
-			)
-		).not.toThrowError()
+		const { getByText } = render(
+			<MdxInlineAlert>
+				<p>This may render multiple children.</p>
+				<p>This should get multiple children.</p>
+			</MdxInlineAlert>
+		)
+
+		expect(getByText('This may render multiple children.')).toBeInTheDocument()
+		expect(getByText('This should get multiple children.')).toBeInTheDocument()
 	})
 })

src/components/dev-dot-content/mdx-components/mdx-alert/index.tsx

@@ -4,6 +4,7 @@
  */
 
 import InlineAlert from 'components/inline-alert'
+import { withErrorBoundary } from 'components/error-boundary'
 import { IconInfo24 } from '@hashicorp/flight-icons/svg-react/info-24'
 import { IconAlertTriangle24 } from '@hashicorp/flight-icons/svg-react/alert-triangle-24'
 import { IconAlertDiamond24 } from '@hashicorp/flight-icons/svg-react/alert-diamond-24'
@@ -22,7 +23,7 @@ const ALERT_DATA: MdxInlineAlertData = {
 	},
 }
 
-export function MdxInlineAlert({
+function MdxInlineAlertBase({
 	children,
 	title,
 	type = 'tip',
@@ -55,4 +56,38 @@ export function MdxInlineAlert({
 	)
 }
 
+// Create a fallback UI for when the alert component fails
+const AlertErrorFallback = (
+	<div className={s.spacing}>
+		<InlineAlert
+			icon={<IconAlertDiamond24 />}
+			title="Alert Error"
+			description="There was an error rendering this alert. Please check the alert configuration."
+			color="critical"
+			className={s.typographyOverride}
+		/>
+	</div>
+)
+
+export const MdxInlineAlert = withErrorBoundary(
+	MdxInlineAlertBase,
+	AlertErrorFallback,
+	(error, errorInfo) => {
+		if (typeof window !== 'undefined' && window.posthog?.capture) {
+			window.posthog.capture('mdx_component_error', {
+				component_name: 'MdxInlineAlert',
+				error_message: error.message,
+				error_stack: error.stack,
+				component_stack: errorInfo?.componentStack,
+				timestamp: new Date().toISOString(),
+				page_url: window.location.href,
+			})
+		}
+
+		if (process.env.NODE_ENV === 'development') {
+			console.warn('MdxInlineAlert validation error:', error.message, errorInfo)
+		}
+	}
+)
+
 export { MdxHighlight, MdxTip, MdxNote, MdxWarning }