@atlaskit/link-datasource 7.7.0 → 7.8.1

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @atlaskit/link-datasource
 
+## 7.8.1
+
+### Patch Changes
+
+- Updated dependencies
+
+## 7.8.0
+
+### Minor Changes
+
+- [`a43d1f580386a`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/a43d1f580386a) -
+  Update i18n NPM package versions for linking-platform,smart-experiences (Group 15)
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 7.7.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:'
+  }
+});