[WIP] Add a way to select Android User to let Flipper working on devices with Work Profile

desktop/flipper-common/src/settings.tsx

@@ -19,6 +19,11 @@ export enum Tristate {
  */
 export type Settings = {
   androidHome: string;
+  /**
+   * If unset, this will be set to '0', as it's the default profile on android devices.
+   * Enterprises using Work Profile might changed it to the Work Profile user id.
+   */
+  androidUserId: string;
   enableAndroid: boolean;
   enableIOS: boolean;
   enablePhysicalIOS: boolean;

desktop/flipper-server-core/src/devices/android/AndroidCertificateProvider.tsx

@@ -11,14 +11,15 @@ import CertificateProvider from '../../utils/CertificateProvider';
 import {Client} from 'adbkit';
 import * as androidUtil from './androidContainerUtility';
 import {csrFileName, extractAppNameFromCSR} from '../../utils/certificateUtils';
+import {FlipperServerImpl} from '../../FlipperServerImpl';
 
 const logTag = 'AndroidCertificateProvider';
 
 export default class AndroidCertificateProvider extends CertificateProvider {
   name = 'AndroidCertificateProvider';
   medium = 'FS_ACCESS' as const;
 
-  constructor(private adb: Client) {
+  constructor(private flipperServer: FlipperServerImpl, private adb: Client) {
     super();
   }
 
@@ -101,6 +102,7 @@ export default class AndroidCertificateProvider extends CertificateProvider {
       this.adb,
       deviceId,
       appName,
+      this.flipperServer.config.settings.androidUserId,
       destination + filename,
       contents,
     );
@@ -116,6 +118,7 @@ export default class AndroidCertificateProvider extends CertificateProvider {
       this.adb,
       deviceId,
       processName,
+      this.flipperServer.config.settings.androidUserId,
       directory + csrFileName,
     );
     // Santitize both of the string before comparation

desktop/flipper-server-core/src/devices/android/AndroidDevice.tsx

@@ -323,6 +323,7 @@ export default class AndroidDevice
       appIds.map(async (appId): Promise<DeviceDebugData | undefined> => {
         const sonarDirFilePaths = await executeCommandAsApp(
           this.adb,
+          this.flipperServer.config.settings.androidUserId,
           this.info.serial,
           appId,
           `find /data/data/${appId}/files/sonar -type f`,
@@ -370,6 +371,7 @@ export default class AndroidDevice
               path: filePath,
               data: await pull(
                 this.adb,
+                this.flipperServer.config.settings.androidUserId,
                 this.info.serial,
                 appId,
                 filePath,
@@ -380,6 +382,7 @@ export default class AndroidDevice
 
         const sonarDirContentWithStatsCommandPromise = executeCommandAsApp(
           this.adb,
+          this.flipperServer.config.settings.androidUserId,
           this.info.serial,
           appId,
           `ls -al /data/data/${appId}/files/sonar`,

desktop/flipper-server-core/src/devices/android/androidContainerUtility.tsx

@@ -26,24 +26,26 @@ export async function push(
   client: Client,
   deviceId: string,
   app: string,
+  user: string,
   filepath: string,
   contents: string,
 ): Promise<void> {
   validateAppName(app);
   validateFilePath(filepath);
   validateFileContent(contents);
-  return await _push(client, deviceId, app, filepath, contents);
+  return await _push(client, deviceId, app, user, filepath, contents);
 }
 
 export async function pull(
   client: Client,
   deviceId: string,
   app: string,
+  user: string,
   path: string,
 ): Promise<string> {
   validateAppName(app);
   validateFilePath(path);
-  return await _pull(client, deviceId, app, path);
+  return await _pull(client, deviceId, app, user, path);
 }
 
 function validateAppName(app: string): void {
@@ -84,14 +86,15 @@ function _push(
   client: Client,
   deviceId: string,
   app: AppName,
+  user: string,
   filename: FilePath,
   contents: FileContent,
 ): Promise<void> {
   console.debug(`Deploying ${filename} to ${deviceId}:${app}`, logTag);
   // TODO: this is sensitive to escaping issues, can we leverage client.push instead?
   // https://www.npmjs.com/package/adbkit#pushing-a-file-to-all-connected-devices
   const command = `echo "${contents}" > '${filename}' && chmod 644 '${filename}'`;
-  return executeCommandAsApp(client, deviceId, app, command)
+  return executeCommandAsApp(client, deviceId, app, user, command)
     .then((_) => undefined)
     .catch((error) => {
       if (error instanceof RunAsError) {
@@ -107,31 +110,35 @@ function _pull(
   client: Client,
   deviceId: string,
   app: AppName,
+  user: string,
   path: FilePath,
 ): Promise<string> {
   const command = `cat '${path}'`;
-  return executeCommandAsApp(client, deviceId, app, command).catch((error) => {
-    if (error instanceof RunAsError) {
-      // Fall back to running the command directly. This will work if adb is running as root.
-      return executeCommandWithSu(client, deviceId, app, command, error);
-    }
-    throw error;
-  });
+  return executeCommandAsApp(client, deviceId, app, user, command).catch(
+    (error) => {
+      if (error instanceof RunAsError) {
+        // Fall back to running the command directly. This will work if adb is running as root.
+        return executeCommandWithSu(client, deviceId, app, command, error);
+      }
+      throw error;
+    },
+  );
 }
 
 // Keep this method private since it relies on pre-validated arguments
 export function executeCommandAsApp(
   client: Client,
   deviceId: string,
   app: string,
+  user: string,
   command: string,
 ): Promise<string> {
   return _executeCommandWithRunner(
     client,
     deviceId,
     app,
     command,
-    `run-as '${app}'`,
+    `run-as '${app}' --user ${user}`,
   );
 }
 

desktop/flipper-server-core/src/devices/android/androidDeviceManager.tsx

@@ -23,7 +23,10 @@ export class AndroidDeviceManager {
     private readonly flipperServer: FlipperServerImpl,
     private readonly adbClient: ADBClient,
   ) {
-    this.certificateProvider = new AndroidCertificateProvider(this.adbClient);
+    this.certificateProvider = new AndroidCertificateProvider(
+      this.flipperServer,
+      this.adbClient,
+    );
   }
 
   private createDevice(

desktop/flipper-server-core/src/utils/settings.tsx

@@ -51,6 +51,7 @@ export const DEFAULT_ANDROID_SDK_PATH = getDefaultAndroidSdkPath();
 function getDefaultSettings(): Settings {
   return {
     androidHome: getDefaultAndroidSdkPath(),
+    androidUserId: '0',
     enableAndroid: true,
     enableIOS: os.platform() === 'darwin',
     enablePhysicalIOS: os.platform() === 'darwin',

desktop/flipper-ui-core/src/chrome/SettingsSheet.tsx

@@ -7,21 +7,22 @@
  * @format
  */
 
-import React, {Component, useContext} from 'react';
+import React, {Component, useContext, useState} from 'react';
 import {Radio} from 'antd';
 import {updateSettings, Action} from '../reducers/settings';
 import {
   Action as LauncherAction,
   updateLauncherSettings,
 } from '../reducers/launcherSettings';
-import {connect} from 'react-redux';
+import {connect, useSelector} from 'react-redux';
 import {State as Store} from '../reducers';
 import {flush} from '../utils/persistor';
 import ToggledSection from './settings/ToggledSection';
 import {
   FilePathConfigField,
   ConfigText,
   URLConfigField,
+  ComboBoxConfigField,
 } from './settings/configFields';
 import KeyboardShortcutInput from './settings/KeyboardShortcutInput';
 import {isEqual, isMatch, isEmpty} from 'lodash';
@@ -40,8 +41,9 @@ import {
   _NuxManagerContext,
   NUX,
 } from 'flipper-plugin';
-import {getRenderHostInstance} from 'flipper-frontend-core';
+import {BaseDevice, getRenderHostInstance} from 'flipper-frontend-core';
 import {loadTheme} from '../utils/loadTheme';
+import {getActiveDevice} from '../selectors/connections';
 
 type OwnProps = {
   onHide: () => void;
@@ -120,6 +122,7 @@ class SettingsSheet extends Component<Props, State> {
     const {
       enableAndroid,
       androidHome,
+      androidUserId,
       enableIOS,
       enablePhysicalIOS,
       enablePrefetching,
@@ -180,6 +183,17 @@ class SettingsSheet extends Component<Props, State> {
               });
             }}
           />
+          <AndroidUserIdField
+            defaultValue={androidUserId}
+            onChange={(v) => {
+              this.setState({
+                updatedSettings: {
+                  ...this.state.updatedSettings,
+                  androidUserId: v,
+                },
+              });
+            }}
+          />
         </ToggledSection>
         <ToggledSection
           label="iOS Developer"
@@ -499,6 +513,46 @@ export default connect<StateFromProps, DispatchFromProps, OwnProps, Store>(
   {updateSettings, updateLauncherSettings},
 )(withTrackingScope(SettingsSheet));
 
+function AndroidUserIdField(props: {
+  defaultValue: string;
+  onChange: (path: string) => void;
+}) {
+  const activeDevice: BaseDevice = useSelector(getActiveDevice);
+  const [users, setUsers] = useState([] as {id: string; name: string}[]);
+
+  activeDevice
+    .executeShell('pm list users')
+    .then((result) => {
+      const users = result
+        .match(/(?<=UserInfo{)(.*?)(?=})/g)
+        ?.map((userInfo) => {
+          const infos = userInfo.split(':');
+          return {id: infos[0], name: `${infos[0]} (${infos[1]})`};
+        });
+      setUsers(users || []);
+    })
+    .catch((error) => console.error(error));
+
+  if (users.length === 0) {
+    return (
+      <ConfigText
+        content={
+          'Loading... Please be sure to connect a device to show available users.'
+        }></ConfigText>
+    );
+  }
+
+  return (
+    <ComboBoxConfigField
+      label="Android User"
+      resetValue={getRenderHostInstance().serverConfig.settings.androidUserId}
+      options={users}
+      defaultValue={props.defaultValue}
+      onChange={props.onChange}
+    />
+  );
+}
+
 function ResetTooltips() {
   const nuxManager = useContext(_NuxManagerContext);
 

desktop/flipper-ui-core/src/chrome/settings/configFields.tsx

@@ -42,6 +42,16 @@ const FileInputBox = styled(Input)<{isValid: boolean}>(({isValid}) => ({
   marginBottom: 'auto',
 }));
 
+const SelectBox = styled.select<{isValid: boolean}>(({isValid}) => ({
+  marginRight: 0,
+  flexGrow: 1,
+  fontFamily: 'monospace',
+  color: isValid ? undefined : colors.red,
+  marginLeft: 10,
+  marginTop: 'auto',
+  marginBottom: 'auto',
+}));
+
 const CenteredGlyph = styled(Glyph)({
   margin: 'auto',
   marginLeft: 10,
@@ -57,6 +67,66 @@ const GrayedOutOverlay = styled.div({
   right: 0,
 });
 
+export function ComboBoxConfigField(props: {
+  label: string;
+  resetValue?: string;
+  options: {id: string; name: string}[];
+  defaultValue: string;
+  onChange: (path: string) => void;
+}) {
+  let defaultOption = props.options.find(
+    (opt) => opt.id === props.defaultValue,
+  );
+  const resetOption = props.options.find((opt) => opt.id === props.resetValue);
+  const [value, setValue] = useState(defaultOption?.id);
+
+  // If there is no valid default value, force setting the value to the first one
+  if (!value) {
+    defaultOption = props.options[0];
+    props.onChange(defaultOption.id);
+    setValue(defaultOption.id);
+  }
+
+  return (
+    <ConfigFieldContainer>
+      <InfoText>{props.label}</InfoText>
+      <SelectBox
+        name="select"
+        isValid={props.options.some((opt) => opt.id === value)}
+        value={value}
+        onChange={(event) => {
+          props.onChange(event.target.value);
+          setValue(props.options[event.target.selectedIndex].id);
+        }}>
+        {props.options.map((option) => {
+          return (
+            <option key={option.id} value={option.id}>
+              {option.name}
+            </option>
+          );
+        })}
+      </SelectBox>
+      {resetOption && (
+        <FlexColumn
+          title={`Reset to default ${props.resetValue}`}
+          onClick={() => {
+            props.onChange(props.resetValue!);
+            setValue(props.resetValue!);
+          }}>
+          <CenteredGlyph
+            color={theme.primaryColor}
+            name="undo"
+            variant="outline"
+          />
+        </FlexColumn>
+      )}
+      {props.options.some((opt) => opt.id === value) ? null : (
+        <CenteredGlyph name="caution-triangle" color={colors.yellow} />
+      )}
+    </ConfigFieldContainer>
+  );
+}
+
 export function FilePathConfigField(props: {
   label: string;
   resetValue?: string;

desktop/scripts/jest-setup-after.tsx

@@ -142,6 +142,7 @@ function createStubRenderHost(): RenderHost {
     },
     settings: {
       androidHome: `/dev/null`,
+      androidUserId: '0',
       darkMode: 'light',
       enableAndroid: false,
       enableIOS: false,