diff --git a/.changeset/many-mayflies-share.md b/.changeset/many-mayflies-share.md new file mode 100644 index 0000000000..080afc6ac1 --- /dev/null +++ b/.changeset/many-mayflies-share.md @@ -0,0 +1,5 @@ +--- +'@backstage/plugin-lighthouse': patch +--- + +Fixed "Emulated Form Factor" field in the audit creation form not working with the latest version (1.0.2) of `lighthouse-audit-service`. diff --git a/plugins/lighthouse/api-report.md b/plugins/lighthouse/api-report.md index 17c771e187..e4d945b6dd 100644 --- a/plugins/lighthouse/api-report.md +++ b/plugins/lighthouse/api-report.md @@ -71,6 +71,14 @@ export class FetchError extends Error { get name(): string; } +// @public (undocumented) +export enum FormFactor { + // (undocumented) + Desktop = 'desktop', + // (undocumented) + Mobile = 'mobile', +} + // @public (undocumented) const isLighthouseAvailable: (entity: Entity) => boolean; export { isLighthouseAvailable }; @@ -167,13 +175,24 @@ export class LighthouseRestApi implements LighthouseApi { // @public (undocumented) export const Router: () => JSX.Element; +// @public (undocumented) +export type ScreenEmulation = { + mobile: boolean; + width: number; + height: number; + deviceScaleFactor: number; + disabled: boolean; +} | null; + // @public (undocumented) export interface TriggerAuditPayload { // (undocumented) options: { lighthouseConfig: { settings: { - emulatedFormFactor: string; + formFactor: FormFactor; + screenEmulation: ScreenEmulation; + emulatedFormFactor: FormFactor; }; }; }; diff --git a/plugins/lighthouse/src/api.ts b/plugins/lighthouse/src/api.ts index e4ccefe2a1..0bad997087 100644 --- a/plugins/lighthouse/src/api.ts +++ b/plugins/lighthouse/src/api.ts @@ -85,13 +85,32 @@ export interface Website { /** @public */ export type WebsiteListResponse = LASListResponse; +/** @public */ +export enum FormFactor { + Mobile = 'mobile', + Desktop = 'desktop', +} + +/** @public */ +export type ScreenEmulation = { + mobile: boolean; + width: number; + height: number; + deviceScaleFactor: number; + disabled: boolean; +} | null; + /** @public */ export interface TriggerAuditPayload { url: string; options: { lighthouseConfig: { settings: { - emulatedFormFactor: string; + // For lighthouse 7+ + formFactor: FormFactor; + screenEmulation: ScreenEmulation; + // For lighthouse before 7 + emulatedFormFactor: FormFactor; }; }; }; diff --git a/plugins/lighthouse/src/components/CreateAudit/index.tsx b/plugins/lighthouse/src/components/CreateAudit/index.tsx index f83ad6a8a3..2ee5a675b6 100644 --- a/plugins/lighthouse/src/components/CreateAudit/index.tsx +++ b/plugins/lighthouse/src/components/CreateAudit/index.tsx @@ -25,7 +25,7 @@ import { } from '@material-ui/core'; import React, { useCallback, useState } from 'react'; import { useNavigate } from 'react-router-dom'; -import { lighthouseApiRef } from '../../api'; +import { FormFactor, lighthouseApiRef, ScreenEmulation } from '../../api'; import { useQuery } from '../../utils'; import LighthouseSupportButton from '../SupportButton'; @@ -65,6 +65,20 @@ const useStyles = makeStyles(theme => ({ }, })); +const formFactorToScreenEmulationMap: Record = { + // the default is mobile, so no need to override + mobile: null, + // Values from lighthouse's cli "desktop" preset + // https://github.com/GoogleChrome/lighthouse/blob/a6738e0033e7e5ca308b97c1c36f298b7d399402/lighthouse-core/config/constants.js#L71-L77 + desktop: { + mobile: false, + width: 1350, + height: 940, + deviceScaleFactor: 1, + disabled: false, + }, +}; + export const CreateAuditContent = () => { const errorApi = useApi(errorApiRef); const lighthouseApi = useApi(lighthouseApiRef); @@ -73,7 +87,7 @@ export const CreateAuditContent = () => { const navigate = useNavigate(); const [submitting, setSubmitting] = useState(false); const [url, setUrl] = useState(query.get('url') || ''); - const [emulatedFormFactor, setEmulatedFormFactor] = useState('mobile'); + const [formFactor, setFormFactor] = useState(FormFactor.Mobile); const triggerAudit = useCallback(async (): Promise => { setSubmitting(true); @@ -85,7 +99,9 @@ export const CreateAuditContent = () => { options: { lighthouseConfig: { settings: { - emulatedFormFactor, + formFactor, + emulatedFormFactor: formFactor, + screenEmulation: formFactorToScreenEmulationMap[formFactor], }, }, }, @@ -96,14 +112,7 @@ export const CreateAuditContent = () => { } finally { setSubmitting(false); } - }, [ - url, - emulatedFormFactor, - lighthouseApi, - setSubmitting, - errorApi, - navigate, - ]); + }, [url, formFactor, lighthouseApi, setSubmitting, errorApi, navigate]); return ( <> @@ -146,8 +155,10 @@ export const CreateAuditContent = () => { select required disabled={submitting} - onChange={ev => setEmulatedFormFactor(ev.target.value)} - value={emulatedFormFactor} + onChange={ev => + setFormFactor(ev.target.value as FormFactor) + } + value={formFactor} inputProps={{ 'aria-label': 'Emulated form factor' }} > Mobile