@atlaskit/link-datasource 7.8.0 → 7.8.1

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/link-datasource
 
+## 7.8.1
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 7.8.0
 
 ### Minor Changes

package/compass.yml

@@ -70,3 +70,6 @@ customFields:
   - name: Required Reviewer Approvals
     type: number
     value: 1
+  - name: Trusted Reviewer Teams
+    type: text
+    value: ari:cloud:identity::team/72f106a3-12dc-4883-ae1d-85623ffee537 # Rovo Growth - Smartlinks - Trusted Reviewers

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

@@ -54,7 +54,9 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var VERSION_TWO = '2';
 var modalBodyErrorWrapperStyles = null;
-var AssetsModalTitle = /*#__PURE__*/React.createElement(_modalTitle.default, null, /*#__PURE__*/React.createElement(_reactIntl.FormattedMessage, _messages.modalMessages.insertObjectsTitle));
+var AssetsModalTitle = function AssetsModalTitle() {
+  return /*#__PURE__*/React.createElement(_modalTitle.default, null, /*#__PURE__*/React.createElement(_reactIntl.FormattedMessage, (0, _fg.fg)('astral_assets_macro_table_ui_uplift') ? _messages.modalMessages.assetsConfigModalTitle : _messages.modalMessages.insertObjectsTitle));
+};
 var PlainAssetsConfigModal = function PlainAssetsConfigModal(props) {
   var datasourceId = props.datasourceId,
     initialParameters = props.parameters,
@@ -369,7 +371,7 @@ var PlainAssetsConfigModal = function PlainAssetsConfigModal(props) {
     } else {
       if (!workspaceId || assetsClientLoading) {
         return /*#__PURE__*/React.createElement(_loadingState.AssetsSearchContainerLoading, {
-          modalTitle: AssetsModalTitle
+          modalTitle: /*#__PURE__*/React.createElement(AssetsModalTitle, null)
         });
       }
       return /*#__PURE__*/React.createElement(_searchContainer.AssetsSearchContainer, {
@@ -380,7 +382,7 @@ var PlainAssetsConfigModal = function PlainAssetsConfigModal(props) {
           objectSchemas: objectSchemas
         },
         onSearch: handleOnSearch,
-        modalTitle: AssetsModalTitle,
+        modalTitle: /*#__PURE__*/React.createElement(AssetsModalTitle, null),
         isSearching: status === 'loading',
         onCancel: onCancel
       });

package/dist/cjs/ui/assets-modal/modal/messages.js

@@ -20,5 +20,20 @@ var modalMessages = exports.modalMessages = (0, _reactIntl.defineMessages)({
     id: 'linkDataSource.assets.configmodal.insertObjectsTitle',
     description: 'Title for the Assets Objects Datasource config modal which prefixes a select picker',
     defaultMessage: 'Insert objects from'
+  },
+  assetsConfigModalTitle: {
+    id: 'linkDataSource.assets.configmodal.title',
+    description: 'Title for the Assets Objects Datasource config modal',
+    defaultMessage: 'Assets table macro configuration'
+  },
+  filterObjectsText: {
+    id: 'linkDataSource.assets.configmodal.filterObjectsText',
+    description: 'Text for the filter option using aql search',
+    defaultMessage: 'Filter'
+  },
+  tablePreviewText: {
+    id: 'linkDataSource.assets.configmodal.tablePreviewText',
+    description: 'Heading above the table preview in the Assets configuration modal',
+    defaultMessage: 'Table preview'
   }
 });

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

@@ -11,11 +11,16 @@ require("./index.compiled.css");
 var _react = _interopRequireWildcard(require("react"));
 var React = _react;
 var _runtime = require("@compiled/react/runtime");
+var _reactIntl = require("react-intl");
+var _heading = _interopRequireDefault(require("@atlaskit/heading/heading"));
+var _fg = require("@atlaskit/platform-feature-flags/fg");
+var _stack = require("@atlaskit/primitives/compiled/stack");
 var _accessRequired = require("../../../common/error-state/access-required");
 var _modalLoadingError = require("../../../common/error-state/modal-loading-error");
 var _noResults = require("../../../common/error-state/no-results");
 var _emptyState = _interopRequireDefault(require("../../../issue-like-table/empty-state"));
 var _issueLikeDataTableView = require("../../../issue-like-table/issue-like-data-table-view");
+var _messages = require("../messages");
 var _initialStateView = require("./initial-state-view");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 var MODAL_HEIGHT = exports.MODAL_HEIGHT = 420;
@@ -100,5 +105,12 @@ var RenderAssetsContent = exports.RenderAssetsContent = function RenderAssetsCon
     }
     return issueLikeDataTableView;
   }, [columns.length, isFetchingInitialData, issueLikeDataTableView, resolvedWithNoResults, shouldRenderTableWithNoResults, status]);
+  if ((0, _fg.fg)('astral_assets_macro_table_ui_uplift')) {
+    return /*#__PURE__*/React.createElement(_stack.Stack, {
+      space: "space.200"
+    }, status !== 'empty' && /*#__PURE__*/React.createElement(_heading.default, {
+      size: "xsmall"
+    }, /*#__PURE__*/React.createElement(_reactIntl.FormattedMessage, _messages.modalMessages.tablePreviewText)), renderAssetsContentView());
+  }
   return renderAssetsContentView();
 };

package/dist/cjs/ui/assets-modal/modal-config-popup/index.compiled.css

@@ -0,0 +1,6 @@
+._19bvpxbi{padding-left:var(--ds-space-200,1pc)}
+._19bvxy5q{padding-left:var(--ds-space-400,2pc)}
+._1bsb1kdj{width:25pc}
+._ca0qpxbi{padding-top:var(--ds-space-200,1pc)}
+._n3tdpxbi{padding-bottom:var(--ds-space-200,1pc)}
+._u5f3pxbi{padding-right:var(--ds-space-200,1pc)}

package/dist/cjs/ui/assets-modal/modal-config-popup/index.js

@@ -0,0 +1,155 @@
+/* index.tsx generated by @compiled/babel-plugin v3.0.2 */
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.selectInAModalStyleFixProps = exports.PAGE_SIZE_OPTIONS = exports.DEFAULT_PAGE_SIZE = exports.AssetsModalConfigPopup = void 0;
+require("./index.compiled.css");
+var _react = _interopRequireWildcard(require("react"));
+var React = _react;
+var _runtime = require("@compiled/react/runtime");
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _reactIntl = require("react-intl");
+var _button = _interopRequireDefault(require("@atlaskit/button/icon/button"));
+var _checkbox = _interopRequireDefault(require("@atlaskit/checkbox/checkbox"));
+var _default = require("@atlaskit/form/label/default");
+var _customize = _interopRequireDefault(require("@atlaskit/icon/core/customize"));
+var _popup = require("@atlaskit/popup/popup");
+var _box = require("@atlaskit/primitives/compiled/box");
+var _stack = require("@atlaskit/primitives/compiled/stack");
+var _default2 = _interopRequireDefault(require("@atlaskit/select/default"));
+var _zindex = require("../../../common/zindex");
+var _messages = require("./messages");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+/**
+ * Rendering a `<Select>` in a `<Modal>` results in the select options getting cut off by the bottom of the modal and
+ * scrolling. This is a work-around for that, see https://atlassian.slack.com/archives/CFJ9DU39U/p1623179496484100
+ */
+var selectInAModalStyleFixProps = exports.selectInAModalStyleFixProps = {
+  styles: {
+    menuPortal: function menuPortal(base) {
+      return _objectSpread(_objectSpread({}, base), {}, {
+        zIndex: _zindex.aboveModal
+      });
+    }
+  },
+  menuPortalTarget: document.body
+};
+var PAGE_SIZE_OPTIONS = exports.PAGE_SIZE_OPTIONS = [10, 20, 50, 100];
+var DEFAULT_PAGE_SIZE = exports.DEFAULT_PAGE_SIZE = 20;
+var styles = {
+  trigger: "_19bvxy5q _u5f3pxbi",
+  content: "_1bsb1kdj _ca0qpxbi _u5f3pxbi _n3tdpxbi _19bvpxbi"
+};
+var AssetsModalConfigPopup = exports.AssetsModalConfigPopup = function AssetsModalConfigPopup(_ref) {
+  var _initialConfig$pageSi, _initialConfig$isNest;
+  var initialConfig = _ref.initialConfig,
+    onChange = _ref.onChange,
+    _ref$testId = _ref.testId,
+    testId = _ref$testId === void 0 ? 'assets-datasource-modal--config-popup' : _ref$testId;
+  var _useIntl = (0, _reactIntl.useIntl)(),
+    formatMessage = _useIntl.formatMessage;
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    isOpen = _useState2[0],
+    setIsOpen = _useState2[1];
+  var _useState3 = (0, _react.useState)({
+      pageSize: (_initialConfig$pageSi = initialConfig === null || initialConfig === void 0 ? void 0 : initialConfig.pageSize) !== null && _initialConfig$pageSi !== void 0 ? _initialConfig$pageSi : DEFAULT_PAGE_SIZE,
+      isNestedReferenceAttributeSelectionEnabled: (_initialConfig$isNest = initialConfig === null || initialConfig === void 0 ? void 0 : initialConfig.isNestedReferenceAttributeSelectionEnabled) !== null && _initialConfig$isNest !== void 0 ? _initialConfig$isNest : false
+    }),
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    config = _useState4[0],
+    setConfig = _useState4[1];
+  var pageSizeSelectId = (0, _react.useId)();
+  var pageSizeOptions = PAGE_SIZE_OPTIONS.map(function (count) {
+    return {
+      label: formatMessage(_messages.modalConfigPopupMessages.objectsPerPage, {
+        count: count
+      }),
+      value: count
+    };
+  });
+  var updateConfig = function updateConfig(partialConfig) {
+    var nextConfig = _objectSpread(_objectSpread({}, config), partialConfig);
+    setConfig(nextConfig);
+    onChange(nextConfig);
+  };
+  var handlePageSizeChange = function handlePageSizeChange(option) {
+    if (option) {
+      updateConfig({
+        pageSize: option.value
+      });
+    }
+  };
+  var handleNestedReferenceAttributeSelectionChange = function handleNestedReferenceAttributeSelectionChange(event) {
+    updateConfig({
+      isNestedReferenceAttributeSelectionEnabled: event.target.checked
+    });
+  };
+  var selectedPageSizeOption = pageSizeOptions.find(function (option) {
+    return option.value === config.pageSize;
+  });
+  return /*#__PURE__*/React.createElement(_popup.Popup, {
+    isOpen: isOpen,
+    onClose: function onClose() {
+      return setIsOpen(false);
+    },
+    placement: "bottom-end",
+    testId: testId,
+    role: "dialog",
+    label: formatMessage(_messages.modalConfigPopupMessages.configureTable),
+    zIndex: _zindex.aboveModal,
+    trigger: function trigger(triggerProps) {
+      return /*#__PURE__*/React.createElement(_box.Box, {
+        xcss: styles.trigger
+      }, /*#__PURE__*/React.createElement(_button.default, {
+        ref: triggerProps.ref,
+        "aria-controls": triggerProps['aria-controls'],
+        "aria-expanded": triggerProps['aria-expanded'],
+        "aria-haspopup": triggerProps['aria-haspopup'],
+        icon: _customize.default,
+        isSelected: isOpen,
+        isTooltipDisabled: false,
+        label: formatMessage(_messages.modalConfigPopupMessages.configureTable),
+        onClick: function onClick() {
+          return setIsOpen(function (currentIsOpen) {
+            return !currentIsOpen;
+          });
+        },
+        testId: "".concat(testId, "--trigger")
+      }));
+    },
+    content: function content() {
+      return /*#__PURE__*/React.createElement(_box.Box, {
+        xcss: styles.content
+      }, /*#__PURE__*/React.createElement(_stack.Stack, {
+        space: "space.200"
+      }, /*#__PURE__*/React.createElement(_stack.Stack, {
+        space: "space.050",
+        alignInline: "start"
+      }, /*#__PURE__*/React.createElement(_default.Label, {
+        htmlFor: pageSizeSelectId
+      }, /*#__PURE__*/React.createElement(_reactIntl.FormattedMessage, _messages.modalConfigPopupMessages.tablePagination)), /*#__PURE__*/React.createElement(_default2.default, (0, _extends2.default)({}, selectInAModalStyleFixProps, {
+        inputId: pageSizeSelectId,
+        options: pageSizeOptions,
+        value: selectedPageSizeOption,
+        onChange: handlePageSizeChange,
+        isSearchable: false,
+        menuPlacement: "bottom",
+        testId: "".concat(testId, "--page-size-select")
+      }))), /*#__PURE__*/React.createElement(_checkbox.default, {
+        isChecked: config.isNestedReferenceAttributeSelectionEnabled,
+        onChange: handleNestedReferenceAttributeSelectionChange,
+        label: formatMessage(_messages.modalConfigPopupMessages.nestedReferenceAttributeSelection),
+        testId: "".concat(testId, "--nested-reference-attribute-selection")
+      })));
+    }
+  });
+};

package/dist/cjs/ui/assets-modal/modal-config-popup/messages.js

@@ -0,0 +1,29 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.modalConfigPopupMessages = void 0;
+var _reactIntl = require("react-intl");
+var modalConfigPopupMessages = exports.modalConfigPopupMessages = (0, _reactIntl.defineMessages)({
+  configureTable: {
+    id: 'linkDataSource.assets.configModal.configPopup.configureTable',
+    description: 'Tooltip and accessibility label for the icon button that opens the Assets table configuration popup',
+    defaultMessage: 'Configure table'
+  },
+  nestedReferenceAttributeSelection: {
+    id: 'linkDataSource.assets.configModal.configPopup.nestedReferenceAttributeSelection',
+    description: 'Label for the checkbox that allows users to select attributes of referenced objects (nested attributes) as table columns',
+    defaultMessage: 'Enable nested reference attribute selection'
+  },
+  objectsPerPage: {
+    id: 'linkDataSource.assets.configModal.configPopup.objectsPerPage',
+    description: 'Option label in the pagination select showing how many Assets objects are displayed per table page. {count} is the number of objects.',
+    defaultMessage: '{count, plural, one {# object per page} other {# objects per page}}'
+  },
+  tablePagination: {
+    id: 'linkDataSource.assets.configModal.configPopup.tablePagination',
+    description: 'Label for the select input where users choose how many Assets objects are displayed per table page',
+    defaultMessage: 'Table pagination:'
+  }
+});

package/dist/cjs/ui/assets-modal/search-container/index.compiled.css

@@ -1,5 +1,4 @@
 ._zulppxbi{gap:var(--ds-space-200,1pc)}._1bsb1osq{width:100%}
 ._1e0c11p5{display:grid}
 ._1p57pxbi{row-gap:var(--ds-space-200,1pc)}
-._2lx21sbv{flex-direction:row-reverse}
 ._4cvr1h6o{align-items:center}

package/dist/cjs/ui/assets-modal/search-container/index.js

@@ -13,12 +13,17 @@ var React = _react;
 var _runtime = require("@compiled/react/runtime");
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _reactIntl = require("react-intl");
 var _form = _interopRequireDefault(require("@atlaskit/form/form"));
+var _heading = _interopRequireDefault(require("@atlaskit/heading/heading"));
 var _closeButton = require("@atlaskit/modal-dialog/close-button");
 var _fg = require("@atlaskit/platform-feature-flags/fg");
 var _flex = require("@atlaskit/primitives/compiled/flex");
+var _text = require("@atlaskit/primitives/compiled/text");
 var _analytics = require("../../../analytics");
 var _types = require("../../../types/assets/types");
+var _modalConfigPopup = require("../modal-config-popup");
+var _messages = require("../modal/messages");
 var _aqlSearchInput = require("./aql-search-input");
 var _objectSchemaSelect = require("./object-schema-select");
 var _styled = require("./styled");
@@ -26,7 +31,7 @@ var _excluded = ["as", "style"];
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 var styles = {
   modalTitleContainer: "_zulppxbi _4cvr1h6o",
-  flexStyles: "_2lx21sbv _1bsb1osq"
+  flexStyles: "_1bsb1osq"
 };
 var DEFAULT_AQL_QUERY = '';
 var SEARCH_FORM_ID = 'linkDataSource.assets.configModal.searchContainer-form';
@@ -67,7 +72,7 @@ var AssetsSearchContainer = exports.AssetsSearchContainer = function AssetsSearc
   return /*#__PURE__*/React.createElement(_form.default, {
     onSubmit: onFormSubmit
   }, function (_ref2) {
-    var _initialSearchData$ob, _initialSearchData$ob2, _initialSearchData$aq;
+    var _initialSearchData$ob, _initialSearchData$ob2, _initialSearchData$ob3, _initialSearchData$ob4, _initialSearchData$aq;
     var formProps = _ref2.formProps,
       setFieldValue = _ref2.setFieldValue;
     var onSchemaChange = function onSchemaChange(schema) {
@@ -81,24 +86,48 @@ var AssetsSearchContainer = exports.AssetsSearchContainer = function AssetsSearc
       id: SEARCH_FORM_ID
     }), /*#__PURE__*/React.createElement(_styled.FormRowContainer, {
       isNarrowGap: true
-    }, /*#__PURE__*/React.createElement(_flex.Flex, {
+    }, (0, _fg.fg)('astral_assets_macro_table_ui_uplift') ? /*#__PURE__*/React.createElement(_flex.Flex, {
       gap: "space.200",
       justifyContent: "space-between",
       xcss: styles.flexStyles
     }, /*#__PURE__*/React.createElement(_flex.Flex, {
+      justifyContent: "start",
+      xcss: styles.modalTitleContainer
+    }, modalTitle), /*#__PURE__*/React.createElement(_flex.Flex, {
       justifyContent: "end"
-    }, /*#__PURE__*/React.createElement(_closeButton.CloseButton, {
+    }, /*#__PURE__*/React.createElement(_flex.Flex, {
+      alignItems: "center",
+      gap: "space.100"
+    }, /*#__PURE__*/React.createElement(_text.Text, null, /*#__PURE__*/React.createElement(_reactIntl.FormattedMessage, _messages.modalMessages.insertObjectsTitle), ":"), /*#__PURE__*/React.createElement(_objectSchemaSelect.AssetsObjectSchemaSelect, {
+      value: (_initialSearchData$ob = initialSearchData.objectSchema) !== null && _initialSearchData$ob !== void 0 ? _initialSearchData$ob : undefined,
+      workspaceId: workspaceId,
+      initialObjectSchemas: (_initialSearchData$ob2 = initialSearchData.objectSchemas) !== null && _initialSearchData$ob2 !== void 0 ? _initialSearchData$ob2 : undefined,
+      classNamePrefix: "assets-datasource-modal--object-schema-select",
+      onSchemaChange: onSchemaChange
+    })), /*#__PURE__*/React.createElement(_modalConfigPopup.AssetsModalConfigPopup, {
+      onChange: function onChange() {}
+    }), /*#__PURE__*/React.createElement(_closeButton.CloseButton, {
       onClick: onCancel
-    })), /*#__PURE__*/React.createElement(_flex.Flex, {
+    }))) : /*#__PURE__*/React.createElement(_flex.Flex, {
+      gap: "space.200",
+      justifyContent: "space-between",
+      xcss: styles.flexStyles
+    }, /*#__PURE__*/React.createElement(_flex.Flex, {
       justifyContent: "start",
       xcss: styles.modalTitleContainer
     }, modalTitle, /*#__PURE__*/React.createElement(_objectSchemaSelect.AssetsObjectSchemaSelect, {
-      value: (_initialSearchData$ob = initialSearchData.objectSchema) !== null && _initialSearchData$ob !== void 0 ? _initialSearchData$ob : undefined,
+      value: (_initialSearchData$ob3 = initialSearchData.objectSchema) !== null && _initialSearchData$ob3 !== void 0 ? _initialSearchData$ob3 : undefined,
       workspaceId: workspaceId,
-      initialObjectSchemas: (_initialSearchData$ob2 = initialSearchData.objectSchemas) !== null && _initialSearchData$ob2 !== void 0 ? _initialSearchData$ob2 : undefined,
+      initialObjectSchemas: (_initialSearchData$ob4 = initialSearchData.objectSchemas) !== null && _initialSearchData$ob4 !== void 0 ? _initialSearchData$ob4 : undefined,
       classNamePrefix: "assets-datasource-modal--object-schema-select",
       onSchemaChange: onSchemaChange
-    })))), /*#__PURE__*/React.createElement(_styled.FormRowContainer, null, /*#__PURE__*/React.createElement(_aqlSearchInput.AqlSearchInput, {
+    })), /*#__PURE__*/React.createElement(_flex.Flex, {
+      justifyContent: "end"
+    }, /*#__PURE__*/React.createElement(_closeButton.CloseButton, {
+      onClick: onCancel
+    })))), (0, _fg.fg)('astral_assets_macro_table_ui_uplift') ? /*#__PURE__*/React.createElement(_heading.default, {
+      size: "xsmall"
+    }, /*#__PURE__*/React.createElement(_reactIntl.FormattedMessage, _messages.modalMessages.filterObjectsText)) : null, /*#__PURE__*/React.createElement(_styled.FormRowContainer, null, /*#__PURE__*/React.createElement(_aqlSearchInput.AqlSearchInput, {
       value: (_initialSearchData$aq = initialSearchData.aql) !== null && _initialSearchData$aq !== void 0 ? _initialSearchData$aq : DEFAULT_AQL_QUERY,
       workspaceId: workspaceId,
       isSearching: isSearching

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

@@ -42,7 +42,7 @@ import { modalMessages } from './messages';
 import { RenderAssetsContent } from './render-assets-content';
 const VERSION_TWO = '2';
 const modalBodyErrorWrapperStyles = null;
-const AssetsModalTitle = /*#__PURE__*/React.createElement(ModalTitle, null, /*#__PURE__*/React.createElement(FormattedMessage, modalMessages.insertObjectsTitle));
+const AssetsModalTitle = () => /*#__PURE__*/React.createElement(ModalTitle, null, /*#__PURE__*/React.createElement(FormattedMessage, fg('astral_assets_macro_table_ui_uplift') ? modalMessages.assetsConfigModalTitle : modalMessages.insertObjectsTitle));
 const PlainAssetsConfigModal = props => {
   const {
     datasourceId,
@@ -337,7 +337,7 @@ const PlainAssetsConfigModal = props => {
     } else {
       if (!workspaceId || assetsClientLoading) {
         return /*#__PURE__*/React.createElement(AssetsSearchContainerLoading, {
-          modalTitle: AssetsModalTitle
+          modalTitle: /*#__PURE__*/React.createElement(AssetsModalTitle, null)
         });
       }
       return /*#__PURE__*/React.createElement(AssetsSearchContainer, {
@@ -348,7 +348,7 @@ const PlainAssetsConfigModal = props => {
           objectSchemas
         },
         onSearch: handleOnSearch,
-        modalTitle: AssetsModalTitle,
+        modalTitle: /*#__PURE__*/React.createElement(AssetsModalTitle, null),
         isSearching: status === 'loading',
         onCancel: onCancel
       });

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

@@ -14,5 +14,20 @@ export const modalMessages = defineMessages({
     id: 'linkDataSource.assets.configmodal.insertObjectsTitle',
     description: 'Title for the Assets Objects Datasource config modal which prefixes a select picker',
     defaultMessage: 'Insert objects from'
+  },
+  assetsConfigModalTitle: {
+    id: 'linkDataSource.assets.configmodal.title',
+    description: 'Title for the Assets Objects Datasource config modal',
+    defaultMessage: 'Assets table macro configuration'
+  },
+  filterObjectsText: {
+    id: 'linkDataSource.assets.configmodal.filterObjectsText',
+    description: 'Text for the filter option using aql search',
+    defaultMessage: 'Filter'
+  },
+  tablePreviewText: {
+    id: 'linkDataSource.assets.configmodal.tablePreviewText',
+    description: 'Heading above the table preview in the Assets configuration modal',
+    defaultMessage: 'Table preview'
   }
 });

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

@@ -3,11 +3,16 @@ import "./index.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 import { useCallback, useMemo } from 'react';
+import { FormattedMessage } from 'react-intl';
+import Heading from '@atlaskit/heading/heading';
+import { fg } from '@atlaskit/platform-feature-flags/fg';
+import { Stack } from '@atlaskit/primitives/compiled/stack';
 import { AccessRequired } from '../../../common/error-state/access-required';
 import { ModalLoadingError } from '../../../common/error-state/modal-loading-error';
 import { NoResults } from '../../../common/error-state/no-results';
 import EmptyState from '../../../issue-like-table/empty-state';
 import { IssueLikeDataTableView } from '../../../issue-like-table/issue-like-data-table-view';
+import { modalMessages } from '../messages';
 import { InitialStateView } from './initial-state-view';
 export const MODAL_HEIGHT = 420;
 
@@ -81,5 +86,12 @@ export const RenderAssetsContent = props => {
     }
     return issueLikeDataTableView;
   }, [columns.length, isFetchingInitialData, issueLikeDataTableView, resolvedWithNoResults, shouldRenderTableWithNoResults, status]);
+  if (fg('astral_assets_macro_table_ui_uplift')) {
+    return /*#__PURE__*/React.createElement(Stack, {
+      space: "space.200"
+    }, status !== 'empty' && /*#__PURE__*/React.createElement(Heading, {
+      size: "xsmall"
+    }, /*#__PURE__*/React.createElement(FormattedMessage, modalMessages.tablePreviewText)), renderAssetsContentView());
+  }
   return renderAssetsContentView();
 };

package/dist/es2019/ui/assets-modal/modal-config-popup/index.compiled.css

@@ -0,0 +1,6 @@
+._19bvpxbi{padding-left:var(--ds-space-200,1pc)}
+._19bvxy5q{padding-left:var(--ds-space-400,2pc)}
+._1bsb1kdj{width:25pc}
+._ca0qpxbi{padding-top:var(--ds-space-200,1pc)}
+._n3tdpxbi{padding-bottom:var(--ds-space-200,1pc)}
+._u5f3pxbi{padding-right:var(--ds-space-200,1pc)}

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

@@ -0,0 +1,126 @@
+/* index.tsx generated by @compiled/babel-plugin v3.0.2 */
+import _extends from "@babel/runtime/helpers/extends";
+import "./index.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+import { useId, useState } from 'react';
+import { useIntl, FormattedMessage } from 'react-intl';
+import IconButton from '@atlaskit/button/icon/button';
+import Checkbox from '@atlaskit/checkbox/checkbox';
+import { Label } from '@atlaskit/form/label/default';
+import CustomizeIcon from '@atlaskit/icon/core/customize';
+import { Popup } from '@atlaskit/popup/popup';
+import { Box } from '@atlaskit/primitives/compiled/box';
+import { Stack } from '@atlaskit/primitives/compiled/stack';
+import Select from '@atlaskit/select/default';
+import { aboveModal } from '../../../common/zindex';
+import { modalConfigPopupMessages } from './messages';
+
+/**
+ * Rendering a `<Select>` in a `<Modal>` results in the select options getting cut off by the bottom of the modal and
+ * scrolling. This is a work-around for that, see https://atlassian.slack.com/archives/CFJ9DU39U/p1623179496484100
+ */
+export const selectInAModalStyleFixProps = {
+  styles: {
+    menuPortal: base => ({
+      ...base,
+      zIndex: aboveModal
+    })
+  },
+  menuPortalTarget: document.body
+};
+export const PAGE_SIZE_OPTIONS = [10, 20, 50, 100];
+export const DEFAULT_PAGE_SIZE = 20;
+const styles = {
+  trigger: "_19bvxy5q _u5f3pxbi",
+  content: "_1bsb1kdj _ca0qpxbi _u5f3pxbi _n3tdpxbi _19bvpxbi"
+};
+export const AssetsModalConfigPopup = ({
+  initialConfig,
+  onChange,
+  testId = 'assets-datasource-modal--config-popup'
+}) => {
+  var _initialConfig$pageSi, _initialConfig$isNest;
+  const {
+    formatMessage
+  } = useIntl();
+  const [isOpen, setIsOpen] = useState(false);
+  const [config, setConfig] = useState({
+    pageSize: (_initialConfig$pageSi = initialConfig === null || initialConfig === void 0 ? void 0 : initialConfig.pageSize) !== null && _initialConfig$pageSi !== void 0 ? _initialConfig$pageSi : DEFAULT_PAGE_SIZE,
+    isNestedReferenceAttributeSelectionEnabled: (_initialConfig$isNest = initialConfig === null || initialConfig === void 0 ? void 0 : initialConfig.isNestedReferenceAttributeSelectionEnabled) !== null && _initialConfig$isNest !== void 0 ? _initialConfig$isNest : false
+  });
+  const pageSizeSelectId = useId();
+  const pageSizeOptions = PAGE_SIZE_OPTIONS.map(count => ({
+    label: formatMessage(modalConfigPopupMessages.objectsPerPage, {
+      count
+    }),
+    value: count
+  }));
+  const updateConfig = partialConfig => {
+    const nextConfig = {
+      ...config,
+      ...partialConfig
+    };
+    setConfig(nextConfig);
+    onChange(nextConfig);
+  };
+  const handlePageSizeChange = option => {
+    if (option) {
+      updateConfig({
+        pageSize: option.value
+      });
+    }
+  };
+  const handleNestedReferenceAttributeSelectionChange = event => {
+    updateConfig({
+      isNestedReferenceAttributeSelectionEnabled: event.target.checked
+    });
+  };
+  const selectedPageSizeOption = pageSizeOptions.find(option => option.value === config.pageSize);
+  return /*#__PURE__*/React.createElement(Popup, {
+    isOpen: isOpen,
+    onClose: () => setIsOpen(false),
+    placement: "bottom-end",
+    testId: testId,
+    role: "dialog",
+    label: formatMessage(modalConfigPopupMessages.configureTable),
+    zIndex: aboveModal,
+    trigger: triggerProps => /*#__PURE__*/React.createElement(Box, {
+      xcss: styles.trigger
+    }, /*#__PURE__*/React.createElement(IconButton, {
+      ref: triggerProps.ref,
+      "aria-controls": triggerProps['aria-controls'],
+      "aria-expanded": triggerProps['aria-expanded'],
+      "aria-haspopup": triggerProps['aria-haspopup'],
+      icon: CustomizeIcon,
+      isSelected: isOpen,
+      isTooltipDisabled: false,
+      label: formatMessage(modalConfigPopupMessages.configureTable),
+      onClick: () => setIsOpen(currentIsOpen => !currentIsOpen),
+      testId: `${testId}--trigger`
+    })),
+    content: () => /*#__PURE__*/React.createElement(Box, {
+      xcss: styles.content
+    }, /*#__PURE__*/React.createElement(Stack, {
+      space: "space.200"
+    }, /*#__PURE__*/React.createElement(Stack, {
+      space: "space.050",
+      alignInline: "start"
+    }, /*#__PURE__*/React.createElement(Label, {
+      htmlFor: pageSizeSelectId
+    }, /*#__PURE__*/React.createElement(FormattedMessage, modalConfigPopupMessages.tablePagination)), /*#__PURE__*/React.createElement(Select, _extends({}, selectInAModalStyleFixProps, {
+      inputId: pageSizeSelectId,
+      options: pageSizeOptions,
+      value: selectedPageSizeOption,
+      onChange: handlePageSizeChange,
+      isSearchable: false,
+      menuPlacement: "bottom",
+      testId: `${testId}--page-size-select`
+    }))), /*#__PURE__*/React.createElement(Checkbox, {
+      isChecked: config.isNestedReferenceAttributeSelectionEnabled,
+      onChange: handleNestedReferenceAttributeSelectionChange,
+      label: formatMessage(modalConfigPopupMessages.nestedReferenceAttributeSelection),
+      testId: `${testId}--nested-reference-attribute-selection`
+    })))
+  });
+};

package/dist/es2019/ui/assets-modal/modal-config-popup/messages.js

@@ -0,0 +1,23 @@
+import { defineMessages } from 'react-intl';
+export const modalConfigPopupMessages = defineMessages({
+  configureTable: {
+    id: 'linkDataSource.assets.configModal.configPopup.configureTable',
+    description: 'Tooltip and accessibility label for the icon button that opens the Assets table configuration popup',
+    defaultMessage: 'Configure table'
+  },
+  nestedReferenceAttributeSelection: {
+    id: 'linkDataSource.assets.configModal.configPopup.nestedReferenceAttributeSelection',
+    description: 'Label for the checkbox that allows users to select attributes of referenced objects (nested attributes) as table columns',
+    defaultMessage: 'Enable nested reference attribute selection'
+  },
+  objectsPerPage: {
+    id: 'linkDataSource.assets.configModal.configPopup.objectsPerPage',
+    description: 'Option label in the pagination select showing how many Assets objects are displayed per table page. {count} is the number of objects.',
+    defaultMessage: '{count, plural, one {# object per page} other {# objects per page}}'
+  },
+  tablePagination: {
+    id: 'linkDataSource.assets.configModal.configPopup.tablePagination',
+    description: 'Label for the select input where users choose how many Assets objects are displayed per table page',
+    defaultMessage: 'Table pagination:'
+  }
+});

package/dist/es2019/ui/assets-modal/search-container/index.compiled.css

@@ -1,5 +1,4 @@
 ._zulppxbi{gap:var(--ds-space-200,1pc)}._1bsb1osq{width:100%}
 ._1e0c11p5{display:grid}
 ._1p57pxbi{row-gap:var(--ds-space-200,1pc)}
-._2lx21sbv{flex-direction:row-reverse}
 ._4cvr1h6o{align-items:center}

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

@@ -4,18 +4,23 @@ import "./index.compiled.css";
 import { forwardRef } from 'react';
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
+import { FormattedMessage } from 'react-intl';
 import Form from '@atlaskit/form/form';
+import Heading from '@atlaskit/heading/heading';
 import { CloseButton } from '@atlaskit/modal-dialog/close-button';
 import { fg } from '@atlaskit/platform-feature-flags/fg';
 import { Flex } from '@atlaskit/primitives/compiled/flex';
+import { Text } from '@atlaskit/primitives/compiled/text';
 import { useDatasourceAnalyticsEvents } from '../../../analytics';
 import { aqlKey } from '../../../types/assets/types';
+import { AssetsModalConfigPopup } from '../modal-config-popup';
+import { modalMessages } from '../modal/messages';
 import { AqlSearchInput } from './aql-search-input';
 import { AssetsObjectSchemaSelect } from './object-schema-select';
 import { FormRowContainer } from './styled';
 const styles = {
   modalTitleContainer: "_zulppxbi _4cvr1h6o",
-  flexStyles: "_2lx21sbv _1bsb1osq"
+  flexStyles: "_1bsb1osq"
 };
 const DEFAULT_AQL_QUERY = '';
 const SEARCH_FORM_ID = 'linkDataSource.assets.configModal.searchContainer-form';
@@ -64,7 +69,7 @@ export const AssetsSearchContainer = props => {
     formProps,
     setFieldValue
   }) => {
-    var _initialSearchData$ob, _initialSearchData$ob2, _initialSearchData$aq;
+    var _initialSearchData$ob, _initialSearchData$ob2, _initialSearchData$ob3, _initialSearchData$ob4, _initialSearchData$aq;
     const onSchemaChange = schema => {
       if (fg('platform_lp_sllv_assets_default_schema_aql')) {
         const defaultAql = `objectSchema = "${schema.label}"`;
@@ -76,24 +81,48 @@ export const AssetsSearchContainer = props => {
       id: SEARCH_FORM_ID
     }), /*#__PURE__*/React.createElement(FormRowContainer, {
       isNarrowGap: true
-    }, /*#__PURE__*/React.createElement(Flex, {
+    }, fg('astral_assets_macro_table_ui_uplift') ? /*#__PURE__*/React.createElement(Flex, {
       gap: "space.200",
       justifyContent: "space-between",
       xcss: styles.flexStyles
     }, /*#__PURE__*/React.createElement(Flex, {
+      justifyContent: "start",
+      xcss: styles.modalTitleContainer
+    }, modalTitle), /*#__PURE__*/React.createElement(Flex, {
       justifyContent: "end"
-    }, /*#__PURE__*/React.createElement(CloseButton, {
+    }, /*#__PURE__*/React.createElement(Flex, {
+      alignItems: "center",
+      gap: "space.100"
+    }, /*#__PURE__*/React.createElement(Text, null, /*#__PURE__*/React.createElement(FormattedMessage, modalMessages.insertObjectsTitle), ":"), /*#__PURE__*/React.createElement(AssetsObjectSchemaSelect, {
+      value: (_initialSearchData$ob = initialSearchData.objectSchema) !== null && _initialSearchData$ob !== void 0 ? _initialSearchData$ob : undefined,
+      workspaceId: workspaceId,
+      initialObjectSchemas: (_initialSearchData$ob2 = initialSearchData.objectSchemas) !== null && _initialSearchData$ob2 !== void 0 ? _initialSearchData$ob2 : undefined,
+      classNamePrefix: "assets-datasource-modal--object-schema-select",
+      onSchemaChange: onSchemaChange
+    })), /*#__PURE__*/React.createElement(AssetsModalConfigPopup, {
+      onChange: () => {}
+    }), /*#__PURE__*/React.createElement(CloseButton, {
       onClick: onCancel
-    })), /*#__PURE__*/React.createElement(Flex, {
+    }))) : /*#__PURE__*/React.createElement(Flex, {
+      gap: "space.200",
+      justifyContent: "space-between",
+      xcss: styles.flexStyles
+    }, /*#__PURE__*/React.createElement(Flex, {
       justifyContent: "start",
       xcss: styles.modalTitleContainer
     }, modalTitle, /*#__PURE__*/React.createElement(AssetsObjectSchemaSelect, {
-      value: (_initialSearchData$ob = initialSearchData.objectSchema) !== null && _initialSearchData$ob !== void 0 ? _initialSearchData$ob : undefined,
+      value: (_initialSearchData$ob3 = initialSearchData.objectSchema) !== null && _initialSearchData$ob3 !== void 0 ? _initialSearchData$ob3 : undefined,
       workspaceId: workspaceId,
-      initialObjectSchemas: (_initialSearchData$ob2 = initialSearchData.objectSchemas) !== null && _initialSearchData$ob2 !== void 0 ? _initialSearchData$ob2 : undefined,
+      initialObjectSchemas: (_initialSearchData$ob4 = initialSearchData.objectSchemas) !== null && _initialSearchData$ob4 !== void 0 ? _initialSearchData$ob4 : undefined,
       classNamePrefix: "assets-datasource-modal--object-schema-select",
       onSchemaChange: onSchemaChange
-    })))), /*#__PURE__*/React.createElement(FormRowContainer, null, /*#__PURE__*/React.createElement(AqlSearchInput, {
+    })), /*#__PURE__*/React.createElement(Flex, {
+      justifyContent: "end"
+    }, /*#__PURE__*/React.createElement(CloseButton, {
+      onClick: onCancel
+    })))), fg('astral_assets_macro_table_ui_uplift') ? /*#__PURE__*/React.createElement(Heading, {
+      size: "xsmall"
+    }, /*#__PURE__*/React.createElement(FormattedMessage, modalMessages.filterObjectsText)) : null, /*#__PURE__*/React.createElement(FormRowContainer, null, /*#__PURE__*/React.createElement(AqlSearchInput, {
       value: (_initialSearchData$aq = initialSearchData.aql) !== null && _initialSearchData$aq !== void 0 ? _initialSearchData$aq : DEFAULT_AQL_QUERY,
       workspaceId: workspaceId,
       isSearching: isSearching

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

@@ -46,7 +46,9 @@ import { modalMessages } from './messages';
 import { RenderAssetsContent } from './render-assets-content';
 var VERSION_TWO = '2';
 var modalBodyErrorWrapperStyles = null;
-var AssetsModalTitle = /*#__PURE__*/React.createElement(ModalTitle, null, /*#__PURE__*/React.createElement(FormattedMessage, modalMessages.insertObjectsTitle));
+var AssetsModalTitle = function AssetsModalTitle() {
+  return /*#__PURE__*/React.createElement(ModalTitle, null, /*#__PURE__*/React.createElement(FormattedMessage, fg('astral_assets_macro_table_ui_uplift') ? modalMessages.assetsConfigModalTitle : modalMessages.insertObjectsTitle));
+};
 var PlainAssetsConfigModal = function PlainAssetsConfigModal(props) {
   var datasourceId = props.datasourceId,
     initialParameters = props.parameters,
@@ -361,7 +363,7 @@ var PlainAssetsConfigModal = function PlainAssetsConfigModal(props) {
     } else {
       if (!workspaceId || assetsClientLoading) {
         return /*#__PURE__*/React.createElement(AssetsSearchContainerLoading, {
-          modalTitle: AssetsModalTitle
+          modalTitle: /*#__PURE__*/React.createElement(AssetsModalTitle, null)
         });
       }
       return /*#__PURE__*/React.createElement(AssetsSearchContainer, {
@@ -372,7 +374,7 @@ var PlainAssetsConfigModal = function PlainAssetsConfigModal(props) {
           objectSchemas: objectSchemas
         },
         onSearch: handleOnSearch,
-        modalTitle: AssetsModalTitle,
+        modalTitle: /*#__PURE__*/React.createElement(AssetsModalTitle, null),
         isSearching: status === 'loading',
         onCancel: onCancel
       });

package/dist/esm/ui/assets-modal/modal/messages.js

@@ -14,5 +14,20 @@ export var modalMessages = defineMessages({
     id: 'linkDataSource.assets.configmodal.insertObjectsTitle',
     description: 'Title for the Assets Objects Datasource config modal which prefixes a select picker',
     defaultMessage: 'Insert objects from'
+  },
+  assetsConfigModalTitle: {
+    id: 'linkDataSource.assets.configmodal.title',
+    description: 'Title for the Assets Objects Datasource config modal',
+    defaultMessage: 'Assets table macro configuration'
+  },
+  filterObjectsText: {
+    id: 'linkDataSource.assets.configmodal.filterObjectsText',
+    description: 'Text for the filter option using aql search',
+    defaultMessage: 'Filter'
+  },
+  tablePreviewText: {
+    id: 'linkDataSource.assets.configmodal.tablePreviewText',
+    description: 'Heading above the table preview in the Assets configuration modal',
+    defaultMessage: 'Table preview'
   }
 });

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

@@ -3,11 +3,16 @@ import "./index.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 import { useCallback, useMemo } from 'react';
+import { FormattedMessage } from 'react-intl';
+import Heading from '@atlaskit/heading/heading';
+import { fg } from '@atlaskit/platform-feature-flags/fg';
+import { Stack } from '@atlaskit/primitives/compiled/stack';
 import { AccessRequired } from '../../../common/error-state/access-required';
 import { ModalLoadingError } from '../../../common/error-state/modal-loading-error';
 import { NoResults } from '../../../common/error-state/no-results';
 import EmptyState from '../../../issue-like-table/empty-state';
 import { IssueLikeDataTableView } from '../../../issue-like-table/issue-like-data-table-view';
+import { modalMessages } from '../messages';
 import { InitialStateView } from './initial-state-view';
 export var MODAL_HEIGHT = 420;
 
@@ -91,5 +96,12 @@ export var RenderAssetsContent = function RenderAssetsContent(props) {
     }
     return issueLikeDataTableView;
   }, [columns.length, isFetchingInitialData, issueLikeDataTableView, resolvedWithNoResults, shouldRenderTableWithNoResults, status]);
+  if (fg('astral_assets_macro_table_ui_uplift')) {
+    return /*#__PURE__*/React.createElement(Stack, {
+      space: "space.200"
+    }, status !== 'empty' && /*#__PURE__*/React.createElement(Heading, {
+      size: "xsmall"
+    }, /*#__PURE__*/React.createElement(FormattedMessage, modalMessages.tablePreviewText)), renderAssetsContentView());
+  }
   return renderAssetsContentView();
 };

package/dist/esm/ui/assets-modal/modal-config-popup/index.compiled.css

@@ -0,0 +1,6 @@
+._19bvpxbi{padding-left:var(--ds-space-200,1pc)}
+._19bvxy5q{padding-left:var(--ds-space-400,2pc)}
+._1bsb1kdj{width:25pc}
+._ca0qpxbi{padding-top:var(--ds-space-200,1pc)}
+._n3tdpxbi{padding-bottom:var(--ds-space-200,1pc)}
+._u5f3pxbi{padding-right:var(--ds-space-200,1pc)}

package/dist/esm/ui/assets-modal/modal-config-popup/index.js

@@ -0,0 +1,147 @@
+/* index.tsx generated by @compiled/babel-plugin v3.0.2 */
+import _extends from "@babel/runtime/helpers/extends";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import "./index.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+import { useId, useState } from 'react';
+import { useIntl, FormattedMessage } from 'react-intl';
+import IconButton from '@atlaskit/button/icon/button';
+import Checkbox from '@atlaskit/checkbox/checkbox';
+import { Label } from '@atlaskit/form/label/default';
+import CustomizeIcon from '@atlaskit/icon/core/customize';
+import { Popup } from '@atlaskit/popup/popup';
+import { Box } from '@atlaskit/primitives/compiled/box';
+import { Stack } from '@atlaskit/primitives/compiled/stack';
+import Select from '@atlaskit/select/default';
+import { aboveModal } from '../../../common/zindex';
+import { modalConfigPopupMessages } from './messages';
+
+/**
+ * Rendering a `<Select>` in a `<Modal>` results in the select options getting cut off by the bottom of the modal and
+ * scrolling. This is a work-around for that, see https://atlassian.slack.com/archives/CFJ9DU39U/p1623179496484100
+ */
+export var selectInAModalStyleFixProps = {
+  styles: {
+    menuPortal: function menuPortal(base) {
+      return _objectSpread(_objectSpread({}, base), {}, {
+        zIndex: aboveModal
+      });
+    }
+  },
+  menuPortalTarget: document.body
+};
+export var PAGE_SIZE_OPTIONS = [10, 20, 50, 100];
+export var DEFAULT_PAGE_SIZE = 20;
+var styles = {
+  trigger: "_19bvxy5q _u5f3pxbi",
+  content: "_1bsb1kdj _ca0qpxbi _u5f3pxbi _n3tdpxbi _19bvpxbi"
+};
+export var AssetsModalConfigPopup = function AssetsModalConfigPopup(_ref) {
+  var _initialConfig$pageSi, _initialConfig$isNest;
+  var initialConfig = _ref.initialConfig,
+    onChange = _ref.onChange,
+    _ref$testId = _ref.testId,
+    testId = _ref$testId === void 0 ? 'assets-datasource-modal--config-popup' : _ref$testId;
+  var _useIntl = useIntl(),
+    formatMessage = _useIntl.formatMessage;
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isOpen = _useState2[0],
+    setIsOpen = _useState2[1];
+  var _useState3 = useState({
+      pageSize: (_initialConfig$pageSi = initialConfig === null || initialConfig === void 0 ? void 0 : initialConfig.pageSize) !== null && _initialConfig$pageSi !== void 0 ? _initialConfig$pageSi : DEFAULT_PAGE_SIZE,
+      isNestedReferenceAttributeSelectionEnabled: (_initialConfig$isNest = initialConfig === null || initialConfig === void 0 ? void 0 : initialConfig.isNestedReferenceAttributeSelectionEnabled) !== null && _initialConfig$isNest !== void 0 ? _initialConfig$isNest : false
+    }),
+    _useState4 = _slicedToArray(_useState3, 2),
+    config = _useState4[0],
+    setConfig = _useState4[1];
+  var pageSizeSelectId = useId();
+  var pageSizeOptions = PAGE_SIZE_OPTIONS.map(function (count) {
+    return {
+      label: formatMessage(modalConfigPopupMessages.objectsPerPage, {
+        count: count
+      }),
+      value: count
+    };
+  });
+  var updateConfig = function updateConfig(partialConfig) {
+    var nextConfig = _objectSpread(_objectSpread({}, config), partialConfig);
+    setConfig(nextConfig);
+    onChange(nextConfig);
+  };
+  var handlePageSizeChange = function handlePageSizeChange(option) {
+    if (option) {
+      updateConfig({
+        pageSize: option.value
+      });
+    }
+  };
+  var handleNestedReferenceAttributeSelectionChange = function handleNestedReferenceAttributeSelectionChange(event) {
+    updateConfig({
+      isNestedReferenceAttributeSelectionEnabled: event.target.checked
+    });
+  };
+  var selectedPageSizeOption = pageSizeOptions.find(function (option) {
+    return option.value === config.pageSize;
+  });
+  return /*#__PURE__*/React.createElement(Popup, {
+    isOpen: isOpen,
+    onClose: function onClose() {
+      return setIsOpen(false);
+    },
+    placement: "bottom-end",
+    testId: testId,
+    role: "dialog",
+    label: formatMessage(modalConfigPopupMessages.configureTable),
+    zIndex: aboveModal,
+    trigger: function trigger(triggerProps) {
+      return /*#__PURE__*/React.createElement(Box, {
+        xcss: styles.trigger
+      }, /*#__PURE__*/React.createElement(IconButton, {
+        ref: triggerProps.ref,
+        "aria-controls": triggerProps['aria-controls'],
+        "aria-expanded": triggerProps['aria-expanded'],
+        "aria-haspopup": triggerProps['aria-haspopup'],
+        icon: CustomizeIcon,
+        isSelected: isOpen,
+        isTooltipDisabled: false,
+        label: formatMessage(modalConfigPopupMessages.configureTable),
+        onClick: function onClick() {
+          return setIsOpen(function (currentIsOpen) {
+            return !currentIsOpen;
+          });
+        },
+        testId: "".concat(testId, "--trigger")
+      }));
+    },
+    content: function content() {
+      return /*#__PURE__*/React.createElement(Box, {
+        xcss: styles.content
+      }, /*#__PURE__*/React.createElement(Stack, {
+        space: "space.200"
+      }, /*#__PURE__*/React.createElement(Stack, {
+        space: "space.050",
+        alignInline: "start"
+      }, /*#__PURE__*/React.createElement(Label, {
+        htmlFor: pageSizeSelectId
+      }, /*#__PURE__*/React.createElement(FormattedMessage, modalConfigPopupMessages.tablePagination)), /*#__PURE__*/React.createElement(Select, _extends({}, selectInAModalStyleFixProps, {
+        inputId: pageSizeSelectId,
+        options: pageSizeOptions,
+        value: selectedPageSizeOption,
+        onChange: handlePageSizeChange,
+        isSearchable: false,
+        menuPlacement: "bottom",
+        testId: "".concat(testId, "--page-size-select")
+      }))), /*#__PURE__*/React.createElement(Checkbox, {
+        isChecked: config.isNestedReferenceAttributeSelectionEnabled,
+        onChange: handleNestedReferenceAttributeSelectionChange,
+        label: formatMessage(modalConfigPopupMessages.nestedReferenceAttributeSelection),
+        testId: "".concat(testId, "--nested-reference-attribute-selection")
+      })));
+    }
+  });
+};

package/dist/esm/ui/assets-modal/modal-config-popup/messages.js

@@ -0,0 +1,23 @@
+import { defineMessages } from 'react-intl';
+export var modalConfigPopupMessages = defineMessages({
+  configureTable: {
+    id: 'linkDataSource.assets.configModal.configPopup.configureTable',
+    description: 'Tooltip and accessibility label for the icon button that opens the Assets table configuration popup',
+    defaultMessage: 'Configure table'
+  },
+  nestedReferenceAttributeSelection: {
+    id: 'linkDataSource.assets.configModal.configPopup.nestedReferenceAttributeSelection',
+    description: 'Label for the checkbox that allows users to select attributes of referenced objects (nested attributes) as table columns',
+    defaultMessage: 'Enable nested reference attribute selection'
+  },
+  objectsPerPage: {
+    id: 'linkDataSource.assets.configModal.configPopup.objectsPerPage',
+    description: 'Option label in the pagination select showing how many Assets objects are displayed per table page. {count} is the number of objects.',
+    defaultMessage: '{count, plural, one {# object per page} other {# objects per page}}'
+  },
+  tablePagination: {
+    id: 'linkDataSource.assets.configModal.configPopup.tablePagination',
+    description: 'Label for the select input where users choose how many Assets objects are displayed per table page',
+    defaultMessage: 'Table pagination:'
+  }
+});

package/dist/esm/ui/assets-modal/search-container/index.compiled.css

@@ -1,5 +1,4 @@
 ._zulppxbi{gap:var(--ds-space-200,1pc)}._1bsb1osq{width:100%}
 ._1e0c11p5{display:grid}
 ._1p57pxbi{row-gap:var(--ds-space-200,1pc)}
-._2lx21sbv{flex-direction:row-reverse}
 ._4cvr1h6o{align-items:center}

package/dist/esm/ui/assets-modal/search-container/index.js

@@ -6,18 +6,23 @@ import "./index.compiled.css";
 import { forwardRef } from 'react';
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
+import { FormattedMessage } from 'react-intl';
 import Form from '@atlaskit/form/form';
+import Heading from '@atlaskit/heading/heading';
 import { CloseButton } from '@atlaskit/modal-dialog/close-button';
 import { fg } from '@atlaskit/platform-feature-flags/fg';
 import { Flex } from '@atlaskit/primitives/compiled/flex';
+import { Text } from '@atlaskit/primitives/compiled/text';
 import { useDatasourceAnalyticsEvents } from '../../../analytics';
 import { aqlKey } from '../../../types/assets/types';
+import { AssetsModalConfigPopup } from '../modal-config-popup';
+import { modalMessages } from '../modal/messages';
 import { AqlSearchInput } from './aql-search-input';
 import { AssetsObjectSchemaSelect } from './object-schema-select';
 import { FormRowContainer } from './styled';
 var styles = {
   modalTitleContainer: "_zulppxbi _4cvr1h6o",
-  flexStyles: "_2lx21sbv _1bsb1osq"
+  flexStyles: "_1bsb1osq"
 };
 var DEFAULT_AQL_QUERY = '';
 var SEARCH_FORM_ID = 'linkDataSource.assets.configModal.searchContainer-form';
@@ -58,7 +63,7 @@ export var AssetsSearchContainer = function AssetsSearchContainer(props) {
   return /*#__PURE__*/React.createElement(Form, {
     onSubmit: onFormSubmit
   }, function (_ref2) {
-    var _initialSearchData$ob, _initialSearchData$ob2, _initialSearchData$aq;
+    var _initialSearchData$ob, _initialSearchData$ob2, _initialSearchData$ob3, _initialSearchData$ob4, _initialSearchData$aq;
     var formProps = _ref2.formProps,
       setFieldValue = _ref2.setFieldValue;
     var onSchemaChange = function onSchemaChange(schema) {
@@ -72,24 +77,48 @@ export var AssetsSearchContainer = function AssetsSearchContainer(props) {
       id: SEARCH_FORM_ID
     }), /*#__PURE__*/React.createElement(FormRowContainer, {
       isNarrowGap: true
-    }, /*#__PURE__*/React.createElement(Flex, {
+    }, fg('astral_assets_macro_table_ui_uplift') ? /*#__PURE__*/React.createElement(Flex, {
       gap: "space.200",
       justifyContent: "space-between",
       xcss: styles.flexStyles
     }, /*#__PURE__*/React.createElement(Flex, {
+      justifyContent: "start",
+      xcss: styles.modalTitleContainer
+    }, modalTitle), /*#__PURE__*/React.createElement(Flex, {
       justifyContent: "end"
-    }, /*#__PURE__*/React.createElement(CloseButton, {
+    }, /*#__PURE__*/React.createElement(Flex, {
+      alignItems: "center",
+      gap: "space.100"
+    }, /*#__PURE__*/React.createElement(Text, null, /*#__PURE__*/React.createElement(FormattedMessage, modalMessages.insertObjectsTitle), ":"), /*#__PURE__*/React.createElement(AssetsObjectSchemaSelect, {
+      value: (_initialSearchData$ob = initialSearchData.objectSchema) !== null && _initialSearchData$ob !== void 0 ? _initialSearchData$ob : undefined,
+      workspaceId: workspaceId,
+      initialObjectSchemas: (_initialSearchData$ob2 = initialSearchData.objectSchemas) !== null && _initialSearchData$ob2 !== void 0 ? _initialSearchData$ob2 : undefined,
+      classNamePrefix: "assets-datasource-modal--object-schema-select",
+      onSchemaChange: onSchemaChange
+    })), /*#__PURE__*/React.createElement(AssetsModalConfigPopup, {
+      onChange: function onChange() {}
+    }), /*#__PURE__*/React.createElement(CloseButton, {
       onClick: onCancel
-    })), /*#__PURE__*/React.createElement(Flex, {
+    }))) : /*#__PURE__*/React.createElement(Flex, {
+      gap: "space.200",
+      justifyContent: "space-between",
+      xcss: styles.flexStyles
+    }, /*#__PURE__*/React.createElement(Flex, {
       justifyContent: "start",
       xcss: styles.modalTitleContainer
     }, modalTitle, /*#__PURE__*/React.createElement(AssetsObjectSchemaSelect, {
-      value: (_initialSearchData$ob = initialSearchData.objectSchema) !== null && _initialSearchData$ob !== void 0 ? _initialSearchData$ob : undefined,
+      value: (_initialSearchData$ob3 = initialSearchData.objectSchema) !== null && _initialSearchData$ob3 !== void 0 ? _initialSearchData$ob3 : undefined,
       workspaceId: workspaceId,
-      initialObjectSchemas: (_initialSearchData$ob2 = initialSearchData.objectSchemas) !== null && _initialSearchData$ob2 !== void 0 ? _initialSearchData$ob2 : undefined,
+      initialObjectSchemas: (_initialSearchData$ob4 = initialSearchData.objectSchemas) !== null && _initialSearchData$ob4 !== void 0 ? _initialSearchData$ob4 : undefined,
       classNamePrefix: "assets-datasource-modal--object-schema-select",
       onSchemaChange: onSchemaChange
-    })))), /*#__PURE__*/React.createElement(FormRowContainer, null, /*#__PURE__*/React.createElement(AqlSearchInput, {
+    })), /*#__PURE__*/React.createElement(Flex, {
+      justifyContent: "end"
+    }, /*#__PURE__*/React.createElement(CloseButton, {
+      onClick: onCancel
+    })))), fg('astral_assets_macro_table_ui_uplift') ? /*#__PURE__*/React.createElement(Heading, {
+      size: "xsmall"
+    }, /*#__PURE__*/React.createElement(FormattedMessage, modalMessages.filterObjectsText)) : null, /*#__PURE__*/React.createElement(FormRowContainer, null, /*#__PURE__*/React.createElement(AqlSearchInput, {
       value: (_initialSearchData$aq = initialSearchData.aql) !== null && _initialSearchData$aq !== void 0 ? _initialSearchData$aq : DEFAULT_AQL_QUERY,
       workspaceId: workspaceId,
       isSearching: isSearching

package/dist/types/ui/assets-modal/modal/messages.d.ts

@@ -1,17 +1,32 @@
 export declare const modalMessages: {
-    updateObjectsButtonText: {
-        id: string;
+    assetsConfigModalTitle: {
+        defaultMessage: string;
         description: string;
+        id: string;
+    };
+    filterObjectsText: {
         defaultMessage: string;
+        description: string;
+        id: string;
     };
     insertIssuesButtonText: {
-        id: string;
-        description: string;
         defaultMessage: string;
+        description: string;
+        id: string;
     };
     insertObjectsTitle: {
+        defaultMessage: string;
+        description: string;
         id: string;
+    };
+    tablePreviewText: {
+        defaultMessage: string;
         description: string;
+        id: string;
+    };
+    updateObjectsButtonText: {
         defaultMessage: string;
+        description: string;
+        id: string;
     };
 };

package/dist/types/ui/assets-modal/modal-config-popup/index.d.ts

@@ -0,0 +1,30 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+/**
+ * Rendering a `<Select>` in a `<Modal>` results in the select options getting cut off by the bottom of the modal and
+ * scrolling. This is a work-around for that, see https://atlassian.slack.com/archives/CFJ9DU39U/p1623179496484100
+ */
+export declare const selectInAModalStyleFixProps: {
+    menuPortalTarget: HTMLElement;
+    styles: {
+        menuPortal: (base: any) => any;
+    };
+};
+export declare const PAGE_SIZE_OPTIONS: readonly number[];
+export declare const DEFAULT_PAGE_SIZE = 20;
+export type AssetsModalConfig = {
+    /** Whether users can select attributes of referenced objects (nested attributes) as table columns */
+    isNestedReferenceAttributeSelectionEnabled: boolean;
+    /** Number of Assets objects displayed per table page */
+    pageSize: number;
+};
+export type AssetsModalConfigPopupProps = {
+    /** Initial values. Missing keys fall back to `DEFAULT_PAGE_SIZE` and `false` respectively. */
+    initialConfig?: Partial<AssetsModalConfig>;
+    /** Called with the full config every time either the select or the checkbox changes. */
+    onChange: (config: AssetsModalConfig) => void;
+    testId?: string;
+};
+export declare const AssetsModalConfigPopup: ({ initialConfig, onChange, testId, }: AssetsModalConfigPopupProps) => JSX.Element;

package/dist/types/ui/assets-modal/modal-config-popup/messages.d.ts

@@ -0,0 +1,22 @@
+export declare const modalConfigPopupMessages: {
+    configureTable: {
+        defaultMessage: string;
+        description: string;
+        id: string;
+    };
+    nestedReferenceAttributeSelection: {
+        defaultMessage: string;
+        description: string;
+        id: string;
+    };
+    objectsPerPage: {
+        defaultMessage: string;
+        description: string;
+        id: string;
+    };
+    tablePagination: {
+        defaultMessage: string;
+        description: string;
+        id: string;
+    };
+};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/link-datasource",
-	"version": "7.8.0",
+	"version": "7.8.1",
 	"description": "UI Components to support linking platform dataset feature",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -47,6 +47,7 @@
 		"@atlaskit/avatar-group": "^14.4.0",
 		"@atlaskit/badge": "^22.0.0",
 		"@atlaskit/button": "^25.6.0",
+		"@atlaskit/checkbox": "^19.3.0",
 		"@atlaskit/css": "^1.1.0",
 		"@atlaskit/datetime-picker": "^19.4.0",
 		"@atlaskit/dropdown-menu": "^21.0.0",
@@ -77,7 +78,7 @@
 		"@atlaskit/platform-feature-experiments": "^0.3.0",
 		"@atlaskit/platform-feature-flags": "^2.2.0",
 		"@atlaskit/platform-feature-flags-react": "^1.2.0",
-		"@atlaskit/popup": "^10.0.0",
+		"@atlaskit/popup": "^10.1.0",
 		"@atlaskit/pragmatic-drag-and-drop": "^4.0.0",
 		"@atlaskit/pragmatic-drag-and-drop-hitbox": "^3.0.0",
 		"@atlaskit/pragmatic-drag-and-drop-react-beautiful-dnd-autoscroll": "^3.2.0",
@@ -90,12 +91,12 @@
 		"@atlaskit/smart-user-picker": "^12.8.0",
 		"@atlaskit/spinner": "^20.4.0",
 		"@atlaskit/tag": "^17.0.0",
-		"@atlaskit/textfield": "^10.2.0",
+		"@atlaskit/textfield": "^10.3.0",
 		"@atlaskit/theme": "^28.2.0",
 		"@atlaskit/toggle": "^17.3.0",
 		"@atlaskit/tokens": "^20.8.0",
 		"@atlaskit/tooltip": "^24.4.0",
-		"@atlaskit/top-layer": "^6.7.0",
+		"@atlaskit/top-layer": "^7.0.0",
 		"@atlaskit/ufo": "^2.0.0",
 		"@atlaskit/user-picker": "^14.3.0",
 		"@atlaskit/visually-hidden": "^4.4.0",
@@ -143,8 +144,7 @@
 		"jest-fetch-mock": "^3.0.3",
 		"react": "^18.0.0",
 		"react-dom": "^18.0.0",
-		"react-intl": "^7.0.0",
-		"wait-for-expect": "^1.2.0"
+		"react-intl": "^7.0.0"
 	},
 	"platform-feature-flags": {
 		"platform_datasource_missing_columns_error": {
@@ -181,6 +181,9 @@
 		"platform_lp_sllv_assets_default_schema_aql": {
 			"type": "boolean"
 		},
+		"astral_assets_macro_table_ui_uplift": {
+			"type": "boolean"
+		},
 		"electric_issue_like_table_xpc_url_wrapping": {
 			"type": "boolean"
 		},