Update app name on client change

Summary: This diff refactors the way appName is shown. We populate the appName through selectedApp, thus keeping different redux prop is not needed. This diff gets rid off the appName prop from the redux store and makes sure that appName gets updated on client change.

Reviewed By: mweststrate

Differential Revision: D18764685

fbshipit-source-id: 5ff94c83f84b03bbee34518aface46d4544af77f

src/devices/ArchivedDevice.tsx

@@ -9,7 +9,7 @@
 
 import BaseDevice from './BaseDevice';
 import {DeviceType, OS, DeviceShell, DeviceLogEntry} from './BaseDevice';
-import {SupportFormV2State} from '../reducers/supportForm';
+import {SupportFormRequestDetailsState} from '../reducers/supportForm';
 
 function normalizeArchivedDeviceType(deviceType: DeviceType): DeviceType {
   let archivedDeviceType = deviceType;
@@ -29,7 +29,7 @@ export default class ArchivedDevice extends BaseDevice {
     os: OS,
     logEntries: Array<DeviceLogEntry>,
     source: string = '',
-    supportRequestDetails?: SupportFormV2State,
+    supportRequestDetails?: SupportFormRequestDetailsState,
   ) {
     super(serial, normalizeArchivedDeviceType(deviceType), title, os);
     this.logs = logEntries;
@@ -41,7 +41,7 @@ export default class ArchivedDevice extends BaseDevice {
 
   isArchived = true;
 
-  supportRequestDetails?: SupportFormV2State;
+  supportRequestDetails?: SupportFormRequestDetailsState;
 
   getLogs() {
     return this.logs;

src/reducers/supportForm.tsx

@@ -20,11 +20,13 @@ export type SupportFormV2State = {
   title: string;
   description: string;
   commitHash: string;
-  appName: string;
   screenshots?: MediaType;
   videos?: MediaType;
 };
 
+export type SupportFormRequestDetailsState = SupportFormV2State & {
+  appName: string;
+};
 export type State = {
   webState: NTUsersFormData | null;
   supportFormV2: SupportFormV2State;

src/utils/clientUtils.tsx

@@ -39,3 +39,11 @@ export function deviceFromClienID(id: string): string | undefined {
   const device = arr[1];
   return device;
 }
+
+export function getCurrentAppName(client: string | undefined | null): string {
+  if (client) {
+    return appNameFromClienID(client) || '';
+  } else {
+    return '';
+  }
+}

src/utils/exportData.tsx

@@ -37,10 +37,11 @@ import promiseTimeout from './promiseTimeout';
 import {Idler} from './Idler';
 import {setStaticView} from '../reducers/connections';
 import {
-  SupportFormV2State,
   resetSupportFormV2State,
+  SupportFormRequestDetailsState,
 } from '../reducers/supportForm';
 import {setSelectPluginsToExportActiveSheet} from '../reducers/application';
+import {getCurrentAppName} from '../utils/clientUtils';
 
 export const IMPORT_FLIPPER_TRACE_EVENT = 'import-flipper-trace';
 export const EXPORT_FLIPPER_TRACE_EVENT = 'export-flipper-trace';
@@ -58,7 +59,7 @@ export type ExportType = {
     pluginStates: PluginStatesExportState;
     activeNotifications: Array<PluginNotification>;
   };
-  supportRequestDetails?: SupportFormV2State;
+  supportRequestDetails?: SupportFormRequestDetailsState;
 };
 
 type ProcessPluginStatesOptions = {
@@ -544,7 +545,11 @@ export function exportStore(
         idler,
       );
       if (exportData != null) {
-        exportData.supportRequestDetails = state.supportForm?.supportFormV2;
+        exportData.supportRequestDetails = {
+          ...state.supportForm?.supportFormV2,
+          appName: getCurrentAppName(state.connections.selectedApp),
+        };
+
         statusUpdate && statusUpdate('Serializing Flipper data...');
         const serializedString = JSON.stringify(exportData);
         if (serializedString.length <= 0) {