style: render discovered sessions as card grid (#2758)

* style: render discovered sessions as card grid

* start updating docs

* simplify translation key

* update docs

* prettier

* address comments

* address comments

* fix tests

Author: eglitise

app/common/public/locales/en/translation.json

@@ -152,13 +152,13 @@
   "number": "number",
   "JSON object": "JSON object",
   "connectToExistingSessionInstructions": "If you have an already-running session of the above server type, you can attach an inspector to it directly.",
-  "selectSessionID": "You can manually enter the ID of the session you want to attach to, or, if the server supports session discovery, simply select from a list of active sessions.",
+  "selectSessionID": "You can manually enter your session ID, or, if the server supports session discovery, simply select from a list of active sessions.",
   "allowUnauthorizedCerts": "Allow Unauthorized Certificates",
   "Use Proxy": "Use Proxy",
   "JSON Representation": "JSON Representation",
   "Capability Builder": "Capability Builder",
   "Saved Capability Sets": "Saved Capability Sets",
-  "Attach to Session": "Attach to Session…",
+  "Attach": "Attach",
   "localhost": "localhost",
   "Host": "Host",
   "Port": "Port",

app/common/renderer/actions/SessionBuilder.js

@@ -53,8 +53,6 @@ export const CHANGE_SERVER_TYPE = 'CHANGE_SERVER_TYPE';
 export const SET_SERVER_PARAM = 'SET_SERVER_PARAM';
 export const SET_SERVER = 'SET_SERVER';
 
-export const SET_ATTACH_SESS_ID = 'SET_ATTACH_SESS_ID';
-
 export const GET_SESSIONS_REQUESTED = 'GET_SESSIONS_REQUESTED';
 export const GET_SESSIONS_DONE = 'GET_SESSIONS_DONE';
 
@@ -510,15 +508,6 @@ export function deleteSavedSession(uuid) {
   };
 }
 
-/**
- * Set the session id to attach to
- */
-export function setAttachSessId(attachSessId) {
-  return (dispatch) => {
-    dispatch({type: SET_ATTACH_SESS_ID, attachSessId});
-  };
-}
-
 /**
  * Change the server type
  */
@@ -746,7 +735,7 @@ export function getRunningSessions() {
   return async (dispatch, getState) => {
     const avoidServerTypes = ['sauce'];
     const state = getState().builder;
-    const {server, serverType, attachSessId} = state;
+    const {server, serverType} = state;
     const vendorProperties = await retrieveVendorProperties({
       server,
       serverType,
@@ -793,17 +782,6 @@ export function getRunningSessions() {
     const baseUrl = `${protocol}://${host}:${port}${adjPath}`;
     const sessions = await fetchAllSessions(baseUrl, headers);
     dispatch({type: GET_SESSIONS_DONE, sessions});
-
-    // set attachSessId if only one session found
-    if (sessions.length === 1) {
-      dispatch({type: SET_ATTACH_SESS_ID, attachSessId: sessions[0].id});
-    } else if (attachSessId) {
-      // clear attachSessId if it is no longer present in the found session list
-      const attachSessIdFound = sessions.find((session) => session.id === attachSessId);
-      if (!attachSessIdFound) {
-        dispatch({type: SET_ATTACH_SESS_ID, attachSessId: null});
-      }
-    }
   };
 }
 
@@ -1063,6 +1041,7 @@ export function initFromQueryString(loadNewSession) {
     }
 
     if (autoStartSession === AUTO_START_URL_PARAM) {
+      // at this point these can only be set using SET_STATE_FROM_URL
       const {attachSessId, caps} = getState().builder;
       if (attachSessId) {
         return loadNewSession(null, attachSessId);

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

@@ -1,7 +1,6 @@
 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';
@@ -12,19 +11,12 @@ import ManualIdInputAndRefreshBtn from './ManualIdInputAndRefreshBtn.jsx';
  */
 const AttachToSession = ({
   serverType,
-  attachSessId,
-  setAttachSessId,
   runningAppiumSessions,
   gettingSessions,
   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 (
     <Space className={styles.spaceContainer} orientation="vertical" size="large">
@@ -34,11 +26,11 @@ const AttachToSession = ({
         getRunningSessions={getRunningSessions}
       />
       <Spin spinning={gettingSessions}>
-        {sortedRunningSessions.length !== 0 ? (
+        {runningAppiumSessions.length !== 0 ? (
           <DiscoveredSessions
-            attachSessId={attachSessId}
-            setAttachSessId={setAttachSessId}
-            sortedRunningSessions={sortedRunningSessions}
+            runningAppiumSessions={runningAppiumSessions}
+            serverType={serverType}
+            loadNewSession={loadNewSession}
           />
         ) : (
           <Empty description={t('noRunningSessionsFound')} image={Empty.PRESENTED_IMAGE_SIMPLE} />

app/common/renderer/components/SessionBuilder/AttachToSessionTab/DiscoveredSessionCard.jsx

@@ -0,0 +1,65 @@
+import {
+  IconApps,
+  IconClockHour4,
+  IconDeviceMobile,
+  IconDeviceMobileCog,
+  IconLinkPlus,
+  IconTag,
+} from '@tabler/icons-react';
+import {Button, Card, Col, Flex, Row, Space, Typography} from 'antd';
+import {useTranslation} from 'react-i18next';
+
+import {BUTTON} from '../../../constants/antd-types.js';
+import {getSessionInfo} from '../../../utils/attaching-to-session.js';
+import styles from './AttachToSession.module.css';
+
+const addIcon = (Icon, label) => (
+  <Flex gap={4} align="center">
+    <Icon size={18} />
+    <Typography.Text ellipsis={true}>{label}</Typography.Text>
+  </Flex>
+);
+
+/**
+ * Card for a single discovered session.
+ */
+const DiscoveredSessionCard = ({session, serverType, loadNewSession}) => {
+  const {t} = useTranslation();
+  const sessionDetails = getSessionInfo(session, serverType);
+
+  return (
+    <Card hoverable={true} styles={{root: {height: '100%'}, body: {padding: '8px'}}}>
+      <Space className={styles.spaceContainer} orientation="vertical" size="small">
+        <Row justify="space-between" align="middle">
+          <Typography.Text code ellipsis={true}>
+            {sessionDetails.id}
+          </Typography.Text>
+          <Button
+            type={BUTTON.PRIMARY}
+            icon={<IconLinkPlus size={18} />}
+            onClick={() => loadNewSession(null, sessionDetails.id)}
+          >
+            {t('Attach')}
+          </Button>
+        </Row>
+        {sessionDetails.sessionName && <Row>{addIcon(IconTag, sessionDetails.sessionName)}</Row>}
+        <Row>
+          {sessionDetails.deviceId && (
+            <Col span={12}>{addIcon(IconDeviceMobile, sessionDetails.deviceId)}</Col>
+          )}
+          <Col span={12}>{addIcon(IconDeviceMobileCog, sessionDetails.platformInfo)}</Col>
+        </Row>
+        {sessionDetails.appId || sessionDetails.timestamp ? (
+          <Row>
+            {sessionDetails.appId && <Col span={12}>{addIcon(IconApps, sessionDetails.appId)}</Col>}
+            {sessionDetails.timestamp && (
+              <Col span={12}>{addIcon(IconClockHour4, sessionDetails.timestamp)}</Col>
+            )}
+          </Row>
+        ) : null}
+      </Space>
+    </Card>
+  );
+};
+
+export default DiscoveredSessionCard;

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

@@ -1,24 +1,25 @@
-import {Col, Row, Select} from 'antd';
-import {useTranslation} from 'react-i18next';
+import {Col, Row} from 'antd';
+
+import DiscoveredSessionCard from './DiscoveredSessionCard.jsx';
 
 /**
- * Selection dropdown for all discovered sessions.
+ * Grid container for all discovered sessions.
  */
-const DiscoveredSessions = ({attachSessId, setAttachSessId, sortedRunningSessions}) => {
-  const {t} = useTranslation();
+const DiscoveredSessions = ({runningAppiumSessions, serverType, loadNewSession}) => {
+  // list is reversed in order to place the most recent sessions at the top
+  const sortedRunningSessions = [...runningAppiumSessions].reverse();
 
   return (
-    <Row>
-      <Col span={24}>
-        <Select
-          style={{width: '100%'}}
-          showSearch
-          placeholder={t('searchSessions')}
-          value={attachSessId || undefined}
-          onChange={(value) => setAttachSessId(value)}
-          options={sortedRunningSessions}
-        />
-      </Col>
+    <Row gutter={[12, 12]}>
+      {sortedRunningSessions.map((session) => (
+        <Col xs={12} sm={12} md={12} lg={12} xl={8} xxl={6} key={session.id}>
+          <DiscoveredSessionCard
+            session={session}
+            serverType={serverType}
+            loadNewSession={loadNewSession}
+          />
+        </Col>
+      ))}
     </Row>
   );
 };

app/common/renderer/components/SessionBuilder/SessionBuilder.jsx

@@ -48,7 +48,6 @@ const Session = (props) => {
     newSession,
     savedSessions,
     newSessionLoading,
-    attachSessId,
     setLocalServerParams,
     getSavedSessions,
     setSavedServerParams,
@@ -173,7 +172,7 @@ const Session = (props) => {
               children: <SavedCapabilitySets {...props} />,
             },
             {
-              label: t('Attach to Session'),
+              label: t('attachToSession'),
               key: SESSION_BUILDER_TABS.ATTACH_TO_SESSION,
               className: styles.scrollingTab,
               children: <AttachToSession loadNewSession={loadNewSession} {...props} />,
@@ -218,15 +217,6 @@ const Session = (props) => {
               {t('startSession')}
             </Button>
           )}
-          {isAttaching && (
-            <Button
-              type={BUTTON.PRIMARY}
-              disabled={!attachSessId}
-              onClick={() => loadNewSession(null, attachSessId)}
-            >
-              {t('attachToSession')}
-            </Button>
-          )}
         </div>
       </div>
     </Spin>,

app/common/renderer/reducers/SessionBuilder.js

@@ -27,7 +27,6 @@ import {
   SESSION_UPLOAD_DONE,
   SESSION_UPLOAD_REQUESTED,
   SET_ADD_VENDOR_PREFIXES,
-  SET_ATTACH_SESS_ID,
   SET_CAPABILITY_NAME_ERROR,
   SET_CAPABILITY_PARAM,
   SET_CAPS_AND_SERVER,
@@ -259,12 +258,6 @@ export default function builder(state = INITIAL_STATE, action) {
         serverType: action.serverType || SERVER_TYPES.LOCAL,
       };
 
-    case SET_ATTACH_SESS_ID:
-      return {
-        ...state,
-        attachSessId: action.attachSessId,
-      };
-
     case GET_SESSIONS_REQUESTED:
       return {
         ...state,

app/common/renderer/utils/attaching-to-session.js

@@ -3,7 +3,7 @@ import _ from 'lodash';
 
 import {SERVER_TYPES} from '../constants/session-builder.js';
 
-class DefaultSessionDescription {
+class DefaultKeySessionCaps {
   constructor(caps) {
     this._caps = caps;
   }
@@ -13,7 +13,7 @@ class DefaultSessionDescription {
     return this._caps.sessionName;
   }
 
-  _fetchDeviceInfo() {
+  _fetchDeviceIdentifier() {
     return this._caps.deviceName || this._caps.avd || this._caps.udid;
   }
 
@@ -22,57 +22,61 @@ class DefaultSessionDescription {
       const platformInfo = this._caps.platformVersion
         ? `${this._caps.platformName} ${this._caps.platformVersion}`
         : this._caps.platformName;
-      return platformInfo;
+      // Capabilities may not have automationName for e.g. Selenium Grid
+      return this._caps.automationName
+        ? `${platformInfo} (${this._caps.automationName})`
+        : platformInfo;
     }
-  }
-
-  _fetchAutomationName() {
     return this._caps.automationName;
   }
 
-  _fetchAppInfo() {
+  _fetchAppIdentifier() {
     return this._caps.app || this._caps.bundleId || this._caps.appPackage;
   }
 
   assemble() {
-    const suffixItems = [
-      this._fetchSessionName(),
-      this._fetchDeviceInfo(),
-      this._fetchPlatformInfo(),
-      this._fetchAutomationName(),
-      this._fetchAppInfo(),
-    ];
-    return _.compact(suffixItems).join(' / ');
+    return {
+      sessionName: this._fetchSessionName(),
+      deviceId: this._fetchDeviceIdentifier(),
+      platformInfo: this._fetchPlatformInfo(),
+      appId: this._fetchAppIdentifier(),
+    };
   }
 }
 
-class TestMuAISessionDescription extends DefaultSessionDescription {
+class TestMuAIKeySessionCaps extends DefaultKeySessionCaps {
   constructor(caps) {
     super('capabilities' in caps ? caps.capabilities : caps);
   }
 
-  _fetchDeviceInfo() {
+  _fetchDeviceIdentifier() {
     return 'desired' in this._caps ? this._caps.desired.deviceName : this._caps.deviceName;
   }
 }
 
-const getSessionDescription = (caps, serverType) => {
+const getKeySessionCaps = (caps, serverType) => {
   switch (serverType) {
     case SERVER_TYPES.TESTMUAI:
-      return new TestMuAISessionDescription(caps);
+      return new TestMuAIKeySessionCaps(caps);
     default:
-      return new DefaultSessionDescription(caps);
+      return new DefaultKeySessionCaps(caps);
   }
 };
 
 export const getSessionInfo = (session, serverType) => {
-  let identifier = session.id;
+  let timestamp;
   if ('created' in session && !_.isUndefined(session.created)) {
-    // For Appium 3+ sessions, replace session ID with timestamp
-    identifier = new Date(session.created).toJSON();
+    // Add the timestamp for Appium 3+ sessions
+    timestamp = new Date(session.created).toJSON();
   }
-  const description = getSessionDescription(session.capabilities, serverType).assemble();
-  return `${identifier} — ${description}`;
+
+  const keyCaps = getKeySessionCaps(session.capabilities, serverType).assemble();
+
+  return {
+    id: session.id,
+    timestamp,
+    ...keyCaps,
+  };
 };
 
 // Make a session-related HTTP GET request to the provided Appium server URL