From 1ca84068afa2609ffc93c0dda25c04c6185c7864 Mon Sep 17 00:00:00 2001
From: thsparks <thsparks@microsoft.com>
Date: Tue, 29 Oct 2024 14:31:04 -0700
Subject: [PATCH 1/4] Add an option to hide Done in tutorials

---
 localtypings/pxtarget.d.ts                           |  1 +
 webapp/src/components/tutorial/TutorialContainer.tsx | 12 +++++++-----
 .../src/components/tutorial/TutorialStepCounter.tsx  |  8 +++++---
 webapp/src/sidepanel.tsx                             |  1 +
 webapp/src/tutorial.tsx                              |  3 ++-
 5 files changed, 16 insertions(+), 9 deletions(-)

diff --git a/localtypings/pxtarget.d.ts b/localtypings/pxtarget.d.ts
index feb1d9700a61..d0f1f29e7f15 100644
--- a/localtypings/pxtarget.d.ts
+++ b/localtypings/pxtarget.d.ts
@@ -1205,6 +1205,7 @@ declare namespace pxt.tutorial {
         codeStop?: string; // command to run when code stops (MINECRAFT HOC ONLY)
         autoexpandOff?: boolean; // INTERNAL TESTING ONLY
         preferredEditor?: string; // preferred editor for opening the tutorial
+        hideDone?: boolean; // Do not show a "Done" button at the end of the tutorial
     }
 
     interface TutorialBlockConfigEntry {
diff --git a/webapp/src/components/tutorial/TutorialContainer.tsx b/webapp/src/components/tutorial/TutorialContainer.tsx
index 4f2d26957bad..72b9c38a03e8 100644
--- a/webapp/src/components/tutorial/TutorialContainer.tsx
+++ b/webapp/src/components/tutorial/TutorialContainer.tsx
@@ -23,6 +23,7 @@ interface TutorialContainerProps {
     hasTemplate?: boolean;
     preferredEditor?: string;
     hasBeenResized?: boolean;
+    hideDone?: boolean;
 
     tutorialOptions?: pxt.tutorial.TutorialOptions; // TODO (shakao) pass in only necessary subset
     tutorialSimSidebar?: boolean;
@@ -37,7 +38,7 @@ const MAX_HEIGHT = 194;
 
 export function TutorialContainer(props: TutorialContainerProps) {
     const { parent, tutorialId, name, steps, hideIteration, hasTemplate,
-        preferredEditor, tutorialOptions, onTutorialStepChange, onTutorialComplete,
+        preferredEditor, tutorialOptions, hideDone, onTutorialStepChange, onTutorialComplete,
         setParentHeight } = props;
     const [ currentStep, setCurrentStep ] = React.useState(props.currentStep || 0);
     const [ stepErrorAttemptCount, setStepErrorAttemptCount ] = React.useState(0);
@@ -49,7 +50,7 @@ export function TutorialContainer(props: TutorialContainerProps) {
 
     const showBack = currentStep !== 0;
     const showNext = currentStep !== steps.length - 1;
-    const showDone = !showNext && !pxt.appTarget.appTheme.lockedEditor && !hideIteration;
+    const isDone = !showNext && !pxt.appTarget.appTheme.lockedEditor && !hideIteration;
     const showImmersiveReader = pxt.appTarget.appTheme.immersiveReader;
     const isHorizontal = props.tutorialSimSidebar || pxt.BrowserUtils.isTabletSize();
 
@@ -237,8 +238,8 @@ export function TutorialContainer(props: TutorialContainerProps) {
 
     const doneButtonLabel = lf("Finish the tutorial.");
     const nextButtonLabel = lf("Go to the next step of the tutorial.");
-    const nextButton = showDone
-        ? <Button icon="check circle" title={doneButtonLabel} ariaLabel={doneButtonLabel} text={lf("Done")} onClick={onTutorialComplete} />
+    const nextButton = isDone
+        ? hideDone ? null : <Button icon="check circle" title={doneButtonLabel} ariaLabel={doneButtonLabel} text={lf("Done")} onClick={onTutorialComplete} />
         : <Button icon="arrow circle right" title={nextButtonLabel} ariaLabel={nextButtonLabel} disabled={!showNext} text={lf("Next")} onClick={() => validateTutorialStep()} />;
 
     const stepCounter = <TutorialStepCounter
@@ -247,6 +248,7 @@ export function TutorialContainer(props: TutorialContainerProps) {
         totalSteps={steps.length}
         title={name}
         isHorizontal={isHorizontal}
+        hideDone={hideDone}
         setTutorialStep={handleStepCounterSetStep}
         onDone={onTutorialComplete} />;
     const hasHint = !!hintMarkdown;
@@ -290,4 +292,4 @@ export function TutorialContainer(props: TutorialContainerProps) {
             <MarkedContent markdown={currentStepInfo.contentMd} parent={parent} />
         </Modal>}
     </div>
-}
\ No newline at end of file
+}
diff --git a/webapp/src/components/tutorial/TutorialStepCounter.tsx b/webapp/src/components/tutorial/TutorialStepCounter.tsx
index e8fd190b7bb0..440077f3acea 100644
--- a/webapp/src/components/tutorial/TutorialStepCounter.tsx
+++ b/webapp/src/components/tutorial/TutorialStepCounter.tsx
@@ -6,6 +6,7 @@ interface TutorialStepCounterProps {
     totalSteps: number;
     title?: string;
     isHorizontal?: boolean;
+    hideDone?: boolean;
     setTutorialStep: (step: number) => void;
     onDone: () => void;
 }
@@ -42,6 +43,7 @@ export function TutorialStepCounter(props: TutorialStepCounterProps) {
 
     const lastStep = currentStep == totalSteps - 1;
     const nextButtonTitle = lastStep ? lf("Finish the tutorial.") : lf("Go to the next step of the tutorial.");
+    const showNextButton = !lastStep || !props.hideDone;
 
     return <div className="tutorial-step-counter">
         <div className="tutorial-step-label">
@@ -68,13 +70,13 @@ export function TutorialStepCounter(props: TutorialStepCounterProps) {
                     label={stepNum === currentStep ? `${stepNum + 1}` : undefined}
                 />
             })}
-            <Button
+            {showNextButton && <Button
                 className={props.isHorizontal ? "ui button counter-next-button" : "square-button"}
                 leftIcon={`icon ${lastStep ? "check" : props.isHorizontal ? "arrow circle right" : "right chevron"}`}
                 onClick={lastStep ? props.onDone : handleNextStep}
                 aria-label={nextButtonTitle}
                 title={nextButtonTitle}
-                label={props.isHorizontal ? lastStep ? lf("Done") : lf("Next") : ""} />
+                label={props.isHorizontal ? lastStep ? lf("Done") : lf("Next") : ""} />}
         </div>
     </div>
-}
\ No newline at end of file
+}
diff --git a/webapp/src/sidepanel.tsx b/webapp/src/sidepanel.tsx
index 0fdc8e2b3034..b12e6a0ce1da 100644
--- a/webapp/src/sidepanel.tsx
+++ b/webapp/src/sidepanel.tsx
@@ -222,6 +222,7 @@ export class Sidepanel extends data.Component<SidepanelProps, SidepanelState> {
                             preferredEditor={tutorialOptions.metadata?.preferredEditor}
                             tutorialSimSidebar={this.props.tutorialSimSidebar}
                             hasBeenResized={this.state.resized && shouldResize}
+                            hideDone={tutorialOptions.metadata?.hideDone}
                             onTutorialStepChange={onTutorialStepChange}
                             onTutorialComplete={onTutorialComplete}
                             setParentHeight={newSize => this.setComponentHeight(newSize, false)} />
diff --git a/webapp/src/tutorial.tsx b/webapp/src/tutorial.tsx
index aaeffc085e92..58894608ba11 100644
--- a/webapp/src/tutorial.tsx
+++ b/webapp/src/tutorial.tsx
@@ -674,9 +674,10 @@ export class TutorialCard extends data.Component<TutorialCardProps, TutorialCard
         const currentStep = tutorialStep;
         const maxSteps = tutorialStepInfo.length;
         const hideIteration = metadata && metadata.hideIteration;
+        const hideDone = metadata && metadata.hideDone;
         const hasPrevious = tutorialReady && currentStep != 0 && !hideIteration;
         const hasNext = tutorialReady && currentStep != maxSteps - 1 && !hideIteration;
-        const hasFinish = !lockedEditor && currentStep == maxSteps - 1 && !hideIteration;
+        const hasFinish = !lockedEditor && currentStep == maxSteps - 1 && !hideIteration && !hideDone;
         const hasHint = this.hasHint();
         const tutorialCardContent = stepInfo.headerContentMd;
         const showDialog = stepInfo.showDialog;

From d640d67f975f611c4147a935eb31229de153d832 Mon Sep 17 00:00:00 2001
From: thsparks <thsparks@microsoft.com>
Date: Tue, 29 Oct 2024 14:55:41 -0700
Subject: [PATCH 2/4] Add docs

---
 docs/writing-docs/tutorials/control-options.md | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/docs/writing-docs/tutorials/control-options.md b/docs/writing-docs/tutorials/control-options.md
index 1511497d5778..025be0e4b473 100644
--- a/docs/writing-docs/tutorials/control-options.md
+++ b/docs/writing-docs/tutorials/control-options.md
@@ -62,6 +62,14 @@ For text-based tutorials, you can choose to hide the toolbox altogether. This is
 ### @hideToolbox true
 ```
 
+### Hide Done
+
+If you do not wish for your tutorial's final step to display a "Done" button, which sends the user back to the main editor, you can hide it by specifying **@hideDone** in the metadata. The default is ``false``.
+
+```
+### @hideDone true
+```
+
 ## Special blocks
 
 ### Templates

From ebace3b5a97a3003744fe2c6cce9a43e98a2b962 Mon Sep 17 00:00:00 2001
From: thsparks <thsparks@microsoft.com>
Date: Tue, 29 Oct 2024 14:57:42 -0700
Subject: [PATCH 3/4] Add tests

---
 package.json                                  |  1 +
 tests/tutorial-test/baselines/hideDone.json   | 23 +++++++++++++++++++
 .../tutorial-test/baselines/hideToolbox.json  | 23 +++++++++++++++++++
 tests/tutorial-test/cases/hideDone.md         | 20 ++++++++++++++++
 tests/tutorial-test/cases/hideToolbox.md      | 20 ++++++++++++++++
 5 files changed, 87 insertions(+)
 create mode 100644 tests/tutorial-test/baselines/hideDone.json
 create mode 100644 tests/tutorial-test/baselines/hideToolbox.json
 create mode 100644 tests/tutorial-test/cases/hideDone.md
 create mode 100644 tests/tutorial-test/cases/hideToolbox.md

diff --git a/package.json b/package.json
index d145f350562b..fb191be60c2d 100644
--- a/package.json
+++ b/package.json
@@ -164,6 +164,7 @@
     "test:err": "gulp testerr",
     "test:fmt": "gulp testfmt",
     "test:lang": "gulp testlang",
+    "test:tutorials": "gulp testtutorials",
     "update": "gulp update",
     "watch-streamer": "cd docs/static/streamer && tsc -t es6 --watch",
     "prepare": "node ./scripts/npm-prepare.js",
diff --git a/tests/tutorial-test/baselines/hideDone.json b/tests/tutorial-test/baselines/hideDone.json
new file mode 100644
index 000000000000..a46227a2e28a
--- /dev/null
+++ b/tests/tutorial-test/baselines/hideDone.json
@@ -0,0 +1,23 @@
+{
+    "editor": "blocksprj",
+    "title": "Hide Done",
+    "steps": [
+        {
+            "contentMd": "Tutorials can choose to hide the done button on the final step. This metadata is parsed and removed.",
+            "headerContentMd": "Tutorials can choose to hide the done button on the final step. This metadata is parsed and removed."
+        },
+        {
+            "contentMd": "Tutorial parsing for hints, steps, etc should function exactly as before.\n\n```blocks\nlet x = 8;\nlet y = x + 2;\n```",
+            "headerContentMd": "Tutorial parsing for hints, steps, etc should function exactly as before.",
+            "hintContentMd": "```blocks\nlet x = 8;\nlet y = x + 2;\n```"
+        }
+    ],
+    "activities": null,
+    "code": [
+        "{\nlet x = 8;\nlet y = x + 2;\n}",
+        "{\nbasic.showIcon(IconNames.Square)\n}"
+    ],
+    "metadata": {
+        "hideDone": true
+    }
+}
diff --git a/tests/tutorial-test/baselines/hideToolbox.json b/tests/tutorial-test/baselines/hideToolbox.json
new file mode 100644
index 000000000000..02a569e2a970
--- /dev/null
+++ b/tests/tutorial-test/baselines/hideToolbox.json
@@ -0,0 +1,23 @@
+{
+    "editor": "blocksprj",
+    "title": "Hide Toolbox",
+    "steps": [
+        {
+            "contentMd": "Tutorials can choose to hide the toolbox. This metadata is parsed and removed.",
+            "headerContentMd": "Tutorials can choose to hide the toolbox. This metadata is parsed and removed."
+        },
+        {
+            "contentMd": "Tutorial parsing for hints, steps, etc should function exactly as before.\n\n```blocks\nlet x = 8;\nlet y = x + 2;\n```",
+            "headerContentMd": "Tutorial parsing for hints, steps, etc should function exactly as before.",
+            "hintContentMd": "```blocks\nlet x = 8;\nlet y = x + 2;\n```"
+        }
+    ],
+    "activities": null,
+    "code": [
+        "{\nlet x = 8;\nlet y = x + 2;\n}",
+        "{\nbasic.showIcon(IconNames.Square)\n}"
+    ],
+    "metadata": {
+        "hideToolbox": true
+    }
+}
diff --git a/tests/tutorial-test/cases/hideDone.md b/tests/tutorial-test/cases/hideDone.md
new file mode 100644
index 000000000000..6596085a2ff4
--- /dev/null
+++ b/tests/tutorial-test/cases/hideDone.md
@@ -0,0 +1,20 @@
+# Hide Done
+
+### @hideDone true
+
+## Introduction
+
+Tutorials can choose to hide the done button on the final step. This metadata is parsed and removed.
+
+## Step with hint
+
+Tutorial parsing for hints, steps, etc should function exactly as before.
+
+```blocks
+let x = 8;
+let y = x + 2;
+```
+
+```ghost
+basic.showIcon(IconNames.Square)
+```
diff --git a/tests/tutorial-test/cases/hideToolbox.md b/tests/tutorial-test/cases/hideToolbox.md
new file mode 100644
index 000000000000..4bf31af59ad6
--- /dev/null
+++ b/tests/tutorial-test/cases/hideToolbox.md
@@ -0,0 +1,20 @@
+# Hide Toolbox
+
+### @hideToolbox true
+
+## Introduction
+
+Tutorials can choose to hide the toolbox. This metadata is parsed and removed.
+
+## Step with hint
+
+Tutorial parsing for hints, steps, etc should function exactly as before.
+
+```blocks
+let x = 8;
+let y = x + 2;
+```
+
+```ghost
+basic.showIcon(IconNames.Square)
+```

From ac3f599672ff3aaa2b86a1d9ba125a3c98ff51e6 Mon Sep 17 00:00:00 2001
From: thsparks <thsparks@microsoft.com>
Date: Wed, 30 Oct 2024 16:31:30 -0700
Subject: [PATCH 4/4] Do not create specific property in TutorialContainer for
 hideDone

---
 webapp/src/components/tutorial/TutorialContainer.tsx | 4 ++--
 webapp/src/sidepanel.tsx                             | 1 -
 2 files changed, 2 insertions(+), 3 deletions(-)

diff --git a/webapp/src/components/tutorial/TutorialContainer.tsx b/webapp/src/components/tutorial/TutorialContainer.tsx
index 72b9c38a03e8..e3b2f995b1c3 100644
--- a/webapp/src/components/tutorial/TutorialContainer.tsx
+++ b/webapp/src/components/tutorial/TutorialContainer.tsx
@@ -23,7 +23,6 @@ interface TutorialContainerProps {
     hasTemplate?: boolean;
     preferredEditor?: string;
     hasBeenResized?: boolean;
-    hideDone?: boolean;
 
     tutorialOptions?: pxt.tutorial.TutorialOptions; // TODO (shakao) pass in only necessary subset
     tutorialSimSidebar?: boolean;
@@ -38,7 +37,7 @@ const MAX_HEIGHT = 194;
 
 export function TutorialContainer(props: TutorialContainerProps) {
     const { parent, tutorialId, name, steps, hideIteration, hasTemplate,
-        preferredEditor, tutorialOptions, hideDone, onTutorialStepChange, onTutorialComplete,
+        preferredEditor, tutorialOptions, onTutorialStepChange, onTutorialComplete,
         setParentHeight } = props;
     const [ currentStep, setCurrentStep ] = React.useState(props.currentStep || 0);
     const [ stepErrorAttemptCount, setStepErrorAttemptCount ] = React.useState(0);
@@ -236,6 +235,7 @@ export function TutorialContainer(props: TutorialContainerProps) {
         })
     }
 
+    const hideDone = tutorialOptions.metadata?.hideDone;
     const doneButtonLabel = lf("Finish the tutorial.");
     const nextButtonLabel = lf("Go to the next step of the tutorial.");
     const nextButton = isDone
diff --git a/webapp/src/sidepanel.tsx b/webapp/src/sidepanel.tsx
index 0b4b5358b7b5..9eecf339bbb1 100644
--- a/webapp/src/sidepanel.tsx
+++ b/webapp/src/sidepanel.tsx
@@ -233,7 +233,6 @@ export class Sidepanel extends data.Component<SidepanelProps, SidepanelState> {
             preferredEditor={tutorialOptions.metadata?.preferredEditor}
             tutorialSimSidebar={this.props.tutorialSimSidebar}
             hasBeenResized={this.state.resized && this.state.shouldResize}
-            hideDone={tutorialOptions.metadata?.hideDone}
             onTutorialStepChange={onTutorialStepChange}
             onTutorialComplete={onTutorialComplete}
             setParentHeight={newSize => this.setComponentHeight(newSize, false)} /> : undefined;