@atlaskit/link-datasource 2.3.2 → 2.3.4

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

@@ -2,6 +2,8 @@ import React from 'react';
 import styled from '@emotion/styled';
 import { fieldTextFontSize } from '../../styled';
 export const 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
 const TextWrapper = styled.span({
   fontSize: fieldTextFontSize
 });

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

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

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

@@ -3,6 +3,8 @@ import { N40 } from '@atlaskit/theme/colors';
 import { fontFallback } from '@atlaskit/theme/typography';
 export const ScrollableContainerHeight = 590;
 export const fieldTextFontSize = `var(--ds-font-body, ${fontFallback.body.medium})`;
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled -- To migrate as part of go/ui-styling-standard
 export const Table = styled.table({
   width: '100%'
 });
@@ -22,6 +24,8 @@ export const withTablePluginPrefix = (tableSection, mainRule = '&') => `
 `;
 export const withTablePluginHeaderPrefix = withTablePluginPrefix.bind(null, 'thead');
 export const withTablePluginBodyPrefix = withTablePluginPrefix.bind(null, 'tbody');
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled -- To migrate as part of go/ui-styling-standard
 export const TableHeading = styled.th({
   [`${withTablePluginHeaderPrefix()}`]: {
     border: 0,

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/es2019/ui/table-footer/index.js

@@ -13,6 +13,7 @@ import { ASSETS_LIST_OF_LINKS_DATASOURCE_ID } from '../assets-modal';
 import { footerMessages } from './messages';
 import { PoweredByJSMAssets } from './powered-by-jsm-assets';
 import { SyncInfo } from './sync-info';
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled -- To migrate as part of go/ui-styling-standard
 const FooterWrapper = styled.div({
   padding: `${"var(--ds-space-0, 0px)"} ${"var(--ds-space-200, 16px)"}`,
   boxSizing: 'border-box',
@@ -22,21 +23,29 @@ const FooterWrapper = styled.div({
   background: `var(--ds-background-input, ${N0})`,
   borderTop: `2px solid ${`var(--ds-background-accent-gray-subtler, ${N40})`}`
 });
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled -- To migrate as part of go/ui-styling-standard
 const TopBorderWrapper = styled.div({
   display: 'flex',
   boxSizing: 'border-box',
   justifyContent: 'space-between',
   padding: `${"var(--ds-space-250, 20px)"} ${"var(--ds-space-0, 0px)"}`
 });
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled -- To migrate as part of go/ui-styling-standard
 const ItemCounterWrapper = styled.div({
   display: 'flex',
   alignSelf: 'center'
 });
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled -- To migrate as part of go/ui-styling-standard
 const SyncWrapper = styled.div({
   display: 'flex',
   alignItems: 'center',
   color: `var(--ds-text-accent-gray, ${N90})`
 });
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled -- To migrate as part of go/ui-styling-standard
 const SyncTextWrapper = styled.div({
   marginRight: "var(--ds-space-075, 6px)",
   fontSize: '12px'

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/assets-modal/search-container/styled.js

@@ -1,4 +1,5 @@
 import styled from '@emotion/styled';
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled -- To migrate as part of go/ui-styling-standard
 export var FormRowContainer = styled.div(function (props) {
   return {
     alignItems: 'center',
@@ -8,6 +9,8 @@ export var FormRowContainer = styled.div(function (props) {
     width: '100%'
   };
 });
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled -- To migrate as part of go/ui-styling-standard
 export var FormContainer = styled.form({
   display: 'grid',
   rowGap: "var(--ds-space-200, 16px)",
@@ -15,10 +18,13 @@ export var FormContainer = styled.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
 export var FieldContainer = styled.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
 export var SchemaSelectContainer = styled.div({
   width: '100%',
   maxWidth: '386px'

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

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

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

@@ -1,6 +1,7 @@
 import styled from '@emotion/styled';
 import { B400, B50, N0, N20, N30, R400 } from '@atlaskit/theme/colors';
 import { layers } from '@atlaskit/theme/constants';
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled -- To migrate as part of go/ui-styling-standard
 export var PopupComponentContainer = styled.div({
   boxSizing: 'border-box',
   display: 'block',
@@ -13,6 +14,8 @@ export var PopupComponentContainer = styled.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))"
 });
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled -- To migrate as part of go/ui-styling-standard
 export var CustomDropdown = styled.div({
   width: '340px',
   background: "var(--ds-background-input, ".concat(N0, ")"),
@@ -20,6 +23,8 @@ export var CustomDropdown = styled.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: layers.modal()
 });
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled -- To migrate as part of go/ui-styling-standard
 export var CustomDropdownItem = styled.div(function (props) {
   return {
     height: '36px',
@@ -38,16 +43,22 @@ export var CustomDropdownItem = styled.div(function (props) {
     }
   };
 });
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled -- To migrate as part of go/ui-styling-standard
 export var CustomDateWrapper = styled.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
 export var DatePickersWrapper = styled.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
 export var SelectDateRangeButton = styled.button({
   background: "var(--ds-background-accent-gray-subtler, ".concat(N20, ")"),
   border: 'none',
@@ -61,6 +72,8 @@ export var SelectDateRangeButton = styled.button({
     cursor: 'pointer'
   }
 });
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled -- To migrate as part of go/ui-styling-standard
 export var DateRangeErrorMessage = styled.div({
   display: 'flex',
   lineHeight: 1.3333,

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

@@ -7,6 +7,7 @@ import { fontFallback } from '@atlaskit/theme/typography';
 import { TableHeading } from './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 = styled(TableHeading)({
   overflow: 'hidden',
   textOverflow: 'ellipsis',
@@ -14,6 +15,8 @@ var TablePreviewHeading = styled(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.td({
   overflow: 'hidden',
   textOverflow: 'ellipsis',

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

@@ -28,6 +28,7 @@ import { GlyphPlaceholder, UnwrapTextIcon, WrapTextIcon } from './custom-icons';
 import { issueLikeTableMessages } from './messages';
 import { TableHeading } from './styled';
 import { COLUMN_MIN_WIDTH, getWidthCss } from './utils';
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled -- To migrate as part of go/ui-styling-standard
 var DropdownParent = styled.div({
   display: 'flex',
   alignItems: 'center',

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

@@ -6,6 +6,7 @@ import Epic16Icon from '@atlaskit/icon-object/glyph/epic/16';
 import Issue16Icon from '@atlaskit/icon-object/glyph/issue/16';
 import Story16Icon from '@atlaskit/icon-object/glyph/story/16';
 import Task16Icon from '@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.div({
   display: 'flex',
   alignItems: 'center',