Migrate ADB config UI to common target list component

Author: pimterry

src/components/intercept/config/android-adb-config.tsx

@@ -13,8 +13,8 @@ import { RulesStore } from '../../../model/rules/rules-store';
 
 import { setUpAndroidCertificateRule } from './android-device-config';
 
-import { Button } from '../../common/inputs';
 import { Icon } from '../../../icons';
+import { InterceptionTargetList } from './intercept-target-list';
 
 const ConfigContainer = styled.div`
     user-select: text;
@@ -46,29 +46,6 @@ const ConfigContainer = styled.div`
     }
 `;
 
-const DeviceList = styled.ul`
-    display: flex;
-    flex-direction: column;
-    align-items: stretch;
-    justify-content: center;
-    height: 100%;
-`;
-
-const AdbDevice = styled.li`
-    margin: 0 -15px -15px;
-    padding: 15px;
-`;
-
-const AdbDeviceButton = styled(Button)`
-    font-size: ${p => p.theme.textSize};
-    font-weight: bold;
-    padding: 10px 24px;
-    width: 100%;
-
-    > svg {
-        margin-right: 10px;
-    }
-`;
 
 @inject('proxyStore')
 @inject('rulesStore')
@@ -111,29 +88,28 @@ class AndroidAdbConfig extends React.Component<{
                 Pick which device you'd like to intercept:
             </p>
 
-            <DeviceList>
-                { this.deviceIds.map(id => {
+            <InterceptionTargetList
+                spinnerText='Waiting for Android devices to intercept...'
+                targets={this.deviceIds.map(id => {
                     const activating = this.inProgressIds.includes(id);
 
-                    return <AdbDevice key={id}>
-                        <AdbDeviceButton
-                            disabled={activating}
-                            onClick={activating ? _.noop : () => this.interceptDevice(id)}
-                        >
-                            {
-                                activating
-                                    ? <Icon icon={['fas', 'spinner']} spin />
-                                : id.includes("emulator-")
-                                    ? <Icon icon={['far', 'window-maximize']} />
-                                : id.match(/\d+\.\d+\.\d+\.\d+:\d+/)
-                                    ? <Icon icon={['fas', 'network-wired']} />
-                                : <Icon icon={['fas', 'mobile-alt']} />
-                            }
-                            { id }
-                        </AdbDeviceButton>
-                    </AdbDevice>
-                }) }
-            </DeviceList>
+                    return {
+                        id,
+                        title: `Intercept Android device ${id}`,
+                        status: activating
+                                ? 'activating'
+                                : 'available',
+                        icon: id.includes("emulator-")
+                            ? <Icon icon={['far', 'window-maximize']} />
+                        : id.match(/\d+\.\d+\.\d+\.\d+:\d+/)
+                            ? <Icon icon={['fas', 'network-wired']} />
+                        : <Icon icon={['fas', 'mobile-alt']} />,
+                        content: id
+                    };
+                })}
+                interceptTarget={this.interceptDevice}
+                ellipseDirection='right'
+            />
         </ConfigContainer>;
     }
 

src/components/intercept/config/docker-attach-config.tsx

@@ -102,7 +102,7 @@ class DockerAttachConfig extends React.Component<{
             </p>
 
             <InterceptionTargetList<string>
-                targetName='Docker containers'
+                spinnerText='Looking for Docker containers to intercept...'
                 interceptTarget={this.interceptTarget}
                 ellipseDirection='right'
                 targets={targets.map((target) => {

src/components/intercept/config/intercept-target-list.tsx

@@ -60,10 +60,11 @@ const TargetButton = styled(Button)<{
     ${p => p.state === 'active' &&
         '&& { background-color: #4caf7d; }'
     }
-`;
 
-const TargetIcon = styled(Icon)`
-    margin-right: 10px;
+    > svg:first-child {
+        margin-right: 10px;
+        width: 15px;
+    }
 `;
 
 const TargetText = styled.span<{ ellipseDirection: 'left' | 'right' }>`
@@ -83,24 +84,25 @@ type TargetItem<Id> = {
     id: Id,
     title: string,
     content: React.ReactNode,
+    icon?: React.ReactNode,
     status: 'active' | 'available' | 'activating' | 'unavailable',
 };
 
 @observer
 export class InterceptionTargetList<Id extends string | number> extends React.Component<{
-    targetName: string,
+    spinnerText: string,
     targets: TargetItem<Id>[],
     interceptTarget: (id: Id) => void,
     ellipseDirection: 'left' | 'right'
 }> {
 
     render() {
-        const { targetName, targets, interceptTarget, ellipseDirection } = this.props;
+        const { spinnerText, targets, interceptTarget, ellipseDirection } = this.props;
 
         if (targets.length === 0) {
             return <SpinnerBlock>
                 <Spinner />
-                Looking for running { targetName } to intercept...
+                { spinnerText }
             </SpinnerBlock>
         }
 
@@ -118,9 +120,11 @@ export class InterceptionTargetList<Id extends string | number> extends React.Co
                     >
                         {
                             target.status === 'activating'
-                                ? <TargetIcon icon={['fas', 'spinner']} spin />
+                                ? <Icon icon={['fas', 'spinner']} spin />
                             : target.status === 'active'
-                                ? <TargetIcon icon={['fas', 'check']} />
+                                ? <Icon icon={['fas', 'check']} />
+                            : target.icon
+                                ? target.icon
                             : null
                         }
                         <TargetText ellipseDirection={ellipseDirection}>

src/components/intercept/config/jvm-config.tsx

@@ -60,7 +60,7 @@ class JvmConfig extends React.Component<{
             </p>
 
             <InterceptionTargetList<string>
-                targetName='JVM processes'
+                spinnerText='Looking for JVM processes to intercept...'
                 interceptTarget={this.interceptTarget}
                 ellipseDirection='left'
                 targets={interestingTargets.map((target) => {