@atlaskit/link-datasource 3.19.2 → 3.20.0

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

@@ -0,0 +1,190 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import { useCallback, useEffect, useRef } from 'react';
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+import { css, jsx } from '@emotion/react';
+import { withAnalyticsContext } from '@atlaskit/analytics-next';
+import { IntlMessagesProvider } from '@atlaskit/intl-messages-provider';
+import { useDatasourceAnalyticsEvents } from '../../analytics';
+import { componentMetadata } from '../../analytics/constants';
+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 { StoreContainer } from '../../state';
+import { ScrollableContainerHeight } from '../../ui/issue-like-table/styled';
+import { ASSETS_LIST_OF_LINKS_DATASOURCE_ID } from '../assets-modal';
+import { AccessRequired } from '../common/error-state/access-required';
+import { LoadingError } from '../common/error-state/loading-error';
+import { NoResults } from '../common/error-state/no-results';
+import { ProviderAuthRequired } from '../common/error-state/provider-auth-required';
+import { IssueLikeDataTableView } from '../issue-like-table';
+import EmptyState from '../issue-like-table/empty-state';
+import { TableFooter } from '../table-footer';
+var containerStyles = css({
+  borderRadius: 'inherit'
+});
+var DatasourceTableViewWithoutAnalytics = function DatasourceTableViewWithoutAnalytics(_ref) {
+  var datasourceId = _ref.datasourceId,
+    parameters = _ref.parameters,
+    visibleColumnKeys = _ref.visibleColumnKeys,
+    onVisibleColumnKeysChange = _ref.onVisibleColumnKeysChange,
+    url = _ref.url,
+    columnCustomSizes = _ref.columnCustomSizes,
+    onColumnResize = _ref.onColumnResize,
+    wrappedColumnKeys = _ref.wrappedColumnKeys,
+    onWrappedColumnChange = _ref.onWrappedColumnChange;
+  var _useDatasourceTableSt = useDatasourceTableState({
+      datasourceId: datasourceId,
+      parameters: parameters,
+      fieldKeys: visibleColumnKeys
+    }),
+    reset = _useDatasourceTableSt.reset,
+    status = _useDatasourceTableSt.status,
+    onNextPage = _useDatasourceTableSt.onNextPage,
+    responseItems = _useDatasourceTableSt.responseItems,
+    responseItemIds = _useDatasourceTableSt.responseItemIds,
+    hasNextPage = _useDatasourceTableSt.hasNextPage,
+    columns = _useDatasourceTableSt.columns,
+    defaultVisibleColumnKeys = _useDatasourceTableSt.defaultVisibleColumnKeys,
+    totalCount = _useDatasourceTableSt.totalCount,
+    loadDatasourceDetails = _useDatasourceTableSt.loadDatasourceDetails,
+    _useDatasourceTableSt2 = _useDatasourceTableSt.extensionKey,
+    extensionKey = _useDatasourceTableSt2 === void 0 ? null : _useDatasourceTableSt2,
+    providerName = _useDatasourceTableSt.providerName,
+    destinationObjectTypes = _useDatasourceTableSt.destinationObjectTypes,
+    authDetails = _useDatasourceTableSt.authDetails;
+  var _useDatasourceAnalyti = useDatasourceAnalyticsEvents(),
+    fireEvent = _useDatasourceAnalyti.fireEvent;
+  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
+       But we don't want to call it on initial load. This screws up useDatasourceTableState's internal
+       mechanism of initial loading. Use of ref here makes it basically work as a `componentDidUpdate` but not `componentDidMount`
+    */
+  var isInitialRender = useRef(true);
+  var hasColumns = !!columns.length;
+  var isDataReady = hasColumns && responseItems.length > 0 && totalCount && totalCount > 0;
+  visibleColumnCount.current = (visibleColumnKeys === null || visibleColumnKeys === void 0 ? void 0 : visibleColumnKeys.length) || 0;
+  useEffect(function () {
+    if (!isInitialRender.current) {
+      reset();
+    }
+    isInitialRender.current = false;
+  }, [reset, parameters]);
+  useEffect(function () {
+    if (onVisibleColumnKeysChange && (visibleColumnKeys || []).length === 0 && defaultVisibleColumnKeys.length > 0) {
+      onVisibleColumnKeysChange(defaultVisibleColumnKeys);
+    }
+  }, [visibleColumnKeys, defaultVisibleColumnKeys, onVisibleColumnKeysChange]);
+  useEffect(function () {
+    var isTableViewRenderedWithData = status === 'resolved' && isDataReady;
+    if (isTableViewRenderedWithData) {
+      fireEvent('ui.datasource.renderSuccess', {
+        extensionKey: extensionKey,
+        destinationObjectTypes: destinationObjectTypes,
+        totalItemCount: totalCount,
+        displayedColumnCount: visibleColumnCount.current,
+        display: 'table'
+      });
+    }
+  }, [totalCount, fireEvent, status, extensionKey, destinationObjectTypes, isDataReady]);
+  useEffect(function () {
+    var shouldStartUfoExperience = datasourceId && parameters && visibleColumnKeys && status === 'loading';
+    if (shouldStartUfoExperience) {
+      startUfoExperience({
+        name: 'datasource-rendered'
+      }, experienceId);
+    }
+  }, [datasourceId, parameters, status, experienceId, visibleColumnKeys]);
+  useColumnPickerRenderedFailedUfoExperience(status, experienceId);
+  useDataRenderedUfoExperience({
+    status: status,
+    experienceId: experienceId,
+    itemCount: responseItems.length,
+    extensionKey: extensionKey
+  });
+  var forcedReset = useCallback(function () {
+    reset({
+      shouldForceRequest: true,
+      shouldResetColumns: datasourceId === ASSETS_LIST_OF_LINKS_DATASOURCE_ID
+    });
+  }, [reset, datasourceId]);
+  var onRefresh = useCallback(function () {
+    fireEvent('ui.button.clicked.sync', {
+      extensionKey: extensionKey,
+      destinationObjectTypes: destinationObjectTypes
+    });
+    forcedReset();
+  }, [destinationObjectTypes, extensionKey, fireEvent, forcedReset]);
+  var handleErrorRefresh = useCallback(function () {
+    reset({
+      shouldForceRequest: true
+    });
+  }, [reset]);
+  if (status === 'resolved' && !responseItems.length || status === 'forbidden') {
+    return jsx(NoResults, {
+      onRefresh: handleErrorRefresh
+    });
+  }
+  if (status === 'unauthorized') {
+    return authDetails !== null && authDetails !== void 0 && authDetails.length && authDetails.length > 0 ? jsx(ProviderAuthRequired, {
+      auth: authDetails,
+      extensionKey: extensionKey,
+      providerName: providerName,
+      onAuthSuccess: forcedReset,
+      onAuthError: forcedReset,
+      datasourceId: datasourceId
+    }) : jsx(AccessRequired, {
+      url: url
+    });
+  }
+  if (status === 'rejected') {
+    return jsx(LoadingError, {
+      onRefresh: handleErrorRefresh
+    });
+  }
+  return jsx(IntlMessagesProvider, {
+    defaultMessages: i18nEN,
+    loaderFn: fetchMessagesForLocale
+  }, jsx("div", {
+    css: containerStyles,
+    className: "datasource-table"
+  }, hasColumns ? jsx(IssueLikeDataTableView, {
+    testId: 'datasource-table-view',
+    hasNextPage: hasNextPage,
+    items: responseItems,
+    itemIds: responseItemIds,
+    onNextPage: onNextPage,
+    onLoadDatasourceDetails: loadDatasourceDetails,
+    status: status,
+    columns: columns,
+    visibleColumnKeys: visibleColumnKeys || defaultVisibleColumnKeys,
+    onVisibleColumnKeysChange: onVisibleColumnKeysChange,
+    columnCustomSizes: columnCustomSizes,
+    onColumnResize: onColumnResize,
+    wrappedColumnKeys: wrappedColumnKeys,
+    onWrappedColumnChange: onWrappedColumnChange,
+    scrollableContainerHeight: ScrollableContainerHeight,
+    extensionKey: extensionKey
+  }) : jsx(EmptyState, {
+    testId: "datasource-table-view-skeleton",
+    isCompact: true
+  }), jsx(TableFooter, {
+    datasourceId: datasourceId,
+    itemCount: isDataReady ? totalCount : undefined,
+    onRefresh: onRefresh,
+    isLoading: !isDataReady || status === 'loading',
+    url: url
+  })));
+};
+export var DatasourceTableViewOld = withAnalyticsContext(componentMetadata.tableView)(function (props) {
+  return jsx(StoreContainer, null, jsx(DatasourceExperienceIdProvider, null, jsx(DatasourceTableViewWithoutAnalytics, props)));
+});

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

@@ -0,0 +1,178 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+var _excluded = ["isOpen"];
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import { useCallback, useEffect, useRef, useState } from 'react';
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+import { jsx } from '@emotion/react';
+import { useIntl } from 'react-intl-next';
+import Button from '@atlaskit/button/new';
+import BoardIcon from '@atlaskit/icon/core/migration/board';
+import ChevronDownIcon from '@atlaskit/icon/utility/migration/chevron-down';
+import { Box, xcss } from '@atlaskit/primitives';
+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';
+var chevronIconStyles = xcss({
+  display: 'flex',
+  alignItems: 'center'
+});
+export var ColumnPickerOld = function ColumnPickerOld(_ref) {
+  var columns = _ref.columns,
+    selectedColumnKeys = _ref.selectedColumnKeys,
+    onSelectedColumnKeysChange = _ref.onSelectedColumnKeysChange,
+    onOpen = _ref.onOpen;
+  var intl = useIntl();
+  var experienceId = useDatasourceExperienceId();
+  var _useState = useState([]),
+    _useState2 = _slicedToArray(_useState, 2),
+    allOptions = _useState2[0],
+    setAllOptions = _useState2[1];
+  var pickerRef = useRef(null);
+  var mapColumnToOption = useCallback(function (_ref2) {
+    var key = _ref2.key,
+      title = _ref2.title;
+    return {
+      label: title,
+      value: key
+    };
+  }, []);
+  var selectedOptions = columns.filter(function (_ref3) {
+    var key = _ref3.key;
+    return selectedColumnKeys.includes(key);
+  }).map(mapColumnToOption);
+  useEffect(function () {
+    setAllOptions(columns.filter(function (_ref4) {
+      var title = _ref4.title;
+      return title;
+    }).map(mapColumnToOption));
+  }, [columns, mapColumnToOption]);
+  var handleChange = useCallback(function (selectedOptions) {
+    var selectedValues = selectedOptions.map(function (_ref5) {
+      var value = _ref5.value;
+      return value;
+    });
+    selectedValues.sort(function (a, b) {
+      var indexB = columns.findIndex(function (_ref6) {
+        var key = _ref6.key;
+        return key === b;
+      });
+      var indexA = columns.findIndex(function (_ref7) {
+        var key = _ref7.key;
+        return key === a;
+      });
+      return indexA - indexB;
+    });
+    onSelectedColumnKeysChange(selectedValues);
+  }, [columns, onSelectedColumnKeysChange]);
+  var sortSelectedColumnsTop = useCallback(function () {
+    if (!allOptions.length) {
+      return;
+    }
+    var nonSelectedOptions = allOptions.filter(function (option) {
+      return !selectedOptions.find(function (selectedOption) {
+        return selectedOption.value === option.value;
+      });
+    });
+    var sortedOptions = [].concat(_toConsumableArray(selectedOptions), _toConsumableArray(nonSelectedOptions));
+    sortedOptions.length > 0 && setAllOptions(sortedOptions);
+  }, [allOptions, selectedOptions]);
+  var stopEscapePropagationWhenOpen = function stopEscapePropagationWhenOpen(e) {
+    if (e.key === 'Escape') {
+      e.stopPropagation();
+    }
+  };
+  var handleOpen = useCallback(function () {
+    onOpen && onOpen();
+    void sortSelectedColumnsTop();
+  }, [onOpen, sortSelectedColumnsTop]);
+
+  // If only 1 option is selected, disable it since we don't want user to uncheck everything
+  var handleIsOptionDisabled = function handleIsOptionDisabled(option, selectValue) {
+    return selectValue.length === 1 && selectValue.some(function (selectedValue) {
+      return selectedValue.value === option.value;
+    });
+  };
+  useEffect(function () {
+    if (allOptions.length) {
+      var _pickerRef$current;
+      // necessary to refocus the search input after the loading state
+      pickerRef === null || pickerRef === void 0 || (_pickerRef$current = pickerRef.current) === null || _pickerRef$current === void 0 || (_pickerRef$current = _pickerRef$current.selectRef) === null || _pickerRef$current === void 0 || (_pickerRef$current = _pickerRef$current.select) === null || _pickerRef$current === void 0 || (_pickerRef$current = _pickerRef$current.inputRef) === null || _pickerRef$current === void 0 || _pickerRef$current.focus();
+    }
+  }, [allOptions]);
+  useEffect(function () {
+    if (allOptions.length) {
+      if (experienceId) {
+        succeedUfoExperience({
+          name: 'column-picker-rendered'
+        }, experienceId);
+      }
+    }
+  }, [allOptions, experienceId]);
+  return jsx(PopupSelect, {
+    classNamePrefix: 'column-picker-popup',
+    testId: 'column-picker-popup',
+    components: {
+      Option: CheckboxOption,
+      MenuList: ConcatenatedMenuList
+    },
+    filterOption: createFilter({
+      ignoreAccents: false
+    }),
+    options: allOptions,
+    value: selectedOptions
+    // @ts-ignore - https://product-fabric.atlassian.net/browse/DSP-21000
+    ,
+    onOpen: handleOpen,
+    closeMenuOnSelect: false,
+    hideSelectedOptions: false,
+    id: 'column-picker-popup',
+    isMulti: true,
+    ref: pickerRef,
+    isOptionDisabled: handleIsOptionDisabled,
+    placeholder: intl.formatMessage(columnPickerMessages.search),
+    onKeyDown: stopEscapePropagationWhenOpen,
+    label: "Search for fields",
+    onChange: handleChange,
+    isLoading: allOptions.length === 0,
+    target: function target(_ref8) {
+      var isOpen = _ref8.isOpen,
+        triggerProps = _objectWithoutProperties(_ref8, _excluded);
+      return jsx(Tooltip, {
+        content: intl.formatMessage(columnPickerMessages.tooltip)
+      }, function (tooltipProps) {
+        return jsx(Button, _extends({}, tooltipProps, triggerProps, {
+          isSelected: isOpen,
+          spacing: "compact",
+          appearance: "subtle",
+          testId: "column-picker-trigger-button",
+          iconBefore: function iconBefore() {
+            return jsx(Box, {
+              as: "span",
+              xcss: chevronIconStyles
+            }, jsx(BoardIcon, {
+              color: "currentColor",
+              label: "board",
+              LEGACY_size: "medium",
+              spacing: "spacious",
+              LEGACY_margin: "0 0 0 4px"
+            }), jsx(ChevronDownIcon, {
+              color: "currentColor",
+              label: "down",
+              LEGACY_size: "medium"
+            }));
+          }
+        }), '');
+      });
+    }
+  });
+};

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

@@ -0,0 +1,43 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["children"];
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+import { css, jsx } from '@emotion/react';
+import { FormattedMessage } from 'react-intl-next';
+import { components } from '@atlaskit/select';
+import { fontFallback } from '@atlaskit/theme/typography';
+import { columnPickerMessages } from './messages';
+export var SELECT_ITEMS_MAXIMUM_THRESHOLD = 200;
+var messageStyles = css({
+  color: "var(--ds-text-subtle, #44546F)",
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+  font: "var(--ds-font-body-small, ".concat(fontFallback.body.small, ")"),
+  fontWeight: "var(--ds-font-weight-regular, 400)"
+});
+export var ConcatenatedMenuListOld = function ConcatenatedMenuListOld(_ref) {
+  var children = _ref.children,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var shouldUseDefaultMenuList = !children || !Array.isArray(children) || children.length <= SELECT_ITEMS_MAXIMUM_THRESHOLD;
+  if (shouldUseDefaultMenuList) {
+    return jsx(components.MenuList, props, children);
+  }
+  var optionStyle = {
+    padding: "var(--ds-space-050, 4px)".concat(" ", "var(--ds-space-200, 16px)"),
+    height: 'auto'
+  };
+  var maximumLimitReachedMessage =
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+  jsx("div", {
+    css: messageStyles,
+    style: optionStyle
+  }, jsx(FormattedMessage, _extends({
+    tagName: 'div'
+  }, columnPickerMessages.maximumItemsShownLine1)), jsx(FormattedMessage, _extends({
+    tagName: 'div'
+  }, columnPickerMessages.maximumItemsShownLine2)));
+  return jsx(components.MenuList, props, children.slice(0, SELECT_ITEMS_MAXIMUM_THRESHOLD), maximumLimitReachedMessage);
+};

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

@@ -0,0 +1,6 @@
+._k48pi7a9{font-weight:var(--ds-font-weight-regular,400)}
+._syaz1gjq{color:var(--ds-text-subtle,#44546f)}
+._u6rd4rgb font{-u-n-s-a-f-e_small:normal 400 9pt/1pc ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,system-ui,"Helvetica Neue",sans-serif}
+._v2gl1m4d font{small:normal 400 11px/1pc ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,system-ui,"Helvetica Neue",sans-serif}
+._x3fx1ryd font{medium:normal 400 14px/20px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,system-ui,"Helvetica Neue",sans-serif}
+._zzcc92k5 font{large:normal 400 1pc/24px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,system-ui,"Helvetica Neue",sans-serif}

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

@@ -1,43 +1,43 @@
+/* concatenated-menu-list.tsx generated by @compiled/babel-plugin v0.36.0 */
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["children"];
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { css, jsx } from '@emotion/react';
+import "./concatenated-menu-list.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
 import { FormattedMessage } from 'react-intl-next';
+import { fg } from "@atlaskit/platform-feature-flags";
 import { components } from '@atlaskit/select';
 import { fontFallback } from '@atlaskit/theme/typography';
+import { ConcatenatedMenuListOld } from './concatenated-menu-list-old';
 import { columnPickerMessages } from './messages';
 export var SELECT_ITEMS_MAXIMUM_THRESHOLD = 200;
-var messageStyles = css({
-  color: "var(--ds-text-subtle, #44546F)",
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-  font: "var(--ds-font-body-small, ".concat(fontFallback.body.small, ")"),
-  fontWeight: "var(--ds-font-weight-regular, 400)"
-});
-export var ConcatenatedMenuList = function ConcatenatedMenuList(_ref) {
+var messageStyles = null;
+var ConcatenatedMenuListNew = function ConcatenatedMenuListNew(_ref) {
   var children = _ref.children,
     props = _objectWithoutProperties(_ref, _excluded);
   var shouldUseDefaultMenuList = !children || !Array.isArray(children) || children.length <= SELECT_ITEMS_MAXIMUM_THRESHOLD;
   if (shouldUseDefaultMenuList) {
-    return jsx(components.MenuList, props, children);
+    return /*#__PURE__*/React.createElement(components.MenuList, props, children);
   }
   var optionStyle = {
     padding: "var(--ds-space-050, 4px)".concat(" ", "var(--ds-space-200, 16px)"),
     height: 'auto'
   };
-  var maximumLimitReachedMessage =
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
-  jsx("div", {
-    css: messageStyles,
-    style: optionStyle
-  }, jsx(FormattedMessage, _extends({
+  var maximumLimitReachedMessage = /*#__PURE__*/React.createElement("div", {
+    style: optionStyle,
+    className: ax(["_syaz1gjq _k48pi7a9 _zzcc92k5 _x3fx1ryd _u6rd4rgb _v2gl1m4d"])
+  }, /*#__PURE__*/React.createElement(FormattedMessage, _extends({
     tagName: 'div'
-  }, columnPickerMessages.maximumItemsShownLine1)), jsx(FormattedMessage, _extends({
+  }, columnPickerMessages.maximumItemsShownLine1)), /*#__PURE__*/React.createElement(FormattedMessage, _extends({
     tagName: 'div'
   }, columnPickerMessages.maximumItemsShownLine2)));
-  return jsx(components.MenuList, props, children.slice(0, SELECT_ITEMS_MAXIMUM_THRESHOLD), maximumLimitReachedMessage);
+  return /*#__PURE__*/React.createElement(components.MenuList, props, children.slice(0, SELECT_ITEMS_MAXIMUM_THRESHOLD), maximumLimitReachedMessage);
+};
+export var ConcatenatedMenuList = function ConcatenatedMenuList(props) {
+  if (fg('bandicoots-compiled-migration-link-datasource')) {
+    return /*#__PURE__*/React.createElement(ConcatenatedMenuListNew, props);
+  } else {
+    return /*#__PURE__*/React.createElement(ConcatenatedMenuListOld, props);
+  }
 };

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

@@ -0,0 +1,2 @@
+._1e0c1txw{display:flex}
+._4cvr1h6o{align-items:center}

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

@@ -1,32 +1,29 @@
+/* index.tsx generated by @compiled/babel-plugin v0.36.0 */
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 var _excluded = ["isOpen"];
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-import { useCallback, useEffect, useRef, useState } from 'react';
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { jsx } from '@emotion/react';
+import "./index.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
+import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { useIntl } from 'react-intl-next';
 import Button from '@atlaskit/button/new';
 import BoardIcon from '@atlaskit/icon/core/migration/board';
 import ChevronDownIcon from '@atlaskit/icon/utility/migration/chevron-down';
-import { Box, xcss } from '@atlaskit/primitives';
+import { fg } from "@atlaskit/platform-feature-flags";
+import { Box } from '@atlaskit/primitives/compiled';
 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 { ColumnPickerOld } from './column-picker-old';
 import { ConcatenatedMenuList } from './concatenated-menu-list';
 import { columnPickerMessages } from './messages';
-var chevronIconStyles = xcss({
-  display: 'flex',
-  alignItems: 'center'
-});
-export var ColumnPicker = function ColumnPicker(_ref) {
+var styles = {
+  chevronIconStyles: "_1e0c1txw _4cvr1h6o"
+};
+var ColumnPickerNew = function ColumnPickerNew(_ref) {
   var columns = _ref.columns,
     selectedColumnKeys = _ref.selectedColumnKeys,
     onSelectedColumnKeysChange = _ref.onSelectedColumnKeysChange,
@@ -118,7 +115,7 @@ export var ColumnPicker = function ColumnPicker(_ref) {
       }
     }
   }, [allOptions, experienceId]);
-  return jsx(PopupSelect, {
+  return /*#__PURE__*/React.createElement(PopupSelect, {
     classNamePrefix: 'column-picker-popup',
     testId: 'column-picker-popup',
     components: {
@@ -147,25 +144,25 @@ export var ColumnPicker = function ColumnPicker(_ref) {
     target: function target(_ref8) {
       var isOpen = _ref8.isOpen,
         triggerProps = _objectWithoutProperties(_ref8, _excluded);
-      return jsx(Tooltip, {
+      return /*#__PURE__*/React.createElement(Tooltip, {
         content: intl.formatMessage(columnPickerMessages.tooltip)
       }, function (tooltipProps) {
-        return jsx(Button, _extends({}, tooltipProps, triggerProps, {
+        return /*#__PURE__*/React.createElement(Button, _extends({}, tooltipProps, triggerProps, {
           isSelected: isOpen,
           spacing: "compact",
           appearance: "subtle",
           testId: "column-picker-trigger-button",
           iconBefore: function iconBefore() {
-            return jsx(Box, {
+            return /*#__PURE__*/React.createElement(Box, {
               as: "span",
-              xcss: chevronIconStyles
-            }, jsx(BoardIcon, {
+              xcss: styles.chevronIconStyles
+            }, /*#__PURE__*/React.createElement(BoardIcon, {
               color: "currentColor",
               label: "board",
               LEGACY_size: "medium",
               spacing: "spacious",
               LEGACY_margin: "0 0 0 4px"
-            }), jsx(ChevronDownIcon, {
+            }), /*#__PURE__*/React.createElement(ChevronDownIcon, {
               color: "currentColor",
               label: "down",
               LEGACY_size: "medium"
@@ -175,4 +172,11 @@ export var ColumnPicker = function ColumnPicker(_ref) {
       });
     }
   });
+};
+export var ColumnPicker = function ColumnPicker(props) {
+  if (fg('bandicoots-compiled-migration-link-datasource')) {
+    return /*#__PURE__*/React.createElement(ColumnPickerNew, props);
+  } else {
+    return /*#__PURE__*/React.createElement(ColumnPickerOld, props);
+  }
 };

package/dist/esm/ui/issue-like-table/drag-column-preview-old.js

@@ -0,0 +1,58 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import React from 'react';
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+import { css, jsx } from '@emotion/react';
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+import styled from '@emotion/styled';
+import { N40 } from '@atlaskit/theme/colors';
+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',
+  whiteSpace: 'nowrap',
+  background: "var(--ds-background-disabled, #091E4224)",
+  maxWidth: maxWidth
+},
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+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',
+  whiteSpace: 'nowrap',
+  maxWidth: maxWidth,
+  padding: "var(--ds-space-050, 4px)".concat(" ", "var(--ds-space-100, 8px)"),
+  boxSizing: 'border-box',
+  borderBottom: "0.5px solid ".concat("var(--ds-border, ".concat(N40, ")")),
+  height: '30px'
+},
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+firstLastChildOverride);
+var tableStyles = css({
+  background: "var(--ds-surface, #FFF)",
+  borderCollapse: 'separate',
+  borderSpacing: 0,
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+  font: "var(--ds-font-body, ".concat(fontFallback.body.medium, ")"),
+  maxWidth: maxWidth
+});
+export var DragColumnPreviewOld = function DragColumnPreviewOld(_ref) {
+  var title = _ref.title,
+    rows = _ref.rows;
+  return jsx("table", {
+    css: tableStyles
+  }, jsx("thead", null, jsx("tr", null, jsx(TablePreviewHeading, null, title))), jsx("tbody", null, rows.map(function (data, i) {
+    return jsx("tr", {
+      key: i
+    }, jsx(TablePreviewCell, null, data));
+  }), jsx("tr", null, jsx(TablePreviewCell, null, "..."))));
+};