@atlaskit/link-datasource 7.7.0 → 7.8.1

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.7.0",
+	"version": "7.8.1",
 	"description": "UI Components to support linking platform dataset feature",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -39,7 +39,7 @@
 	},
 	"dependencies": {
 		"@atlaskit/adf-schema": "^57.7.0",
-		"@atlaskit/afm-i18n-platform-linking-platform-link-datasource": "2.291.0",
+		"@atlaskit/afm-i18n-platform-linking-platform-link-datasource": "2.292.0",
 		"@atlaskit/analytics-cross-product": "^2.3.0",
 		"@atlaskit/analytics-next": "^12.6.0",
 		"@atlaskit/atlassian-context": "^2.0.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",
@@ -54,7 +55,7 @@
 		"@atlaskit/empty-state": "^12.2.0",
 		"@atlaskit/feature-gate-js-client": "^7.0.0",
 		"@atlaskit/flag": "^19.0.0",
-		"@atlaskit/form": "^18.2.0",
+		"@atlaskit/form": "^18.3.0",
 		"@atlaskit/heading": "^8.0.0",
 		"@atlaskit/icon": "^38.0.0",
 		"@atlaskit/image": "^5.2.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",
@@ -86,16 +87,16 @@
 		"@atlaskit/react-compiler-gating": "^0.2.0",
 		"@atlaskit/react-select": "^4.12.0",
 		"@atlaskit/select": "^23.1.0",
-		"@atlaskit/smart-card": "^46.9.0",
-		"@atlaskit/smart-user-picker": "^12.7.0",
+		"@atlaskit/smart-card": "^46.10.0",
+		"@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"
 		},