From f5c56265e97344562d818baff344dcd7f934fca2 Mon Sep 17 00:00:00 2001 From: Andrii V Date: Fri, 14 Nov 2025 15:00:27 +0100 Subject: [PATCH] Migrated rhodecode-app base component --- .../components/rhodecode-app/rhodecode-app.js | 388 +++++++++--------- 1 file changed, 197 insertions(+), 191 deletions(-) diff --git a/rhodecode/public/js/src/components/rhodecode-app/rhodecode-app.js b/rhodecode/public/js/src/components/rhodecode-app/rhodecode-app.js index 1a9878e6..27f9b53d 100644 --- a/rhodecode/public/js/src/components/rhodecode-app/rhodecode-app.js +++ b/rhodecode/public/js/src/components/rhodecode-app/rhodecode-app.js @@ -1,211 +1,217 @@ -import {PolymerElement, html} from '@polymer/polymer/polymer-element.js'; -import '../channelstream-connection/channelstream-connection.js'; -import '../rhodecode-toast/rhodecode-toast.js'; -import '../rhodecode-favicon/rhodecode-favicon.js'; +import { html, LitElement, css } from "lit"; -var ccLog = Logger.get('RhodeCodeApp'); +import "../channelstream-connection/channelstream-connection.js"; +import "../rhodecode-toast/rhodecode-toast.js"; +import "../rhodecode-favicon/rhodecode-favicon.js"; + +var ccLog = Logger.get("RhodeCodeApp"); ccLog.setLevel(Logger.OFF); -export class RhodecodeApp extends PolymerElement { +export class RhodecodeApp extends LitElement { + static get is() { + return "rhodecode-app"; + } - static get is() { - return 'rhodecode-app'; + render() { + return html` + + + + `; + } + + connectedCallback() { + super.connectedCallback(); + ccLog.debug("rhodeCodeApp created"); + $.Topic("/notifications").subscribe(this.handleNotifications.bind(this)); + $.Topic("/comment").subscribe(this.handleComment.bind(this)); + $.Topic("/favicon/update").subscribe(this.faviconUpdate.bind(this)); + $.Topic("/connection_controller/subscribe").subscribe( + this.subscribeToChannelTopic.bind(this), + ); + + // this event can be used to coordinate plugins to do their + // initialization before channelstream is kicked off + $.Topic("/__MAIN_APP__").publish({}); + + for (var i = 0; i < alertMessagePayloads.length; i++) { + $.Topic("/notifications").publish(alertMessagePayloads[i]); } + this.initPlugins(); + // after rest of application loads and topics get fired, launch connection + $(document).ready( + function () { + this.kickoffChannelstreamPlugin(); + }.bind(this), + ); + } - static get template(){ - return html` - - - - ` - } - - connectedCallback() { - super.connectedCallback(); - ccLog.debug('rhodeCodeApp created'); - $.Topic('/notifications').subscribe(this.handleNotifications.bind(this)); - $.Topic('/comment').subscribe(this.handleComment.bind(this)); - $.Topic('/favicon/update').subscribe(this.faviconUpdate.bind(this)); - $.Topic('/connection_controller/subscribe').subscribe( - this.subscribeToChannelTopic.bind(this) - ); - - // this event can be used to coordinate plugins to do their - // initialization before channelstream is kicked off - $.Topic('/__MAIN_APP__').publish({}); - - for (var i = 0; i < alertMessagePayloads.length; i++) { - $.Topic('/notifications').publish(alertMessagePayloads[i]); + initPlugins() { + for (var i = 0; i < window.APPLICATION_PLUGINS.length; i++) { + var pluginDef = window.APPLICATION_PLUGINS[i]; + if (pluginDef.component) { + var pluginElem = document.createElement(pluginDef.component); + this.shadowRoot.appendChild(pluginElem); + if (typeof pluginElem.init !== "undefined") { + pluginElem.init(); } - this.initPlugins(); - // after rest of application loads and topics get fired, launch connection - $(document).ready(function () { - this.kickoffChannelstreamPlugin(); - }.bind(this)); + } + } + } + + /** proxy to channelstream connection */ + getChannelStreamConnection() { + return this.renderRoot.querySelector("#channelstream-connection"); + } + + handleNotifications(data) { + var elem = document.getElementById("notifications"); + if (elem) { + elem.handleNotification(data); + } + } + + handleComment(data) { + if (data.message.comment_data.length !== 0) { + if (window.refreshAllComments !== undefined) { + refreshAllComments(); + } + var json_data = data.message.comment_data; + + if (window.commentsController !== undefined) { + window.commentsController.attachComment(json_data); + } + } + } + + faviconUpdate(data) { + this.shadowRoot.querySelector("rhodecode-favicon").counter = data.count; + } + + /** opens connection to ws server */ + kickoffChannelstreamPlugin(data) { + ccLog.debug("kickoffChannelstreamPlugin"); + var channels = ["broadcast"]; + var addChannels = this.checkViewChannels(); + for (var i = 0; i < addChannels.length; i++) { + channels.push(addChannels[i]); + } + if (window.CHANNELSTREAM_SETTINGS && CHANNELSTREAM_SETTINGS.enabled) { + var channelstreamConnection = this.getChannelStreamConnection(); + channelstreamConnection.connectUrl = CHANNELSTREAM_URLS.connect; + channelstreamConnection.subscribeUrl = CHANNELSTREAM_URLS.subscribe; + channelstreamConnection.websocketUrl = CHANNELSTREAM_URLS.ws + "/ws"; + channelstreamConnection.longPollUrl = + CHANNELSTREAM_URLS.longpoll + "/listen"; + // some channels might already be registered by topic + for (var i = 0; i < channels.length; i++) { + channelstreamConnection.push("channels", channels[i]); + } + // append any additional channels registered in other plugins + $.Topic("/connection_controller/subscribe").processPrepared(); + + channelstreamConnection.connect(); + } + } + + checkViewChannels() { + // subscribe to different channels data is sent. + + var channels = []; + // subscribe to PR repo channel for PR's' + if (templateContext.pull_request_data.pull_request_id) { + var channelName = + "/repo$" + + templateContext.repo_name + + "$/pr/" + + String(templateContext.pull_request_data.pull_request_id); + channels.push(channelName); } - initPlugins() { - for (var i = 0; i < window.APPLICATION_PLUGINS.length; i++) { - var pluginDef = window.APPLICATION_PLUGINS[i]; - if (pluginDef.component) { - var pluginElem = document.createElement(pluginDef.component); - this.shadowRoot.appendChild(pluginElem); - if (typeof pluginElem.init !== 'undefined') { - pluginElem.init(); - } - } + if (templateContext.commit_data.commit_id) { + var channelName = + "/repo$" + + templateContext.repo_name + + "$/commit/" + + String(templateContext.commit_data.commit_id); + channels.push(channelName); + } + + return channels; + } + + /** subscribes users from channels in channelstream */ + subscribeToChannelTopic(channels) { + var channelstreamConnection = this.getChannelStreamConnection(); + var toSubscribe = channelstreamConnection.calculateSubscribe(channels); + ccLog.debug("subscribeToChannelTopic", toSubscribe); + if (toSubscribe.length > 0) { + // if we are connected then subscribe + if (channelstreamConnection.connected) { + channelstreamConnection.subscribe(toSubscribe); + } + // not connected? just push channels onto the stack + else { + for (var i = 0; i < toSubscribe.length; i++) { + channelstreamConnection.push("channels", toSubscribe[i]); } + } } + } - /** proxy to channelstream connection */ - getChannelStreamConnection() { - return this.$['channelstream-connection']; + /** publish received messages into correct topic */ + receivedMessage(event) { + for (var i = 0; i < event.detail.length; i++) { + var message = event.detail[i]; + if (message.message.topic) { + ccLog.debug("publishing", message.message.topic); + $.Topic(message.message.topic).publish(message); + } else if (message.type === "presence") { + $.Topic("/connection_controller/presence").publish(message); + } else { + ccLog.warn("unhandled message", message); + } } + } - handleNotifications(data) { - var elem = document.getElementById('notifications'); - if (elem) { - elem.handleNotification(data); - } + handleConnected(event) { + var channelstreamConnection = this.getChannelStreamConnection(); + channelstreamConnection.set("channelsState", event.detail.channels_info); + channelstreamConnection.set("userState", event.detail.state); + channelstreamConnection.set("channels", event.detail.channels); + this.propagageChannelsState(); + } + + handleSubscribed(event) { + var channelstreamConnection = this.getChannelStreamConnection(); + var channelInfo = event.detail.channels_info; + var channelKeys = Object.keys(event.detail.channels_info); + for (var i = 0; i < channelKeys.length; i++) { + var key = channelKeys[i]; + channelstreamConnection.set(["channelsState", key], channelInfo[key]); } + channelstreamConnection.set("channels", event.detail.channels); + this.propagageChannelsState(); + } - handleComment(data) { - - if (data.message.comment_data.length !== 0) { - if (window.refreshAllComments !== undefined) { - refreshAllComments() - } - var json_data = data.message.comment_data; - - if (window.commentsController !== undefined) { - - window.commentsController.attachComment(json_data) - } - } + /** propagates channel states on topics */ + propagageChannelsState(event) { + var channelstreamConnection = this.getChannelStreamConnection(); + var channel_data = channelstreamConnection.channelsState; + var channels = channelstreamConnection.channels; + for (var i = 0; i < channels.length; i++) { + var key = channels[i]; + $.Topic("/connection_controller/channel_update").publish({ + channel: key, + state: channel_data[key], + }); } - - faviconUpdate(data) { - this.shadowRoot.querySelector('rhodecode-favicon').counter = data.count; - } - - /** opens connection to ws server */ - kickoffChannelstreamPlugin(data) { - ccLog.debug('kickoffChannelstreamPlugin'); - var channels = ['broadcast']; - var addChannels = this.checkViewChannels(); - for (var i = 0; i < addChannels.length; i++) { - channels.push(addChannels[i]); - } - if (window.CHANNELSTREAM_SETTINGS && CHANNELSTREAM_SETTINGS.enabled) { - var channelstreamConnection = this.getChannelStreamConnection(); - channelstreamConnection.connectUrl = CHANNELSTREAM_URLS.connect; - channelstreamConnection.subscribeUrl = CHANNELSTREAM_URLS.subscribe; - channelstreamConnection.websocketUrl = CHANNELSTREAM_URLS.ws + '/ws'; - channelstreamConnection.longPollUrl = CHANNELSTREAM_URLS.longpoll + '/listen'; - // some channels might already be registered by topic - for (var i = 0; i < channels.length; i++) { - channelstreamConnection.push('channels', channels[i]); - } - // append any additional channels registered in other plugins - $.Topic('/connection_controller/subscribe').processPrepared(); - - channelstreamConnection.connect(); - } - } - - checkViewChannels() { - // subscribe to different channels data is sent. - - var channels = []; - // subscribe to PR repo channel for PR's' - if (templateContext.pull_request_data.pull_request_id) { - var channelName = '/repo$' + templateContext.repo_name + '$/pr/' + - String(templateContext.pull_request_data.pull_request_id); - channels.push(channelName); - } - - if (templateContext.commit_data.commit_id) { - var channelName = '/repo$' + templateContext.repo_name + '$/commit/' + - String(templateContext.commit_data.commit_id); - channels.push(channelName); - } - - return channels; - } - - /** subscribes users from channels in channelstream */ - subscribeToChannelTopic(channels) { - var channelstreamConnection = this.getChannelStreamConnection(); - var toSubscribe = channelstreamConnection.calculateSubscribe(channels); - ccLog.debug('subscribeToChannelTopic', toSubscribe); - if (toSubscribe.length > 0) { - // if we are connected then subscribe - if (channelstreamConnection.connected) { - channelstreamConnection.subscribe(toSubscribe); - } - // not connected? just push channels onto the stack - else { - for (var i = 0; i < toSubscribe.length; i++) { - channelstreamConnection.push('channels', toSubscribe[i]); - } - } - } - } - - /** publish received messages into correct topic */ - receivedMessage(event) { - for (var i = 0; i < event.detail.length; i++) { - var message = event.detail[i]; - if (message.message.topic) { - ccLog.debug('publishing', message.message.topic); - $.Topic(message.message.topic).publish(message); - } - else if (message.type === 'presence') { - $.Topic('/connection_controller/presence').publish(message); - } - else { - ccLog.warn('unhandled message', message); - } - } - } - - handleConnected(event) { - var channelstreamConnection = this.getChannelStreamConnection(); - channelstreamConnection.set('channelsState', event.detail.channels_info); - channelstreamConnection.set('userState', event.detail.state); - channelstreamConnection.set('channels', event.detail.channels); - this.propagageChannelsState(); - } - - handleSubscribed(event) { - var channelstreamConnection = this.getChannelStreamConnection(); - var channelInfo = event.detail.channels_info; - var channelKeys = Object.keys(event.detail.channels_info); - for (var i = 0; i < channelKeys.length; i++) { - var key = channelKeys[i]; - channelstreamConnection.set(['channelsState', key], channelInfo[key]); - } - channelstreamConnection.set('channels', event.detail.channels); - this.propagageChannelsState(); - } - - /** propagates channel states on topics */ - propagageChannelsState(event) { - var channelstreamConnection = this.getChannelStreamConnection(); - var channel_data = channelstreamConnection.channelsState; - var channels = channelstreamConnection.channels; - for (var i = 0; i < channels.length; i++) { - var key = channels[i]; - $.Topic('/connection_controller/channel_update').publish( - {channel: key, state: channel_data[key]} - ); - } - } - + } } customElements.define(RhodecodeApp.is, RhodecodeApp);