-
-
Notifications
You must be signed in to change notification settings - Fork 410
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: introduce version welcome dialog
- Loading branch information
1 parent
51c40fa
commit d19f588
Showing
7 changed files
with
275 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
155 changes: 155 additions & 0 deletions
155
arduino-ide-extension/src/browser/dialogs/version-welcome/version-welcome-component.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,155 @@ | ||
| import { nls } from '@theia/core/lib/common/nls'; | ||
| import React from '@theia/core/shared/react'; | ||
| // @ts-expect-error see https://github.com/microsoft/TypeScript/issues/49721#issuecomment-1319854183 | ||
| import type { Options } from 'react-markdown'; | ||
| import { ProgressInfo, UpdateInfo } from '../../../common/protocol/ide-updater'; | ||
| import ProgressBar from '../../components/ProgressBar'; | ||
|
|
||
| const ReactMarkdown = React.lazy<React.ComponentType<Options>>( | ||
| // @ts-expect-error see above | ||
| () => import('react-markdown') | ||
| ); | ||
|
|
||
| export interface UpdateProgress { | ||
| progressInfo?: ProgressInfo | undefined; | ||
| downloadFinished?: boolean; | ||
| downloadStarted?: boolean; | ||
| error?: Error; | ||
| } | ||
|
|
||
| export interface IDEUpdaterComponentProps { | ||
| updateInfo: UpdateInfo; | ||
| updateProgress: UpdateProgress; | ||
| openExternal: (url: string) => undefined; | ||
| } | ||
|
|
||
| export const IDEUpdaterComponent = ({ | ||
| updateInfo, | ||
| updateProgress: { | ||
| downloadStarted = false, | ||
| downloadFinished = false, | ||
| progressInfo, | ||
| error, | ||
| }, | ||
| openExternal, | ||
| }: IDEUpdaterComponentProps): React.ReactElement => { | ||
| const { version, releaseNotes } = updateInfo; | ||
| const [changelog, setChangelog] = React.useState<string>(''); | ||
| React.useEffect(() => { | ||
| if (releaseNotes) { | ||
| setChangelog( | ||
| typeof releaseNotes === 'string' | ||
| ? releaseNotes | ||
| : releaseNotes.reduce( | ||
| (acc, item) => (item.note ? (acc += `${item.note}\n\n`) : acc), | ||
| '' | ||
| ) | ||
| ); | ||
| } | ||
| }, [releaseNotes, changelog]); | ||
|
|
||
| const DownloadCompleted: () => React.ReactElement = () => ( | ||
| <div className="ide-updater-dialog--downloaded"> | ||
| <div> | ||
| {nls.localize( | ||
| 'arduino/ide-updater/versionDownloaded', | ||
| 'Arduino IDE {0} has been downloaded.', | ||
| version | ||
| )} | ||
| </div> | ||
| <div> | ||
| {nls.localize( | ||
| 'arduino/ide-updater/closeToInstallNotice', | ||
| 'Close the software and install the update on your machine.' | ||
| )} | ||
| </div> | ||
| </div> | ||
| ); | ||
|
|
||
| const DownloadStarted: () => React.ReactElement = () => ( | ||
| <div className="ide-updater-dialog--downloading"> | ||
| <div> | ||
| {nls.localize( | ||
| 'arduino/ide-updater/downloadingNotice', | ||
| 'Downloading the latest version of the Arduino IDE.' | ||
| )} | ||
| </div> | ||
| <ProgressBar percent={progressInfo?.percent} showPercentage /> | ||
| </div> | ||
| ); | ||
|
|
||
| const PreDownload: () => React.ReactElement = () => ( | ||
| <div className="ide-updater-dialog--pre-download"> | ||
| <div className="ide-updater-dialog--logo-container"> | ||
| <div className="ide-updater-dialog--logo"></div> | ||
| </div> | ||
| <div className="ide-updater-dialog--new-version-text dialogSection"> | ||
| <div className="dialogRow"> | ||
| <div className="bold"> | ||
| {nls.localize( | ||
| 'arduino/ide-updater/updateAvailable', | ||
| 'Update Available' | ||
| )} | ||
| </div> | ||
| </div> | ||
| <div className="dialogRow"> | ||
| {nls.localize( | ||
| 'arduino/ide-updater/newVersionAvailable', | ||
| 'A new version of Arduino IDE ({0}) is available for download.', | ||
| version | ||
| )} | ||
| </div> | ||
| {changelog && ( | ||
| <div className="dialogRow changelog-container"> | ||
| <div className="changelog"> | ||
| <React.Suspense | ||
| fallback={ | ||
| <div className="fallback"> | ||
| <div className="spinner" /> | ||
| </div> | ||
| } | ||
| > | ||
| <ReactMarkdown | ||
| components={{ | ||
| a: ({ href, children, ...props }) => ( | ||
| <a onClick={() => href && openExternal(href)} {...props}> | ||
| {children} | ||
| </a> | ||
| ), | ||
| }} | ||
| > | ||
| {changelog} | ||
| </ReactMarkdown> | ||
| </React.Suspense> | ||
| </div> | ||
| </div> | ||
| )} | ||
| </div> | ||
| </div> | ||
| ); | ||
|
|
||
| const GoToDownloadPage: () => React.ReactElement = () => ( | ||
| <div className="ide-updater-dialog--go-to-download-page"> | ||
| <div> | ||
| {nls.localize( | ||
| 'arduino/ide-updater/goToDownloadPage', | ||
| "An update for the Arduino IDE is available, but we're not able to download and install it automatically. Please go to the download page and download the latest version from there." | ||
| )} | ||
| </div> | ||
| </div> | ||
| ); | ||
|
|
||
| return ( | ||
| <div className="ide-updater-dialog--content"> | ||
| {!!error ? ( | ||
| <GoToDownloadPage /> | ||
| ) : downloadFinished ? ( | ||
| <DownloadCompleted /> | ||
| ) : downloadStarted ? ( | ||
| <DownloadStarted /> | ||
| ) : ( | ||
| <PreDownload /> | ||
| )} | ||
| </div> | ||
| ); | ||
| }; |
100 changes: 100 additions & 0 deletions
100
arduino-ide-extension/src/browser/dialogs/version-welcome/version-welcome-dialog.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,100 @@ | ||
| 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'; | ||
|
|
||
| @injectable() | ||
| export class VersionWelcomeDialogProps extends DialogProps {} | ||
|
|
||
| @injectable() | ||
| export class VersionWelcomeDialog extends ReactDialog<void> { | ||
| // @inject(LocalStorageService) | ||
| // private readonly localStorageService: LocalStorageService; | ||
| // @inject(AppService) | ||
| // private readonly appService: AppService; | ||
| @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/ide-updater/ideUpdaterDialog', | ||
| 'Welcome to the new Arduino IDE!' | ||
| ), | ||
| }); | ||
|
|
||
| this.node.id = 'version-welcome-dialog-container'; | ||
| this.contentNode.classList.add('version-welcome-dialog'); | ||
| } | ||
|
|
||
| protected render(): React.ReactNode { | ||
| return ( | ||
| <div> | ||
| <p> | ||
| 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"> | ||
| Please consider supporting our efforts to keep Arduino IDE free. | ||
| </p> | ||
| </div> | ||
| ); | ||
| } | ||
|
|
||
| override get value(): void { | ||
| return; | ||
| } | ||
|
|
||
| private appendButtons(): void { | ||
| const cancelButton = this.createButton( | ||
| nls.localize('arduino/ide-updater/skipVersionButton', 'Skip Version') | ||
| ); | ||
| 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/ide-updater/donateButton', 'Download') | ||
| ); | ||
| this.addAction(donateButton, this.openDonationPage.bind(this), 'click'); | ||
| this.controlPanel.appendChild(donateButton); | ||
| donateButton.focus(); | ||
| } | ||
|
|
||
| private readonly openDonationPage = () => { | ||
| const url = 'https://www.arduino.cc/en/donate'; | ||
| this.windowService.openNewWindow(url, { external: true }); | ||
| }; | ||
|
|
||
| private async updateTitleVersion(): Promise<void> { | ||
| debugger; | ||
| const appInfo = await this.appService.info(); | ||
| const { appVersion } = appInfo; | ||
| const title = nls.localize( | ||
| 'arduino/ide-updater/ideUpdaterDialog', | ||
| `Welcome to the new Arduino IDE ${appVersion}!`, | ||
| appVersion | ||
| ); | ||
| console.log('title', this.titleNode); | ||
| this.titleNode.innerHTML = title; | ||
| } | ||
|
|
||
| protected override onAfterAttach(msg: Message): void { | ||
| this.update(); | ||
| this.appendButtons(); | ||
| this.updateTitleVersion(); | ||
| super.onAfterAttach(msg); | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
3 changes: 3 additions & 0 deletions
3
arduino-ide-extension/src/browser/style/version-welcome-dialog.css
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,3 @@ | ||
| #version-welcome-dialog-container > .dialogBlock { | ||
| width: 546px; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters