Apply prettier formatting
This commit is contained in:
Michael Weimann
parent
1cac306093
commit
526645c791
1576 changed files with 65385 additions and 62478 deletions
|
|
@ -14,19 +14,19 @@ See the License for the specific language governing permissions and
|
|||
limitations under the License.
|
||||
*/
|
||||
|
||||
import React from 'react';
|
||||
import { IPusher } from 'matrix-js-sdk/src/@types/PushRules';
|
||||
import { PUSHER_ENABLED } from 'matrix-js-sdk/src/@types/event';
|
||||
import { LocalNotificationSettings } from 'matrix-js-sdk/src/@types/local_notifications';
|
||||
import React from "react";
|
||||
import { IPusher } from "matrix-js-sdk/src/@types/PushRules";
|
||||
import { PUSHER_ENABLED } from "matrix-js-sdk/src/@types/event";
|
||||
import { LocalNotificationSettings } from "matrix-js-sdk/src/@types/local_notifications";
|
||||
|
||||
import { formatDate } from '../../../../DateUtils';
|
||||
import { _t } from '../../../../languageHandler';
|
||||
import AccessibleButton from '../../elements/AccessibleButton';
|
||||
import Spinner from '../../elements/Spinner';
|
||||
import ToggleSwitch from '../../elements/ToggleSwitch';
|
||||
import { DeviceDetailHeading } from './DeviceDetailHeading';
|
||||
import { DeviceVerificationStatusCard } from './DeviceVerificationStatusCard';
|
||||
import { ExtendedDevice } from './types';
|
||||
import { formatDate } from "../../../../DateUtils";
|
||||
import { _t } from "../../../../languageHandler";
|
||||
import AccessibleButton from "../../elements/AccessibleButton";
|
||||
import Spinner from "../../elements/Spinner";
|
||||
import ToggleSwitch from "../../elements/ToggleSwitch";
|
||||
import { DeviceDetailHeading } from "./DeviceDetailHeading";
|
||||
import { DeviceVerificationStatusCard } from "./DeviceVerificationStatusCard";
|
||||
import { ExtendedDevice } from "./types";
|
||||
|
||||
interface Props {
|
||||
device: ExtendedDevice;
|
||||
|
|
@ -43,7 +43,7 @@ interface Props {
|
|||
interface MetadataTable {
|
||||
id: string;
|
||||
heading?: string;
|
||||
values: { label: string, value?: string | React.ReactNode }[];
|
||||
values: { label: string; value?: string | React.ReactNode }[];
|
||||
}
|
||||
|
||||
const DeviceDetails: React.FC<Props> = ({
|
||||
|
|
@ -59,40 +59,43 @@ const DeviceDetails: React.FC<Props> = ({
|
|||
}) => {
|
||||
const metadata: MetadataTable[] = [
|
||||
{
|
||||
id: 'session',
|
||||
id: "session",
|
||||
values: [
|
||||
{ label: _t('Session ID'), value: device.device_id },
|
||||
{ label: _t("Session ID"), value: device.device_id },
|
||||
{
|
||||
label: _t('Last activity'),
|
||||
label: _t("Last activity"),
|
||||
value: device.last_seen_ts && formatDate(new Date(device.last_seen_ts)),
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 'application',
|
||||
heading: _t('Application'),
|
||||
id: "application",
|
||||
heading: _t("Application"),
|
||||
values: [
|
||||
{ label: _t('Name'), value: device.appName },
|
||||
{ label: _t('Version'), value: device.appVersion },
|
||||
{ label: _t('URL'), value: device.url },
|
||||
{ label: _t("Name"), value: device.appName },
|
||||
{ label: _t("Version"), value: device.appVersion },
|
||||
{ label: _t("URL"), value: device.url },
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 'device',
|
||||
heading: _t('Device'),
|
||||
id: "device",
|
||||
heading: _t("Device"),
|
||||
values: [
|
||||
{ label: _t('Model'), value: device.deviceModel },
|
||||
{ label: _t('Operating system'), value: device.deviceOperatingSystem },
|
||||
{ label: _t('Browser'), value: device.client },
|
||||
{ label: _t('IP address'), value: device.last_seen_ip },
|
||||
{ label: _t("Model"), value: device.deviceModel },
|
||||
{ label: _t("Operating system"), value: device.deviceOperatingSystem },
|
||||
{ label: _t("Browser"), value: device.client },
|
||||
{ label: _t("IP address"), value: device.last_seen_ip },
|
||||
],
|
||||
},
|
||||
].map(section =>
|
||||
// filter out falsy values
|
||||
({ ...section, values: section.values.filter(row => !!row.value) }))
|
||||
.filter(section =>
|
||||
// then filter out sections with no values
|
||||
section.values.length,
|
||||
]
|
||||
.map((section) =>
|
||||
// filter out falsy values
|
||||
({ ...section, values: section.values.filter((row) => !!row.value) }),
|
||||
)
|
||||
.filter(
|
||||
(section) =>
|
||||
// then filter out sections with no values
|
||||
section.values.length,
|
||||
);
|
||||
|
||||
const showPushNotificationSection = !!pusher || !!localNotificationSettings;
|
||||
|
|
@ -109,75 +112,75 @@ const DeviceDetails: React.FC<Props> = ({
|
|||
return false;
|
||||
}
|
||||
|
||||
return <div className='mx_DeviceDetails' data-testid={`device-detail-${device.device_id}`}>
|
||||
<section className='mx_DeviceDetails_section'>
|
||||
<DeviceDetailHeading
|
||||
device={device}
|
||||
saveDeviceName={saveDeviceName}
|
||||
/>
|
||||
<DeviceVerificationStatusCard
|
||||
device={device}
|
||||
onVerifyDevice={onVerifyDevice}
|
||||
/>
|
||||
</section>
|
||||
<section className='mx_DeviceDetails_section'>
|
||||
<p className='mx_DeviceDetails_sectionHeading'>{ _t('Session details') }</p>
|
||||
{ metadata.map(({ heading, values, id }, index) => <table
|
||||
className='mx_DeviceDetails_metadataTable'
|
||||
key={index}
|
||||
data-testid={`device-detail-metadata-${id}`}
|
||||
>
|
||||
{ heading &&
|
||||
<thead>
|
||||
<tr><th>{ heading }</th></tr>
|
||||
</thead>
|
||||
}
|
||||
<tbody>
|
||||
|
||||
{ values.map(({ label, value }) => <tr key={label}>
|
||||
<td className='mxDeviceDetails_metadataLabel'>{ label }</td>
|
||||
<td className='mxDeviceDetails_metadataValue'>{ value }</td>
|
||||
</tr>) }
|
||||
</tbody>
|
||||
</table>,
|
||||
) }
|
||||
</section>
|
||||
{ showPushNotificationSection && (
|
||||
<section
|
||||
className='mx_DeviceDetails_section mx_DeviceDetails_pushNotifications'
|
||||
data-testid='device-detail-push-notification'
|
||||
>
|
||||
<ToggleSwitch
|
||||
// For backwards compatibility, if `enabled` is missing
|
||||
// default to `true`
|
||||
checked={isPushNotificationsEnabled(pusher, localNotificationSettings)}
|
||||
disabled={isCheckboxDisabled(pusher, localNotificationSettings)}
|
||||
onChange={checked => setPushNotifications?.(device.device_id, checked)}
|
||||
title={_t("Toggle push notifications on this session.")}
|
||||
data-testid='device-detail-push-notification-checkbox'
|
||||
/>
|
||||
<p className='mx_DeviceDetails_sectionHeading'>
|
||||
{ _t('Push notifications') }
|
||||
<small className='mx_DeviceDetails_sectionSubheading'>
|
||||
{ _t('Receive push notifications on this session.') }
|
||||
</small>
|
||||
</p>
|
||||
return (
|
||||
<div className="mx_DeviceDetails" data-testid={`device-detail-${device.device_id}`}>
|
||||
<section className="mx_DeviceDetails_section">
|
||||
<DeviceDetailHeading device={device} saveDeviceName={saveDeviceName} />
|
||||
<DeviceVerificationStatusCard device={device} onVerifyDevice={onVerifyDevice} />
|
||||
</section>
|
||||
) }
|
||||
<section className='mx_DeviceDetails_section'>
|
||||
<AccessibleButton
|
||||
onClick={onSignOutDevice}
|
||||
kind='danger_inline'
|
||||
disabled={isSigningOut}
|
||||
data-testid='device-detail-sign-out-cta'
|
||||
>
|
||||
<span className='mx_DeviceDetails_signOutButtonContent'>
|
||||
{ _t('Sign out of this session') }
|
||||
{ isSigningOut && <Spinner w={16} h={16} /> }
|
||||
</span>
|
||||
</AccessibleButton>
|
||||
</section>
|
||||
</div>;
|
||||
<section className="mx_DeviceDetails_section">
|
||||
<p className="mx_DeviceDetails_sectionHeading">{_t("Session details")}</p>
|
||||
{metadata.map(({ heading, values, id }, index) => (
|
||||
<table
|
||||
className="mx_DeviceDetails_metadataTable"
|
||||
key={index}
|
||||
data-testid={`device-detail-metadata-${id}`}
|
||||
>
|
||||
{heading && (
|
||||
<thead>
|
||||
<tr>
|
||||
<th>{heading}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
)}
|
||||
<tbody>
|
||||
{values.map(({ label, value }) => (
|
||||
<tr key={label}>
|
||||
<td className="mxDeviceDetails_metadataLabel">{label}</td>
|
||||
<td className="mxDeviceDetails_metadataValue">{value}</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
))}
|
||||
</section>
|
||||
{showPushNotificationSection && (
|
||||
<section
|
||||
className="mx_DeviceDetails_section mx_DeviceDetails_pushNotifications"
|
||||
data-testid="device-detail-push-notification"
|
||||
>
|
||||
<ToggleSwitch
|
||||
// For backwards compatibility, if `enabled` is missing
|
||||
// default to `true`
|
||||
checked={isPushNotificationsEnabled(pusher, localNotificationSettings)}
|
||||
disabled={isCheckboxDisabled(pusher, localNotificationSettings)}
|
||||
onChange={(checked) => setPushNotifications?.(device.device_id, checked)}
|
||||
title={_t("Toggle push notifications on this session.")}
|
||||
data-testid="device-detail-push-notification-checkbox"
|
||||
/>
|
||||
<p className="mx_DeviceDetails_sectionHeading">
|
||||
{_t("Push notifications")}
|
||||
<small className="mx_DeviceDetails_sectionSubheading">
|
||||
{_t("Receive push notifications on this session.")}
|
||||
</small>
|
||||
</p>
|
||||
</section>
|
||||
)}
|
||||
<section className="mx_DeviceDetails_section">
|
||||
<AccessibleButton
|
||||
onClick={onSignOutDevice}
|
||||
kind="danger_inline"
|
||||
disabled={isSigningOut}
|
||||
data-testid="device-detail-sign-out-cta"
|
||||
>
|
||||
<span className="mx_DeviceDetails_signOutButtonContent">
|
||||
{_t("Sign out of this session")}
|
||||
{isSigningOut && <Spinner w={16} h={16} />}
|
||||
</span>
|
||||
</AccessibleButton>
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default DeviceDetails;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue