Skip to content

Commit 2c4ce54

Browse files
committed
Migrate ADB config UI to common target list component
1 parent 01dc1a6 commit 2c4ce54

File tree

4 files changed

+35
-55
lines changed

4 files changed

+35
-55
lines changed

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

Lines changed: 21 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -13,8 +13,8 @@ import { RulesStore } from '../../../model/rules/rules-store';
1313

1414
import { setUpAndroidCertificateRule } from './android-device-config';
1515

16-
import { Button } from '../../common/inputs';
1716
import { Icon } from '../../../icons';
17+
import { InterceptionTargetList } from './intercept-target-list';
1818

1919
const ConfigContainer = styled.div`
2020
user-select: text;
@@ -46,29 +46,6 @@ const ConfigContainer = styled.div`
4646
}
4747
`;
4848

49-
const DeviceList = styled.ul`
50-
display: flex;
51-
flex-direction: column;
52-
align-items: stretch;
53-
justify-content: center;
54-
height: 100%;
55-
`;
56-
57-
const AdbDevice = styled.li`
58-
margin: 0 -15px -15px;
59-
padding: 15px;
60-
`;
61-
62-
const AdbDeviceButton = styled(Button)`
63-
font-size: ${p => p.theme.textSize};
64-
font-weight: bold;
65-
padding: 10px 24px;
66-
width: 100%;
67-
68-
> svg {
69-
margin-right: 10px;
70-
}
71-
`;
7249

7350
@inject('proxyStore')
7451
@inject('rulesStore')
@@ -111,29 +88,28 @@ class AndroidAdbConfig extends React.Component<{
11188
Pick which device you'd like to intercept:
11289
</p>
11390

114-
<DeviceList>
115-
{ this.deviceIds.map(id => {
91+
<InterceptionTargetList
92+
spinnerText='Waiting for Android devices to intercept...'
93+
targets={this.deviceIds.map(id => {
11694
const activating = this.inProgressIds.includes(id);
11795

118-
return <AdbDevice key={id}>
119-
<AdbDeviceButton
120-
disabled={activating}
121-
onClick={activating ? _.noop : () => this.interceptDevice(id)}
122-
>
123-
{
124-
activating
125-
? <Icon icon={['fas', 'spinner']} spin />
126-
: id.includes("emulator-")
127-
? <Icon icon={['far', 'window-maximize']} />
128-
: id.match(/\d+\.\d+\.\d+\.\d+:\d+/)
129-
? <Icon icon={['fas', 'network-wired']} />
130-
: <Icon icon={['fas', 'mobile-alt']} />
131-
}
132-
{ id }
133-
</AdbDeviceButton>
134-
</AdbDevice>
135-
}) }
136-
</DeviceList>
96+
return {
97+
id,
98+
title: `Intercept Android device ${id}`,
99+
status: activating
100+
? 'activating'
101+
: 'available',
102+
icon: id.includes("emulator-")
103+
? <Icon icon={['far', 'window-maximize']} />
104+
: id.match(/\d+\.\d+\.\d+\.\d+:\d+/)
105+
? <Icon icon={['fas', 'network-wired']} />
106+
: <Icon icon={['fas', 'mobile-alt']} />,
107+
content: id
108+
};
109+
})}
110+
interceptTarget={this.interceptDevice}
111+
ellipseDirection='right'
112+
/>
137113
</ConfigContainer>;
138114
}
139115

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -102,7 +102,7 @@ class DockerAttachConfig extends React.Component<{
102102
</p>
103103

104104
<InterceptionTargetList<string>
105-
targetName='Docker containers'
105+
spinnerText='Looking for Docker containers to intercept...'
106106
interceptTarget={this.interceptTarget}
107107
ellipseDirection='right'
108108
targets={targets.map((target) => {

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

Lines changed: 12 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -60,10 +60,11 @@ const TargetButton = styled(Button)<{
6060
${p => p.state === 'active' &&
6161
'&& { background-color: #4caf7d; }'
6262
}
63-
`;
6463
65-
const TargetIcon = styled(Icon)`
66-
margin-right: 10px;
64+
> svg:first-child {
65+
margin-right: 10px;
66+
width: 15px;
67+
}
6768
`;
6869

6970
const TargetText = styled.span<{ ellipseDirection: 'left' | 'right' }>`
@@ -83,24 +84,25 @@ type TargetItem<Id> = {
8384
id: Id,
8485
title: string,
8586
content: React.ReactNode,
87+
icon?: React.ReactNode,
8688
status: 'active' | 'available' | 'activating' | 'unavailable',
8789
};
8890

8991
@observer
9092
export class InterceptionTargetList<Id extends string | number> extends React.Component<{
91-
targetName: string,
93+
spinnerText: string,
9294
targets: TargetItem<Id>[],
9395
interceptTarget: (id: Id) => void,
9496
ellipseDirection: 'left' | 'right'
9597
}> {
9698

9799
render() {
98-
const { targetName, targets, interceptTarget, ellipseDirection } = this.props;
100+
const { spinnerText, targets, interceptTarget, ellipseDirection } = this.props;
99101

100102
if (targets.length === 0) {
101103
return <SpinnerBlock>
102104
<Spinner />
103-
Looking for running { targetName } to intercept...
105+
{ spinnerText }
104106
</SpinnerBlock>
105107
}
106108

@@ -118,9 +120,11 @@ export class InterceptionTargetList<Id extends string | number> extends React.Co
118120
>
119121
{
120122
target.status === 'activating'
121-
? <TargetIcon icon={['fas', 'spinner']} spin />
123+
? <Icon icon={['fas', 'spinner']} spin />
122124
: target.status === 'active'
123-
? <TargetIcon icon={['fas', 'check']} />
125+
? <Icon icon={['fas', 'check']} />
126+
: target.icon
127+
? target.icon
124128
: null
125129
}
126130
<TargetText ellipseDirection={ellipseDirection}>

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -60,7 +60,7 @@ class JvmConfig extends React.Component<{
6060
</p>
6161

6262
<InterceptionTargetList<string>
63-
targetName='JVM processes'
63+
spinnerText='Looking for JVM processes to intercept...'
6464
interceptTarget={this.interceptTarget}
6565
ellipseDirection='left'
6666
targets={interestingTargets.map((target) => {

0 commit comments

Comments
 (0)