Allow the user to choose one of multiple pubsub services

Author: jcbrand

src/headless/index.js

@@ -30,7 +30,7 @@ import './plugins/bosh/index.js'; // XEP-0206 BOSH
 import './plugins/caps/index.js'; // XEP-0115 Entity Capabilities
 export { ChatBox, Message, Messages } from './plugins/chat/index.js'; // RFC-6121 Instant messaging
 import './plugins/chatboxes/index.js';
-import './plugins/disco/index.js'; // XEP-0030 Service discovery
+export { DiscoEntity, DiscoEntities } from './plugins/disco/index.js'; // XEP-0030 Service discovery
 import './plugins/adhoc/index.js'; // XEP-0050 Ad Hoc Commands
 import './plugins/headlines/index.js'; // Support for headline messages
 export { Device, Devices, DeviceList, DeviceLists } from './plugins/omemo/index.js'; // Support for headline messages

src/headless/plugins/disco/index.js

@@ -19,6 +19,8 @@ import {
 
 const { Strophe } = converse.env;
 
+export { DiscoEntity, DiscoEntities };
+
 /**
  * @typedef {Object} DiscoState
  * @property {Array} _identities

src/headless/types/index.d.ts

@@ -21,6 +21,7 @@ export { Collection, EventEmitter, Model } from "@converse/skeletor";
 export { Builder, Stanza } from "strophe.js";
 export { Bookmark, Bookmarks } from "./plugins/bookmarks/index.js";
 export { ChatBox, Message, Messages } from "./plugins/chat/index.js";
+export { DiscoEntity, DiscoEntities } from "./plugins/disco/index.js";
 export { Device, Devices, DeviceList, DeviceLists } from "./plugins/omemo/index.js";
 export { MUCMessage, MUCMessages, MUC, MUCOccupant, MUCOccupants } from "./plugins/muc/index.js";
 export { RosterContact, RosterContacts, RosterFilter, Presence, Presences } from "./plugins/roster/index.js";

src/headless/types/plugins/disco/index.d.ts

@@ -2,4 +2,7 @@ export type DiscoState = {
     _identities: any[];
     _features: any[];
 };
+import DiscoEntity from './entity.js';
+import DiscoEntities from './entities.js';
+export { DiscoEntity, DiscoEntities };
 //# sourceMappingURL=index.d.ts.map

src/headless/types/plugins/pubsub/api.d.ts

@@ -34,6 +34,14 @@ declare namespace _default {
          * @returns {Promise<void|Element>}
          */
         function publish(jid: string, node: string, item: import("strophe.js").Builder | import("strophe.js").Stanza | (import("strophe.js").Builder | import("strophe.js").Stanza)[], options: import("./types").PubSubConfigOptions, strict_options?: boolean): Promise<void | Element>;
+        /**
+         * Creates a PubSub node at a given service
+         * @param {string} jid - The PubSub service JID
+         * @param {string} node - The node to create
+         * @param {PubSubConfigOptions} [config] The configuration options
+         * @returns {Promise<void>}
+         */
+        function create(jid: string, node: string, config?: import("./types").PubSubConfigOptions): Promise<void>;
         /**
          * Subscribes the local user to a PubSub node.
          *

src/headless/types/shared/_converse.d.ts

@@ -79,7 +79,7 @@ export class ConversePrivateGlobal extends ConversePrivateGlobal_base {
      */
     state: any;
     initSession(): void;
-    session: Model;
+    session: any;
     /**
      * Translate the given string based on the current locale.
      * @method __

src/headless/types/shared/connection/index.d.ts

@@ -5,7 +5,11 @@ declare const Connection_base: typeof import("strophe.js/src/types/connection").
  * via BOSH or websocket inside a shared worker).
  */
 export class Connection extends Connection_base {
-    constructor(service: any, options: any);
+    /**
+     * @param {string} service - The BOSH or WebSocket service URL.
+     * @param {import('strophe.js/src/types/connection').ConnectionOptions} options
+     */
+    constructor(service: string, options: import("strophe.js/src/types/connection").ConnectionOptions);
     send_initial_presence: boolean;
     debouncedReconnect: import("lodash").DebouncedFunc<() => Promise<any>>;
     /** @param {Element} body */
@@ -111,11 +115,6 @@ export class Connection extends Connection_base {
  * The MockConnection class is used during testing, to mock an XMPP connection.
  */
 export class MockConnection extends Connection {
-    /**
-     * @param {string} service - The BOSH or WebSocket service URL.
-     * @param {import('strophe.js/src/types/connection').ConnectionOptions} options - The configuration options
-     */
-    constructor(service: string, options: import("strophe.js/src/types/connection").ConnectionOptions);
     sent_stanzas: any[];
     IQ_stanzas: any[];
     IQ_ids: any[];

src/plugins/todo/modals/add-todo-modal.js

@@ -1,11 +1,20 @@
 import { _converse, api, converse, parsers } from '@converse/headless';
 import BaseModal from 'plugins/modal/modal.js';
-import tplAddTodo from './templates/add-todo-modal.js';
 import { __ } from 'i18n';
+import tplAddTodo from './templates/add-todo-modal.js';
 
 const { Strophe } = converse.env;
 
 export default class AddTodoModal extends BaseModal {
+
+    static get properties() {
+        return {
+            ...super.properties,
+            _manual_jid: { state: true, type: Boolean },
+            _entities: { state: true, type: Array },
+        };
+    }
+
     initialize() {
         super.initialize();
         this.requestUpdate();
@@ -36,19 +45,21 @@ export default class AddTodoModal extends BaseModal {
         const name = data.get('name');
         const jid = data.get('jid') ?? _converse.state.session.get('domain');
 
-        const service_jids = await api.disco.entities.find(Strophe.NS.PUBSUB, jid);
-        if (service_jids.length === 0) {
+        const entities = await api.disco.entities.find(Strophe.NS.PUBSUB, jid);
+        if (entities.length === 0) {
             this.alert(__('Could not find a PubSub service to host your todo list'), 'danger');
-            this.state.set({ manual_jid: true });
+            this._manual_jid = true;
             return;
-        } else if (service_jids.length > 1) {
+        } else if (entities.length > 1) {
             this.alert(__('Found multiple possible PubSub services to host your todo list, please choose one.'));
-            this.state.set({ services: service_jids, manual_jid: true });
+
+            this._entities = entities;
+            this._manual_jid = true;
             return;
         }
 
         try {
-            await api.pubsub.create(service_jids[0].get('jid'), name);
+            await api.pubsub.create(entities[0].get('jid'), name);
         } catch (e) {
             const err = await parsers.parseErrorStanza(e);
             this.alert(__('Sorry, an error occurred: %s', err.message), 'danger');

src/plugins/todo/modals/templates/add-todo-modal.js

@@ -10,32 +10,42 @@ export default (el) => {
     const label_name = __('Todo name');
     const label_service = __('PubSub service (XMPP Address) for your todo list');
 
-    const pubsub_services = el.state.get('services') ?? [];
-
     return html`<form class="converse-form" @submit=${(ev) => el.createTodo(ev)}>
         <div class="mb-3">
             <label for="todo-name" class="form-label">${label_name}:</label>
             <input type="text" id="todo-name" name="name" class="form-control" placeholder="${label_name}" required />
         </div>
 
-        ${el.state.get('manual_jid')
-            ? html`<div class="mb-3">
-                  ${pubsub_services.length > 1
-                      ? html`${__('Available PubSub services')}
-                            <ul class="list-group">
-                                ${(pubsub_services ?? []).map((jid) => html`<li class="list-group-item">${jid}</li>`)}
-                            </ul>`
-                      : ''}
-
-                  <label for="todo-jid" class="form-label">${label_service}:</label>
-                  <input
-                      type="text"
-                      id="todo-jid"
-                      name="jid"
-                      class="form-control"
-                      required
-                  />
-              </div>`
+        ${el._manual_jid
+            ? html` ${(el._entities?.length ?? 0) > 1
+                  ? html`<div class="mb-3">
+                        <label class="form-label">${__('Available PubSub services:')}</label>
+                        <div class="list-group">
+                            ${el._entities.map(/** @param {import('@converse/headless').DiscoEntity} entity */(entity) => {
+                                const jid = entity.get('jid');
+                                const features = entity.features
+                                    .map((f) => f.get('var'))
+                                    .filter((f) => f.includes('pubsub'));
+                                return html`<div class="form-check">
+                                    <input
+                                        class="form-check-input"
+                                        type="radio"
+                                        name="pubsub_service"
+                                        id="${jid}"
+                                        value="${jid}"
+                                    />
+                                    <label class="form-check-label fw-bold" for="${jid}">${jid}</label>
+                                    <ul class="list-unstyled mt-2 text-muted small">
+                                        ${features.map((feature) => html`<li>${feature}</li>`)}
+                                    </ul>
+                                </div>`;
+                            })}
+                        </div>
+                    </div>`
+                  : html`<div class="mb-3">
+                        <label for="todo-jid" class="form-label">${label_service}:</label>
+                        <input type="text" id="todo-jid" name="jid" class="form-control" required />
+                    </div>`}`
             : ''}
 
         <input type="submit" class="btn btn-primary mt-3" value="${i18n_create || ''}" />

src/types/plugins/rootview/app-switcher.d.ts

@@ -1,10 +1,4 @@
 export default class AppSwitcher extends CustomElement {
-    static get properties(): {
-        _activeApp: {
-            type: StringConstructor;
-        };
-    };
-    _activeApp: string;
     initialize(): void;
     render(): import("lit-html").TemplateResult<1>;
     /**