@atlaskit/rovo-triggers 1.1.0 → 1.2.0

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @atlaskit/rovo-triggers
 
+## 1.2.0
+
+### Minor Changes
+
+- [#162034](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/162034)
+  [`b9b034c26952f`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/b9b034c26952f) -
+  Support publishing pubsub event through postMessage, and with acknowledgment receipt if the
+  postMessage event is published. Will be used for smart-card agent embed inside iframe, as
+  communication between iframe and the parent window.
+
 ## 1.1.0
 
 ### Minor Changes

package/dist/cjs/common/utils/post-message-to-pubsub/index.js

@@ -0,0 +1,125 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useRovoPostMessageToPubsub = exports.isAllowedOrigin = exports.RovoPostMessagePubsubListener = exports.ROVO_POST_MESSAGE_EVENT_TYPE = exports.ROVO_POST_MESSAGE_ACK_EVENT_TYPE = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = require("react");
+var _bindEventListener = require("bind-event-listener");
+var _main = require("../../../main");
+var ROVO_POST_MESSAGE_EVENT_TYPE = exports.ROVO_POST_MESSAGE_EVENT_TYPE = 'rovo-post-message';
+var ROVO_POST_MESSAGE_ACK_EVENT_TYPE = exports.ROVO_POST_MESSAGE_ACK_EVENT_TYPE = 'rovo-post-message-ack';
+// allow subdomains of these domains
+var allowedSubdomains = ['.jira-dev.com', '.atlassian.com', '.atlassian.net', '.atl-paas.net'];
+var allowedOrigins = ['bitbucket.org', 'trello.com'];
+var isAllowedOrigin = exports.isAllowedOrigin = function isAllowedOrigin(origin) {
+  if (!origin) {
+    return false;
+  }
+  var url = new URL(origin);
+  var hostname = url.hostname;
+  return hostname === 'localhost' || url.protocol === 'https:' && (allowedSubdomains.some(function (subdomain) {
+    return hostname.endsWith(subdomain);
+  }) || allowedOrigins.includes(hostname));
+};
+var RovoPostMessagePubsubListener = exports.RovoPostMessagePubsubListener = function RovoPostMessagePubsubListener() {
+  var publish = (0, _main.usePublish)('ai-mate');
+  (0, _react.useEffect)(function () {
+    var handlerUnbind = (0, _bindEventListener.bind)(window, {
+      type: 'message',
+      listener: function listener(event) {
+        if (!isAllowedOrigin(event.origin)) {
+          return;
+        }
+        if (event.data.eventType === ROVO_POST_MESSAGE_EVENT_TYPE) {
+          var _event$source;
+          var eventData = event.data;
+          var ackPayload = {
+            eventType: ROVO_POST_MESSAGE_ACK_EVENT_TYPE,
+            payloadId: eventData.payloadId
+          };
+          (_event$source = event.source) === null || _event$source === void 0 || _event$source.postMessage(ackPayload);
+          publish(event.data.payload);
+        }
+      }
+    });
+    return handlerUnbind;
+  }, [publish]);
+  return null;
+};
+var TIMEOUT_WAIT_FOR_ACK = 100;
+
+/**
+ * Hook to send a publish event to parent iframe using postMessage
+ * Only supports 1 pubsub event at a time and waits for acknowledgment or timed out
+ */
+var useRovoPostMessageToPubsub = exports.useRovoPostMessageToPubsub = function useRovoPostMessageToPubsub() {
+  var onAcknowledgeTimeoutTimeoutRef = (0, _react.useRef)(null);
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    isWaitingForAck = _useState2[0],
+    setIsWaitingForAck = _useState2[1];
+  (0, _react.useEffect)(function () {
+    var handlerUnbind = (0, _bindEventListener.bind)(window, {
+      type: 'message',
+      // handler for acknowledgment from parent
+      listener: function listener(event) {
+        if (!isAllowedOrigin(event.origin)) {
+          return;
+        }
+        if (event.data.eventType !== ROVO_POST_MESSAGE_ACK_EVENT_TYPE || onAcknowledgeTimeoutTimeoutRef.current === null) {
+          return;
+        }
+        var eventData = event.data;
+
+        // if the parent acknowledges different payload (e.g. from different hook instance)
+        // disregard the event
+        if (eventData.payloadId !== onAcknowledgeTimeoutTimeoutRef.current.lastPayloadId) {
+          return;
+        }
+
+        // Clear the onAcknowledgeTimeoutTimeout if acknowledgment is received
+        clearTimeout(onAcknowledgeTimeoutTimeoutRef.current.timeout);
+        onAcknowledgeTimeoutTimeoutRef.current = null;
+        setIsWaitingForAck(false);
+      }
+    });
+    return handlerUnbind;
+  }, []);
+  var publishWithPostMessage = (0, _react.useCallback)(function (_ref) {
+    var _ref$targetWindow = _ref.targetWindow,
+      targetWindow = _ref$targetWindow === void 0 ? window.parent : _ref$targetWindow,
+      payload = _ref.payload,
+      onAcknowledgeTimeout = _ref.onAcknowledgeTimeout;
+    if (!targetWindow) {
+      return;
+    }
+    var payloadId = Math.floor(Math.random() * 1e6).toString();
+    targetWindow.postMessage({
+      eventType: ROVO_POST_MESSAGE_EVENT_TYPE,
+      payload: payload,
+      payloadId: payloadId
+    }, '*');
+
+    // waiting for acknowledgment from parent
+    // if no acknowledgment is received, call onAcknowledgeTimeout
+    setIsWaitingForAck(true);
+    var timeout = window.setTimeout(function () {
+      onAcknowledgeTimeout({
+        payload: payload
+      });
+      onAcknowledgeTimeoutTimeoutRef.current = null;
+      setIsWaitingForAck(false);
+    }, TIMEOUT_WAIT_FOR_ACK);
+    onAcknowledgeTimeoutTimeoutRef.current = {
+      timeout: timeout,
+      lastPayloadId: payloadId
+    };
+  }, []);
+  return {
+    publishWithPostMessage: publishWithPostMessage,
+    isWaitingForAck: isWaitingForAck
+  };
+};

package/dist/cjs/index.js

@@ -3,6 +3,12 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+Object.defineProperty(exports, "RovoPostMessagePubsubListener", {
+  enumerable: true,
+  get: function get() {
+    return _postMessageToPubsub.RovoPostMessagePubsubListener;
+  }
+});
 Object.defineProperty(exports, "Subscriber", {
   enumerable: true,
   get: function get() {
@@ -51,6 +57,12 @@ Object.defineProperty(exports, "usePublish", {
     return _main.usePublish;
   }
 });
+Object.defineProperty(exports, "useRovoPostMessageToPubsub", {
+  enumerable: true,
+  get: function get() {
+    return _postMessageToPubsub.useRovoPostMessageToPubsub;
+  }
+});
 Object.defineProperty(exports, "useSubscribe", {
   enumerable: true,
   get: function get() {
@@ -64,4 +76,5 @@ Object.defineProperty(exports, "useSubscribeAll", {
   }
 });
 var _main = require("./main");
-var _params = require("./common/utils/params");
+var _params = require("./common/utils/params");
+var _postMessageToPubsub = require("./common/utils/post-message-to-pubsub");

package/dist/es2019/common/utils/post-message-to-pubsub/index.js

@@ -0,0 +1,112 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { bind } from 'bind-event-listener';
+import { usePublish } from '../../../main';
+export const ROVO_POST_MESSAGE_EVENT_TYPE = 'rovo-post-message';
+export const ROVO_POST_MESSAGE_ACK_EVENT_TYPE = 'rovo-post-message-ack';
+// allow subdomains of these domains
+const allowedSubdomains = ['.jira-dev.com', '.atlassian.com', '.atlassian.net', '.atl-paas.net'];
+const allowedOrigins = ['bitbucket.org', 'trello.com'];
+export const isAllowedOrigin = origin => {
+  if (!origin) {
+    return false;
+  }
+  const url = new URL(origin);
+  const hostname = url.hostname;
+  return hostname === 'localhost' || url.protocol === 'https:' && (allowedSubdomains.some(subdomain => hostname.endsWith(subdomain)) || allowedOrigins.includes(hostname));
+};
+export const RovoPostMessagePubsubListener = () => {
+  const publish = usePublish('ai-mate');
+  useEffect(() => {
+    const handlerUnbind = bind(window, {
+      type: 'message',
+      listener: event => {
+        if (!isAllowedOrigin(event.origin)) {
+          return;
+        }
+        if (event.data.eventType === ROVO_POST_MESSAGE_EVENT_TYPE) {
+          var _event$source;
+          const eventData = event.data;
+          const ackPayload = {
+            eventType: ROVO_POST_MESSAGE_ACK_EVENT_TYPE,
+            payloadId: eventData.payloadId
+          };
+          (_event$source = event.source) === null || _event$source === void 0 ? void 0 : _event$source.postMessage(ackPayload);
+          publish(event.data.payload);
+        }
+      }
+    });
+    return handlerUnbind;
+  }, [publish]);
+  return null;
+};
+const TIMEOUT_WAIT_FOR_ACK = 100;
+
+/**
+ * Hook to send a publish event to parent iframe using postMessage
+ * Only supports 1 pubsub event at a time and waits for acknowledgment or timed out
+ */
+export const useRovoPostMessageToPubsub = () => {
+  const onAcknowledgeTimeoutTimeoutRef = useRef(null);
+  const [isWaitingForAck, setIsWaitingForAck] = useState(false);
+  useEffect(() => {
+    const handlerUnbind = bind(window, {
+      type: 'message',
+      // handler for acknowledgment from parent
+      listener: event => {
+        if (!isAllowedOrigin(event.origin)) {
+          return;
+        }
+        if (event.data.eventType !== ROVO_POST_MESSAGE_ACK_EVENT_TYPE || onAcknowledgeTimeoutTimeoutRef.current === null) {
+          return;
+        }
+        const eventData = event.data;
+
+        // if the parent acknowledges different payload (e.g. from different hook instance)
+        // disregard the event
+        if (eventData.payloadId !== onAcknowledgeTimeoutTimeoutRef.current.lastPayloadId) {
+          return;
+        }
+
+        // Clear the onAcknowledgeTimeoutTimeout if acknowledgment is received
+        clearTimeout(onAcknowledgeTimeoutTimeoutRef.current.timeout);
+        onAcknowledgeTimeoutTimeoutRef.current = null;
+        setIsWaitingForAck(false);
+      }
+    });
+    return handlerUnbind;
+  }, []);
+  const publishWithPostMessage = useCallback(({
+    targetWindow = window.parent,
+    payload,
+    onAcknowledgeTimeout
+  }) => {
+    if (!targetWindow) {
+      return;
+    }
+    const payloadId = Math.floor(Math.random() * 1e6).toString();
+    targetWindow.postMessage({
+      eventType: ROVO_POST_MESSAGE_EVENT_TYPE,
+      payload,
+      payloadId
+    }, '*');
+
+    // waiting for acknowledgment from parent
+    // if no acknowledgment is received, call onAcknowledgeTimeout
+    setIsWaitingForAck(true);
+    const timeout = window.setTimeout(() => {
+      onAcknowledgeTimeout({
+        payload
+      });
+      onAcknowledgeTimeoutTimeoutRef.current = null;
+      setIsWaitingForAck(false);
+    }, TIMEOUT_WAIT_FOR_ACK);
+    onAcknowledgeTimeoutTimeoutRef.current = {
+      timeout,
+      lastPayloadId: payloadId
+    };
+  }, []);
+  return {
+    publishWithPostMessage,
+    isWaitingForAck
+  };
+};

package/dist/es2019/index.js

@@ -1,2 +1,3 @@
 export { usePublish, useSubscribe, useSubscribeAll, Subscriber } from './main';
-export { getRovoParams, updatePageRovoParams, addRovoParamsToUrl, assertOnlySpecificFieldsDefined, encodeRovoParams, getListOfRovoParams } from './common/utils/params';
+export { getRovoParams, updatePageRovoParams, addRovoParamsToUrl, assertOnlySpecificFieldsDefined, encodeRovoParams, getListOfRovoParams } from './common/utils/params';
+export { useRovoPostMessageToPubsub, RovoPostMessagePubsubListener } from './common/utils/post-message-to-pubsub';

package/dist/esm/common/utils/post-message-to-pubsub/index.js

@@ -0,0 +1,118 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { bind } from 'bind-event-listener';
+import { usePublish } from '../../../main';
+export var ROVO_POST_MESSAGE_EVENT_TYPE = 'rovo-post-message';
+export var ROVO_POST_MESSAGE_ACK_EVENT_TYPE = 'rovo-post-message-ack';
+// allow subdomains of these domains
+var allowedSubdomains = ['.jira-dev.com', '.atlassian.com', '.atlassian.net', '.atl-paas.net'];
+var allowedOrigins = ['bitbucket.org', 'trello.com'];
+export var isAllowedOrigin = function isAllowedOrigin(origin) {
+  if (!origin) {
+    return false;
+  }
+  var url = new URL(origin);
+  var hostname = url.hostname;
+  return hostname === 'localhost' || url.protocol === 'https:' && (allowedSubdomains.some(function (subdomain) {
+    return hostname.endsWith(subdomain);
+  }) || allowedOrigins.includes(hostname));
+};
+export var RovoPostMessagePubsubListener = function RovoPostMessagePubsubListener() {
+  var publish = usePublish('ai-mate');
+  useEffect(function () {
+    var handlerUnbind = bind(window, {
+      type: 'message',
+      listener: function listener(event) {
+        if (!isAllowedOrigin(event.origin)) {
+          return;
+        }
+        if (event.data.eventType === ROVO_POST_MESSAGE_EVENT_TYPE) {
+          var _event$source;
+          var eventData = event.data;
+          var ackPayload = {
+            eventType: ROVO_POST_MESSAGE_ACK_EVENT_TYPE,
+            payloadId: eventData.payloadId
+          };
+          (_event$source = event.source) === null || _event$source === void 0 || _event$source.postMessage(ackPayload);
+          publish(event.data.payload);
+        }
+      }
+    });
+    return handlerUnbind;
+  }, [publish]);
+  return null;
+};
+var TIMEOUT_WAIT_FOR_ACK = 100;
+
+/**
+ * Hook to send a publish event to parent iframe using postMessage
+ * Only supports 1 pubsub event at a time and waits for acknowledgment or timed out
+ */
+export var useRovoPostMessageToPubsub = function useRovoPostMessageToPubsub() {
+  var onAcknowledgeTimeoutTimeoutRef = useRef(null);
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isWaitingForAck = _useState2[0],
+    setIsWaitingForAck = _useState2[1];
+  useEffect(function () {
+    var handlerUnbind = bind(window, {
+      type: 'message',
+      // handler for acknowledgment from parent
+      listener: function listener(event) {
+        if (!isAllowedOrigin(event.origin)) {
+          return;
+        }
+        if (event.data.eventType !== ROVO_POST_MESSAGE_ACK_EVENT_TYPE || onAcknowledgeTimeoutTimeoutRef.current === null) {
+          return;
+        }
+        var eventData = event.data;
+
+        // if the parent acknowledges different payload (e.g. from different hook instance)
+        // disregard the event
+        if (eventData.payloadId !== onAcknowledgeTimeoutTimeoutRef.current.lastPayloadId) {
+          return;
+        }
+
+        // Clear the onAcknowledgeTimeoutTimeout if acknowledgment is received
+        clearTimeout(onAcknowledgeTimeoutTimeoutRef.current.timeout);
+        onAcknowledgeTimeoutTimeoutRef.current = null;
+        setIsWaitingForAck(false);
+      }
+    });
+    return handlerUnbind;
+  }, []);
+  var publishWithPostMessage = useCallback(function (_ref) {
+    var _ref$targetWindow = _ref.targetWindow,
+      targetWindow = _ref$targetWindow === void 0 ? window.parent : _ref$targetWindow,
+      payload = _ref.payload,
+      onAcknowledgeTimeout = _ref.onAcknowledgeTimeout;
+    if (!targetWindow) {
+      return;
+    }
+    var payloadId = Math.floor(Math.random() * 1e6).toString();
+    targetWindow.postMessage({
+      eventType: ROVO_POST_MESSAGE_EVENT_TYPE,
+      payload: payload,
+      payloadId: payloadId
+    }, '*');
+
+    // waiting for acknowledgment from parent
+    // if no acknowledgment is received, call onAcknowledgeTimeout
+    setIsWaitingForAck(true);
+    var timeout = window.setTimeout(function () {
+      onAcknowledgeTimeout({
+        payload: payload
+      });
+      onAcknowledgeTimeoutTimeoutRef.current = null;
+      setIsWaitingForAck(false);
+    }, TIMEOUT_WAIT_FOR_ACK);
+    onAcknowledgeTimeoutTimeoutRef.current = {
+      timeout: timeout,
+      lastPayloadId: payloadId
+    };
+  }, []);
+  return {
+    publishWithPostMessage: publishWithPostMessage,
+    isWaitingForAck: isWaitingForAck
+  };
+};

package/dist/esm/index.js

@@ -1,2 +1,3 @@
 export { usePublish, useSubscribe, useSubscribeAll, Subscriber } from './main';
-export { getRovoParams, updatePageRovoParams, addRovoParamsToUrl, assertOnlySpecificFieldsDefined, encodeRovoParams, getListOfRovoParams } from './common/utils/params';
+export { getRovoParams, updatePageRovoParams, addRovoParamsToUrl, assertOnlySpecificFieldsDefined, encodeRovoParams, getListOfRovoParams } from './common/utils/params';
+export { useRovoPostMessageToPubsub, RovoPostMessagePubsubListener } from './common/utils/post-message-to-pubsub';

package/dist/types/common/utils/post-message-to-pubsub/index.d.ts

@@ -0,0 +1,19 @@
+import { type Payload } from '../../../types';
+export declare const ROVO_POST_MESSAGE_EVENT_TYPE = "rovo-post-message";
+export declare const ROVO_POST_MESSAGE_ACK_EVENT_TYPE = "rovo-post-message-ack";
+export declare const isAllowedOrigin: (origin: string | undefined) => boolean;
+export declare const RovoPostMessagePubsubListener: () => null;
+/**
+ * Hook to send a publish event to parent iframe using postMessage
+ * Only supports 1 pubsub event at a time and waits for acknowledgment or timed out
+ */
+export declare const useRovoPostMessageToPubsub: () => {
+    publishWithPostMessage: ({ targetWindow, payload, onAcknowledgeTimeout, }: {
+        targetWindow?: Window | undefined;
+        payload: Payload;
+        onAcknowledgeTimeout: (params: {
+            payload: Payload;
+        }) => void;
+    }) => void;
+    isWaitingForAck: boolean;
+};

package/dist/types/index.d.ts

@@ -2,3 +2,4 @@ export { usePublish, useSubscribe, useSubscribeAll, Subscriber } from './main';
 export type { Payload, Callback, Topic, EditorContextPayloadData, BrowserContextPayloadData, } from './types';
 export { getRovoParams, updatePageRovoParams, addRovoParamsToUrl, assertOnlySpecificFieldsDefined, encodeRovoParams, getListOfRovoParams, } from './common/utils/params';
 export type { RovoChatParams, RovoChatPathway } from './common/utils/params/types';
+export { useRovoPostMessageToPubsub, RovoPostMessagePubsubListener, } from './common/utils/post-message-to-pubsub';

package/dist/types-ts4.5/common/utils/post-message-to-pubsub/index.d.ts

@@ -0,0 +1,19 @@
+import { type Payload } from '../../../types';
+export declare const ROVO_POST_MESSAGE_EVENT_TYPE = "rovo-post-message";
+export declare const ROVO_POST_MESSAGE_ACK_EVENT_TYPE = "rovo-post-message-ack";
+export declare const isAllowedOrigin: (origin: string | undefined) => boolean;
+export declare const RovoPostMessagePubsubListener: () => null;
+/**
+ * Hook to send a publish event to parent iframe using postMessage
+ * Only supports 1 pubsub event at a time and waits for acknowledgment or timed out
+ */
+export declare const useRovoPostMessageToPubsub: () => {
+    publishWithPostMessage: ({ targetWindow, payload, onAcknowledgeTimeout, }: {
+        targetWindow?: Window | undefined;
+        payload: Payload;
+        onAcknowledgeTimeout: (params: {
+            payload: Payload;
+        }) => void;
+    }) => void;
+    isWaitingForAck: boolean;
+};

package/dist/types-ts4.5/index.d.ts

@@ -2,3 +2,4 @@ export { usePublish, useSubscribe, useSubscribeAll, Subscriber } from './main';
 export type { Payload, Callback, Topic, EditorContextPayloadData, BrowserContextPayloadData, } from './types';
 export { getRovoParams, updatePageRovoParams, addRovoParamsToUrl, assertOnlySpecificFieldsDefined, encodeRovoParams, getListOfRovoParams, } from './common/utils/params';
 export type { RovoChatParams, RovoChatPathway } from './common/utils/params/types';
+export { useRovoPostMessageToPubsub, RovoPostMessagePubsubListener, } from './common/utils/post-message-to-pubsub';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/rovo-triggers",
-	"version": "1.1.0",
+	"version": "1.2.0",
 	"description": "Provides various trigger events to drive Rovo Chat functionality, such as a publish-subscribe and URL parameter hooks",
 	"author": "Atlassian Pty Ltd",
 	"publishConfig": {
@@ -32,7 +32,8 @@
 		".": "./src/index.ts"
 	},
 	"dependencies": {
-		"@babel/runtime": "^7.0.0"
+		"@babel/runtime": "^7.0.0",
+		"bind-event-listener": "^3.0.0"
 	},
 	"peerDependencies": {
 		"react": "^16.8.0 || ^17.0.0 || ^18.2.0"