Device manager - add foundation for extended device info (matrix-org#9344)

* record device client inforamtion events on app start * matrix-client-information -> matrix_client_information * fix types * remove another unused export * add docs link * display device client information in device details * update snapshots * integration-ish test client information in metadata * tests * fix tests * export helper * DeviceClientInformation type * Device manager - select all devices (matrix-org#9330) * add device selection that does nothing * multi select and sign out of sessions * test multiple selection * fix type after rebase * select all sessions * rename type * use ExtendedDevice type everywhere * rename clientName to appName for less collision with UA parser * fix bad find and replace * rename ExtendedDeviceInfo to ExtendedDeviceAppInfo * rename DeviceType comp to DeviceTypeIcon * update tests for new required property deviceType * add stubbed user agent parsing

Author: Kerry

res/css/_components.pcss

@@ -34,7 +34,7 @@
 @import "./components/views/settings/devices/_DeviceExpandDetailsButton.pcss";
 @import "./components/views/settings/devices/_DeviceSecurityCard.pcss";
 @import "./components/views/settings/devices/_DeviceTile.pcss";
-@import "./components/views/settings/devices/_DeviceType.pcss";
+@import "./components/views/settings/devices/_DeviceTypeIcon.pcss";
 @import "./components/views/settings/devices/_FilteredDeviceList.pcss";
 @import "./components/views/settings/devices/_FilteredDeviceListHeader.pcss";
 @import "./components/views/settings/devices/_SecurityRecommendations.pcss";

res/css/components/views/settings/devices/_DeviceType.pcss renamed to res/css/components/views/settings/devices/_DeviceTypeIcon.pcss

@@ -14,15 +14,15 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-.mx_DeviceType {
+.mx_DeviceTypeIcon {
  flex: 0 0 auto;
  position: relative;
  margin-right: $spacing-8;
  /* creates space for verification icon to overlap */
  padding: 0 $spacing-8 $spacing-8 0;
 }
 
-.mx_DeviceType_deviceIcon {
+.mx_DeviceTypeIcon_deviceIcon {
  --background-color: $system;
  --icon-color: $secondary-content;
 
@@ -36,12 +36,12 @@ limitations under the License.
  background-color: var(--background-color);
 }
 
-.mx_DeviceType_selected .mx_DeviceType_deviceIcon {
+.mx_DeviceTypeIcon_selected .mx_DeviceTypeIcon_deviceIcon {
  --background-color: $primary-content;
  --icon-color: $background;
 }
 
-.mx_DeviceType_verificationIcon {
+.mx_DeviceTypeIcon_verificationIcon {
  position: absolute;
  bottom: 0;
  right: 0;

res/css/views/settings/_DevicesPanel.pcss

@@ -58,7 +58,7 @@ limitations under the License.
  min-height: 35px;
  padding: 0 $spacing-8;
 
- .mx_DeviceType {
+ .mx_DeviceTypeIcon {
  /* hide the new device type in legacy device list
  for backwards compat reasons */
  display: none;

src/components/views/settings/DevicesPanelEntry.tsx

@@ -29,6 +29,7 @@ import VerificationRequestDialog from '../../views/dialogs/VerificationRequestDi
 import LogoutDialog from '../dialogs/LogoutDialog';
 import DeviceTile from './devices/DeviceTile';
 import SelectableDeviceTile from './devices/SelectableDeviceTile';
+import { DeviceType } from '../../../utils/device/parseUserAgent';
 
 interface IProps {
  device: IMyDevice;
@@ -153,25 +154,26 @@ export default class DevicesPanelEntry extends React.Component<IProps, IState> {
  </AccessibleButton>
  </React.Fragment>;
 
- const deviceWithVerification = {
+ const extendedDevice = {
  ...this.props.device,
  isVerified: this.props.verified,
+ deviceType: DeviceType.Unknown,
  };
 
  if (this.props.isOwnDevice) {
  return <div className={classNames("mx_DevicesPanel_device", "mx_DevicesPanel_myDevice")}>
  <div className="mx_DevicesPanel_deviceTrust">
  <span className={"mx_DevicesPanel_icon mx_E2EIcon " + iconClass} />
  </div>
- <DeviceTile device={deviceWithVerification}>
+ <DeviceTile device={extendedDevice}>
  { buttons }
  </DeviceTile>
  </div>;
  }
 
  return (
  <div className="mx_DevicesPanel_device">
- <SelectableDeviceTile device={deviceWithVerification} onClick={this.onDeviceToggled} isSelected={this.props.selected}>
+ <SelectableDeviceTile device={extendedDevice} onClick={this.onDeviceToggled} isSelected={this.props.selected}>
  { buttons }
  </SelectableDeviceTile>
  </div>

src/components/views/settings/devices/CurrentDeviceSection.tsx

@@ -24,10 +24,10 @@ import DeviceDetails from './DeviceDetails';
 import DeviceExpandDetailsButton from './DeviceExpandDetailsButton';
 import DeviceTile from './DeviceTile';
 import { DeviceVerificationStatusCard } from './DeviceVerificationStatusCard';
-import { DeviceWithVerification } from './types';
+import { ExtendedDevice } from './types';
 
 interface Props {
- device?: DeviceWithVerification;
+ device?: ExtendedDevice;
  isLoading: boolean;
  isSigningOut: boolean;
  localNotificationSettings?: LocalNotificationSettings | undefined;

src/components/views/settings/devices/DeviceDetailHeading.tsx

@@ -22,10 +22,10 @@ import Field from '../../elements/Field';
 import Spinner from '../../elements/Spinner';
 import { Caption } from '../../typography/Caption';
 import Heading from '../../typography/Heading';
-import { DeviceWithVerification } from './types';
+import { ExtendedDevice } from './types';
 
 interface Props {
- device: DeviceWithVerification;
+ device: ExtendedDevice;
  saveDeviceName: (deviceName: string) => Promise<void>;
 }
 

src/components/views/settings/devices/DeviceDetails.tsx

@@ -72,8 +72,8 @@ const DeviceDetails: React.FC<Props> = ({
  id: 'application',
  heading: _t('Application'),
  values: [
- { label: _t('Name'), value: device.clientName },
- { label: _t('Version'), value: device.clientVersion },
+ { label: _t('Name'), value: device.appName },
+ { label: _t('Version'), value: device.appVersion },
  { label: _t('URL'), value: device.url },
  ],
  },

src/components/views/settings/devices/DeviceTile.tsx

@@ -21,16 +21,16 @@ import { _t } from "../../../../languageHandler";
 import { formatDate, formatRelativeTime } from "../../../../DateUtils";
 import Heading from "../../typography/Heading";
 import { INACTIVE_DEVICE_AGE_DAYS, isDeviceInactive } from "./filter";
-import { DeviceWithVerification } from "./types";
-import { DeviceType } from "./DeviceType";
+import { ExtendedDevice } from "./types";
+import { DeviceTypeIcon } from "./DeviceTypeIcon";
 export interface DeviceTileProps {
- device: DeviceWithVerification;
+ device: ExtendedDevice;
  isSelected?: boolean;
  children?: React.ReactNode;
  onClick?: () => void;
 }
 
-const DeviceTileName: React.FC<{ device: DeviceWithVerification }> = ({ device }) => {
+const DeviceTileName: React.FC<{ device: ExtendedDevice }> = ({ device }) => {
  return <Heading size='h4'>
  { device.display_name || device.device_id }
  </Heading>;
@@ -48,7 +48,7 @@ const formatLastActivity = (timestamp: number, now = new Date().getTime()): stri
  return formatRelativeTime(new Date(timestamp));
 };
 
-const getInactiveMetadata = (device: DeviceWithVerification): { id: string, value: React.ReactNode } | undefined => {
+const getInactiveMetadata = (device: ExtendedDevice): { id: string, value: React.ReactNode } | undefined => {
  const isInactive = isDeviceInactive(device);
 
  if (!isInactive) {
@@ -89,7 +89,11 @@ const DeviceTile: React.FC<DeviceTileProps> = ({
  ];
 
  return <div className="mx_DeviceTile" data-testid={`device-tile-${device.device_id}`}>
- <DeviceType isVerified={device.isVerified} isSelected={isSelected} />
+ <DeviceTypeIcon
+ isVerified={device.isVerified}
+ isSelected={isSelected}
+ deviceType={device.deviceType}
+ />
  <div className="mx_DeviceTile_info" onClick={onClick}>
  <DeviceTileName device={device} />
  <div className="mx_DeviceTile_metadata">

src/components/views/settings/devices/DeviceType.tsx renamed to src/components/views/settings/devices/DeviceTypeIcon.tsx

@@ -21,33 +21,39 @@ import { Icon as UnknownDeviceIcon } from '../../../../../res/img/element-icons/
 import { Icon as VerifiedIcon } from '../../../../../res/img/e2e/verified.svg';
 import { Icon as UnverifiedIcon } from '../../../../../res/img/e2e/warning.svg';
 import { _t } from '../../../../languageHandler';
-import { DeviceWithVerification } from './types';
+import { ExtendedDevice } from './types';
+import { DeviceType } from '../../../../utils/device/parseUserAgent';
 
 interface Props {
- isVerified?: DeviceWithVerification['isVerified'];
+ isVerified?: ExtendedDevice['isVerified'];
  isSelected?: boolean;
+ deviceType?: DeviceType;
 }
 
-export const DeviceType: React.FC<Props> = ({ isVerified, isSelected }) => (
- <div className={classNames('mx_DeviceType', {
- mx_DeviceType_selected: isSelected,
+export const DeviceTypeIcon: React.FC<Props> = ({
+ isVerified,
+ isSelected,
+ deviceType,
+}) => (
+ <div className={classNames('mx_DeviceTypeIcon', {
+ mx_DeviceTypeIcon_selected: isSelected,
  })}
  >
  { /* TODO(kerrya) all devices have an unknown type until PSG-650 */ }
  <UnknownDeviceIcon
- className='mx_DeviceType_deviceIcon'
+ className='mx_DeviceTypeIcon_deviceIcon'
  role='img'
  aria-label={_t('Unknown device type')}
  />
  {
  isVerified
  ? <VerifiedIcon
- className={classNames('mx_DeviceType_verificationIcon', 'verified')}
+ className={classNames('mx_DeviceTypeIcon_verificationIcon', 'verified')}
  role='img'
  aria-label={_t('Verified')}
  />
  : <UnverifiedIcon
- className={classNames('mx_DeviceType_verificationIcon', 'unverified')}
+ className={classNames('mx_DeviceTypeIcon_verificationIcon', 'unverified')}
  role='img'
  aria-label={_t('Unverified')}
  />

src/components/views/settings/devices/DeviceVerificationStatusCard.tsx

@@ -21,11 +21,11 @@ import AccessibleButton from '../../elements/AccessibleButton';
 import DeviceSecurityCard from './DeviceSecurityCard';
 import {
  DeviceSecurityVariation,
- DeviceWithVerification,
+ ExtendedDevice,
 } from './types';
 
 interface Props {
- device: DeviceWithVerification;
+ device: ExtendedDevice;
  onVerifyDevice?: () => void;
 }