Add dismiss button and loading component.

1.0.21.xpi

manifest.json

@@ -1,7 +1,7 @@
 {
   "name": "Sage's BitBucket Addon",
   "description": "Ensure searches don't include forks (and other enhancements)",
-  "version": "1.0.20",
+  "version": "1.0.21",
   "manifest_version": 2,
   "browser_specific_settings": {
     "gecko": {

show-errored-prs.js

@@ -1,5 +1,7 @@
 const bbUrlPrefix = 'https://git.add123.com/rest/api/latest'
 
+let updateEmptySection
+
 const pullRequestHasErrored = async pr => {
   const latestCommitId = pr?.fromRef?.latestCommit
   if (!latestCommitId) {
@@ -28,8 +30,9 @@ const getErroredPrs = async () => {
       ).flatMap(({values}) => values)
     }).catch(console.error)).filter(Boolean)
   const erroredPullRequests = []
+  const dismissedCommitIds = getLocalStorage().dismissedCommitIds ?? []
   for (const pullRequest of allPullRequests) {
-    if (await pullRequestHasErrored(pullRequest)) {
+    if (!dismissedCommitIds.includes(pullRequest?.fromRef?.latestCommit) && await pullRequestHasErrored(pullRequest)) {
       erroredPullRequests.push(pullRequest)
     }
   }
@@ -45,7 +48,65 @@ const getElementAfterErrorList = mainPanel => {
   return mainPanel.children[1]
 }
 
-const buildPrRow = pr => {
+const getLocalStorage = () => {
+  return JSON.parse(localStorage.getItem('bb-addon-data') ?? '{}')
+}
+
+const setLocalStorage = data => {
+  localStorage.setItem('bb-addon-data', JSON.stringify(data))
+}
+
+const addLocalStorage = data => {
+  localStorage.setItem('bb-addon-data', JSON.stringify({
+    ...getLocalStorage(),
+    ...data
+  }))
+}
+
+const prErrorTableId = 'bb-addon-error-table'
+const prEmptySectionId = 'bb-addon-empty-section'
+
+const configureEmptySection = (loading, emptyState) => {
+  const message = loading ? 'Loading PRs with errors...' : 'No pull requests have errors!'
+  emptyState.id = prEmptySectionId
+  emptyState.className = 'empty-state'
+  emptyState.innerHTML = `
+      <div className="dashboard-empty-reviewing">
+        <p className="dashboard-empty-title" style="font-weight: 500">${message}</p>
+        ${loading ? '' : '<p className="dashboard-empty-description"><em>Pray it stays that way.</em></p>'}
+      </div>
+  `
+  return emptyState
+}
+
+const buildErrorListTable = () => {
+  const table = document.createElement('table')
+  table.id = prErrorTableId
+
+  const thead = document.createElement('thead')
+  table.appendChild(thead)
+
+  const tr = document.createElement('tr')
+  thead.appendChild(tr)
+
+  const summaryColumn = document.createElement('th')
+  summaryColumn.className = 'summary-column'
+  summaryColumn.colSpan = 6
+  tr.appendChild(summaryColumn)
+
+  const reviewersColumn = document.createElement('th')
+  reviewersColumn.className = 'reviewers-column'
+  reviewersColumn.innerHTML = '&nbsp;'
+  tr.appendChild(reviewersColumn)
+
+  const buildsColumn = document.createElement('th')
+  buildsColumn.className = 'builds-column'
+  buildsColumn.innerHTML = '&nbsp;'
+  tr.appendChild(buildsColumn)
+  return table
+}
+
+const buildPrRow = (pr, parent) => {
   const row = document.createElement('tr')
   row.className = 'pull-request-row'
 
@@ -56,7 +117,7 @@ const buildPrRow = pr => {
       <div style="display: inline-block; position: relative; outline: 0px;">
           <span class="css-1dyoea">
               <span style="background-image: url('/users/${pr.author.user.name}/avatar.png?s=64'); border-radius: 50%;"
-              role="img" aria-label="Michael Mezzina" class="css-ob4lje"></span>
+              role="img" aria-label="${pr.author.user.name}" class="css-ob4lje"></span>
           </span>
       </div>
     </div>
@@ -83,7 +144,6 @@ const buildPrRow = pr => {
   const details = document.createElement('div')
   details.className = 'details'
   prSummary.appendChild(details)
-  console.log('pr', JSON.stringify(pr, null, 2))
   details.innerHTML = `
   <span class="user-name details-item">${pr.author.user.displayName}</span>
   <span class="details-item">-</span>
@@ -99,8 +159,16 @@ const buildPrRow = pr => {
   `
 
   const placeholderColumn = document.createElement('td')
-  placeholderColumn.className = 'placeholder-column'
-  placeholderColumn.innerHTML = '&nbsp;'
+  placeholderColumn.className = 'reviewers-column'
+  placeholderColumn.innerHTML = 'Dismiss'
+  placeholderColumn.addEventListener('click', () => {
+    const localStorageData = getLocalStorage()
+    localStorageData.dismissedCommitIds ??= []
+    localStorageData.dismissedCommitIds.push(pr.fromRef.latestCommit)
+    setLocalStorage(localStorageData)
+    parent.removeChild(row)
+    updateEmptySection(parent.children.length)
+  })
   row.appendChild(placeholderColumn)
 
   const buildColumn = document.createElement('td')
@@ -116,51 +184,48 @@ const showErroredPrs = async () => {
     return
   }
   const mainPanel = document.getElementsByClassName('main-panel')[0]
-  let errorParent = document.getElementById('bb-addon-pr-error-table')
+  let prErrorSection = document.getElementById('bb-addon-pr-error-section')
+  const emptySection = document.getElementById(prEmptySectionId) ?? document.createElement('div')
+  emptySection.id = prEmptySectionId
   let errorList = document.getElementById('bb-addon-pr-error-list')
-  if (!errorParent) {
-    errorParent = mainPanel.getElementsByClassName('closed-pull-requests')[0].cloneNode()
-    errorParent.id = 'bb-addon-pr-error-table'
+  const table = document.getElementById(prErrorTableId) ?? buildErrorListTable()
+
+  if (!prErrorSection) {
+    prErrorSection = mainPanel.getElementsByClassName('closed-pull-requests')[0].cloneNode()
+    prErrorSection.id = 'bb-addon-pr-error-section'
 
     const header = document.createElement('h3')
     header.innerText = 'Pull requests with errors'
-    errorParent.appendChild(header)
+    prErrorSection.appendChild(header)
 
-    const table = document.createElement('table')
-    errorParent.appendChild(table)
-
-    const thead = document.createElement('thead')
-    table.appendChild(thead)
-
-    const tr = document.createElement('tr')
-    thead.appendChild(tr)
-
-    const summaryColumn = document.createElement('th')
-    summaryColumn.className = 'summary-column'
-    summaryColumn.colSpan = 6
-    tr.appendChild(summaryColumn)
-
-    const reviewersColumn = document.createElement('th')
-    reviewersColumn.className = 'reviewers-column'
-    reviewersColumn.innerHTML = '&nbsp;'
-    tr.appendChild(reviewersColumn)
-
-    const buildsColumn = document.createElement('th')
-    buildsColumn.className = 'builds-column'
-    buildsColumn.innerHTML = '&nbsp;'
-    tr.appendChild(buildsColumn)
+    prErrorSection.appendChild(emptySection)
+    configureEmptySection(true, emptySection)
 
     errorList = document.createElement('tbody')
-    table.appendChild(errorList)
 
     errorList.id = 'bb-addon-pr-error-list'
 
-    mainPanel.insertBefore(errorParent, getElementAfterErrorList(mainPanel))
+    mainPanel.insertBefore(prErrorSection, getElementAfterErrorList(mainPanel))
+
+    table.style.visibility = 'collapse'
+    table.appendChild(errorList)
+    prErrorSection.appendChild(table)
   }
 
   const erroredPrs = await getErroredPrs()
   Array.from(errorList.children).forEach(child => errorList.removeChild(child))
-  erroredPrs.map(buildPrRow).forEach(row => errorList.appendChild(row))
+  erroredPrs.map(pr => buildPrRow(pr, errorList)).forEach(row => errorList.appendChild(row))
+  updateEmptySection = length => {
+    if (length) {
+      table.style.visibility = 'visible'
+      emptySection.style.visibility = 'collapse'
+    } else {
+      configureEmptySection(false, emptySection)
+      table.style.visibility = 'collapse'
+      emptySection.style.visibility = 'visible'
+    }
+  }
+  updateEmptySection(erroredPrs.length)
 }
 
 if (location.toString().includes('/dashboard')) {