b3348764-6664-4bee-92ce-6f4eb1a0b5dd

Build # b3348764-6664-4bee-92ce-6f4eb1a0b5dd

Build Type

push

circleci

Committed by GitHub

Commit Message

Merge pull request #2733 from mozilla/MNTOR-916/breaches-header

Run Details

278 of 1069 branches covered (26.01%)

Branch coverage included in aggregate %.

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

948 of 2915 relevant lines covered (32.52%)

5.22 hits per line

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

0.0

/src/views/partials/breaches.js

import { getMessage, getLocale } from '../../utils/fluent.js'

const rowHtml = data => `
<details>
  <summary>
    <span>${data.companyName}</span><span>${data.dataClasses}</span><span>${data.breachDate}</span>
  </summary>
  <div>
    ${data.description}
  </div>
</details>
`

function createEmailOptions (data) {
  const emails = data.verifiedEmails.map(obj => obj.email)
  const optionElements = emails.map(email => `<option>${email}</option>`)

  return optionElements.join('')
}

function createRows (data) {
  const locale = getLocale()
  const allEmailBreaches = data.verifiedEmails.flatMap(item => item.breaches)
  let breachDate, addedDate, dataClassesTranslated

  const formattedBreaches = allEmailBreaches.map(breach => {
    breachDate = Date.parse(breach.BreachDate)
    addedDate = Date.parse(breach.AddedDate)
    dataClassesTranslated = breach.DataClasses.map(item => getMessage(item))

    return {
      companyName: breach.Title,
      breachDate: new Intl.DateTimeFormat(locale, { year: 'numeric', month: '2-digit', day: '2-digit', timeZone: 'UTC' }).format(breachDate),
      dataClasses: new Intl.ListFormat(locale, { style: 'narrow' }).format(dataClassesTranslated),
      description: getMessage('breach-description', {
        companyName: breach.Title,
        breachDate: new Intl.DateTimeFormat(locale, { dateStyle: 'long', timeZone: 'UTC' }).format(breachDate),
        addedDate: new Intl.DateTimeFormat(locale, { dateStyle: 'long', timeZone: 'UTC' }).format(addedDate),
        dataClasses: new Intl.ListFormat(locale, { style: 'long' }).format(dataClassesTranslated)
      })
    }
  })

  return formattedBreaches.map(breach => rowHtml(breach)).join('')
}

export const breaches = data => `
<section>
  <header class='breaches-header'>
    <h1>${getMessage('breach-heading-email', { 'email-select': `<custom-select>${createEmailOptions(data.breachesData)}</custom-select>` })}</h1>
    <figure>
      <img src='/images/temp-diagram.png' width='80' height='80'>
      <figcaption class='breach-stats'>
        <strong>10 total breaches</strong>
        <label>Resolved</label>
        <label>Unresolved</label>
      </figcaption>
    </figure>
    <figure class='email-stats'>
      <img src='/images/icon-email.svg' width='55' height='30'>
      <figcaption>
        <strong>2 of 5 emails monitored</strong>
        <a href='http://mozilla.org'>Add email address</a>
      </figcaption>
    </figure>
  </header>
</section>
<section class='breaches-table'>
  <header>
    <span>${getMessage('column-company')}</span><span>${getMessage('column-breached-data')}</span><span>${getMessage('column-detected')}</span>
  </header>
  ${createRows(data.breachesData)}
</section>
<section style='display:none'>
  <button id="update-breaches">Update Breaches</button>
  <pre>${JSON.stringify(data.breachesData, null, 2)}</pre>
</section>
`

1	import { getMessage, getLocale } from '../../utils/fluent.js'
2
3	const rowHtml = data => `	×
4	<details>
5	<summary>
6	<span>${data.companyName}</span><span>${data.dataClasses}</span><span>${data.breachDate}</span>
7	</summary>
8	<div>
9	${data.description}
10	</div>
11	</details>
12	`
13
14	function createEmailOptions (data) {
15	const emails = data.verifiedEmails.map(obj => obj.email)	×
16	const optionElements = emails.map(email => `<option>${email}</option>`)	×
17
18	return optionElements.join('')	×
19	}
20
21	function createRows (data) {
22	const locale = getLocale()	×
23	const allEmailBreaches = data.verifiedEmails.flatMap(item => item.breaches)	×
24	let breachDate, addedDate, dataClassesTranslated
25
26	const formattedBreaches = allEmailBreaches.map(breach => {	×
27	breachDate = Date.parse(breach.BreachDate)	×
28	addedDate = Date.parse(breach.AddedDate)	×
29	dataClassesTranslated = breach.DataClasses.map(item => getMessage(item))	×
30
31	return {	×
32	companyName: breach.Title,
33	breachDate: new Intl.DateTimeFormat(locale, { year: 'numeric', month: '2-digit', day: '2-digit', timeZone: 'UTC' }).format(breachDate),
34	dataClasses: new Intl.ListFormat(locale, { style: 'narrow' }).format(dataClassesTranslated),
35	description: getMessage('breach-description', {
36	companyName: breach.Title,
37	breachDate: new Intl.DateTimeFormat(locale, { dateStyle: 'long', timeZone: 'UTC' }).format(breachDate),
38	addedDate: new Intl.DateTimeFormat(locale, { dateStyle: 'long', timeZone: 'UTC' }).format(addedDate),
39	dataClasses: new Intl.ListFormat(locale, { style: 'long' }).format(dataClassesTranslated)
40	})
41	}
42	})
43
44	return formattedBreaches.map(breach => rowHtml(breach)).join('')	×
45	}
46
47	export const breaches = data => `	×
48	<section>
49	<header class='breaches-header'>
50	<h1>${getMessage('breach-heading-email', { 'email-select': `<custom-select>${createEmailOptions(data.breachesData)}</custom-select>` })}</h1>
51	<figure>
52	<img src='/images/temp-diagram.png' width='80' height='80'>
53	<figcaption class='breach-stats'>
54	<strong>10 total breaches</strong>
55	<label>Resolved</label>
56	<label>Unresolved</label>
57	</figcaption>
58	</figure>
59	<figure class='email-stats'>
60	<img src='/images/icon-email.svg' width='55' height='30'>
61	<figcaption>
62	<strong>2 of 5 emails monitored</strong>
63	<a href='http://mozilla.org'>Add email address</a>
64	</figcaption>
65	</figure>
66	</header>
67	</section>
68	<section class='breaches-table'>
69	<header>
70	<span>${getMessage('column-company')}</span><span>${getMessage('column-breached-data')}</span><span>${getMessage('column-detected')}</span>
71	</header>
72	${createRows(data.breachesData)}
73	</section>
74	<section style='display:none'>
75	<button id="update-breaches">Update Breaches</button>
76	<pre>${JSON.stringify(data.breachesData, null, 2)}</pre>
77	</section>
78	`

mozilla / blurts-server / b3348764-6664-4bee-92ce-6f4eb1a0b5dd

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