@atlaskit/link-datasource 2.3.2 → 2.3.4

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @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
+
+-   [#102478](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/102478)
+    [`3378951608b0`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/3378951608b0) -
+    [ED-23332] Update adf-schema package to 36.10.1
+-   Updated dependencies
+
 ## 2.3.2
 
 ### 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/assets-modal/search-container/styled.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.SchemaSelectContainer = exports.FormRowContainer = exports.FormContainer = exports.FieldContainer = void 0;
 var _styled = _interopRequireDefault(require("@emotion/styled"));
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled -- To migrate as part of go/ui-styling-standard
 var FormRowContainer = exports.FormRowContainer = _styled.default.div(function (props) {
   return {
     alignItems: 'center',
@@ -15,6 +16,8 @@ var FormRowContainer = exports.FormRowContainer = _styled.default.div(function (
     width: '100%'
   };
 });
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled -- To migrate as part of go/ui-styling-standard
 var FormContainer = exports.FormContainer = _styled.default.form({
   display: 'grid',
   rowGap: "var(--ds-space-200, 16px)",
@@ -22,10 +25,13 @@ var FormContainer = exports.FormContainer = _styled.default.form({
 });
 
 // Override the top margin of fields
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled -- To migrate as part of go/ui-styling-standard
 var FieldContainer = exports.FieldContainer = _styled.default.div({
   flex: 1,
   marginTop: "var(--ds-space-negative-100, -8px)"
 });
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled -- To migrate as part of go/ui-styling-standard
 var SchemaSelectContainer = exports.SchemaSelectContainer = _styled.default.div({
   width: '100%',
   maxWidth: '386px'

package/dist/cjs/ui/common/modal/popup-select/trigger.js

@@ -23,6 +23,8 @@ var triggerButtonLabelStyles = (0, _primitives.xcss)({
 var badgeStyles = (0, _primitives.xcss)({
   marginLeft: 'space.050'
 });
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled -- To migrate as part of go/ui-styling-standard
 var LoadingStateAnimationWrapper = exports.LoadingStateAnimationWrapper = _styled.default.div({
   position: 'relative',
   animation: 'flickerAnimation 2s infinite',

package/dist/cjs/ui/confluence-search-modal/basic-filters/filters/date-range-picker/styled.js

@@ -8,6 +8,7 @@ exports.SelectDateRangeButton = exports.PopupComponentContainer = exports.DateRa
 var _styled = _interopRequireDefault(require("@emotion/styled"));
 var _colors = require("@atlaskit/theme/colors");
 var _constants = require("@atlaskit/theme/constants");
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled -- To migrate as part of go/ui-styling-standard
 var PopupComponentContainer = exports.PopupComponentContainer = _styled.default.div({
   boxSizing: 'border-box',
   display: 'block',
@@ -20,6 +21,8 @@ var PopupComponentContainer = exports.PopupComponentContainer = _styled.default.
   },
   boxShadow: "var(--ds-shadow-overlay, 0px 0px 1px 0px rgba(9, 30, 66, 0.31), 0px 3px 5px 0px rgba(9, 30, 66, 0.20))"
 });
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled -- To migrate as part of go/ui-styling-standard
 var CustomDropdown = exports.CustomDropdown = _styled.default.div({
   width: '340px',
   background: "var(--ds-background-input, ".concat(_colors.N0, ")"),
@@ -27,6 +30,8 @@ var CustomDropdown = exports.CustomDropdown = _styled.default.div({
   boxShadow: "var(--ds-shadow-overlay, 0px 0px 1px 0px rgba(9, 30, 66, 0.31), 0px 3px 5px 0px rgba(9, 30, 66, 0.20))",
   zIndex: _constants.layers.modal()
 });
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled -- To migrate as part of go/ui-styling-standard
 var CustomDropdownItem = exports.CustomDropdownItem = _styled.default.div(function (props) {
   return {
     height: '36px',
@@ -45,16 +50,22 @@ var CustomDropdownItem = exports.CustomDropdownItem = _styled.default.div(functi
     }
   };
 });
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled -- To migrate as part of go/ui-styling-standard
 var CustomDateWrapper = exports.CustomDateWrapper = _styled.default.div({
   padding: "var(--ds-space-150, 12px)",
   boxSizing: 'border-box'
 });
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled -- To migrate as part of go/ui-styling-standard
 var DatePickersWrapper = exports.DatePickersWrapper = _styled.default.div({
   display: 'flex',
   justifyContent: 'space-between',
   alignItems: 'center',
   width: '100%'
 });
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled -- To migrate as part of go/ui-styling-standard
 var SelectDateRangeButton = exports.SelectDateRangeButton = _styled.default.button({
   background: "var(--ds-background-accent-gray-subtler, ".concat(_colors.N20, ")"),
   border: 'none',
@@ -68,6 +79,8 @@ var SelectDateRangeButton = exports.SelectDateRangeButton = _styled.default.butt
     cursor: 'pointer'
   }
 });
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled -- To migrate as part of go/ui-styling-standard
 var DateRangeErrorMessage = exports.DateRangeErrorMessage = _styled.default.div({
   display: 'flex',
   lineHeight: 1.3333,

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/drag-column-preview.js

@@ -15,6 +15,7 @@ var _styled2 = require("./styled");
 
 var maxWidth = '200px';
 var firstLastChildOverride = "\n  &:first-of-type, &:last-of-type {\n    padding-left: ".concat("var(--ds-space-100, 8px)", ";\n    padding-right: ", "var(--ds-space-100, 8px)", ";\n  }\n");
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled -- To migrate as part of go/ui-styling-standard
 var TablePreviewHeading = (0, _styled.default)(_styled2.TableHeading)({
   overflow: 'hidden',
   textOverflow: 'ellipsis',
@@ -22,6 +23,8 @@ var TablePreviewHeading = (0, _styled.default)(_styled2.TableHeading)({
   background: "var(--ds-background-disabled, #091E4224)",
   maxWidth: maxWidth
 }, firstLastChildOverride);
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled -- To migrate as part of go/ui-styling-standard
 var TablePreviewCell = _styled.default.td({
   overflow: 'hidden',
   textOverflow: 'ellipsis',

package/dist/cjs/ui/issue-like-table/draggable-table-heading.js

@@ -38,6 +38,7 @@ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return
 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; }
 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-next-line @atlaskit/ui-styling-standard/no-styled -- To migrate as part of go/ui-styling-standard
 var DropdownParent = _styled.default.div({
   display: 'flex',
   alignItems: 'center',

package/dist/cjs/ui/issue-like-table/empty-state/type.js

@@ -13,6 +13,7 @@ var _3 = _interopRequireDefault(require("@atlaskit/icon-object/glyph/epic/16"));
 var _4 = _interopRequireDefault(require("@atlaskit/icon-object/glyph/issue/16"));
 var _5 = _interopRequireDefault(require("@atlaskit/icon-object/glyph/story/16"));
 var _6 = _interopRequireDefault(require("@atlaskit/icon-object/glyph/task/16"));
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled -- To migrate as part of go/ui-styling-standard
 var IconWrapper = _styled.default.div({
   display: 'flex',
   alignItems: 'center',

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");
@@ -54,6 +55,7 @@ var truncateTextStyles = (0, _react2.css)({
   whiteSpace: 'nowrap'
 });
 var columnPickerWidth = 80;
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled -- To migrate as part of go/ui-styling-standard
 var ColumnPickerHeader = _styled.default.th((0, _defineProperty2.default)({}, "".concat((0, _styled2.withTablePluginHeaderPrefix)('&:last-of-type')), {
   boxSizing: 'border-box',
   border: 0,
@@ -75,6 +77,8 @@ var truncateStyles = (0, _react2.css)({
   textOverflow: 'ellipsis',
   whiteSpace: 'nowrap'
 });
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled -- To migrate as part of go/ui-styling-standard
 var TableCell = _styled.default.td((_styled$td = {}, (0, _defineProperty2.default)(_styled$td, "".concat((0, _styled2.withTablePluginBodyPrefix)()), {
   /* First section here is to override things editor table plugin css defines */
   font: _styled2.fieldTextFontSize,
@@ -287,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),
@@ -329,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) {
@@ -547,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;
@@ -571,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
@@ -659,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/issue-like-table/render-type/date-time/index.js

@@ -24,6 +24,8 @@ var timeOptions = {
   hour: '2-digit',
   minute: '2-digit'
 };
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled -- To migrate as part of go/ui-styling-standard
 var DateTimeWrapper = _styled.default.span({
   fontSize: _styled2.fieldTextFontSize
 });

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

@@ -8,6 +8,7 @@ exports.default = exports.ICON_TYPE_TEST_ID = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _styled = _interopRequireDefault(require("@emotion/styled"));
 var _image = _interopRequireDefault(require("@atlaskit/image"));
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled -- To migrate as part of go/ui-styling-standard
 var IconWrapper = _styled.default.div({
   display: 'flex',
   alignItems: 'center',

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

@@ -9,6 +9,8 @@ var _react = _interopRequireDefault(require("react"));
 var _styled = _interopRequireDefault(require("@emotion/styled"));
 var _styled2 = require("../../styled");
 var TEXT_TYPE_TEST_ID = exports.TEXT_TYPE_TEST_ID = 'link-datasource-render-type--text';
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled -- To migrate as part of go/ui-styling-standard
 var TextWrapper = _styled.default.span({
   fontSize: _styled2.fieldTextFontSize
 });

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

@@ -32,6 +32,8 @@ var avatarWrapperStyles = (0, _primitives.xcss)({
 var widthObserverWrapperStyles = (0, _primitives.xcss)({
   position: 'relative'
 });
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled -- To migrate as part of go/ui-styling-standard
 var AvatarGroupWrapperStyles = _styled.default.div({
   ul: {
     paddingLeft: '0px !important'

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

@@ -12,6 +12,8 @@ var _typography = require("@atlaskit/theme/typography");
 var _styled$th;
 var ScrollableContainerHeight = exports.ScrollableContainerHeight = 590;
 var fieldTextFontSize = exports.fieldTextFontSize = "var(--ds-font-body, ".concat(_typography.fontFallback.body.medium, ")");
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled -- To migrate as part of go/ui-styling-standard
 var Table = exports.Table = _styled.default.table({
   width: '100%'
 });
@@ -30,6 +32,8 @@ var withTablePluginPrefix = exports.withTablePluginPrefix = function withTablePl
 };
 var withTablePluginHeaderPrefix = exports.withTablePluginHeaderPrefix = withTablePluginPrefix.bind(null, 'thead');
 var withTablePluginBodyPrefix = exports.withTablePluginBodyPrefix = withTablePluginPrefix.bind(null, 'tbody');
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled -- To migrate as part of go/ui-styling-standard
 var TableHeading = exports.TableHeading = _styled.default.th((_styled$th = {}, (0, _defineProperty2.default)(_styled$th, "".concat(withTablePluginHeaderPrefix()), {
   border: 0,
   position: 'relative',