@atlaskit/link-datasource 2.3.3 → 2.3.5

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,8 @@ import { useColumnPickerRenderedFailedUfoExperience } from '../../../analytics/u
 import { useDataRenderedUfoExperience } from '../../../analytics/ufoExperiences/hooks/useDataRenderedUfoExperience';
 import { buildDatasourceAdf } from '../../../common/utils/adf';
 import { fetchMessagesForLocale } from '../../../common/utils/locale/fetch-messages-for-locale';
+import { DatasourceExperienceIdProvider, useDatasourceExperienceId } from '../../../contexts/datasource-experience-id';
+import { UserInteractionsProvider, useUserInteractions } from '../../../contexts/user-interactions';
 import { useAssetsClient } from '../../../hooks/useAssetsClient';
 import { useDatasourceTableState } from '../../../hooks/useDatasourceTableState';
 import i18nEN from '../../../i18n/en';
@@ -31,6 +32,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 +52,7 @@ const PlainAssetsConfigModal = props => {
   const {
     fireEvent
   } = useDatasourceAnalyticsEvents();
-  const {
-    current: modalRenderInstanceId
-  } = useRef(uuidv4());
+  const experienceId = useDatasourceExperienceId();
   const {
     workspaceId,
     workspaceError,
@@ -119,7 +119,7 @@ const PlainAssetsConfigModal = props => {
 
   /* ------------------------------ OBSERVABILITY ------------------------------ */
   const searchCount = useRef(0);
-  const userInteractionActions = useRef(new Set());
+  const userInteractions = useUserInteractions();
   const visibleColumnCount = useRef((visibleColumnKeys === null || visibleColumnKeys === void 0 ? void 0 : visibleColumnKeys.length) || 0);
   const isDataReady = (visibleColumnKeys || []).length > 0;
   const analyticsPayload = useMemo(() => {
@@ -161,17 +161,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 => {
@@ -212,7 +212,7 @@ const PlainAssetsConfigModal = props => {
         display: DatasourceDisplay.DATASOURCE_TABLE,
         searchCount: searchCount.current,
         searchMethod: DatasourceSearchMethod.DATASOURCE_SEARCH_QUERY,
-        actions: Array.from(userInteractionActions.current)
+        actions: userInteractions.get()
       },
       eventType: 'ui'
     });
@@ -244,15 +244,15 @@ const PlainAssetsConfigModal = props => {
         }]
       }), consumerEvent);
     }
-  }, [aql, schemaId, workspaceId, analyticsPayload, totalCount, retrieveUrlForSmartCardRender, responseItems.length, onInsert, datasourceId, visibleColumnKeys]);
+  }, [aql, schemaId, workspaceId, analyticsPayload, totalCount, retrieveUrlForSmartCardRender, responseItems.length, onInsert, datasourceId, visibleColumnKeys, userInteractions]);
   const handleOnSearch = useCallback((searchAql, searchSchemaId) => {
     if (schemaId !== searchSchemaId || aql !== searchAql || status === 'rejected') {
       searchCount.current++;
       if (schemaId !== searchSchemaId) {
-        userInteractionActions.current.add(DatasourceAction.SCHEMA_UPDATED);
+        userInteractions.add(DatasourceAction.SCHEMA_UPDATED);
       }
       if (aql !== searchAql) {
-        userInteractionActions.current.add(DatasourceAction.QUERY_UPDATED);
+        userInteractions.add(DatasourceAction.QUERY_UPDATED);
       }
       setAql(searchAql);
       setSchemaId(searchSchemaId);
@@ -263,7 +263,7 @@ const PlainAssetsConfigModal = props => {
         shouldResetColumns: true
       });
     }
-  }, [aql, reset, schemaId, status]);
+  }, [aql, reset, schemaId, status, userInteractions]);
   const renderErrorState = useCallback(() => {
     if (errorState) {
       switch (errorState) {
@@ -302,9 +302,9 @@ const PlainAssetsConfigModal = props => {
     return {
       ...analyticsPayload,
       searchCount: searchCount.current,
-      actions: Array.from(userInteractionActions.current)
+      actions: userInteractions.get()
     };
-  }, [analyticsPayload]);
+  }, [analyticsPayload, userInteractions]);
   return jsx(IntlMessagesProvider, {
     defaultMessages: i18nEN,
     loaderFn: fetchMessagesForLocale
@@ -327,8 +327,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 +356,4 @@ const contextData = {
     ...analyticsContextAttributes
   }
 };
-export const AssetsConfigModal = withAnalyticsContext(contextData)(PlainAssetsConfigModal);
+export const AssetsConfigModal = withAnalyticsContext(contextData)(props => jsx(DatasourceExperienceIdProvider, null, jsx(UserInteractionsProvider, 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/aql-search-input/index.js

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

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

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

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

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

package/dist/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,8 @@ import { componentMetadata } from '../../../analytics/constants';
 import { DatasourceAction, DatasourceDisplay, DatasourceSearchMethod } from '../../../analytics/types';
 import { buildDatasourceAdf } from '../../../common/utils/adf';
 import { fetchMessagesForLocale } from '../../../common/utils/locale/fetch-messages-for-locale';
+import { DatasourceExperienceIdProvider } from '../../../contexts/datasource-experience-id';
+import { UserInteractionsProvider, useUserInteractions } from '../../../contexts/user-interactions';
 import { useDatasourceTableState } from '../../../hooks/useDatasourceTableState';
 import i18nEN from '../../../i18n/en';
 import { useAvailableSites } from '../../../services/useAvailableSites';
@@ -48,9 +49,6 @@ const searchCountStyles = xcss({
   fontWeight: 600
 });
 export const PlainConfluenceSearchConfigModal = props => {
-  const {
-    current: modalRenderInstanceId
-  } = useRef(uuidv4());
   const {
     datasourceId,
     columnCustomSizes: initialColumnCustomSizes,
@@ -81,7 +79,7 @@ export const PlainConfluenceSearchConfigModal = props => {
 
   // analytics related parameters
   const searchCount = useRef(0);
-  const userInteractionActions = useRef(new Set());
+  const userInteractions = useUserInteractions();
   const visibleColumnCount = useRef((visibleColumnKeys === null || visibleColumnKeys === void 0 ? void 0 : visibleColumnKeys.length) || 0);
   const parameters = useMemo(() => ({
     ...initialParameters,
@@ -143,7 +141,7 @@ export const PlainConfluenceSearchConfigModal = props => {
   // TODO: further refactoring in EDM-9573
   // https://stash.atlassian.com/projects/ATLASSIAN/repos/atlassian-frontend-monorepo/pull-requests/82725/overview?commentId=6829171
   const onSiteSelection = useCallback(site => {
-    userInteractionActions.current.add(DatasourceAction.INSTANCE_UPDATED);
+    userInteractions.add(DatasourceAction.INSTANCE_UPDATED);
     setSearchString(undefined);
     setLastModified(undefined);
     setContributorAccountIds([]);
@@ -151,7 +149,7 @@ export const PlainConfluenceSearchConfigModal = props => {
     reset({
       shouldForceRequest: true
     });
-  }, [reset]);
+  }, [reset, userInteractions]);
   useEffect(() => {
     const newVisibleColumnKeys = !initialVisibleColumnKeys || (initialVisibleColumnKeys || []).length === 0 ? defaultVisibleColumnKeys : initialVisibleColumnKeys;
     visibleColumnCount.current = newVisibleColumnKeys.length;
@@ -170,10 +168,10 @@ export const PlainConfluenceSearchConfigModal = props => {
   // TODO: common functionality of all modals refactor in EDM-9573
   const handleVisibleColumnKeysChange = useCallback((newVisibleColumnKeys = []) => {
     const columnAction = getColumnAction(visibleColumnKeys || [], newVisibleColumnKeys);
-    userInteractionActions.current.add(columnAction);
+    userInteractions.add(columnAction);
     visibleColumnCount.current = newVisibleColumnKeys.length;
     setVisibleColumnKeys(newVisibleColumnKeys);
-  }, [visibleColumnKeys]);
+  }, [visibleColumnKeys, userInteractions]);
 
   // TODO: further refactoring in EDM-9573
   // https://stash.atlassian.com/projects/ATLASSIAN/repos/atlassian-frontend-monorepo/pull-requests/82725/overview?commentId=6798258
@@ -189,13 +187,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;
@@ -224,8 +221,8 @@ export const PlainConfluenceSearchConfigModal = props => {
     extensionKey,
     destinationObjectTypes,
     searchCount: searchCount.current,
-    actions: Array.from(userInteractionActions.current)
-  }), [destinationObjectTypes, extensionKey]);
+    actions: userInteractions.get()
+  }), [destinationObjectTypes, extensionKey, userInteractions]);
   const isDataReady = (visibleColumnKeys || []).length > 0;
   const fireInlineViewedEvent = useCallback(() => {
     fireEvent('ui.link.viewed.count', {
@@ -311,7 +308,7 @@ export const PlainConfluenceSearchConfigModal = props => {
         display: currentViewMode === 'inline' ? DatasourceDisplay.DATASOURCE_INLINE : DatasourceDisplay.DATASOURCE_TABLE,
         searchCount: searchCount.current,
         searchMethod: DatasourceSearchMethod.DATASOURCE_SEARCH_QUERY,
-        actions: Array.from(userInteractionActions.current)
+        actions: userInteractions.get()
       },
       eventType: 'ui'
     });
@@ -351,14 +348,14 @@ export const PlainConfluenceSearchConfigModal = props => {
         }]
       }, confluenceSearchUrl), consumerEvent);
     }
-  }, [isParametersSet, cloudId, analyticsPayload, totalCount, currentViewMode, onInsert, confluenceSearchUrl, datasourceId, parametersToSend, visibleColumnKeys, columnCustomSizes, wrappedColumnKeys]);
+  }, [isParametersSet, cloudId, analyticsPayload, totalCount, currentViewMode, onInsert, confluenceSearchUrl, datasourceId, parametersToSend, visibleColumnKeys, columnCustomSizes, wrappedColumnKeys, userInteractions]);
   const handleViewModeChange = selectedMode => {
-    userInteractionActions.current.add(DatasourceAction.DISPLAY_VIEW_CHANGED);
+    userInteractions.add(DatasourceAction.DISPLAY_VIEW_CHANGED);
     setCurrentViewMode(selectedMode);
   };
   const onSearch = useCallback((newSearchString, filters) => {
     searchCount.current++;
-    userInteractionActions.current.add(DatasourceAction.QUERY_UPDATED);
+    userInteractions.add(DatasourceAction.QUERY_UPDATED);
     if (filters) {
       const {
         editedOrCreatedBy,
@@ -383,16 +380,16 @@ export const PlainConfluenceSearchConfigModal = props => {
     reset({
       shouldForceRequest: true
     });
-  }, [reset]);
+  }, [reset, userInteractions]);
   const isInsertDisabled = !isParametersSet || status === 'rejected' || status === 'unauthorized' || status === 'loading';
   const getCancelButtonAnalyticsPayload = useCallback(() => {
     return {
       extensionKey,
       destinationObjectTypes,
       searchCount: searchCount.current,
-      actions: Array.from(userInteractionActions.current)
+      actions: userInteractions.get()
     };
-  }, [destinationObjectTypes, extensionKey]);
+  }, [destinationObjectTypes, extensionKey, userInteractions]);
   return jsx(IntlMessagesProvider, {
     defaultMessages: i18nEN,
     loaderFn: fetchMessagesForLocale
@@ -424,7 +421,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 -- Ignored via go/DSP-18766
+    ,
     style: {
       color: `var(--ds-text-accent-gray, ${N800})`
     }
@@ -458,4 +457,4 @@ const contextData = {
     ...analyticsContextAttributes
   }
 };
-export const ConfluenceSearchConfigModal = withAnalyticsContext(contextData)(PlainConfluenceSearchConfigModal);
+export const ConfluenceSearchConfigModal = withAnalyticsContext(contextData)(props => jsx(DatasourceExperienceIdProvider, null, jsx(UserInteractionsProvider, 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/concatenated-menu-list.js

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

package/dist/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/draggable-table-heading.js

@@ -306,7 +306,9 @@ export const DraggableTableHeading = ({
     ref: mainHeaderCellRef,
     "data-testid": `${id}-column-heading`,
     style: {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
       cursor: 'grab',
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
       ...getWidthCss({
         shouldUseWidth: resizeIsEnabled,
         width

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

@@ -103,8 +103,11 @@ export default (({
     style: {
       // the IssueLikeDataTableView wraps the table in a container with the styling below while modal doesn't
       // this maxHeight comes from scrollableContainerHeight
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
       maxHeight: ScrollableContainerHeight,
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
       padding: "var(--ds-space-0, 0px)",
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
       boxSizing: 'border-box'
     }
   }, jsx("table", {
@@ -117,7 +120,9 @@ export default (({
   }, jsx("tr", null, columnsToRender.map(({
     key,
     width
-  }) => jsx(TableHeading, {
+  }) =>
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+  jsx(TableHeading, {
     key: key,
     style: {
       width,

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
@@ -559,7 +560,9 @@ export const IssueLikeDataTableView = ({
      */
     contentEditable: false,
     ref: containerRef,
-    css: [tableContainerStyles, scrollableContainerHeight && scrollableContainerStyles],
+    css: [tableContainerStyles, scrollableContainerHeight && scrollableContainerStyles]
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+    ,
     style: scrollableContainerHeight ? {
       maxHeight: `${scrollableContainerHeight}px`
     } : undefined,
@@ -568,13 +571,17 @@ export const IssueLikeDataTableView = ({
     setWidth: debounce(setTableContainerWidth, 100)
   }), jsx(Table, {
     css: tableStyles,
-    "data-testid": testId,
+    "data-testid": testId
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+    ,
     style: shouldUseWidth ? {
       tableLayout: 'fixed'
     } : {}
   }, jsx("thead", {
     "data-testid": testId && `${testId}--head`,
-    css: [noDefaultBorderStyles, tableHeadStyles],
+    css: [noDefaultBorderStyles, tableHeadStyles]
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    ,
     className: !!onVisibleColumnKeysChange ? 'has-column-picker' : ''
   }, jsx("tr", {
     ref: tableHeaderRowRef
@@ -628,7 +635,9 @@ export const IssueLikeDataTableView = ({
     } else {
       return jsx(TableHeading, {
         key: key,
-        "data-testid": `${key}-column-heading`,
+        "data-testid": `${key}-column-heading`
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+        ,
         style: getWidthCss({
           shouldUseWidth,
           width
@@ -639,8 +648,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`
@@ -672,7 +680,9 @@ export const IssueLikeDataTableView = ({
     return jsx(TableCell, {
       key: cellKey,
       "data-testid": testId && `${testId}--cell-${cellIndex}`,
-      colSpan: isEditable && isLastCell ? 2 : undefined,
+      colSpan: isEditable && isLastCell ? 2 : undefined
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+      ,
       style: loadingRowStyle,
       css: [wrappedColumnKeys !== null && wrappedColumnKeys !== void 0 && wrappedColumnKeys.includes(cellKey) ? null : truncateStyles]
     }, content);

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

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

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

@@ -26,7 +26,9 @@ const LinkRenderType = ({
   const anchor = useMemo(() => /*#__PURE__*/React.createElement(HoverCard, {
     url: url
   }, /*#__PURE__*/React.createElement(LinkUrl, {
-    href: url,
+    href: url
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+    ,
     style: {
       ...linkStyle,
       fontSize: fieldTextFontSize