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

78.52

/frontend/src/components/dashboard/aliases/AliasList.tsx

import { useState, useEffect } from "react";
import styles from "./AliasList.module.scss";
import { AliasData, isRandomAlias } from "../../../hooks/api/aliases";
import { ProfileData } from "../../../hooks/api/profile";
import { Alias } from "./Alias";
import { filterAliases } from "../../../functions/filterAliases";
import { CategoryFilter, SelectedFilters } from "./CategoryFilter";
import { UserData } from "../../../hooks/api/user";
import { RuntimeData } from "../../../hooks/api/types";
import { useLocalLabels } from "../../../hooks/localLabels";
import { AliasGenerationButton } from "./AliasGenerationButton";
import { SearchIcon } from "../../Icons";
import { useFlaggedAnchorLinks } from "../../../hooks/flaggedAnchorLinks";
import { useL10n } from "../../../hooks/l10n";
import { Localized } from "../../Localized";
import { VisuallyHidden } from "../../VisuallyHidden";
import { MaskCard } from "./MaskCard";
import { isFlagActive } from "../../../functions/waffle";

export type Props = {
  aliases: AliasData[];
  profile: ProfileData;
  user: UserData;
  runtimeData?: RuntimeData;
  onCreate: (
    options:
      | { mask_type: "random" }
      | { mask_type: "custom"; address: string; blockPromotionals: boolean },
  ) => void;
  onUpdate: (alias: AliasData, updatedFields: Partial<AliasData>) => void;
  onDelete: (alias: AliasData) => void;
  onboarding?: boolean;
  children?: React.ReactNode;
  setModalOpenedState?: (state: boolean) => void;
};

/**
 * Display a list of <Alias> cards, with the ability to filter them or create a new alias.
 */
export const AliasList = (props: Props) => {
  const l10n = useL10n();
  const [stringFilterInput, setStringFilterInput] = useState("");
  const [stringFilterVisible, setStringFilterVisible] = useState(false);
  const [resetCheckBoxes, setCheckboxes] = useState(false);
  const [categoryFilters, setCategoryFilters] = useState<SelectedFilters>({});
  const [localLabels, storeLocalLabel] = useLocalLabels();
  const [generatedAlias, setGeneratedAlias] = useState<AliasData | undefined>(
    undefined,
  );
  const { onboarding = false } = props;
  // When <AliasList> gets added to the page, if there's an anchor link in the
  // URL pointing to a mask, scroll to that mask:
  useFlaggedAnchorLinks(
    [],
    props.aliases.map((alias) => encodeURIComponent(alias.full_address)),
  );
  const [openAlias, setOpenAlias] = useState<AliasData | undefined>(
    // If the mask was focused on by an anchor link, expand that one on page load:
    props.aliases.find(
      (alias) =>
        alias.full_address ===
        decodeURIComponent(document.location.hash.substring(1)),
    ),
  );
  const [existingAliases, setExistingAliases] = useState<AliasData[]>(
    props.aliases,
  );

  useEffect(() => {
    if (props.aliases.length === 0) {
      setOpenAlias(undefined);
    } else {
      const existingAliasIds = existingAliases.map((alias) => alias.id);
      const newAliases = props.aliases.filter(
        (alias) => existingAliasIds.indexOf(alias.id) === -1,
      );
      if (newAliases.length !== 0) {
        setOpenAlias(newAliases[0]);
      }
    }
    setExistingAliases(props.aliases);
  }, [props.aliases, existingAliases]);

  if (props.aliases.length === 0) {
    return null;
  }

  const aliasesWithLocalLabels = props.aliases.map((alias) => {
    const aliasWithLocalLabel = { ...alias };
    if (
      alias.description.length === 0 &&
      props.profile.server_storage === false &&
      localLabels !== null
    ) {
      const localLabel = localLabels.find(
        (localLabel) =>
          localLabel.id === alias.id &&
          localLabel.mask_type === alias.mask_type,
      );
      if (localLabel !== undefined) {
        aliasWithLocalLabel.description = localLabel.description;
      }
    }
    return aliasWithLocalLabel;
  });

  const aliases = sortAliases(
    filterAliases(aliasesWithLocalLabels, {
      ...categoryFilters,
      string: stringFilterInput,
    }),
  );

  const findAliasDataFromPrefix = (
    aliasPrefix: string,
  ): AliasData | undefined => {
    return aliases.find((alias) => aliasPrefix === alias.address);
  };

  const aliasCards = aliases.map((alias) => {
    const onUpdate = (updatedFields: Partial<AliasData>) => {
      if (
        localLabels !== null &&
        typeof updatedFields.description === "string" &&
        props.profile.server_storage === false
      ) {
        storeLocalLabel(alias, updatedFields.description);
        delete updatedFields.description;
      }
      return props.onUpdate(alias, updatedFields);
    };

    const onChangeOpen = (isOpen: boolean) => {
      if (isOpen === true) {
        setOpenAlias(alias);
      } else if (openAlias !== undefined && openAlias.id === alias.id) {
        setOpenAlias(undefined);
      }
    };

    return (
      <li
        className={styles["alias-card-wrapper"]}
        key={alias.address + isRandomAlias(alias)}
        id={encodeURIComponent(alias.full_address)}
      >
        {isFlagActive(props.runtimeData, "mask_redesign") ? (
          <MaskCard
            mask={alias}
            user={props.user}
            profile={props.profile}
            onUpdate={onUpdate}
            onDelete={() => props.onDelete(alias)}
            isOpen={
              openAlias !== undefined &&
              openAlias.id === alias.id &&
              openAlias.mask_type === alias.mask_type
            }
            onChangeOpen={onChangeOpen}
            showLabelEditor={
              props.profile.server_storage || localLabels !== null
            }
            runtimeData={props.runtimeData}
            isOnboarding={onboarding}
            copyAfterMaskGeneration={generatedAlias?.id === alias.id}
            setModalOpenedState={props.setModalOpenedState}
          >
            {props.children}
          </MaskCard>
        ) : (
          <Alias
            alias={alias}
            user={props.user}
            profile={props.profile}
            onUpdate={onUpdate}
            onDelete={() => props.onDelete(alias)}
            isOpen={
              openAlias !== undefined &&
              openAlias.id === alias.id &&
              openAlias.mask_type === alias.mask_type
            }
            onChangeOpen={onChangeOpen}
            showLabelEditor={
              props.profile.server_storage || localLabels !== null
            }
            runtimeData={props.runtimeData}
          />
        )}
      </li>
    );
  });

  // With at most five aliases, filters aren't really useful
  // for non-Premium users.
  const categoryFilter = props.profile.has_premium ? (
    <div className={styles["category-filter"]}>
      <CategoryFilter
        onChange={setCategoryFilters}
        selectedFilters={categoryFilters}
        resetChecks={resetCheckBoxes}
        setCheckboxes={setCheckboxes}
      />
    </div>
  ) : null;

  const emptyStateMessage =
    props.aliases.length > 0 && aliases.length === 0 ? (
      <Localized
        id="profile-filter-no-results"
        elems={{
          "clear-button": (
            <button
              onClick={() => {
                setCategoryFilters({});
                setCheckboxes(true);
                setStringFilterInput("");
              }}
              className={styles["clear-filters-button"]}
            />
          ),
        }}
      >
        <p className={styles["empty-state-message"]} />
      </Localized>
    ) : null;

  const handleOnChange = (value: string) => {
    // removes Unicode characters found within the range of 0080 to FFFF
    setStringFilterInput(value.replace(/[\u{0080}-\u{FFFF}]/gu, ""));
  };

  return (
    <section className={styles["alias-list-container"]}>
      {isFlagActive(props.runtimeData, "free_user_onboarding") &&
      onboarding ? null : (
        <div className={styles.controls}>
          <div
            className={`${styles["string-filter"]} ${
              stringFilterVisible ? styles["is-visible"] : ""
            }`}
          >
            <VisuallyHidden>
              <label htmlFor="stringFilter">
                {l10n.getString("profile-filter-search-placeholder-2")}
              </label>
            </VisuallyHidden>
            <input
              value={stringFilterInput}
              onChange={(e) => handleOnChange(e.target.value)}
              type="search"
              name="stringFilter"
              id="stringFilter"
              placeholder={l10n.getString(
                "profile-filter-search-placeholder-2",
              )}
            />
            <span className={styles["match-count"]}>
              {aliases.length}/{props.aliases.length}
            </span>
          </div>
          <button
            onClick={() => setStringFilterVisible(!stringFilterVisible)}
            title={l10n.getString("profile-filter-search-placeholder-2")}
            className={`${styles["string-filter-toggle"]} ${
              stringFilterVisible ? styles["active"] : ""
            }`}
          >
            <SearchIcon
              alt={l10n.getString("profile-filter-search-placeholder-2")}
              width={20}
              height={20}
            />
          </button>
          {categoryFilter}
          <div className={styles["new-alias-button"]}>
            <AliasGenerationButton
              aliases={props.aliases}
              profile={props.profile}
              runtimeData={props.runtimeData}
              onCreate={props.onCreate}
              onUpdate={props.onUpdate}
              findAliasDataFromPrefix={findAliasDataFromPrefix}
              setGeneratedAlias={setGeneratedAlias}
            />
          </div>
        </div>
      )}
      <ul>
        {isFlagActive(props.runtimeData, "free_user_onboarding") && onboarding
          ? aliasCards[0]
          : aliasCards}
      </ul>
      {emptyStateMessage}
    </section>
  );
};

function sortAliases(aliases: AliasData[]): AliasData[] {
  const aliasDataCopy = aliases.slice();
  aliasDataCopy.sort((aliasA, aliasB) => {
    // `Date.parse` can be inconsistent,
    // but should be fairly reliable in parsing ISO 8601 strings
    // (though if Temporal ever gets accepted by TC39, we should switch to that):
    const aliasATimestamp = Date.parse(aliasA.created_at);
    const aliasBTimestamp = Date.parse(aliasB.created_at);
    return aliasBTimestamp - aliasATimestamp;
  });
  return aliasDataCopy;
}

1	import { useState, useEffect } from "react";	3✔
2	import styles from "./AliasList.module.scss";	3✔
3	import { AliasData, isRandomAlias } from "../../../hooks/api/aliases";	3✔
4	import { ProfileData } from "../../../hooks/api/profile";
5	import { Alias } from "./Alias";	3✔
6	import { filterAliases } from "../../../functions/filterAliases";	3✔
7	import { CategoryFilter, SelectedFilters } from "./CategoryFilter";	3✔
8	import { UserData } from "../../../hooks/api/user";
9	import { RuntimeData } from "../../../hooks/api/types";
10	import { useLocalLabels } from "../../../hooks/localLabels";	3✔
11	import { AliasGenerationButton } from "./AliasGenerationButton";	3✔
12	import { SearchIcon } from "../../Icons";	3✔
13	import { useFlaggedAnchorLinks } from "../../../hooks/flaggedAnchorLinks";	3✔
14	import { useL10n } from "../../../hooks/l10n";	3✔
15	import { Localized } from "../../Localized";	3✔
16	import { VisuallyHidden } from "../../VisuallyHidden";	3✔
17	import { MaskCard } from "./MaskCard";	3✔
18	import { isFlagActive } from "../../../functions/waffle";	3✔
19
20	export type Props = {
21	aliases: AliasData[];
22	profile: ProfileData;
23	user: UserData;
24	runtimeData?: RuntimeData;
25	onCreate: (
26	options:
27	\| { mask_type: "random" }
28	\| { mask_type: "custom"; address: string; blockPromotionals: boolean },
29	) => void;
30	onUpdate: (alias: AliasData, updatedFields: Partial<AliasData>) => void;
31	onDelete: (alias: AliasData) => void;
32	onboarding?: boolean;
33	children?: React.ReactNode;
34	setModalOpenedState?: (state: boolean) => void;
35	};
36
37	/**
38	* Display a list of <Alias> cards, with the ability to filter them or create a new alias.
39	*/
40	export const AliasList = (props: Props) => {	53✔
41	const l10n = useL10n();	165✔
42	const [stringFilterInput, setStringFilterInput] = useState("");	165✔
43	const [stringFilterVisible, setStringFilterVisible] = useState(false);	165✔
44	const [resetCheckBoxes, setCheckboxes] = useState(false);	165✔
45	const [categoryFilters, setCategoryFilters] = useState<SelectedFilters>({});	165✔
46	const [localLabels, storeLocalLabel] = useLocalLabels();	165✔
47	const [generatedAlias, setGeneratedAlias] = useState<AliasData \| undefined>(	165✔
48	undefined,
49	);
50	const { onboarding = false } = props;	165✔
51	// When <AliasList> gets added to the page, if there's an anchor link in the
52	// URL pointing to a mask, scroll to that mask:
53	useFlaggedAnchorLinks(	165✔
54	[],
55	props.aliases.map((alias) => encodeURIComponent(alias.full_address)),	207✔
56	);
57	const [openAlias, setOpenAlias] = useState<AliasData \| undefined>(	165✔
58	// If the mask was focused on by an anchor link, expand that one on page load:
59	props.aliases.find(
60	(alias) =>
61	alias.full_address ===	207✔
62	decodeURIComponent(document.location.hash.substring(1)),
63	),
64	);
65	const [existingAliases, setExistingAliases] = useState<AliasData[]>(	165✔
66	props.aliases,
67	);
68
69	useEffect(() => {	165✔
70	if (props.aliases.length === 0) {	52✔
71	setOpenAlias(undefined);	1✔
72	} else {
73	const existingAliasIds = existingAliases.map((alias) => alias.id);	84✔
74	const newAliases = props.aliases.filter(	51✔
75	(alias) => existingAliasIds.indexOf(alias.id) === -1,	84✔
76	);
77	if (newAliases.length !== 0) {	51!
78	setOpenAlias(newAliases[0]);	×
79	}
80	}
81	setExistingAliases(props.aliases);	52✔
82	}, [props.aliases, existingAliases]);
83
84	if (props.aliases.length === 0) {	165✔
85	return null;	1✔
86	}
87
88	const aliasesWithLocalLabels = props.aliases.map((alias) => {	164✔
89	const aliasWithLocalLabel = { ...alias };	207✔
90	if (	207✔
91	alias.description.length === 0 &&	411✔
92	props.profile.server_storage === false &&
93	localLabels !== null
94	) {
95	const localLabel = localLabels.find(	52✔
96	(localLabel) =>
97	localLabel.id === alias.id &&	51✔
98	localLabel.mask_type === alias.mask_type,
99	);
100	if (localLabel !== undefined) {	52✔
101	aliasWithLocalLabel.description = localLabel.description;	51✔
102	}
103	}
104	return aliasWithLocalLabel;	207✔
105	});
106
107	const aliases = sortAliases(	164✔
108	filterAliases(aliasesWithLocalLabels, {
109	...categoryFilters,
110	string: stringFilterInput,
111	}),
112	);
113
114	const findAliasDataFromPrefix = (	164✔
115	aliasPrefix: string,
116	): AliasData \| undefined => {
117	return aliases.find((alias) => aliasPrefix === alias.address);	×
118	};
119
120	const aliasCards = aliases.map((alias) => {	164✔
121	const onUpdate = (updatedFields: Partial<AliasData>) => {	149✔
122	if (	4✔
123	localLabels !== null &&	8✔
124	typeof updatedFields.description === "string" &&
125	props.profile.server_storage === false
126	) {
127	storeLocalLabel(alias, updatedFields.description);	1✔
128	delete updatedFields.description;	1✔
129	}
130	return props.onUpdate(alias, updatedFields);	4✔
131	};
132
133	const onChangeOpen = (isOpen: boolean) => {	149✔
134	if (isOpen === true) {	×
135	setOpenAlias(alias);	×
136	} else if (openAlias !== undefined && openAlias.id === alias.id) {	×
137	setOpenAlias(undefined);	×
138	}
139	};
140
141	return (	149✔
142	<li
143	className={styles["alias-card-wrapper"]}
144	key={alias.address + isRandomAlias(alias)}
145	id={encodeURIComponent(alias.full_address)}
146	>
147	{isFlagActive(props.runtimeData, "mask_redesign") ? (
148	<MaskCard	2✔
149	mask={alias}
150	user={props.user}
151	profile={props.profile}
152	onUpdate={onUpdate}
153	onDelete={() => props.onDelete(alias)}	×
154	isOpen={
155	openAlias !== undefined &&	2!
156	openAlias.id === alias.id &&
157	openAlias.mask_type === alias.mask_type
158	}
159	onChangeOpen={onChangeOpen}
160	showLabelEditor={
161	props.profile.server_storage \|\| localLabels !== null	2!
162	}
163	runtimeData={props.runtimeData}
164	isOnboarding={onboarding}
165	copyAfterMaskGeneration={generatedAlias?.id === alias.id}
166	setModalOpenedState={props.setModalOpenedState}
167	>
168	{props.children}
169	</MaskCard>
170	) : (
171	<Alias
172	alias={alias}
173	user={props.user}
174	profile={props.profile}
175	onUpdate={onUpdate}
176	onDelete={() => props.onDelete(alias)}	1✔
177	isOpen={
178	openAlias !== undefined &&	147!
179	openAlias.id === alias.id &&
180	openAlias.mask_type === alias.mask_type
181	}
182	onChangeOpen={onChangeOpen}
183	showLabelEditor={
184	props.profile.server_storage \|\| localLabels !== null	180✔
185	}
186	runtimeData={props.runtimeData}
187	/>
188	)}
189	</li>
190	);
191	});
192
193	// With at most five aliases, filters aren't really useful
194	// for non-Premium users.
195	const categoryFilter = props.profile.has_premium ? (	164✔
196	<div className={styles["category-filter"]}>
197	<CategoryFilter
198	onChange={setCategoryFilters}
199	selectedFilters={categoryFilters}
200	resetChecks={resetCheckBoxes}
201	setCheckboxes={setCheckboxes}
202	/>
203	</div>
204	) : null;
205
206	const emptyStateMessage =
207	props.aliases.length > 0 && aliases.length === 0 ? (	164✔
208	<Localized
209	id="profile-filter-no-results"
210	elems={{
211	"clear-button": (
212	<button
213	onClick={() => {
214	setCategoryFilters({});	×
215	setCheckboxes(true);	×
216	setStringFilterInput("");	×
217	}}
218	className={styles["clear-filters-button"]}
219	/>
220	),
221	}}
222	>
223	<p className={styles["empty-state-message"]} />
224	</Localized>
225	) : null;
226
227	const handleOnChange = (value: string) => {	164✔
228	// removes Unicode characters found within the range of 0080 to FFFF
229	setStringFilterInput(value.replace(/[\u{0080}-\u{FFFF}]/gu, ""));	104✔
230	};
231
232	return (
233	<section className={styles["alias-list-container"]}>
234	{isFlagActive(props.runtimeData, "free_user_onboarding") &&	164!
235	onboarding ? null : (	×
236	<div className={styles.controls}>
237	<div
238	className={`${styles["string-filter"]} ${
239	stringFilterVisible ? styles["is-visible"] : ""	164!
240	}`}
241	>
242	<VisuallyHidden>
243	<label htmlFor="stringFilter">
244	{l10n.getString("profile-filter-search-placeholder-2")}
245	</label>
246	</VisuallyHidden>
247	<input
248	value={stringFilterInput}
249	onChange={(e) => handleOnChange(e.target.value)}	104✔
250	type="search"
251	name="stringFilter"
252	id="stringFilter"
253	placeholder={l10n.getString(
254	"profile-filter-search-placeholder-2",
255	)}
256	/>
257	<span className={styles["match-count"]}>
258	{aliases.length}/{props.aliases.length}
259	</span>
260	</div>
261	<button
262	onClick={() => setStringFilterVisible(!stringFilterVisible)}	×
263	title={l10n.getString("profile-filter-search-placeholder-2")}
264	className={`${styles["string-filter-toggle"]} ${
265	stringFilterVisible ? styles["active"] : ""	164!
266	}`}
267	>
268	<SearchIcon
269	alt={l10n.getString("profile-filter-search-placeholder-2")}
270	width={20}
271	height={20}
272	/>
273	</button>
274	{categoryFilter}
275	<div className={styles["new-alias-button"]}>
276	<AliasGenerationButton
277	aliases={props.aliases}
278	profile={props.profile}
279	runtimeData={props.runtimeData}
280	onCreate={props.onCreate}
281	onUpdate={props.onUpdate}
282	findAliasDataFromPrefix={findAliasDataFromPrefix}
283	setGeneratedAlias={setGeneratedAlias}
284	/>
285	</div>
286	</div>
287	)}
288	<ul>
289	{isFlagActive(props.runtimeData, "free_user_onboarding") && onboarding	328!
290	? aliasCards[0]
291	: aliasCards}
292	</ul>
293	{emptyStateMessage}
294	</section>
295	);
296	};
297
298	function sortAliases(aliases: AliasData[]): AliasData[] {
299	const aliasDataCopy = aliases.slice();	164✔
300	aliasDataCopy.sort((aliasA, aliasB) => {	164✔
301	// `Date.parse` can be inconsistent,
302	// but should be fairly reliable in parsing ISO 8601 strings
303	// (though if Temporal ever gets accepted by TC39, we should switch to that):
304	const aliasATimestamp = Date.parse(aliasA.created_at);	39✔
305	const aliasBTimestamp = Date.parse(aliasB.created_at);	39✔
306	return aliasBTimestamp - aliasATimestamp;	39✔
307	});
308	return aliasDataCopy;	164✔
309	}

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