Make imported devices visually recognizable

Summary:
If a flipper file is imported, from now on we will show that fact in the sidebar to make it more clear we are looking at an imported device. Beyond that, those devices are marked as `(imported)` rather than `(offline)` to distinguish between offline and imported devices.

This should help with future feature like cross device applicable actions.

Reviewed By: jknoxville

Differential Revision: D18448190

fbshipit-source-id: 560084f010207c99cecd616e43a6cc02e62cbc7a

src/chrome/DevicesButton.tsx

@@ -70,7 +70,9 @@ class DevicesButton extends Component<Props> {
     let icon = 'minus-circle';
 
     if (selectedDevice && selectedDevice.isArchived) {
-      buttonLabel = `${selectedDevice.title || 'Unknown device'} (offline)`;
+      buttonLabel = `${selectedDevice.title || 'Unknown device'} ${
+        selectedDevice.source ? '(imported)' : '(offline)'
+      }`;
       icon = 'box';
     } else if (selectedDevice && selectedDevice.deviceType === 'physical') {
       buttonLabel = selectedDevice.title || 'Unknown device';
@@ -129,7 +131,9 @@ class DevicesButton extends Component<Props> {
         .map((device: BaseDevice) => ({
           click: () => selectDevice(device),
           checked: device === selectedDevice,
-          label: `📦 ${device.title} (offline)`,
+          label: `📦 ${device.title} ${
+            device.source ? '(imported)' : '(offline)'
+          }`,
           type: 'checkbox',
         })),
     ];

src/chrome/MainSidebar.tsx

@@ -305,9 +305,25 @@ class MainSidebar extends PureComponent<Props, State> {
         }>
         <Plugins>
           {selectedDevice && (
-            <ListItem>
-              <SidebarButton>{selectedDevice.title}</SidebarButton>
-            </ListItem>
+            <>
+              <ListItem>
+                <SidebarButton>{selectedDevice.title}</SidebarButton>
+              </ListItem>
+              {selectedDevice.isArchived && selectedDevice.source ? (
+                <ListItem
+                  style={{
+                    fontSize: 9,
+                    lineHeight: '11px',
+                    color: colors.light30,
+                    wordBreak: 'break-all',
+                    paddingBottom: '10px',
+                  }}>
+                  Snapshot imported from:
+                  <br />
+                  {selectedDevice.source}
+                </ListItem>
+              ) : null}
+            </>
           )}
           {selectedDevice &&
             Array.from(this.props.devicePlugins.values())

src/devices/ArchivedDevice.tsx

@@ -27,9 +27,11 @@ export default class ArchivedDevice extends BaseDevice {
     title: string,
     os: OS,
     logEntries: Array<DeviceLogEntry>,
+    source: string = '',
   ) {
     super(serial, normalizeArchivedDeviceType(deviceType), title, os);
     this.logs = logEntries;
+    this.source = source;
   }
 
   logs: Array<DeviceLogEntry>;

src/devices/BaseDevice.tsx

@@ -78,6 +78,8 @@ export default class BaseDevice {
   logListeners: Map<Symbol, DeviceLogListener> = new Map();
   logEntries: Array<DeviceLogEntry> = [];
   isArchived: boolean = false;
+  // if imported, stores the original source location
+  source = '';
 
   supportsOS(os: OS) {
     return os.toLowerCase() === this.os.toLowerCase();

src/dispatcher/application.tsx

@@ -67,7 +67,7 @@ export default (store: Store, logger: Logger) => {
           typeof url === 'string' &&
           fetch(url)
             .then(res => res.text())
-            .then(data => importDataToStore(data, store))
+            .then(data => importDataToStore(url, data, store))
             .then(() => {
               store.dispatch(toggleAction('downloadingImportData', false));
             })

src/utils/exportData.tsx

@@ -574,7 +574,7 @@ export const exportStoreToFile = (
   );
 };
 
-export function importDataToStore(data: string, store: Store) {
+export function importDataToStore(source: string, data: string, store: Store) {
   getLogger().track('usage', IMPORT_FLIPPER_TRACE_EVENT);
   const json: ExportType = JSON.parse(data);
   const {device, clients} = json;
@@ -592,6 +592,7 @@ export function importDataToStore(data: string, store: Store) {
           return {...l, date: new Date(l.date)};
         })
       : [],
+    source,
   );
   const devices = store.getState().connections.devices;
   const matchedDevices = devices.filter(
@@ -659,7 +660,7 @@ export const importFileToStore = (file: string, store: Store) => {
       console.error(err);
       return;
     }
-    importDataToStore(data, store);
+    importDataToStore(file, data, store);
   });
 };