@atlaskit/editor-synced-block-provider 3.12.0 → 3.13.0

package/CHANGELOG.md

@@ -1,5 +1,30 @@
 # @atlaskit/editor-synced-block-provider
 
+## 3.13.0
+
+### Minor Changes
+
+- [`870c3baec758b`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/870c3baec758b) -
+  Enable consumers to use GraphQL subscription for fetching the block data when the block changes
+
+### Patch Changes
+
+- [`5c522f81f181e`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/5c522f81f181e) -
+  [ux] EDITOR-4369 Support synced location for references on Jira in source and reference synced
+  block
+- [`058065aadf69f`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/058065aadf69f) -
+  [ux] [EDITOR-2851] Support reference sync block unsyc
+- Updated dependencies
+
+## 3.12.1
+
+### Patch Changes
+
+- [`7f41011a1b0ff`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/7f41011a1b0ff) -
+  EDITOR-1665 update sync block experience events to use general experience ids, keep existing error
+  events and add success events
+- Updated dependencies
+
 ## 3.12.0
 
 ### Minor Changes

package/dist/cjs/clients/block-service/blockSubscription.js

@@ -0,0 +1,124 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.subscribeToBlockUpdates = void 0;
+var _graphqlWs = require("graphql-ws");
+var GRAPHQL_WS_ENDPOINT = '/gateway/api/graphql/subscriptions';
+var blockServiceClient = null;
+var getBlockServiceClient = function getBlockServiceClient() {
+  // Don't create client during SSR
+  if (typeof window === 'undefined') {
+    return null;
+  }
+  if (!blockServiceClient) {
+    var protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
+    var wsUrl = "".concat(protocol, "//").concat(window.location.host).concat(GRAPHQL_WS_ENDPOINT);
+    blockServiceClient = (0, _graphqlWs.createClient)({
+      url: wsUrl,
+      lazy: true,
+      retryAttempts: 3
+    });
+  }
+  return blockServiceClient;
+};
+var SUBSCRIPTION_QUERY = "\nsubscription EDITOR_SYNCED_BLOCK_ON_BLOCK_UPDATED($resourceId: ID!) {\n\tblockService_onBlockUpdated(resourceId: $resourceId) {\n\t\tblockAri\n\t\tblockInstanceId\n\t\tcontent\n\t\tcontentUpdatedAt\n\t\tcreatedAt\n\t\tcreatedBy\n\t\tdeletionReason\n\t\tproduct\n\t\tsourceAri\n\t\tstatus\n\t}\n}\n";
+/**
+ * Extracts the resourceId from a block ARI.
+ * Block ARI format: ari:cloud:blocks:<cloudId>:synced-block/<resourceId>
+ * @param blockAri - The block ARI string
+ * @returns The resourceId portion of the ARI
+ */
+var extractResourceIdFromBlockAri = function extractResourceIdFromBlockAri(blockAri) {
+  // eslint-disable-next-line require-unicode-regexp
+  var match = blockAri.match(/ari:cloud:blocks:[^:]+:synced-block\/(.+)$/);
+  return (match === null || match === void 0 ? void 0 : match[1]) || null;
+};
+
+/**
+ * Parses the subscription payload into a standardized format.
+ * @param payload - The raw subscription payload
+ * @returns Parsed block data or null if parsing fails
+ */
+var parseSubscriptionPayload = function parseSubscriptionPayload(payload) {
+  try {
+    var resourceId = extractResourceIdFromBlockAri(payload.blockAri);
+    if (!resourceId) {
+      return null;
+    }
+    var createdAt;
+    if (payload.createdAt !== undefined && payload.createdAt !== null) {
+      try {
+        // BE returns microseconds, convert to milliseconds
+        createdAt = new Date(payload.createdAt / 1000).toISOString();
+      } catch (_unused) {
+        createdAt = undefined;
+      }
+    }
+    return {
+      blockAri: payload.blockAri,
+      blockInstanceId: payload.blockInstanceId,
+      content: JSON.parse(payload.content),
+      createdAt: createdAt,
+      createdBy: payload.createdBy,
+      product: payload.product,
+      resourceId: resourceId,
+      sourceAri: payload.sourceAri,
+      status: payload.status
+    };
+  } catch (_unused2) {
+    return null;
+  }
+};
+
+/**
+ * Creates a GraphQL subscription to block updates using the shared graphql-ws client.
+ *
+ * @param blockAri - The full block ARI to subscribe to (ari:cloud:blocks:{cloudId}:synced-block/{resourceId})
+ * @param onData - Callback function invoked when block data is updated
+ * @param onError - Optional callback function invoked on subscription errors
+ * @returns Unsubscribe function to close the subscription
+ */
+var subscribeToBlockUpdates = exports.subscribeToBlockUpdates = function subscribeToBlockUpdates(blockAri, onData, onError) {
+  var client = getBlockServiceClient();
+  if (!client) {
+    // Return a no-op unsubscribe if client is not available (e.g., SSR)
+    return function () {};
+  }
+  var unsubscribe = client.subscribe({
+    query: SUBSCRIPTION_QUERY,
+    variables: {
+      resourceId: blockAri
+    },
+    operationName: 'EDITOR_SYNCED_BLOCK_ON_BLOCK_UPDATED'
+  }, {
+    next: function next(value) {
+      var _value$data;
+      if ((_value$data = value.data) !== null && _value$data !== void 0 && _value$data.blockService_onBlockUpdated) {
+        var parsed = parseSubscriptionPayload(value.data.blockService_onBlockUpdated);
+        if (parsed !== null) {
+          onData(parsed);
+        } else {
+          onError === null || onError === void 0 || onError(new Error('Failed to parse block subscription payload'));
+        }
+      }
+    },
+    error: function (_error) {
+      function error(_x) {
+        return _error.apply(this, arguments);
+      }
+      error.toString = function () {
+        return _error.toString();
+      };
+      return error;
+    }(function (error) {
+      var errorMessage = error instanceof Error ? error.message : 'GraphQL subscription error';
+      onError === null || onError === void 0 || onError(new Error(errorMessage));
+    }),
+    complete: function complete() {
+      // Subscription completed
+    }
+  });
+  return unsubscribe;
+};

package/dist/cjs/clients/jira/sourceInfo.js

@@ -0,0 +1,152 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.fetchJiraWorkItemInfo = void 0;
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+var _retry = require("../../utils/retry");
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; } /* eslint-disable require-unicode-regexp  */
+var COMMON_HEADERS = {
+  'Content-Type': 'application/json',
+  Accept: 'application/json'
+};
+var AGG_HEADERS = {
+  'X-ExperimentalApi': 'confluence-agg-beta'
+};
+var GRAPHQL_ENDPOINT = '/gateway/api/graphql';
+var GET_SOURCE_INFO_OPERATION_NAME = 'EDITOR_SYNCED_BLOCK_GET_SOURCE_INFO';
+/**
+ * Query to get the work item url by id
+ * @param id - the ID of the work item
+ * @returns url of the work item
+ */
+var GET_SOURCE_INFO_QUERY = "query ".concat(GET_SOURCE_INFO_OPERATION_NAME, " ($id: ID!) {\n  jira {\n    issueById(id: $id) {\n      id\n      webUrl\n      summary\n    }\n  }}");
+var getJiraWorkItemSourceInfo = /*#__PURE__*/function () {
+  var _ref = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(ari) {
+    var bodyData, response;
+    return _regenerator.default.wrap(function _callee$(_context) {
+      while (1) switch (_context.prev = _context.next) {
+        case 0:
+          bodyData = {
+            query: GET_SOURCE_INFO_QUERY,
+            operationName: GET_SOURCE_INFO_OPERATION_NAME,
+            variables: {
+              id: ari
+            }
+          };
+          _context.next = 3;
+          return (0, _retry.fetchWithRetry)(GRAPHQL_ENDPOINT, {
+            method: 'POST',
+            headers: _objectSpread(_objectSpread({}, COMMON_HEADERS), AGG_HEADERS),
+            body: JSON.stringify(bodyData)
+          });
+        case 3:
+          response = _context.sent;
+          if (response.ok) {
+            _context.next = 6;
+            break;
+          }
+          throw new Error("Failed to get url: ".concat(response.statusText));
+        case 6:
+          _context.next = 8;
+          return response.json();
+        case 8:
+          return _context.abrupt("return", _context.sent);
+        case 9:
+        case "end":
+          return _context.stop();
+      }
+    }, _callee);
+  }));
+  return function getJiraWorkItemSourceInfo(_x) {
+    return _ref.apply(this, arguments);
+  };
+}();
+var resolveNoAccessWorkItemInfo = /*#__PURE__*/function () {
+  var _ref2 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2(ari) {
+    var response, _payload$data, _payload$data2, payload, url, title;
+    return _regenerator.default.wrap(function _callee2$(_context2) {
+      while (1) switch (_context2.prev = _context2.next) {
+        case 0:
+          _context2.next = 2;
+          return fetch('/gateway/api/object-resolver/resolve/ari', {
+            method: 'POST',
+            headers: {
+              'Content-Type': 'application/json',
+              Accept: 'application/json'
+            },
+            body: JSON.stringify({
+              ari: ari
+            })
+          });
+        case 2:
+          response = _context2.sent;
+          if (!response.ok) {
+            _context2.next = 12;
+            break;
+          }
+          _context2.next = 6;
+          return response.json();
+        case 6:
+          payload = _context2.sent;
+          url = payload === null || payload === void 0 || (_payload$data = payload.data) === null || _payload$data === void 0 ? void 0 : _payload$data.url;
+          title = payload === null || payload === void 0 || (_payload$data2 = payload.data) === null || _payload$data2 === void 0 ? void 0 : _payload$data2.name;
+          return _context2.abrupt("return", {
+            url: typeof url === 'string' ? url : undefined,
+            title: typeof title === 'string' ? title : undefined,
+            sourceAri: ari
+          });
+        case 12:
+          throw new Error("Failed to resolve ari: ".concat(response.statusText));
+        case 13:
+        case "end":
+          return _context2.stop();
+      }
+    }, _callee2);
+  }));
+  return function resolveNoAccessWorkItemInfo(_x2) {
+    return _ref2.apply(this, arguments);
+  };
+}();
+var fetchJiraWorkItemInfo = exports.fetchJiraWorkItemInfo = /*#__PURE__*/function () {
+  var _ref3 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee3(workItemAri, hasAccess) {
+    var _response$data, response, contentData, webUrl, summary;
+    return _regenerator.default.wrap(function _callee3$(_context3) {
+      while (1) switch (_context3.prev = _context3.next) {
+        case 0:
+          if (!hasAccess) {
+            _context3.next = 10;
+            break;
+          }
+          _context3.next = 3;
+          return getJiraWorkItemSourceInfo(workItemAri);
+        case 3:
+          response = _context3.sent;
+          contentData = (_response$data = response.data) === null || _response$data === void 0 || (_response$data = _response$data.jira) === null || _response$data === void 0 ? void 0 : _response$data.issueById;
+          webUrl = contentData === null || contentData === void 0 ? void 0 : contentData.webUrl;
+          summary = contentData === null || contentData === void 0 ? void 0 : contentData.summary;
+          return _context3.abrupt("return", Promise.resolve({
+            url: webUrl,
+            sourceAri: workItemAri,
+            title: summary
+          }));
+        case 10:
+          _context3.next = 12;
+          return resolveNoAccessWorkItemInfo(workItemAri);
+        case 12:
+          return _context3.abrupt("return", _context3.sent);
+        case 13:
+        case "end":
+          return _context3.stop();
+      }
+    }, _callee3);
+  }));
+  return function fetchJiraWorkItemInfo(_x3, _x4) {
+    return _ref3.apply(this, arguments);
+  };
+}();

package/dist/cjs/providers/block-service/blockServiceAPI.js

@@ -15,6 +15,7 @@ var _react = require("react");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _ari = require("../../clients/block-service/ari");
 var _blockService = require("../../clients/block-service/blockService");
+var _blockSubscription = require("../../clients/block-service/blockSubscription");
 var _types = require("../../common/types");
 var _errorHandling = require("../../utils/errorHandling");
 var _resourceId2 = require("../../utils/resourceId");
@@ -117,7 +118,8 @@ var convertToSyncBlockData = exports.convertToSyncBlockData = function convertTo
     createdBy: data.createdBy,
     product: data.product,
     resourceId: resourceId,
-    sourceAri: data.sourceAri
+    sourceAri: data.sourceAri,
+    status: data.status
   };
 };
 var fetchReferences = exports.fetchReferences = /*#__PURE__*/function () {
@@ -237,7 +239,8 @@ var BlockServiceADFFetchProvider = /*#__PURE__*/function () {
                   blockInstanceId: blockContentResponse.blockInstanceId,
                   // this was the node's localId, but has become the resourceId.
                   sourceAri: blockContentResponse.sourceAri,
-                  product: blockContentResponse.product
+                  product: blockContentResponse.product,
+                  status: blockContentResponse.status
                 },
                 resourceId: resourceId
               });
@@ -292,7 +295,7 @@ var BlockServiceADFFetchProvider = /*#__PURE__*/function () {
               response.references.forEach(function (reference) {
                 references.push(_objectSpread(_objectSpread({}, reference), {}, {
                   hasAccess: true,
-                  onSamePage: _this.parentAri === reference.documentAri
+                  onSameDocument: _this.parentAri === reference.documentAri
                 }));
               });
               response.errors.forEach(function (reference) {
@@ -301,7 +304,7 @@ var BlockServiceADFFetchProvider = /*#__PURE__*/function () {
                     blockAri: reference.blockAri,
                     documentAri: reference.documentAri,
                     hasAccess: false,
-                    onSamePage: false
+                    onSameDocument: false
                   });
                 }
               });
@@ -432,7 +435,8 @@ var BlockServiceADFFetchProvider = /*#__PURE__*/function () {
                     resourceId: blockContentResponse.blockAri,
                     blockInstanceId: blockContentResponse.blockInstanceId,
                     sourceAri: blockContentResponse.sourceAri,
-                    product: blockContentResponse.product
+                    product: blockContentResponse.product,
+                    status: blockContentResponse.status
                   },
                   resourceId: resourceId
                 });
@@ -535,7 +539,40 @@ var BlockServiceADFFetchProvider = /*#__PURE__*/function () {
         return _batchFetchData.apply(this, arguments);
       }
       return batchFetchData;
-    }())
+    }()
+    /**
+     * Subscribes to real-time updates for a specific block using GraphQL WebSocket subscriptions.
+     * @param resourceId - The resource ID of the block to subscribe to
+     * @param onUpdate - Callback function invoked when the block is updated
+     * @param onError - Optional callback function invoked on subscription errors
+     * @returns Unsubscribe function to stop receiving updates
+     */
+    )
+  }, {
+    key: "subscribeToBlockUpdates",
+    value: function subscribeToBlockUpdates(resourceId, onUpdate, onError) {
+      var blockAri = (0, _ari.generateBlockAriFromReference)({
+        cloudId: this.cloudId,
+        resourceId: resourceId
+      });
+      return (0, _blockSubscription.subscribeToBlockUpdates)(blockAri, function (parsedData) {
+        // Convert ParsedBlockSubscriptionData to SyncBlockInstance
+        var syncBlockInstance = {
+          data: {
+            content: parsedData.content,
+            resourceId: parsedData.blockAri,
+            blockInstanceId: parsedData.blockInstanceId,
+            sourceAri: parsedData.sourceAri,
+            product: parsedData.product,
+            createdAt: parsedData.createdAt,
+            createdBy: parsedData.createdBy,
+            status: parsedData.status
+          },
+          resourceId: parsedData.resourceId
+        };
+        onUpdate(syncBlockInstance);
+      }, onError);
+    }
   }]);
 }();
 /**

package/dist/cjs/providers/syncBlockProvider.js

@@ -17,7 +17,8 @@ var _react = require("react");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _ari = require("../clients/block-service/ari");
 var _ari2 = require("../clients/confluence/ari");
-var _sourceInfo = require("../clients/confluence/sourceInfo");
+var _sourceInfo2 = require("../clients/confluence/sourceInfo");
+var _sourceInfo3 = require("../clients/jira/sourceInfo");
 var _types = require("../common/types");
 var _types2 = require("./types");
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
@@ -309,6 +310,8 @@ var SyncBlockProvider = exports.SyncBlockProvider = /*#__PURE__*/function (_Sync
           _this$writeProvider,
           sourceInfo,
           _this$writeProvider2,
+          _this$writeProvider3,
+          _sourceInfo,
           _args4 = arguments;
         return _regenerator.default.wrap(function _callee4$(_context4) {
           while (1) switch (_context4.prev = _context4.next) {
@@ -327,11 +330,11 @@ var SyncBlockProvider = exports.SyncBlockProvider = /*#__PURE__*/function (_Sync
               return _context4.abrupt("return", Promise.reject(new Error('Source ari or source product is undefined')));
             case 6:
               _context4.t0 = product;
-              _context4.next = _context4.t0 === 'confluence-page' ? 9 : _context4.t0 === 'jira-work-item' ? 19 : 22;
+              _context4.next = _context4.t0 === 'confluence-page' ? 9 : _context4.t0 === 'jira-work-item' ? 19 : 27;
               break;
             case 9:
               _context4.next = 11;
-              return (0, _sourceInfo.fetchConfluencePageInfo)(ari, hasAccess, urlType, localId, fireAnalyticsEvent);
+              return (0, _sourceInfo2.fetchConfluencePageInfo)(ari, hasAccess, urlType, localId, fireAnalyticsEvent);
             case 11:
               sourceInfo = _context4.sent;
               if (!(0, _platformFeatureFlags.fg)('platform_synced_block_dogfooding')) {
@@ -345,22 +348,35 @@ var SyncBlockProvider = exports.SyncBlockProvider = /*#__PURE__*/function (_Sync
               return _context4.abrupt("return", Promise.resolve(undefined));
             case 15:
               return _context4.abrupt("return", _objectSpread(_objectSpread({}, sourceInfo), {}, {
-                onSamePage: ((_this$writeProvider2 = this.writeProvider) === null || _this$writeProvider2 === void 0 ? void 0 : _this$writeProvider2.parentAri) === ari,
+                onSameDocument: ((_this$writeProvider2 = this.writeProvider) === null || _this$writeProvider2 === void 0 ? void 0 : _this$writeProvider2.parentAri) === ari,
                 productType: product
               }));
             case 18:
               return _context4.abrupt("return", sourceInfo);
             case 19:
               if (!(0, _platformFeatureFlags.fg)('platform_synced_block_dogfooding')) {
-                _context4.next = 21;
+                _context4.next = 26;
+                break;
+              }
+              _context4.next = 22;
+              return (0, _sourceInfo3.fetchJiraWorkItemInfo)(ari, hasAccess);
+            case 22:
+              _sourceInfo = _context4.sent;
+              if (_sourceInfo) {
+                _context4.next = 25;
                 break;
               }
               return _context4.abrupt("return", Promise.resolve(undefined));
-            case 21:
+            case 25:
+              return _context4.abrupt("return", _objectSpread(_objectSpread({}, _sourceInfo), {}, {
+                onSameDocument: ((_this$writeProvider3 = this.writeProvider) === null || _this$writeProvider3 === void 0 ? void 0 : _this$writeProvider3.parentAri) === ari,
+                productType: product
+              }));
+            case 26:
               return _context4.abrupt("return", Promise.reject(new Error('Jira work item source product not supported')));
-            case 22:
+            case 27:
               return _context4.abrupt("return", Promise.reject(new Error("".concat(product, " source product not supported"))));
-            case 23:
+            case 28:
             case "end":
               return _context4.stop();
           }
@@ -445,6 +461,22 @@ var SyncBlockProvider = exports.SyncBlockProvider = /*#__PURE__*/function (_Sync
       }
       return this.fetchProvider.fetchReferences(isSource ? this.generateResourceIdForReference(resourceId) : resourceId);
     }
+
+    /**
+     * Subscribes to real-time updates for a specific block.
+     * @param resourceId - The resource ID of the block to subscribe to
+     * @param onUpdate - Callback function invoked when the block is updated
+     * @param onError - Optional callback function invoked on subscription errors
+     * @returns Unsubscribe function to stop receiving updates, or undefined if not supported
+     */
+  }, {
+    key: "subscribeToBlockUpdates",
+    value: function subscribeToBlockUpdates(resourceId, onUpdate, onError) {
+      if (this.fetchProvider.subscribeToBlockUpdates) {
+        return this.fetchProvider.subscribeToBlockUpdates(resourceId, onUpdate, onError);
+      }
+      return undefined;
+    }
   }]);
 }(_types2.SyncBlockDataProvider);
 var createSyncedBlockProvider = function createSyncedBlockProvider(_ref) {