@atlaskit/link-datasource 2.3.3 → 2.3.5

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

@@ -7,7 +7,6 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 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';
@@ -20,6 +19,8 @@ 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 { UserInteractionsProvider, useUserInteractions } from '../../../contexts/user-interactions';
 import { useAssetsClient } from '../../../hooks/useAssetsClient';
 import { useDatasourceTableState } from '../../../hooks/useDatasourceTableState';
 import i18nEN from '../../../i18n/en';
@@ -35,6 +36,7 @@ import { MODAL_HEIGHT, RenderAssetsContent } from './render-assets-content';
 var 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
 });
 var AssetsModalTitle = jsx(ModalTitle, null, jsx(FormattedMessage, modalMessages.insertObjectsTitle));
@@ -66,8 +68,7 @@ var PlainAssetsConfigModal = function PlainAssetsConfigModal(props) {
     setErrorState = _useState10[1];
   var _useDatasourceAnalyti = useDatasourceAnalyticsEvents(),
     fireEvent = _useDatasourceAnalyti.fireEvent;
-  var _useRef = useRef(uuidv4()),
-    modalRenderInstanceId = _useRef.current;
+  var experienceId = useDatasourceExperienceId();
   var _useAssetsClient = useAssetsClient(initialParameters),
     workspaceId = _useAssetsClient.workspaceId,
     workspaceError = _useAssetsClient.workspaceError,
@@ -135,7 +136,7 @@ var PlainAssetsConfigModal = function PlainAssetsConfigModal(props) {
 
   /* ------------------------------ OBSERVABILITY ------------------------------ */
   var searchCount = useRef(0);
-  var userInteractionActions = useRef(new Set());
+  var userInteractions = useUserInteractions();
   var visibleColumnCount = useRef((visibleColumnKeys === null || visibleColumnKeys === void 0 ? void 0 : visibleColumnKeys.length) || 0);
   var isDataReady = (visibleColumnKeys || []).length > 0;
   var analyticsPayload = useMemo(function () {
@@ -176,17 +177,17 @@ var PlainAssetsConfigModal = function PlainAssetsConfigModal(props) {
     if (shouldStartUfoExperience) {
       startUfoExperience({
         name: 'datasource-rendered'
-      }, modalRenderInstanceId);
+      }, experienceId);
     }
-  }, [modalRenderInstanceId, status]);
+  }, [experienceId, status]);
   useDataRenderedUfoExperience({
     status: status,
-    experienceId: modalRenderInstanceId,
+    experienceId: experienceId,
     itemCount: responseItems.length,
     canBeLink: false,
     extensionKey: extensionKey
   });
-  useColumnPickerRenderedFailedUfoExperience(status, modalRenderInstanceId);
+  useColumnPickerRenderedFailedUfoExperience(status, experienceId);
   /* ------------------------------ END OBSERVABILITY ------------------------------ */
 
   var onVisibleColumnKeysChange = useCallback(function (visibleColumnKeys) {
@@ -227,7 +228,7 @@ var PlainAssetsConfigModal = function PlainAssetsConfigModal(props) {
         display: DatasourceDisplay.DATASOURCE_TABLE,
         searchCount: searchCount.current,
         searchMethod: DatasourceSearchMethod.DATASOURCE_SEARCH_QUERY,
-        actions: Array.from(userInteractionActions.current)
+        actions: userInteractions.get()
       }),
       eventType: 'ui'
     });
@@ -261,15 +262,15 @@ var PlainAssetsConfigModal = function PlainAssetsConfigModal(props) {
         }]
       }), consumerEvent);
     }
-  }, [aql, schemaId, workspaceId, analyticsPayload, totalCount, retrieveUrlForSmartCardRender, responseItems.length, onInsert, datasourceId, visibleColumnKeys]);
+  }, [aql, schemaId, workspaceId, analyticsPayload, totalCount, retrieveUrlForSmartCardRender, responseItems.length, onInsert, datasourceId, visibleColumnKeys, userInteractions]);
   var handleOnSearch = useCallback(function (searchAql, searchSchemaId) {
     if (schemaId !== searchSchemaId || aql !== searchAql || status === 'rejected') {
       searchCount.current++;
       if (schemaId !== searchSchemaId) {
-        userInteractionActions.current.add(DatasourceAction.SCHEMA_UPDATED);
+        userInteractions.add(DatasourceAction.SCHEMA_UPDATED);
       }
       if (aql !== searchAql) {
-        userInteractionActions.current.add(DatasourceAction.QUERY_UPDATED);
+        userInteractions.add(DatasourceAction.QUERY_UPDATED);
       }
       setAql(searchAql);
       setSchemaId(searchSchemaId);
@@ -280,7 +281,7 @@ var PlainAssetsConfigModal = function PlainAssetsConfigModal(props) {
         shouldResetColumns: true
       });
     }
-  }, [aql, reset, schemaId, status]);
+  }, [aql, reset, schemaId, status, userInteractions]);
   var renderErrorState = useCallback(function () {
     if (errorState) {
       switch (errorState) {
@@ -318,9 +319,9 @@ var PlainAssetsConfigModal = function PlainAssetsConfigModal(props) {
   var getCancelButtonAnalyticsPayload = useCallback(function () {
     return _objectSpread(_objectSpread({}, analyticsPayload), {}, {
       searchCount: searchCount.current,
-      actions: Array.from(userInteractionActions.current)
+      actions: userInteractions.get()
     });
-  }, [analyticsPayload]);
+  }, [analyticsPayload, userInteractions]);
   return jsx(IntlMessagesProvider, {
     defaultMessages: i18nEN,
     loaderFn: fetchMessagesForLocale
@@ -343,8 +344,7 @@ var PlainAssetsConfigModal = function PlainAssetsConfigModal(props) {
     hasNextPage: hasNextPage,
     loadDatasourceDetails: loadDatasourceDetails,
     columns: columns,
-    defaultVisibleColumnKeys: defaultVisibleColumnKeys,
-    modalRenderInstanceId: modalRenderInstanceId
+    defaultVisibleColumnKeys: defaultVisibleColumnKeys
   })), jsx(ModalFooter, null, jsx(CancelButton, {
     onCancel: onCancel,
     getAnalyticsPayload: getCancelButtonAnalyticsPayload,
@@ -369,4 +369,6 @@ var analyticsContextData = _objectSpread(_objectSpread({}, componentMetadata.con
 var contextData = _objectSpread(_objectSpread({}, analyticsContextData), {}, {
   attributes: _objectSpread({}, analyticsContextAttributes)
 });
-export var AssetsConfigModal = withAnalyticsContext(contextData)(PlainAssetsConfigModal);
+export var AssetsConfigModal = withAnalyticsContext(contextData)(function (props) {
+  return jsx(DatasourceExperienceIdProvider, null, jsx(UserInteractionsProvider, null, jsx(PlainAssetsConfigModal, props)));
+});

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

@@ -65,7 +65,6 @@ export var RenderAssetsContent = function RenderAssetsContent(props) {
     columns = props.columns,
     defaultVisibleColumnKeys = props.defaultVisibleColumnKeys,
     onVisibleColumnKeysChange = props.onVisibleColumnKeysChange,
-    modalRenderInstanceId = props.modalRenderInstanceId,
     isFetchingInitialData = props.isFetchingInitialData;
   var resolvedWithNoResults = status === 'resolved' && !responseItems.length;
   var issueLikeDataTableView = useMemo(function () {
@@ -80,10 +79,9 @@ export var RenderAssetsContent = function RenderAssetsContent(props) {
       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 = useCallback(function () {
     if (isFetchingInitialData) {
       // Placing this check first as it's a priority before all others

package/dist/esm/ui/assets-modal/search-container/aql-search-input/index.js

@@ -78,6 +78,7 @@ export var AqlSearchInput = function AqlSearchInput(_ref) {
     var fieldProps = _ref2.fieldProps;
     return jsx(Fragment, null, jsx(Textfield, _extends({}, fieldProps, {
       elemBeforeInput: jsx("span", {
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
         style: {
           paddingLeft: "var(--ds-space-075, 6px)",
           width: 24

package/dist/esm/ui/confluence-search-modal/basic-filters/filters/date-range-picker/trigger.js

@@ -12,7 +12,10 @@ export var PopupTrigger = function PopupTrigger(_ref) {
     testId: 'confluence-search-modal--date-range-button',
     onClick: onClick,
     isSelected: isSelected,
-    iconAfter: /*#__PURE__*/React.createElement("span", {
+    iconAfter:
+    /*#__PURE__*/
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+    React.createElement("span", {
       style: {
         display: 'flex',
         alignItems: 'center'

package/dist/esm/ui/confluence-search-modal/modal/confluence-search-initial-state-svg.js

@@ -100,7 +100,9 @@ export var ConfluenceSearchInitialStateSVG = function ConfluenceSearchInitialSta
     d: "M114.678 51.6186C110.935 54.7774 108.407 59.1306 107.525 63.9371C106.643 68.7435 107.46 73.706 109.838 77.9797C112.216 82.2534 116.008 85.574 120.567 87.3761C125.127 89.1783 130.173 89.3507 134.846 87.8638C139.519 86.377 143.53 83.3229 146.197 79.2215C148.863 75.1202 150.02 70.2251 149.47 65.3697C148.92 60.5144 146.698 55.9989 143.181 52.5921C139.665 49.1853 135.071 47.0979 130.183 46.6851C127.4 46.4461 124.596 46.7591 121.935 47.6059C119.273 48.4527 116.807 49.8165 114.678 51.6186Z",
     fill: "white"
   }), /*#__PURE__*/React.createElement("mask", {
-    id: "mask0_1_10772",
+    id: "mask0_1_10772"
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+    ,
     style: {
       maskType: 'alpha'
     },

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

@@ -7,7 +7,6 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 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';
@@ -21,6 +20,8 @@ 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 { UserInteractionsProvider, useUserInteractions } from '../../../contexts/user-interactions';
 import { useDatasourceTableState } from '../../../hooks/useDatasourceTableState';
 import i18nEN from '../../../i18n/en';
 import { useAvailableSites } from '../../../services/useAvailableSites';
@@ -52,8 +53,6 @@ var searchCountStyles = xcss({
   fontWeight: 600
 });
 export var PlainConfluenceSearchConfigModal = function PlainConfluenceSearchConfigModal(props) {
-  var _useRef = useRef(uuidv4()),
-    modalRenderInstanceId = _useRef.current;
   var datasourceId = props.datasourceId,
     initialColumnCustomSizes = props.columnCustomSizes,
     initialWrappedColumnKeys = props.wrappedColumnKeys,
@@ -101,7 +100,7 @@ export var PlainConfluenceSearchConfigModal = function PlainConfluenceSearchConf
 
   // analytics related parameters
   var searchCount = useRef(0);
-  var userInteractionActions = useRef(new Set());
+  var userInteractions = useUserInteractions();
   var visibleColumnCount = useRef((visibleColumnKeys === null || visibleColumnKeys === void 0 ? void 0 : visibleColumnKeys.length) || 0);
   var parameters = useMemo(function () {
     return _objectSpread(_objectSpread({}, initialParameters), {}, {
@@ -164,7 +163,7 @@ export var PlainConfluenceSearchConfigModal = function PlainConfluenceSearchConf
   // TODO: further refactoring in EDM-9573
   // https://stash.atlassian.com/projects/ATLASSIAN/repos/atlassian-frontend-monorepo/pull-requests/82725/overview?commentId=6829171
   var onSiteSelection = useCallback(function (site) {
-    userInteractionActions.current.add(DatasourceAction.INSTANCE_UPDATED);
+    userInteractions.add(DatasourceAction.INSTANCE_UPDATED);
     setSearchString(undefined);
     setLastModified(undefined);
     setContributorAccountIds([]);
@@ -172,7 +171,7 @@ export var PlainConfluenceSearchConfigModal = function PlainConfluenceSearchConf
     reset({
       shouldForceRequest: true
     });
-  }, [reset]);
+  }, [reset, userInteractions]);
   useEffect(function () {
     var newVisibleColumnKeys = !initialVisibleColumnKeys || (initialVisibleColumnKeys || []).length === 0 ? defaultVisibleColumnKeys : initialVisibleColumnKeys;
     visibleColumnCount.current = newVisibleColumnKeys.length;
@@ -190,10 +189,10 @@ export var PlainConfluenceSearchConfigModal = function PlainConfluenceSearchConf
   var handleVisibleColumnKeysChange = useCallback(function () {
     var newVisibleColumnKeys = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
     var columnAction = getColumnAction(visibleColumnKeys || [], newVisibleColumnKeys);
-    userInteractionActions.current.add(columnAction);
+    userInteractions.add(columnAction);
     visibleColumnCount.current = newVisibleColumnKeys.length;
     setVisibleColumnKeys(newVisibleColumnKeys);
-  }, [visibleColumnKeys]);
+  }, [visibleColumnKeys, userInteractions]);
 
   // TODO: further refactoring in EDM-9573
   // https://stash.atlassian.com/projects/ATLASSIAN/repos/atlassian-frontend-monorepo/pull-requests/82725/overview?commentId=6798258
@@ -210,14 +209,13 @@ export var PlainConfluenceSearchConfigModal = function PlainConfluenceSearchConf
       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]);
   var resolvedWithNoResults = status === 'resolved' && !responseItems.length;
   var hasConfluenceSearchParams = selectedConfluenceSite && searchString;
   var selectedConfluenceSiteUrl = selectedConfluenceSite === null || selectedConfluenceSite === void 0 ? void 0 : selectedConfluenceSite.url;
@@ -247,9 +245,9 @@ export var PlainConfluenceSearchConfigModal = function PlainConfluenceSearchConf
       extensionKey: extensionKey,
       destinationObjectTypes: destinationObjectTypes,
       searchCount: searchCount.current,
-      actions: Array.from(userInteractionActions.current)
+      actions: userInteractions.get()
     };
-  }, [destinationObjectTypes, extensionKey]);
+  }, [destinationObjectTypes, extensionKey, userInteractions]);
   var isDataReady = (visibleColumnKeys || []).length > 0;
   var fireInlineViewedEvent = useCallback(function () {
     fireEvent('ui.link.viewed.count', _objectSpread(_objectSpread({}, analyticsPayload), {}, {
@@ -332,7 +330,7 @@ export var PlainConfluenceSearchConfigModal = function PlainConfluenceSearchConf
         display: currentViewMode === 'inline' ? DatasourceDisplay.DATASOURCE_INLINE : DatasourceDisplay.DATASOURCE_TABLE,
         searchCount: searchCount.current,
         searchMethod: DatasourceSearchMethod.DATASOURCE_SEARCH_QUERY,
-        actions: Array.from(userInteractionActions.current)
+        actions: userInteractions.get()
       }),
       eventType: 'ui'
     });
@@ -369,14 +367,14 @@ export var PlainConfluenceSearchConfigModal = function PlainConfluenceSearchConf
         }]
       }, confluenceSearchUrl), consumerEvent);
     }
-  }, [isParametersSet, cloudId, analyticsPayload, totalCount, currentViewMode, onInsert, confluenceSearchUrl, datasourceId, parametersToSend, visibleColumnKeys, columnCustomSizes, wrappedColumnKeys]);
+  }, [isParametersSet, cloudId, analyticsPayload, totalCount, currentViewMode, onInsert, confluenceSearchUrl, datasourceId, parametersToSend, visibleColumnKeys, columnCustomSizes, wrappedColumnKeys, userInteractions]);
   var handleViewModeChange = function handleViewModeChange(selectedMode) {
-    userInteractionActions.current.add(DatasourceAction.DISPLAY_VIEW_CHANGED);
+    userInteractions.add(DatasourceAction.DISPLAY_VIEW_CHANGED);
     setCurrentViewMode(selectedMode);
   };
   var onSearch = useCallback(function (newSearchString, filters) {
     searchCount.current++;
-    userInteractionActions.current.add(DatasourceAction.QUERY_UPDATED);
+    userInteractions.add(DatasourceAction.QUERY_UPDATED);
     if (filters) {
       var editedOrCreatedBy = filters.editedOrCreatedBy,
         lastModifiedList = filters.lastModified;
@@ -403,16 +401,16 @@ export var PlainConfluenceSearchConfigModal = function PlainConfluenceSearchConf
     reset({
       shouldForceRequest: true
     });
-  }, [reset]);
+  }, [reset, userInteractions]);
   var isInsertDisabled = !isParametersSet || status === 'rejected' || status === 'unauthorized' || status === 'loading';
   var getCancelButtonAnalyticsPayload = useCallback(function () {
     return {
       extensionKey: extensionKey,
       destinationObjectTypes: destinationObjectTypes,
       searchCount: searchCount.current,
-      actions: Array.from(userInteractionActions.current)
+      actions: userInteractions.get()
     };
-  }, [destinationObjectTypes, extensionKey]);
+  }, [destinationObjectTypes, extensionKey, userInteractions]);
   return jsx(IntlMessagesProvider, {
     defaultMessages: i18nEN,
     loaderFn: fetchMessagesForLocale
@@ -444,7 +442,9 @@ export var PlainConfluenceSearchConfigModal = function PlainConfluenceSearchConf
   }, 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 -- Ignored via go/DSP-18766
+    ,
     style: {
       color: "var(--ds-text-accent-gray, ".concat(N800, ")")
     }
@@ -474,4 +474,6 @@ var analyticsContextData = _objectSpread(_objectSpread({}, componentMetadata.con
 var contextData = _objectSpread(_objectSpread({}, analyticsContextData), {}, {
   attributes: _objectSpread({}, analyticsContextAttributes)
 });
-export var ConfluenceSearchConfigModal = withAnalyticsContext(contextData)(PlainConfluenceSearchConfigModal);
+export var ConfluenceSearchConfigModal = withAnalyticsContext(contextData)(function (props) {
+  return jsx(DatasourceExperienceIdProvider, null, jsx(UserInteractionsProvider, null, jsx(PlainConfluenceSearchConfigModal, props)));
+});

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

@@ -1,7 +1,6 @@
 /** @jsx jsx */
 import { useCallback, useEffect, useRef } from 'react';
 import { css, jsx } from '@emotion/react';
-import { v4 as uuidv4 } from 'uuid';
 import { withAnalyticsContext } from '@atlaskit/analytics-next';
 import { IntlMessagesProvider } from '@atlaskit/intl-messages-provider';
 import { useDatasourceAnalyticsEvents } from '../../analytics';
@@ -10,6 +9,7 @@ import { startUfoExperience } from '../../analytics/ufoExperiences';
 import { useColumnPickerRenderedFailedUfoExperience } from '../../analytics/ufoExperiences/hooks/useColumnPickerRenderedFailedUfoExperience';
 import { useDataRenderedUfoExperience } from '../../analytics/ufoExperiences/hooks/useDataRenderedUfoExperience';
 import { fetchMessagesForLocale } from '../../common/utils/locale/fetch-messages-for-locale';
+import { DatasourceExperienceIdProvider, useDatasourceExperienceId } from '../../contexts/datasource-experience-id';
 import { useDatasourceTableState } from '../../hooks/useDatasourceTableState';
 import i18nEN from '../../i18n/en';
 import { ScrollableContainerHeight } from '../../ui/issue-like-table/styled';
@@ -54,8 +54,7 @@ var DatasourceTableViewWithoutAnalytics = function DatasourceTableViewWithoutAna
     authDetails = _useDatasourceTableSt.authDetails;
   var _useDatasourceAnalyti = useDatasourceAnalyticsEvents(),
     fireEvent = _useDatasourceAnalyti.fireEvent;
-  var _useRef = useRef(uuidv4()),
-    tableRenderInstanceId = _useRef.current;
+  var experienceId = useDatasourceExperienceId();
   var visibleColumnCount = 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
@@ -94,13 +93,13 @@ var DatasourceTableViewWithoutAnalytics = function DatasourceTableViewWithoutAna
     if (shouldStartUfoExperience) {
       startUfoExperience({
         name: 'datasource-rendered'
-      }, tableRenderInstanceId);
+      }, experienceId);
     }
-  }, [datasourceId, parameters, status, tableRenderInstanceId, visibleColumnKeys]);
-  useColumnPickerRenderedFailedUfoExperience(status, tableRenderInstanceId);
+  }, [datasourceId, parameters, status, experienceId, visibleColumnKeys]);
+  useColumnPickerRenderedFailedUfoExperience(status, experienceId);
   useDataRenderedUfoExperience({
     status: status,
-    experienceId: tableRenderInstanceId,
+    experienceId: experienceId,
     itemCount: responseItems.length,
     extensionKey: extensionKey
   });
@@ -164,7 +163,6 @@ var DatasourceTableViewWithoutAnalytics = function DatasourceTableViewWithoutAna
     wrappedColumnKeys: wrappedColumnKeys,
     onWrappedColumnChange: onWrappedColumnChange,
     scrollableContainerHeight: ScrollableContainerHeight,
-    parentContainerRenderInstanceId: tableRenderInstanceId,
     extensionKey: extensionKey
   }) : jsx(EmptyState, {
     testId: "datasource-table-view-skeleton",
@@ -177,4 +175,6 @@ var DatasourceTableViewWithoutAnalytics = function DatasourceTableViewWithoutAna
     url: url
   })));
 };
-export var DatasourceTableView = withAnalyticsContext(componentMetadata.tableView)(DatasourceTableViewWithoutAnalytics);
+export var DatasourceTableView = withAnalyticsContext(componentMetadata.tableView)(function (props) {
+  return jsx(DatasourceExperienceIdProvider, null, jsx(DatasourceTableViewWithoutAnalytics, props));
+});

package/dist/esm/ui/issue-like-table/column-picker/concatenated-menu-list.js

@@ -24,7 +24,9 @@ export var ConcatenatedMenuList = function ConcatenatedMenuList(_ref) {
     padding: "var(--ds-space-050, 4px)".concat(" ", "var(--ds-space-200, 16px)"),
     height: 'auto'
   };
-  var maximumLimitReachedMessage = jsx("div", {
+  var maximumLimitReachedMessage =
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+  jsx("div", {
     css: messageStyles,
     style: optionStyle
   }, jsx(FormattedMessage, _extends({

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

@@ -13,15 +13,16 @@ import ChevronDownIcon from '@atlaskit/icon/glyph/chevron-down';
 import { CheckboxOption, createFilter, PopupSelect } from '@atlaskit/select';
 import Tooltip from '@atlaskit/tooltip';
 import { succeedUfoExperience } from '../../../analytics/ufoExperiences';
+import { useDatasourceExperienceId } from '../../../contexts/datasource-experience-id';
 import { ConcatenatedMenuList } from './concatenated-menu-list';
 import { columnPickerMessages } from './messages';
 export var 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 = useIntl();
+  var experienceId = useDatasourceExperienceId();
   var _useState = useState([]),
     _useState2 = _slicedToArray(_useState, 2),
     allOptions = _useState2[0],
@@ -100,13 +101,13 @@ export var ColumnPicker = function ColumnPicker(_ref) {
   }, [allOptions]);
   useEffect(function () {
     if (allOptions.length) {
-      if (parentContainerRenderInstanceId) {
+      if (experienceId) {
         succeedUfoExperience({
           name: 'column-picker-rendered'
-        }, parentContainerRenderInstanceId);
+        }, experienceId);
       }
     }
-  }, [allOptions, parentContainerRenderInstanceId]);
+  }, [allOptions, experienceId]);
   return jsx(PopupSelect, {
     classNamePrefix: 'column-picker-popup',
     testId: 'column-picker-popup',

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

@@ -328,6 +328,7 @@ export var DraggableTableHeading = function DraggableTableHeading(_ref) {
     ref: mainHeaderCellRef,
     "data-testid": "".concat(id, "-column-heading"),
     style: _objectSpread({
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
       cursor: 'grab'
     }, getWidthCss({
       shouldUseWidth: resizeIsEnabled,

package/dist/esm/ui/issue-like-table/empty-state/index.js

@@ -103,8 +103,11 @@ export default (function (_ref4) {
     style: {
       // the IssueLikeDataTableView wraps the table in a container with the styling below while modal doesn't
       // this maxHeight comes from scrollableContainerHeight
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
       maxHeight: ScrollableContainerHeight,
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
       padding: "var(--ds-space-0, 0px)",
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
       boxSizing: 'border-box'
     }
   }, jsx("table", {
@@ -117,19 +120,22 @@ export default (function (_ref4) {
   }, jsx("tr", null, columnsToRender.map(function (_ref5) {
     var key = _ref5.key,
       width = _ref5.width;
-    return jsx(TableHeading, {
-      key: key,
-      style: {
-        width: width,
-        padding: padding
-      }
-    }, jsx(Skeleton, {
-      appearance: "darkGray",
-      borderRadius: 8,
-      testId: "empty-state-skeleton",
-      height: 12,
-      width: width
-    }));
+    return (
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+      jsx(TableHeading, {
+        key: key,
+        style: {
+          width: width,
+          padding: padding
+        }
+      }, jsx(Skeleton, {
+        appearance: "darkGray",
+        borderRadius: 8,
+        testId: "empty-state-skeleton",
+        height: 12,
+        width: width
+      }))
+    );
   }))), jsx("tbody", {
     css: tableBodyStyles
   }, rows.map(function (row) {

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

@@ -26,6 +26,7 @@ import Tooltip from '@atlaskit/tooltip';
 import { WidthObserver } from '@atlaskit/width-detector';
 import { startUfoExperience, succeedUfoExperience } from '../../analytics/ufoExperiences';
 import { stickyTableHeadersIndex } from '../../common/zindex';
+import { useDatasourceExperienceId } from '../../contexts/datasource-experience-id';
 import { ColumnPicker } from './column-picker';
 import { DragColumnPreview } from './drag-column-preview';
 import { DraggableTableHeading } from './draggable-table-heading';
@@ -283,12 +284,12 @@ export var IssueLikeDataTableView = function IssueLikeDataTableView(_ref5) {
     status = _ref5.status,
     hasNextPage = _ref5.hasNextPage,
     scrollableContainerHeight = _ref5.scrollableContainerHeight,
-    parentContainerRenderInstanceId = _ref5.parentContainerRenderInstanceId,
     extensionKey = _ref5.extensionKey;
   var tableId = useMemo(function () {
     return Symbol('unique-id');
   }, []);
   var intl = useIntl();
+  var experienceId = useDatasourceExperienceId();
   var tableHeaderRowRef = useRef(null);
   var _useState = useState(null),
     _useState2 = _slicedToArray(_useState, 2),
@@ -325,12 +326,12 @@ export var IssueLikeDataTableView = function IssueLikeDataTableView(_ref5) {
     }
   }, [columns, visibleColumnKeys, hasFullSchema]);
   useEffect(function () {
-    if (parentContainerRenderInstanceId && status === 'resolved') {
+    if (experienceId && status === 'resolved') {
       succeedUfoExperience({
         name: 'datasource-rendered'
-      }, parentContainerRenderInstanceId);
+      }, experienceId);
     }
-  }, [parentContainerRenderInstanceId, status]);
+  }, [experienceId, status]);
   var visibleSortedColumns = useMemo(function () {
     return visibleColumnKeys.map(function (visibleKey) {
       return orderedColumns.find(function (_ref6) {
@@ -543,13 +544,13 @@ export var IssueLikeDataTableView = function IssueLikeDataTableView(_ref5) {
           }
           return _context.abrupt("return");
         case 2:
-          if (parentContainerRenderInstanceId) {
+          if (experienceId) {
             startUfoExperience({
               name: 'column-picker-rendered',
               metadata: {
                 extensionKey: extensionKey !== null && extensionKey !== void 0 ? extensionKey : undefined
               }
-            }, parentContainerRenderInstanceId);
+            }, experienceId);
           }
           _context.prev = 3;
           _context.next = 6;
@@ -567,7 +568,7 @@ export var IssueLikeDataTableView = function IssueLikeDataTableView(_ref5) {
           return _context.stop();
       }
     }, _callee, null, [[3, 9]]);
-  })), [parentContainerRenderInstanceId, extensionKey, hasFullSchema, onLoadDatasourceDetails]);
+  })), [experienceId, extensionKey, hasFullSchema, onLoadDatasourceDetails]);
   var isEditable = onVisibleColumnKeysChange && hasData;
   return jsx("div", {
     /* There is required contentEditable={true} in editor-card-plugin
@@ -576,7 +577,9 @@ export var IssueLikeDataTableView = function IssueLikeDataTableView(_ref5) {
      */
     contentEditable: false,
     ref: containerRef,
-    css: [tableContainerStyles, scrollableContainerHeight && scrollableContainerStyles],
+    css: [tableContainerStyles, scrollableContainerHeight && scrollableContainerStyles]
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+    ,
     style: scrollableContainerHeight ? {
       maxHeight: "".concat(scrollableContainerHeight, "px")
     } : undefined,
@@ -585,13 +588,17 @@ export var IssueLikeDataTableView = function IssueLikeDataTableView(_ref5) {
     setWidth: debounce(setTableContainerWidth, 100)
   }), jsx(Table, {
     css: tableStyles,
-    "data-testid": testId,
+    "data-testid": testId
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+    ,
     style: shouldUseWidth ? {
       tableLayout: 'fixed'
     } : {}
   }, jsx("thead", {
     "data-testid": testId && "".concat(testId, "--head"),
-    css: [noDefaultBorderStyles, tableHeadStyles],
+    css: [noDefaultBorderStyles, tableHeadStyles]
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    ,
     className: !!onVisibleColumnKeysChange ? 'has-column-picker' : ''
   }, jsx("tr", {
     ref: tableHeaderRowRef
@@ -644,7 +651,9 @@ export var IssueLikeDataTableView = function IssueLikeDataTableView(_ref5) {
     } else {
       return jsx(TableHeading, {
         key: key,
-        "data-testid": "".concat(key, "-column-heading"),
+        "data-testid": "".concat(key, "-column-heading")
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+        ,
         style: getWidthCss({
           shouldUseWidth: shouldUseWidth,
           width: width
@@ -655,8 +664,7 @@ export var IssueLikeDataTableView = function IssueLikeDataTableView(_ref5) {
     columns: hasFullSchema ? orderedColumns : [],
     selectedColumnKeys: hasFullSchema ? visibleColumnKeys : [],
     onSelectedColumnKeysChange: onSelectedColumnKeysChange,
-    onOpen: handlePickerOpen,
-    parentContainerRenderInstanceId: parentContainerRenderInstanceId
+    onOpen: handlePickerOpen
   })))), jsx("tbody", {
     css: noDefaultBorderStyles,
     "data-testid": testId && "".concat(testId, "--body")
@@ -686,7 +694,9 @@ export var IssueLikeDataTableView = function IssueLikeDataTableView(_ref5) {
       return jsx(TableCell, {
         key: cellKey,
         "data-testid": testId && "".concat(testId, "--cell-").concat(cellIndex),
-        colSpan: isEditable && isLastCell ? 2 : undefined,
+        colSpan: isEditable && isLastCell ? 2 : undefined
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+        ,
         style: loadingRowStyle,
         css: [wrappedColumnKeys !== null && wrappedColumnKeys !== void 0 && wrappedColumnKeys.includes(cellKey) ? null : truncateStyles]
       }, content);

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

@@ -16,7 +16,9 @@ var IconRenderType = function IconRenderType(_ref) {
   return /*#__PURE__*/React.createElement(IconWrapper, null, /*#__PURE__*/React.createElement(Image, {
     src: source,
     alt: label,
-    "data-testid": testId,
+    "data-testid": testId
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+    ,
     style: {
       minWidth: '20px',
       maxWidth: '20px'