wip

lib/gui/app/components/drive-selector2/drive-selector.tsx

@@ -43,10 +43,10 @@ interface CompatibilityStatus {
 }
 
 interface DriveSelectorProps {
+	title: string;
 	close: () => void;
-  selectDrive: (drive: Drive) => void;
+	setSelectedDrives: (drives: Drive[]) => void;
-  deselectDrive: (drive: Drive) => void;
+	isDriveSelected: (drive: Drive) => boolean;
-  isDriveSelected: (drive: Drive) => boolean;
 	isDriveValid: (drive: Drive) => boolean;
 	getDriveBadges: (drive: Drive) => CompatibilityStatus[];
 }
@@ -139,7 +139,7 @@ export class DriveSelector2 extends React.Component<
 		for (let i = 0; i < drives.length; i++) {
 			drives[i] = { ...drives[i] };
 		}
-    drives = sortBy(drives, 'device');
+		drives = sortBy(drives, 'device');
 		const selected = drives.filter(d => this.props.isDriveSelected(d));
 		const disabledDrives = drives
 			.filter(d => !this.props.isDriveValid(d))
@@ -192,22 +192,20 @@ export class DriveSelector2 extends React.Component<
 			);
 		}
 		result.push(
-			...this.props.getDriveBadges(row).map(
+			...this.props.getDriveBadges(row).map((status: CompatibilityStatus) => {
-				(status: CompatibilityStatus) => {
+				const props: {
-					const props: {
+					key: string;
-						key: string;
+					xsmall: true;
-						xsmall: true;
+					danger?: boolean;
-						danger?: boolean;
+					warning?: boolean;
-						warning?: boolean;
+				} = { xsmall: true, key: status.message };
-					} = { xsmall: true, key: status.message };
+				if (status.type === COMPATIBILITY_STATUS_TYPES.ERROR) {
-					if (status.type === COMPATIBILITY_STATUS_TYPES.ERROR) {
+					props.danger = true;
-						props.danger = true;
+				} else if (status.type === COMPATIBILITY_STATUS_TYPES.WARNING) {
-					} else if (status.type === COMPATIBILITY_STATUS_TYPES.WARNING) {
+					props.warning = true;
-						props.warning = true;
+				}
-					}
+				return <Badge {...props}>{status.message}</Badge>;
-					return <Badge {...props}>{status.message}</Badge>;
+			}),
-				},
-			),
 		);
 		return <React.Fragment>{result}</React.Fragment>;
 	}
@@ -231,7 +229,7 @@ export class DriveSelector2 extends React.Component<
 				<Modal
 					titleElement={
 						<div style={titleStyle}>
-							Available targets
+							{this.props.title}
 							<span style={subtitleStyle}>
 								{this.state.drives.length} found
 							</span>
@@ -261,13 +259,6 @@ export class DriveSelector2 extends React.Component<
 	}
 
 	private onCheck(checkedDrives: Drive[]): void {
-		const checkedDevices = checkedDrives.map(d => d.device);
+		this.props.setSelectedDrives(checkedDrives);
-		for (const drive of getDrives()) {
-			if (checkedDevices.indexOf(drive.device) !== -1) {
-				this.props.selectDrive(drive);
-			} else {
-				this.props.deselectDrive(drive);
-			}
-		}
 	}
 }

lib/gui/app/components/drive-selector2/index.ts

@@ -25,10 +25,14 @@ angular
 	.module(MODULE_NAME, [])
 	.component(
 		'driveSelector2',
-		react2angular(
+		react2angular(DriveSelector2, [
-			DriveSelector2,
+			'close',
-			['close', 'selectDrive', 'deselectDrive', 'isDriveSelected', 'isDriveValid', 'getDriveBadges']
+			'getDriveBadges',
-		)
+			'isDriveSelected',
-	)
+			'isDriveValid',
+			'setSelectedDrives',
+			'title',
+		]),
+	);
 
 export = MODULE_NAME;

lib/gui/app/pages/main/controllers/drive-selection.js

@@ -22,6 +22,7 @@ const prettyBytes = require('pretty-bytes')
 const store = require('../../../models/store')
 // eslint-disable-next-line node/no-missing-require
 const settings = require('../../../models/settings')
+const availableDrives = require('../../../models/available-drives')
 const selectionState = require('../../../models/selection-state')
 const driveConstraints = require('../../../modules/drive-constraints')
 const analytics = require('../../../modules/analytics')
@@ -171,12 +172,15 @@ module.exports = function ($timeout, DriveSelectorService) {
     $timeout()
   }
 
-  this.selectDrive = (drive) => {
+  this.setSelectedDrives = (drives) => {
-    return selectionState.selectDrive(drive.device)
+		const devices = drives.map(d => d.device);
-  }
+		for (const drive of availableDrives.getDrives()) {
-
+			if (devices.indexOf(drive.device) !== -1) {
-  this.deselectDrive = (drive) => {
+        selectionState.selectDrive(drive.device)
-    return selectionState.deselectDrive(drive.device)
+			} else {
+        selectionState.deselectDrive(drive.device)
+			}
+		}
   }
 
   this.isDriveSelected = (drive) => {

lib/gui/app/pages/main/controllers/image-selection.js

@@ -277,28 +277,38 @@ module.exports = function (
     $timeout()
   }
 
-  this.closeDriveSelector = () => {
+  this.closeDriveSelectorModal = () => {
     this.driveSelectorModalOpen = false;
     $timeout()
   }
 
-  this.selectDrive = (drive) => {
+  this.setSelectedDrives = (drives) => {
-    selectionState.selectImage({
+    const currentlySelected = this.getSelectedDrive()
-      path: drive.device,
+    if (currentlySelected) {
-      size: drive.size,
+      drives = drives.filter(d => d.device !== currentlySelected.path)
-      isDrive: true
+    }
-    })
+    if (drives.length === 0) {
+      this.deselectImage()
+    } else {
+      selectionState.selectImage({
+        path: drives[0].device,
+        size: drives[0].size,
+        isDrive: true
+      })
+
+    }
   }
 
-  this.deselectDrive = (drive) => {
+  this.getSelectedDrive = () => {
-    if (this.isDriveSelected(drive)) {
+    const image = selectionState.getImage()
-      this.deselectImage()
+    if (image && image.isDrive) {
+      return image
     }
   }
 
   this.isDriveSelected = (drive) => {
-    const image = selectionState.getImage()
+    const selectedDrive = this.getSelectedDrive()
-    return image && image.isDrive && image.path === drive.device
+    return selectedDrive && selectedDrive.path === drive.device
   }
 
   this.isDriveValid = (drive) => {

lib/gui/app/pages/main/templates/main.tpl.html

@@ -2,9 +2,9 @@
   <div class="col-xs" ng-controller="ImageSelectionController as image">
     <drive-selector-2
       ng-if="image.driveSelectorModalOpen"
+      title="'Select a source drive'"
       close="image.closeDriveSelectorModal"
-      select-drive="image.selectDrive"
+      set-selected-drives="image.setSelectedDrives"
-      deselect-drive="image.deselectDrive"
       is-drive-selected="image.isDriveSelected"
       is-drive-valid="image.isDriveValid"
       get-drive-badges="image.getDriveBadges"
@@ -39,9 +39,9 @@
   <div class="col-xs" ng-controller="DriveSelectionController as drive">
     <drive-selector-2
       ng-if="drive.driveSelectorModalOpen"
+      title="'Available targets'"
       close="drive.closeDriveSelectorModal"
-      select-drive="drive.selectDrive"
+      set-selected-drives="drive.setSelectedDrives"
-      deselect-drive="drive.deselectDrive"
       is-drive-selected="drive.isDriveSelected"
       is-drive-valid="drive.isDriveValid"
       get-drive-badges="drive.getDriveBadges"