Extras inline file opening

packages/workshop-app/app/routes/_app+/exercise+/$exerciseNumber_.$stepNumber.$type+/__shared/step-mdx.tsx

@@ -200,6 +200,15 @@ function InlineFile({
 }) {
 	const data = useLoaderData<typeof loader>()
 	const app = data[type] || data[data.type]
+	const expectedPlaygroundAppName = data.problem?.name ?? data[data.type]?.name
+	const isPlaygroundReady =
+		type !== 'playground' ||
+		(Boolean(expectedPlaygroundAppName) &&
+			data.playground?.appName === expectedPlaygroundAppName)
+	const disabledReason =
+		type === 'playground' && !isPlaygroundReady
+			? 'Set the playground to this step before opening a file.'
+			: null
 
 	const info = (
 		<div className="launch-editor-button-wrapper flex underline underline-offset-4">
@@ -210,6 +219,14 @@ function InlineFile({
 		</div>
 	)
 
+	if (disabledReason) {
+		return (
+			<SimpleTooltip content={disabledReason}>
+				<div className="inline-block grow cursor-not-allowed">{info}</div>
+			</SimpleTooltip>
+		)
+	}
+
 	return ENV.EPICSHOP_DEPLOYED && app ? (
 		<div className="inline-block grow">
 			<LaunchEditor appFile={file} appName={app.name} {...props}>
@@ -222,11 +239,6 @@ function InlineFile({
 				{info}
 			</LaunchEditor>
 		</div>
-	) : type === 'playground' ? (
-		// playground does not exist yet
-		<SimpleTooltip content="You must 'Set to Playground' before opening a file">
-			<div className="inline-block grow cursor-not-allowed">{info}</div>
-		</SimpleTooltip>
 	) : (
 		<>children</>
 	)

packages/workshop-app/app/routes/_app+/extra+/$extra.tsx

@@ -299,18 +299,27 @@ export default function ExtraRoute() {
 		}
 	})
 
-	// Create MDX components with extra-specific InlineFile
+	// Create MDX components with playground-specific InlineFile
 	const mdxComponents = useMemo(() => {
-		const InlineFile = createInlineFileComponent(() => ({
-			name: data.extra.name,
-			fullPath: data.extra.fullPath,
-		}))
+		const InlineFile = createInlineFileComponent(
+			() =>
+				data.playground
+					? {
+							name: data.playground.name,
+							fullPath: data.playground.fullPath,
+						}
+					: null,
+			() =>
+				!data.playground || data.playground.appName !== data.extra.name
+					? 'Set the playground to this extra before opening a file.'
+					: null,
+		)
 		return {
 			// we'll render the title ourselves thank you
 			h1: () => null,
 			InlineFile,
 		}
-	}, [data.extra.name, data.extra.fullPath])
+	}, [data.playground, data.extra.name])
 
 	const playgroundBasePath = apps.find(
 		(app) => app.name === data.playground?.appName,

packages/workshop-app/app/utils/mdx.tsx

@@ -281,7 +281,10 @@ export type MdxAppInfo = {
  * @param getApp - Function to get the app info given the type
  * @returns InlineFile component
  */
-export function createInlineFileComponent(getApp: () => MdxAppInfo | null) {
+export function createInlineFileComponent(
+	getApp: () => MdxAppInfo | null,
+	getDisabledReason?: () => string | null,
+) {
 	return function InlineFile({
 		file,
 		children = <code>{file}</code>,
@@ -290,6 +293,7 @@ export function createInlineFileComponent(getApp: () => MdxAppInfo | null) {
 		file: string
 	}) {
 		const app = getApp()
+		const disabledReason = getDisabledReason?.() ?? null
 
 		const info = (
 			<div className="launch-editor-button-wrapper flex underline underline-offset-4">
@@ -300,6 +304,14 @@ export function createInlineFileComponent(getApp: () => MdxAppInfo | null) {
 			</div>
 		)
 
+		if (disabledReason) {
+			return (
+				<SimpleTooltip content={disabledReason}>
+					<div className="inline-block grow cursor-not-allowed">{info}</div>
+				</SimpleTooltip>
+			)
+		}
+
 		if (!app) {
 			return (
 				<SimpleTooltip content="App information not available">