Move the logic to show archived info in the object creation

Summary:
Write now the logic to append (Imported) and (Offline) text for archived devices is scattered at multiple places. Due to which we had the following bug

{F227484749}

Reviewed By: mweststrate

Differential Revision: D19663506

fbshipit-source-id: 1f5c0060825d8b246c94da85ac4a18cc4ff040d2

src/chrome/DevicesButton.tsx

@@ -77,15 +77,13 @@ class DevicesButton extends Component<Props> {
     let icon = 'minus-circle';
 
     if (selectedDevice && selectedDevice.isArchived) {
-      buttonLabel = `${selectedDevice.title || 'Unknown device'} ${
-        selectedDevice.source ? '(imported)' : '(offline)'
-      }`;
+      buttonLabel = `${selectedDevice.displayTitle() || 'Unknown device'}`;
       icon = 'box';
     } else if (selectedDevice && selectedDevice.deviceType === 'physical') {
-      buttonLabel = selectedDevice.title || 'Unknown device';
+      buttonLabel = selectedDevice.displayTitle() || 'Unknown device';
       icon = 'mobile';
     } else if (selectedDevice && selectedDevice.deviceType === 'emulator') {
-      buttonLabel = selectedDevice.title || 'Unknown emulator';
+      buttonLabel = selectedDevice.displayTitle() || 'Unknown emulator';
       icon = 'desktop';
     }
 
@@ -102,7 +100,7 @@ class DevicesButton extends Component<Props> {
         .map((device: BaseDevice) => ({
           click: () => selectDevice(device),
           checked: device === selectedDevice,
-          label: `📱 ${device.title}`,
+          label: `📱 ${device.displayTitle()}`,
           type: 'checkbox',
         })),
     ];
@@ -120,7 +118,7 @@ class DevicesButton extends Component<Props> {
         .map((device: BaseDevice) => ({
           click: () => selectDevice(device),
           checked: device === selectedDevice,
-          label: device.title,
+          label: device.displayTitle(),
           type: 'checkbox',
         })),
     ];
@@ -138,9 +136,7 @@ class DevicesButton extends Component<Props> {
         .map((device: BaseDevice) => ({
           click: () => selectDevice(device),
           checked: device === selectedDevice,
-          label: `📦 ${device.title} ${
-            device.source ? '(imported)' : '(offline)'
-          }`,
+          label: `📦 ${device.displayTitle()}`,
           type: 'checkbox',
         })),
     ];

src/chrome/mainsidebar/MainSidebar2.tsx

@@ -250,12 +250,9 @@ class MainSidebar2 extends PureComponent<Props, State> {
       selectedDevice,
     } = this.props;
     const clients = getAvailableClients(device, this.props.clients);
-
     return (
       <SidebarSection
-        title={`${device.title} ${
-          device.isArchived ? (device.source ? '(imported)' : '(offline)') : ''
-        }`}
+        title={device.displayTitle()}
         key={device.serial}
         level={1}
         defaultCollapsed={!canBeDefaultDevice(device)}>

src/devices/ArchivedDevice.tsx

@@ -41,6 +41,10 @@ export default class ArchivedDevice extends BaseDevice {
 
   isArchived = true;
 
+  displayTitle(): string {
+    return `${this.title} ${this.source ? '(Imported)' : '(Offline)'}`;
+  }
+
   supportRequestDetails?: SupportFormRequestDetailsState;
 
   getLogs() {

src/devices/BaseDevice.tsx

@@ -90,6 +90,10 @@ export default class BaseDevice {
     return os.toLowerCase() === this.os.toLowerCase();
   }
 
+  displayTitle(): string {
+    return this.title;
+  }
+
   toJSON(): DeviceExport {
     return {
       os: this.os,