Updates walkthrough

- fix review notes
- add contents to the left part
- add mock contents to the right part
- add feature flag

Author: nzaytsev

images/icons/rocket-filled.svg

@@ -52,5 +52,6 @@
   "repo-pull": 61745,
   "repo-push": 61746,
   "provider-jira": 61747,
-  "play-button": 61748
+  "play-button": 61748,
+  "rocket-filled": 61749
 }

images/icons/template/mapping.json

@@ -9774,6 +9774,13 @@
 					"fontPath": "dist/glicons.woff2",
 					"fontCharacter": "\\f134"
 				}
+			},
+			"gitlens-rocket-filled": {
+				"description": "rocket-filled icon",
+				"default": {
+					"fontPath": "dist/glicons.woff2",
+					"fontCharacter": "\\f135"
+				}
 			}
 		},
 		"menus": {
@@ -17788,38 +17795,38 @@
 					{
 						"id": "welcome-in-trial",
 						"title": "Welcome to GitLens",
-						"description": "Hope you're enjoying trial etc...",
+						"description": "Thanks for starting your **GitLens Pro** trial.\n\nComplete this walkthrough to experience enhanced PR review tools, deeper code history visualizations, and streamlined collaboration to help boost your productivity.\n\n[Continue the Walkthrough](command:gitlens.openWalkthrough?%7B%22step%22%3A%22visualize-code-history%22%7D)\n\nOnce your trial ends, you’ll return to **GitLens Community** — where you can still leverage features like in-editor blame annotations, hovers, CodeLens, and more. [Upgrade to GitLens Pro](command:gitlens.plus.upgrade) today to continue enjoying the full experience.\n\n[Upgrade to GitLens Pro](command:gitlens.plus.upgrade)",
 						"media": {
 							"markdown": "walkthroughs/welcome/welcome-in-trial.md"
 						},
 						"completionEvents": [
 							"onContext:gitlens:walkthroughState:gettingStarted == true"
 						],
-						"when": "false && (gitlens:plus:state == 1 || gitlens:plus:state == 3)"
+						"when": "config.gitlens.test.newWalkthrough && (gitlens:plus:state == 1 || gitlens:plus:state == 3)"
 					},
 					{
 						"id": "welcome-paid",
 						"title": "Welcome to GitLens | How to be successful",
-						"description": "Here's how to maximize your ux...",
+						"description": "As a ***GitLens Pro** user, you have access to powerful tools that accelerate PR reviews, provide deeper code history visualizations, and streamline collaboration across your team.\n\n[Continue the Walkthrough](command:gitlens.openWalkthrough?%7B%22step%22%3A%22visualize-code-history%22%7D)\n\nTo get the most out of your **GitLens Pro** experience, complete the walkthrough and visit our Help Center for in-depth guides.\n\n**[Learn more in the Help Center](https://help.gitkraken.com/gitlens/gitlens-home/)**",
 						"media": {
 							"markdown": "walkthroughs/welcome/welcome-paid.md"
 						},
 						"completionEvents": [
 							"onContext:gitlens:walkthroughState:gettingStarted == true"
 						],
-						"when": "false && gitlens:plus:state == 6"
+						"when": "config.gitlens.test.newWalkthrough && gitlens:plus:state == 6"
 					},
 					{
 						"id": "welcome-in-trial-expired",
 						"title": "Welcome to GitLens | Community vs. Pro",
-						"description": "Welcome back",
+						"description": "Thanks for installing GitLens, the #1 most downloaded Git extension in VS Code.\n\nYou’re currently using **GitLens Community**, our free extension that helps you track code changes and who made them, with features like in-editor blame annotations, hovers, CodeLens, and more.\n\n**Unlock more powerful tools - Start a free trial of GitLens Pro.**\n\n[Get Started with GitLens Pro](command:gitlens.plus.upgrade)\n\nWith GitLens Pro, you can accelerate PR reviews, visualize code history in-depth, and enhance collaboration across your team. It’s the perfect upgrade to streamline your VS Code workflow.",
 						"media": {
 							"markdown": "walkthroughs/welcome/welcome-in-trial-expired"
 						},
 						"completionEvents": [
 							"onContext:gitlens:walkthroughState:gettingStarted == true"
 						],
-						"when": "false && (gitlens:plus:state == 4 || gitlens:plus:state == 5 || gitlens:plus:state == 2)"
+						"when": "config.gitlens.test.newWalkthrough && (gitlens:plus:state == 4 || gitlens:plus:state == 5 || gitlens:plus:state == 2)"
 					},
 					{
 						"id": "get-started-community",
@@ -17831,7 +17838,7 @@
 						"completionEvents": [
 							"onContext:gitlens:walkthroughState:gettingStarted == true"
 						],
-						"when": "false && gitlens:plus:state <= 0"
+						"when": "config.gitlens.test.newWalkthrough && gitlens:plus:state <= 0"
 					},
 					{
 						"id": "visualize-code-history",
@@ -17843,51 +17850,52 @@
 						"completionEvents": [
 							"onContext:gitlens:walkthroughState:visualizeCodeHistory == true"
 						],
-						"when": "false"
+						"when": "config.gitlens.test.newWalkthrough"
 					},
 					{
 						"id": "accelerate-pr-reviews",
 						"title": "Accelerate PR Reviews",
-						"description": "",
+						"description": "$(rocket) **Launchpad - PR Hub**\n\nManage [GitHub](https://github.com/) PRs by status, helping you quickly prioritize tasks in your workflow and identify bottlenecks —all within VS Code.\n\n[View My PRs in Launchpad](command:gitlens.showLaunchpadView)\n\n💡 **Integrate your [Github or host provider](command:gitlens.connectRemoteProvider)** to use Launchpad and accelerate PR reviews\n\n$(folder-opened) **Worktrees - Multi-branch efficiency**\n\nWork on multiple branches simultaneously—hotfixes, new features, or experiments—without disrupting your main workspace.\n\n\n[Add a worktree](command:gitlens.gitCommands.worktree.create)\n$(gitlens-play-button) [Watch a video on Accelerate PR Reviews](http://example.com)",
 						"media": {
 							"markdown": "walkthroughs/welcome/accelerate-pr-reviews.md"
 						},
 						"completionEvents": [
 							"onContext:gitlens:walkthroughState:prReviews == true"
 						],
-						"when": "false"
+						"when": "config.gitlens.test.newWalkthrough"
 					},
 					{
 						"id": "streamline-collaboration",
 						"title": "Streamline Collaboration",
-						"description": "",
+						"description": "$(gitlens-cloud-patch) **Cloud Patches - Work on feedback before PRs**\n\nMake your work accessible anytime, anywhere without having to commit to the repo or disrupt CI. Keep up your team’s momentum with Cloud Patches.\n\n[Open Cloud Patches](command:gitlens.views.drafts.focus)\n\n$(gitlens-code-suggestion) **Code Suggest**\n\nTake action on GitHub & GitLab PRs right from GitLens. Review code suggestions, and send suggestions to GitKraken users on your team.\n\n$(gitlens-play-button) [Watch a video on GitLens Collaboration](https://example.com)",
 						"media": {
 							"markdown": "walkthroughs/welcome/streamline-collaboration.md"
 						},
 						"completionEvents": [
 							"onContext:gitlens:walkthroughState:streamlineCollaboration == true"
 						],
-						"when": "false"
+						"when": "config.gitlens.test.newWalkthrough"
 					},
 					{
 						"id": "improve-workflows-with-integrations",
 						"title": "Improve Workflows With Integrations",
-						"description": "",
+						"description": "**Integrations**\n\nReduce context switching and increase productivity by connecting to GitHub, GitLab, Azure DevOps, and Bitbucket to sync repos and track issues effortlessly in Launchpad - your PR hub.\n\n[Connect Integrations](command:gitlens.plus.cloudIntegrations.connect)\n\n**Autolinks**\n\nAll integrations provide automatic linking, which enables you to link to external services like Jira, and Trello.\n\n**Customize Autolinks**\n\nConfigure autolinks for custom pattern-matching with other services to easily link external references, such as Jira issues or Zendesk tickets, directly in your commit messages.\n\n**[Configure autolinks](command:gitlens.showSettingsPage!autolinks)**\n\n$(gitlens-play-button) [Watch a video on Integrations](https://example.com)",
 						"media": {
 							"markdown": "walkthroughs/welcome/improve-workflows-with-integrations.md"
 						},
 						"completionEvents": [
 							"onContext:gitlens:walkthroughState:integrations == true"
 						],
-						"when": "false"
+						"when": "config.gitlens.test.newWalkthrough"
 					},
 					{
 						"id": "get-started",
 						"title": "Welcome & Overview",
 						"description": "Quickly [get started](command:gitlens.showWelcomePage \"Opens GitLens Welcome\") and discover the many powerful GitLens features, or sit back and watch our [tutorial video](https://www.youtube.com/watch?v=UQPb73Zz9qk \"Watch the Getting Started Tutorial video\").\n\n**Side Bar & Panel Overview**\n\n$(gitlens-gitlens-inspect)  **GitLens Inspect** — an x-ray into your code's history. Offers contextual insights & details focused on what you're currently working on.\n\n[Open GitLens Inspect](command:workbench.view.extension.gitlensInspect)\n\n$(gitlens-gitlens)  **GitLens** — quick access to many GitLens features. And the home of our team and collaboration services.\n\n[Open GitLens](command:workbench.view.extension.gitlens)\n\n$(source-control) **Source Control** — packed with additional features for working with, exploring, and managing your repositories.\n\n[Open Source Control](command:workbench.view.scm)\n\n$(layout-panel)  **(Bottom) Panel** — access to the powerful Commit Graph and its dedicated details view.\n\n[Open Commit Graph](command:gitlens.showGraphView)\n💡 While our views are arranged for focus and productivity, you can easily drag them around to suit your needs. Use the [Reset Views Layout](command:workbench.action.quickOpen?%22>GitLens%3A%20Reset%20Views%20Layout%22) command to quickly get back to the default layout.\n💡 **Want more control?** Use the interactive [GitLens Settings](command:gitlens.showSettingsPage \"Opens GitLens Settings\") editor to customize GitLens to meet your needs.",
 						"media": {
 							"markdown": "walkthroughs/welcome/get-started.md"
-						}
+						},
+						"when": "!config.gitlens.test.newWalkthrough"
 					},
 					{
 						"id": "core-features",
@@ -17896,7 +17904,8 @@
 						"media": {
 							"altText": "Illustrations of Inline Blame, Codelens, File Annotations and Revision Navigation",
 							"svg": "walkthroughs/welcome/core-features.svg"
-						}
+						},
+						"when": "!config.gitlens.test.newWalkthrough"
 					},
 					{
 						"id": "pro-features",
@@ -17905,7 +17914,7 @@
 						"media": {
 							"markdown": "walkthroughs/welcome/pro-features.md"
 						},
-						"when": "gitlens:plus:state >= 0 && gitlens:plus:state <= 2"
+						"when": "!config.gitlens.test.newWalkthrough && gitlens:plus:state >= 0 && gitlens:plus:state <= 2"
 					},
 					{
 						"id": "pro-trial",
@@ -17914,7 +17923,7 @@
 						"media": {
 							"markdown": "walkthroughs/welcome/pro-trial.md"
 						},
-						"when": "gitlens:plus:state == 3"
+						"when": "!config.gitlens.test.newWalkthrough && gitlens:plus:state == 3"
 					},
 					{
 						"id": "pro-upgrade",
@@ -17923,7 +17932,7 @@
 						"media": {
 							"markdown": "walkthroughs/welcome/pro-upgrade.md"
 						},
-						"when": "gitlens:plus:state == 4"
+						"when": "!config.gitlens.test.newWalkthrough && gitlens:plus:state == 4"
 					},
 					{
 						"id": "pro-reactivate",
@@ -17932,7 +17941,7 @@
 						"media": {
 							"markdown": "walkthroughs/welcome/pro-reactivate.md"
 						},
-						"when": "gitlens:plus:state == 5"
+						"when": "!config.gitlens.test.newWalkthrough && gitlens:plus:state == 5"
 					},
 					{
 						"id": "pro-paid",
@@ -17941,7 +17950,7 @@
 						"media": {
 							"markdown": "walkthroughs/welcome/pro-paid.md"
 						},
-						"when": "gitlens:plus:state == 6"
+						"when": "!config.gitlens.test.newWalkthrough && gitlens:plus:state == 6"
 					},
 					{
 						"id": "visualize",
@@ -17950,7 +17959,8 @@
 						"media": {
 							"altText": "Illustrations of the Commit Graph & Visual File History",
 							"svg": "walkthroughs/welcome/visualize.svg"
-						}
+						},
+						"when": "!config.gitlens.test.newWalkthrough"
 					},
 					{
 						"id": "launchpad",
@@ -17959,7 +17969,8 @@
 						"media": {
 							"altText": "Illustrations of Launchpad",
 							"svg": "walkthroughs/welcome/launchpad-quick.svg"
-						}
+						},
+						"when": "!config.gitlens.test.newWalkthrough"
 					},
 					{
 						"id": "code-collab",
@@ -17968,23 +17979,26 @@
 						"media": {
 							"altText": "Illustrations of Code Suggest & Cloud Patches",
 							"image": "walkthroughs/welcome/code-collab.png"
-						}
+						},
+						"when": "!config.gitlens.test.newWalkthrough"
 					},
 					{
 						"id": "integrations",
 						"title": "Integrate with Git Hosting & Issue Services",
 						"description": "GitLens automatically detects patterns in commit messages to generate autolinks to pull requests and issues for Git hosting services including GitHub, GitLab, Gitea, Gerrit, Google Source, Bitbucket, Azure DevOps, and custom servers.\n\n[Configure autolinks](command:gitlens.showSettingsPage!autolinks) for custom pattern-matching with other services.\n\n**Rich Integrations with GitHub, GitLab, and Jira**\nConnect [GitHub](command:gitlens.connectRemoteProvider), [GitLab](command:gitlens.connectRemoteProvider), and [Jira](command:gitlens.plus.cloudIntegrations.connect?%7B%22integrationIds%22%3A%5B%22jira%22%5D%2C%22source%22%3A%22walkthrough%22%2C%22detail%22%3A%7B%22action%22%3A%22connect%22%2C%22integration%22%3A%22jira%22%7D%7D) integrations to enhance autolinks with more data available via APIs, associate branches and commits with PRs, and review pull requests within VS Code.",
 						"media": {
 							"markdown": "walkthroughs/welcome/integrations.md"
-						}
+						},
+						"when": "!config.gitlens.test.newWalkthrough"
 					},
 					{
 						"id": "more",
 						"title": "And More!",
 						"description": "**Rebase got you down?**\nEasily visualize and configure interactive rebase operations with the intuitive and user-friendly Interactive Rebase Editor\n\n**Trouble remembering Git commands?**\nNow you don't have to with the Git Command Palette — a guided, step-by-step experience to many common Git commands.\n\n[Open Git Command Palette](command:gitlens.gitCommands)\n\n**Terminal your jam?**\nQuickly jump to more details on commits, branches, tags, and more with autolinks in the Integrated Terminal.\n\n**Not sure what you are looking for?**\nOpen the Command Palette and explore the many available commands.\n\n[Open GitLens Commands](command:workbench.action.quickOpen?%22>GitLens%3A%22)",
 						"media": {
 							"markdown": "walkthroughs/welcome/more-features.md"
-						}
+						},
+						"when": "!config.gitlens.test.newWalkthrough"
 					}
 				]
 			}

package.json

@@ -20,6 +20,9 @@ export enum WalkthroughContextKeys {
 export class WalkthroughStateProvider implements Disposable {
 	protected disposables: Disposable[] = [];
 	private readonly state = new Map<WalkthroughContextKeys, boolean>();
+	private isInitialized = false;
+	private _initPromise: Promise<void> | undefined;
+
 	/**
 	 * using reversed map (instead of direct map as walkthroughToTracking Record<WalkthroughContextKeys, TrackedUsageKeys[]>)
 	 * makes code less readable, but prevents duplicated usageTracker keys
@@ -28,6 +31,7 @@ export class WalkthroughStateProvider implements Disposable {
 		[`command:${Commands.PlusStartPreviewTrial}:executed`]: WalkthroughContextKeys.GettingStarted,
 		[`command:${Commands.PlusReactivateProTrial}:executed`]: WalkthroughContextKeys.GettingStarted,
 		[`command:${Commands.ShowWelcomePage}:executed`]: WalkthroughContextKeys.GettingStarted,
+		[`command:${Commands.OpenWalkthrough}:executed`]: WalkthroughContextKeys.GettingStarted,
 
 		'graphDetailsView:shown': WalkthroughContextKeys.VisualizeCodeHistory,
 		'graphView:shown': WalkthroughContextKeys.VisualizeCodeHistory,
@@ -66,11 +70,6 @@ export class WalkthroughStateProvider implements Disposable {
 			this.state.set(key, false);
 		}
 		entries(this.walkthroughByTracking).forEach(([usageKey, walkthroughKey]) => {
-			console.log('candidate to completeStep', {
-				usageKey: usageKey,
-				walkthroughKey: walkthroughKey,
-				isUsed: this.container.usage.isUsed(usageKey),
-			});
 			if (!this.state.get(walkthroughKey) && this.container.usage.isUsed(usageKey)) {
 				void this.completeStep(walkthroughKey);
 			}
@@ -90,15 +89,31 @@ export class WalkthroughStateProvider implements Disposable {
 		}
 	}
 
+	/**
+	 * Walkthrough view is not ready to listen to context changes immediately after opening VSCode with the walkthrough page opened
+	 * As we're not able to check if the walkthrough is ready, we need to add a delay.
+	 * The 1s delay will not be too annoying for user but it's enough to init
+	 */
+	private async waitForWalkthroughInitialized() {
+		if (this.isInitialized) {
+			return;
+		}
+		if (!this._initPromise) {
+			this._initPromise = wait(1000).then(() => {
+				this.isInitialized = true;
+			});
+		}
+		await this._initPromise;
+	}
+
 	/**
 	 * Set up the walkthrough step completed.
 	 * According to [VSCode docs](https://code.visualstudio.com/api/references/contribution-points?source=post_page#Completion-events)
 	 * we don't have an ability to reset the flag
 	 */
 	private async completeStep(key: WalkthroughContextKeys) {
-		console.log('completeStep', { key: key });
 		this.state.set(key, true);
-		await wait(1000); // wait uncontrolled walkthrough view to be loaded
+		await this.waitForWalkthroughInitialized();
 		void setContext(`gitlens:walkthroughState:${key}`, true);
 	}