style: use common refresh button in Attach to Session (#2756)

eglitise · web-flow · commit f04134cafd7c · 2026-04-08T14:12:54.000+03:00
* chore: remove debounce for manual input for responsiveness
This is better after the refactor, since only the ManualSessionIdInput component is refreshed now.

* style: replace Form with Space

* style: use common refresh button with custom text
diff --git a/app/common/public/locales/en/translation.json b/app/common/public/locales/en/translation.json
@@ -323,5 +323,6 @@
   "useScreenshotApi": "Use Screenshot API",
   "Box Model": "Box Model",
   "detachFromSession": "Detach from Session",
-  "enterSessionID": "Enter session ID for attaching manually"
+  "enterSessionID": "Enter session ID for attaching manually",
+  "refreshDiscoveredSessions": "Refresh Discovered Sessions"
 }
diff --git a/app/common/renderer/components/SessionBuilder/AttachToSessionTab/AttachToSession.jsx b/app/common/renderer/components/SessionBuilder/AttachToSessionTab/AttachToSession.jsx
@@ -1,10 +1,11 @@
-import {Form, Spin} from 'antd';
+import {Empty, Space, Spin} from 'antd';
+import {useTranslation} from 'react-i18next';
 
 import {getSessionInfo} from '../../../utils/attaching-to-session.js';
+import styles from './AttachToSession.module.css';
 import AttachToSessionInstructions from './AttachToSessionInstructions.jsx';
 import DiscoveredSessions from './DiscoveredSessions.jsx';
-import ManualSessionIdInput from './ManualSessionIdInput.jsx';
-import NoSessionsDiscovered from './NoSessionsDiscovered.jsx';
+import ManualIdInputAndRefreshBtn from './ManualIdInputAndRefreshBtn.jsx';
 
 /**
  * The full Attach to Session tab.
@@ -18,29 +19,32 @@ const AttachToSession = ({
   getRunningSessions,
   loadNewSession,
 }) => {
+  const {t} = useTranslation();
   // list is reversed in order to place the most recent sessions at the top
   // slice() is added because reverse() mutates the original array
   const sortedRunningSessions = [...runningAppiumSessions]
     .reverse()
     .map((session) => ({value: session.id, label: getSessionInfo(session, serverType)}));
 
   return (
-    <Form>
+    <Space className={styles.spaceContainer} orientation="vertical" size="large">
       <AttachToSessionInstructions />
-      <ManualSessionIdInput loadNewSession={loadNewSession} />
+      <ManualIdInputAndRefreshBtn
+        loadNewSession={loadNewSession}
+        getRunningSessions={getRunningSessions}
+      />
       <Spin spinning={gettingSessions}>
         {sortedRunningSessions.length !== 0 ? (
           <DiscoveredSessions
             attachSessId={attachSessId}
             setAttachSessId={setAttachSessId}
-            getRunningSessions={getRunningSessions}
             sortedRunningSessions={sortedRunningSessions}
           />
         ) : (
-          <NoSessionsDiscovered getRunningSessions={getRunningSessions} />
+          <Empty description={t('noRunningSessionsFound')} image={Empty.PRESENTED_IMAGE_SIMPLE} />
         )}
       </Spin>
-    </Form>
+    </Space>
   );
 };
 
diff --git a/app/common/renderer/components/SessionBuilder/AttachToSessionTab/AttachToSession.module.css b/app/common/renderer/components/SessionBuilder/AttachToSessionTab/AttachToSession.module.css
@@ -1,4 +1,4 @@
-.btnReload {
-  float: right;
-  margin-left: 8px;
+.spaceContainer {
+  display: flex;
+  word-break: break-word;
 }
diff --git a/app/common/renderer/components/SessionBuilder/AttachToSessionTab/AttachToSessionInstructions.jsx b/app/common/renderer/components/SessionBuilder/AttachToSessionTab/AttachToSessionInstructions.jsx
@@ -1,4 +1,4 @@
-import {Card, Form} from 'antd';
+import {Card} from 'antd';
 import {useTranslation} from 'react-i18next';
 
 import builderStyles from '../SessionBuilder.module.css';
@@ -10,15 +10,13 @@ const AttachToSessionInstructions = () => {
   const {t} = useTranslation();
 
   return (
-    <Form.Item>
-      <Card>
-        <p className={builderStyles.localDesc}>
-          {t('connectToExistingSessionInstructions')}
-          <br />
-          {t('selectSessionID')}
-        </p>
-      </Card>
-    </Form.Item>
+    <Card>
+      <p className={builderStyles.localDesc}>
+        {t('connectToExistingSessionInstructions')}
+        <br />
+        {t('selectSessionID')}
+      </p>
+    </Card>
   );
 };
 
diff --git a/app/common/renderer/components/SessionBuilder/AttachToSessionTab/DiscoveredSessions.jsx b/app/common/renderer/components/SessionBuilder/AttachToSessionTab/DiscoveredSessions.jsx
@@ -1,43 +1,25 @@
-import {IconRefresh} from '@tabler/icons-react';
-import {Button, Col, Form, Row, Select, Tooltip} from 'antd';
+import {Col, Row, Select} from 'antd';
 import {useTranslation} from 'react-i18next';
 
-import styles from './AttachToSession.module.css';
-
 /**
- * Selection dropdown for all discovered sessions, and a button to refresh the session list.
+ * Selection dropdown for all discovered sessions.
  */
-const DiscoveredSessions = ({
-  attachSessId,
-  setAttachSessId,
-  getRunningSessions,
-  sortedRunningSessions,
-}) => {
+const DiscoveredSessions = ({attachSessId, setAttachSessId, sortedRunningSessions}) => {
   const {t} = useTranslation();
 
   return (
-    <Form.Item>
-      <Row>
-        <Col span={23}>
-          <Select
-            showSearch
-            placeholder={t('searchSessions')}
-            value={attachSessId || undefined}
-            onChange={(value) => setAttachSessId(value)}
-            options={sortedRunningSessions}
-          />
-        </Col>
-        <Col span={1}>
-          <Tooltip title={t('Reload')}>
-            <Button
-              className={styles.btnReload}
-              onClick={getRunningSessions}
-              icon={<IconRefresh size={18} />}
-            />
-          </Tooltip>
-        </Col>
-      </Row>
-    </Form.Item>
+    <Row>
+      <Col span={24}>
+        <Select
+          style={{width: '100%'}}
+          showSearch
+          placeholder={t('searchSessions')}
+          value={attachSessId || undefined}
+          onChange={(value) => setAttachSessId(value)}
+          options={sortedRunningSessions}
+        />
+      </Col>
+    </Row>
   );
 };
 
diff --git a/app/common/renderer/components/SessionBuilder/AttachToSessionTab/ManualIdInputAndRefreshBtn.jsx b/app/common/renderer/components/SessionBuilder/AttachToSessionTab/ManualIdInputAndRefreshBtn.jsx
@@ -1,32 +1,27 @@
-import {IconLinkPlus} from '@tabler/icons-react';
-import {Button, Col, Form, Input, Row} from 'antd';
-import _ from 'lodash';
-import {useRef, useState} from 'react';
+import {IconLinkPlus, IconRefresh} from '@tabler/icons-react';
+import {Button, Col, Input, Row, Space} from 'antd';
+import {useState} from 'react';
 import {useTranslation} from 'react-i18next';
 
 import {BUTTON} from '../../../constants/antd-types.js';
 
 /**
- * Input field and button for manually entering a session ID to attach to.
+ * Input field and button for manually entering a session ID to attach to,
+ * as well as a button to refresh the list of discovered sessions.
  */
-const ManualSessionIdInput = ({loadNewSession}) => {
+const ManualIdInputAndRefreshBtn = ({loadNewSession, getRunningSessions}) => {
   const {t} = useTranslation();
   const [manualSessionId, setManualSessionId] = useState(null);
-  const debouncedSetManualSessionId = useRef(
-    _.debounce((value) => setManualSessionId(value), 200),
-  ).current;
 
   return (
-    <Form.Item>
-      <Row gutter={8}>
-        <Col span={8} offset={6}>
+    <Row justify="space-around">
+      <Col span={12}>
+        <Space.Compact block>
           <Input
             placeholder={t('enterSessionID')}
             allowClear={true}
-            onChange={(e) => debouncedSetManualSessionId(e.target.value)}
+            onChange={(e) => setManualSessionId(e.target.value)}
           />
-        </Col>
-        <Col span={4}>
           <Button
             type={BUTTON.PRIMARY}
             disabled={!manualSessionId || manualSessionId.trim() === ''}
@@ -35,10 +30,13 @@ const ManualSessionIdInput = ({loadNewSession}) => {
           >
             {t('attachToSession')}
           </Button>
-        </Col>
-      </Row>
-    </Form.Item>
+        </Space.Compact>
+      </Col>
+      <Button onClick={getRunningSessions} icon={<IconRefresh size={18} />}>
+        {t('refreshDiscoveredSessions')}
+      </Button>
+    </Row>
   );
 };
 
-export default ManualSessionIdInput;
+export default ManualIdInputAndRefreshBtn;
diff --git a/app/common/renderer/components/SessionBuilder/AttachToSessionTab/NoSessionsDiscovered.jsx b/app/common/renderer/components/SessionBuilder/AttachToSessionTab/NoSessionsDiscovered.jsx

Original file line number	Diff line number	Diff line change
`@@ -323,5 +323,6 @@`
`323`	`323`	`"useScreenshotApi": "Use Screenshot API",`
`324`	`324`	`"Box Model": "Box Model",`
`325`	`325`	`"detachFromSession": "Detach from Session",`
`326`		`- "enterSessionID": "Enter session ID for attaching manually"`
	`326`	`+ "enterSessionID": "Enter session ID for attaching manually",`
	`327`	`+ "refreshDiscoveredSessions": "Refresh Discovered Sessions"`
`327`	`328`	`}`
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-.btnReload {`
`2`		`- float: right;`
`3`		`- margin-left: 8px;`
	`1`	`+.spaceContainer {`
	`2`	`+ display: flex;`
	`3`	`+ word-break: break-word;`
`4`	`4`	`}`