@atlaskit/link-datasource 7.8.0 → 7.8.2

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,
@@ -155,7 +157,7 @@ var PlainAssetsConfigModal = function PlainAssetsConfigModal(props) {
   // newly selected ones - refetching for them, and throwing away the results just received. The
   // re-render this schedules is discarded before commit, so the hook only ever sees the reconciled
   // selection.
-  if (fg('platform_lp_sllv_preserve_assets_columns') && hasPreservedColumns && status === 'resolved' && columns.length > 0) {
+  if (hasPreservedColumns && status === 'resolved' && columns.length > 0) {
     var availableKeys = new Set(columns.map(function (_ref) {
       var key = _ref.key;
       return key;
@@ -231,7 +233,7 @@ var PlainAssetsConfigModal = function PlainAssetsConfigModal(props) {
   }, []);
   useEffect(function () {
     // A preserved selection owns the columns, so restoring the saved or default ones would undo it
-    if (fg('platform_lp_sllv_preserve_assets_columns') && hasPreservedColumns) {
+    if (hasPreservedColumns) {
       return;
     }
     var newVisibleColumnKeys = initialVisibleColumnKeys && initialVisibleColumnKeys.length > 0 && apiVersion === VERSION_TWO ? initialVisibleColumnKeys : defaultVisibleColumnKeys;
@@ -241,7 +243,7 @@ var PlainAssetsConfigModal = function PlainAssetsConfigModal(props) {
     // The response described none of the requested fields, so there is nothing valid to keep and
     // no reported defaults to fall back to. Give up preserving and re-request the schema's own
     // defaults. This one has to stay an effect because it issues a request.
-    if (!fg('platform_lp_sllv_preserve_assets_columns') || !hasPreservedColumns || status !== 'resolved' || columns.length > 0) {
+    if (!hasPreservedColumns || status !== 'resolved' || columns.length > 0) {
       return;
     }
     setHasPreservedColumns(false);
@@ -329,7 +331,7 @@ var PlainAssetsConfigModal = function PlainAssetsConfigModal(props) {
       }
       // An empty selection has nothing worth preserving, and keeping it would stop the
       // response's defaults from being adopted
-      var shouldPreserveColumns = fg('platform_lp_sllv_preserve_assets_columns') && schemaId === searchSchemaId && (visibleColumnKeys !== null && visibleColumnKeys !== void 0 ? visibleColumnKeys : []).length > 0;
+      var shouldPreserveColumns = schemaId === searchSchemaId && (visibleColumnKeys !== null && visibleColumnKeys !== void 0 ? visibleColumnKeys : []).length > 0;
       setHasPreservedColumns(shouldPreserveColumns);
       setAql(searchAql);
       setSchemaId(searchSchemaId);
@@ -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