URL selector cancel button cancels ongoing url selection

Changelog-entry: URL selector cancel button cancels ongoing url selection
Change-type: patch

lib/gui/app/components/source-selector/source-selector.tsx

@@ -290,7 +290,7 @@ export class SourceSelector extends React.Component<
 		await this.selectImageByPath({
 			imagePath,
 			SourceType: isURL ? sourceDestination.Http : sourceDestination.File,
-		});
+		}).promise;
 	}
 
 	private reselectImage() {
@@ -346,12 +346,24 @@ export class SourceSelector extends React.Component<
 		}
 	}
 
-	private async selectImageByPath({ imagePath, SourceType }: SourceOptions) {
+	private selectImageByPath({
+		imagePath,
+		SourceType,
+	}: SourceOptions): { promise: Promise<void>; cancel: () => void } {
+		let cancelled = false;
+		return {
+			cancel: () => {
+				cancelled = true;
+			},
+			promise: (async () => {
 				try {
 					imagePath = await replaceWindowsNetworkDriveLetter(imagePath);
 				} catch (error) {
 					analytics.logException(error);
 				}
+				if (cancelled) {
+					return;
+				}
 
 				let source;
 				if (SourceType === sourceDestination.File) {
@@ -377,13 +389,22 @@ export class SourceSelector extends React.Component<
 
 				try {
 					const innerSource = await source.getInnerSource();
+					if (cancelled) {
+						return;
+					}
 					const metadata = (await innerSource.getMetadata()) as sourceDestination.Metadata & {
 						hasMBR: boolean;
 						partitions: MBRPartition[] | GPTPartition[];
 						path: string;
 						extension: string;
 					};
+					if (cancelled) {
+						return;
+					}
 					const partitionTable = await innerSource.getPartitionTable();
+					if (cancelled) {
+						return;
+					}
 					if (partitionTable) {
 						metadata.hasMBR = true;
 						metadata.partitions = partitionTable.partitions;
@@ -414,6 +435,8 @@ export class SourceSelector extends React.Component<
 						// Noop
 					}
 				}
+			})(),
+		};
 	}
 
 	private async openImageSelector() {
@@ -427,22 +450,22 @@ export class SourceSelector extends React.Component<
 				analytics.logEvent('Image selector closed');
 				return;
 			}
-			this.selectImageByPath({
+			await this.selectImageByPath({
 				imagePath,
 				SourceType: sourceDestination.File,
-			});
+			}).promise;
 		} catch (error) {
 			exceptionReporter.report(error);
 		}
 	}
 
-	private onDrop(event: React.DragEvent<HTMLDivElement>) {
+	private async onDrop(event: React.DragEvent<HTMLDivElement>) {
 		const [file] = event.dataTransfer.files;
 		if (file) {
-			this.selectImageByPath({
+			await this.selectImageByPath({
 				imagePath: file.path,
 				SourceType: sourceDestination.File,
-			});
+			}).promise;
 		}
 	}
 
@@ -486,6 +509,9 @@ export class SourceSelector extends React.Component<
 		const imageName = selectionState.getImageName();
 		const imageSize = selectionState.getImageSize();
 		const imageLogo = selectionState.getImageLogo();
+		let cancelURLSelection = () => {
+			// noop
+		};
 
 		return (
 			<>
@@ -587,6 +613,7 @@ export class SourceSelector extends React.Component<
 				{showURLSelector && (
 					<URLSelector
 						cancel={() => {
+							cancelURLSelection();
 							this.setState({
 								showURLSelector: false,
 							});
@@ -596,16 +623,17 @@ export class SourceSelector extends React.Component<
 							// if no file was resolved from the dialog.
 							if (!imageURL) {
 								analytics.logEvent('URL selector closed');
-								this.setState({
+							} else {
-									showURLSelector: false,
+								let promise;
-								});
+								({
-								return;
+									promise,
-							}
+									cancel: cancelURLSelection,
-
+								} = this.selectImageByPath({
-							await this.selectImageByPath({
 									imagePath: imageURL,
 									SourceType: sourceDestination.Http,
-							});
+								}));
+								await promise;
+							}
 							this.setState({
 								showURLSelector: false,
 							});