Delete a custom device

desktop-app/app/actions/browser.js

@@ -23,6 +23,7 @@ export const NEW_DRAWER_CONTENT = 'NEW_DRAWER_CONTENT';
 export const NEW_PREVIEWER_CONFIG = 'NEW_PREVIEWER_CONFIG';
 export const NEW_ACTIVE_DEVICES = 'NEW_ACTIVE_DEVICES';
 export const NEW_CUSTOM_DEVICE = 'NEW_CUSTOM_DEVICE';
+export const DELETE_CUSTOM_DEVICE = 'DELETE_CUSTOM_DEVICE';
 export const NEW_FILTERS = 'NEW_FILTERS';
 export const NEW_USER_PREFERENCES = 'NEW_USER_PREFERENCES';
 
@@ -96,6 +97,13 @@ export function newCustomDevice(device) {
   };
 }
 
+export function deleteCustomDevice(device) {
+  return {
+    type: DELETE_CUSTOM_DEVICE,
+    device,
+  };
+}
+
 export function newFilters(filters) {
   return {
     type: NEW_FILTERS,
@@ -265,6 +273,12 @@ export function addCustomDevice(newDevice) {
   };
 }
 
+export function deleteDevice(device) {
+  return (dispatch: Dispatch, getState: RootStateType) => {
+    dispatch(deleteCustomDevice(device));
+  };
+}
+
 export function toggleFilter(filterField, value) {
   return (dispatch: Dispatch, getState: RootStateType) => {
     const {

desktop-app/app/components/DeviceManager/AddDevice/index.js

@@ -32,7 +32,12 @@ import RadioButtonUncheckedIcon from '@material-ui/icons/RadioButtonUnchecked';
 import RadioButtonCheckedIcon from '@material-ui/icons/RadioButtonChecked';
 import CheckBoxOutlineBlankIcon from '@material-ui/icons/CheckBoxOutlineBlank';
 import CheckBoxIcon from '@material-ui/icons/CheckBox';
-import {DEVICE_TYPE, CAPABILITIES, OS} from '../../../constants/devices';
+import {
+  DEVICE_TYPE,
+  CAPABILITIES,
+  OS,
+  SOURCE,
+} from '../../../constants/devices';
 import {lightIconsColor, themeColor} from '../../../constants/colors';
 import Switch from 'react-switch';
 
@@ -166,8 +171,13 @@ export default function AddDevice(props) {
       type: deviceType,
       capabilities: Object.keys(capabilities).filter(val => capabilities[val]),
       os,
+      source: SOURCE.custom,
     });
     closeDialog();
+    setName('');
+    setWidth(400);
+    setHeight(600);
+    setPreviewState(true);
   };
   return (
     <Fragment>

desktop-app/app/components/DeviceManager/DeviceItem/index.js

@@ -1,15 +1,24 @@
-import React from 'react';
+import React, {useState} from 'react';
 import {Draggable} from 'react-beautiful-dnd';
 import DragIndicator from '@material-ui/icons/DragIndicator';
 import PhoneIcon from '@material-ui/icons/PhoneIphone';
+import IconButton from '@material-ui/core/IconButton';
+import DeleteForeverIcon from '@material-ui/icons/DeleteForever';
+import Tooltip from '@material-ui/core/Tooltip';
 import cx from 'classnames';
 
 import styles from './styles.css';
 import commonStyles from '../../common.styles.css';
-import {DEVICE_TYPE} from '../../../constants/devices';
+import {DEVICE_TYPE, SOURCE} from '../../../constants/devices';
 import {getDeviceIcon, getOSIcon} from '../../../utils/iconUtils';
 
-export default function DeviceItem({device, index}) {
+export default function DeviceItem({
+  device,
+  index,
+  enableCustomDeviceDeletion,
+  deleteDevice,
+}) {
+  const [showDeleteIcon, setShowDeleteIcon] = useState(false);
   return (
     <Draggable draggableId={device.id} index={index}>
       {provided => (
@@ -18,11 +27,14 @@ export default function DeviceItem({device, index}) {
           ref={provided.innerRef}
           {...provided.draggableProps}
           {...provided.dragHandleProps}
+          onMouseEnter={() => setShowDeleteIcon(true)}
+          onMouseLeave={() => setShowDeleteIcon(false)}
         >
           <div
             className={cx(
               commonStyles.flexAlignVerticalMiddle,
-              commonStyles.fullWidth
+              commonStyles.fullWidth,
+              styles.content
             )}
           >
             <DragIndicator style={{color: 'grey'}} />
@@ -41,6 +53,18 @@ export default function DeviceItem({device, index}) {
               </div>
               <div>{getOSIcon(device.os, '#ffffff90')}</div>
             </div>
+            {enableCustomDeviceDeletion &&
+            device.source === SOURCE.custom &&
+            showDeleteIcon ? (
+              <Tooltip title="Delete Device Profile">
+                <IconButton
+                  className={styles.deleteIcon}
+                  onClick={() => deleteDevice(device)}
+                >
+                  <DeleteForeverIcon fontSize="small" />
+                </IconButton>
+              </Tooltip>
+            ) : null}
           </div>
         </div>
       )}

desktop-app/app/components/DeviceManager/DeviceItem/styles.css

@@ -19,3 +19,14 @@
   font-size: 10px;
   color: #ffffff90;
 }
+
+.content {
+  padding: 0.8em 1em 0.8em 0;
+  position: relative;
+}
+
+.deleteIcon {
+  position: absolute !important;
+  right: -25px;
+  top: -10px;
+}

desktop-app/app/components/DeviceManager/DeviceList/index.js

@@ -15,6 +15,8 @@ export default function DeviceList({
   devices,
   enableFiltering,
   onFiltering,
+  enableCustomDeviceDeletion,
+  deleteDevice,
 }) {
   const [searchOpen, setSearchOpen] = useState(false);
   const [searchText, setSearchText] = useState('');
@@ -78,7 +80,13 @@ export default function DeviceList({
             className={cx(styles.listHolder)}
           >
             {filteredDevices.map((device, index) => (
-              <DeviceItem device={device} index={index} key={device.id} />
+              <DeviceItem
+                device={device}
+                index={index}
+                key={device.id}
+                enableCustomDeviceDeletion={enableCustomDeviceDeletion}
+                deleteDevice={deleteDevice}
+              />
             ))}
             {provided.placeholder}
           </div>

desktop-app/app/components/DeviceManager/index.js

@@ -63,7 +63,10 @@ export default function DeviceManager(props) {
     const sourceList = devices[source.droppableId];
     const destinationList = devices[destination.droppableId];
 
-    const itemDragged = sourceList[source.index];
+    const itemDragged =
+      source.droppableId === 'inactive'
+        ? devices.inactiveFiltered[source.index]
+        : sourceList[source.index];
     sourceList.splice(sourceList.indexOf(itemDragged), 1);
 
     destinationList.splice(destination.index, 0, itemDragged);
@@ -128,6 +131,8 @@ export default function DeviceManager(props) {
                   devices={devices.inactive}
                   enableFiltering={true}
                   onFiltering={onInactiveListFiltering}
+                  enableCustomDeviceDeletion={true}
+                  deleteDevice={props.deleteDevice}
                 />
               </Grid>
             </Grid>

desktop-app/app/constants/devices.js

@@ -21,12 +21,19 @@ export const CAPABILITIES: {[key: string]: Capability} = {
   touch: 'touch',
 };
 
+export const SOURCE: {[key: string]: Source} = {
+  chrome: 'chrome',
+  custom: 'custom',
+};
+
 type OSType = OS.ios | OS.android | OS.windowsPhone | OS.pc;
 
 type DeviceType = DEVICE_TYPE.phone | DEVICE_TYPE.tablet | DEVICE_TYPE.desktop;
 
 type Capability = CAPABILITIES.mobile | CAPABILITIES.touch;
 
+type Source = SOURCE.chrome | SOURCE.custom;
+
 export type Device = {
   id: number,
   added: boolean,
@@ -37,6 +44,7 @@ export type Device = {
   capabilities: Array<Capability>,
   os: OSType,
   type: DeviceType,
+  source: Source,
 };
 
 function getOS(device) {
@@ -72,6 +80,7 @@ export default function getAllDevices() {
         added: device['show-by-default'],
         os: getOS(device),
         type: device.type,
+        source: SOURCE.chrome,
       };
     });
 

desktop-app/app/reducers/browser.js

@@ -11,6 +11,7 @@ import {
   NEW_FILTERS,
   NEW_HOMEPAGE,
   NEW_USER_PREFERENCES,
+  DELETE_CUSTOM_DEVICE,
 } from '../actions/browser';
 import type {Action} from './types';
 import getAllDevices from '../constants/devices';
@@ -174,8 +175,15 @@ export default function browser(
       _saveActiveDevices(action.devices);
       return {...state, devices: action.devices};
     case NEW_CUSTOM_DEVICE:
+      const existingDevices = settings.get(CUSTOM_DEVICES) || [];
+      settings.set(CUSTOM_DEVICES, [action.device, ...existingDevices]);
+      return {...state, allDevices: getAllDevices()};
+    case DELETE_CUSTOM_DEVICE:
       const existingCustomDevices = settings.get(CUSTOM_DEVICES) || [];
-      settings.set(CUSTOM_DEVICES, [action.device, ...existingCustomDevices]);
+      settings.set(
+        CUSTOM_DEVICES,
+        existingCustomDevices.filter(device => device.id != action.device.id)
+      );
       return {...state, allDevices: getAllDevices()};
     case NEW_FILTERS:
       return {...state, filters: action.filters};