Skip to content

Commit 9c5b093

Browse files
eglitiseeglitise
authored
chore: split Attach to Session into subcomponent files (#2755)
1 parent b71b77e commit 9c5b093

File tree

5 files changed

+150
-71
lines changed

5 files changed

+150
-71
lines changed

‎app/common/renderer/components/SessionBuilder/AttachToSessionTab/AttachToSession.jsx‎

Lines changed: 17 additions & 71 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
1-
import {IconLinkPlus, IconRefresh} from '@tabler/icons-react';
2-
import {Button, Card, Col, Empty, Form, Input, Row, Select, Spin, Tooltip} from 'antd';
3-
import _ from 'lodash';
4-
import {useRef, useState} from 'react';
5-
import {useTranslation} from 'react-i18next';
1+
import {Form, Spin} from 'antd';
62

7-
import {BUTTON} from '../../../constants/antd-types.js';
83
import {getSessionInfo} from '../../../utils/attaching-to-session.js';
9-
import builderStyles from '../SessionBuilder.module.css';
10-
import styles from './AttachToSession.module.css';
4+
import AttachToSessionInstructions from './AttachToSessionInstructions.jsx';
5+
import DiscoveredSessions from './DiscoveredSessions.jsx';
6+
import ManualSessionIdInput from './ManualSessionIdInput.jsx';
7+
import NoSessionsDiscovered from './NoSessionsDiscovered.jsx';
118

9+
/**
10+
* The full Attach to Session tab.
11+
*/
1212
const AttachToSession = ({
1313
serverType,
1414
attachSessId,
@@ -18,12 +18,6 @@ const AttachToSession = ({
1818
getRunningSessions,
1919
loadNewSession,
2020
}) => {
21-
const {t} = useTranslation();
22-
const [manualSessionId, setManualSessionId] = useState(null);
23-
const debouncedSetManualSessionId = useRef(
24-
_.debounce((value) => setManualSessionId(value), 200),
25-
).current;
26-
2721
// list is reversed in order to place the most recent sessions at the top
2822
// slice() is added because reverse() mutates the original array
2923
const sortedRunningSessions = [...runningAppiumSessions]
@@ -32,66 +26,18 @@ const AttachToSession = ({
3226

3327
return (
3428
<Form>
35-
<Form.Item>
36-
<Card>
37-
<p className={builderStyles.localDesc}>
38-
{t('connectToExistingSessionInstructions')}
39-
<br />
40-
{t('selectSessionID')}
41-
</p>
42-
</Card>
43-
</Form.Item>
44-
<Form.Item>
45-
<Row gutter={8}>
46-
<Col span={8} offset={6}>
47-
<Input
48-
placeholder={t('enterSessionID')}
49-
allowClear={true}
50-
onChange={(e) => debouncedSetManualSessionId(e.target.value)}
51-
/>
52-
</Col>
53-
<Col span={4}>
54-
<Button
55-
type={BUTTON.PRIMARY}
56-
disabled={!manualSessionId || manualSessionId.trim() === ''}
57-
onClick={() => loadNewSession(null, manualSessionId)}
58-
icon={<IconLinkPlus size={18} />}
59-
>
60-
{t('attachToSession')}
61-
</Button>
62-
</Col>
63-
</Row>
64-
</Form.Item>
29+
<AttachToSessionInstructions />
30+
<ManualSessionIdInput loadNewSession={loadNewSession} />
6531
<Spin spinning={gettingSessions}>
6632
{sortedRunningSessions.length !== 0 ? (
67-
<Form.Item>
68-
<Row>
69-
<Col span={23}>
70-
<Select
71-
showSearch
72-
placeholder={t('searchSessions')}
73-
value={attachSessId || undefined}
74-
onChange={(value) => setAttachSessId(value)}
75-
options={sortedRunningSessions}
76-
/>
77-
</Col>
78-
<Col span={1}>
79-
<Tooltip title={t('Reload')}>
80-
<Button
81-
className={styles.btnReload}
82-
onClick={getRunningSessions}
83-
icon={<IconRefresh size={18} />}
84-
/>
85-
</Tooltip>
86-
</Col>
87-
</Row>
88-
</Form.Item>
33+
<DiscoveredSessions
34+
attachSessId={attachSessId}
35+
setAttachSessId={setAttachSessId}
36+
getRunningSessions={getRunningSessions}
37+
sortedRunningSessions={sortedRunningSessions}
38+
/>
8939
) : (
90-
<Empty description={t('noRunningSessionsFound')} image={Empty.PRESENTED_IMAGE_SIMPLE}>
91-
<Button onClick={getRunningSessions} icon={<IconRefresh size={18} />}>
92-
{t('Reload')}
93-
</Button>
94-
</Empty>
40+
<NoSessionsDiscovered getRunningSessions={getRunningSessions} />
9541
)}
9642
</Spin>
9743
</Form>

‎app/common/renderer/components/SessionBuilder/AttachToSessionTab/AttachToSessionInstructions.jsx‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import {Card, Form} from 'antd';
2+
import {useTranslation} from 'react-i18next';
3+
4+
import builderStyles from '../SessionBuilder.module.css';
5+
6+
/**
7+
* Instructions describing the purpose and usage of the attach to session tab.
8+
*/
9+
const AttachToSessionInstructions = () => {
10+
const {t} = useTranslation();
11+
12+
return (
13+
<Form.Item>
14+
<Card>
15+
<p className={builderStyles.localDesc}>
16+
{t('connectToExistingSessionInstructions')}
17+
<br />
18+
{t('selectSessionID')}
19+
</p>
20+
</Card>
21+
</Form.Item>
22+
);
23+
};
24+
25+
export default AttachToSessionInstructions;

‎app/common/renderer/components/SessionBuilder/AttachToSessionTab/DiscoveredSessions.jsx‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
import {IconRefresh} from '@tabler/icons-react';
2+
import {Button, Col, Form, Row, Select, Tooltip} from 'antd';
3+
import {useTranslation} from 'react-i18next';
4+
5+
import styles from './AttachToSession.module.css';
6+
7+
/**
8+
* Selection dropdown for all discovered sessions, and a button to refresh the session list.
9+
*/
10+
const DiscoveredSessions = ({
11+
attachSessId,
12+
setAttachSessId,
13+
getRunningSessions,
14+
sortedRunningSessions,
15+
}) => {
16+
const {t} = useTranslation();
17+
18+
return (
19+
<Form.Item>
20+
<Row>
21+
<Col span={23}>
22+
<Select
23+
showSearch
24+
placeholder={t('searchSessions')}
25+
value={attachSessId || undefined}
26+
onChange={(value) => setAttachSessId(value)}
27+
options={sortedRunningSessions}
28+
/>
29+
</Col>
30+
<Col span={1}>
31+
<Tooltip title={t('Reload')}>
32+
<Button
33+
className={styles.btnReload}
34+
onClick={getRunningSessions}
35+
icon={<IconRefresh size={18} />}
36+
/>
37+
</Tooltip>
38+
</Col>
39+
</Row>
40+
</Form.Item>
41+
);
42+
};
43+
44+
export default DiscoveredSessions;

‎app/common/renderer/components/SessionBuilder/AttachToSessionTab/ManualSessionIdInput.jsx‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
import {IconLinkPlus} from '@tabler/icons-react';
2+
import {Button, Col, Form, Input, Row} from 'antd';
3+
import _ from 'lodash';
4+
import {useRef, useState} from 'react';
5+
import {useTranslation} from 'react-i18next';
6+
7+
import {BUTTON} from '../../../constants/antd-types.js';
8+
9+
/**
10+
* Input field and button for manually entering a session ID to attach to.
11+
*/
12+
const ManualSessionIdInput = ({loadNewSession}) => {
13+
const {t} = useTranslation();
14+
const [manualSessionId, setManualSessionId] = useState(null);
15+
const debouncedSetManualSessionId = useRef(
16+
_.debounce((value) => setManualSessionId(value), 200),
17+
).current;
18+
19+
return (
20+
<Form.Item>
21+
<Row gutter={8}>
22+
<Col span={8} offset={6}>
23+
<Input
24+
placeholder={t('enterSessionID')}
25+
allowClear={true}
26+
onChange={(e) => debouncedSetManualSessionId(e.target.value)}
27+
/>
28+
</Col>
29+
<Col span={4}>
30+
<Button
31+
type={BUTTON.PRIMARY}
32+
disabled={!manualSessionId || manualSessionId.trim() === ''}
33+
onClick={() => loadNewSession(null, manualSessionId)}
34+
icon={<IconLinkPlus size={18} />}
35+
>
36+
{t('attachToSession')}
37+
</Button>
38+
</Col>
39+
</Row>
40+
</Form.Item>
41+
);
42+
};
43+
44+
export default ManualSessionIdInput;

‎app/common/renderer/components/SessionBuilder/AttachToSessionTab/NoSessionsDiscovered.jsx‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import {IconRefresh} from '@tabler/icons-react';
2+
import {Button, Empty} from 'antd';
3+
import {useTranslation} from 'react-i18next';
4+
5+
/**
6+
* Message and refresh button shown when no running sessions are discovered.
7+
*/
8+
const NoSessionsDiscovered = ({getRunningSessions}) => {
9+
const {t} = useTranslation();
10+
11+
return (
12+
<Empty description={t('noRunningSessionsFound')} image={Empty.PRESENTED_IMAGE_SIMPLE}>
13+
<Button onClick={getRunningSessions} icon={<IconRefresh size={18} />}>
14+
{t('Reload')}
15+
</Button>
16+
</Empty>
17+
);
18+
};
19+
20+
export default NoSessionsDiscovered;

0 commit comments

Comments
 (0)
⚡