@atlaskit/link-datasource 2.3.3 → 2.3.4

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @atlaskit/link-datasource
 
+## 2.3.4
+
+### Patch Changes
+
+-   [#102451](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/102451)
+    [`52ef0e53ab4b`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/52ef0e53ab4b) -
+    Created a new `DatasourceExperienceIdProvider` and `useDatasourceExperienceId` for tracking UFO
+    experiences.
+
 ## 2.3.3
 
 ### Patch Changes

package/dist/cjs/contexts/datasource-experience-id/index.js

@@ -0,0 +1,28 @@
+"use strict";
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useDatasourceExperienceId = exports.DatasourceExperienceIdProvider = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _uuid = require("uuid");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+var DatasourceExperienceIdContext = /*#__PURE__*/_react.default.createContext(undefined);
+var DatasourceExperienceIdProvider = exports.DatasourceExperienceIdProvider = function DatasourceExperienceIdProvider(_ref) {
+  var children = _ref.children;
+  var value = (0, _react.useMemo)(function () {
+    return (0, _uuid.v4)();
+  }, []);
+  return /*#__PURE__*/_react.default.createElement(DatasourceExperienceIdContext.Provider, {
+    value: value
+  }, children);
+};
+var useDatasourceExperienceId = exports.useDatasourceExperienceId = function useDatasourceExperienceId() {
+  var context = (0, _react.useContext)(DatasourceExperienceIdContext);
+  if (!context) {
+    throw Error('useDatasourceExperienceId() must be wrapped in <DatasourceExperienceIdProvider>');
+  }
+  return context;
+};

package/dist/cjs/ui/assets-modal/modal/index.js

@@ -11,7 +11,6 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 var _react = require("react");
 var _react2 = require("@emotion/react");
 var _reactIntlNext = require("react-intl-next");
-var _uuid = require("uuid");
 var _analyticsNext = require("@atlaskit/analytics-next");
 var _standardButton = _interopRequireDefault(require("@atlaskit/button/standard-button"));
 var _intlMessagesProvider = require("@atlaskit/intl-messages-provider");
@@ -24,6 +23,7 @@ var _useColumnPickerRenderedFailedUfoExperience = require("../../../analytics/uf
 var _useDataRenderedUfoExperience = require("../../../analytics/ufoExperiences/hooks/useDataRenderedUfoExperience");
 var _adf = require("../../../common/utils/adf");
 var _fetchMessagesForLocale = require("../../../common/utils/locale/fetch-messages-for-locale");
+var _datasourceExperienceId = require("../../../contexts/datasource-experience-id");
 var _useAssetsClient2 = require("../../../hooks/useAssetsClient");
 var _useDatasourceTableState = require("../../../hooks/useDatasourceTableState");
 var _en = _interopRequireDefault(require("../../../i18n/en"));
@@ -41,6 +41,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 var modalBodyErrorWrapperStyles = (0, _react2.css)({
   alignItems: 'center',
   display: 'grid',
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
   height: _renderAssetsContent.MODAL_HEIGHT
 });
 var AssetsModalTitle = (0, _react2.jsx)(_modalDialog.ModalTitle, null, (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _messages.modalMessages.insertObjectsTitle));
@@ -72,8 +73,7 @@ var PlainAssetsConfigModal = function PlainAssetsConfigModal(props) {
     setErrorState = _useState10[1];
   var _useDatasourceAnalyti = (0, _analytics.useDatasourceAnalyticsEvents)(),
     fireEvent = _useDatasourceAnalyti.fireEvent;
-  var _useRef = (0, _react.useRef)((0, _uuid.v4)()),
-    modalRenderInstanceId = _useRef.current;
+  var experienceId = (0, _datasourceExperienceId.useDatasourceExperienceId)();
   var _useAssetsClient = (0, _useAssetsClient2.useAssetsClient)(initialParameters),
     workspaceId = _useAssetsClient.workspaceId,
     workspaceError = _useAssetsClient.workspaceError,
@@ -182,17 +182,17 @@ var PlainAssetsConfigModal = function PlainAssetsConfigModal(props) {
     if (shouldStartUfoExperience) {
       (0, _ufoExperiences.startUfoExperience)({
         name: 'datasource-rendered'
-      }, modalRenderInstanceId);
+      }, experienceId);
     }
-  }, [modalRenderInstanceId, status]);
+  }, [experienceId, status]);
   (0, _useDataRenderedUfoExperience.useDataRenderedUfoExperience)({
     status: status,
-    experienceId: modalRenderInstanceId,
+    experienceId: experienceId,
     itemCount: responseItems.length,
     canBeLink: false,
     extensionKey: extensionKey
   });
-  (0, _useColumnPickerRenderedFailedUfoExperience.useColumnPickerRenderedFailedUfoExperience)(status, modalRenderInstanceId);
+  (0, _useColumnPickerRenderedFailedUfoExperience.useColumnPickerRenderedFailedUfoExperience)(status, experienceId);
   /* ------------------------------ END OBSERVABILITY ------------------------------ */
 
   var onVisibleColumnKeysChange = (0, _react.useCallback)(function (visibleColumnKeys) {
@@ -349,8 +349,7 @@ var PlainAssetsConfigModal = function PlainAssetsConfigModal(props) {
     hasNextPage: hasNextPage,
     loadDatasourceDetails: loadDatasourceDetails,
     columns: columns,
-    defaultVisibleColumnKeys: defaultVisibleColumnKeys,
-    modalRenderInstanceId: modalRenderInstanceId
+    defaultVisibleColumnKeys: defaultVisibleColumnKeys
   })), (0, _react2.jsx)(_modalDialog.ModalFooter, null, (0, _react2.jsx)(_cancelButton.CancelButton, {
     onCancel: onCancel,
     getAnalyticsPayload: getCancelButtonAnalyticsPayload,
@@ -375,4 +374,6 @@ var analyticsContextData = _objectSpread(_objectSpread({}, _constants.componentM
 var contextData = _objectSpread(_objectSpread({}, analyticsContextData), {}, {
   attributes: _objectSpread({}, analyticsContextAttributes)
 });
-var AssetsConfigModal = exports.AssetsConfigModal = (0, _analyticsNext.withAnalyticsContext)(contextData)(PlainAssetsConfigModal);
+var AssetsConfigModal = exports.AssetsConfigModal = (0, _analyticsNext.withAnalyticsContext)(contextData)(function (props) {
+  return (0, _react2.jsx)(_datasourceExperienceId.DatasourceExperienceIdProvider, null, (0, _react2.jsx)(PlainAssetsConfigModal, props));
+});

package/dist/cjs/ui/assets-modal/modal/render-assets-content/index.js

@@ -72,7 +72,6 @@ var RenderAssetsContent = exports.RenderAssetsContent = function RenderAssetsCon
     columns = props.columns,
     defaultVisibleColumnKeys = props.defaultVisibleColumnKeys,
     onVisibleColumnKeysChange = props.onVisibleColumnKeysChange,
-    modalRenderInstanceId = props.modalRenderInstanceId,
     isFetchingInitialData = props.isFetchingInitialData;
   var resolvedWithNoResults = status === 'resolved' && !responseItems.length;
   var issueLikeDataTableView = (0, _react.useMemo)(function () {
@@ -87,10 +86,9 @@ var RenderAssetsContent = exports.RenderAssetsContent = function RenderAssetsCon
       visibleColumnKeys: visibleColumnKeys || defaultVisibleColumnKeys,
       onNextPage: onNextPage,
       onLoadDatasourceDetails: loadDatasourceDetails,
-      onVisibleColumnKeysChange: onVisibleColumnKeysChange,
-      parentContainerRenderInstanceId: modalRenderInstanceId
+      onVisibleColumnKeysChange: onVisibleColumnKeysChange
     }));
-  }, [columns, defaultVisibleColumnKeys, hasNextPage, loadDatasourceDetails, onNextPage, onVisibleColumnKeysChange, responseItems, status, visibleColumnKeys, modalRenderInstanceId]);
+  }, [columns, defaultVisibleColumnKeys, hasNextPage, loadDatasourceDetails, onNextPage, onVisibleColumnKeysChange, responseItems, status, visibleColumnKeys]);
   var renderAssetsContentView = (0, _react.useCallback)(function () {
     if (isFetchingInitialData) {
       // Placing this check first as it's a priority before all others

package/dist/cjs/ui/confluence-search-modal/modal/index.js

@@ -11,7 +11,6 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 var _react = require("react");
 var _react2 = require("@emotion/react");
 var _reactIntlNext = require("react-intl-next");
-var _uuid = require("uuid");
 var _analyticsNext = require("@atlaskit/analytics-next");
 var _standardButton = _interopRequireDefault(require("@atlaskit/button/standard-button"));
 var _intlMessagesProvider = require("@atlaskit/intl-messages-provider");
@@ -25,6 +24,7 @@ var _constants = require("../../../analytics/constants");
 var _types = require("../../../analytics/types");
 var _adf = require("../../../common/utils/adf");
 var _fetchMessagesForLocale = require("../../../common/utils/locale/fetch-messages-for-locale");
+var _datasourceExperienceId = require("../../../contexts/datasource-experience-id");
 var _useDatasourceTableState = require("../../../hooks/useDatasourceTableState");
 var _en = _interopRequireDefault(require("../../../i18n/en"));
 var _useAvailableSites2 = require("../../../services/useAvailableSites");
@@ -58,8 +58,6 @@ var searchCountStyles = (0, _primitives.xcss)({
   fontWeight: 600
 });
 var PlainConfluenceSearchConfigModal = exports.PlainConfluenceSearchConfigModal = function PlainConfluenceSearchConfigModal(props) {
-  var _useRef = (0, _react.useRef)((0, _uuid.v4)()),
-    modalRenderInstanceId = _useRef.current;
   var datasourceId = props.datasourceId,
     initialColumnCustomSizes = props.columnCustomSizes,
     initialWrappedColumnKeys = props.wrappedColumnKeys,
@@ -216,14 +214,13 @@ var PlainConfluenceSearchConfigModal = exports.PlainConfluenceSearchConfigModal
       onNextPage: onNextPage,
       onLoadDatasourceDetails: loadDatasourceDetails,
       onVisibleColumnKeysChange: handleVisibleColumnKeysChange,
-      parentContainerRenderInstanceId: modalRenderInstanceId,
       extensionKey: extensionKey,
       columnCustomSizes: columnCustomSizes,
       onColumnResize: onColumnResize,
       wrappedColumnKeys: wrappedColumnKeys,
       onWrappedColumnChange: (0, _platformFeatureFlags.getBooleanFF)('platform.linking-platform.datasource-word_wrap') ? onWrappedColumnChange : undefined
     }));
-  }, [status, columns, responseItems, hasNextPage, visibleColumnKeys, defaultVisibleColumnKeys, onNextPage, loadDatasourceDetails, handleVisibleColumnKeysChange, modalRenderInstanceId, extensionKey, columnCustomSizes, onColumnResize, wrappedColumnKeys, onWrappedColumnChange]);
+  }, [status, columns, responseItems, hasNextPage, visibleColumnKeys, defaultVisibleColumnKeys, onNextPage, loadDatasourceDetails, handleVisibleColumnKeysChange, extensionKey, columnCustomSizes, onColumnResize, wrappedColumnKeys, onWrappedColumnChange]);
   var resolvedWithNoResults = status === 'resolved' && !responseItems.length;
   var hasConfluenceSearchParams = selectedConfluenceSite && searchString;
   var selectedConfluenceSiteUrl = selectedConfluenceSite === null || selectedConfluenceSite === void 0 ? void 0 : selectedConfluenceSite.url;
@@ -450,7 +447,9 @@ var PlainConfluenceSearchConfigModal = exports.PlainConfluenceSearchConfigModal
   }, (0, _react2.jsx)(_linkUrl.default, {
     href: confluenceSearchUrl,
     target: "_blank",
-    testId: "item-count-url",
+    testId: "item-count-url"
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
+    ,
     style: {
       color: "var(--ds-text-accent-gray, ".concat(_colors.N800, ")")
     }
@@ -480,4 +479,6 @@ var analyticsContextData = _objectSpread(_objectSpread({}, _constants.componentM
 var contextData = _objectSpread(_objectSpread({}, analyticsContextData), {}, {
   attributes: _objectSpread({}, analyticsContextAttributes)
 });
-var ConfluenceSearchConfigModal = exports.ConfluenceSearchConfigModal = (0, _analyticsNext.withAnalyticsContext)(contextData)(PlainConfluenceSearchConfigModal);
+var ConfluenceSearchConfigModal = exports.ConfluenceSearchConfigModal = (0, _analyticsNext.withAnalyticsContext)(contextData)(function (props) {
+  return (0, _react2.jsx)(_datasourceExperienceId.DatasourceExperienceIdProvider, null, (0, _react2.jsx)(PlainConfluenceSearchConfigModal, props));
+});

package/dist/cjs/ui/datasource-table-view/datasourceTableView.js

@@ -7,7 +7,6 @@ Object.defineProperty(exports, "__esModule", {
 exports.DatasourceTableView = void 0;
 var _react = require("react");
 var _react2 = require("@emotion/react");
-var _uuid = require("uuid");
 var _analyticsNext = require("@atlaskit/analytics-next");
 var _intlMessagesProvider = require("@atlaskit/intl-messages-provider");
 var _analytics = require("../../analytics");
@@ -16,6 +15,7 @@ var _ufoExperiences = require("../../analytics/ufoExperiences");
 var _useColumnPickerRenderedFailedUfoExperience = require("../../analytics/ufoExperiences/hooks/useColumnPickerRenderedFailedUfoExperience");
 var _useDataRenderedUfoExperience = require("../../analytics/ufoExperiences/hooks/useDataRenderedUfoExperience");
 var _fetchMessagesForLocale = require("../../common/utils/locale/fetch-messages-for-locale");
+var _datasourceExperienceId = require("../../contexts/datasource-experience-id");
 var _useDatasourceTableState = require("../../hooks/useDatasourceTableState");
 var _en = _interopRequireDefault(require("../../i18n/en"));
 var _styled = require("../../ui/issue-like-table/styled");
@@ -62,8 +62,7 @@ var DatasourceTableViewWithoutAnalytics = function DatasourceTableViewWithoutAna
     authDetails = _useDatasourceTableSt.authDetails;
   var _useDatasourceAnalyti = (0, _analytics.useDatasourceAnalyticsEvents)(),
     fireEvent = _useDatasourceAnalyti.fireEvent;
-  var _useRef = (0, _react.useRef)((0, _uuid.v4)()),
-    tableRenderInstanceId = _useRef.current;
+  var experienceId = (0, _datasourceExperienceId.useDatasourceExperienceId)();
   var visibleColumnCount = (0, _react.useRef)((visibleColumnKeys === null || visibleColumnKeys === void 0 ? void 0 : visibleColumnKeys.length) || 0);
 
   /*  Need this to make sure that the datasource in the editor gets updated new info if any edits are made in the modal
@@ -102,13 +101,13 @@ var DatasourceTableViewWithoutAnalytics = function DatasourceTableViewWithoutAna
     if (shouldStartUfoExperience) {
       (0, _ufoExperiences.startUfoExperience)({
         name: 'datasource-rendered'
-      }, tableRenderInstanceId);
+      }, experienceId);
     }
-  }, [datasourceId, parameters, status, tableRenderInstanceId, visibleColumnKeys]);
-  (0, _useColumnPickerRenderedFailedUfoExperience.useColumnPickerRenderedFailedUfoExperience)(status, tableRenderInstanceId);
+  }, [datasourceId, parameters, status, experienceId, visibleColumnKeys]);
+  (0, _useColumnPickerRenderedFailedUfoExperience.useColumnPickerRenderedFailedUfoExperience)(status, experienceId);
   (0, _useDataRenderedUfoExperience.useDataRenderedUfoExperience)({
     status: status,
-    experienceId: tableRenderInstanceId,
+    experienceId: experienceId,
     itemCount: responseItems.length,
     extensionKey: extensionKey
   });
@@ -172,7 +171,6 @@ var DatasourceTableViewWithoutAnalytics = function DatasourceTableViewWithoutAna
     wrappedColumnKeys: wrappedColumnKeys,
     onWrappedColumnChange: onWrappedColumnChange,
     scrollableContainerHeight: _styled.ScrollableContainerHeight,
-    parentContainerRenderInstanceId: tableRenderInstanceId,
     extensionKey: extensionKey
   }) : (0, _react2.jsx)(_emptyState.default, {
     testId: "datasource-table-view-skeleton",
@@ -185,4 +183,6 @@ var DatasourceTableViewWithoutAnalytics = function DatasourceTableViewWithoutAna
     url: url
   })));
 };
-var DatasourceTableView = exports.DatasourceTableView = (0, _analyticsNext.withAnalyticsContext)(_constants.componentMetadata.tableView)(DatasourceTableViewWithoutAnalytics);
+var DatasourceTableView = exports.DatasourceTableView = (0, _analyticsNext.withAnalyticsContext)(_constants.componentMetadata.tableView)(function (props) {
+  return (0, _react2.jsx)(_datasourceExperienceId.DatasourceExperienceIdProvider, null, (0, _react2.jsx)(DatasourceTableViewWithoutAnalytics, props));
+});

package/dist/cjs/ui/issue-like-table/column-picker/index.js

@@ -18,6 +18,7 @@ var _chevronDown = _interopRequireDefault(require("@atlaskit/icon/glyph/chevron-
 var _select = require("@atlaskit/select");
 var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
 var _ufoExperiences = require("../../../analytics/ufoExperiences");
+var _datasourceExperienceId = require("../../../contexts/datasource-experience-id");
 var _concatenatedMenuList = require("./concatenated-menu-list");
 var _messages = require("./messages");
 var _excluded = ["isOpen"];
@@ -26,9 +27,9 @@ var ColumnPicker = exports.ColumnPicker = function ColumnPicker(_ref) {
   var columns = _ref.columns,
     selectedColumnKeys = _ref.selectedColumnKeys,
     onSelectedColumnKeysChange = _ref.onSelectedColumnKeysChange,
-    onOpen = _ref.onOpen,
-    parentContainerRenderInstanceId = _ref.parentContainerRenderInstanceId;
+    onOpen = _ref.onOpen;
   var intl = (0, _reactIntlNext.useIntl)();
+  var experienceId = (0, _datasourceExperienceId.useDatasourceExperienceId)();
   var _useState = (0, _react.useState)([]),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     allOptions = _useState2[0],
@@ -107,13 +108,13 @@ var ColumnPicker = exports.ColumnPicker = function ColumnPicker(_ref) {
   }, [allOptions]);
   (0, _react.useEffect)(function () {
     if (allOptions.length) {
-      if (parentContainerRenderInstanceId) {
+      if (experienceId) {
         (0, _ufoExperiences.succeedUfoExperience)({
           name: 'column-picker-rendered'
-        }, parentContainerRenderInstanceId);
+        }, experienceId);
       }
     }
-  }, [allOptions, parentContainerRenderInstanceId]);
+  }, [allOptions, experienceId]);
   return (0, _react2.jsx)(_select.PopupSelect, {
     classNamePrefix: 'column-picker-popup',
     testId: 'column-picker-popup',

package/dist/cjs/ui/issue-like-table/index.js

@@ -29,6 +29,7 @@ var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
 var _widthDetector = require("@atlaskit/width-detector");
 var _ufoExperiences = require("../../analytics/ufoExperiences");
 var _zindex = require("../../common/zindex");
+var _datasourceExperienceId = require("../../contexts/datasource-experience-id");
 var _columnPicker = require("./column-picker");
 var _dragColumnPreview = require("./drag-column-preview");
 var _draggableTableHeading = require("./draggable-table-heading");
@@ -290,12 +291,12 @@ var IssueLikeDataTableView = exports.IssueLikeDataTableView = function IssueLike
     status = _ref5.status,
     hasNextPage = _ref5.hasNextPage,
     scrollableContainerHeight = _ref5.scrollableContainerHeight,
-    parentContainerRenderInstanceId = _ref5.parentContainerRenderInstanceId,
     extensionKey = _ref5.extensionKey;
   var tableId = (0, _react.useMemo)(function () {
     return Symbol('unique-id');
   }, []);
   var intl = (0, _reactIntlNext.useIntl)();
+  var experienceId = (0, _datasourceExperienceId.useDatasourceExperienceId)();
   var tableHeaderRowRef = (0, _react.useRef)(null);
   var _useState = (0, _react.useState)(null),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
@@ -332,12 +333,12 @@ var IssueLikeDataTableView = exports.IssueLikeDataTableView = function IssueLike
     }
   }, [columns, visibleColumnKeys, hasFullSchema]);
   (0, _react.useEffect)(function () {
-    if (parentContainerRenderInstanceId && status === 'resolved') {
+    if (experienceId && status === 'resolved') {
       (0, _ufoExperiences.succeedUfoExperience)({
         name: 'datasource-rendered'
-      }, parentContainerRenderInstanceId);
+      }, experienceId);
     }
-  }, [parentContainerRenderInstanceId, status]);
+  }, [experienceId, status]);
   var visibleSortedColumns = (0, _react.useMemo)(function () {
     return visibleColumnKeys.map(function (visibleKey) {
       return orderedColumns.find(function (_ref6) {
@@ -550,13 +551,13 @@ var IssueLikeDataTableView = exports.IssueLikeDataTableView = function IssueLike
           }
           return _context.abrupt("return");
         case 2:
-          if (parentContainerRenderInstanceId) {
+          if (experienceId) {
             (0, _ufoExperiences.startUfoExperience)({
               name: 'column-picker-rendered',
               metadata: {
                 extensionKey: extensionKey !== null && extensionKey !== void 0 ? extensionKey : undefined
               }
-            }, parentContainerRenderInstanceId);
+            }, experienceId);
           }
           _context.prev = 3;
           _context.next = 6;
@@ -574,7 +575,7 @@ var IssueLikeDataTableView = exports.IssueLikeDataTableView = function IssueLike
           return _context.stop();
       }
     }, _callee, null, [[3, 9]]);
-  })), [parentContainerRenderInstanceId, extensionKey, hasFullSchema, onLoadDatasourceDetails]);
+  })), [experienceId, extensionKey, hasFullSchema, onLoadDatasourceDetails]);
   var isEditable = onVisibleColumnKeysChange && hasData;
   return (0, _react2.jsx)("div", {
     /* There is required contentEditable={true} in editor-card-plugin
@@ -662,8 +663,7 @@ var IssueLikeDataTableView = exports.IssueLikeDataTableView = function IssueLike
     columns: hasFullSchema ? orderedColumns : [],
     selectedColumnKeys: hasFullSchema ? visibleColumnKeys : [],
     onSelectedColumnKeysChange: onSelectedColumnKeysChange,
-    onOpen: handlePickerOpen,
-    parentContainerRenderInstanceId: parentContainerRenderInstanceId
+    onOpen: handlePickerOpen
   })))), (0, _react2.jsx)("tbody", {
     css: noDefaultBorderStyles,
     "data-testid": testId && "".concat(testId, "--body")

package/dist/cjs/ui/jira-issues-modal/modal/index.js

@@ -4,14 +4,13 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.PlainJiraIssuesConfigModal = exports.JiraIssuesConfigModal = void 0;
+exports.JiraIssuesConfigModal = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = require("react");
 var _react2 = require("@emotion/react");
 var _reactIntlNext = require("react-intl-next");
-var _uuid = require("uuid");
 var _analyticsNext = require("@atlaskit/analytics-next");
 var _standardButton = _interopRequireDefault(require("@atlaskit/button/standard-button"));
 var _intlMessagesProvider = require("@atlaskit/intl-messages-provider");
@@ -28,6 +27,7 @@ var _useDataRenderedUfoExperience = require("../../../analytics/ufoExperiences/h
 var _utils = require("../../../analytics/utils");
 var _adf = require("../../../common/utils/adf");
 var _fetchMessagesForLocale = require("../../../common/utils/locale/fetch-messages-for-locale");
+var _datasourceExperienceId = require("../../../contexts/datasource-experience-id");
 var _useDatasourceTableState = require("../../../hooks/useDatasourceTableState");
 var _en = _interopRequireDefault(require("../../../i18n/en"));
 var _useAvailableSites2 = require("../../../services/useAvailableSites");
@@ -66,7 +66,7 @@ var getDisplayValue = function getDisplayValue(currentViewMode, itemCount) {
   return itemCount === 1 ? _types.DatasourceDisplay.INLINE : _types.DatasourceDisplay.DATASOURCE_INLINE;
 };
 var jqlSupportDocumentLink = 'https://support.atlassian.com/jira-service-management-cloud/docs/use-advanced-search-with-jira-query-language-jql/';
-var PlainJiraIssuesConfigModal = exports.PlainJiraIssuesConfigModal = function PlainJiraIssuesConfigModal(props) {
+var PlainJiraIssuesConfigModal = function PlainJiraIssuesConfigModal(props) {
   var datasourceId = props.datasourceId,
     initialColumnCustomSizes = props.columnCustomSizes,
     initialWrappedColumnKeys = props.wrappedColumnKeys,
@@ -145,8 +145,7 @@ var PlainJiraIssuesConfigModal = exports.PlainJiraIssuesConfigModal = function P
     destinationObjectTypes = _useDatasourceTableSt.destinationObjectTypes;
   var _useDatasourceAnalyti = (0, _analytics.useDatasourceAnalyticsEvents)(),
     fireEvent = _useDatasourceAnalyti.fireEvent;
-  var _useRef = (0, _react.useRef)((0, _uuid.v4)()),
-    modalRenderInstanceId = _useRef.current;
+  var experienceId = (0, _datasourceExperienceId.useDatasourceExperienceId)();
   var analyticsPayload = (0, _react.useMemo)(function () {
     return {
       extensionKey: extensionKey,
@@ -172,12 +171,12 @@ var PlainJiraIssuesConfigModal = exports.PlainJiraIssuesConfigModal = function P
     if (shouldStartUfoExperience) {
       (0, _ufoExperiences.startUfoExperience)({
         name: 'datasource-rendered'
-      }, modalRenderInstanceId);
+      }, experienceId);
     }
-  }, [modalRenderInstanceId, status]);
+  }, [experienceId, status]);
   (0, _useDataRenderedUfoExperience.useDataRenderedUfoExperience)({
     status: status,
-    experienceId: modalRenderInstanceId,
+    experienceId: experienceId,
     itemCount: responseItems.length,
     canBeLink: currentViewMode === 'inline',
     extensionKey: extensionKey
@@ -235,7 +234,7 @@ var PlainJiraIssuesConfigModal = exports.PlainJiraIssuesConfigModal = function P
       fireCountViewedEvent();
     }
   }, [currentViewMode, status, fireIssueViewAnalytics, fireCountViewedEvent]);
-  (0, _useColumnPickerRenderedFailedUfoExperience.useColumnPickerRenderedFailedUfoExperience)(status, modalRenderInstanceId);
+  (0, _useColumnPickerRenderedFailedUfoExperience.useColumnPickerRenderedFailedUfoExperience)(status, experienceId);
   var onSearch = (0, _react.useCallback)(function (newParameters, _ref) {
     var searchMethod = _ref.searchMethod,
       basicFilterSelections = _ref.basicFilterSelections,
@@ -378,14 +377,13 @@ var PlainJiraIssuesConfigModal = exports.PlainJiraIssuesConfigModal = function P
       onNextPage: handleOnNextPage,
       onLoadDatasourceDetails: loadDatasourceDetails,
       onVisibleColumnKeysChange: handleVisibleColumnKeysChange,
-      parentContainerRenderInstanceId: modalRenderInstanceId,
       extensionKey: extensionKey,
       columnCustomSizes: columnCustomSizes,
       onColumnResize: onColumnResize,
       wrappedColumnKeys: wrappedColumnKeys,
       onWrappedColumnChange: (0, _platformFeatureFlags.getBooleanFF)('platform.linking-platform.datasource-word_wrap') ? onWrappedColumnChange : undefined
     }));
-  }, [status, columns, responseItems, hasNextPage, visibleColumnKeys, defaultVisibleColumnKeys, handleOnNextPage, loadDatasourceDetails, handleVisibleColumnKeysChange, modalRenderInstanceId, extensionKey, columnCustomSizes, onColumnResize, wrappedColumnKeys, onWrappedColumnChange]);
+  }, [status, columns, responseItems, hasNextPage, visibleColumnKeys, defaultVisibleColumnKeys, handleOnNextPage, loadDatasourceDetails, handleVisibleColumnKeysChange, extensionKey, columnCustomSizes, onColumnResize, wrappedColumnKeys, onWrappedColumnChange]);
   var renderCountModeContent = (0, _react.useCallback)(function () {
     var selectedJiraSiteUrl = selectedJiraSite === null || selectedJiraSite === void 0 ? void 0 : selectedJiraSite.url;
     if (status === 'unauthorized') {
@@ -488,7 +486,9 @@ var PlainJiraIssuesConfigModal = exports.PlainJiraIssuesConfigModal = function P
   }, (0, _react2.jsx)(_linkUrl.default, {
     href: jqlUrl,
     target: "_blank",
-    testId: "item-count-url",
+    testId: "item-count-url"
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
+    ,
     style: {
       color: "var(--ds-text-accent-gray, ".concat(_colors.N800, ")")
     }
@@ -518,4 +518,6 @@ var analyticsContextData = _objectSpread(_objectSpread({}, _constants.componentM
 var contextData = _objectSpread(_objectSpread({}, analyticsContextData), {}, {
   attributes: _objectSpread({}, analyticsContextAttributes)
 });
-var JiraIssuesConfigModal = exports.JiraIssuesConfigModal = (0, _analyticsNext.withAnalyticsContext)(contextData)(PlainJiraIssuesConfigModal);
+var JiraIssuesConfigModal = exports.JiraIssuesConfigModal = (0, _analyticsNext.withAnalyticsContext)(contextData)(function (props) {
+  return (0, _react2.jsx)(_datasourceExperienceId.DatasourceExperienceIdProvider, null, (0, _react2.jsx)(PlainJiraIssuesConfigModal, props));
+});

package/dist/es2019/contexts/datasource-experience-id/index.js

@@ -0,0 +1,19 @@
+import React, { useContext, useMemo } from 'react';
+import { v4 as uuidv4 } from 'uuid';
+const DatasourceExperienceIdContext = /*#__PURE__*/React.createContext(undefined);
+const DatasourceExperienceIdProvider = ({
+  children
+}) => {
+  const value = useMemo(() => uuidv4(), []);
+  return /*#__PURE__*/React.createElement(DatasourceExperienceIdContext.Provider, {
+    value: value
+  }, children);
+};
+const useDatasourceExperienceId = () => {
+  const context = useContext(DatasourceExperienceIdContext);
+  if (!context) {
+    throw Error('useDatasourceExperienceId() must be wrapped in <DatasourceExperienceIdProvider>');
+  }
+  return context;
+};
+export { DatasourceExperienceIdProvider, useDatasourceExperienceId };

package/dist/es2019/ui/assets-modal/modal/index.js

@@ -3,7 +3,6 @@ import _extends from "@babel/runtime/helpers/extends";
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { css, jsx } from '@emotion/react';
 import { FormattedMessage } from 'react-intl-next';
-import { v4 as uuidv4 } from 'uuid';
 import { withAnalyticsContext } from '@atlaskit/analytics-next';
 import Button from '@atlaskit/button/standard-button';
 import { IntlMessagesProvider } from '@atlaskit/intl-messages-provider';
@@ -16,6 +15,7 @@ import { useColumnPickerRenderedFailedUfoExperience } from '../../../analytics/u
 import { useDataRenderedUfoExperience } from '../../../analytics/ufoExperiences/hooks/useDataRenderedUfoExperience';
 import { buildDatasourceAdf } from '../../../common/utils/adf';
 import { fetchMessagesForLocale } from '../../../common/utils/locale/fetch-messages-for-locale';
+import { DatasourceExperienceIdProvider, useDatasourceExperienceId } from '../../../contexts/datasource-experience-id';
 import { useAssetsClient } from '../../../hooks/useAssetsClient';
 import { useDatasourceTableState } from '../../../hooks/useDatasourceTableState';
 import i18nEN from '../../../i18n/en';
@@ -31,6 +31,7 @@ import { MODAL_HEIGHT, RenderAssetsContent } from './render-assets-content';
 const modalBodyErrorWrapperStyles = css({
   alignItems: 'center',
   display: 'grid',
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
   height: MODAL_HEIGHT
 });
 const AssetsModalTitle = jsx(ModalTitle, null, jsx(FormattedMessage, modalMessages.insertObjectsTitle));
@@ -50,9 +51,7 @@ const PlainAssetsConfigModal = props => {
   const {
     fireEvent
   } = useDatasourceAnalyticsEvents();
-  const {
-    current: modalRenderInstanceId
-  } = useRef(uuidv4());
+  const experienceId = useDatasourceExperienceId();
   const {
     workspaceId,
     workspaceError,
@@ -161,17 +160,17 @@ const PlainAssetsConfigModal = props => {
     if (shouldStartUfoExperience) {
       startUfoExperience({
         name: 'datasource-rendered'
-      }, modalRenderInstanceId);
+      }, experienceId);
     }
-  }, [modalRenderInstanceId, status]);
+  }, [experienceId, status]);
   useDataRenderedUfoExperience({
     status,
-    experienceId: modalRenderInstanceId,
+    experienceId: experienceId,
     itemCount: responseItems.length,
     canBeLink: false,
     extensionKey
   });
-  useColumnPickerRenderedFailedUfoExperience(status, modalRenderInstanceId);
+  useColumnPickerRenderedFailedUfoExperience(status, experienceId);
   /* ------------------------------ END OBSERVABILITY ------------------------------ */
 
   const onVisibleColumnKeysChange = useCallback(visibleColumnKeys => {
@@ -327,8 +326,7 @@ const PlainAssetsConfigModal = props => {
     hasNextPage: hasNextPage,
     loadDatasourceDetails: loadDatasourceDetails,
     columns: columns,
-    defaultVisibleColumnKeys: defaultVisibleColumnKeys,
-    modalRenderInstanceId: modalRenderInstanceId
+    defaultVisibleColumnKeys: defaultVisibleColumnKeys
   })), jsx(ModalFooter, null, jsx(CancelButton, {
     onCancel: onCancel,
     getAnalyticsPayload: getCancelButtonAnalyticsPayload,
@@ -357,4 +355,4 @@ const contextData = {
     ...analyticsContextAttributes
   }
 };
-export const AssetsConfigModal = withAnalyticsContext(contextData)(PlainAssetsConfigModal);
+export const AssetsConfigModal = withAnalyticsContext(contextData)(props => jsx(DatasourceExperienceIdProvider, null, jsx(PlainAssetsConfigModal, props)));

package/dist/es2019/ui/assets-modal/modal/render-assets-content/index.js

@@ -56,7 +56,6 @@ export const RenderAssetsContent = props => {
     columns,
     defaultVisibleColumnKeys,
     onVisibleColumnKeysChange,
-    modalRenderInstanceId,
     isFetchingInitialData
   } = props;
   const resolvedWithNoResults = status === 'resolved' && !responseItems.length;
@@ -71,9 +70,8 @@ export const RenderAssetsContent = props => {
     visibleColumnKeys: visibleColumnKeys || defaultVisibleColumnKeys,
     onNextPage: onNextPage,
     onLoadDatasourceDetails: loadDatasourceDetails,
-    onVisibleColumnKeysChange: onVisibleColumnKeysChange,
-    parentContainerRenderInstanceId: modalRenderInstanceId
-  })), [columns, defaultVisibleColumnKeys, hasNextPage, loadDatasourceDetails, onNextPage, onVisibleColumnKeysChange, responseItems, status, visibleColumnKeys, modalRenderInstanceId]);
+    onVisibleColumnKeysChange: onVisibleColumnKeysChange
+  })), [columns, defaultVisibleColumnKeys, hasNextPage, loadDatasourceDetails, onNextPage, onVisibleColumnKeysChange, responseItems, status, visibleColumnKeys]);
   const renderAssetsContentView = useCallback(() => {
     if (isFetchingInitialData) {
       // Placing this check first as it's a priority before all others

package/dist/es2019/ui/confluence-search-modal/modal/index.js

@@ -3,7 +3,6 @@ import _extends from "@babel/runtime/helpers/extends";
 import { Fragment, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { jsx } from '@emotion/react';
 import { FormattedMessage, FormattedNumber } from 'react-intl-next';
-import { v4 as uuidv4 } from 'uuid';
 import { withAnalyticsContext } from '@atlaskit/analytics-next';
 import Button from '@atlaskit/button/standard-button';
 import { IntlMessagesProvider } from '@atlaskit/intl-messages-provider';
@@ -17,6 +16,7 @@ import { componentMetadata } from '../../../analytics/constants';
 import { DatasourceAction, DatasourceDisplay, DatasourceSearchMethod } from '../../../analytics/types';
 import { buildDatasourceAdf } from '../../../common/utils/adf';
 import { fetchMessagesForLocale } from '../../../common/utils/locale/fetch-messages-for-locale';
+import { DatasourceExperienceIdProvider } from '../../../contexts/datasource-experience-id';
 import { useDatasourceTableState } from '../../../hooks/useDatasourceTableState';
 import i18nEN from '../../../i18n/en';
 import { useAvailableSites } from '../../../services/useAvailableSites';
@@ -48,9 +48,6 @@ const searchCountStyles = xcss({
   fontWeight: 600
 });
 export const PlainConfluenceSearchConfigModal = props => {
-  const {
-    current: modalRenderInstanceId
-  } = useRef(uuidv4());
   const {
     datasourceId,
     columnCustomSizes: initialColumnCustomSizes,
@@ -189,13 +186,12 @@ export const PlainConfluenceSearchConfigModal = props => {
     onNextPage: onNextPage,
     onLoadDatasourceDetails: loadDatasourceDetails,
     onVisibleColumnKeysChange: handleVisibleColumnKeysChange,
-    parentContainerRenderInstanceId: modalRenderInstanceId,
     extensionKey: extensionKey,
     columnCustomSizes: columnCustomSizes,
     onColumnResize: onColumnResize,
     wrappedColumnKeys: wrappedColumnKeys,
     onWrappedColumnChange: getBooleanFF('platform.linking-platform.datasource-word_wrap') ? onWrappedColumnChange : undefined
-  })), [status, columns, responseItems, hasNextPage, visibleColumnKeys, defaultVisibleColumnKeys, onNextPage, loadDatasourceDetails, handleVisibleColumnKeysChange, modalRenderInstanceId, extensionKey, columnCustomSizes, onColumnResize, wrappedColumnKeys, onWrappedColumnChange]);
+  })), [status, columns, responseItems, hasNextPage, visibleColumnKeys, defaultVisibleColumnKeys, onNextPage, loadDatasourceDetails, handleVisibleColumnKeysChange, extensionKey, columnCustomSizes, onColumnResize, wrappedColumnKeys, onWrappedColumnChange]);
   const resolvedWithNoResults = status === 'resolved' && !responseItems.length;
   const hasConfluenceSearchParams = selectedConfluenceSite && searchString;
   const selectedConfluenceSiteUrl = selectedConfluenceSite === null || selectedConfluenceSite === void 0 ? void 0 : selectedConfluenceSite.url;
@@ -424,7 +420,9 @@ export const PlainConfluenceSearchConfigModal = props => {
   }, jsx(LinkUrl, {
     href: confluenceSearchUrl,
     target: "_blank",
-    testId: "item-count-url",
+    testId: "item-count-url"
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
+    ,
     style: {
       color: `var(--ds-text-accent-gray, ${N800})`
     }
@@ -458,4 +456,4 @@ const contextData = {
     ...analyticsContextAttributes
   }
 };
-export const ConfluenceSearchConfigModal = withAnalyticsContext(contextData)(PlainConfluenceSearchConfigModal);
+export const ConfluenceSearchConfigModal = withAnalyticsContext(contextData)(props => jsx(DatasourceExperienceIdProvider, null, jsx(PlainConfluenceSearchConfigModal, props)));