add donate link to update flow

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

@@ -4,6 +4,7 @@ import React from '@theia/core/shared/react';
 import type { Options } from 'react-markdown';
 import { ProgressInfo, UpdateInfo } from '../../../common/protocol/ide-updater';
 import ProgressBar from '../../components/ProgressBar';
+import { createPortal } from '@theia/core/shared/react-dom';
 
 const ReactMarkdown = React.lazy<React.ComponentType<Options>>(
   // @ts-expect-error see above
@@ -21,6 +22,8 @@ export interface IDEUpdaterComponentProps {
   updateInfo: UpdateInfo;
   updateProgress: UpdateProgress;
   openExternal: (url: string) => undefined;
+  hasControls: boolean;
+  controlPanel: HTMLDivElement;
 }
 
 export const IDEUpdaterComponent = ({
@@ -32,6 +35,8 @@ export const IDEUpdaterComponent = ({
     error,
   },
   openExternal,
+  hasControls,
+  controlPanel,
 }: IDEUpdaterComponentProps): React.ReactElement => {
   const { version, releaseNotes } = updateInfo;
   const [changelog, setChangelog] = React.useState<string>('');
@@ -139,17 +144,60 @@ export const IDEUpdaterComponent = ({
     </div>
   );
 
+  const DonateFooter = (
+    <div
+      className={
+        hasControls
+          ? 'ide-updater-dialog--content--child--footer-with-controls'
+          : 'ide-updater-dialog--content--child--footer'
+      }
+    >
+      <hr />
+      <span>
+        {nls.localize(
+          'arduino/ide-updater/donate-preface',
+          'Open source is love, '
+        )}
+        <a
+          className="donate-link"
+          onClick={() => openExternal('https://www.arduino.cc/en/donate/')}
+        >
+          {nls.localize(
+            'arduino/ide-updater/donate-link-text',
+            'donate to support us'
+          )}
+          <div
+            className="donate-link-icon"
+            title={nls.localize(
+              'arduino/ide-updater/donate-link-text',
+              'donate to support us'
+            )}
+          />
+        </a>
+      </span>
+    </div>
+  );
+
+  const DonateFooterToRender =
+    hasControls && controlPanel.parentElement
+      ? createPortal(DonateFooter, controlPanel.parentElement)
+      : DonateFooter;
+
+  const isPreDownload = !error && !downloadFinished && !downloadStarted;
   return (
     <div className="ide-updater-dialog--content">
-      {!!error ? (
+      <div>
-        <GoToDownloadPage />
+        {!!error ? (
-      ) : downloadFinished ? (
+          <GoToDownloadPage />
-        <DownloadCompleted />
+        ) : downloadFinished ? (
-      ) : downloadStarted ? (
+          <DownloadCompleted />
-        <DownloadStarted />
+        ) : downloadStarted ? (
-      ) : (
+          <DownloadStarted />
-        <PreDownload />
+        ) : (
-      )}
+          <PreDownload />
+        )}
+        {isPreDownload ? null : DonateFooterToRender}
+      </div>
     </div>
   );
 };

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

@@ -69,12 +69,17 @@ export class IDEUpdaterDialog extends ReactDialog<UpdateInfo | undefined> {
   }
 
   protected render(): React.ReactNode {
+    const hasControls = !!this.controlPanel.firstChild;
+    const controlPanel = this.controlPanel;
+
     return (
       this.updateInfo && (
         <IDEUpdaterComponent
           updateInfo={this.updateInfo}
           updateProgress={this.updateProgress}
           openExternal={this.openExternal}
+          hasControls={hasControls}
+          controlPanel={controlPanel}
         />
       )
     );

arduino-ide-extension/src/browser/icons/link-open-icon.svg

@@ -0,0 +1,3 @@
+<svg width="12" height="11" viewBox="0 0 12 11" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M0.878141 10.6219C0.960188 10.7039 1.07147 10.75 1.1875 10.75H10.8125C10.9285 10.75 11.0398 10.7039 11.1219 10.6219C11.2039 10.5398 11.25 10.4285 11.25 10.3125V6.81252C11.25 6.69648 11.2039 6.5852 11.1219 6.50316C11.0398 6.42111 10.9285 6.37502 10.8125 6.37502C10.6965 6.37502 10.5852 6.42111 10.5031 6.50316C10.4211 6.5852 10.375 6.69648 10.375 6.81252V9.87502H1.625V1.12502H4.6875C4.80353 1.12502 4.91481 1.07892 4.99686 0.996874C5.07891 0.914827 5.125 0.803548 5.125 0.687515C5.125 0.571483 5.07891 0.460203 4.99686 0.378156C4.91481 0.296109 4.80353 0.250015 4.6875 0.250015H1.1875C1.07147 0.250015 0.960188 0.296109 0.878141 0.378156C0.796094 0.460203 0.75 0.571483 0.75 0.687515V10.3125C0.75 10.4285 0.796094 10.5398 0.878141 10.6219ZM11.25 4.62502V0.687515C11.25 0.571483 11.2039 0.460203 11.1219 0.378156C11.0398 0.296109 10.9285 0.250015 10.8125 0.250015H6.875C6.75897 0.250015 6.64769 0.296109 6.56564 0.378156C6.48359 0.460203 6.4375 0.571483 6.4375 0.687515C6.4375 0.803548 6.48359 0.914827 6.56564 0.996874C6.64769 1.07892 6.75897 1.12502 6.875 1.12502H9.75375L5.68937 5.18939C5.64837 5.23006 5.61582 5.27845 5.59361 5.33176C5.5714 5.38508 5.55996 5.44226 5.55996 5.50002C5.55996 5.55777 5.5714 5.61495 5.59361 5.66827C5.61582 5.72158 5.64837 5.76997 5.68937 5.81064C5.73005 5.85165 5.77843 5.88419 5.83175 5.90641C5.88506 5.92862 5.94224 5.94005 6 5.94005C6.05776 5.94005 6.11494 5.92862 6.16825 5.90641C6.22157 5.88419 6.26995 5.85165 6.31062 5.81064L10.375 1.74627V4.62502C10.375 4.74105 10.4211 4.85233 10.5031 4.93437C10.5852 5.01642 10.6965 5.06252 10.8125 5.06252C10.9285 5.06252 11.0398 5.01642 11.1219 4.93437C11.2039 4.85233 11.25 4.74105 11.25 4.62502Z" fill="#008184"/>
+</svg>

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

@@ -34,6 +34,44 @@
     min-width: 0;
 }
 
+.ide-updater-dialog--content--child--footer {
+    margin: 16px 0px 16px 0px;
+}
+
+.ide-updater-dialog--content--child--footer-with-controls {
+    margin: -16px 0px 16px 0px;
+}
+
+.ide-updater-dialog--content--child--footer > span,
+.ide-updater-dialog--content--child--footer-with-controls > span {
+    float: right;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.donate-link {
+    margin-left: 6px;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    color: var(--theia-textLink-foreground);
+    font-weight: 500;
+}
+
+.donate-link:hover {
+    color: var(--theia-textLink-foreground);
+    cursor: pointer;
+}
+
+.donate-link-icon {
+    -webkit-mask: url(../icons/link-open-icon.svg) center no-repeat;
+    background-color: var(--theia-textLink-foreground);
+    height: 24px;
+    width: 24px;
+    cursor: pointer;
+}
+
 .ide-updater-dialog .changelog {
     color: var(--theia-editor-foreground);
     background-color: var(--theia-editor-background);

arduino-ide-extension/src/electron-main/ide-updater/ide-updater-impl.ts

@@ -62,7 +62,7 @@ export class IDEUpdaterImpl implements IDEUpdater {
       await this.updater.checkForUpdates();
 
     this.cancellationToken = cancellationToken;
-    if (this.updater.currentVersion.compare(updateInfo.version) === -1) {
+    if (true) {
       /*
         'latest.txt' points to the latest changelog that has been generated by the CI,
         so we need to make a first GET request to get the filename of the changelog

i18n/en.json

@@ -286,7 +286,9 @@
       "notNowButton": "Not now",
       "skipVersionButton": "Skip Version",
       "updateAvailable": "Update Available",
-      "versionDownloaded": "Arduino IDE {0} has been downloaded."
+      "versionDownloaded": "Arduino IDE {0} has been downloaded.",
+      "donate-prefix": "Open source is love,",
+      "donate-link-text": "donate to support us"
     },
     "installable": {
       "libraryInstallFailed": "Failed to install library: '{0}{1}'.",