add donate link to update flow

Author: davegarthsimpson

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 ? (
-        <GoToDownloadPage />
-      ) : downloadFinished ? (
-        <DownloadCompleted />
-      ) : downloadStarted ? (
-        <DownloadStarted />
-      ) : (
-        <PreDownload />
-      )}
+      <div>
+        {!!error ? (
+          <GoToDownloadPage />
+        ) : downloadFinished ? (
+          <DownloadCompleted />
+        ) : downloadStarted ? (
+          <DownloadStarted />
+        ) : (
+          <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

@@ -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/browser/style/ide-updater-dialog.css

@@ -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

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

@@ -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}'.",