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/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);
   });
 };