#11748

pending completion

Build # #11748

Build Type

push

circleci

Committed by

web-flow

Commit Message

Merge pull request #2740 from mozilla/MNTOR-1061/resolved-filter

Mntor 1061/resolved filter

Run Details

278 of 1122 branches covered (24.78%)

Branch coverage included in aggregate %.

29 of 29 new or added lines in 1 file covered. (100.0%)

948 of 3016 relevant lines covered (31.43%)

2.52 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'
import AppConstants from '../../app-constants.js'

const rowHtml = data => `
<details class='breach-row' data-status=${data.status} data-email=${data.affectedEmail} hidden=${data.isHidden}>
  <summary>
    <span>${data.companyName}</span><span>${data.dataClasses}</span><span>${data.addedDate}</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 createBreachRows (data) {
  const locale = getLocale()
  const formattedBreaches = data.verifiedEmails.flatMap(account => {
    return account.breaches.map(breach => {
      const breachDate = Date.parse(breach.BreachDate)
      const addedDate = Date.parse(breach.AddedDate)
      const dataClassesTranslated = breach.DataClasses.map(item => getMessage(item))
      const formattedBreach = {
        isHidden: !account.primary || breach.IsResolved, // initial breach hidden state
        status: breach.IsResolved ? 'resolved' : 'unresolved',
        affectedEmail: account.email,
        companyName: breach.Title,
        addedDate: new Intl.DateTimeFormat(locale, { year: 'numeric', month: '2-digit', day: '2-digit', timeZone: 'UTC' }).format(addedDate),
        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 rowHtml(formattedBreach)
    })
  })

  return formattedBreaches.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>${getMessage('emails-monitored', { count: data.emailCount, total: AppConstants.MAX_NUM_ADDRESSES })}</strong>
        <a href='http://mozilla.org'>Add email address</a>
      </figcaption>
    </figure>
  </header>
</section>
<section class='breaches-filter'>
  <input id='breaches-unresolved' type='radio' name='breaches-status' value='unresolved' checked>
  <label for='breaches-unresolved'><output>&nbsp;</output>${getMessage('filter-label-unresolved')}</label>
  <input id='breaches-resolved' type='radio' name='breaches-status' value='resolved'>
  <label for='breaches-resolved'><output>&nbsp;</output>${getMessage('filter-label-resolved')}</label>
</section>
<section class='breaches-table'>
  <header>
    <span>${getMessage('column-company')}</span><span>${getMessage('column-breached-data')}</span><span>${getMessage('column-detected')}</span>
  </header>
  ${createBreachRows(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	import AppConstants from '../../app-constants.js'
3
4	const rowHtml = data => `	×
5	<details class='breach-row' data-status=${data.status} data-email=${data.affectedEmail} hidden=${data.isHidden}>
6	<summary>
7	<span>${data.companyName}</span><span>${data.dataClasses}</span><span>${data.addedDate}</span>
8	</summary>
9	<div>
10	${data.description}
11	</div>
12	</details>
13	`
14
15	function createEmailOptions (data) {
16	const emails = data.verifiedEmails.map(obj => obj.email)	×
17	const optionElements = emails.map(email => `<option>${email}</option>`)	×
18
19	return optionElements.join('')	×
20	}
21
22	function createBreachRows (data) {
23	const locale = getLocale()	×
24	const formattedBreaches = data.verifiedEmails.flatMap(account => {	×
25	return account.breaches.map(breach => {	×
26	const breachDate = Date.parse(breach.BreachDate)	×
27	const addedDate = Date.parse(breach.AddedDate)	×
28	const dataClassesTranslated = breach.DataClasses.map(item => getMessage(item))	×
29	const formattedBreach = {	×
30	isHidden: !account.primary \|\| breach.IsResolved, // initial breach hidden state	×
31	status: breach.IsResolved ? 'resolved' : 'unresolved',	×
32	affectedEmail: account.email,
33	companyName: breach.Title,
34	addedDate: new Intl.DateTimeFormat(locale, { year: 'numeric', month: '2-digit', day: '2-digit', timeZone: 'UTC' }).format(addedDate),
35	dataClasses: new Intl.ListFormat(locale, { style: 'narrow' }).format(dataClassesTranslated),
36	description: getMessage('breach-description', {
37	companyName: breach.Title,
38	breachDate: new Intl.DateTimeFormat(locale, { dateStyle: 'long', timeZone: 'UTC' }).format(breachDate),
39	addedDate: new Intl.DateTimeFormat(locale, { dateStyle: 'long', timeZone: 'UTC' }).format(addedDate),
40	dataClasses: new Intl.ListFormat(locale, { style: 'long' }).format(dataClassesTranslated)
41	})
42	}
43
44	return rowHtml(formattedBreach)	×
45	})
46	})
47
48	return formattedBreaches.join('')	×
49	}
50
51	export const breaches = data => `	×
52	<section>
53	<header class='breaches-header'>
54	<h1>${getMessage('breach-heading-email', { 'email-select': `<custom-select>${createEmailOptions(data.breachesData)}</custom-select>` })}</h1>
55	<figure>
56	<img src='/images/temp-diagram.png' width='80' height='80'>
57	<figcaption class='breach-stats'>
58	<strong>10 total breaches</strong>
59	<label>Resolved</label>
60	<label>Unresolved</label>
61	</figcaption>
62	</figure>
63	<figure class='email-stats'>
64	<img src='/images/icon-email.svg' width='55' height='30'>
65	<figcaption>
66	<strong>${getMessage('emails-monitored', { count: data.emailCount, total: AppConstants.MAX_NUM_ADDRESSES })}</strong>
67	<a href='http://mozilla.org'>Add email address</a>
68	</figcaption>
69	</figure>
70	</header>
71	</section>
72	<section class='breaches-filter'>
73	<input id='breaches-unresolved' type='radio' name='breaches-status' value='unresolved' checked>
74	<label for='breaches-unresolved'><output> </output>${getMessage('filter-label-unresolved')}</label>
75	<input id='breaches-resolved' type='radio' name='breaches-status' value='resolved'>
76	<label for='breaches-resolved'><output> </output>${getMessage('filter-label-resolved')}</label>
77	</section>
78	<section class='breaches-table'>
79	<header>
80	<span>${getMessage('column-company')}</span><span>${getMessage('column-breached-data')}</span><span>${getMessage('column-detected')}</span>
81	</header>
82	${createBreachRows(data.breachesData)}
83	</section>
84	<section style='display:none'>
85	<button id="update-breaches">Update Breaches</button>
86	<pre>${JSON.stringify(data.breachesData, null, 2)}</pre>
87	</section>
88	`

mozilla / blurts-server / #11748

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