d4d9f278-d845-4992-8c81-4f3757c427a1

Committed 08 Sep 2025 02:07PM UTC coverage: 86.303% (-1.8%) from 88.121%

Build # d4d9f278-d845-4992-8c81-4f3757c427a1

Build Type

Pull #5842

circleci

Committed by

joeherm

Commit Message

fix(deploy): Update CircleCI to use common Dockerfile for building frontend

Pull Request Pull Request #5842: fix(deploy): Unify Dockerfiles

Run Details

2744 of 3951 branches covered (69.45%)

Branch coverage included in aggregate %.

17910 of 19981 relevant lines covered (89.64%)

9.96 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

20.83

/frontend/src/components/dashboard/tips/GenericTip.tsx

import { StaticImageData } from "next/image";
import { ReactNode } from "react";
import Image from "../../Image";
import { getLocale } from "../../../functions/getLocale";
import { useL10n } from "../../../hooks/l10n";
import styles from "./GenericTip.module.scss";

export type GenericTipProps = {
  title: string;
  content: ReactNode;
  videos?: Record<string, string>;
  image?: StaticImageData;
  alt?: string;
};
// This component will probably be used for future tips that are yet to be added:
// eslint-disable-next-line @typescript-eslint/no-unused-vars
export const GenericTip = (props: GenericTipProps) => {
  const l10n = useL10n();

  const sources = Object.entries(props.videos ?? {}).map(([type, source]) => (
    <source key={source} type={type} src={source} />
  ));
  const video =
    props.videos && getLocale(l10n).split("-")[0] === "en" ? (
      <>
        <video
          // The video usually uses animation to present the same information as
          // the text below in an easier-to-understand way. Thus, there is no text
          // alternative that wouldn't be redundant with the text below:
          aria-hidden={true}
          poster={
            typeof props.image === "object" ? props.image.src : props.image
          }
          autoPlay={true}
          loop={true}
          muted={true}
          playsInline={true}
          title={props.alt}
        >
          {sources}
          {/* Fall back to the image if the video formats are not supported: */}
          {typeof props.image === "string" ? (
            <Image src={props.image} alt={props.alt ?? ""} />
          ) : null}
        </video>
        {/* This image will only be shown if the user has prefers-reduced-motion on */}
        {props.image && (
          <Image
            className={styles["still-alternative"]}
            src={props.image}
            alt={props.alt ?? ""}
          />
        )}
      </>
    ) : null;

  return (
    <div className={styles["generic-tip"]}>
      <h3>{props.title}</h3>
      {props.content}
      {/*
        Video listed last because that makes more sense for screen readers;
        it's usually an example of the text above.
        */}
      {video}
    </div>
  );
};

1	import { StaticImageData } from "next/image";
2	import { ReactNode } from "react";
3	import Image from "../../Image";	2✔
4	import { getLocale } from "../../../functions/getLocale";	2✔
5	import { useL10n } from "../../../hooks/l10n";	2✔
6	import styles from "./GenericTip.module.scss";	2✔
7
8	export type GenericTipProps = {
9	title: string;
10	content: ReactNode;
11	videos?: Record<string, string>;
12	image?: StaticImageData;
13	alt?: string;
14	};
15	// This component will probably be used for future tips that are yet to be added:
16	// eslint-disable-next-line @typescript-eslint/no-unused-vars
17	export const GenericTip = (props: GenericTipProps) => {	47✔
18	const l10n = useL10n();	×
19
20	const sources = Object.entries(props.videos ?? {}).map(([type, source]) => (	×
21	<source key={source} type={type} src={source} />	×
22	));
23	const video =
24	props.videos && getLocale(l10n).split("-")[0] === "en" ? (	×
25	<>
26	<video
27	// The video usually uses animation to present the same information as
28	// the text below in an easier-to-understand way. Thus, there is no text
29	// alternative that wouldn't be redundant with the text below:
30	aria-hidden={true}
31	poster={
32	typeof props.image === "object" ? props.image.src : props.image	×
33	}
34	autoPlay={true}
35	loop={true}
36	muted={true}
37	playsInline={true}
38	title={props.alt}
39	>
40	{sources}
41	{/* Fall back to the image if the video formats are not supported: */}
42	{typeof props.image === "string" ? (	×
43	<Image src={props.image} alt={props.alt ?? ""} />	×
44	) : null}
45	</video>
46	{/* This image will only be shown if the user has prefers-reduced-motion on */}
47	{props.image && (	×
48	<Image
49	className={styles["still-alternative"]}
50	src={props.image}
51	alt={props.alt ?? ""}	×
52	/>
53	)}
54	</>
55	) : null;
56
57	return (
58	<div className={styles["generic-tip"]}>
59	<h3>{props.title}</h3>
60	{props.content}
61	{/*
62	Video listed last because that makes more sense for screen readers;
63	it's usually an example of the text above.
64	*/}
65	{video}
66	</div>
67	);
68	};

mozilla / fx-private-relay / d4d9f278-d845-4992-8c81-4f3757c427a1

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous