feat: introduce donation links in update flow

arduino-ide-extension/package.json

@@ -67,6 +67,7 @@
     "cross-fetch": "^3.1.5",
     "dateformat": "^3.0.3",
     "deepmerge": "^4.2.2",
+    "dompurify": "^2.4.7",
     "drivelist": "^9.2.4",
     "electron-updater": "^4.6.5",
     "fast-deep-equal": "^3.1.3",

arduino-ide-extension/src/browser/arduino-ide-frontend-module.ts

@@ -387,6 +387,10 @@ import {
 import { TreeViewDecoratorService } from '@theia/plugin-ext/lib/main/browser/view/tree-view-decorator-service';
 import { PLUGIN_VIEW_DATA_FACTORY_ID } from '@theia/plugin-ext/lib/main/browser/view/plugin-view-registry';
 import { TreeViewWidget } from './theia/plugin-ext/tree-view-widget';
+import {
+  VersionWelcomeDialog,
+  VersionWelcomeDialogProps,
+} from './dialogs/version-welcome-dialog';
 
 // Hack to fix copy/cut/paste issue after electron version update in Theia.
 // https://github.com/eclipse-theia/theia/issues/12487
@@ -1014,6 +1018,11 @@ export default new ContainerModule((bind, unbind, isBound, rebind) => {
     title: 'IDEUpdater',
   });
 
+  bind(VersionWelcomeDialog).toSelf().inSingletonScope();
+  bind(VersionWelcomeDialogProps).toConstantValue({
+    title: 'VersionWelcomeDialog',
+  });
+
   bind(UserFieldsDialog).toSelf().inSingletonScope();
   bind(UserFieldsDialogProps).toConstantValue({
     title: 'UserFields',

arduino-ide-extension/src/browser/contributions/check-for-ide-updates.ts

@@ -3,10 +3,14 @@ import { LocalStorageService } from '@theia/core/lib/browser/storage-service';
 import { inject, injectable } from '@theia/core/shared/inversify';
 import {
   IDEUpdater,
+  LAST_USED_IDE_VERSION,
   SKIP_IDE_VERSION,
 } from '../../common/protocol/ide-updater';
 import { IDEUpdaterDialog } from '../dialogs/ide-updater/ide-updater-dialog';
 import { Contribution } from './contribution';
+import { VersionWelcomeDialog } from '../dialogs/version-welcome-dialog';
+import { AppService } from '../app-service';
+import { SemVer } from 'semver';
 
 @injectable()
 export class CheckForIDEUpdates extends Contribution {
@@ -16,9 +20,15 @@ export class CheckForIDEUpdates extends Contribution {
   @inject(IDEUpdaterDialog)
   private readonly updaterDialog: IDEUpdaterDialog;
 
+  @inject(VersionWelcomeDialog)
+  private readonly versionWelcomeDialog: VersionWelcomeDialog;
+
   @inject(LocalStorageService)
   private readonly localStorage: LocalStorageService;
 
+  @inject(AppService)
+  private readonly appService: AppService;
+
   override onStart(): void {
     this.preferences.onPreferenceChanged(
       ({ preferenceName, newValue, oldValue }) => {
@@ -36,7 +46,7 @@ export class CheckForIDEUpdates extends Contribution {
     );
   }
 
-  override onReady(): void {
+  override async onReady(): Promise<void> {
     this.updater
       .init(
         this.preferences.get('arduino.ide.updateChannel'),
@@ -49,7 +59,13 @@ export class CheckForIDEUpdates extends Contribution {
         return this.updater.checkForUpdates(true);
       })
       .then(async (updateInfo) => {
-        if (!updateInfo) return;
+        if (!updateInfo) {
+          const isNewVersion = await this.isNewStableVersion();
+          if (isNewVersion) {
+            this.versionWelcomeDialog.open();
+          }
+          return;
+        }
         const versionToSkip = await this.localStorage.getData<string>(
           SKIP_IDE_VERSION
         );
@@ -64,6 +80,44 @@ export class CheckForIDEUpdates extends Contribution {
             e.message
           )
         );
+      })
+      .finally(() => {
+        this.setCurrentIDEVersion();
       });
   }
+
+  private async setCurrentIDEVersion(): Promise<void> {
+    try {
+      const { appVersion } = await this.appService.info();
+      const currSemVer = new SemVer(appVersion ?? '');
+      this.localStorage.setData(LAST_USED_IDE_VERSION, currSemVer.format());
+    } catch {
+      // ignore invalid versions
+    }
+  }
+
+  /**
+   * Check if user is running a new IDE version for the first time.
+   * @returns true if the current IDE version is greater than the last used version
+   * and both are non-prerelease versions.
+   */
+  private async isNewStableVersion(): Promise<boolean> {
+    try {
+      const { appVersion } = await this.appService.info();
+      const prevVersion = await this.localStorage.getData<string>(
+        LAST_USED_IDE_VERSION
+      );
+
+      const prevSemVer = new SemVer(prevVersion ?? '');
+      const currSemVer = new SemVer(appVersion ?? '');
+
+      if (prevSemVer.prerelease.length || currSemVer.prerelease.length) {
+        return false;
+      }
+
+      return currSemVer.compare(prevSemVer) === 1;
+    } catch (e) {
+      return false;
+    }
+  }
 }

arduino-ide-extension/src/browser/dialogs/ide-updater/ide-updater-dialog.tsx

@@ -17,6 +17,7 @@ import {
 } from '../../../common/protocol/ide-updater';
 import { LocalStorageService } from '@theia/core/lib/browser';
 import { WindowService } from '@theia/core/lib/browser/window/window-service';
+import { sanitize } from 'dompurify';
 
 @injectable()
 export class IDEUpdaterDialogProps extends DialogProps {}
@@ -165,6 +166,51 @@ export class IDEUpdaterDialog extends ReactDialog<UpdateInfo | undefined> {
     goToDownloadPageButton.focus();
   }
 
+  private appendDonateFooter() {
+    const footer = document.createElement('div');
+    footer.classList.add('ide-updater-dialog--footer');
+    const footerContent = document.createElement('div');
+    footerContent.classList.add('ide-updater-dialog--footer-content');
+    footer.appendChild(footerContent);
+
+    const footerLink = document.createElement('a');
+    footerLink.innerText = sanitize(
+      nls.localize('arduino/ide-updater/donateLinkText', 'donate to support us')
+    );
+    footerLink.classList.add('ide-updater-dialog--footer-link');
+    footerLink.onclick = () =>
+      this.openExternal('https://www.arduino.cc/en/donate');
+
+    const footerLinkIcon = document.createElement('span');
+    footerLinkIcon.title = nls.localize(
+      'arduino/ide-updater/donateLinkIconTitle',
+      'open donation page'
+    );
+    footerLinkIcon.classList.add('ide-updater-dialog--footer-link-icon');
+    footerLink.appendChild(footerLinkIcon);
+
+    const placeholderKey = '%%link%%';
+    const footerText = sanitize(
+      nls.localize(
+        'arduino/ide-updater/donateText',
+        'Open source is love, {0}',
+        placeholderKey
+      )
+    );
+    const placeholder = footerText.indexOf(placeholderKey);
+    if (placeholder !== -1) {
+      const parts = footerText.split(placeholderKey);
+      footerContent.appendChild(document.createTextNode(parts[0]));
+      footerContent.appendChild(footerLink);
+      footerContent.appendChild(document.createTextNode(parts[1]));
+    } else {
+      footerContent.appendChild(document.createTextNode(footerText));
+      footerContent.appendChild(footerLink);
+    }
+
+    this.controlPanel.insertAdjacentElement('afterend', footer);
+  }
+
   private openDownloadPage(): void {
     this.openExternal('https://www.arduino.cc/en/software');
     this.close();
@@ -187,6 +233,7 @@ export class IDEUpdaterDialog extends ReactDialog<UpdateInfo | undefined> {
       downloadStarted: true,
     });
     this.clearButtons();
+    this.appendDonateFooter();
     this.updater.downloadUpdate();
   }
 

arduino-ide-extension/src/browser/dialogs/version-welcome-dialog.tsx

@@ -0,0 +1,107 @@
+import React from '@theia/core/shared/react';
+import { inject, injectable } from '@theia/core/shared/inversify';
+import { Message } from '@theia/core/shared/@phosphor/messaging';
+import { ReactDialog } from '../theia/dialogs/dialogs';
+import { nls } from '@theia/core';
+import { DialogProps } from '@theia/core/lib/browser';
+import { WindowService } from '@theia/core/lib/browser/window/window-service';
+import { AppService } from '../app-service';
+import { sanitize } from 'dompurify';
+
+@injectable()
+export class VersionWelcomeDialogProps extends DialogProps {}
+
+@injectable()
+export class VersionWelcomeDialog extends ReactDialog<void> {
+  @inject(AppService)
+  private readonly appService: AppService;
+
+  @inject(WindowService)
+  private readonly windowService: WindowService;
+
+  constructor(
+    @inject(VersionWelcomeDialogProps)
+    protected override readonly props: VersionWelcomeDialogProps
+  ) {
+    super({
+      title: nls.localize(
+        'arduino/versionWelcome/title',
+        'Welcome to a new version of the Arduino IDE!'
+      ),
+    });
+    this.node.id = 'version-welcome-dialog-container';
+    this.contentNode.classList.add('version-welcome-dialog');
+  }
+
+  protected render(): React.ReactNode {
+    return (
+      <div>
+        <p>
+          {nls.localize(
+            'arduino/versionWelcome/donateMessage',
+            'Arduino is committed to keeping software free and open-source for everyone. Your donation helps us develop new features, improve libraries, and support millions of users worldwide.'
+          )}
+        </p>
+        <p className="bold">
+          {nls.localize(
+            'arduino/versionWelcome/donateMessage2',
+            'Please consider supporting our work on the free open source Arduino IDE.'
+          )}
+        </p>
+      </div>
+    );
+  }
+
+  override get value(): void {
+    return;
+  }
+
+  private appendButtons(): void {
+    const cancelButton = this.createButton(
+      nls.localize('arduino/versionWelcome/cancelButton', 'Maybe later')
+    );
+    cancelButton.classList.add('secondary');
+    cancelButton.classList.add('cancel-button');
+    this.addAction(cancelButton, this.close.bind(this), 'click');
+    this.controlPanel.appendChild(cancelButton);
+
+    const donateButton = this.createButton(
+      nls.localize('arduino/versionWelcome/donateButton', 'Donate now')
+    );
+    this.addAction(donateButton, this.onDonateButtonClick.bind(this), 'click');
+    this.controlPanel.appendChild(donateButton);
+    donateButton.focus();
+  }
+
+  private onDonateButtonClick(): void {
+    this.openDonationPage();
+    this.close();
+  }
+
+  private readonly openDonationPage = () => {
+    const url = 'https://www.arduino.cc/en/donate';
+    this.windowService.openNewWindow(url, { external: true });
+  };
+
+  private async updateTitleVersion(): Promise<void> {
+    const appInfo = await this.appService.info();
+    const { appVersion } = appInfo;
+
+    if (appVersion) {
+      this.titleNode.innerText = sanitize(
+        nls.localize(
+          'arduino/versionWelcome/titleWithVersion',
+          'Welcome to the new Arduino IDE {0}!',
+          appVersion
+        )
+      );
+    }
+  }
+
+  protected override onAfterAttach(msg: Message): void {
+    this.update();
+    this.appendButtons();
+    this.updateTitleVersion();
+    super.onAfterAttach(msg);
+  }
+}

arduino-ide-extension/src/browser/style/ide-updater-dialog.css

@@ -34,6 +34,37 @@
     min-width: 0;
 }
 
+.ide-updater-dialog--footer {
+    display: inline-block;
+    margin-top: -16px;
+    padding: 12px 0 24px 0;
+    border-top: 1px solid var(--theia-editorWidget-border);
+}
+.ide-updater-dialog--footer-content {
+    float: right;
+}
+
+.ide-updater-dialog--footer-link {
+    display: inline-block;
+    color: var(--theia-textLink-foreground);
+    font-weight: 500;
+    line-height: 13px;
+}
+.ide-updater-dialog--footer-link:hover {
+    color: var(--theia-textLink-foreground);
+    cursor: pointer;
+}
+.ide-updater-dialog--footer-link-icon {
+    display: inline-block;
+    -webkit-mask: url(../icons/link-open-icon.svg) center no-repeat;
+    background-color: var(--theia-textLink-foreground);
+    height: 12px;
+    width: 12px;
+    cursor: pointer;
+    transform: translateY(2px);
+    margin-left: 4px;
+}
+
 .ide-updater-dialog .changelog {
     color: var(--theia-editor-foreground);
     background-color: var(--theia-editor-background);
@@ -109,6 +140,7 @@
     max-height: 100%;
     overflow: hidden;
     display: flex;
+    padding-bottom: 20px !important;
 }
 
 #ide-updater-dialog-container .skip-version-button {

arduino-ide-extension/src/browser/style/index.css

@@ -10,6 +10,7 @@
 @import "./settings-dialog.css";
 @import "./firmware-uploader-dialog.css";
 @import "./ide-updater-dialog.css";
+@import "./version-welcome-dialog.css";
 @import "./certificate-uploader-dialog.css";
 @import "./user-fields-dialog.css";
 @import "./debug.css";

arduino-ide-extension/src/browser/style/version-welcome-dialog.css

@@ -0,0 +1,7 @@
+#version-welcome-dialog-container > .dialogBlock {
+    width: 546px;
+
+    .bold {
+        font-weight: bold;
+    }
+}

arduino-ide-extension/src/common/protocol/ide-updater.ts

@@ -71,3 +71,4 @@ export interface IDEUpdaterClient {
 }
 
 export const SKIP_IDE_VERSION = 'skipIDEVersion';
+export const LAST_USED_IDE_VERSION = 'lastUsedIDEVersion';