Add retry button to the errors modal in success screen

Change-type: patch
Signed-off-by: Lorenzo Alberto Maria Ambrosi <lorenzothunder.ambrosi@gmail.com>

lib/gui/app/components/finish/finish.tsx

@@ -65,7 +65,7 @@ function FinishPage({ goToMain }: { goToMain: () => void }) {
 			averageFlashingSpeed: averageSpeed,
 			devices: { failed, successful: 0 },
 		},
-	} = flashState.getFlashResults();
+	} = flashResults;
 	return (
 		<Flex height="100%" justifyContent="space-between">
 			<Flex
@@ -87,6 +87,7 @@ function FinishPage({ goToMain }: { goToMain: () => void }) {
 					skip={skip}
 					errors={errors}
 					mb="32px"
+					goToMain={goToMain}
 				/>
 
 				<FlashAnother

lib/gui/app/components/flash-results/flash-results.tsx

@@ -16,6 +16,7 @@
 
 import CircleSvg from '@fortawesome/fontawesome-free/svgs/solid/circle.svg';
 import CheckCircleSvg from '@fortawesome/fontawesome-free/svgs/solid/check-circle.svg';
+import TimesCircleSvg from '@fortawesome/fontawesome-free/svgs/solid/times-circle.svg';
 import * as _ from 'lodash';
 import outdent from 'outdent';
 import * as React from 'react';
@@ -32,32 +33,25 @@ import * as selection from '../../models/selection-state';
 import { middleEllipsis } from '../../utils/middle-ellipsis';
 import { Modal } from '../../styled-components';
 
-const ErrorsTable = styled(({ refFn, ...props }) => {
+const ErrorsTable = styled((props) => <Table<FlashError> {...props} />)`
-	return (
+&&& [data-display='table-head'],
-		<div>
+&&& [data-display='table-body'] {
-			<Table<FlashError> ref={refFn} {...props} />
+	> [data-display='table-row'] {
-		</div>
+		> [data-display='table-cell'] {
-	);
+			&:first-child {
-})`
+				width: 30%;
-	[data-display='table-head'] [data-display='table-cell'] {
+			}
-		width: 50%;
-		position: sticky;
-		top: 0;
-		background-color: ${(props) => props.theme.colors.quartenary.light};
-	}
 
-	[data-display='table-cell']:first-child {
+			&:nth-child(2) {
-		padding-left: 15px;
+				width: 20%;
-	}
+			}
 
-	[data-display='table-cell']:last-child {
+			&:last-child {
-		width: 150px;
+				width: 50%;
-	}
+			}
-
+		}
-	&& [data-display='table-row'] > [data-display='table-cell'] {
-		padding: 6px 8px;
-		color: #2a506f;
 	}
+}
 `;
 const DoneIcon = (props: {
 	skipped: boolean;
@@ -71,7 +65,6 @@ const DoneIcon = (props: {
 			marginTop: '-25px',
 			marginLeft: '13px',
 			zIndex: 1,
-			color: props.color,
 		},
 	};
 	return props.allFailed && !props.skipped ? (
@@ -112,12 +105,14 @@ const columns: Array<TableColumn<FlashError>> = [
 ];
 
 export function FlashResults({
+	goToMain,
 	image = '',
 	errors,
 	results,
 	skip,
 	...props
 }: {
+	goToMain: () => void;
 	image?: string;
 	errors: FlashError[];
 	skip: boolean;
@@ -167,7 +162,7 @@ export function FlashResults({
 			<Flex flexDirection="column" color="#7e8085">
 				{results.devices.successful !== 0 ? (
 					<Flex alignItems="center">
-						<CircleSvg width="14px" fill="#1ac135" color="#1ac135" />
+						<CircleSvg width="14px" fill="#1ac135" />
 						<Txt ml="10px" color="#fff">
 							{results.devices.successful}
 						</Txt>
@@ -178,7 +173,7 @@ export function FlashResults({
 				) : null}
 				{errors.length !== 0 ? (
 					<Flex alignItems="center">
-						<CircleSvg width="14px" fill="#ff4444" color="#ff4444" />
+						<CircleSvg width="14px" fill="#ff4444" />
 						<Txt ml="10px" color="#fff">
 							{errors.length}
 						</Txt>
@@ -222,10 +217,14 @@ export function FlashResults({
 						setShowErrorsInfo(false);
 						resetState();
 						getDrives()
-							.filter((drive) =>
+							.map((drive) => {
-								errors.some((error) => error.device === drive.device),
+								selection.deselectDrive(drive.device);
+								return drive.device;
+							})
+							.filter((driveDevice) =>
+								errors.some((error) => error.device === driveDevice),
 							)
-							.forEach((drive) => selection.selectDrive(drive.device));
+							.forEach((driveDevice) => selection.selectDrive(driveDevice));
 						goToMain();
 					}}
 				>

lib/gui/app/models/store.ts

@@ -334,12 +334,12 @@ function storeReducer(
 				action.data.results.averageFlashingSpeed = state.get(
 					'lastAverageFlashingSpeed',
 				);
+			}
 
-				if (action.data.results.skip) {
+			if (action.data.skip) {
-					return state
+				return state
-						.set('isFlashing', false)
+					.set('isFlashing', false)
-						.set('flashResults', Immutable.fromJS(action.data));
+					.set('flashResults', Immutable.fromJS(action.data));
-				}
 			}
 
 			return state

lib/shared/drive-constraints.ts

@@ -73,9 +73,7 @@ export function isSourceDrive(
 ): boolean {
 	if (selection) {
 		if (selection.drive) {
-			const sourcePath = selection.drive.devicePath || selection.drive.device;
+			return selection.drive.device === drive.device;
-			const drivePath = drive.devicePath || drive.device;
-			return pathIsInside(sourcePath, drivePath);
 		}
 		if (selection.path) {
 			return sourceIsInsideDrive(selection.path, drive);