@atlaskit/link-datasource 2.4.0 → 2.4.2

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @atlaskit/link-datasource
 
+## 2.4.2
+
+### Patch Changes
+
+- [#113897](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/113897)
+  [`d074d3df7025a`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/d074d3df7025a) -
+  Update Assets LoL table footer refresh button to clear column and visible key state
+- Updated dependencies
+
+## 2.4.1
+
+### Patch Changes
+
+- [#113044](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/113044)
+  [`2370431d9d611`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/2370431d9d611) -
+  Add analytics events(opened, closed) for lastModified confluence SLLV filter.
+
 ## 2.4.0
 
 ### Minor Changes

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

@@ -15,6 +15,7 @@ var _error = _interopRequireDefault(require("@atlaskit/icon/glyph/error"));
 var _popup = _interopRequireDefault(require("@atlaskit/popup"));
 var _colors = require("@atlaskit/theme/colors");
 var _constants = require("@atlaskit/theme/constants");
+var _analytics = require("../../../../../analytics");
 var _messages = require("./messages");
 var _PopupComponent = require("./PopupComponent");
 var _styled = require("./styled");
@@ -28,7 +29,9 @@ var dateRangeValues = ['anyTime', 'today', 'yesterday', 'past7Days', 'past30Days
 var defaultOptionValue = 'anyTime';
 var DateRangePicker = exports.DateRangePicker = function DateRangePicker(_ref) {
   var onSelectionChange = _ref.onSelectionChange,
-    selection = _ref.selection;
+    selection = _ref.selection,
+    _ref$filterName = _ref.filterName,
+    filterName = _ref$filterName === void 0 ? 'datasource-date-range-picker' : _ref$filterName;
   var _ref2 = selection || {},
     selectedValue = _ref2.value,
     fromDate = _ref2.from,
@@ -38,6 +41,8 @@ var DateRangePicker = exports.DateRangePicker = function DateRangePicker(_ref) {
     locale = _useIntl.locale,
     formatMessage = _useIntl.formatMessage,
     formatDate = _useIntl.formatDate;
+  var _useDatasourceAnalyti = (0, _analytics.useDatasourceAnalyticsEvents)(),
+    fireEvent = _useDatasourceAnalyti.fireEvent;
   var _useState = (0, _react.useState)(selectedValue),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     currentOption = _useState2[0],
@@ -50,11 +55,17 @@ var DateRangePicker = exports.DateRangePicker = function DateRangePicker(_ref) {
     _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
     customToDate = _useState6[0],
     setCustomToDate = _useState6[1];
-  var _useState7 = (0, _react.useState)(false),
+  var _useState7 = (0, _react.useState)(undefined),
     _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
     isPickerOpen = _useState8[0],
     setIsPickerOpen = _useState8[1];
   var isCustomSelected = currentOption === 'custom';
+  var analyticsPayload = (0, _react.useMemo)(function () {
+    return {
+      filterName: filterName,
+      selectionCount: (currentOption !== null && currentOption !== void 0 ? currentOption : defaultOptionValue) === defaultOptionValue ? 0 : 1
+    };
+  }, [filterName, currentOption]);
   var invalidDateRange = (0, _utils.useInvalidDateRange)(customFromDate, customToDate);
   var handleClickUpdateDateRange = function handleClickUpdateDateRange() {
     onSelectionChange({
@@ -81,10 +92,15 @@ var DateRangePicker = exports.DateRangePicker = function DateRangePicker(_ref) {
       return;
     }
     setIsPickerOpen(true);
-    return;
+    fireEvent('ui.dropdown.opened.basicSearchDropdown', analyticsPayload);
   };
+  (0, _react.useEffect)(function () {
+    if (isPickerOpen === false) {
+      fireEvent('ui.dropdown.closed.basicSearchDropdown', analyticsPayload);
+    }
+  }, [analyticsPayload, fireEvent, isPickerOpen]);
   return /*#__PURE__*/_react.default.createElement(_popup.default, {
-    isOpen: isPickerOpen,
+    isOpen: !!isPickerOpen,
     onClose: handlePickerToggle,
     popupComponent: _PopupComponent.PopupComponent,
     zIndex: _constants.layers.modal(),
@@ -164,7 +180,7 @@ var DateRangePicker = exports.DateRangePicker = function DateRangePicker(_ref) {
     placement: "bottom-start",
     trigger: function trigger(triggerProps) {
       var labelText = (0, _utils.getCurrentOptionLabel)(formatDate, formatMessage, selectedValue, toDate, fromDate);
-      var isSelected = !!selectedValue || isPickerOpen;
+      var isSelected = !!selectedValue || !!isPickerOpen;
       return /*#__PURE__*/_react.default.createElement(_trigger.PopupTrigger, {
         triggerProps: triggerProps,
         isSelected: isSelected,

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

@@ -46,7 +46,8 @@ var BasicFilterContainer = function BasicFilterContainer(_ref) {
     isHydrating: isHydrating
   }), /*#__PURE__*/_react.default.createElement(_dateRangePicker.DateRangePicker, {
     selection: lastModifiedSelection,
-    onSelectionChange: onDateRangePickerChange
+    onSelectionChange: onDateRangePickerChange,
+    filterName: "clol-basic-filter-".concat(_types.CLOLBasicFilters.lastModified)
   }));
 };
 var _default = exports.default = BasicFilterContainer;

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

@@ -9,6 +9,7 @@ var _react = require("react");
 var _react2 = require("@emotion/react");
 var _analyticsNext = require("@atlaskit/analytics-next");
 var _intlMessagesProvider = require("@atlaskit/intl-messages-provider");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _analytics = require("../../analytics");
 var _constants = require("../../analytics/constants");
 var _ufoExperiences = require("../../analytics/ufoExperiences");
@@ -19,6 +20,7 @@ var _datasourceExperienceId = require("../../contexts/datasource-experience-id")
 var _useDatasourceTableState = require("../../hooks/useDatasourceTableState");
 var _en = _interopRequireDefault(require("../../i18n/en"));
 var _styled = require("../../ui/issue-like-table/styled");
+var _assetsModal = require("../assets-modal");
 var _accessRequired = require("../common/error-state/access-required");
 var _loadingError = require("../common/error-state/loading-error");
 var _noResults = require("../common/error-state/no-results");
@@ -115,9 +117,10 @@ var DatasourceTableViewWithoutAnalytics = function DatasourceTableViewWithoutAna
   });
   var forcedReset = (0, _react.useCallback)(function () {
     reset({
-      shouldForceRequest: true
+      shouldForceRequest: true,
+      shouldResetColumns: (0, _platformFeatureFlags.getBooleanFF)('platform.linking-platform.datasource-assets_update_refresh_button_dt3qk') && datasourceId === _assetsModal.ASSETS_LIST_OF_LINKS_DATASOURCE_ID
     });
-  }, [reset]);
+  }, [reset, datasourceId]);
   var onRefresh = (0, _react.useCallback)(function () {
     fireEvent('ui.button.clicked.sync', {
       extensionKey: extensionKey,

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

@@ -1,10 +1,11 @@
-import React, { useCallback, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, 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 { useDatasourceAnalyticsEvents } from '../../../../../analytics';
 import { dateRangeMessages } from './messages';
 import { PopupComponent } from './PopupComponent';
 import { CustomDateWrapper, CustomDropdown, CustomDropdownItem, DatePickersWrapper, DateRangeErrorMessage, SelectDateRangeButton } from './styled';
@@ -14,7 +15,8 @@ const dateRangeValues = ['anyTime', 'today', 'yesterday', 'past7Days', 'past30Da
 const defaultOptionValue = 'anyTime';
 export const DateRangePicker = ({
   onSelectionChange,
-  selection
+  selection,
+  filterName = 'datasource-date-range-picker'
 }) => {
   const {
     value: selectedValue,
@@ -27,11 +29,18 @@ export const DateRangePicker = ({
     formatMessage,
     formatDate
   } = useIntl();
+  const {
+    fireEvent
+  } = useDatasourceAnalyticsEvents();
   const [currentOption, setCurrentOption] = useState(selectedValue);
   const [customFromDate, setCustomFromDate] = useState(fromDate);
   const [customToDate, setCustomToDate] = useState(toDate);
-  const [isPickerOpen, setIsPickerOpen] = useState(false);
+  const [isPickerOpen, setIsPickerOpen] = useState(undefined);
   const isCustomSelected = currentOption === 'custom';
+  const analyticsPayload = useMemo(() => ({
+    filterName,
+    selectionCount: (currentOption !== null && currentOption !== void 0 ? currentOption : defaultOptionValue) === defaultOptionValue ? 0 : 1
+  }), [filterName, currentOption]);
   const invalidDateRange = useInvalidDateRange(customFromDate, customToDate);
   const handleClickUpdateDateRange = () => {
     onSelectionChange({
@@ -58,10 +67,15 @@ export const DateRangePicker = ({
       return;
     }
     setIsPickerOpen(true);
-    return;
+    fireEvent('ui.dropdown.opened.basicSearchDropdown', analyticsPayload);
   };
+  useEffect(() => {
+    if (isPickerOpen === false) {
+      fireEvent('ui.dropdown.closed.basicSearchDropdown', analyticsPayload);
+    }
+  }, [analyticsPayload, fireEvent, isPickerOpen]);
   return /*#__PURE__*/React.createElement(Popup, {
-    isOpen: isPickerOpen,
+    isOpen: !!isPickerOpen,
     onClose: handlePickerToggle,
     popupComponent: PopupComponent,
     zIndex: layers.modal(),
@@ -131,7 +145,7 @@ export const DateRangePicker = ({
     placement: "bottom-start",
     trigger: triggerProps => {
       const labelText = getCurrentOptionLabel(formatDate, formatMessage, selectedValue, toDate, fromDate);
-      const isSelected = !!selectedValue || isPickerOpen;
+      const isSelected = !!selectedValue || !!isPickerOpen;
       return /*#__PURE__*/React.createElement(PopupTrigger, {
         triggerProps: triggerProps,
         isSelected: isSelected,

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

@@ -36,7 +36,8 @@ const BasicFilterContainer = ({
     isHydrating: isHydrating
   }), /*#__PURE__*/React.createElement(DateRangePicker, {
     selection: lastModifiedSelection,
-    onSelectionChange: onDateRangePickerChange
+    onSelectionChange: onDateRangePickerChange,
+    filterName: `clol-basic-filter-${CLOLBasicFilters.lastModified}`
   }));
 };
 export default BasicFilterContainer;

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

@@ -5,6 +5,7 @@ import { useCallback, useEffect, useRef } from 'react';
 import { css, jsx } from '@emotion/react';
 import { withAnalyticsContext } from '@atlaskit/analytics-next';
 import { IntlMessagesProvider } from '@atlaskit/intl-messages-provider';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { useDatasourceAnalyticsEvents } from '../../analytics';
 import { componentMetadata } from '../../analytics/constants';
 import { startUfoExperience } from '../../analytics/ufoExperiences';
@@ -15,6 +16,7 @@ import { DatasourceExperienceIdProvider, useDatasourceExperienceId } from '../..
 import { useDatasourceTableState } from '../../hooks/useDatasourceTableState';
 import i18nEN from '../../i18n/en';
 import { ScrollableContainerHeight } from '../../ui/issue-like-table/styled';
+import { ASSETS_LIST_OF_LINKS_DATASOURCE_ID } from '../assets-modal';
 import { AccessRequired } from '../common/error-state/access-required';
 import { LoadingError } from '../common/error-state/loading-error';
 import { NoResults } from '../common/error-state/no-results';
@@ -109,9 +111,10 @@ const DatasourceTableViewWithoutAnalytics = ({
   });
   const forcedReset = useCallback(() => {
     reset({
-      shouldForceRequest: true
+      shouldForceRequest: true,
+      shouldResetColumns: getBooleanFF('platform.linking-platform.datasource-assets_update_refresh_button_dt3qk') && datasourceId === ASSETS_LIST_OF_LINKS_DATASOURCE_ID
     });
-  }, [reset]);
+  }, [reset, datasourceId]);
   const onRefresh = useCallback(() => {
     fireEvent('ui.button.clicked.sync', {
       extensionKey,

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

@@ -2,13 +2,14 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 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 React, { useCallback, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, 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 { useDatasourceAnalyticsEvents } from '../../../../../analytics';
 import { dateRangeMessages } from './messages';
 import { PopupComponent } from './PopupComponent';
 import { CustomDateWrapper, CustomDropdown, CustomDropdownItem, DatePickersWrapper, DateRangeErrorMessage, SelectDateRangeButton } from './styled';
@@ -18,7 +19,9 @@ var dateRangeValues = ['anyTime', 'today', 'yesterday', 'past7Days', 'past30Days
 var defaultOptionValue = 'anyTime';
 export var DateRangePicker = function DateRangePicker(_ref) {
   var onSelectionChange = _ref.onSelectionChange,
-    selection = _ref.selection;
+    selection = _ref.selection,
+    _ref$filterName = _ref.filterName,
+    filterName = _ref$filterName === void 0 ? 'datasource-date-range-picker' : _ref$filterName;
   var _ref2 = selection || {},
     selectedValue = _ref2.value,
     fromDate = _ref2.from,
@@ -28,6 +31,8 @@ export var DateRangePicker = function DateRangePicker(_ref) {
     locale = _useIntl.locale,
     formatMessage = _useIntl.formatMessage,
     formatDate = _useIntl.formatDate;
+  var _useDatasourceAnalyti = useDatasourceAnalyticsEvents(),
+    fireEvent = _useDatasourceAnalyti.fireEvent;
   var _useState = useState(selectedValue),
     _useState2 = _slicedToArray(_useState, 2),
     currentOption = _useState2[0],
@@ -40,11 +45,17 @@ export var DateRangePicker = function DateRangePicker(_ref) {
     _useState6 = _slicedToArray(_useState5, 2),
     customToDate = _useState6[0],
     setCustomToDate = _useState6[1];
-  var _useState7 = useState(false),
+  var _useState7 = useState(undefined),
     _useState8 = _slicedToArray(_useState7, 2),
     isPickerOpen = _useState8[0],
     setIsPickerOpen = _useState8[1];
   var isCustomSelected = currentOption === 'custom';
+  var analyticsPayload = useMemo(function () {
+    return {
+      filterName: filterName,
+      selectionCount: (currentOption !== null && currentOption !== void 0 ? currentOption : defaultOptionValue) === defaultOptionValue ? 0 : 1
+    };
+  }, [filterName, currentOption]);
   var invalidDateRange = useInvalidDateRange(customFromDate, customToDate);
   var handleClickUpdateDateRange = function handleClickUpdateDateRange() {
     onSelectionChange({
@@ -71,10 +82,15 @@ export var DateRangePicker = function DateRangePicker(_ref) {
       return;
     }
     setIsPickerOpen(true);
-    return;
+    fireEvent('ui.dropdown.opened.basicSearchDropdown', analyticsPayload);
   };
+  useEffect(function () {
+    if (isPickerOpen === false) {
+      fireEvent('ui.dropdown.closed.basicSearchDropdown', analyticsPayload);
+    }
+  }, [analyticsPayload, fireEvent, isPickerOpen]);
   return /*#__PURE__*/React.createElement(Popup, {
-    isOpen: isPickerOpen,
+    isOpen: !!isPickerOpen,
     onClose: handlePickerToggle,
     popupComponent: PopupComponent,
     zIndex: layers.modal(),
@@ -154,7 +170,7 @@ export var DateRangePicker = function DateRangePicker(_ref) {
     placement: "bottom-start",
     trigger: function trigger(triggerProps) {
       var labelText = getCurrentOptionLabel(formatDate, formatMessage, selectedValue, toDate, fromDate);
-      var isSelected = !!selectedValue || isPickerOpen;
+      var isSelected = !!selectedValue || !!isPickerOpen;
       return /*#__PURE__*/React.createElement(PopupTrigger, {
         triggerProps: triggerProps,
         isSelected: isSelected,

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

@@ -39,7 +39,8 @@ var BasicFilterContainer = function BasicFilterContainer(_ref) {
     isHydrating: isHydrating
   }), /*#__PURE__*/React.createElement(DateRangePicker, {
     selection: lastModifiedSelection,
-    onSelectionChange: onDateRangePickerChange
+    onSelectionChange: onDateRangePickerChange,
+    filterName: "clol-basic-filter-".concat(CLOLBasicFilters.lastModified)
   }));
 };
 export default BasicFilterContainer;

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

@@ -5,6 +5,7 @@ import { useCallback, useEffect, useRef } from 'react';
 import { css, jsx } from '@emotion/react';
 import { withAnalyticsContext } from '@atlaskit/analytics-next';
 import { IntlMessagesProvider } from '@atlaskit/intl-messages-provider';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { useDatasourceAnalyticsEvents } from '../../analytics';
 import { componentMetadata } from '../../analytics/constants';
 import { startUfoExperience } from '../../analytics/ufoExperiences';
@@ -15,6 +16,7 @@ import { DatasourceExperienceIdProvider, useDatasourceExperienceId } from '../..
 import { useDatasourceTableState } from '../../hooks/useDatasourceTableState';
 import i18nEN from '../../i18n/en';
 import { ScrollableContainerHeight } from '../../ui/issue-like-table/styled';
+import { ASSETS_LIST_OF_LINKS_DATASOURCE_ID } from '../assets-modal';
 import { AccessRequired } from '../common/error-state/access-required';
 import { LoadingError } from '../common/error-state/loading-error';
 import { NoResults } from '../common/error-state/no-results';
@@ -107,9 +109,10 @@ var DatasourceTableViewWithoutAnalytics = function DatasourceTableViewWithoutAna
   });
   var forcedReset = useCallback(function () {
     reset({
-      shouldForceRequest: true
+      shouldForceRequest: true,
+      shouldResetColumns: getBooleanFF('platform.linking-platform.datasource-assets_update_refresh_button_dt3qk') && datasourceId === ASSETS_LIST_OF_LINKS_DATASOURCE_ID
     });
-  }, [reset]);
+  }, [reset, datasourceId]);
   var onRefresh = useCallback(function () {
     fireEvent('ui.button.clicked.sync', {
       extensionKey: extensionKey,

package/dist/types/ui/confluence-search-modal/basic-filters/filters/date-range-picker/index.d.ts

@@ -4,6 +4,7 @@ export type DateRangeSelection = Pick<DateRangeOption, 'value' | 'from' | 'to'>;
 interface DateRangeProps {
     onSelectionChange: (options: DateRangeSelection) => void;
     selection?: DateRangeSelection;
+    filterName?: string;
 }
-export declare const DateRangePicker: ({ onSelectionChange, selection }: DateRangeProps) => JSX.Element;
+export declare const DateRangePicker: ({ onSelectionChange, selection, filterName, }: DateRangeProps) => JSX.Element;
 export {};

package/dist/types-ts4.5/ui/confluence-search-modal/basic-filters/filters/date-range-picker/index.d.ts

@@ -4,6 +4,7 @@ export type DateRangeSelection = Pick<DateRangeOption, 'value' | 'from' | 'to'>;
 interface DateRangeProps {
     onSelectionChange: (options: DateRangeSelection) => void;
     selection?: DateRangeSelection;
+    filterName?: string;
 }
-export declare const DateRangePicker: ({ onSelectionChange, selection }: DateRangeProps) => JSX.Element;
+export declare const DateRangePicker: ({ onSelectionChange, selection, filterName, }: DateRangeProps) => JSX.Element;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/link-datasource",
-	"version": "2.4.0",
+	"version": "2.4.2",
 	"description": "UI Components to support linking platform dataset feature",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -67,9 +67,9 @@
 		"@atlaskit/pragmatic-drag-and-drop-hitbox": "^1.0.0",
 		"@atlaskit/pragmatic-drag-and-drop-react-beautiful-dnd-autoscroll": "^1.1.0",
 		"@atlaskit/pragmatic-drag-and-drop-react-drop-indicator": "^1.1.0",
-		"@atlaskit/primitives": "^8.1.0",
+		"@atlaskit/primitives": "^8.2.0",
 		"@atlaskit/select": "^17.11.0",
-		"@atlaskit/smart-card": "^27.6.0",
+		"@atlaskit/smart-card": "^27.7.0",
 		"@atlaskit/smart-user-picker": "6.9.3",
 		"@atlaskit/spinner": "^16.2.0",
 		"@atlaskit/tag": "^12.3.0",
@@ -158,6 +158,9 @@
 		"platform.linking-platform.datasource-assets_add_version_parameter": {
 			"type": "boolean"
 		},
+		"platform.linking-platform.datasource-assets_update_refresh_button_dt3qk": {
+			"type": "boolean"
+		},
 		"platform.linking-platform.datasource.show-jlol-basic-filters": {
 			"type": "boolean"
 		},