@atlaskit/link-datasource 2.3.3 → 2.3.4

package/dist/es2019/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';
@@ -56,9 +56,7 @@ const DatasourceTableViewWithoutAnalytics = ({
   const {
     fireEvent
   } = useDatasourceAnalyticsEvents();
-  const {
-    current: tableRenderInstanceId
-  } = useRef(uuidv4());
+  const experienceId = useDatasourceExperienceId();
   const 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
@@ -97,13 +95,13 @@ const DatasourceTableViewWithoutAnalytics = ({
     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,
-    experienceId: tableRenderInstanceId,
+    experienceId: experienceId,
     itemCount: responseItems.length,
     extensionKey
   });
@@ -167,7 +165,6 @@ const DatasourceTableViewWithoutAnalytics = ({
     wrappedColumnKeys: wrappedColumnKeys,
     onWrappedColumnChange: onWrappedColumnChange,
     scrollableContainerHeight: ScrollableContainerHeight,
-    parentContainerRenderInstanceId: tableRenderInstanceId,
     extensionKey: extensionKey
   }) : jsx(EmptyState, {
     testId: "datasource-table-view-skeleton",
@@ -180,4 +177,4 @@ const DatasourceTableViewWithoutAnalytics = ({
     url: url
   })));
 };
-export const DatasourceTableView = withAnalyticsContext(componentMetadata.tableView)(DatasourceTableViewWithoutAnalytics);
+export const DatasourceTableView = withAnalyticsContext(componentMetadata.tableView)(props => jsx(DatasourceExperienceIdProvider, null, jsx(DatasourceTableViewWithoutAnalytics, props)));

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

@@ -9,16 +9,17 @@ 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 const ColumnPicker = ({
   columns,
   selectedColumnKeys,
   onSelectedColumnKeysChange,
-  onOpen,
-  parentContainerRenderInstanceId
+  onOpen
 }) => {
   const intl = useIntl();
+  const experienceId = useDatasourceExperienceId();
   const [allOptions, setAllOptions] = useState([]);
   const pickerRef = useRef(null);
   const mapColumnToOption = useCallback(({
@@ -82,13 +83,13 @@ export const ColumnPicker = ({
   }, [allOptions]);
   useEffect(() => {
     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/es2019/ui/issue-like-table/index.js

@@ -18,6 +18,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';
@@ -317,11 +318,11 @@ export const IssueLikeDataTableView = ({
   status,
   hasNextPage,
   scrollableContainerHeight,
-  parentContainerRenderInstanceId,
   extensionKey
 }) => {
   const tableId = useMemo(() => Symbol('unique-id'), []);
   const intl = useIntl();
+  const experienceId = useDatasourceExperienceId();
   const tableHeaderRowRef = useRef(null);
   const [lastRowElement, setLastRowElement] = useState(null);
   const [hasFullSchema, setHasFullSchema] = useState(false);
@@ -346,12 +347,12 @@ export const IssueLikeDataTableView = ({
     }
   }, [columns, visibleColumnKeys, hasFullSchema]);
   useEffect(() => {
-    if (parentContainerRenderInstanceId && status === 'resolved') {
+    if (experienceId && status === 'resolved') {
       succeedUfoExperience({
         name: 'datasource-rendered'
-      }, parentContainerRenderInstanceId);
+      }, experienceId);
     }
-  }, [parentContainerRenderInstanceId, status]);
+  }, [experienceId, status]);
   const visibleSortedColumns = useMemo(() => visibleColumnKeys.map(visibleKey => orderedColumns.find(({
     key
   }) => visibleKey === key)).filter(Boolean), [orderedColumns, visibleColumnKeys]);
@@ -536,13 +537,13 @@ export const IssueLikeDataTableView = ({
     if (hasFullSchema) {
       return;
     }
-    if (parentContainerRenderInstanceId) {
+    if (experienceId) {
       startUfoExperience({
         name: 'column-picker-rendered',
         metadata: {
           extensionKey: extensionKey !== null && extensionKey !== void 0 ? extensionKey : undefined
         }
-      }, parentContainerRenderInstanceId);
+      }, experienceId);
     }
     try {
       await onLoadDatasourceDetails();
@@ -550,7 +551,7 @@ export const IssueLikeDataTableView = ({
     } catch (e) {
       setHasFullSchema(false);
     }
-  }, [parentContainerRenderInstanceId, extensionKey, hasFullSchema, onLoadDatasourceDetails]);
+  }, [experienceId, extensionKey, hasFullSchema, onLoadDatasourceDetails]);
   const isEditable = onVisibleColumnKeysChange && hasData;
   return jsx("div", {
     /* There is required contentEditable={true} in editor-card-plugin
@@ -639,8 +640,7 @@ export const IssueLikeDataTableView = ({
     columns: hasFullSchema ? orderedColumns : [],
     selectedColumnKeys: hasFullSchema ? visibleColumnKeys : [],
     onSelectedColumnKeysChange: onSelectedColumnKeysChange,
-    onOpen: handlePickerOpen,
-    parentContainerRenderInstanceId: parentContainerRenderInstanceId
+    onOpen: handlePickerOpen
   })))), jsx("tbody", {
     css: noDefaultBorderStyles,
     "data-testid": testId && `${testId}--body`

package/dist/es2019/ui/jira-issues-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 { css, 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';
@@ -20,6 +19,7 @@ import { useDataRenderedUfoExperience } from '../../../analytics/ufoExperiences/
 import { mapSearchMethod } from '../../../analytics/utils';
 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 { useDatasourceTableState } from '../../../hooks/useDatasourceTableState';
 import i18nEN from '../../../i18n/en';
 import { useAvailableSites } from '../../../services/useAvailableSites';
@@ -56,7 +56,7 @@ const getDisplayValue = (currentViewMode, itemCount) => {
   return itemCount === 1 ? DatasourceDisplay.INLINE : DatasourceDisplay.DATASOURCE_INLINE;
 };
 const jqlSupportDocumentLink = 'https://support.atlassian.com/jira-service-management-cloud/docs/use-advanced-search-with-jira-query-language-jql/';
-export const PlainJiraIssuesConfigModal = props => {
+const PlainJiraIssuesConfigModal = props => {
   const {
     datasourceId,
     columnCustomSizes: initialColumnCustomSizes,
@@ -120,9 +120,7 @@ export const PlainJiraIssuesConfigModal = props => {
   const {
     fireEvent
   } = useDatasourceAnalyticsEvents();
-  const {
-    current: modalRenderInstanceId
-  } = useRef(uuidv4());
+  const experienceId = useDatasourceExperienceId();
   const analyticsPayload = useMemo(() => ({
     extensionKey,
     destinationObjectTypes
@@ -146,12 +144,12 @@ export const PlainJiraIssuesConfigModal = props => {
     if (shouldStartUfoExperience) {
       startUfoExperience({
         name: 'datasource-rendered'
-      }, modalRenderInstanceId);
+      }, experienceId);
     }
-  }, [modalRenderInstanceId, status]);
+  }, [experienceId, status]);
   useDataRenderedUfoExperience({
     status,
-    experienceId: modalRenderInstanceId,
+    experienceId: experienceId,
     itemCount: responseItems.length,
     canBeLink: currentViewMode === 'inline',
     extensionKey
@@ -212,7 +210,7 @@ export const PlainJiraIssuesConfigModal = props => {
       fireCountViewedEvent();
     }
   }, [currentViewMode, status, fireIssueViewAnalytics, fireCountViewedEvent]);
-  useColumnPickerRenderedFailedUfoExperience(status, modalRenderInstanceId);
+  useColumnPickerRenderedFailedUfoExperience(status, experienceId);
   const onSearch = useCallback((newParameters, {
     searchMethod,
     basicFilterSelections,
@@ -362,13 +360,12 @@ export const PlainJiraIssuesConfigModal = props => {
     onNextPage: handleOnNextPage,
     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, handleOnNextPage, loadDatasourceDetails, handleVisibleColumnKeysChange, modalRenderInstanceId, extensionKey, columnCustomSizes, onColumnResize, wrappedColumnKeys, onWrappedColumnChange]);
+  })), [status, columns, responseItems, hasNextPage, visibleColumnKeys, defaultVisibleColumnKeys, handleOnNextPage, loadDatasourceDetails, handleVisibleColumnKeysChange, extensionKey, columnCustomSizes, onColumnResize, wrappedColumnKeys, onWrappedColumnChange]);
   const renderCountModeContent = useCallback(() => {
     const selectedJiraSiteUrl = selectedJiraSite === null || selectedJiraSite === void 0 ? void 0 : selectedJiraSite.url;
     if (status === 'unauthorized') {
@@ -470,7 +467,9 @@ export const PlainJiraIssuesConfigModal = props => {
   }, jsx(LinkUrl, {
     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, ${N800})`
     }
@@ -504,4 +503,4 @@ const contextData = {
     ...analyticsContextAttributes
   }
 };
-export const JiraIssuesConfigModal = withAnalyticsContext(contextData)(PlainJiraIssuesConfigModal);
+export const JiraIssuesConfigModal = withAnalyticsContext(contextData)(props => jsx(DatasourceExperienceIdProvider, null, jsx(PlainJiraIssuesConfigModal, props)));

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

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

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,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';
@@ -35,6 +35,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 +67,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,
@@ -176,17 +176,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) {
@@ -343,8 +343,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 +368,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(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/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,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';
@@ -52,8 +52,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,
@@ -210,14 +208,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;
@@ -444,7 +441,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
+    ,
     style: {
       color: "var(--ds-text-accent-gray, ".concat(N800, ")")
     }
@@ -474,4 +473,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(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/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/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
@@ -655,8 +656,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")