@atlaskit/link-datasource 1.27.3 → 1.28.0

package/dist/es2019/ui/confluence-search-modal/basic-filters/filters/date-range-picker/styled.js

@@ -0,0 +1,66 @@
+import styled from '@emotion/styled';
+import { B400, B50, N0, N20, N30, R400 } from '@atlaskit/theme/colors';
+export const PopupComponentContainer = styled.div({
+  boxSizing: 'border-box',
+  display: 'block',
+  flex: '1 1 auto',
+  overflow: 'visible',
+  background: `var(--ds-background-input, ${N0})`,
+  ':focus': {
+    outline: 'none'
+  },
+  boxShadow: "var(--ds-shadow-overlay, 0px 0px 1px 0px rgba(9, 30, 66, 0.31), 0px 3px 5px 0px rgba(9, 30, 66, 0.20))"
+});
+export const CustomDropdown = styled.div({
+  width: '360px',
+  background: `var(--ds-background-input, ${N0})`,
+  borderRadius: '3px',
+  boxShadow: "var(--ds-shadow-overlay, 0px 0px 1px 0px rgba(9, 30, 66, 0.31), 0px 3px 5px 0px rgba(9, 30, 66, 0.20))",
+  zIndex: '900'
+});
+export const CustomDropdownItem = styled.div(props => ({
+  height: '36px',
+  width: '100%',
+  display: 'flex',
+  justifyContent: 'flex-start',
+  alignItems: 'center',
+  paddingLeft: props.isSelected ? '15px' : '16px',
+  boxSizing: 'border-box',
+  color: props.isSelected ? `var(--ds-text-selected, ${B400})` : 'inherit',
+  background: props.isSelected ? `var(--ds-background-accent-blue-subtlest, ${B50})` : 'transparent',
+  borderLeft: props.isSelected ? `2px solid ${`var(--ds-text-selected, ${B400})`}` : 'none',
+  '&:hover': {
+    background: props.isSelected ? `var(--ds-background-accent-blue-subtlest, ${B50})` : `var(--ds-background-input-hovered, ${N20})`,
+    cursor: 'default'
+  }
+}));
+export const CustomDateWrapper = styled.div({
+  padding: "var(--ds-space-150, 12px)",
+  boxSizing: 'border-box'
+});
+export const DatePickersWrapper = styled.div({
+  display: 'flex',
+  justifyContent: 'space-between',
+  alignItems: 'center',
+  width: '100%'
+});
+export const SelectDateRangeButton = styled.button({
+  background: `var(--ds-background-accent-gray-subtler, ${N20})`,
+  border: 'none',
+  font: 'inherit',
+  width: '70px',
+  height: '40px',
+  marginTop: "var(--ds-space-150, 12px)",
+  borderRadius: '3px',
+  '&:hover': {
+    background: `var(--ds-background-accent-gray-subtler, ${N30})`,
+    cursor: 'pointer'
+  }
+});
+export const DateRangeErrorMessage = styled.div({
+  display: 'flex',
+  lineHeight: 1.3333,
+  marginTop: "var(--ds-space-050, 4px)",
+  fontSize: '12px',
+  color: `var(--ds-text-danger, ${R400})`
+});

package/dist/es2019/ui/confluence-search-modal/basic-filters/filters/date-range-picker/trigger.js

@@ -0,0 +1,26 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React from 'react';
+import Button from '@atlaskit/button/standard-button';
+import ChevronDownIcon from '@atlaskit/icon/glyph/chevron-down';
+export const PopupTrigger = ({
+  triggerProps,
+  optionSelected,
+  label,
+  selectedLabel,
+  onClickButton
+}) => {
+  return /*#__PURE__*/React.createElement(Button, _extends({}, triggerProps, {
+    testId: 'confluence-search-modal--date-range-button',
+    onClick: onClickButton,
+    isSelected: optionSelected,
+    iconAfter: /*#__PURE__*/React.createElement("span", {
+      style: {
+        display: 'flex',
+        alignItems: 'center'
+      }
+    }, /*#__PURE__*/React.createElement(ChevronDownIcon, {
+      size: "medium",
+      label: ""
+    }))
+  }), label, selectedLabel ? `: ${selectedLabel}` : '');
+};

package/dist/es2019/ui/confluence-search-modal/basic-filters/index.js

@@ -1,13 +1,18 @@
 import React from 'react';
 import { Flex, xcss } from '@atlaskit/primitives';
+import { DateRangePicker } from './filters/date-range-picker';
 const basicFilterContainerStyles = xcss({
   paddingLeft: 'space.100'
 });
-const BasicFilterContainer = ({}) => {
+const BasicFilterContainer = ({
+  onChange
+}) => {
   return /*#__PURE__*/React.createElement(Flex, {
     xcss: basicFilterContainerStyles,
     gap: "space.100",
     testId: "clol-basic-filter-container"
-  }, /*#__PURE__*/React.createElement(React.Fragment, null), /*#__PURE__*/React.createElement(React.Fragment, null));
+  }, /*#__PURE__*/React.createElement(DateRangePicker, {
+    onSelectionChange: onChange
+  }), /*#__PURE__*/React.createElement(React.Fragment, null));
 };
 export default BasicFilterContainer;

package/dist/es2019/ui/confluence-search-modal/basic-filters/types.js

@@ -0,0 +1,5 @@
+export let CLOLBasicFilters = /*#__PURE__*/function (CLOLBasicFilters) {
+  CLOLBasicFilters["editedOrCreatedBy"] = "editedOrCreatedBy";
+  CLOLBasicFilters["lastModified"] = "lastModified";
+  return CLOLBasicFilters;
+}({});

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

@@ -15,6 +15,7 @@ const ConfluenceSearchContainer = ({
 }) => {
   const currentCloudId = useRef(cloudId);
   const [searchBarSearchString, setSearchBarSearchString] = useState(initialSearchValue !== null && initialSearchValue !== void 0 ? initialSearchValue : '');
+  const [filterSelections, setFilterSelections] = useState({});
   const handleSearchChange = useCallback(e => {
     const rawSearch = e.currentTarget.value;
     setSearchBarSearchString(rawSearch);
@@ -28,6 +29,15 @@ const ConfluenceSearchContainer = ({
       currentCloudId.current = cloudId;
     }
   }, [cloudId]);
+  const handleBasicFilterSelectionChange = useCallback((filterType, options) => {
+    const updatedSelection = {
+      ...filterSelections,
+      [filterType]: options
+    };
+    setFilterSelections(updatedSelection);
+    //TODO: move to debounce fn in https://product-fabric.atlassian.net/browse/EDM-9485
+    onSearch(searchBarSearchString, updatedSelection);
+  }, [filterSelections, onSearch, searchBarSearchString]);
   const showBasicFilters = useMemo(() => {
     if (getBooleanFF('platform.linking-platform.datasource.show-clol-basic-filters')) {
       return true;
@@ -45,6 +55,8 @@ const ConfluenceSearchContainer = ({
     searchTerm: searchBarSearchString,
     placeholder: searchMessages.searchLabel,
     fullWidth: !showBasicFilters
-  }), showBasicFilters && /*#__PURE__*/React.createElement(BasicFilters, null));
+  }), showBasicFilters && /*#__PURE__*/React.createElement(BasicFilters, {
+    onChange: handleBasicFilterSelectionChange
+  }));
 };
 export default ConfluenceSearchContainer;

package/dist/es2019/ui/confluence-search-modal/modal/index.js

@@ -69,13 +69,16 @@ export const PlainConfluenceSearchConfigModal = props => {
     viewMode = 'table',
     parameters: initialParameters,
     url: urlBeingEdited,
-    visibleColumnKeys: initialVisibleColumnKeys
+    visibleColumnKeys: initialVisibleColumnKeys,
+    disableDisplayDropdown = false,
+    overrideParameters
   } = props;
   const [availableSites, setAvailableSites] = useState(undefined);
   const [currentViewMode, setCurrentViewMode] = useState(viewMode);
   const [cloudId, setCloudId] = useState(initialParameters === null || initialParameters === void 0 ? void 0 : initialParameters.cloudId);
   const [searchString, setSearchString] = useState(initialParameters === null || initialParameters === void 0 ? void 0 : initialParameters.searchString);
   const [visibleColumnKeys, setVisibleColumnKeys] = useState(initialVisibleColumnKeys);
+  const [lastModified, setLastModified] = useState();
 
   // analytics related parameters
   const searchCount = useRef(0);
@@ -87,9 +90,21 @@ export const PlainConfluenceSearchConfigModal = props => {
   const parameters = useMemo(() => ({
     ...initialParameters,
     cloudId,
-    searchString
-  }), [cloudId, initialParameters, searchString /** Add more parameters when more filters are added */]);
+    searchString,
+    ...(lastModified && {
+      lastModified
+    })
+  }), [cloudId, lastModified, initialParameters, searchString /** Add more parameters when more filters are added */]);
   const isParametersSet = useMemo(() => !!cloudId && Object.values(parameters !== null && parameters !== void 0 ? parameters : {}).filter(v => v !== undefined).length > 1, [cloudId, parameters]);
+  const parametersToSend = useMemo(() => {
+    if (!isParametersSet) {
+      return undefined;
+    }
+    return {
+      ...parameters,
+      ...(overrideParameters !== null && overrideParameters !== void 0 ? overrideParameters : {})
+    };
+  }, [parameters, overrideParameters, isParametersSet]);
   const {
     reset,
     status,
@@ -104,7 +119,7 @@ export const PlainConfluenceSearchConfigModal = props => {
     destinationObjectTypes
   } = useDatasourceTableState({
     datasourceId,
-    parameters: isParametersSet ? parameters : undefined,
+    parameters: parametersToSend,
     fieldKeys: visibleColumnKeys
   });
   const {
@@ -321,7 +336,7 @@ export const PlainConfluenceSearchConfigModal = props => {
       onInsert(buildDatasourceAdf({
         id: datasourceId,
         parameters: {
-          ...parameters,
+          ...parametersToSend,
           cloudId
         },
         views: [{
@@ -344,14 +359,18 @@ export const PlainConfluenceSearchConfigModal = props => {
         }]
       }, confluenceSearchUrl), consumerEvent);
     }
-  }, [isParametersSet, cloudId, analyticsPayload, totalCount, currentViewMode, onInsert, confluenceSearchUrl, datasourceId, parameters, visibleColumnKeys, columnCustomSizes, wrappedColumnKeys]);
+  }, [isParametersSet, cloudId, analyticsPayload, totalCount, currentViewMode, onInsert, confluenceSearchUrl, datasourceId, parametersToSend, visibleColumnKeys, columnCustomSizes, wrappedColumnKeys]);
   const handleViewModeChange = selectedMode => {
     userInteractionActions.current.add(DatasourceAction.DISPLAY_VIEW_CHANGED);
     setCurrentViewMode(selectedMode);
   };
-  const onSearch = useCallback(newSearchString => {
+  const onSearch = useCallback((newSearchString, filters) => {
     searchCount.current++;
     userInteractionActions.current.add(DatasourceAction.QUERY_UPDATED);
+    if (filters !== null && filters !== void 0 && filters.lastModified) {
+      const lastModifiedValue = filters.lastModified.find(range => range.value);
+      setLastModified(lastModifiedValue === null || lastModifiedValue === void 0 ? void 0 : lastModifiedValue.value);
+    }
     setSearchString(newSearchString);
     reset({
       shouldForceRequest: true
@@ -380,7 +399,7 @@ export const PlainConfluenceSearchConfigModal = props => {
     selectedSite: selectedConfluenceSite,
     testId: "confluence-search-datasource-modal--site-selector",
     label: siteSelectorLabel
-  })), !hasNoConfluenceSites && jsx(DisplayViewDropDown, {
+  })), !hasNoConfluenceSites && !disableDisplayDropdown && jsx(DisplayViewDropDown, {
     onViewModeChange: handleViewModeChange,
     viewMode: currentViewMode
   })), jsx(ModalBody, null, !hasNoConfluenceSites ? jsx(Fragment, null, jsx(Box, {

package/dist/es2019/ui/datasource-table-view/datasourceTableView.js

@@ -173,6 +173,7 @@ const DatasourceTableViewWithoutAnalytics = ({
     testId: "datasource-table-view-skeleton",
     isCompact: true
   }), jsx(TableFooter, {
+    datasourceId: datasourceId,
     itemCount: isDataReady ? totalCount : undefined,
     onRefresh: onRefresh,
     isLoading: !isDataReady || status === 'loading',

package/dist/es2019/ui/jira-issues-modal/basic-filters/ui/async-popup-select/index.js

@@ -3,9 +3,9 @@ import isEqual from 'lodash/isEqual';
 import { useIntl } from 'react-intl-next';
 import { useDebouncedCallback } from 'use-debounce';
 import { FilterPopupSelect } from '../../../../common/modal/popup-select';
+import { SEARCH_DEBOUNCE_MS } from '../../../../common/modal/popup-select/constants';
 import { useFilterOptions } from '../../hooks/useFilterOptions';
 import { asyncPopupSelectMessages } from './messages';
-export const SEARCH_DEBOUNCE_MS = 350;
 const AsyncPopupSelect = ({
   filterType,
   site,
@@ -82,11 +82,12 @@ const AsyncPopupSelect = ({
   const isEmpty = status === 'resolved' && filterOptionsLength === 0;
   const popupSelectOptions = isLoading || isError ? [] : filterOptions; // if not set to [], then on loading, no loading UI will be shown
   const areAllResultsLoaded = filterOptionsLength === totalCount;
+  const filterName = `jlol-basic-filter-${filterType}`;
   const shouldShowFooter = (status === 'resolved' || isLoadingMore) && filterOptionsLength > 0; // footer should not disappear when there is an inline spinner for loading more data
   const shouldDisplayShowMoreButton = status === 'resolved' && !!pageCursor && !areAllResultsLoaded;
   const triggerButtonLabel = formatMessage(asyncPopupSelectMessages[`${filterType}Label`]);
   return /*#__PURE__*/React.createElement(FilterPopupSelect, {
-    filterName: `jlol-basic-filter-${filterType}`,
+    filterName: filterName,
     status: status,
     showLoading: isLoading,
     showHydrating: isJQLHydrating,
@@ -100,7 +101,7 @@ const AsyncPopupSelect = ({
     onSelectionChange: handleOptionSelection,
     onMenuOpen: handleMenuOpen,
     menuListProps: {
-      filterName: filterType,
+      filterName,
       isError,
       isEmpty,
       isLoading,

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

@@ -8,6 +8,7 @@ import { Flex, xcss } from '@atlaskit/primitives';
 import { useDatasourceAnalyticsEvents } from '../../../analytics';
 import { BasicSearchInput } from '../../common/modal/basic-search-input';
 import { basicSearchInputMessages } from '../../common/modal/basic-search-input/messages';
+import { FILTER_SELECTION_DEBOUNCE_MS } from '../../common/modal/popup-select/constants';
 import { BasicFilters } from '../basic-filters';
 import { useHydrateJqlQuery } from '../basic-filters/hooks/useHydrateJqlQuery';
 import { isQueryTooComplex } from '../basic-filters/utils/isQueryTooComplex';
@@ -25,7 +26,6 @@ const basicSearchInputContainerStyles = xcss({
 });
 export const DEFAULT_JQL_QUERY = 'ORDER BY created DESC';
 export const ALLOWED_ORDER_BY_KEYS = ['key', 'summary', 'assignee', 'status', 'created'];
-export const FILTER_SELECTION_DEBOUNCE_MS = 500;
 export const JiraSearchContainer = props => {
   const {
     isSearching,

package/dist/es2019/ui/table-footer/index.js

@@ -7,9 +7,12 @@ import { FormattedMessage, FormattedNumber, useIntl } from 'react-intl-next';
 import Button from '@atlaskit/button';
 import Heading from '@atlaskit/heading';
 import RefreshIcon from '@atlaskit/icon/glyph/refresh';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import LinkUrl from '@atlaskit/smart-card/link-url';
 import { N0, N40, N800, N90 } from '@atlaskit/theme/colors';
+import { ASSETS_LIST_OF_LINKS_DATASOURCE_ID } from '../assets-modal';
 import { footerMessages } from './messages';
+import { PoweredByJSMAssets } from './powered-by-jsm-assets';
 import { SyncInfo } from './sync-info';
 const FooterWrapper = styled.div({
   padding: `${"var(--ds-space-0, 0px)"} ${"var(--ds-space-200, 16px)"}`,
@@ -40,6 +43,7 @@ const SyncTextWrapper = styled.div({
   fontSize: '12px'
 });
 export const TableFooter = ({
+  datasourceId,
   itemCount,
   onRefresh,
   isLoading,
@@ -77,7 +81,9 @@ export const TableFooter = ({
     values: {
       itemCount
     }
-  }))))), jsx(SyncWrapper, null, onRefresh && jsx(Fragment, null, jsx(SyncTextWrapper, {
+  }))))), getBooleanFF('platform.linking-platform.datasource-assets_objects_add_jsm_promotional_tag') && datasourceId === ASSETS_LIST_OF_LINKS_DATASOURCE_ID ? jsx(PoweredByJSMAssets, {
+    text: intl.formatMessage(footerMessages.powerByJSM)
+  }) : null, jsx(SyncWrapper, null, onRefresh && jsx(Fragment, null, jsx(SyncTextWrapper, {
     "data-testid": "sync-text"
   }, isLoading ? jsx(FormattedMessage, footerMessages.loadingText) : jsx(SyncInfo, {
     lastSyncTime: lastSyncTime

package/dist/es2019/ui/table-footer/messages.js

@@ -14,5 +14,10 @@ export const footerMessages = defineMessages({
     id: 'linkDataSource.table-footer.refresh',
     description: 'Label for refresh icon',
     defaultMessage: 'Refresh'
+  },
+  powerByJSM: {
+    id: 'linkDataSource.table-footer.power-by-jsm',
+    description: 'Displayed on the issue like table footer to increase JSM Assets visibility',
+    defaultMessage: 'Powered by Assets in Jira Service Management'
   }
 });

package/dist/es2019/ui/table-footer/powered-by-jsm-assets/index.js

@@ -0,0 +1,45 @@
+import React from 'react';
+import { JiraServiceManagementIcon } from '@atlaskit/logo';
+import { Box, xcss } from '@atlaskit/primitives';
+import { useDatasourceAnalyticsEvents } from '../../../analytics';
+const jsmTextStyles = xcss({
+  fontSize: 'small',
+  color: 'color.text.subtle',
+  marginLeft: "var(--ds-space-075, 6px)",
+  ':hover': {
+    color: 'color.link.pressed'
+  }
+});
+const jsmContainerStyles = xcss({
+  display: 'flex',
+  flexDirection: 'row-reverse'
+});
+export const PoweredByJSMAssets = props => {
+  const ASSETS_LINK = '/jira/servicedesk/assets';
+  const {
+    fireEvent
+  } = useDatasourceAnalyticsEvents();
+  return /*#__PURE__*/React.createElement(Box, {
+    xcss: jsmContainerStyles,
+    padding: "space.150"
+  }, /*#__PURE__*/React.createElement("a", {
+    "data-testid": 'powered-by-jsm-assets-link',
+    onClick: () => fireEvent('ui.link.clicked.poweredBy', {
+      componentHierarchy: 'datasourceTable',
+      extensionKey: 'jsm-cmdb-gateway'
+    }),
+    href: ASSETS_LINK,
+    rel: "noreferrer",
+    target: "_blank",
+    style: {
+      display: 'inline-flex',
+      alignItems: 'center'
+    }
+  }, /*#__PURE__*/React.createElement(JiraServiceManagementIcon, {
+    size: "xsmall",
+    appearance: "brand",
+    label: props.text
+  }), /*#__PURE__*/React.createElement(Box, {
+    xcss: jsmTextStyles
+  }, props.text)));
+};

package/dist/esm/ui/common/modal/popup-select/constants.js

@@ -0,0 +1,2 @@
+export var FILTER_SELECTION_DEBOUNCE_MS = 500;
+export var SEARCH_DEBOUNCE_MS = 350;

package/dist/esm/ui/common/modal/popup-select/footer.js

@@ -16,9 +16,10 @@ var footerPaginationInfoStyles = xcss({
 });
 var PopupFooter = function PopupFooter(_ref) {
   var currentDisplayCount = _ref.currentDisplayCount,
-    totalCount = _ref.totalCount;
+    totalCount = _ref.totalCount,
+    filterName = _ref.filterName;
   return /*#__PURE__*/React.createElement(Flex, {
-    testId: "jlol-basic-filter-popup-select--footer",
+    testId: "".concat(filterName, "--footer"),
     direction: "row",
     alignItems: "center",
     justifyContent: "end",

package/dist/esm/ui/common/modal/popup-select/formatOptionLabel.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { Fragment } from 'react';
 import Avatar from '@atlaskit/avatar';
 import PeopleGroupIcon from '@atlaskit/icon/glyph/people-group';
 import Lozenge from '@atlaskit/lozenge';
@@ -29,14 +29,14 @@ var IconOptionLabel = function IconOptionLabel(_ref) {
   };
   return /*#__PURE__*/React.createElement(AvatarOptionLabel, {
     data: avatarOptionLabelData,
-    testId: "jlol-basic-filter-popup-select-option--icon-label"
+    testId: "basic-filter-popup-select-option--icon-label"
   });
 };
 var LozengeOptionLabel = function LozengeOptionLabel(_ref2) {
   var data = _ref2.data;
   return /*#__PURE__*/React.createElement(Lozenge, {
     appearance: data.appearance,
-    testId: "jlol-basic-filter-popup-select-option--lozenge"
+    testId: "basic-filter-popup-select-option--lozenge"
   }, /*#__PURE__*/React.createElement(Box, {
     xcss: [commonLabelStyles]
   }, data.label));
@@ -46,7 +46,7 @@ var AvatarOptionLabel = function AvatarOptionLabel(_ref3) {
     testId = _ref3.testId;
   return /*#__PURE__*/React.createElement(Flex, {
     alignItems: "center",
-    testId: testId || 'jlol-basic-filter-popup-select-option--avatar'
+    testId: testId || 'basic-filter-popup-select-option--avatar'
   }, data.isGroup ? /*#__PURE__*/React.createElement(Flex, {
     alignItems: "center",
     justifyContent: "center",
@@ -59,11 +59,13 @@ var AvatarOptionLabel = function AvatarOptionLabel(_ref3) {
     src: data.avatar,
     size: "xsmall"
   }), /*#__PURE__*/React.createElement(Box, {
-    xcss: [commonLabelStyles, avatarOptionLabelStyles],
-    testId: "nidhin"
+    xcss: [commonLabelStyles, avatarOptionLabelStyles]
   }, data.label));
 };
 var formatOptionLabel = function formatOptionLabel(data) {
+  if (data.optionType === 'defaultOption') {
+    return /*#__PURE__*/React.createElement(Fragment, null);
+  }
   if (data.optionType === 'lozengeLabel') {
     return /*#__PURE__*/React.createElement(LozengeOptionLabel, {
       data: data

package/dist/esm/ui/common/modal/popup-select/index.js

@@ -205,7 +205,8 @@ export var FilterPopupSelect = function FilterPopupSelect(_ref) {
     },
     footer: shouldShowFooter && /*#__PURE__*/React.createElement(PopupFooter, {
       currentDisplayCount: options.length,
-      totalCount: totalCount
+      totalCount: totalCount,
+      filterName: filterName
     })
   });
 };

package/dist/esm/ui/common/modal/popup-select/menu-list/errorMessage.js

@@ -4,7 +4,7 @@ import { useDebouncedCallback } from 'use-debounce';
 import ErrorIcon from '@atlaskit/icon/glyph/error';
 import { N500 } from '@atlaskit/theme/colors';
 import { useDatasourceAnalyticsEvents } from '../../../../../analytics';
-import { SEARCH_DEBOUNCE_MS } from '../../../../jira-issues-modal/basic-filters/ui/async-popup-select';
+import { SEARCH_DEBOUNCE_MS } from '../constants';
 import { asyncPopupSelectMessages } from './messages';
 import CustomSelectMessage from './selectMessage';
 var getErrorReasonType = function getErrorReasonType(errors) {
@@ -45,7 +45,7 @@ var CustomErrorMessage = function CustomErrorMessage(_ref3) {
       size: "xlarge"
     }),
     message: asyncPopupSelectMessages.errorMessage,
-    testId: "jlol-basic-filter-popup-select--error-message"
+    testId: "".concat(filterName, "--error-message")
   });
 };
 export default CustomErrorMessage;

package/dist/esm/ui/common/modal/popup-select/menu-list/index.js

@@ -39,7 +39,9 @@ var CustomMenuList = function CustomMenuList(_ref) {
   };
   var renderChildren = function renderChildren() {
     if (isLoading) {
-      return /*#__PURE__*/React.createElement(CustomDropdownLoadingMessage, null);
+      return /*#__PURE__*/React.createElement(CustomDropdownLoadingMessage, {
+        filterName: filterName
+      });
     }
     if (isError) {
       return /*#__PURE__*/React.createElement(CustomErrorMessage, {
@@ -52,7 +54,7 @@ var CustomMenuList = function CustomMenuList(_ref) {
         filterName: filterName
       });
     }
-    return /*#__PURE__*/React.createElement(React.Fragment, null, children, shouldDisplayShowMore && /*#__PURE__*/React.createElement(Box, {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, children, shouldDisplayShowMore && handleShowMore && /*#__PURE__*/React.createElement(Box, {
       xcss: showMoreButtonBoxStyles
     }, /*#__PURE__*/React.createElement(ShowMoreButton, {
       onShowMore: handleShowMore,

package/dist/esm/ui/common/modal/popup-select/menu-list/loadingMessage.js

@@ -2,13 +2,14 @@ import React from 'react';
 import Spinner from '@atlaskit/spinner';
 import { asyncPopupSelectMessages } from './messages';
 import CustomSelectMessage from './selectMessage';
-var CustomDropdownLoadingMessage = function CustomDropdownLoadingMessage() {
+var CustomDropdownLoadingMessage = function CustomDropdownLoadingMessage(_ref) {
+  var filterName = _ref.filterName;
   return /*#__PURE__*/React.createElement(CustomSelectMessage, {
     icon: /*#__PURE__*/React.createElement(Spinner, {
       size: "large"
     }),
     message: asyncPopupSelectMessages.loadingMessage,
-    testId: "jlol-basic-filter-popup-select--loading-message"
+    testId: "".concat(filterName, "--loading-message")
   });
 };
 export default CustomDropdownLoadingMessage;

package/dist/esm/ui/common/modal/popup-select/menu-list/noOptionsMessage.js

@@ -4,7 +4,7 @@ import { useDebouncedCallback } from 'use-debounce';
 import QuestionCircleIcon from '@atlaskit/icon/glyph/question-circle';
 import { N500 } from '@atlaskit/theme/colors';
 import { useDatasourceAnalyticsEvents } from '../../../../../analytics';
-import { SEARCH_DEBOUNCE_MS } from '../../../../jira-issues-modal/basic-filters/ui/async-popup-select';
+import { SEARCH_DEBOUNCE_MS } from '../constants';
 import { asyncPopupSelectMessages } from './messages';
 import CustomSelectMessage from './selectMessage';
 var CustomNoOptionsMessage = function CustomNoOptionsMessage(_ref) {
@@ -33,7 +33,7 @@ var CustomNoOptionsMessage = function CustomNoOptionsMessage(_ref) {
       label: ""
     }),
     message: asyncPopupSelectMessages.noOptionsMessage,
-    testId: "jlol-basic-filter-popup-select--no-options-message"
+    testId: "".concat(filterName, "--no-options-message")
   });
 };
 export default CustomNoOptionsMessage;

package/dist/esm/ui/common/modal/popup-select/menu-list/showMoreButton.js

@@ -20,7 +20,7 @@ var ShowMoreButton = function ShowMoreButton(_ref) {
   return /*#__PURE__*/React.createElement(Button, {
     onClick: handleShowMore,
     appearance: "link",
-    testId: "jlol-basic-filter-popup-select--show-more-button"
+    testId: "".concat(filterName, "--show-more-button")
   }, formatMessage(asyncPopupSelectMessages.showMoreMessage));
 };
 export default ShowMoreButton;

package/dist/esm/ui/confluence-search-modal/basic-filters/filters/date-range-picker/PopupComponent.js

@@ -0,0 +1,9 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React, { forwardRef } from 'react';
+import { PopupComponentContainer } from './styled';
+export var PopupComponent = /*#__PURE__*/forwardRef(function (props, ref) {
+  return /*#__PURE__*/React.createElement(PopupComponentContainer, _extends({}, props, {
+    "data-testId": 'confluence-search-datasource-popup-container',
+    ref: ref
+  }));
+});

package/dist/esm/ui/confluence-search-modal/basic-filters/filters/date-range-picker/index.js

@@ -0,0 +1,79 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import React, { useCallback, useState } from 'react';
+import { FormattedMessage, useIntl } from 'react-intl-next';
+import Popup from '@atlaskit/popup';
+import { layers } from '@atlaskit/theme/constants';
+import { CLOLBasicFilters } from '../../types';
+import { dateRangeMessages } from './messages';
+import { PopupComponent } from './PopupComponent';
+import { CustomDropdown, CustomDropdownItem } from './styled';
+import { PopupTrigger } from './trigger';
+var lastModifiedValues = ['anyTime', 'today', 'yesterday', 'past7Days', 'past30Days', 'pastYear', 'custom'];
+var defaultOptionValue = 'anyTime';
+var filterName = CLOLBasicFilters.lastModified;
+export var DateRangePicker = function DateRangePicker(_ref) {
+  var onSelectionChange = _ref.onSelectionChange;
+  var _useState = useState(null),
+    _useState2 = _slicedToArray(_useState, 2),
+    currentOption = _useState2[0],
+    setCurrentOption = _useState2[1];
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    isPickerOpen = _useState4[0],
+    setIsPickerOpen = _useState4[1];
+  var _useIntl = useIntl(),
+    formatMessage = _useIntl.formatMessage;
+  var onClickFilterOption = useCallback(function (option) {
+    setCurrentOption(option);
+    setIsPickerOpen(false);
+    onSelectionChange(filterName, [{
+      optionType: 'defaultOption',
+      label: option,
+      value: option
+    }]);
+  }, [onSelectionChange]);
+  var handleTogglePopup = useCallback(function () {
+    setIsPickerOpen(!isPickerOpen);
+  }, [isPickerOpen]);
+  return /*#__PURE__*/React.createElement(Popup, {
+    isOpen: isPickerOpen,
+    onClose: handleTogglePopup,
+    popupComponent: PopupComponent,
+    zIndex: layers.modal(),
+    content: function content() {
+      return /*#__PURE__*/React.createElement(CustomDropdown, null, lastModifiedValues.map(function (option) {
+        return /*#__PURE__*/React.createElement(CustomDropdownItem, {
+          key: option
+          //want to show Anytime as selected if none of the other options are selected
+          ,
+          isSelected: currentOption ? option === currentOption : option === defaultOptionValue,
+          onClick: function onClick() {
+            return onClickFilterOption(option);
+          }
+        }, /*#__PURE__*/React.createElement(FormattedMessage, getCurrentOptionLabel(option)));
+      }));
+    },
+    placement: "bottom-start",
+    trigger: function trigger(triggerProps) {
+      return /*#__PURE__*/React.createElement(PopupTrigger, {
+        triggerProps: triggerProps,
+        optionSelected: !!currentOption,
+        label: formatMessage(dateRangeMessages.dateRangeTitle),
+        selectedLabel: formatMessage(getCurrentOptionLabel(currentOption)),
+        onClickButton: handleTogglePopup
+      });
+    }
+  });
+};
+var getCurrentOptionLabel = function getCurrentOptionLabel(option) {
+  var mapping = {
+    anyTime: 'dateRangeAnyTime',
+    today: 'dateRangeToday',
+    yesterday: 'dateRangeYesterday',
+    past7Days: 'dateRangeLastWeek',
+    past30Days: 'dateRangeLastMonth',
+    pastYear: 'dateRangeLastYear',
+    custom: 'dateRangeCustom'
+  };
+  return option ? dateRangeMessages[mapping[option]] : dateRangeMessages[mapping['anyTime']];
+};