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

package/src/legacy/tool-ui/src/rtc/index.ts

@@ -0,0 +1,276 @@
+import { BroadcastChannel, createLeaderElection } from 'broadcast-channel'
+import { v4 as uuidv4 } from 'uuid'
+import Socket from './Socket'
+import { JSONValue } from '../Types'
+
+const isV5Enabled = window.BRIGHTSPOT?.ui?.cms?.enableV5UI === true
+const autoUpdatesEnabled =
+  window.BRIGHTSPOT?.ui?.cms?.enableAutomaticUpdates === true
+
+// Events that will be blocked when automatic updates are disabled in V5 UI.
+// All other events will continue to be processed normally.
+const BLOCKED_EVENTS = [
+  'com.psddev.cms.tool.page.content.PublishBroadcast',
+  'com.psddev.assign.AssignmentRtcBroadcast',
+  'com.psddev.cms.conversation.PostBroadcast',
+  'brightspot.liveblog.LiveBlogPostRtcBroadcast',
+]
+
+let rtc: {
+  initialize: (state: string, data: JSONValue, callback: () => void) => void
+  restore: (state: string, data: JSONValue, callback: () => void) => void
+  receive: (broadcast: string, callback: (data: JSONValue) => void) => void
+  receiveOnce: (broadcast: string, callback: () => void) => void
+  execute: (action: string, data: JSONValue) => void
+}
+
+if (window.DISABLE_RTC || !document.documentElement.dataset.userId) {
+  // Fake methods that do nothing when the RTC is disabled.
+  rtc = {
+    initialize: function () {},
+    restore: function () {},
+    receive: function () {},
+    receiveOnce: function () {},
+    execute: function () {},
+  }
+} else {
+  const BROADCAST = 'broadcast'
+  const CALLBACK = 'callback'
+  const CONNECT = 'connect'
+  const DISCONNECT = 'connect'
+  const EXECUTE = 'execute'
+  const RESTORE = 'restore'
+
+  // End restoring state by triggering callbacks.
+  const broadcastCallbacks: {
+    [key: string]: ((data: JSONValue) => void)[]
+  } = {}
+
+  const triggerBroadcastCallbacks = (broadcast: string, data: JSONValue) => {
+    if (
+      isV5Enabled &&
+      !autoUpdatesEnabled &&
+      BLOCKED_EVENTS.includes(broadcast)
+    ) {
+      // Skip this blocked event when automatic updates are disabled
+      return
+    }
+
+    for (const callback of broadcastCallbacks[broadcast] ?? []) {
+      callback(data)
+    }
+  }
+
+  const endRestore = (
+    restoreCallback: (
+      broadcasts?: [{ broadcast: string; data: JSONValue }],
+    ) => void,
+    broadcasts: [{ broadcast: string; data: JSONValue }],
+  ) => {
+    for (const { broadcast, data } of broadcasts ?? []) {
+      triggerBroadcastCallbacks(broadcast, data)
+    }
+
+    if (restoreCallback) {
+      restoreCallback(broadcasts)
+    }
+  }
+
+  // Start restoring state when not a leader.
+  const callbackIdPrefix = `${uuidv4()}-`
+  let callbackIdIndex = 0
+  const channel = new BroadcastChannel('brightspot-rtc')
+
+  const startRestore = (
+    message: { type: string; [key: string]: unknown },
+    callback: () => void,
+  ) => {
+    const newCallbackId = callbackIdPrefix + ++callbackIdIndex
+
+    // [OC] Set up to trigger callbacks when the state restore is done.
+    const listener = ({
+      type,
+      callbackId,
+      broadcasts,
+    }: {
+      type: string
+      callbackId: string
+      broadcasts: [{ broadcast: string; data: JSONValue }]
+    }) => {
+      if (type === CALLBACK && callbackId === newCallbackId) {
+        channel.removeEventListener('message', listener)
+        endRestore(callback, broadcasts)
+      }
+    }
+
+    channel.addEventListener('message', listener)
+
+    // Trigger a send on the leader at [LS].
+    channel.postMessage({ type: RESTORE, message, callbackId: newCallbackId })
+  }
+
+  // Receive messages from the leader.
+  const restores: {
+    type: string
+    message: { type: string; className: string; data: JSONValue }
+    callback: () => void
+  }[] = []
+  const broadcastOnceCallbacks: {
+    [key: string]: ((data: JSONValue) => void)[]
+  } = {}
+
+  channel.addEventListener(
+    'message',
+    ({
+      type,
+      broadcast,
+      data,
+    }: {
+      type: string
+      broadcast: string
+      data: JSONValue
+    }) => {
+      if (type === CONNECT) {
+        // [OR] When the leader connects, restore states.
+        for (const { message, callback } of restores) {
+          startRestore(message, callback)
+        }
+      } else if (type === BROADCAST) {
+        // [OB] Trigger broadcast callbacks.
+        triggerBroadcastCallbacks(broadcast, data)
+      }
+    },
+  )
+
+  // Make sure that there's only one connection to the server.
+  let socket: Socket
+
+  const restore = (
+    message: { type: string; className: string; data: JSONValue },
+    callback: (broadcasts?: [{ broadcast: string; data: JSONValue }]) => void,
+  ) => {
+    socket.send(message, (broadcasts?: any) => {
+      endRestore(callback, broadcasts)
+    })
+  }
+
+  createLeaderElection(channel)
+    .awaitLeadership()
+    .then(() => {
+      socket = new Socket(`${window.ROOT_PATH}/_rtc`)
+
+      // [LS] Send a message on behalf of other windows.
+      channel.addEventListener('message', ({ type, message, callbackId }) => {
+        if (type === DISCONNECT || type === EXECUTE) {
+          socket.send(message)
+        } else if (type === RESTORE) {
+          socket.send(message, (broadcasts) => {
+            // Trigger a callback on other windows at [OC].
+            channel.postMessage({ type: CALLBACK, callbackId, broadcasts })
+          })
+        }
+      })
+
+      socket.connect({
+        onConnect: () => {
+          // Restore states on the other windows at [OR].
+          channel.postMessage({ type: CONNECT })
+
+          // Restore states on the leader.
+          for (const { message, callback } of restores) {
+            restore(message, callback)
+          }
+        },
+        onReceive: ({
+          broadcast,
+          data,
+        }: {
+          broadcast?: string
+          data?: JSONValue
+        }) => {
+          if (broadcast && data) {
+            // Broadcast to the other windows at [OB].
+            channel.postMessage({ type: BROADCAST, broadcast, data })
+
+            // Trigger broadcast callbacks on the leader.
+            triggerBroadcastCallbacks(broadcast, data)
+
+            // Check if this event should be blocked when automatic updates are disabled in V5 UI
+            if (
+              !(
+                isV5Enabled &&
+                !autoUpdatesEnabled &&
+                BLOCKED_EVENTS.includes(broadcast)
+              )
+            ) {
+              for (const callback of broadcastOnceCallbacks[broadcast] ?? []) {
+                callback(data)
+              }
+            }
+          }
+        },
+      })
+    })
+
+  rtc = {
+    initialize: function (
+      state: string,
+      data: JSONValue,
+      callback: () => void,
+    ) {
+      rtc.restore(state, data, callback)
+
+      window.addEventListener('unload', () => {
+        const message = {
+          type: 'disconnect',
+          className: state,
+          data: data,
+        }
+
+        if (socket) {
+          socket.send(message, callback, true)
+        } else {
+          // Send the action to the leader at [LS].
+          channel.postMessage({ type: DISCONNECT, message })
+        }
+      })
+    },
+
+    restore: function (state: string, data: JSONValue, callback: () => void) {
+      const message = { type: 'restore', className: state, data }
+
+      restores.push({ type: RESTORE, message, callback })
+
+      if (socket) {
+        restore(message, callback)
+      } else {
+        startRestore(message, callback)
+      }
+    },
+
+    receive: function (broadcast: string, callback: (data: JSONValue) => void) {
+      if (callback) {
+        ;(broadcastCallbacks[broadcast] ??= []).push(callback)
+      }
+    },
+
+    receiveOnce: function (broadcast: string, callback: () => void) {
+      if (callback) {
+        ;(broadcastOnceCallbacks[broadcast] ??= []).push(callback)
+      }
+    },
+
+    execute: function (action: string, data: JSONValue) {
+      const message = { type: 'execute', className: action, data }
+
+      if (socket) {
+        socket.send(message)
+      } else {
+        // Send the action to the leader at [LS].
+        channel.postMessage({ type: EXECUTE, message })
+      }
+    },
+  }
+}
+
+export default rtc

package/src/legacy/tool-ui/src/table/README.md

@@ -0,0 +1,3 @@
+# Table Web Component
+
+This is a web component that wraps a table and handles checkbox events.

package/src/legacy/tool-ui/src/table/index.ts

@@ -0,0 +1,107 @@
+import { LitElement, nothing } from 'lit'
+import { customElement, queryAsync } from 'lit/decorators.js'
+import { EventEmitterMixin } from '../EventEmitterMixin'
+import { WrappingMixin } from '../WrappingMixin'
+
+@customElement('btu-table')
+export default class Table extends EventEmitterMixin(
+  WrappingMixin(LitElement),
+) {
+  @queryAsync('table') _table!: Promise<HTMLTableElement>
+
+  connectedCallback(): void {
+    super.connectedCallback()
+
+    this._table.then((table) => {
+      const checkAll = table.querySelector<HTMLInputElement>(
+        ':scope th > input[type="checkbox"]',
+      )
+
+      checkAll?.addEventListener('click', this._updateCheckAll)
+
+      table
+        .querySelectorAll<HTMLInputElement>(
+          ':scope > tbody input[type="checkbox"]',
+        )
+        .forEach((c) => {
+          c.addEventListener('click', this._updateSelectAll)
+        })
+    })
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback()
+
+    this._table.then((table) => {
+      const checkAll = table.querySelector<HTMLInputElement>(
+        ':scope th > input[type="checkbox"]',
+      )
+
+      checkAll?.removeEventListener('click', this._updateCheckAll)
+
+      table
+        .querySelectorAll<HTMLInputElement>(
+          ':scope > tbody input[type="checkbox"]',
+        )
+        .forEach((c) => {
+          c.removeEventListener('click', this._updateSelectAll)
+        })
+    })
+  }
+
+  createRenderRoot() {
+    return this
+  }
+
+  // When all checkboxes are checked, the check all checkbox should be checked.
+  private _updateSelectAll = (e: Event) => {
+    this._table.then((table) => {
+      const checkAll = table.querySelector<HTMLInputElement>(
+        ':scope th > input[type="checkbox"]',
+      )
+      const checkboxes = table.querySelectorAll<HTMLInputElement>(
+        ':scope > tbody input[type="checkbox"]',
+      )
+
+      const checkedItems = table.querySelectorAll<HTMLInputElement>(
+        ':scope > tbody input[type="checkbox"]:checked',
+      )
+
+      if (checkAll) {
+        checkAll.checked =
+          checkboxes.length > 0 && checkedItems.length === checkboxes.length
+
+        this.emit('btu-table-checked-all')
+      }
+    })
+  }
+
+  // When check all checkbox is checked, check every other checkboxes.
+  private _updateCheckAll = (e: Event) => {
+    this._table.then((table) => {
+      const checkAll = e.target
+
+      if (checkAll instanceof HTMLInputElement) {
+        table
+          .querySelectorAll<HTMLInputElement>(
+            ':scope > tbody input[type="checkbox"]',
+          )
+          .forEach((c) => {
+            c.checked = checkAll.checked
+          })
+
+        this.emit('btu-table-checked-all')
+      }
+    })
+  }
+
+  render() {
+    return nothing
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'btu-table': Table
+  }
+}

package/src/legacy/tool-ui/src/theme/ColorRotator.ts

@@ -0,0 +1,32 @@
+import cc from 'color-convert'
+import getTheme from './index'
+
+const theme = getTheme()
+const colors = [
+  { v4: 'red', v5: 'darkorchid' },
+  { v4: 'orange', v5: 'green' },
+  { v4: 'yellow', v5: 'firebrick' },
+  { v4: 'green', v5: 'blue' },
+  { v4: 'blue', v5: 'purple' },
+  { v4: 'purple', v5: 'brown' },
+] as const
+
+export default class ColorRotator {
+  _index = 0
+
+  getNext() {
+    /* In v5 ui, the theme colors aren't present in the DOM as CSS variables, so we
+     * have to use hex values directly */
+    const colorEntry = colors[this._index % colors.length]
+    const color = window.BRIGHTSPOT?.ui.cms.enableV5UI
+      ? cc.keyword.hex(colorEntry.v5)
+      : theme.getColor(colorEntry.v4, 5)
+
+    const [h, s, l] = cc.hex.hsl(color)
+    return `#${cc.hsl.hex([
+      h + Math.floor(this._index++ / colors.length) * 20,
+      s,
+      l,
+    ])}`
+  }
+}