From aee3a0a2812c48b02e23490fa2c33cf74b74f5c8 Mon Sep 17 00:00:00 2001
From: Alexis Svinartchouk <alexis@resin.io>
Date: Wed, 27 May 2020 17:45:44 +0200
Subject: [PATCH] Show image name and path in image name modal

Change-type: patch
---
 .../source-selector/source-selector.tsx       | 24 ++++++++++++-------
 1 file changed, 15 insertions(+), 9 deletions(-)

diff --git a/lib/gui/app/components/source-selector/source-selector.tsx b/lib/gui/app/components/source-selector/source-selector.tsx
index e83d7e5f..fbf3d963 100644
--- a/lib/gui/app/components/source-selector/source-selector.tsx
+++ b/lib/gui/app/components/source-selector/source-selector.tsx
@@ -439,9 +439,8 @@ export class SourceSelector extends React.Component<
 
 		const hasImage = selectionState.hasImage();
 
-		const imageBasename = hasImage
-			? path.basename(selectionState.getImagePath())
-			: '';
+		const imagePath = selectionState.getImagePath();
+		const imageBasename = hasImage ? path.basename(imagePath) : '';
 		const imageName = selectionState.getImageName();
 		const imageSize = selectionState.getImageSize();
 
@@ -466,7 +465,7 @@ export class SourceSelector extends React.Component<
 								<StepNameButton
 									plain
 									onClick={this.showSelectedImageDetails}
-									tooltip={imageBasename}
+									tooltip={imageName || imageBasename}
 								>
 									{middleEllipsis(imageName || imageBasename, 20)}
 								</StepNameButton>
@@ -533,21 +532,28 @@ export class SourceSelector extends React.Component<
 
 				{showImageDetails && (
 					<Modal
-						title="Image File Name"
+						title="Image"
 						done={() => {
 							this.setState({ showImageDetails: false });
 						}}
 					>
-						{selectionState.getImagePath()}
+						<Txt.p>
+							<Txt.span bold>Name: </Txt.span>
+							<Txt.span>{imageName || imageBasename}</Txt.span>
+						</Txt.p>
+						<Txt.p>
+							<Txt.span bold>Path: </Txt.span>
+							<Txt.span>{imagePath}</Txt.span>
+						</Txt.p>
 					</Modal>
 				)}
 
 				{showURLSelector && (
 					<URLSelector
-						done={async (imagePath: string) => {
+						done={async (imageURL: string) => {
 							// Avoid analytics and selection state changes
 							// if no file was resolved from the dialog.
-							if (!imagePath) {
+							if (!imageURL) {
 								analytics.logEvent('URL selector closed');
 								this.setState({
 									showURLSelector: false,
@@ -556,7 +562,7 @@ export class SourceSelector extends React.Component<
 							}
 
 							await this.selectImageByPath({
-								imagePath,
+								imagePath: imageURL,
 								SourceType: sourceDestination.Http,
 							});
 							this.setState({