@atlaskit/link-datasource 1.9.1 → 1.10.0

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

@@ -0,0 +1,16 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React from 'react';
+import { components } from '@atlaskit/select';
+import { N40 } from '@atlaskit/theme/colors';
+const popupCustomControlStyles = () => ({
+  display: 'flex',
+  padding: "var(--ds-space-050, 4px)",
+  borderBottom: `solid 1px ${`var(--ds-border, ${N40})`}`
+});
+export const CustomControl = ({
+  children,
+  ...innerProps
+}) => /*#__PURE__*/React.createElement(components.Control, _extends({}, innerProps, {
+  getStyles: popupCustomControlStyles
+}), children);
+export default CustomControl;

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

@@ -0,0 +1,36 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React from 'react';
+import { FormattedMessage } from 'react-intl-next';
+import { Flex, Inline, xcss } from '@atlaskit/primitives';
+import { N40 } from '@atlaskit/theme/colors';
+import { asyncPopupSelectMessages } from './messages';
+const footerContainerStyles = xcss({
+  paddingTop: 'space.050',
+  paddingBottom: 'space.050',
+  borderTop: `${`var(--ds-border, ${N40})`} solid 1px`
+});
+const footerPaginationInfoStyles = xcss({
+  color: 'color.text.subtlest',
+  marginBlock: 'space.100',
+  marginInline: 'space.150'
+});
+const PopupFooter = ({
+  currentDisplayCount,
+  totalCount
+}) => {
+  return /*#__PURE__*/React.createElement(Flex, {
+    testId: "jlol-basic-filter-popup-select--footer",
+    direction: "row",
+    alignItems: "center",
+    justifyContent: "end",
+    xcss: footerContainerStyles
+  }, /*#__PURE__*/React.createElement(Inline, {
+    xcss: footerPaginationInfoStyles
+  }, /*#__PURE__*/React.createElement(FormattedMessage, _extends({}, asyncPopupSelectMessages.paginationDetails, {
+    values: {
+      currentDisplayCount,
+      totalCount
+    }
+  }))));
+};
+export default PopupFooter;

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

@@ -0,0 +1,74 @@
+import React from 'react';
+import Avatar from '@atlaskit/avatar';
+import Lozenge from '@atlaskit/lozenge';
+import { Box, Flex, xcss } from '@atlaskit/primitives';
+const commonLabelStyles = xcss({
+  overflow: 'hidden',
+  textOverflow: 'ellipsis'
+});
+const avatarOptionLabelStyles = xcss({
+  marginLeft: 'space.050'
+});
+const IconOptionLabel = ({
+  data
+}) => {
+  const {
+    label,
+    icon: avatar,
+    value
+  } = data;
+  const avatarOptionLabelData = {
+    label,
+    avatar,
+    value,
+    optionType: 'avatarLabel',
+    isSquare: true
+  };
+  return /*#__PURE__*/React.createElement(AvatarOptionLabel, {
+    data: avatarOptionLabelData,
+    testId: "jlol-basic-filter-popup-select-option--icon-label"
+  });
+};
+const LozengeOptionLabel = ({
+  data
+}) => {
+  return /*#__PURE__*/React.createElement(Lozenge, {
+    isBold: data.isBold,
+    appearance: data.appearance,
+    testId: "jlol-basic-filter-popup-select-option--lozenge"
+  }, /*#__PURE__*/React.createElement(Box, {
+    xcss: [commonLabelStyles]
+  }, data.label));
+};
+const AvatarOptionLabel = ({
+  data,
+  testId
+}) => {
+  return /*#__PURE__*/React.createElement(Flex, {
+    alignItems: "center",
+    testId: testId || 'jlol-basic-filter-popup-select-option--avatar'
+  }, /*#__PURE__*/React.createElement(Avatar, {
+    appearance: data.isSquare ? 'square' : 'circle',
+    src: data.avatar,
+    size: "xsmall"
+  }), /*#__PURE__*/React.createElement(Box, {
+    xcss: [commonLabelStyles, avatarOptionLabelStyles],
+    testId: "nidhin"
+  }, data.label));
+};
+const formatOptionLabel = data => {
+  if (data.optionType === 'lozengeLabel') {
+    return /*#__PURE__*/React.createElement(LozengeOptionLabel, {
+      data: data
+    });
+  }
+  if (data.optionType === 'avatarLabel') {
+    return /*#__PURE__*/React.createElement(AvatarOptionLabel, {
+      data: data
+    });
+  }
+  return /*#__PURE__*/React.createElement(IconOptionLabel, {
+    data: data
+  });
+};
+export default formatOptionLabel;

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

@@ -0,0 +1,91 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { useIntl } from 'react-intl-next';
+import { CheckboxOption, PopupSelect } from '@atlaskit/select';
+import { useFieldValues } from '../../hooks/useFieldValues';
+import CustomControl from './control';
+import PopupFooter from './footer';
+import formatOptionLabel from './formatOptionLabel';
+import { asyncPopupSelectMessages } from './messages';
+import PopupTrigger from './trigger';
+// Needed to disable filtering from react-select
+const noFilterOptions = () => true;
+const AsyncPopupSelect = ({
+  filterType,
+  selection,
+  onSelectionChange = () => {}
+}) => {
+  const {
+    formatMessage
+  } = useIntl();
+  const pickerRef = useRef(null);
+  const [searchTerm, setSearchTerm] = useState('');
+  const [selectedOptions, setSelectedOptions] = useState(selection);
+  const {
+    filterOptions,
+    fetchFilterOptions,
+    totalCount,
+    status
+  } = useFieldValues({
+    filterType
+  });
+  const handleInputChange = useCallback((searchString, actionMeta) => {
+    if (actionMeta.action === 'input-change' && searchString !== searchTerm) {
+      setSearchTerm(searchString);
+    }
+  }, [searchTerm]);
+  const handleOptionSelection = newValue => {
+    setSelectedOptions(newValue);
+    onSelectionChange(newValue);
+  };
+  const handleOpenPopup = useCallback(async () => {
+    if (status === 'empty') {
+      fetchFilterOptions();
+    }
+  }, [fetchFilterOptions, status]);
+  useEffect(() => {
+    if (status === 'resolved') {
+      var _pickerRef$current, _pickerRef$current$se, _pickerRef$current$se2;
+      // necessary to refocus the search input after the loading state
+      pickerRef === null || pickerRef === void 0 ? void 0 : (_pickerRef$current = pickerRef.current) === null || _pickerRef$current === void 0 ? void 0 : (_pickerRef$current$se = _pickerRef$current.selectRef) === null || _pickerRef$current$se === void 0 ? void 0 : (_pickerRef$current$se2 = _pickerRef$current$se.inputRef) === null || _pickerRef$current$se2 === void 0 ? void 0 : _pickerRef$current$se2.focus();
+    }
+  }, [status]);
+  return /*#__PURE__*/React.createElement(PopupSelect, {
+    isMulti: true,
+    maxMenuWidth: 300,
+    minMenuWidth: 300,
+    ref: pickerRef,
+    testId: "jlol-basic-filter-popup-select",
+    inputId: "jlol-basic-filter-popup-select--input",
+    searchThreshold: 0,
+    inputValue: searchTerm,
+    closeMenuOnSelect: false,
+    hideSelectedOptions: false,
+    isLoading: status === 'loading',
+    placeholder: formatMessage(asyncPopupSelectMessages.selectPlaceholder),
+    components: {
+      /* @ts-expect-error - This component has stricter OptionType, hence a temp setup untill its made generic */
+      Option: CheckboxOption,
+      Control: CustomControl
+    },
+    options: filterOptions,
+    value: selectedOptions,
+    filterOption: noFilterOptions,
+    formatOptionLabel: formatOptionLabel,
+    onChange: handleOptionSelection,
+    onInputChange: handleInputChange,
+    target: ({
+      isOpen,
+      ...triggerProps
+    }) => /*#__PURE__*/React.createElement(PopupTrigger, _extends({}, triggerProps, {
+      filterType: filterType,
+      isSelected: isOpen,
+      onClick: handleOpenPopup
+    })),
+    footer: /*#__PURE__*/React.createElement(PopupFooter, {
+      currentDisplayCount: filterOptions.length,
+      totalCount: totalCount
+    })
+  });
+};
+export default AsyncPopupSelect;

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

@@ -0,0 +1,32 @@
+export const asyncPopupSelectMessages = {
+  selectPlaceholder: {
+    id: 'linkDataSource.basic-filter.dropdown.select.placeholder',
+    description: 'Placeholder text to be displayed for the search input box.',
+    defaultMessage: 'Search'
+  },
+  paginationDetails: {
+    id: 'linkDataSource.basic-filter.footer.pagination-details',
+    description: 'Text to indicate page count and total count information.',
+    defaultMessage: '{currentDisplayCount} of {totalCount}'
+  },
+  projectLabel: {
+    id: 'linkDataSource.basic-filter.project.label',
+    description: 'Label to be displayed for project filter dropdown button.',
+    defaultMessage: 'Project'
+  },
+  statusLabel: {
+    id: 'linkDataSource.basic-filter.status.label',
+    description: 'Label to be displayed for status filter dropdown button.',
+    defaultMessage: 'Status'
+  },
+  issuetypeLabel: {
+    id: 'linkDataSource.basic-filter.issuetype.label',
+    description: 'Label to be displayed for issuetype filter dropdown button.',
+    defaultMessage: 'Type'
+  },
+  assigneeLabel: {
+    id: 'linkDataSource.basic-filter.assignee.label',
+    description: 'Label to be displayed for assignee filter dropdown button.',
+    defaultMessage: 'Assignee'
+  }
+};

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

@@ -0,0 +1,22 @@
+import React, { forwardRef } from 'react';
+import { FormattedMessage } from 'react-intl-next';
+import Button from '@atlaskit/button/standard-button';
+import ChevronDownIcon from '@atlaskit/icon/glyph/chevron-down';
+import { asyncPopupSelectMessages } from './messages';
+const PopupTrigger = /*#__PURE__*/forwardRef(({
+  filterType,
+  isSelected,
+  onClick
+}, ref) => {
+  return /*#__PURE__*/React.createElement(Button, {
+    ref: ref,
+    appearance: "default",
+    isSelected: isSelected,
+    onClick: onClick,
+    testId: `jlol-basic-filter-${filterType}-trigger`,
+    iconAfter: /*#__PURE__*/React.createElement(ChevronDownIcon, {
+      label: ""
+    })
+  }, /*#__PURE__*/React.createElement(FormattedMessage, asyncPopupSelectMessages[`${filterType}Label`]));
+});
+export default PopupTrigger;

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,26 @@
+import React, { useEffect, useState } from 'react';
+import { Flex } from '@atlaskit/primitives';
+import { isValidJql } from '../utils';
+import AsyncPopupSelect from './async-popup-select';
+const availableBasicFilterTypes = ['project', 'issuetype', 'status', 'assignee'];
+const BasicFilterContainer = ({
+  jql
+}) => {
+  const [selection] = useState([]);
+  useEffect(() => {
+    if (isValidJql(jql)) {
+      // hydrate hook call goes in here
+    }
+  }, [jql]);
+  const handleSelectionChange = () => {};
+  return /*#__PURE__*/React.createElement(Flex, {
+    gap: "space.100",
+    testId: "jlol-basic-filter-container"
+  }, availableBasicFilterTypes.map(filter => /*#__PURE__*/React.createElement(AsyncPopupSelect, {
+    filterType: filter,
+    key: filter,
+    selection: selection,
+    onSelectionChange: handleSelectionChange
+  })));
+};
+export default BasicFilterContainer;

package/dist/es2019/ui/jira-issues-modal/basic-filters/utils/index.js

@@ -0,0 +1,5 @@
+import { JastBuilder } from '@atlaskit/jql-ast';
+export const isValidJql = jql => {
+  const jast = new JastBuilder().build(jql);
+  return jast.errors.length === 0;
+};

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

@@ -4,10 +4,10 @@ import { css, jsx } from '@emotion/react';
 import { useIntl } from 'react-intl-next';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { useDatasourceAnalyticsEvents } from '../../../analytics';
+import { BasicFilters } from '../basic-filters';
 import { BasicSearchInput } from '../basic-search-input';
 import { JiraJQLEditor } from '../jql-editor';
 import { ModeSwitcher } from '../mode-switcher';
-import { BasicFilters } from './basic-filters';
 import { buildJQL } from './buildJQL';
 import { modeSwitcherMessages } from './messages';
 const inputContainerStyles = css({
@@ -92,7 +92,9 @@ export const JiraSearchContainer = props => {
     onChange: handleBasicSearchChange,
     onSearch: handleSearch,
     searchTerm: basicSearchTerm
-  }), showBasicFilters && jsx(BasicFilters, null)), currentSearchMethod === 'jql' && jsx(JiraJQLEditor, {
+  }), showBasicFilters && jsx(BasicFilters, {
+    jql: jql
+  })), currentSearchMethod === 'jql' && jsx(JiraJQLEditor, {
     cloudId: cloudId || '',
     isSearching: isSearching,
     onChange: onQueryChange,

package/dist/esm/analytics/constants.js

@@ -1,5 +1,5 @@
 export var EVENT_CHANNEL = 'media';
 export var packageMetaData = {
   packageName: "@atlaskit/link-datasource",
-  packageVersion: "1.9.1"
+  packageVersion: "1.10.0"
 };

package/dist/esm/common/zindex.js

@@ -1,2 +1,4 @@
+import { layers } from '@atlaskit/theme/constants';
 export var stickyTableHeadersIndex = 10;
-export var siteSelectorIndex = stickyTableHeadersIndex + 1;
+export var siteSelectorIndex = stickyTableHeadersIndex + 1;
+export var aboveModal = layers.modal() + 1;

package/dist/esm/ui/assets-modal/modal/index.js

@@ -225,7 +225,7 @@ var analyticsContextAttributes = {
 };
 var analyticsContextData = {
   packageName: "@atlaskit/link-datasource",
-  packageVersion: "1.9.1",
+  packageVersion: "1.10.0",
   source: 'datasourceConfigModal'
 };
 var contextData = _objectSpread(_objectSpread({}, analyticsContextData), {}, {

package/dist/esm/ui/jira-issues-modal/basic-filters/hooks/useFieldValues.js

@@ -0,0 +1,68 @@
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+import { useState } from 'react';
+import { request } from '@atlaskit/linking-common';
+// TODO: https://product-fabric.atlassian.net/browse/EDM-8118
+export var useFieldValues = function useFieldValues(_ref) {
+  var filterType = _ref.filterType;
+  var _useState = useState([]),
+    _useState2 = _slicedToArray(_useState, 2),
+    filterOptions = _useState2[0],
+    setFilterOptions = _useState2[1];
+  var _useState3 = useState(100),
+    _useState4 = _slicedToArray(_useState3, 1),
+    totalCount = _useState4[0];
+  var _useState5 = useState('empty'),
+    _useState6 = _slicedToArray(_useState5, 2),
+    status = _useState6[0],
+    setStatus = _useState6[1];
+  var fetchFilterOptions = /*#__PURE__*/function () {
+    var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+      var _yield$request, data;
+      return _regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            _context.prev = 0;
+            setStatus('loading');
+            _context.next = 4;
+            return request('post', '/gateway/api/graphql', {
+              operationName: 'fieldValues',
+              variables: {
+                jqlTerm: filterType
+              }
+            }, {
+              'Content-Type': 'application/json',
+              'X-ExperimentalApi': 'JiraJqlBuilder'
+            });
+          case 4:
+            _yield$request = _context.sent;
+            data = _yield$request.data;
+            if (data) {
+              setFilterOptions(data);
+              setStatus('resolved');
+            }
+            _context.next = 13;
+            break;
+          case 9:
+            _context.prev = 9;
+            _context.t0 = _context["catch"](0);
+            setStatus('error');
+            return _context.abrupt("return", setFilterOptions([]));
+          case 13:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee, null, [[0, 9]]);
+    }));
+    return function fetchFilterOptions() {
+      return _ref2.apply(this, arguments);
+    };
+  }();
+  return {
+    filterOptions: filterOptions,
+    fetchFilterOptions: fetchFilterOptions,
+    totalCount: totalCount,
+    status: status
+  };
+};

package/dist/esm/ui/jira-issues-modal/basic-filters/hooks/useHydrateJqlQuery.js

@@ -0,0 +1,6 @@
+export var useHydrateJqlQuery = function useHydrateJqlQuery() {
+  return {
+    // TODO: https://product-fabric.atlassian.net/browse/EDM-8119
+    hydratedFields: {}
+  };
+};

package/dist/esm/ui/jira-issues-modal/basic-filters/hooks/useIsComplexQuery.js

@@ -0,0 +1,6 @@
+export var useIsComplexQuery = function useIsComplexQuery() {
+  return {
+    // https://product-fabric.atlassian.net/browse/EDM-8103
+    isComplexQuery: false
+  };
+};

package/dist/esm/ui/jira-issues-modal/basic-filters/ui/async-popup-select/control.js

@@ -0,0 +1,21 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["children"];
+import React from 'react';
+import { components } from '@atlaskit/select';
+import { N40 } from '@atlaskit/theme/colors';
+var popupCustomControlStyles = function popupCustomControlStyles() {
+  return {
+    display: 'flex',
+    padding: "var(--ds-space-050, 4px)",
+    borderBottom: "solid 1px ".concat("var(--ds-border, ".concat(N40, ")"))
+  };
+};
+export var CustomControl = function CustomControl(_ref) {
+  var children = _ref.children,
+    innerProps = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/React.createElement(components.Control, _extends({}, innerProps, {
+    getStyles: popupCustomControlStyles
+  }), children);
+};
+export default CustomControl;

package/dist/esm/ui/jira-issues-modal/basic-filters/ui/async-popup-select/footer.js

@@ -0,0 +1,35 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React from 'react';
+import { FormattedMessage } from 'react-intl-next';
+import { Flex, Inline, xcss } from '@atlaskit/primitives';
+import { N40 } from '@atlaskit/theme/colors';
+import { asyncPopupSelectMessages } from './messages';
+var footerContainerStyles = xcss({
+  paddingTop: 'space.050',
+  paddingBottom: 'space.050',
+  borderTop: "".concat("var(--ds-border, ".concat(N40, ")"), " solid 1px")
+});
+var footerPaginationInfoStyles = xcss({
+  color: 'color.text.subtlest',
+  marginBlock: 'space.100',
+  marginInline: 'space.150'
+});
+var PopupFooter = function PopupFooter(_ref) {
+  var currentDisplayCount = _ref.currentDisplayCount,
+    totalCount = _ref.totalCount;
+  return /*#__PURE__*/React.createElement(Flex, {
+    testId: "jlol-basic-filter-popup-select--footer",
+    direction: "row",
+    alignItems: "center",
+    justifyContent: "end",
+    xcss: footerContainerStyles
+  }, /*#__PURE__*/React.createElement(Inline, {
+    xcss: footerPaginationInfoStyles
+  }, /*#__PURE__*/React.createElement(FormattedMessage, _extends({}, asyncPopupSelectMessages.paginationDetails, {
+    values: {
+      currentDisplayCount: currentDisplayCount,
+      totalCount: totalCount
+    }
+  }))));
+};
+export default PopupFooter;

package/dist/esm/ui/jira-issues-modal/basic-filters/ui/async-popup-select/formatOptionLabel.js

@@ -0,0 +1,69 @@
+import React from 'react';
+import Avatar from '@atlaskit/avatar';
+import Lozenge from '@atlaskit/lozenge';
+import { Box, Flex, xcss } from '@atlaskit/primitives';
+var commonLabelStyles = xcss({
+  overflow: 'hidden',
+  textOverflow: 'ellipsis'
+});
+var avatarOptionLabelStyles = xcss({
+  marginLeft: 'space.050'
+});
+var IconOptionLabel = function IconOptionLabel(_ref) {
+  var data = _ref.data;
+  var label = data.label,
+    avatar = data.icon,
+    value = data.value;
+  var avatarOptionLabelData = {
+    label: label,
+    avatar: avatar,
+    value: value,
+    optionType: 'avatarLabel',
+    isSquare: true
+  };
+  return /*#__PURE__*/React.createElement(AvatarOptionLabel, {
+    data: avatarOptionLabelData,
+    testId: "jlol-basic-filter-popup-select-option--icon-label"
+  });
+};
+var LozengeOptionLabel = function LozengeOptionLabel(_ref2) {
+  var data = _ref2.data;
+  return /*#__PURE__*/React.createElement(Lozenge, {
+    isBold: data.isBold,
+    appearance: data.appearance,
+    testId: "jlol-basic-filter-popup-select-option--lozenge"
+  }, /*#__PURE__*/React.createElement(Box, {
+    xcss: [commonLabelStyles]
+  }, data.label));
+};
+var AvatarOptionLabel = function AvatarOptionLabel(_ref3) {
+  var data = _ref3.data,
+    testId = _ref3.testId;
+  return /*#__PURE__*/React.createElement(Flex, {
+    alignItems: "center",
+    testId: testId || 'jlol-basic-filter-popup-select-option--avatar'
+  }, /*#__PURE__*/React.createElement(Avatar, {
+    appearance: data.isSquare ? 'square' : 'circle',
+    src: data.avatar,
+    size: "xsmall"
+  }), /*#__PURE__*/React.createElement(Box, {
+    xcss: [commonLabelStyles, avatarOptionLabelStyles],
+    testId: "nidhin"
+  }, data.label));
+};
+var formatOptionLabel = function formatOptionLabel(data) {
+  if (data.optionType === 'lozengeLabel') {
+    return /*#__PURE__*/React.createElement(LozengeOptionLabel, {
+      data: data
+    });
+  }
+  if (data.optionType === 'avatarLabel') {
+    return /*#__PURE__*/React.createElement(AvatarOptionLabel, {
+      data: data
+    });
+  }
+  return /*#__PURE__*/React.createElement(IconOptionLabel, {
+    data: data
+  });
+};
+export default formatOptionLabel;