@atlaskit/link-datasource 1.29.4 → 1.30.0

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

@@ -1,33 +1,78 @@
-import React, { useCallback, useState } from 'react';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { FormattedMessage, useIntl } from 'react-intl-next';
+import { DatePicker } from '@atlaskit/datetime-picker';
+import ErrorIcon from '@atlaskit/icon/glyph/error';
 import Popup from '@atlaskit/popup';
+import { R400 } from '@atlaskit/theme/colors';
 import { layers } from '@atlaskit/theme/constants';
 import { CLOLBasicFilters } from '../../types';
 import { dateRangeMessages } from './messages';
 import { PopupComponent } from './PopupComponent';
-import { CustomDropdown, CustomDropdownItem } from './styled';
+import { CustomDateWrapper, CustomDropdown, CustomDropdownItem, DatePickersWrapper, DateRangeErrorMessage, SelectDateRangeButton } from './styled';
 import { PopupTrigger } from './trigger';
+import { getCurrentOptionLabel, getDropdownLabel, getInvalidDateRange } from './utils';
 const lastModifiedValues = ['anyTime', 'today', 'yesterday', 'past7Days', 'past30Days', 'pastYear', 'custom'];
 const defaultOptionValue = 'anyTime';
-const filterName = CLOLBasicFilters.lastModified;
 export const DateRangePicker = ({
-  onSelectionChange
+  onSelectionChange,
+  selection
 }) => {
-  const [currentOption, setCurrentOption] = useState(null);
+  const [currentOption, setCurrentOption] = useState(selection === null || selection === void 0 ? void 0 : selection.value);
+  const [invalidDateRange, setInvalidDateRange] = useState(getInvalidDateRange(selection === null || selection === void 0 ? void 0 : selection.from, selection === null || selection === void 0 ? void 0 : selection.to));
+  const customFromDate = useRef(selection === null || selection === void 0 ? void 0 : selection.from);
+  const customToDate = useRef(selection === null || selection === void 0 ? void 0 : selection.to);
   const [isPickerOpen, setIsPickerOpen] = useState(false);
   const {
-    formatMessage
+    locale,
+    formatMessage,
+    formatDate
   } = useIntl();
-  const onClickFilterOption = useCallback(option => {
-    setCurrentOption(option);
+  const isCustomSelected = currentOption === 'custom' || (selection === null || selection === void 0 ? void 0 : selection.value) === 'custom';
+  const maxDate = new Date().toISOString();
+  useEffect(() => {
+    if (isPickerOpen) {
+      customFromDate.current = selection === null || selection === void 0 ? void 0 : selection.from;
+      customToDate.current = selection === null || selection === void 0 ? void 0 : selection.to;
+    }
+  }, [isPickerOpen, selection === null || selection === void 0 ? void 0 : selection.from, selection === null || selection === void 0 ? void 0 : selection.to]);
+  const handleFromOnChange = date => {
+    customFromDate.current = date;
+    setInvalidDateRange(getInvalidDateRange(customFromDate.current, customToDate.current));
+  };
+  const handleToOnChange = date => {
+    customToDate.current = date;
+    setInvalidDateRange(getInvalidDateRange(customFromDate.current, customToDate.current));
+  };
+  const handleClickUpdateDateRange = () => {
+    let label = 'custom';
+    if (customFromDate.current && !customToDate.current) {
+      label = customFromDate.current;
+    } else if (customToDate.current && !customFromDate.current) {
+      label = customToDate.current;
+    }
+    onSelectionChange(CLOLBasicFilters.lastModified, {
+      optionType: 'dateRange',
+      label: label,
+      value: 'custom',
+      from: customFromDate.current,
+      to: customToDate.current
+    });
     setIsPickerOpen(false);
-    onSelectionChange(filterName, [{
-      optionType: 'defaultOption',
+  };
+  const handleClickFilterOption = useCallback(option => {
+    setCurrentOption(option);
+    onSelectionChange(CLOLBasicFilters.lastModified, {
+      optionType: 'dateRange',
       label: option,
       value: option
-    }]);
+    });
+    if (option !== 'custom') {
+      setIsPickerOpen(false);
+    }
   }, [onSelectionChange]);
   const handleTogglePopup = useCallback(() => {
+    // If users click out of popup, we let selection prop define the current option when opened again until user sets state
+    setCurrentOption(undefined);
     setIsPickerOpen(!isPickerOpen);
   }, [isPickerOpen]);
   return /*#__PURE__*/React.createElement(Popup, {
@@ -38,31 +83,71 @@ export const DateRangePicker = ({
     content: () => {
       return /*#__PURE__*/React.createElement(CustomDropdown, null, lastModifiedValues.map(option => /*#__PURE__*/React.createElement(CustomDropdownItem, {
         key: option
-        //want to show Anytime as selected if none of the other options are selected
+        // want to show Anytime as selected if none of the other options are selected
         ,
-        isSelected: currentOption ? option === currentOption : option === defaultOptionValue,
-        onClick: () => onClickFilterOption(option)
-      }, /*#__PURE__*/React.createElement(FormattedMessage, getCurrentOptionLabel(option)))));
+        isSelected: selection !== null && selection !== void 0 && selection.value ? option === selection.value : option === defaultOptionValue,
+        onClick: () => handleClickFilterOption(option)
+      }, getDropdownLabel(option, formatMessage))), isPickerOpen && isCustomSelected && /*#__PURE__*/React.createElement(CustomDateWrapper, null, /*#__PURE__*/React.createElement(DatePickersWrapper, null, /*#__PURE__*/React.createElement(DatePicker, {
+        maxDate: maxDate,
+        innerProps: {
+          style: {
+            width: 140
+          }
+        },
+        testId: "date-from-picker",
+        dateFormat: "D MMM YYYY",
+        onChange: handleFromOnChange,
+        defaultValue: selection === null || selection === void 0 ? void 0 : selection.from,
+        placeholder: formatMessage(dateRangeMessages.dateRangeFrom),
+        isInvalid: Boolean(invalidDateRange),
+        locale: locale,
+        selectProps: {
+          styles: {
+            placeholder: base => ({
+              ...base,
+              width: 'max-content'
+            })
+          }
+        }
+      }), /*#__PURE__*/React.createElement(FormattedMessage, dateRangeMessages.dateRangeToLabel), /*#__PURE__*/React.createElement(DatePicker, {
+        maxDate: maxDate,
+        innerProps: {
+          style: {
+            width: 140
+          }
+        },
+        testId: "date-to-picker",
+        dateFormat: "D MMM YYYY",
+        onChange: handleToOnChange,
+        defaultValue: selection === null || selection === void 0 ? void 0 : selection.to,
+        placeholder: formatMessage(dateRangeMessages.dateRangeTo),
+        isInvalid: Boolean(invalidDateRange),
+        locale: locale,
+        selectProps: {
+          styles: {
+            placeholder: base => ({
+              ...base,
+              width: 'max-content'
+            })
+          }
+        }
+      })), invalidDateRange && /*#__PURE__*/React.createElement(DateRangeErrorMessage, null, /*#__PURE__*/React.createElement(ErrorIcon, {
+        size: "small",
+        primaryColor: `var(--ds-icon-danger, ${R400})`,
+        label: "Date range error"
+      }), invalidDateRange), /*#__PURE__*/React.createElement(SelectDateRangeButton, {
+        "data-testId": "custom-date-range-update-button",
+        disabled: Boolean(invalidDateRange),
+        onClick: handleClickUpdateDateRange
+      }, formatMessage(dateRangeMessages.dateRangeUpdateButton))));
     },
     placement: "bottom-start",
     trigger: triggerProps => /*#__PURE__*/React.createElement(PopupTrigger, {
       triggerProps: triggerProps,
-      optionSelected: !!currentOption,
-      label: formatMessage(dateRangeMessages.dateRangeTitle),
-      selectedLabel: formatMessage(getCurrentOptionLabel(currentOption)),
-      onClickButton: handleTogglePopup
+      isSelected: !!(selection !== null && selection !== void 0 && selection.value) || isPickerOpen,
+      labelPrefix: formatMessage(dateRangeMessages.dateRangeTitle),
+      selectedLabel: getCurrentOptionLabel(formatDate, formatMessage, selection),
+      onClick: handleTogglePopup
     })
   });
-};
-const getCurrentOptionLabel = option => {
-  const mapping = {
-    anyTime: 'dateRangeAnyTime',
-    today: 'dateRangeToday',
-    yesterday: 'dateRangeYesterday',
-    past7Days: 'dateRangeLastWeek',
-    past30Days: 'dateRangeLastMonth',
-    pastYear: 'dateRangeLastYear',
-    custom: 'dateRangeCustom'
-  };
-  return option ? dateRangeMessages[mapping[option]] : dateRangeMessages[mapping['anyTime']];
 };

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

@@ -39,5 +39,55 @@ export const dateRangeMessages = defineMessages({
     id: 'linkDataSource.confluence-search.configmodal.date.range.custom',
     defaultMessage: 'Custom',
     description: 'Custom date range'
+  },
+  dateRangeFrom: {
+    id: 'linkDataSource.confluence-search.configmodal.date.range.from',
+    defaultMessage: 'From',
+    description: 'Filter starting from a custom date'
+  },
+  dateRangeTo: {
+    id: 'linkDataSource.confluence-search.configmodal.date.range.to',
+    defaultMessage: 'To',
+    description: 'Filter up to a custom date'
+  },
+  dateRangeDateInputPlaceholder: {
+    id: 'linkDataSource.confluence-search.configmodal.date.range.input.placeholder',
+    defaultMessage: 'Choose a date',
+    description: 'Placeholder text for date input'
+  },
+  dateRangeCustomInvalidDateAfterToday: {
+    id: 'linkDataSource.confluence-search.configmodal.date.range.custom.invalid.after.today',
+    defaultMessage: 'The From date can’t be in the future',
+    description: 'error displayed when a date range begins after the current date'
+  },
+  dateRangeCustomInvalidToDateAfterToday: {
+    id: 'linkDataSource.confluence-search.configmodal.date.range.custom.invalid.to.after.today',
+    defaultMessage: 'The To date can’t be in the future',
+    description: 'error displayed when a date range ends after the current date'
+  },
+  dateRangeCustomInvalidDateAfterEnd: {
+    id: 'linkDataSource.confluence-search.configmodal.date.range.custom.invalid.after.end',
+    defaultMessage: 'The From date has to be before the To date',
+    description: 'error displayed when a date range begins after the end date'
+  },
+  dateRangeToLabel: {
+    id: 'linkDataSource.confluence-search.configmodal.date.range.to.Label',
+    defaultMessage: 'to',
+    description: "'to' in between from and to date pickers"
+  },
+  dateRangeUpdateButton: {
+    id: 'linkDataSource.confluence-search.configmodal.date.range.update.button',
+    defaultMessage: 'Update',
+    description: 'Text for update button in date filter picker'
+  },
+  dateRangeBeforeLabel: {
+    id: 'linkDataSource.confluence-search.configmodal.date.range.before.label',
+    defaultMessage: 'before {date}',
+    description: '`before date` for date picker dropdown'
+  },
+  dateRangeAfterLabel: {
+    id: 'linkDataSource.confluence-search.configmodal.date.range.after.label',
+    defaultMessage: 'after {date}',
+    description: '`after date` for date picker dropdown'
   }
 });

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

@@ -1,10 +1,12 @@
 import styled from '@emotion/styled';
 import { B400, B50, N0, N20, N30, R400 } from '@atlaskit/theme/colors';
+import { layers } from '@atlaskit/theme/constants';
 export const PopupComponentContainer = styled.div({
   boxSizing: 'border-box',
   display: 'block',
   flex: '1 1 auto',
   overflow: 'visible',
+  borderRadius: "var(--ds-border-radius-200, 3px)",
   background: `var(--ds-background-input, ${N0})`,
   ':focus': {
     outline: 'none'
@@ -12,11 +14,11 @@ export const PopupComponentContainer = styled.div({
   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',
+  width: '340px',
   background: `var(--ds-background-input, ${N0})`,
-  borderRadius: '3px',
+  borderRadius: "var(--ds-border-radius-200, 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'
+  zIndex: layers.modal()
 });
 export const CustomDropdownItem = styled.div(props => ({
   height: '36px',
@@ -51,7 +53,7 @@ export const SelectDateRangeButton = styled.button({
   width: '70px',
   height: '40px',
   marginTop: "var(--ds-space-150, 12px)",
-  borderRadius: '3px',
+  borderRadius: "var(--ds-border-radius-200, 3px)",
   '&:hover': {
     background: `var(--ds-background-accent-gray-subtler, ${N30})`,
     cursor: 'pointer'

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

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

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

@@ -0,0 +1,57 @@
+import React from 'react';
+import { FormattedMessage } from 'react-intl-next';
+import { getFormattedDate } from '../../../../../ui/issue-like-table/render-type/date-time';
+import { dateRangeMessages } from './messages';
+export const getDropdownLabel = (option = 'anyTime', formatMessage) => {
+  const mapping = {
+    anyTime: 'dateRangeAnyTime',
+    today: 'dateRangeToday',
+    yesterday: 'dateRangeYesterday',
+    past7Days: 'dateRangeLastWeek',
+    past30Days: 'dateRangeLastMonth',
+    pastYear: 'dateRangeLastYear',
+    custom: 'dateRangeCustom'
+  };
+  return formatMessage(dateRangeMessages[mapping[option]]);
+};
+export const getCurrentOptionLabel = (formatDate, formatMessage, selection) => {
+  const selectedOption = selection === null || selection === void 0 ? void 0 : selection.value;
+  if (selectedOption === 'custom') {
+    const hasFromDate = !!(selection !== null && selection !== void 0 && selection.from);
+    const hasToDate = !!(selection !== null && selection !== void 0 && selection.to);
+    const formattedFromDate = getFormattedDate((selection === null || selection === void 0 ? void 0 : selection.from) || '', 'date', formatDate);
+    const formattedToDate = getFormattedDate((selection === null || selection === void 0 ? void 0 : selection.to) || '', 'date', formatDate);
+    if (hasFromDate && !hasToDate) {
+      return formatMessage(dateRangeMessages.dateRangeAfterLabel, {
+        date: formattedFromDate
+      });
+    }
+    if (!hasFromDate && hasToDate) {
+      return formatMessage(dateRangeMessages.dateRangeBeforeLabel, {
+        date: formattedToDate
+      });
+    }
+    if (hasFromDate && hasToDate) {
+      return `${formattedFromDate} - ${formattedToDate}`;
+    }
+  }
+  return getDropdownLabel(selectedOption, formatMessage);
+};
+export const getInvalidDateRange = (from, to) => {
+  if (!from && !to) {
+    return null;
+  }
+  const dateFrom = new Date(`${from}${from ? 'T00:00:00' : ''}`);
+  const dateTo = new Date(`${to}${to ? 'T00:00:00' : ''}`);
+  const now = new Date();
+  if (dateFrom > now) {
+    return /*#__PURE__*/React.createElement(FormattedMessage, dateRangeMessages.dateRangeCustomInvalidDateAfterToday);
+  }
+  if (dateFrom > dateTo) {
+    return /*#__PURE__*/React.createElement(FormattedMessage, dateRangeMessages.dateRangeCustomInvalidDateAfterEnd);
+  }
+  if (dateTo > now) {
+    return /*#__PURE__*/React.createElement(FormattedMessage, dateRangeMessages.dateRangeCustomInvalidToDateAfterToday);
+  }
+  return null;
+};

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

@@ -12,8 +12,14 @@ const BasicFilterContainer = ({
   isHydrating
 }) => {
   const {
+    lastModified,
     editedOrCreatedBy
   } = selections;
+  const [lastModifiedValue] = lastModified || [];
+  const lastModifiedSelection = (lastModifiedValue === null || lastModifiedValue === void 0 ? void 0 : lastModifiedValue.optionType) === 'dateRange' ? lastModifiedValue : undefined;
+  const onDateRangePickerChange = (filterType, updatedOption) => {
+    onChange(filterType, [updatedOption]);
+  };
   return /*#__PURE__*/React.createElement(Flex, {
     xcss: basicFilterContainerStyles,
     gap: "space.100",
@@ -24,7 +30,8 @@ const BasicFilterContainer = ({
     selection: editedOrCreatedBy || [],
     isHydrating: isHydrating
   }), /*#__PURE__*/React.createElement(DateRangePicker, {
-    onSelectionChange: onChange
+    selection: lastModifiedSelection,
+    onSelectionChange: onDateRangePickerChange
   }));
 };
 export default BasicFilterContainer;

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

@@ -78,8 +78,12 @@ export const PlainConfluenceSearchConfigModal = props => {
   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(initialParameters === null || initialParameters === void 0 ? void 0 : initialParameters.lastModified);
   const [contributorAccountIds, setContributorAccountIds] = useState((initialParameters === null || initialParameters === void 0 ? void 0 : initialParameters.contributorAccountIds) || []);
+  const [lastModified, setLastModified] = useState(initialParameters !== null && initialParameters !== void 0 && initialParameters.lastModified ? {
+    value: initialParameters === null || initialParameters === void 0 ? void 0 : initialParameters.lastModified,
+    from: initialParameters === null || initialParameters === void 0 ? void 0 : initialParameters.lastModifiedFrom,
+    to: initialParameters === null || initialParameters === void 0 ? void 0 : initialParameters.lastModifiedTo
+  } : undefined);
 
   // analytics related parameters
   const searchCount = useRef(0);
@@ -92,13 +96,19 @@ export const PlainConfluenceSearchConfigModal = props => {
     ...initialParameters,
     cloudId,
     searchString,
-    ...(((initialParameters === null || initialParameters === void 0 ? void 0 : initialParameters.lastModified) || lastModified) && {
-      lastModified
+    ...(((initialParameters === null || initialParameters === void 0 ? void 0 : initialParameters.lastModified) || (lastModified === null || lastModified === void 0 ? void 0 : lastModified.value)) && {
+      lastModified: lastModified === null || lastModified === void 0 ? void 0 : lastModified.value
+    }),
+    ...(((initialParameters === null || initialParameters === void 0 ? void 0 : initialParameters.lastModifiedFrom) || (lastModified === null || lastModified === void 0 ? void 0 : lastModified.from)) && {
+      lastModifiedFrom: lastModified === null || lastModified === void 0 ? void 0 : lastModified.from
+    }),
+    ...(((initialParameters === null || initialParameters === void 0 ? void 0 : initialParameters.lastModifiedTo) || (lastModified === null || lastModified === void 0 ? void 0 : lastModified.to)) && {
+      lastModifiedTo: lastModified === null || lastModified === void 0 ? void 0 : lastModified.to
     }),
     ...(((initialParameters === null || initialParameters === void 0 ? void 0 : initialParameters.contributorAccountIds) || (contributorAccountIds === null || contributorAccountIds === void 0 ? void 0 : contributorAccountIds.length) > 0) && {
       contributorAccountIds
     })
-  }), [cloudId, lastModified, contributorAccountIds, initialParameters, searchString /** Add more parameters when more filters are added */]);
+  }), [initialParameters, cloudId, searchString, lastModified, contributorAccountIds]);
   const initialFilterSelection = useMemo(() => ({
     editedOrCreatedBy: (initialParameters === null || initialParameters === void 0 ? void 0 : initialParameters.contributorAccountIds) || []
   }), [initialParameters === null || initialParameters === void 0 ? void 0 : initialParameters.contributorAccountIds]);
@@ -246,8 +256,17 @@ export const PlainConfluenceSearchConfigModal = props => {
     if (contributorAccountIds.length > 0) {
       params.append('contributors', contributorAccountIds.join(','));
     }
+    if (lastModified !== null && lastModified !== void 0 && lastModified.value) {
+      params.append('lastModified', lastModified.value);
+    }
+    if (lastModified !== null && lastModified !== void 0 && lastModified.from) {
+      params.append('from', lastModified === null || lastModified === void 0 ? void 0 : lastModified.from);
+    }
+    if (lastModified !== null && lastModified !== void 0 && lastModified.to) {
+      params.append('to', lastModified === null || lastModified === void 0 ? void 0 : lastModified.to);
+    }
     return `${selectedConfluenceSiteUrl}/wiki/search?${params.toString()}`;
-  }, [contributorAccountIds, searchString, selectedConfluenceSiteUrl]);
+  }, [contributorAccountIds, lastModified, searchString, selectedConfluenceSiteUrl]);
   const analyticsPayload = useMemo(() => ({
     extensionKey,
     destinationObjectTypes,
@@ -393,8 +412,14 @@ export const PlainConfluenceSearchConfigModal = props => {
         lastModified
       } = filters;
       if (lastModified) {
-        const lastModifiedValue = lastModified.find(range => range.value);
-        setLastModified(lastModifiedValue === null || lastModifiedValue === void 0 ? void 0 : lastModifiedValue.value);
+        const updatedDateRangeOption = lastModified.find(range => range.value);
+        if ((updatedDateRangeOption === null || updatedDateRangeOption === void 0 ? void 0 : updatedDateRangeOption.optionType) === 'dateRange') {
+          setLastModified({
+            value: updatedDateRangeOption.value,
+            from: updatedDateRangeOption.from,
+            to: updatedDateRangeOption.to
+          });
+        }
       }
       if (editedOrCreatedBy) {
         const accountIds = editedOrCreatedBy.map(user => user.value);

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

@@ -5,7 +5,7 @@ import { useDatasourceAnalyticsEvents } from '../../../analytics';
 const jsmTextStyles = xcss({
   fontSize: 'small',
   color: 'color.text.subtle',
-  marginLeft: "var(--ds-space-075, 6px)",
+  marginLeft: 'space.075',
   ':hover': {
     color: 'color.link.pressed'
   }