@brightspot/ui 3.0.0 → 3.0.1-cms-ui-migration.1

package/src/legacy/tool-ui/src/main/webapp/v4/ContentLock.js

@@ -0,0 +1,470 @@
+import tabex from 'tabex'
+import Cookies from 'js.cookie'
+import onFind from './dom/onFind'
+import create from './dom/create'
+import rtc from './rtc'
+
+let networkTimeout = false
+let title
+const pollContainers = []
+
+onFind('form[data-rtc-content-id][data-content-locking="true"]', (form) => {
+  const contentId = form.getAttribute('data-rtc-content-id')
+
+  // Use the current date as an identifier for each tab
+  const now = Date.now()
+  const client = tabex.client()
+  const VIEWING_CHANNEL = contentId + '.viewing'
+  const LEAVING_CHANNEL = contentId + '.leaving'
+  const viewers = []
+  const viewing = { viewer: now }
+
+  // Listen for and keep track of new tabs viewing this content
+  client.on(VIEWING_CHANNEL, function (data) {
+    const viewer = data.viewer
+    if (viewer && viewers.indexOf(viewer) === -1) {
+      viewers.push(data.viewer)
+      // Inform the new tab of this current tab
+      client.emit(VIEWING_CHANNEL, viewing)
+    }
+  })
+
+  // Remove tabs from tracking when they leave this content
+  client.on(LEAVING_CHANNEL, function (data) {
+    const viewer = data.viewer
+    if (viewer) {
+      const idx = viewers.indexOf(viewer)
+      if (idx !== -1) {
+        viewers.splice(idx, 1)
+      }
+    }
+  })
+
+  // Inform other tabs that are viewing this content that this tab is viewing
+  client.emit(VIEWING_CHANNEL, viewing)
+
+  const queryStringBase =
+    '?contentId=' + contentId + '&typeId=' + form.getAttribute('data-type-id')
+
+  poll(form, queryStringBase)
+  const interval = setInterval(() => {
+    const fullQuery =
+      queryStringBase +
+      '&isLockOwner=' +
+      isLockOwner(form) +
+      '&isInactive=' +
+      document.hidden
+    poll(form, fullQuery)
+  }, 5000)
+
+  window.addEventListener('unload', () => {
+    sendUnlockSignal(interval, client, viewing, viewers, form, contentId)
+  })
+
+  // Attach to submit events for edge cases where the unload event is not triggered
+  // on publish
+  onFind('[data-rtc-unlock-onreceive]', (lockable) => {
+    if (lockable.dataset.rtcUnlockOnreceive) {
+      rtc.receive(lockable.dataset.rtcUnlockOnreceive, (data) => {
+        sendUnlockSignal(interval, client, viewing, viewers, form, contentId)
+      })
+    }
+  })
+
+  onFind('[data-rtc-unlock-onclick]', (item) => {
+    item.addEventListener('click', (event) => {
+      sendUnlockSignal(interval, client, viewing, viewers, form, contentId)
+    })
+  })
+})
+
+function sendUnlockSignal(interval, client, viewing, viewers, form, contentId) {
+  // Clear polling interval and let other tabs know this tab is leaving
+  clearInterval(interval)
+  client.emit(contentId + '.leaving', viewing)
+
+  // Only unlock this content if we own the lock and no other tabs are viewing
+  if (isLockOwner(form) && viewers.length === 0) {
+    if (navigator.sendBeacon) {
+      const data = new FormData()
+      data.append('unlock', true)
+      data.append('contentId', contentId)
+      data.append('_csrf', Cookies.get('bsp.csrf'))
+      navigator.sendBeacon(CONTEXT_PATH + 'contentLock', data)
+    } else {
+      // Fallback to a synchronous request so unlock is sent
+      fetch(CONTEXT_PATH + 'contentLock', {
+        method: 'POST',
+        headers: {
+          'Brightspot-CSRF': Cookies.get('bsp.csrf'),
+          'Content-Type': 'application/x-www-form-urlencoded',
+        },
+        body: 'unlock=' + true + '&contentId=' + contentId,
+      }).catch((error) => console.log(error))
+    }
+  }
+}
+
+function isLockOwner(form) {
+  return (
+    document.documentElement.getAttribute('data-user-id') ===
+    form.getAttribute('data-content-lock-owner')
+  )
+}
+
+onFind(
+  ':not(form)[data-rtc-content-id][data-content-locking="true"]',
+  (container) => {
+    if (pollContainers.length === 0) {
+      const table = container.closest('table')
+      if (table) {
+        table
+          .querySelectorAll(
+            ':not(form)[data-rtc-content-id][data-content-locking="true"]',
+          )
+          .forEach((container) => {
+            if (pollContainers.indexOf(container) === -1) {
+              pollContainers.push(container)
+            }
+          })
+      } else {
+        pollContainers.push(container)
+      }
+
+      let queryString =
+        '?' +
+        pollContainers
+          .map(
+            () => 'contentIds=' + container.getAttribute('data-rtc-content-id'),
+          )
+          .join('&')
+
+      poll(pollContainers, queryString)
+
+      const interval = setInterval(() => {
+        queryString = '?'
+        const contentIds = []
+        for (let i = pollContainers.length - 1; i >= 0; --i) {
+          const pollContainer = pollContainers[i]
+          if (!document.body.contains(pollContainer)) {
+            pollContainers.splice(i, 1)
+          } else {
+            const contentId = pollContainer.getAttribute('data-rtc-content-id')
+            if (contentIds.indexOf(contentId) === -1) {
+              contentIds.push(contentId)
+              queryString += 'contentIds=' + contentId + '&'
+            }
+          }
+        }
+
+        if (pollContainers.length !== 0 && contentIds.length !== 0) {
+          poll(pollContainers, queryString.substring(0, queryString.length - 1))
+        } else {
+          clearInterval(interval)
+        }
+      }, 5000)
+    } else if (pollContainers.indexOf(container) === -1) {
+      pollContainers.push(container)
+    }
+  },
+)
+
+function poll(containers, queryString) {
+  fetch(CONTEXT_PATH + 'contentLock' + queryString)
+    .then(function (response) {
+      if (!response.ok) {
+        throw Error(response.statusText)
+      }
+      return response.text()
+    })
+    .then(function (responseBody) {
+      try {
+        const json = JSON.parse(responseBody)
+        if (Array.isArray(containers)) {
+          updateContainers(containers, json)
+        } else if (containers.nodeName === 'FORM') {
+          updateForm(containers, json)
+        }
+      } catch (error) {
+        console.error(error)
+      }
+    })
+    .catch((error) => {
+      if (!Array.isArray(containers) && containers.nodeName === 'FORM') {
+        networkError(containers)
+      }
+      console.error(error)
+    })
+}
+
+function post(form, data) {
+  fetch(CONTEXT_PATH + 'contentLock', {
+    method: 'post',
+    headers: { 'Brightspot-CSRF': Cookies.get('bsp.csrf') },
+    body: data,
+  })
+    .then(function (response) {
+      return response.text()
+    })
+    .then(function (responseBody) {
+      try {
+        if (form) {
+          const json = JSON.parse(responseBody)
+          updateForm(form, json)
+        }
+      } catch (error) {
+        console.error(error)
+      }
+    })
+}
+
+function updateContainers(containers, data) {
+  containers.forEach((container) => {
+    const contentId = container.getAttribute('data-rtc-content-id')
+    const lockOwnerId = data.lockOwnerIds[contentId]
+    if (lockOwnerId) {
+      container.setAttribute('data-content-lock-owner', lockOwnerId)
+      updateViewers(container, lockOwnerId)
+    }
+  })
+}
+
+function updateForm(form, data) {
+  if (data.hardTimeout) {
+    // User has had lock past hard timeout, send them to homepage
+    form.setAttribute('data-content-lock-owner', null)
+    window.location.href = CONTEXT_PATH
+    return
+  }
+
+  const contentId = form.getAttribute('data-rtc-content-id')
+  const lockOwnerId = data.lockOwnerId
+  if (!lockOwnerId) return
+
+  if (networkTimeout) {
+    const timeoutDiv = form.querySelector('.ContentLockMessage-timeout')
+    if (timeoutDiv) {
+      timeoutDiv.remove()
+    }
+    networkTimeout = false
+  }
+
+  const userId = document.documentElement.getAttribute('data-user-id')
+  const lockedOut = lockOwnerId !== userId
+  const lockChange =
+    form.getAttribute('data-content-lock-owner') !== lockOwnerId
+  const unlockingDisabledChanged =
+    (form.getAttribute('data-unlocking-disabled') === 'true') !==
+    data.unlockingDisabled
+  const mainDiv = form.querySelector('.ContentEdit-main') || form
+  const widgetControlsDiv = document.querySelector('.Widget-controls')
+
+  form.classList.toggle('is-locked', lockedOut)
+  form.setAttribute('data-content-lock-owner', lockOwnerId)
+  form.setAttribute('data-unlocking-disabled', data.unlockingDisabled)
+
+  if (widgetControlsDiv) {
+    widgetControlsDiv.classList.toggle('is-locked', lockedOut)
+  }
+
+  if (lockChange) {
+    // The lock owner has changed
+    let evictionDiv = form.querySelector('.ContentLockMessage-eviction')
+
+    if (data.evictionMessage) {
+      // Lock was forcibly taken by another user
+      if (!evictionDiv) {
+        evictionDiv = create('div', {
+          className: 'ContentLockMessage-eviction message message-warning',
+        })
+        mainDiv.insertBefore(evictionDiv, mainDiv.firstChild)
+      }
+
+      evictionDiv.innerHTML = data.evictionMessage
+    } else if (evictionDiv) {
+      // Lock was not forcibly taken, so remove eviction message
+      evictionDiv.remove()
+    }
+  }
+
+  let statusDiv = form.querySelector('.ContentLockMessage-status')
+  if (lockedOut && (lockChange || unlockingDisabledChanged)) {
+    // User is currently locked out of the content
+    if (statusDiv) {
+      statusDiv.remove()
+    }
+    statusDiv = create('div', {
+      className: 'ContentLockMessage-status message message-warning',
+    })
+    mainDiv.insertBefore(statusDiv, mainDiv.firstChild)
+
+    statusDiv.innerHTML = data.statusMessage
+    const unlockLink = statusDiv.querySelector('.ContentLock-link')
+    if (unlockLink) {
+      unlockLink.onclick = () => {
+        const formData = new FormData()
+        formData.append('forceUnlock', true)
+        formData.append('contentId', contentId)
+        postOnConfirm(form, unlockLink, formData)
+      }
+    }
+
+    if (document.activeElement) {
+      document.activeElement.blur()
+    }
+  } else if (!lockedOut) {
+    // User currently has the lock
+
+    if (data.statusMessage) {
+      // User has disableUnlocking permissions, show them message
+      if (lockChange || unlockingDisabledChanged) {
+        if (statusDiv) {
+          statusDiv.remove()
+        }
+        statusDiv = create('div', {
+          className: 'ContentLockMessage-status message message-info',
+        })
+        mainDiv.insertBefore(statusDiv, mainDiv.firstChild)
+
+        statusDiv.innerHTML = data.statusMessage
+        const disableUnlockLink = statusDiv.querySelector('.ContentLock-link')
+        if (disableUnlockLink) {
+          disableUnlockLink.onclick = () => {
+            const formData = new FormData()
+            formData.append('disableUnlock', true)
+            formData.append('contentId', contentId)
+            postOnConfirm(form, disableUnlockLink, formData)
+          }
+        }
+      }
+    } else {
+      // User doesn't have disableUnlocking permissions, remove message
+      if (statusDiv) {
+        statusDiv.remove()
+      }
+    }
+
+    const evictionDiv = form.querySelector('.ContentLockMessage-eviction')
+    if (evictionDiv) {
+      evictionDiv.remove()
+    }
+  }
+
+  let inactivityDiv = form.querySelector('.ContentLockMessage-inactive')
+  if (data.inactivityMessage) {
+    if (lockedOut && !inactivityDiv) {
+      // Write link to take lock from inactive owner
+      inactivityDiv = create('div', {
+        className: 'ContentLockMessage-inactive message message-info',
+      })
+      mainDiv.insertBefore(inactivityDiv, mainDiv.firstChild)
+
+      inactivityDiv.innerHTML = data.inactivityMessage
+      const inactivityLink = inactivityDiv.querySelector('.ContentLock-link')
+      if (inactivityLink) {
+        inactivityLink.onclick = () => {
+          const formData = new FormData()
+          formData.append('inactiveUnlock', true)
+          formData.append('contentId', contentId)
+          postOnConfirm(form, inactivityLink, formData)
+        }
+      }
+    } else if (!lockedOut && !title) {
+      // Display warning title to inactive lock owner
+      title = document.title
+      document.title = data.inactivityMessage
+    }
+  } else {
+    if (inactivityDiv) {
+      // Remove link to unlock inactive user now that they're active
+      inactivityDiv.remove()
+    }
+
+    if (title) {
+      // Reset to original title, no longer inactive
+      document.title = title
+      title = null
+    }
+  }
+
+  if (lockChange) {
+    updateViewers(form, lockOwnerId)
+  }
+}
+
+function postOnConfirm(form, link, data) {
+  const message = link.getAttribute('data-confirm')
+  if (message && confirm(message)) {
+    post(form, data)
+  }
+}
+
+function updateViewers(container, lockOwnerId) {
+  // Add locked attribute to viewer icons
+  const viewers = container.querySelectorAll('.EditFieldUpdateViewers-viewer')
+  viewers.forEach((viewer) => {
+    viewer.toggleAttribute(
+      'data-locked',
+      viewer.getAttribute('data-user-id') === lockOwnerId,
+    )
+  })
+}
+
+function networkError(form) {
+  if (!isLockOwner(form) || networkTimeout) {
+    return
+  }
+
+  const timeoutInMinutes = form.getAttribute('data-lock-network-timeout')
+  const messageDiv = create('div', {
+    className: 'ContentLockMessage-timeout message message-error',
+  })
+  const message = create('span')
+  message.innerHTML =
+    'Disconnected from network. Trying to reconnect. The lock might be dropped in: '
+
+  const timer = create('span', {
+    class: 'ContentLockTimer',
+  })
+  timer.innerHTML =
+    (timeoutInMinutes < 10 ? '0' + timeoutInMinutes : timeoutInMinutes) + ':00'
+
+  messageDiv.appendChild(message)
+  messageDiv.appendChild(timer)
+
+  const mainDiv = form.querySelector('.ContentEdit-main') || form
+  mainDiv.insertBefore(messageDiv, mainDiv.firstChild)
+
+  networkTimeout = true
+  startTimer(timeoutInMinutes * 60 - 1, timer)
+}
+
+function startTimer(duration, span) {
+  let timer = duration
+  let minutes, seconds
+  const interval = setInterval(function () {
+    minutes = parseInt(timer / 60, 10)
+    seconds = parseInt(timer % 60, 10)
+
+    minutes = minutes < 10 ? '0' + minutes : minutes
+    seconds = seconds < 10 ? '0' + seconds : seconds
+
+    span.textContent = minutes + ':' + seconds
+
+    if (--timer < 0 || !networkTimeout) {
+      clearInterval(interval)
+    }
+  }, 1000)
+}
+
+onFind('.EditFieldUpdateViewers-viewer', (viewer) => {
+  // Ensure viewers have the locked icon
+  const lockOwner = viewer.closest('[data-content-lock-owner]')
+  if (lockOwner) {
+    viewer.toggleAttribute(
+      'data-locked',
+      viewer.getAttribute('data-user-id') ===
+        lockOwner.getAttribute('data-content-lock-owner'),
+    )
+  }
+})

package/src/legacy/tool-ui/src/main/webapp/v4/ContentReporting.js

@@ -0,0 +1,32 @@
+import onFind from './dom/onFind'
+
+// Moves the Run Report link to the top of the widget, next to the cog icon
+onFind('.ContentReportingWidget div.widgetControls', (controls) => {
+  const runLink = document.querySelector('a.ContentReporting-runLink')
+
+  if (runLink) {
+    controls.before(runLink)
+  }
+})
+
+// If the BE marks this widget as view-only, hides the cog icon and the action bar
+onFind('.ContentReportingWidget.is-viewOnly', (widget) => {
+  const controls = widget.querySelector('div.widgetControls')
+  const moreControls = widget.querySelector('div.widget-contentCreate')
+  const actionBar = widget.querySelector('div.ActionBar')
+
+  if (controls) {
+    controls.innerHTML = ''
+    controls.parentNode.removeChild(controls)
+  }
+
+  if (moreControls) {
+    moreControls.innerHTML = ''
+    moreControls.parentNode.removeChild(moreControls)
+  }
+
+  if (actionBar) {
+    actionBar.innerHTML = ''
+    actionBar.parentNode.removeChild(actionBar)
+  }
+})

package/src/legacy/tool-ui/src/main/webapp/v4/ContentReporting.less

@@ -0,0 +1,39 @@
+.ContentReporting-runLink {
+  position: absolute;
+  right: calc(var(--gap-l) * 3);
+  top: var(--gap-m);
+  z-index: 1000;
+}
+
+.Widget.ContentReporting-status {
+  display: flex;
+  flex-wrap: wrap;
+
+  > form {
+    padding-bottom: var(--gap-m);
+    padding-right: var(--gap-m);
+  }
+}
+
+.Widget-reports {
+  td.downloadLink a {
+    .IconButton;
+
+    --IconButton-name: 'file_download';
+  }
+
+  .LinkTable {
+    td {
+      padding: 0;
+      vertical-align: middle;
+
+      &.downloadLink {
+        text-align: center;
+      }
+    }
+
+    th.downloadData {
+      text-align: center;
+    }
+  }
+}