From f2689d3a5dfb1d27288712ab380d136eb9d64d4e Mon Sep 17 00:00:00 2001
From: Michel Weststrate <mweststrate@fb.com>
Date: Fri, 26 Feb 2021 07:24:40 -0800
Subject: [PATCH] Add device level icons

Summary: Gave every device an icon, and use it as fallback in case we don't have a client icon. Added an icon for the Flipper client. This gets (largely) rid of the 'blank' icons

Reviewed By: fabiomassimo

Differential Revision: D26691054

fbshipit-source-id: d83012e755ae5edb230747e88f9b2eac45450b19
---
 desktop/app/src/devices/AndroidDevice.tsx         |  2 +-
 desktop/app/src/devices/ArchivedDevice.tsx        |  1 +
 desktop/app/src/devices/IOSDevice.tsx             |  2 +-
 desktop/app/src/devices/MacDevice.tsx             |  1 +
 desktop/app/src/devices/WindowsDevice.tsx         |  1 +
 .../src/sandy-chrome/appinspect/AppSelector.tsx   | 12 +++++++++---
 desktop/app/src/ui/components/colors.tsx          |  1 +
 desktop/static/icons.json                         | 15 +++++++++++++--
 8 files changed, 28 insertions(+), 7 deletions(-)

diff --git a/desktop/app/src/devices/AndroidDevice.tsx b/desktop/app/src/devices/AndroidDevice.tsx
index 518703fc9..f187e316c 100644
--- a/desktop/app/src/devices/AndroidDevice.tsx
+++ b/desktop/app/src/devices/AndroidDevice.tsx
@@ -31,7 +31,7 @@ export default class AndroidDevice extends BaseDevice {
   ) {
     super(serial, deviceType, title, 'Android', specs);
     this.adb = adb;
-    this.icon = 'icons/android.svg';
+    this.icon = 'mobile';
     this.abiList = abiList;
     this.sdkVersion = sdkVersion;
     this.adb.openLogcat(this.serial).then((reader) => {
diff --git a/desktop/app/src/devices/ArchivedDevice.tsx b/desktop/app/src/devices/ArchivedDevice.tsx
index f980eefb9..8be9d5449 100644
--- a/desktop/app/src/devices/ArchivedDevice.tsx
+++ b/desktop/app/src/devices/ArchivedDevice.tsx
@@ -25,6 +25,7 @@ export default class ArchivedDevice extends BaseDevice {
     supportRequestDetails?: SupportFormRequestDetailsState;
   }) {
     super(options.serial, options.deviceType, options.title, options.os);
+    this.icon = 'box';
     this.connected.set(false);
     this.source = options.source || '';
     this.supportRequestDetails = options.supportRequestDetails;
diff --git a/desktop/app/src/devices/IOSDevice.tsx b/desktop/app/src/devices/IOSDevice.tsx
index e658de465..144730d79 100644
--- a/desktop/app/src/devices/IOSDevice.tsx
+++ b/desktop/app/src/devices/IOSDevice.tsx
@@ -47,7 +47,7 @@ export default class IOSDevice extends BaseDevice {
 
   constructor(serial: string, deviceType: DeviceType, title: string) {
     super(serial, deviceType, title, 'iOS');
-    this.icon = 'icons/ios.svg';
+    this.icon = 'mobile';
     this.buffer = '';
     this.startLogListener();
   }
diff --git a/desktop/app/src/devices/MacDevice.tsx b/desktop/app/src/devices/MacDevice.tsx
index 16a076b49..3e3d2a03c 100644
--- a/desktop/app/src/devices/MacDevice.tsx
+++ b/desktop/app/src/devices/MacDevice.tsx
@@ -12,6 +12,7 @@ import BaseDevice from './BaseDevice';
 export default class MacDevice extends BaseDevice {
   constructor() {
     super('', 'physical', 'Mac', 'MacOS');
+    this.icon = 'app-apple';
   }
 
   teardown() {}
diff --git a/desktop/app/src/devices/WindowsDevice.tsx b/desktop/app/src/devices/WindowsDevice.tsx
index e83da5ee7..bc441aeab 100644
--- a/desktop/app/src/devices/WindowsDevice.tsx
+++ b/desktop/app/src/devices/WindowsDevice.tsx
@@ -12,6 +12,7 @@ import BaseDevice from './BaseDevice';
 export default class WindowsDevice extends BaseDevice {
   constructor() {
     super('', 'physical', 'Windows', 'Windows');
+    this.icon = 'app-microsoft-windows';
   }
 
   teardown() {}
diff --git a/desktop/app/src/sandy-chrome/appinspect/AppSelector.tsx b/desktop/app/src/sandy-chrome/appinspect/AppSelector.tsx
index e7ac51e34..02311883e 100644
--- a/desktop/app/src/sandy-chrome/appinspect/AppSelector.tsx
+++ b/desktop/app/src/sandy-chrome/appinspect/AppSelector.tsx
@@ -102,7 +102,7 @@ export function AppSelector() {
         }>
         <AppInspectButton title="Select the device / app to inspect">
           <Layout.Horizontal gap center>
-            <AppIcon appname={client?.query.app} />
+            <AppIcon appname={client?.query.app} device={selectedDevice} />
             <Layout.Container grow shrink>
               <Text strong>{client?.query.app ?? ''}</Text>
               <Text>{selectedDevice?.title || 'Available devices'}</Text>
@@ -137,13 +137,19 @@ const AppInspectButton = styled(Button)({
   },
 });
 
-function AppIcon({appname}: {appname?: string}) {
+function AppIcon({
+  appname,
+  device,
+}: {
+  appname?: string;
+  device?: BaseDevice | null;
+}) {
   const invert = appname?.endsWith('Lite') ?? false;
   const brandName = appname?.replace(/ Lite$/, '');
   const color = brandName
     ? getColorByApp(brandName)
     : theme.backgroundTransparentHover;
-  const icon = brandName && (brandIcons as any)[brandName];
+  const icon = (brandName && (brandIcons as any)[brandName]) ?? device?.icon;
   return (
     <AppIconContainer style={{background: invert ? 'white' : color}}>
       {icon && (
diff --git a/desktop/app/src/ui/components/colors.tsx b/desktop/app/src/ui/components/colors.tsx
index 2f8fb2009..d442cf2f7 100644
--- a/desktop/app/src/ui/components/colors.tsx
+++ b/desktop/app/src/ui/components/colors.tsx
@@ -296,4 +296,5 @@ export const brandIcons = {
   WhatsApp: 'app-whatsapp',
   Workplace: 'app-workplace',
   'Work Chat': 'app-work-chat',
+  Flipper: 'list-gear', // used for the self inspection client
 };
diff --git a/desktop/static/icons.json b/desktop/static/icons.json
index d30bac598..070e80c0d 100644
--- a/desktop/static/icons.json
+++ b/desktop/static/icons.json
@@ -35,7 +35,8 @@
     16
   ],
   "box": [
-    12
+    12,
+    24
   ],
   "brush-paint": [
     12,
@@ -536,7 +537,8 @@
     16
   ],
   "mobile-outline": [
-    16
+    16,
+    24
   ],
   "bookmark-outline": [
     16
@@ -571,5 +573,14 @@
   ],
   "upload": [
     16
+  ],
+  "list-gear-outline": [
+    24
+  ],
+  "app-apple-outline": [
+    24
+  ],
+  "app-microsoft-windows": [
+    24
   ]
 }
\ No newline at end of file