Move sidebar client selection state to redux store

Summary:
This diff moves the selection storage from local state to the Redux store.
This makes the state available to the export data functionality (next diff)

Reviewed By: priteshrnandgaonkar

Differential Revision: D18448193

fbshipit-source-id: b1cce083ac7805c539de22aca0bd05c18e1b66e0

src/chrome/MainSidebar.tsx

@@ -38,6 +38,7 @@ import {
   starPlugin,
   StaticView,
   setStaticView,
+  selectClient,
 } from '../reducers/connections';
 import {setActiveSheet} from '../reducers/application';
 import UserAccount from './UserAccount';
@@ -222,6 +223,7 @@ type StateFromProps = {
   selectedApp: string | null | undefined;
   userStarredPlugins: Store['connections']['userStarredPlugins'];
   clients: Array<Client>;
+  selectedClient: string;
   uninitializedClients: Array<{
     client: UninitializedClient;
     deviceId?: string;
@@ -237,6 +239,7 @@ type DispatchFromProps = {
     selectedApp: string | null;
     deepLinkPayload: string | null;
   }) => void;
+  selectClient: typeof selectClient;
   setActiveSheet: (activeSheet: ActiveSheet) => void;
   setStaticView: (payload: StaticView) => void;
   starPlugin: typeof starPlugin;
@@ -245,14 +248,11 @@ type DispatchFromProps = {
 type Props = OwnProps & StateFromProps & DispatchFromProps;
 type State = {
   showSupportForm: boolean;
-  selectedClientIndex: number;
   showAllPlugins: boolean;
 };
 class MainSidebar extends PureComponent<Props, State> {
   state: State = {
     showSupportForm: GK.get('flipper_support_requests'),
-    // Not to be confused with selectedApp prop, this one only used to remember the client drowdown selector
-    selectedClientIndex: 0,
     showAllPlugins: false,
   };
   static getDerivedStateFromProps(props: Props, state: State) {
@@ -271,6 +271,8 @@ class MainSidebar extends PureComponent<Props, State> {
   render() {
     const {
       selectedDevice,
+      selectedClient,
+      selectClient,
       selectedPlugin,
       staticView,
       selectPlugin,
@@ -290,8 +292,9 @@ class MainSidebar extends PureComponent<Props, State> {
           client.query.device_id === 'unknown',
       )
       .sort((a, b) => (a.query.app || '').localeCompare(b.query.app));
-    const client: Client | null =
+    const client: Client | undefined = clients.find(
-      clients[this.state.selectedClientIndex] || null;
+      client => client.query.app === selectedClient,
+    );
 
     return (
       <Sidebar
@@ -328,16 +331,16 @@ class MainSidebar extends PureComponent<Props, State> {
             <SidebarButton
               title="Select an app to see available plugins"
               compact={true}
-              dropdown={clients.map((c, index) => ({
+              dropdown={clients.map(c => ({
                 checked: client === c,
                 label: c.query.app,
                 type: 'checkbox',
-                click: () => this.setState({selectedClientIndex: index}),
+                click: () => selectClient(c.query.app),
               }))}>
               {clients.length === 0 ? (
-                '(Not connected to app)'
+                '(Not connected clients)'
-              ) : this.state.selectedClientIndex >= clients.length ? (
+              ) : !client ? (
-                '(Select app)'
+                '(Select client)'
               ) : (
                 <>
                   {client.query.app}
@@ -463,7 +466,7 @@ class MainSidebar extends PureComponent<Props, State> {
     ));
   }
 
-  renderClientPlugins(client: Client | null) {
+  renderClientPlugins(client?: Client) {
     if (!client) {
       return null;
     }
@@ -594,6 +597,7 @@ export default connect<StateFromProps, DispatchFromProps, OwnProps, Store>(
       selectedDevice,
       selectedPlugin,
       selectedApp,
+      selectedClient,
       userStarredPlugins,
       clients,
       uninitializedClients,
@@ -610,6 +614,7 @@ export default connect<StateFromProps, DispatchFromProps, OwnProps, Store>(
     })(),
     windowIsFocused,
     selectedDevice,
+    selectedClient,
     staticView,
     selectedPlugin,
     selectedApp,
@@ -621,6 +626,7 @@ export default connect<StateFromProps, DispatchFromProps, OwnProps, Store>(
   }),
   {
     selectPlugin,
+    selectClient,
     setStaticView,
     setActiveSheet,
     starPlugin,

src/reducers/connections.tsx

@@ -47,6 +47,9 @@ export type State = {
   userStarredPlugins: {[key: string]: Array<string>};
   errors: FlipperError[];
   clients: Array<Client>;
+  // refers to the client that is selected in the main side bar, not to be confused with
+  // selectedApp, which represents the app of the currently active plugin!
+  selectedClient: string;
   uninitializedClients: Array<{
     client: UninitializedClient;
     deviceId?: string;
@@ -131,6 +134,10 @@ export type Action =
         selectedPlugin: string;
         selectedApp: string;
       };
+    }
+  | {
+      type: 'SELECT_CLIENT';
+      payload: string;
     };
 
 const DEFAULT_PLUGIN = 'DeviceLogs';
@@ -147,6 +154,7 @@ const INITAL_STATE: State = {
   userStarredPlugins: {},
   errors: [],
   clients: [],
+  selectedClient: '',
   uninitializedClients: [],
   deepLinkPayload: null,
   staticView: WelcomeScreen,
@@ -425,6 +433,12 @@ const reducer = (state: State = INITAL_STATE, action: Actions): State => {
         errors,
       };
     }
+    case 'SELECT_CLIENT': {
+      return {
+        ...state,
+        selectedClient: action.payload,
+      };
+    }
     default:
       return state;
   }
@@ -514,14 +528,12 @@ export const userPreferredPlugin = (payload: string): Action => ({
   payload,
 });
 
-function extractAppNameFromAppId(appId: string | null): string | null {
-  const nameRegex = /([^#]+)#/;
-  const matchedRegex = appId ? appId.match(nameRegex) : null;
-  // Expect the name of the app to be on the first matching
-  return matchedRegex && matchedRegex[1];
-}
-
 export const dismissError = (index: number): Action => ({
   type: 'DISMISS_ERROR',
   payload: index,
 });
+
+export const selectClient = (clientId: string): Action => ({
+  type: 'SELECT_CLIENT',
+  payload: clientId,
+});

src/reducers/index.tsx

@@ -97,6 +97,7 @@ export default combineReducers<State, Actions>({
         'userPreferredPlugin',
         'userPreferredApp',
         'userStarredPlugins',
+        'selectedClient',
       ],
     },
     connections,