Replaces tutorial list with sandbox cards

Replaces the tutorial list on the collection view with interactive sandbox cards.

This change improves the user experience by allowing users to launch interactive sandboxes directly from the collection page.
It also removes the product icons from the sandbox card and replaces it with badges.

Author: Younique98

src/components/sandbox-card/index.tsx

@@ -4,13 +4,15 @@
  */
 
 import React from 'react'
-import { ProductSlug } from 'types/products'
+import { CardBadgeOption } from 'components/tutorial-collection-cards/components/card-badges/types'
 import Card from 'components/card'
 import CardTitle from 'components/card/components/card-title'
 import CardDescription from 'components/card/components/card-description'
 import CardFooter from 'components/card/components/card-footer'
 import ButtonLink from 'components/button-link'
-import ProductIcon from 'components/product-icon'
+import Badge from 'components/badge'
+import { IconTerminalScreen16 } from '@hashicorp/flight-icons/svg-react/terminal-screen-16'
+import { CardBadges } from 'components/tutorial-collection-cards'
 import s from './sandbox-card.module.css'
 
 export interface SandboxCardProps {
@@ -25,26 +27,26 @@ export interface SandboxCardProps {
 const SandboxCard: React.FC<SandboxCardProps> = ({
 	title,
 	description,
-	labId,
 	products,
 	onLaunch,
 	className,
 }) => {
+	const productBadges = products.map(
+		(productSlug) => productSlug as CardBadgeOption
+	)
+
 	return (
 		<div className={`${s.sandboxCardWrapper} ${className || ''}`}>
 			<Card className={s.sandboxCard}>
 				<div className={s.cardHeader}>
+					<Badge
+						icon={<IconTerminalScreen16 />}
+						ariaLabel="Interactive"
+						size="small"
+						type="filled"
+						className={s.interactiveBadge}
+					/>
 					<CardTitle text={title} />
-					<div className={s.productIcons}>
-						{products.map((productSlug) => (
-							<ProductIcon
-								key={`product-${labId}-${productSlug}`}
-								productSlug={productSlug as ProductSlug}
-								size={16}
-								className={s.productIcon}
-							/>
-						))}
-					</div>
 				</div>
 				<CardDescription text={description} className={s.description} />
 				<CardFooter className={s.footer}>
@@ -61,6 +63,9 @@ const SandboxCard: React.FC<SandboxCardProps> = ({
 						text="Launch Sandbox"
 					/>
 				</CardFooter>
+				<div style={{ marginTop: '16px' }}>
+					<CardBadges badges={productBadges} />
+				</div>
 			</Card>
 		</div>
 	)

src/components/sandbox-card/sandbox-card.module.css

@@ -14,7 +14,7 @@
 .cardHeader {
 	display: flex;
 	align-items: flex-start;
-	justify-content: space-between;
+	justify-content: flex-start;
 	gap: 12px;
 }
 
@@ -43,6 +43,12 @@
 	justify-content: center;
 }
 
+.interactiveBadge {
+	margin-right: 8px;
+	display: flex;
+	align-items: center;
+}
+
 @media (max-width: 768px) {
 	.cardHeader {
 		flex-direction: column;

src/views/collection-view/components/collection-sandbox-list/collection-sandbox-list.module.css

@@ -0,0 +1,17 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+.root {
+	background: var(--token-color-surface-faint);
+	box-shadow: var(--token-surface-base-box-shadow);
+	border-radius: 6px;
+	padding: 16px;
+}
+
+.gridContainer {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+  gap: 16px;
+}

src/views/collection-view/components/collection-sandbox-list/index.tsx

@@ -0,0 +1,27 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+import SandboxCard from 'components/sandbox-card'
+import { CollectionSandboxListProps } from './types'
+import s from './collection-sandbox-list.module.css'
+
+export const CollectionSandboxList = ({
+	sandboxes,
+}: CollectionSandboxListProps) => {
+	return (
+		<div className={s.gridContainer}>
+			{sandboxes.map((sandbox) => (
+				<SandboxCard
+					key={sandbox.labId}
+					title={sandbox.title}
+					description={sandbox.description}
+					labId={sandbox.labId}
+					products={sandbox.products}
+					onLaunch={sandbox.onLaunch}
+				/>
+			))}
+		</div>
+	)
+}

src/views/collection-view/components/collection-sandbox-list/types.ts

@@ -0,0 +1,17 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+export interface Sandbox {
+	labId: string
+	title: string
+	description: string
+	products: string[]
+	onLaunch: () => void
+}
+
+export interface CollectionSandboxListProps {
+	sandboxes: Sandbox[]
+	isOrdered?: boolean
+}

src/views/collection-view/index.tsx

@@ -3,7 +3,6 @@
  * SPDX-License-Identifier: MPL-2.0
  */
 
-import { TutorialLite as ClientTutorialLite } from 'lib/learn-client/types'
 import SidebarSidecarLayout from 'layouts/sidebar-sidecar'
 import {
 	generateProductLandingSidebarNavData,
@@ -12,25 +11,39 @@ import {
 import TutorialsSidebar from 'components/tutorials-sidebar'
 import { CollectionPageProps } from './server'
 import CollectionMeta from './components/collection-meta'
-import CollectionTutorialList from './components/collection-tutorial-list'
-import { formatTutorialCard } from 'components/tutorial-card/helpers'
 import { generateCollectionSidebarNavData } from './helpers/generate-collection-sidebar-nav-data'
 import { SignupFormArea } from 'views/certifications/components'
 import s from './style.module.css'
+import { CollectionSandboxList } from './components/collection-sandbox-list'
+import { useInstruqtEmbed } from 'contexts/instruqt-lab'
 
 function CollectionView({
 	collection,
 	layoutProps,
 	product,
 }: CollectionPageProps): React.ReactElement {
-	const { name, description, tutorials, ordered } = collection
+	const { openLab, setActive } = useInstruqtEmbed()
+
+	const handleLabClick = (labId: string) => {
+		openLab(labId)
+		setActive(true)
+	}
 
+	const { name, description, tutorials, ordered } = collection
 	const sidebarNavDataLevels = [
 		generateTopLevelSidebarNavData(product.name),
 		generateProductLandingSidebarNavData(product),
 		generateCollectionSidebarNavData(product, layoutProps.sidebarSections),
 	]
 
+	const sandboxes = tutorials.map((t) => ({
+		labId: t.handsOnLab?.id || '',
+		title: t.name,
+		description: t.description,
+		products: t.productsUsed.map((p) => p.product.slug),
+		onLaunch: () => handleLabClick(t.handsOnLab?.id || ''),
+	}))
+
 	return (
 		<SidebarSidecarLayout
 			breadcrumbLinks={layoutProps.breadcrumbLinks}
@@ -51,12 +64,7 @@ function CollectionView({
 				heading={{ text: name, id: collection.id }}
 				description={description}
 			/>
-			<CollectionTutorialList
-				isOrdered={ordered}
-				tutorials={tutorials.map((t: ClientTutorialLite) =>
-					formatTutorialCard(t, collection)
-				)}
-			/>
+			<CollectionSandboxList isOrdered={ordered} sandboxes={sandboxes} />
 			{layoutProps.isCertificationPrep && (
 				<SignupFormArea className={s.newsletterSignupArea} />
 			)}