From dcb6595d1d86560e2cfe5459a55b38dc6ad8a0ef Mon Sep 17 00:00:00 2001
From: Michel Weststrate <mweststrate@fb.com>
Date: Wed, 13 Nov 2019 08:34:45 -0800
Subject: [PATCH] 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   |  8 ++++++--
 src/chrome/MainSidebar.tsx     | 22 +++++++++++++++++++---
 src/devices/ArchivedDevice.tsx |  2 ++
 src/devices/BaseDevice.tsx     |  2 ++
 src/dispatcher/application.tsx |  2 +-
 src/utils/exportData.tsx       |  5 +++--
 6 files changed, 33 insertions(+), 8 deletions(-)

diff --git a/src/chrome/DevicesButton.tsx b/src/chrome/DevicesButton.tsx
index cc4b0c0a6..a27ccf988 100644
--- a/src/chrome/DevicesButton.tsx
+++ b/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',
         })),
     ];
diff --git a/src/chrome/MainSidebar.tsx b/src/chrome/MainSidebar.tsx
index f28ffce0d..9ee9bfe07 100644
--- a/src/chrome/MainSidebar.tsx
+++ b/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())
diff --git a/src/devices/ArchivedDevice.tsx b/src/devices/ArchivedDevice.tsx
index b88f8ed4d..06795a5a1 100644
--- a/src/devices/ArchivedDevice.tsx
+++ b/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>;
diff --git a/src/devices/BaseDevice.tsx b/src/devices/BaseDevice.tsx
index a13ccaae5..4f8c5dbf8 100644
--- a/src/devices/BaseDevice.tsx
+++ b/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();
diff --git a/src/dispatcher/application.tsx b/src/dispatcher/application.tsx
index cde998c46..bb4751d1b 100644
--- a/src/dispatcher/application.tsx
+++ b/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));
             })
diff --git a/src/utils/exportData.tsx b/src/utils/exportData.tsx
index 305b31879..d56744c35 100644
--- a/src/utils/exportData.tsx
+++ b/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);
   });
 };