@brightspot/ui 3.0.1 → 5.0.1

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

@@ -0,0 +1,280 @@
+.Revisions-listItem {
+  border-top: 1px solid var(--color-gray3);
+  margin-left: calc(var(--Widget-padding) * -1);
+  margin-right: calc(var(--Widget-padding) * -1);
+  padding: var(--gap-m) var(--Widget-padding) var(--gap-m) var(--Widget-padding);
+
+  &:first-child {
+    margin-top: var(--gap-m);
+  }
+
+  &.is-active {
+    background-color: var(--color-blue1);
+    border-left: solid var(--gap-m) var(--color-blue5);
+    padding-left: calc(var(--Widget-padding) - var(--gap-m));
+  }
+
+  &.is-log {
+    > .Revisions-listItemInfo {
+      color: var(--color-gray6);
+      display: block;
+    }
+  }
+
+  &-children {
+    display: none;
+
+    .Revisions-listItemInfo {
+      margin-left: calc(var(--gap-xs) + var(--Icon-size));
+    }
+  }
+
+  &-collapseButton {
+    cursor: pointer;
+    float: left;
+    margin-right: var(--gap-xs) !important;
+
+    &::before {
+      content: 'keyboard_arrow_down';
+      float: right;
+      transition: transform var(--time-xs);
+      .Icon;
+    }
+
+    &.is-active::before {
+      float: right;
+      transform: rotate(180deg);
+      transition: transform var(--time-xs);
+      .Icon;
+    }
+
+    &:hover::before {
+      background-color: var(--color-iconHoverBackground);
+      border-radius: var(--gap-m);
+    }
+  }
+}
+
+.Revisions-compare {
+  font-size: 0;
+
+  &::before {
+    &:extend(.Icon);
+
+    content: 'compare_arrows';
+  }
+}
+
+.Revisions-more {
+  .IconButton;
+
+  --IconButton-name: 'more_horiz';
+
+  &.is-active {
+    .IconButton.is-focus;
+
+    --IconButton-name: 'close';
+  }
+}
+
+.Revisions-filters {
+  background-color: var(--color-gray3);
+  margin-left: calc(var(--Widget-padding) * -1);
+  margin-right: calc(var(--Widget-padding) * -1);
+  margin-top: calc(var(--Widget-padding) * -1);
+  min-height: calc(var(--gap-l) * 2);
+  padding: 0 var(--Widget-padding);
+}
+
+.Revisions-filters,
+.Revisions-filter {
+  align-items: center;
+  display: flex;
+  justify-content: space-between;
+}
+
+.Revisions-filter {
+  width: 100%;
+}
+
+.Revisions-filters ~ .Revisions-list {
+  .Revisions-listItem:first-child {
+    margin-top: 0;
+  }
+}
+
+.Revisions-links {
+  border-bottom: solid 1px var(--color-gray2);
+  font-size: var(--fontSize-s);
+}
+
+.Revisions-links > .Revisions-listItem {
+  margin-top: 0;
+}
+
+.Revisions-links > .Revisions-listItem > a {
+  text-decoration: none;
+}
+
+.Revisions-label {
+  font-size: var(--fontSize-s);
+}
+
+.Revisions-toggle {
+  .Checkbox;
+  .Checkbox.is-toggle;
+
+  text-decoration: none;
+
+  &:hover {
+    text-decoration: none;
+
+    &::before {
+      opacity: 0.16;
+    }
+  }
+
+  &.is-active {
+    text-decoration: none;
+
+    &::after {
+      color: var(--Link-hoverColor);
+      content: 'toggle_on';
+    }
+
+    &:hover::before {
+      background: var(--Link-hoverColor);
+    }
+  }
+}
+
+.Revisions-pagination {
+  border-top: 1px solid var(--color-gray3);
+  font-size: var(--fontSize-s);
+  margin: 0 calc(var(--Widget-padding) * -1);
+  padding: 0 var(--Widget-padding);
+
+  .pagination {
+    justify-content: space-between;
+    width: 100%;
+  }
+}
+
+.Revisions-new {
+  &::before {
+    .Icon;
+
+    content: 'add';
+    line-height: inherit;
+    margin-right: var(--gap-xs);
+  }
+}
+
+.Revisions-listItemInfo {
+  display: flex;
+  flex-direction: row;
+  font-size: var(--fontSize-s);
+  justify-content: space-between;
+  line-height: var(--lineHeight-s);
+}
+
+.Revisions-listItemLineOne {
+  margin-bottom: var(--gap-xs);
+}
+
+.Revisions-listItemLineTwo {
+  font-size: var(--fontSize-s);
+  margin-bottom: var(--gap-xs);
+}
+
+.Revisions-listItemLineThree,
+.Revisions-listItemLineFour {
+  align-items: center;
+  display: inline-block;
+  font-size: var(--fontSize-s);
+  word-break: break-all;
+}
+
+.Revisions-userLabel {
+  word-break: break-all;
+
+  > .Revisions-userLabelIcon::before {
+    content: '\22C5';
+    margin: 0 var(--gap-xs);
+  }
+}
+
+.Revisions-statusLabel {
+  word-break: break-word;
+
+  &::before {
+    border-radius: 100%;
+    content: '';
+    display: inline-block;
+    height: var(--gap-m);
+    line-height: normal;
+    margin-right: var(--gap-s);
+    vertical-align: middle;
+    width: var(--gap-m);
+
+    .Revisions-listItem.is-archived & {
+      background-color: var(--color-red6);
+    }
+
+    .Revisions-listItem.is-updated & {
+      background-color: var(--color-green3);
+    }
+
+    .Revisions-listItem.is-draft &,
+    .Revisions-listItem.is-scheduled & {
+      background-color: var(--color-yellow3);
+    }
+
+    .Revisions-listItem.is-live & {
+      background-color: var(--color-green5);
+    }
+
+    .Revisions-listItem.is-workflow & {
+      background-color: var(--workflow-color);
+    }
+  }
+}
+
+.Revisions-info {
+  color: var(--color-gray6);
+  flex-grow: 2;
+
+  .Revisions-listItemLineOne {
+    color: var(--Link-color);
+  }
+
+  &:hover {
+    color: var(--color-gray6);
+
+    .Revisions-listItemLineOne {
+      color: var(--Link-hoverColor);
+    }
+  }
+}
+
+.Revisions-workflowTransition {
+  align-items: center;
+  display: flex;
+}
+
+.Revisions-workflowComment {
+  font-style: italic;
+}
+
+.Revisions-workflowState {
+  align-items: center;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+}
+
+.Revisions-workflowStateIcon > span::before {
+  .Icon;
+
+  content: 'trending_flat';
+}

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

@@ -0,0 +1,13 @@
+.SavedSearchWidget {
+  .SearchResult-pagination {
+    margin-top: 55px;
+  }
+
+  .objectId-edit {
+    display: none;
+  }
+
+  .ComboInput {
+    max-width: 100% !important;
+  }
+}

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

@@ -0,0 +1,6 @@
+.SemRushDashboardWidget {
+  .pagination {
+    float: right;
+    padding: var(--gap-m);
+  }
+}

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

@@ -0,0 +1,13 @@
+.SlackAuthContainer {
+  .ComboInput {
+    margin: var(--gap-s) 0;
+    max-width: 50%;
+  }
+
+  .signInButton {
+    border-bottom: 0;
+    margin-left: var(--gap-s);
+    vertical-align: bottom;
+    width: auto;
+  }
+}

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

@@ -0,0 +1,39 @@
+.p-workStreams-working,
+.p-workStreams-notWorking {
+  display: flex;
+  flex-wrap: wrap;
+  padding-left: calc(var(--gap-xl) + var(--gap-m));
+  position: relative;
+
+  &:not(:last-child) {
+    border-bottom: 1px solid var(--color-gray3);
+    margin-bottom: var(--gap-m);
+    padding-bottom: var(--gap-m);
+  }
+
+  .RPB {
+    left: 0;
+    position: absolute;
+    top: calc(
+      (var(--lineHeight-m) + var(--lineHeight-s) - var(--RPB-size)) / 2
+    );
+  }
+
+  .progress {
+    .Text.is-s;
+
+    color: var(--color-gray5);
+    width: 100%;
+  }
+
+  .progressBar {
+    display: none;
+  }
+}
+
+.p-workStreams-continue,
+.p-workStreams-start,
+.p-workStreams-stop {
+  margin: var(--gap-m) var(--gap-s) 0 0;
+  order: 1;
+}

package/src/legacy/tool-ui/src/platform.ts

@@ -0,0 +1,25 @@
+const hasNavigator = typeof navigator !== 'undefined'
+
+/**
+ * Detects if the current platform is macOS.
+ * Uses the modern `userAgentData` API with a fallback to the deprecated `navigator.platform`.
+ */
+export const isMac: boolean = hasNavigator
+  ? /Mac/.test(navigator.platform) ||
+    /macOS/.test((navigator as any).userAgentData?.platform)
+  : false
+
+/**
+ * The keyboard shortcut label for focus region navigation.
+ * macOS: Alt+Tab (does not conflict with OS shortcuts)
+ * Windows/Linux: F6 (standard pane-navigation convention; Alt+Tab is intercepted by the OS)
+ */
+export const REGION_SHORTCUT_LABEL = isMac ? 'Alt+Tab' : 'F6'
+
+/**
+ * Replaces occurrences of "Alt+Tab" in a localized string with the
+ * platform-appropriate shortcut label.
+ */
+export function localizeShortcut(text: string): string {
+  return text.replace(/Alt\+Tab/g, REGION_SHORTCUT_LABEL)
+}

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

@@ -0,0 +1,205 @@
+import { JSONObject } from '../Types'
+import throttle from '../util/throttle'
+
+// For server/client communication.
+export default class Socket {
+  private _url: string
+  private _requests: {
+    message: { type: string; [key: string]: unknown }
+    callback?: (data?: unknown) => void
+    wait?: boolean
+  }[]
+  private _sending = false
+  private _sessionId?: string
+  private _onConnect: () => void = () => {}
+  private _onReceive: (data: JSONObject) => void | (() => void) = () => {}
+  private _ensureConnectionInterval?: number
+  private _receiver?: EventSource
+  private _lastMessageReceived = Date.now()
+  private _messageInterval?: number
+  private _pingInterval?: number
+
+  constructor(url: string) {
+    this._url = url
+    this._ensureConnection = throttle(5000, this._ensureConnection.bind(this))
+    this._requests = []
+  }
+
+  // Sends a message to the server.
+  send(
+    message: { type: string; [key: string]: unknown },
+    callback?: (data?: unknown) => void,
+    wait?: boolean,
+  ) {
+    if (message) {
+      this._requests.push({ message, callback, wait })
+
+      if (!this._sending) {
+        this._sending = true
+        this._processRequests()
+      }
+    }
+  }
+
+  async _processRequests() {
+    // Session not available yet so try again in a bit.
+    if (!this._sessionId) {
+      setTimeout(() => this._processRequests(), 100)
+      return
+    }
+
+    // All done sending for now.
+    if (this._requests.length <= 0) {
+      this._sending = false
+      return
+    }
+
+    const request = this._requests.shift()
+
+    if (!request) {
+      return
+    }
+
+    const { message, callback, wait } = request
+
+    // Query string only used for logging.
+    const body = new URLSearchParams()
+
+    body.append('sessionId', this._sessionId)
+    body.append('message', JSON.stringify(message))
+
+    const type = message.type
+
+    fetch(`${this._url}${type ? `?${encodeURIComponent(type)}` : ''}`, {
+      method: 'post',
+      cache: 'no-store',
+      body,
+      credentials: 'include',
+    })
+      .then((response) => {
+        if (!response.ok) {
+          throw ''
+        }
+        return response.text()
+      })
+      .then((text) => {
+        if (callback) {
+          callback(text ? JSON.parse(text) : null)
+        }
+      })
+      .catch(() => {
+        this._requests.unshift(request)
+        this.reconnect()
+      })
+      .finally(() => {
+        this._processRequests()
+      })
+
+    if (wait) {
+      const start = +Date.now()
+      while (Date.now() - start < 500) {}
+    }
+  }
+
+  // Connects to the server for receiving messages.
+  connect(options: {
+    onConnect: () => void
+    onReceive: (data: JSONObject) => void
+  }) {
+    this._onConnect = options.onConnect || (() => {})
+    this._onReceive = options.onReceive || (() => {})
+
+    if (!this._ensureConnectionInterval) {
+      this._ensureConnectionInterval = setInterval(this._ensureConnection, 100)
+      this._ensureConnection()
+    }
+  }
+
+  private _ensureConnection() {
+    if (this._receiver) {
+      const state = this._receiver.readyState
+
+      if (state === EventSource.CONNECTING) {
+        return
+      } else if (state === EventSource.OPEN && this._sessionId) {
+        return
+      }
+    }
+
+    this._reset()
+
+    // Connect...
+    this._receiver = new EventSource(this._url)
+
+    this._receiver.onmessage = (event) => {
+      this._lastMessageReceived = Date.now()
+      const data: JSONObject = JSON.parse(event.data)
+
+      // First message along with the session ID.
+      if (data._first) {
+        if (typeof data.sessionId === 'string') {
+          this._sessionId = data.sessionId
+        }
+
+        if (this._receiver) {
+          this._receiver.onerror = () => this.reconnect()
+        }
+
+        // There should be a message from the server at least
+        // every 5 seconds, so if not, reconnect.
+        this._messageInterval = setInterval(() => {
+          if (Date.now() > this._lastMessageReceived + 6000) {
+            this.reconnect()
+          }
+        }, 1000)
+
+        // Ping roughly every minute to prevent the server from
+        // forcibly disconnecting the session.
+        this._pingInterval = setInterval(
+          () => this.send({ type: 'ping' }),
+          55000,
+        )
+      } else if (!data._ping) {
+        // Broadcast regular message.
+        this._onReceive(data)
+      }
+    }
+
+    this._onConnect()
+  }
+
+  // Disconnects from the server.
+  disconnect() {
+    if (this._ensureConnectionInterval) {
+      clearInterval(this._ensureConnectionInterval)
+      this._ensureConnectionInterval = undefined
+    }
+
+    this._reset()
+  }
+
+  _reset() {
+    this._sessionId = undefined
+
+    if (this._receiver) {
+      this._receiver.close()
+      this._receiver = undefined
+    }
+
+    if (this._messageInterval) {
+      clearInterval(this._messageInterval)
+      this._messageInterval = undefined
+    }
+
+    if (this._pingInterval) {
+      clearInterval(this._pingInterval)
+      this._pingInterval = undefined
+    }
+  }
+
+  // Reconnects to the server.
+  reconnect() {
+    this._reset()
+    this._ensureConnection()
+  }
+}