@atlaskit/link-datasource 2.3.2 → 2.3.4

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

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

package/dist/cjs/ui/table-footer/index.js

@@ -22,6 +22,7 @@ var _poweredByJsmAssets = require("./powered-by-jsm-assets");
 var _syncInfo = require("./sync-info");
 /** @jsx jsx */
 
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled -- To migrate as part of go/ui-styling-standard
 var FooterWrapper = _styled.default.div({
   padding: "var(--ds-space-0, 0px)".concat(" ", "var(--ds-space-200, 16px)"),
   boxSizing: 'border-box',
@@ -31,21 +32,29 @@ var FooterWrapper = _styled.default.div({
   background: "var(--ds-background-input, ".concat(_colors.N0, ")"),
   borderTop: "2px solid ".concat("var(--ds-background-accent-gray-subtler, ".concat(_colors.N40, ")"))
 });
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled -- To migrate as part of go/ui-styling-standard
 var TopBorderWrapper = _styled.default.div({
   display: 'flex',
   boxSizing: 'border-box',
   justifyContent: 'space-between',
   padding: "var(--ds-space-250, 20px)".concat(" ", "var(--ds-space-0, 0px)")
 });
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled -- To migrate as part of go/ui-styling-standard
 var ItemCounterWrapper = _styled.default.div({
   display: 'flex',
   alignSelf: 'center'
 });
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled -- To migrate as part of go/ui-styling-standard
 var SyncWrapper = _styled.default.div({
   display: 'flex',
   alignItems: 'center',
   color: "var(--ds-text-accent-gray, ".concat(_colors.N90, ")")
 });
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled -- To migrate as part of go/ui-styling-standard
 var SyncTextWrapper = _styled.default.div({
   marginRight: "var(--ds-space-075, 6px)",
   fontSize: '12px'

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

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

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

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

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

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

package/dist/es2019/ui/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 const FormRowContainer = styled.div(props => ({
   alignItems: 'center',
   display: 'flex',
@@ -6,6 +7,8 @@ export const FormRowContainer = styled.div(props => ({
   flexGrow: 1,
   width: '100%'
 }));
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled -- To migrate as part of go/ui-styling-standard
 export const FormContainer = styled.form({
   display: 'grid',
   rowGap: "var(--ds-space-200, 16px)",
@@ -13,10 +16,13 @@ export const 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 const 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 const SchemaSelectContainer = styled.div({
   width: '100%',
   maxWidth: '386px'

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

@@ -12,6 +12,8 @@ const triggerButtonLabelStyles = xcss({
 const 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 const LoadingStateAnimationWrapper = styled.div({
   position: 'relative',
   animation: 'flickerAnimation 2s infinite',

package/dist/es2019/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 const PopupComponentContainer = styled.div({
   boxSizing: 'border-box',
   display: 'block',
@@ -13,6 +14,8 @@ export const 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 const CustomDropdown = styled.div({
   width: '340px',
   background: `var(--ds-background-input, ${N0})`,
@@ -20,6 +23,8 @@ export const 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 const CustomDropdownItem = styled.div(props => ({
   height: '36px',
   width: '100%',
@@ -36,16 +41,22 @@ export const CustomDropdownItem = styled.div(props => ({
     cursor: 'default'
   }
 }));
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled -- To migrate as part of go/ui-styling-standard
 export const 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 const 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 const SelectDateRangeButton = styled.button({
   background: `var(--ds-background-accent-gray-subtler, ${N20})`,
   border: 'none',
@@ -59,6 +70,8 @@ export const 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 const DateRangeErrorMessage = styled.div({
   display: 'flex',
   lineHeight: 1.3333,

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

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

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

@@ -12,6 +12,7 @@ const firstLastChildOverride = `
     padding-right: ${"var(--ds-space-100, 8px)"};
   }
 `;
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled -- To migrate as part of go/ui-styling-standard
 const TablePreviewHeading = styled(TableHeading)({
   overflow: 'hidden',
   textOverflow: 'ellipsis',
@@ -19,6 +20,8 @@ const 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
 const TablePreviewCell = styled.td({
   overflow: 'hidden',
   textOverflow: 'ellipsis',

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

@@ -22,6 +22,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
 const DropdownParent = styled.div({
   display: 'flex',
   alignItems: 'center',

package/dist/es2019/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
 const IconWrapper = styled.div({
   display: 'flex',
   alignItems: 'center',

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';
@@ -39,6 +40,7 @@ const truncateTextStyles = css({
   whiteSpace: 'nowrap'
 });
 const columnPickerWidth = 80;
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled -- To migrate as part of go/ui-styling-standard
 const ColumnPickerHeader = styled.th({
   [`${withTablePluginHeaderPrefix('&:last-of-type')}`]: {
     boxSizing: 'border-box',
@@ -62,6 +64,8 @@ const truncateStyles = css({
   textOverflow: 'ellipsis',
   whiteSpace: 'nowrap'
 });
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled -- To migrate as part of go/ui-styling-standard
 const TableCell = styled.td({
   [`${withTablePluginBodyPrefix()}`]: {
     /* First section here is to override things editor table plugin css defines */
@@ -314,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);
@@ -343,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]);
@@ -533,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();
@@ -547,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
@@ -636,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/issue-like-table/render-type/date-time/index.js

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

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

@@ -1,6 +1,7 @@
 import React from 'react';
 import styled from '@emotion/styled';
 import Image from '@atlaskit/image';
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled -- To migrate as part of go/ui-styling-standard
 const IconWrapper = styled.div({
   display: 'flex',
   alignItems: 'center',