From 0f6c9d1329031e4d320e31ae9bdbcb8fc95237c0 Mon Sep 17 00:00:00 2001
From: vince-fugnitto <vincent.fugnitto@ericsson.com>
Date: Thu, 22 Sep 2022 10:03:31 -0400
Subject: [PATCH] getting-started: add compatibility report link

The commit adds the "VS Code vs. Theia API Compatibility" report to the
`getting-started` page for easy access, and for newcomers interested in viewing
the report.

Signed-off-by: vince-fugnitto <vincent.fugnitto@ericsson.com>
---
 .../src/browser/getting-started-widget.tsx             | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/packages/getting-started/src/browser/getting-started-widget.tsx b/packages/getting-started/src/browser/getting-started-widget.tsx
index 18c97124f0311..6ad9451a04e85 100644
--- a/packages/getting-started/src/browser/getting-started-widget.tsx
+++ b/packages/getting-started/src/browser/getting-started-widget.tsx
@@ -76,6 +76,7 @@ export class GettingStartedWidget extends ReactWidget {
      * Collection of useful links to display for end users.
      */
     protected readonly documentationUrl = 'https://www.theia-ide.org/docs/';
+    protected readonly compatibilityUrl = 'https://eclipse-theia.github.io/vscode-theia-comparator/status.html';
     protected readonly extensionUrl = 'https://www.theia-ide.org/docs/authoring_extensions';
     protected readonly pluginUrl = 'https://www.theia-ide.org/docs/authoring_plugins';
 
@@ -299,6 +300,15 @@ export class GettingStartedWidget extends ReactWidget {
                     {nls.localizeByDefault('Documentation')}
                 </a>
             </div>
+            <div className='gs-action-container'>
+                <a
+                    role={'button'}
+                    tabIndex={0}
+                    onClick={() => this.doOpenExternalLink(this.compatibilityUrl)}
+                    onKeyDown={(e: React.KeyboardEvent) => this.doOpenExternalLinkEnter(e, this.compatibilityUrl)}>
+                    {nls.localize('theia/getting-started/apiComparator', 'VS Code API Compatibility')}
+                </a>
+            </div>
             <div className='gs-action-container'>
                 <a
                     role={'button'}