00ec54cc-64a2-4ec2-8f3a-94fedd893215

Committed 20 May 2024 11:02PM UTC coverage: 84.416% (+0.03%) from 84.388%

Build # 00ec54cc-64a2-4ec2-8f3a-94fedd893215

Build Type

Pull #4718

circleci

Committed by

jwhitlock

Commit Message

Reset the database at start of each email

Pull Request Pull Request #4718: MPP-3815: Reset the database at start of each email

Run Details

3620 of 4749 branches covered (76.23%)

Branch coverage included in aggregate %.

36 of 36 new or added lines in 2 files covered. (100.0%)

9 existing lines in 1 file now uncovered.

14814 of 17088 relevant lines covered (86.69%)

10.82 hits per line

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

75.49

/frontend/src/pages/accounts/settings.page.tsx

import type { NextPage } from "next";
import {
  FormEventHandler,
  MouseEventHandler,
  useEffect,
  useReducer,
  useRef,
  useState,
} from "react";
import { toast } from "react-toastify";
import styles from "./settings.module.scss";
import { Layout } from "../../components/layout/Layout";
import { Banner } from "../../components/Banner";
import { useProfiles } from "../../hooks/api/profile";
import {
  InfoTriangleIcon,
  HideIcon,
  NewTabIcon,
  PerformanceIcon,
  CopyIcon,
  SupportIcon,
  ContactIcon,
} from "../../components/Icons";
import { Button } from "../../components/Button";
import { getRuntimeConfig } from "../../config";
import { useLocalLabels } from "../../hooks/localLabels";
import { AliasData, useAliases } from "../../hooks/api/aliases";
import { useRuntimeData } from "../../hooks/api/runtimeData";
import { useAddonData } from "../../hooks/addon";
import { isFlagActive } from "../../functions/waffle";
import { isPhonesAvailableInCountry } from "../../functions/getPlan";
import { useL10n } from "../../hooks/l10n";
import QRCode from "react-qr-code";

const Settings: NextPage = () => {
  const runtimeData = useRuntimeData();
  const profileData = useProfiles();
  const l10n = useL10n();
  const [localLabels] = useLocalLabels();
  const aliasData = useAliases();
  const addonData = useAddonData();
  const [labelCollectionEnabled, setLabelCollectionEnabled] = useState(
    profileData.data?.[0].server_storage,
  );
  const [trackerRemovalEnabled, setTrackerRemovalEnabled] = useState(
    profileData.data?.[0].remove_level_one_email_trackers,
  );
  const [phoneCallerSMSLogEnabled, setPhoneCallerSMSLogEnabled] = useState(
    profileData.data?.[0].store_phone_log,
  );
  const [phoneCallerSMSLogEnabledLabel, setPhoneCallerSMSLogEnabledLabel] =
    useState(false);
  const [justCopiedApiKey, setJustCopiedApiKey] = useState(false);
  const apiKeyElementRef = useRef<HTMLInputElement>(null);

  const [
    labelCollectionDisabledWarningToggles,
    countLabelCollectionDisabledWarningToggle,
  ] = useReducer((c) => c + 1, 0);
  useEffect(() => {
    countLabelCollectionDisabledWarningToggle();
  }, [labelCollectionEnabled]);

  if (!profileData.isValidating && profileData.error) {
    document.location.assign(getRuntimeConfig().fxaLoginUrl);
  }

  if (!profileData.data || !runtimeData.data) {
    // TODO: Show a loading spinner?
    return null;
  }

  const profile = profileData.data[0];

  const currentSettingWarning = profile.server_storage ? null : (
    <div className={styles["banner-wrapper"]}>
      <Banner
        title={l10n.getString("settings-warning-collection-off-heading-3")}
        type="warning"
      >
        {l10n.getString("settings-warning-collection-off-description-3")}
      </Banner>
    </div>
  );
  // This warning should only be shown when data collection is explicitly toggled off,
  // i.e. not when it is off on page load.
  const labelCollectionWarning =
    labelCollectionDisabledWarningToggles > 1 && !labelCollectionEnabled ? (
      <div role="alert" className={styles["field-warning"]}>
        <InfoTriangleIcon alt="" />
        <p>{l10n.getString("setting-label-collection-off-warning-3")}</p>
      </div>
    ) : null;

  const saveSettings: FormEventHandler = async (event) => {
    event.preventDefault();

    try {
      await profileData.update(profile.id, {
        server_storage: labelCollectionEnabled,
        remove_level_one_email_trackers:
          typeof profile.remove_level_one_email_trackers === "boolean"
            ? trackerRemovalEnabled
            : undefined,
        store_phone_log: phoneCallerSMSLogEnabled,
      });

      // After having enabled new server-side data storage, upload the locally stored labels:
      if (
        profileData.data?.[0].server_storage === false &&
        labelCollectionEnabled === true
      ) {
        const uploadLocalLabel = (alias: AliasData) => {
          const localLabel = localLabels?.find(
            (localLabel) =>
              localLabel.mask_type === alias.mask_type &&
              localLabel.id === alias.id,
          );
          if (typeof localLabel !== "undefined") {
            aliasData.update(alias, {
              description: localLabel.description,
              generated_for: localLabel.generated_for,
              used_on: localLabel.used_on,
            });
          }
        };
        aliasData.randomAliasData.data?.forEach(uploadLocalLabel);
        aliasData.customAliasData.data?.forEach(uploadLocalLabel);
      }

      toast(l10n.getString("success-settings-update"), { type: "success" });

      if (profileData.data?.[0].server_storage !== labelCollectionEnabled) {
        // If the user has changed their preference w.r.t. server storage of address labels,
        // notify the add-on about it:
        addonData.sendEvent("serverStorageChange");
      }
    } catch (e) {
      toast(l10n.getString("error-settings-update"), { type: "error" });
    }
  };

  const contactUsLink = profile.has_premium ? (
    <li>
      <a
        href={`${runtimeData.data.FXA_ORIGIN}/support/?utm_source=${
          getRuntimeConfig().frontendOrigin
        }`}
        target="_blank"
        rel="noopener noreferrer"
        title={l10n.getString("nav-profile-contact-tooltip")}
      >
        <ContactIcon className={styles["menu-icon"]} alt="" />
        {l10n.getString("settings-meta-contact-label")}
        <NewTabIcon />
      </a>
    </li>
  ) : null;

  const labelCollectionPrivacySetting = (
    <div className={styles.field}>
      <h2 className={styles["field-heading"]}>
        {l10n.getString("setting-label-collection-heading-v2")}
      </h2>
      <div className={styles["field-content"]}>
        <div className={styles["field-control"]}>
          <input
            type="checkbox"
            name="label-collection"
            id="label-collection"
            defaultChecked={profile.server_storage}
            onChange={(e) => setLabelCollectionEnabled(e.target.checked)}
          />
          <label htmlFor="label-collection">
            {l10n.getString("setting-label-collection-description-3")}
          </label>
        </div>
        {labelCollectionWarning}
      </div>
    </div>
  );

  const copyApiKeyToClipboard: MouseEventHandler<HTMLButtonElement> = () => {
    navigator.clipboard.writeText(profile.api_token);
    apiKeyElementRef.current?.select();
    setJustCopiedApiKey(true);
    setTimeout(() => setJustCopiedApiKey(false), 1000);
  };

  const apiKeySetting = (
    <div className={styles.field}>
      <h2 className={styles["field-heading"]}>
        <label htmlFor="api-key">
          {l10n.getString("setting-label-api-key")}
        </label>
      </h2>
      <div
        className={`${styles["copy-api-key-content"]} ${styles["field-content"]}`}
      >
        <div className={styles["settings-api-key-wrapper"]}>
          <input
            id="api-key"
            ref={apiKeyElementRef}
            className={styles["copy-api-key-display"]}
            value={profile.api_token}
            size={profile.api_token.length}
            readOnly={true}
          />
          <span className={styles["copy-controls"]}>
            <span className={styles["copy-button-wrapper"]}>
              <button
                type="button"
                className={styles["copy-button"]}
                title={l10n.getString("settings-button-copy")}
                onClick={copyApiKeyToClipboard}
              >
                <CopyIcon
                  alt={l10n.getString("settings-button-copy")}
                  className={styles["copy-icon"]}
                  width={24}
                  height={24}
                />
              </button>
              <span
                aria-hidden={!justCopiedApiKey}
                className={`${styles["copied-confirmation"]} ${
                  justCopiedApiKey ? styles["is-shown"] : ""
                }`}
              >
                {l10n.getString("setting-api-key-copied")}
              </span>
            </span>
          </span>
        </div>
        {isFlagActive(runtimeData.data, "mobile_app") ? (
          <div className={styles["settings-api-qr-code-wrapper"]}>
            <div className={styles["settings-api-qr-code"]}>
              <QRCode value={"Token " + profile.api_token} />
            </div>
            <p>Scan the code with your Relay mobile app.</p>
          </div>
        ) : null}
        <div className={styles["settings-api-key-copy"]}>
          {l10n.getString("settings-api-key-description")}{" "}
          <b>{l10n.getString("settings-api-key-description-bolded")}</b>
        </div>
      </div>
    </div>
  );

  // To allow us to add this UI before the back-end is updated, we only show it
  // when the profiles API actually returns a property `remove_level_one_email_trackers`.
  // Once it does, the commit that introduced this comment can be reverted.
  const trackerRemovalSetting =
    typeof profile.remove_level_one_email_trackers === "boolean" &&
    isFlagActive(runtimeData.data, "tracker_removal") ? (
      <div className={styles.field}>
        <h2 className={styles["field-heading"]}>
          <span className={styles["field-heading-icon-wrapper"]}>
            <HideIcon alt="" />
            {l10n.getString("setting-tracker-removal-heading")}
          </span>
        </h2>
        <div className={styles["field-content"]}>
          <div className={styles["field-control"]}>
            <input
              type="checkbox"
              name="tracker-removal"
              id="tracker-removal"
              defaultChecked={profile.remove_level_one_email_trackers}
              onChange={(e) => setTrackerRemovalEnabled(e.target.checked)}
            />
            <label htmlFor="tracker-removal">
              <p>{l10n.getString("setting-tracker-removal-description")}</p>
              <p>{l10n.getString("setting-tracker-removal-note")}</p>
            </label>
          </div>
          <div className={styles["field-warning"]}>
            <InfoTriangleIcon alt="" />
            <p>{l10n.getString("setting-tracker-removal-warning-2")}</p>
          </div>
        </div>
      </div>
    ) : null;

  const phoneCallerSMSLogSetting = isPhonesAvailableInCountry(
    runtimeData.data,
  ) ? (
    <div className={styles.field}>
      <h2 className={styles["field-heading"]}>
        <span className={styles["field-heading-icon-wrapper"]}>
          {l10n.getString("phone-settings-caller-sms-log")}
        </span>
      </h2>
      <div className={styles["field-content"]}>
        <div className={styles["field-control"]}>
          <input
            type="checkbox"
            name="caller-sms-log"
            id="caller-sms-log"
            defaultChecked={profile.store_phone_log}
            onChange={(e) => {
              setPhoneCallerSMSLogEnabled(e.target.checked);
              setPhoneCallerSMSLogEnabledLabel(!phoneCallerSMSLogEnabledLabel);
            }}
          />
          <label htmlFor="caller-sms-log">
            <p>{l10n.getString("phone-settings-caller-sms-log-description")}</p>
          </label>
        </div>
        {phoneCallerSMSLogEnabledLabel ? (
          <div className={styles["field-warning"]}>
            <InfoTriangleIcon alt="" />
            <p>{l10n.getString("phone-settings-caller-sms-log-warning")}</p>
          </div>
        ) : null}
      </div>
    </div>
  ) : null;

  return (
    <>
      <Layout runtimeData={runtimeData.data}>
        <div className={styles["settings-page"]}>
          <main className={styles.main}>
            {currentSettingWarning}
            <div className={styles["settings-form-wrapper"]}>
              <form onSubmit={saveSettings} className={styles["settings-form"]}>
                {labelCollectionPrivacySetting}
                {apiKeySetting}
                {trackerRemovalSetting}
                {phoneCallerSMSLogSetting}

                <div className={styles.controls}>
                  <Button type="submit">
                    {l10n.getString("settings-button-save-label")}
                  </Button>
                </div>
              </form>
            </div>
          </main>
          <aside className={styles.menu}>
            <h1 className={styles.heading}>
              {l10n.getString("settings-headline")}
            </h1>
            <ul>
              {contactUsLink}
              <li>
                <a
                  href={`${getRuntimeConfig().supportUrl}?utm_source=${
                    getRuntimeConfig().frontendOrigin
                  }`}
                  target="_blank"
                  rel="noopener noreferrer"
                  title={l10n.getString("settings-meta-help-tooltip")}
                >
                  <SupportIcon className={styles["menu-icon"]} alt="" />
                  {l10n.getString("settings-meta-help-label")}
                  <NewTabIcon />
                </a>
              </li>
              <li>
                <a
                  href="https://status.relay.firefox.com/"
                  target="_blank"
                  rel="noopener noreferrer"
                  title={l10n.getString("settings-meta-status-tooltip")}
                >
                  <PerformanceIcon className={styles["menu-icon"]} alt="" />
                  {l10n.getString("settings-meta-status-label")}
                  <NewTabIcon />
                </a>
              </li>
            </ul>
          </aside>
        </div>
      </Layout>
    </>
  );
};

export default Settings;

1	import type { NextPage } from "next";
2	import {
3	FormEventHandler,
4	MouseEventHandler,
5	useEffect,
6	useReducer,
7	useRef,
8	useState,
9	} from "react";	1✔
10	import { toast } from "react-toastify";	1✔
11	import styles from "./settings.module.scss";	1✔
12	import { Layout } from "../../components/layout/Layout";	1✔
13	import { Banner } from "../../components/Banner";	1✔
14	import { useProfiles } from "../../hooks/api/profile";	1✔
15	import {
16	InfoTriangleIcon,
17	HideIcon,
18	NewTabIcon,
19	PerformanceIcon,
20	CopyIcon,
21	SupportIcon,
22	ContactIcon,
23	} from "../../components/Icons";	1✔
24	import { Button } from "../../components/Button";	1✔
25	import { getRuntimeConfig } from "../../config";	1✔
26	import { useLocalLabels } from "../../hooks/localLabels";	1✔
27	import { AliasData, useAliases } from "../../hooks/api/aliases";	1✔
28	import { useRuntimeData } from "../../hooks/api/runtimeData";	1✔
29	import { useAddonData } from "../../hooks/addon";	1✔
30	import { isFlagActive } from "../../functions/waffle";	1✔
31	import { isPhonesAvailableInCountry } from "../../functions/getPlan";	1✔
32	import { useL10n } from "../../hooks/l10n";	1✔
33	import QRCode from "react-qr-code";	1✔
34
35	const Settings: NextPage = () => {	1✔
36	const runtimeData = useRuntimeData();	21✔
37	const profileData = useProfiles();	21✔
38	const l10n = useL10n();	21✔
39	const [localLabels] = useLocalLabels();	21✔
40	const aliasData = useAliases();	20✔
41	const addonData = useAddonData();	20✔
42	const [labelCollectionEnabled, setLabelCollectionEnabled] = useState(	20✔
43	profileData.data?.[0].server_storage,
44	);
45	const [trackerRemovalEnabled, setTrackerRemovalEnabled] = useState(	20✔
46	profileData.data?.[0].remove_level_one_email_trackers,
47	);
48	const [phoneCallerSMSLogEnabled, setPhoneCallerSMSLogEnabled] = useState(	20✔
49	profileData.data?.[0].store_phone_log,
50	);
51	const [phoneCallerSMSLogEnabledLabel, setPhoneCallerSMSLogEnabledLabel] =
52	useState(false);	20✔
53	const [justCopiedApiKey, setJustCopiedApiKey] = useState(false);	20✔
54	const apiKeyElementRef = useRef<HTMLInputElement>(null);	20✔
55
56	const [
57	labelCollectionDisabledWarningToggles,
58	countLabelCollectionDisabledWarningToggle,
59	] = useReducer((c) => c + 1, 0);	20✔
60	useEffect(() => {	20✔
61	countLabelCollectionDisabledWarningToggle();	10✔
62	}, [labelCollectionEnabled]);
63
64	if (!profileData.isValidating && profileData.error) {	20!
UNCOV 65	document.location.assign(getRuntimeConfig().fxaLoginUrl);	×
66	}
67
68	if (!profileData.data \|\| !runtimeData.data) {	20!
69	// TODO: Show a loading spinner?
UNCOV 70	return null;	×
71	}
72
73	const profile = profileData.data[0];	20✔
74
75	const currentSettingWarning = profile.server_storage ? null : (	12✔
76	<div className={styles["banner-wrapper"]}>
77	<Banner
78	title={l10n.getString("settings-warning-collection-off-heading-3")}
79	type="warning"
80	>
81	{l10n.getString("settings-warning-collection-off-description-3")}
82	</Banner>
83	</div>
84	);
85	// This warning should only be shown when data collection is explicitly toggled off,
86	// i.e. not when it is off on page load.
87	const labelCollectionWarning =
88	labelCollectionDisabledWarningToggles > 1 && !labelCollectionEnabled ? (	20✔
89	<div role="alert" className={styles["field-warning"]}>
90	<InfoTriangleIcon alt="" />
91	<p>{l10n.getString("setting-label-collection-off-warning-3")}</p>
92	</div>
93	) : null;
94
95	const saveSettings: FormEventHandler = async (event) => {	20✔
96	event.preventDefault();	2✔
97
98	try {	2✔
99	await profileData.update(profile.id, {	2✔
100	server_storage: labelCollectionEnabled,
101	remove_level_one_email_trackers:
102	typeof profile.remove_level_one_email_trackers === "boolean"	2!
103	? trackerRemovalEnabled
104	: undefined,
105	store_phone_log: phoneCallerSMSLogEnabled,
106	});
107
108	// After having enabled new server-side data storage, upload the locally stored labels:
109	if (	2✔
110	profileData.data?.[0].server_storage === false &&	3✔
111	labelCollectionEnabled === true
112	) {
113	const uploadLocalLabel = (alias: AliasData) => {	1✔
114	const localLabel = localLabels?.find(	2✔
115	(localLabel) =>
UNCOV 116	localLabel.mask_type === alias.mask_type &&	×
117	localLabel.id === alias.id,
118	);
119	if (typeof localLabel !== "undefined") {	2!
UNCOV 120	aliasData.update(alias, {	×
121	description: localLabel.description,
122	generated_for: localLabel.generated_for,
123	used_on: localLabel.used_on,
124	});
125	}
126	};
127	aliasData.randomAliasData.data?.forEach(uploadLocalLabel);	1✔
128	aliasData.customAliasData.data?.forEach(uploadLocalLabel);	1✔
129	}
130
131	toast(l10n.getString("success-settings-update"), { type: "success" });	2✔
132
133	if (profileData.data?.[0].server_storage !== labelCollectionEnabled) {	2✔
134	// If the user has changed their preference w.r.t. server storage of address labels,
135	// notify the add-on about it:
136	addonData.sendEvent("serverStorageChange");	2✔
137	}
138	} catch (e) {
UNCOV 139	toast(l10n.getString("error-settings-update"), { type: "error" });	×
140	}
141	};
142
143	const contactUsLink = profile.has_premium ? (	20!
144	<li>
145	<a
146	href={`${runtimeData.data.FXA_ORIGIN}/support/?utm_source=${
147	getRuntimeConfig().frontendOrigin
148	}`}
149	target="_blank"
150	rel="noopener noreferrer"
151	title={l10n.getString("nav-profile-contact-tooltip")}
152	>
153	<ContactIcon className={styles["menu-icon"]} alt="" />
154	{l10n.getString("settings-meta-contact-label")}
155	<NewTabIcon />
156	</a>
157	</li>
158	) : null;
159
160	const labelCollectionPrivacySetting = (
161	<div className={styles.field}>
162	<h2 className={styles["field-heading"]}>
163	{l10n.getString("setting-label-collection-heading-v2")}
164	</h2>
165	<div className={styles["field-content"]}>
166	<div className={styles["field-control"]}>
167	<input
168	type="checkbox"
169	name="label-collection"
170	id="label-collection"
171	defaultChecked={profile.server_storage}
172	onChange={(e) => setLabelCollectionEnabled(e.target.checked)}	3✔
173	/>
174	<label htmlFor="label-collection">
175	{l10n.getString("setting-label-collection-description-3")}
176	</label>
177	</div>
178	{labelCollectionWarning}
179	</div>
180	</div>
181	);
182
183	const copyApiKeyToClipboard: MouseEventHandler<HTMLButtonElement> = () => {	20✔
184	navigator.clipboard.writeText(profile.api_token);	×
185	apiKeyElementRef.current?.select();	×
186	setJustCopiedApiKey(true);	×
UNCOV 187	setTimeout(() => setJustCopiedApiKey(false), 1000);	×
188	};
189
190	const apiKeySetting = (
191	<div className={styles.field}>
192	<h2 className={styles["field-heading"]}>
193	<label htmlFor="api-key">
194	{l10n.getString("setting-label-api-key")}
195	</label>
196	</h2>
197	<div
198	className={`${styles["copy-api-key-content"]} ${styles["field-content"]}`}
199	>
200	<div className={styles["settings-api-key-wrapper"]}>
201	<input
202	id="api-key"
203	ref={apiKeyElementRef}
204	className={styles["copy-api-key-display"]}
205	value={profile.api_token}
206	size={profile.api_token.length}
207	readOnly={true}
208	/>
209	<span className={styles["copy-controls"]}>
210	<span className={styles["copy-button-wrapper"]}>
211	<button
212	type="button"
213	className={styles["copy-button"]}
214	title={l10n.getString("settings-button-copy")}
215	onClick={copyApiKeyToClipboard}
216	>
217	<CopyIcon
218	alt={l10n.getString("settings-button-copy")}
219	className={styles["copy-icon"]}
220	width={24}
221	height={24}
222	/>
223	</button>
224	<span
225	aria-hidden={!justCopiedApiKey}
226	className={`${styles["copied-confirmation"]} ${
227	justCopiedApiKey ? styles["is-shown"] : ""	20!
228	}`}
229	>
230	{l10n.getString("setting-api-key-copied")}
231	</span>
232	</span>
233	</span>
234	</div>
235	{isFlagActive(runtimeData.data, "mobile_app") ? (	20!
236	<div className={styles["settings-api-qr-code-wrapper"]}>
237	<div className={styles["settings-api-qr-code"]}>
238	<QRCode value={"Token " + profile.api_token} />
239	</div>
240	<p>Scan the code with your Relay mobile app.</p>
241	</div>
242	) : null}
243	<div className={styles["settings-api-key-copy"]}>
244	{l10n.getString("settings-api-key-description")}{" "}
245	<b>{l10n.getString("settings-api-key-description-bolded")}</b>
246	</div>
247	</div>
248	</div>
249	);
250
251	// To allow us to add this UI before the back-end is updated, we only show it
252	// when the profiles API actually returns a property `remove_level_one_email_trackers`.
253	// Once it does, the commit that introduced this comment can be reverted.
254	const trackerRemovalSetting =
255	typeof profile.remove_level_one_email_trackers === "boolean" &&	20!
256	isFlagActive(runtimeData.data, "tracker_removal") ? (
257	<div className={styles.field}>
258	<h2 className={styles["field-heading"]}>
259	<span className={styles["field-heading-icon-wrapper"]}>
260	<HideIcon alt="" />
261	{l10n.getString("setting-tracker-removal-heading")}
262	</span>
263	</h2>
264	<div className={styles["field-content"]}>
265	<div className={styles["field-control"]}>
266	<input
267	type="checkbox"
268	name="tracker-removal"
269	id="tracker-removal"
270	defaultChecked={profile.remove_level_one_email_trackers}
UNCOV 271	onChange={(e) => setTrackerRemovalEnabled(e.target.checked)}	×
272	/>
273	<label htmlFor="tracker-removal">
274	<p>{l10n.getString("setting-tracker-removal-description")}</p>
275	<p>{l10n.getString("setting-tracker-removal-note")}</p>
276	</label>
277	</div>
278	<div className={styles["field-warning"]}>
279	<InfoTriangleIcon alt="" />
280	<p>{l10n.getString("setting-tracker-removal-warning-2")}</p>
281	</div>
282	</div>
283	</div>
284	) : null;
285
286	const phoneCallerSMSLogSetting = isPhonesAvailableInCountry(	20!
287	runtimeData.data,
288	) ? (
289	<div className={styles.field}>
290	<h2 className={styles["field-heading"]}>
291	<span className={styles["field-heading-icon-wrapper"]}>
292	{l10n.getString("phone-settings-caller-sms-log")}
293	</span>
294	</h2>
295	<div className={styles["field-content"]}>
296	<div className={styles["field-control"]}>
297	<input
298	type="checkbox"
299	name="caller-sms-log"
300	id="caller-sms-log"
301	defaultChecked={profile.store_phone_log}
302	onChange={(e) => {
UNCOV 303	setPhoneCallerSMSLogEnabled(e.target.checked);	×
UNCOV 304	setPhoneCallerSMSLogEnabledLabel(!phoneCallerSMSLogEnabledLabel);	×
305	}}
306	/>
307	<label htmlFor="caller-sms-log">
308	<p>{l10n.getString("phone-settings-caller-sms-log-description")}</p>
309	</label>
310	</div>
311	{phoneCallerSMSLogEnabledLabel ? (	×
312	<div className={styles["field-warning"]}>
313	<InfoTriangleIcon alt="" />
314	<p>{l10n.getString("phone-settings-caller-sms-log-warning")}</p>
315	</div>
316	) : null}
317	</div>
318	</div>
319	) : null;
320
321	return (
322	<>
323	<Layout runtimeData={runtimeData.data}>
324	<div className={styles["settings-page"]}>
325	<main className={styles.main}>
326	{currentSettingWarning}
327	<div className={styles["settings-form-wrapper"]}>
328	<form onSubmit={saveSettings} className={styles["settings-form"]}>
329	{labelCollectionPrivacySetting}
330	{apiKeySetting}
331	{trackerRemovalSetting}
332	{phoneCallerSMSLogSetting}
333
334	<div className={styles.controls}>
335	<Button type="submit">
336	{l10n.getString("settings-button-save-label")}
337	</Button>
338	</div>
339	</form>
340	</div>
341	</main>
342	<aside className={styles.menu}>
343	<h1 className={styles.heading}>
344	{l10n.getString("settings-headline")}
345	</h1>
346	<ul>
347	{contactUsLink}
348	<li>
349	<a
350	href={`${getRuntimeConfig().supportUrl}?utm_source=${
351	getRuntimeConfig().frontendOrigin
352	}`}
353	target="_blank"
354	rel="noopener noreferrer"
355	title={l10n.getString("settings-meta-help-tooltip")}
356	>
357	<SupportIcon className={styles["menu-icon"]} alt="" />
358	{l10n.getString("settings-meta-help-label")}
359	<NewTabIcon />
360	</a>
361	</li>
362	<li>
363	<a
364	href="https://status.relay.firefox.com/"
365	target="_blank"
366	rel="noopener noreferrer"
367	title={l10n.getString("settings-meta-status-tooltip")}
368	>
369	<PerformanceIcon className={styles["menu-icon"]} alt="" />
370	{l10n.getString("settings-meta-status-label")}
371	<NewTabIcon />
372	</a>
373	</li>
374	</ul>
375	</aside>
376	</div>
377	</Layout>
378	</>
379	);
380	};
381
382	export default Settings;	7✔

mozilla / fx-private-relay / 00ec54cc-64a2-4ec2-8f3a-94fedd893215

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