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,74 +346,97 @@ export class SourceSelector extends React.Component<
 		}
 	}
 
-	private async selectImageByPath({ imagePath, SourceType }: SourceOptions) {
+	private selectImageByPath({
-		try {
+		imagePath,
-			imagePath = await replaceWindowsNetworkDriveLetter(imagePath);
+		SourceType,
-		} catch (error) {
+	}: SourceOptions): { promise: Promise<void>; cancel: () => void } {
-			analytics.logException(error);
+		let cancelled = false;
-		}
+		return {
+			cancel: () => {
+				cancelled = true;
+			},
+			promise: (async () => {
+				try {
+					imagePath = await replaceWindowsNetworkDriveLetter(imagePath);
+				} catch (error) {
+					analytics.logException(error);
+				}
+				if (cancelled) {
+					return;
+				}
 
-		let source;
+				let source;
-		if (SourceType === sourceDestination.File) {
+				if (SourceType === sourceDestination.File) {
-			source = new sourceDestination.File({
+					source = new sourceDestination.File({
-				path: imagePath,
+						path: imagePath,
-			});
+					});
-		} else {
+				} else {
-			if (
+					if (
-				!imagePath.startsWith('https://') &&
+						!imagePath.startsWith('https://') &&
-				!imagePath.startsWith('http://')
+						!imagePath.startsWith('http://')
-			) {
+					) {
-				const invalidImageError = errors.createUserError({
+						const invalidImageError = errors.createUserError({
-					title: 'Unsupported protocol',
+							title: 'Unsupported protocol',
-					description: messages.error.unsupportedProtocol(),
+							description: messages.error.unsupportedProtocol(),
-				});
+						});
 
-				osDialog.showError(invalidImageError);
+						osDialog.showError(invalidImageError);
-				analytics.logEvent('Unsupported protocol', { path: imagePath });
+						analytics.logEvent('Unsupported protocol', { path: imagePath });
-				return;
+						return;
-			}
+					}
-			source = new sourceDestination.Http({ url: imagePath });
+					source = new sourceDestination.Http({ url: imagePath });
-		}
+				}
 
-		try {
+				try {
-			const innerSource = await source.getInnerSource();
+					const innerSource = await source.getInnerSource();
-			const metadata = (await innerSource.getMetadata()) as sourceDestination.Metadata & {
+					if (cancelled) {
-				hasMBR: boolean;
+						return;
-				partitions: MBRPartition[] | GPTPartition[];
+					}
-				path: string;
+					const metadata = (await innerSource.getMetadata()) as sourceDestination.Metadata & {
-				extension: string;
+						hasMBR: boolean;
-			};
+						partitions: MBRPartition[] | GPTPartition[];
-			const partitionTable = await innerSource.getPartitionTable();
+						path: string;
-			if (partitionTable) {
+						extension: string;
-				metadata.hasMBR = true;
+					};
-				metadata.partitions = partitionTable.partitions;
+					if (cancelled) {
-			} else {
+						return;
-				metadata.hasMBR = false;
+					}
-			}
+					const partitionTable = await innerSource.getPartitionTable();
-			metadata.path = imagePath;
+					if (cancelled) {
-			metadata.extension = path.extname(imagePath).slice(1);
+						return;
-			this.selectImage(metadata);
+					}
-			this.afterSelected({
+					if (partitionTable) {
-				imagePath,
+						metadata.hasMBR = true;
-				SourceType,
+						metadata.partitions = partitionTable.partitions;
-			});
+					} else {
-		} catch (error) {
+						metadata.hasMBR = false;
-			const imageError = errors.createUserError({
+					}
-				title: 'Error opening image',
+					metadata.path = imagePath;
-				description: messages.error.openImage(
+					metadata.extension = path.extname(imagePath).slice(1);
-					path.basename(imagePath),
+					this.selectImage(metadata);
-					error.message,
+					this.afterSelected({
-				),
+						imagePath,
-			});
+						SourceType,
-			osDialog.showError(imageError);
+					});
-			analytics.logException(error);
+				} catch (error) {
-		} finally {
+					const imageError = errors.createUserError({
-			try {
+						title: 'Error opening image',
-				await source.close();
+						description: messages.error.openImage(
-			} catch (error) {
+							path.basename(imagePath),
-				// Noop
+							error.message,
-			}
+						),
-		}
+					});
+					osDialog.showError(imageError);
+					analytics.logException(error);
+				} finally {
+					try {
+						await source.close();
+					} catch (error) {
+						// 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({
+									imagePath: imageURL,
+									SourceType: sourceDestination.Http,
+								}));
+								await promise;
 							}
-
-							await this.selectImageByPath({
-								imagePath: imageURL,
-								SourceType: sourceDestination.Http,
-							});
 							this.setState({
 								showURLSelector: false,
 							});