fix(plugin-lighthouse): fix form factor field in the audit creation form not working with the latest version of lighthouse-audit-service

Signed-off-by: Gabrielle Langer <gabrielle.langer.ext@corp.ovh.com>

.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`.

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;
       };
     };
   };

plugins/lighthouse/src/api.ts

@@ -85,13 +85,32 @@ export interface Website {
 /** @public */
 export type WebsiteListResponse = LASListResponse<Website>;
 
+/** @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;
       };
     };
   };

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<FormFactor, ScreenEmulation> = {
+  // 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<string>(query.get('url') || '');
-  const [emulatedFormFactor, setEmulatedFormFactor] = useState('mobile');
+  const [formFactor, setFormFactor] = useState<FormFactor>(FormFactor.Mobile);
 
   const triggerAudit = useCallback(async (): Promise<void> => {
     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' }}
                   >
                     <MenuItem value="mobile">Mobile</MenuItem>