@atlaskit/link-datasource 3.9.0 → 3.10.0

package/dist/es2019/ui/issue-like-table/edit-type/icon/index.js

@@ -0,0 +1,94 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React, { useEffect, useState } from 'react';
+import { ActionOperationStatus } from '@atlaskit/linking-types';
+// FilterOptionOption is used in the filterOption function which is part of the public API, but the type itself is not exported
+// eslint-disable-next-line import/no-extraneous-dependencies,no-restricted-imports
+
+import Select from '@atlaskit/select';
+import { SharedIconComponent } from '../../shared-components/icon';
+/**
+ * Should be gated by FF rollout of platform-datasources-enable-two-way-sync-priority
+ */
+const PriorityEditType = props => {
+  var _currentValue$values;
+  const {
+    currentValue,
+    executeFetch
+  } = props;
+  const {
+    options,
+    isLoading
+  } = usePriorityOptions(currentValue, executeFetch);
+  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Select, _extends({}, props, {
+    testId: "inline-edit-priority",
+    autoFocus: true,
+    defaultMenuIsOpen: true,
+    blurInputOnSelect: true,
+    getOptionValue: option => option.label || '',
+    options: options,
+    isLoading: isLoading,
+    defaultValue: currentValue === null || currentValue === void 0 ? void 0 : (_currentValue$values = currentValue.values) === null || _currentValue$values === void 0 ? void 0 : _currentValue$values[0],
+    filterOption: filterOption,
+    formatOptionLabel: ({
+      source,
+      label,
+      text
+    }) => /*#__PURE__*/React.createElement(SharedIconComponent, {
+      iconUrl: source,
+      text: text,
+      label: label,
+      testId: `inline-edit-priority-option-${label}`
+    }),
+    onChange: e => props.setEditValues({
+      type: 'icon',
+      values: e ? [e] : []
+    })
+  })));
+};
+const filterOption = (option, inputValue) => option.label.toLowerCase().includes(inputValue.toLowerCase());
+const usePriorityOptions = (currentValue, executeFetch) => {
+  const [{
+    options,
+    isLoading
+  }, setOptions] = useState({
+    isLoading: true,
+    options: []
+  });
+  useEffect(() => {
+    let isMounted = true;
+    loadOptions(currentValue, executeFetch).then(options => {
+      if (isMounted) {
+        setOptions({
+          isLoading: false,
+          options
+        });
+      }
+    });
+    return () => {
+      isMounted = false;
+    };
+  }, [currentValue, executeFetch]);
+  return {
+    options,
+    isLoading
+  };
+};
+
+/**
+ * Load options for the select
+ */
+const loadOptions = async (_currentValue, executeFetch) => {
+  if (!executeFetch) {
+    return [];
+  }
+  const {
+    operationStatus,
+    entities
+  } = await executeFetch({});
+  if (operationStatus === ActionOperationStatus.SUCCESS && entities) {
+    // Map entities here if the backend type is different from the type required by the select
+    return entities;
+  }
+  return [];
+};
+export default PriorityEditType;

package/dist/es2019/ui/issue-like-table/edit-type/index.js

@@ -1,6 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
 import { fg } from '@atlaskit/platform-feature-flags';
+import PriorityEditType from './icon';
 import StatusEditType from './status';
 import TextEditType, { toTextValue } from './text';
 
@@ -24,27 +25,39 @@ export const editType = ({
           id: ACTIVE_INLINE_EDIT_ID
         }))
       };
-    case 'status':
+    case 'icon':
       return {
         defaultValue: toTextValue(defaultValue),
         editView: ({
+          value,
           ...fieldProps
-        }) => /*#__PURE__*/React.createElement(StatusEditType, _extends({}, fieldProps, {
+        }) => /*#__PURE__*/React.createElement(PriorityEditType, _extends({}, fieldProps, {
           currentValue: currentValue,
           setEditValues: setEditValues,
           id: ACTIVE_INLINE_EDIT_ID,
           executeFetch: executeFetch
         }))
       };
-    default:
+    case 'status':
       return {
-        defaultValue: '',
-        editView: () => /*#__PURE__*/React.createElement(React.Fragment, null)
+        defaultValue: toTextValue(defaultValue),
+        editView: ({
+          ...fieldProps
+        }) => /*#__PURE__*/React.createElement(StatusEditType, _extends({}, fieldProps, {
+          currentValue: currentValue,
+          setEditValues: setEditValues,
+          id: ACTIVE_INLINE_EDIT_ID,
+          executeFetch: executeFetch
+        }))
       };
   }
+  return {
+    defaultValue: '',
+    editView: () => /*#__PURE__*/React.createElement(React.Fragment, null)
+  };
 };
 export const isEditTypeSupported = type => {
-  const supportedEditType = fg('platform-datasources-enable-two-way-sync-statuses') ? ['string', 'status'] : ['string'];
+  const supportedEditType = ['string', ...(fg('platform-datasources-enable-two-way-sync-statuses') ? ['status'] : []), ...(fg('platform-datasources-enable-two-way-sync-priority') ? ['icon'] : [])];
   return supportedEditType.includes(type);
 };
 export const isEditTypeSelectable = type => {

package/dist/es2019/ui/issue-like-table/edit-type/status/index.js

@@ -5,6 +5,7 @@ import Lozenge from '@atlaskit/lozenge';
 import Select from '@atlaskit/select';
 import { failUfoExperience, succeedUfoExperience } from '../../../../analytics/ufoExperiences';
 import { useDatasourceExperienceId } from '../../../../contexts/datasource-experience-id';
+import { useDatasourceTableFlag } from '../../../../hooks/useDatasourceTableFlag';
 import { InlineEditUFOExperience } from '../../table-cell-content/inline-edit';
 const StatusEditType = props => {
   var _currentValue$values;
@@ -16,7 +17,9 @@ const StatusEditType = props => {
     options,
     isLoading,
     hasFailed
-  } = useStatusOptions(currentValue, executeFetch);
+  } = useStatusOptions({
+    executeFetch
+  });
   const experienceId = useDatasourceExperienceId();
   useEffect(() => {
     if (!experienceId) {
@@ -53,7 +56,10 @@ const StatusEditType = props => {
   }));
 };
 const filterOption = (option, inputValue) => option.data.text.toLowerCase().includes(inputValue.toLowerCase());
-const useStatusOptions = (currentValue, executeFetch) => {
+const useStatusOptions = ({
+  fetchInputs,
+  executeFetch
+}) => {
   const [{
     options,
     isLoading,
@@ -63,9 +69,14 @@ const useStatusOptions = (currentValue, executeFetch) => {
     options: [],
     hasFailed: false
   });
+  const {
+    showErrorFlag
+  } = useDatasourceTableFlag({
+    isFetchAction: true
+  });
   useEffect(() => {
     let isMounted = true;
-    loadOptions(currentValue, executeFetch).then(options => {
+    loadOptions(fetchInputs, executeFetch).then(options => {
       if (isMounted) {
         setOptions({
           isLoading: false,
@@ -74,6 +85,7 @@ const useStatusOptions = (currentValue, executeFetch) => {
         });
       }
     }).catch(err => {
+      showErrorFlag();
       setOptions({
         isLoading: false,
         options: [],
@@ -83,16 +95,16 @@ const useStatusOptions = (currentValue, executeFetch) => {
     return () => {
       isMounted = false;
     };
-  }, [currentValue, executeFetch]);
+  }, [fetchInputs, executeFetch, showErrorFlag]);
   return {
     options,
     isLoading,
     hasFailed
   };
 };
-const loadOptions = async (currentValue, executeFetch) => {
+const loadOptions = async (fetchInputs = {}, executeFetch) => {
   if (executeFetch) {
-    const result = await executeFetch({});
+    const result = await executeFetch(fetchInputs);
     const {
       operationStatus,
       entities

package/dist/es2019/ui/issue-like-table/messages.js

@@ -20,6 +20,16 @@ export const issueLikeTableMessages = defineMessages({
     description: 'Generic error message title shown when updating issue field fails',
     defaultMessage: 'Something went wrong'
   },
+  fetchActionErrorGenericDescription: {
+    id: 'linkDataSource.issue-line-table.fetch-action-error-generic-description',
+    description: 'Generic error message description shown when fetching inline edit dropdown field fails',
+    defaultMessage: 'Wait a few minutes, then try again. Check your project settings or contact support if this keeps happening.'
+  },
+  fetchActionErrorGenericTitle: {
+    id: 'linkDataSource.issue-line-table.fetch-action-error-generic-title',
+    description: 'Generic error message title shown when fetching inline edit dropdown field fails',
+    defaultMessage: 'We’re having trouble fetching options'
+  },
   wrapText: {
     id: 'linkDataSource.issue-line-table.wrap-text',
     description: 'Table header Dropdown item for making whole column to wrap text',

package/dist/es2019/ui/issue-like-table/render-type/icon/index.js

@@ -18,6 +18,11 @@ const textWrapperStyles = xcss({
 });
 export const ICON_TYPE_TEST_ID = 'link-datasource-render-type--icon';
 export const ICON_TYPE_TEXT_TEST_ID = `${ICON_TYPE_TEST_ID}-text`;
+
+/**
+ * @deprecated: To be cleaned up and replaced with new-icon after
+ * `platform-datasources-enable-two-way-sync-priority` rollout.
+ */
 const IconRenderType = ({
   label,
   text,

package/dist/es2019/ui/issue-like-table/render-type/index.js

@@ -1,9 +1,11 @@
 import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
+import { fg } from '@atlaskit/platform-feature-flags';
 import BooleanRenderType from './boolean';
 import DateTimeRenderType, { getFormattedDate } from './date-time';
 import IconRenderType from './icon';
 import LinkRenderType from './link';
+import NewIconRenderType from './new-icon';
 import NumberRenderType from './number';
 import RichTextRenderType, { parseRichText } from './richtext';
 import StatusRenderType from './status';
@@ -60,7 +62,7 @@ export const renderType = item => {
         display: "datetime"
       }));
     case 'icon':
-      return item.values.map(iconValue => /*#__PURE__*/React.createElement(IconRenderType, iconValue));
+      return fg('platform-datasources-enable-two-way-sync-priority') ? item.values.map(iconValue => /*#__PURE__*/React.createElement(NewIconRenderType, iconValue)) : item.values.map(iconValue => /*#__PURE__*/React.createElement(IconRenderType, iconValue));
     case 'link':
       return item.values.map(linkValue => /*#__PURE__*/React.createElement(LinkRenderType, _extends({
         key: linkValue === null || linkValue === void 0 ? void 0 : linkValue.url

package/dist/es2019/ui/issue-like-table/render-type/new-icon/index.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import { SharedIconComponent } from '../../shared-components/icon';
+export const ICON_TYPE_TEST_ID = 'link-datasource-render-type--icon';
+export const ICON_TYPE_TEXT_TEST_ID = `${ICON_TYPE_TEST_ID}-text`;
+const IconRenderType = ({
+  label,
+  text,
+  source,
+  testId = ICON_TYPE_TEST_ID
+}) => {
+  return /*#__PURE__*/React.createElement(SharedIconComponent, {
+    testId: testId,
+    iconUrl: source,
+    label: label,
+    text: text
+  });
+};
+export default IconRenderType;

package/dist/es2019/ui/issue-like-table/shared-components/icon/index.js

@@ -0,0 +1,36 @@
+import React from 'react';
+import { Box, Flex, Inline, xcss } from '@atlaskit/primitives';
+const labelStyles = xcss({
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+  width: '100%'
+});
+/**
+ * Renders a icon and label.
+ * If the text is undefined, render the capitalised label.
+ */
+export function SharedIconComponent({
+  iconUrl,
+  label,
+  text,
+  testId
+}) {
+  const displayText = text === undefined || text === '' ? label ? label.charAt(0).toUpperCase() + label.slice(1) : undefined : text;
+  return /*#__PURE__*/React.createElement(Flex, {
+    gap: "space.100",
+    alignItems: "center",
+    testId: testId
+  }, /*#__PURE__*/React.createElement(Inline, null, /*#__PURE__*/React.createElement("img", {
+    src: iconUrl,
+    alt: label
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+    ,
+    style: {
+      minWidth: '24px',
+      maxWidth: '24px'
+    } // having just width: '24px' shrinks it when table width is reduced
+  })), displayText && /*#__PURE__*/React.createElement(Box, {
+    xcss: labelStyles,
+    testId: `${testId}-text`
+  }, displayText));
+}

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

@@ -11,7 +11,6 @@ import styled from '@emotion/styled';
 import { FormattedMessage, useIntl } from 'react-intl-next';
 import Button from '@atlaskit/button';
 import RefreshIcon from '@atlaskit/icon/core/migration/refresh';
-import { fg } from '@atlaskit/platform-feature-flags';
 import { Flex } from '@atlaskit/primitives';
 import { N0, N40, N90 } from '@atlaskit/theme/colors';
 import { ASSETS_LIST_OF_LINKS_DATASOURCE_ID } from '../assets-modal';
@@ -70,7 +69,7 @@ export const TableFooter = ({
   // ensure correct positioning since 'justify-content: space-between' is used).
   return onRefresh || showItemCount ? jsx(FooterWrapper, {
     "data-testid": "table-footer"
-  }, jsx(TopBorderWrapper, null, showItemCount && jsx(Flex, null, datasourceId === ASSETS_LIST_OF_LINKS_DATASOURCE_ID && fg('platform.linking-platform.datasource.limit-total-results_8wqcd') ? jsx(AssetsItemCount, {
+  }, jsx(TopBorderWrapper, null, showItemCount && jsx(Flex, null, datasourceId === ASSETS_LIST_OF_LINKS_DATASOURCE_ID ? jsx(AssetsItemCount, {
     searchCount: itemCount,
     url: url,
     testId: "item-count"

package/dist/esm/hooks/useDatasourceTableFlag.js

@@ -16,7 +16,7 @@ var getErrorReason = function getErrorReason(status) {
       return 'request_failed';
   }
 };
-var getGenericErrorMessage = function getGenericErrorMessage(status) {
+var getExecuteActionErrorMessage = function getExecuteActionErrorMessage(status) {
   switch (status) {
     case 403:
       return {
@@ -30,6 +30,15 @@ var getGenericErrorMessage = function getGenericErrorMessage(status) {
       };
   }
 };
+var getFetchActionErrorMessage = function getFetchActionErrorMessage(status) {
+  switch (status) {
+    default:
+      return {
+        title: /*#__PURE__*/React.createElement(FormattedMessage, issueLikeTableMessages.fetchActionErrorGenericTitle),
+        description: /*#__PURE__*/React.createElement(FormattedMessage, issueLikeTableMessages.fetchActionErrorGenericDescription)
+      };
+  }
+};
 export var useDatasourceTableFlag = function useDatasourceTableFlag(options) {
   var _useFlags = useFlags(),
     showFlag = _useFlags.showFlag;
@@ -45,11 +54,11 @@ export var useDatasourceTableFlag = function useDatasourceTableFlag(options) {
       }),
       id: uuid(),
       isAutoDismiss: true
-    }, getGenericErrorMessage(args === null || args === void 0 ? void 0 : args.status)), args));
+    }, options !== null && options !== void 0 && options.isFetchAction ? getFetchActionErrorMessage(args === null || args === void 0 ? void 0 : args.status) : getExecuteActionErrorMessage(args === null || args === void 0 ? void 0 : args.status)), args));
     fireEvent('ui.error.shown.inlineEdit', {
       reason: getErrorReason(args === null || args === void 0 ? void 0 : args.status)
     });
-  }, [fireEvent, showFlag]);
+  }, [fireEvent, options === null || options === void 0 ? void 0 : options.isFetchAction, showFlag]);
   return {
     showErrorFlag: showErrorFlag
   };

package/dist/esm/state/actions/index.js

@@ -200,12 +200,15 @@ export var useExecuteAtomicAction = function useExecuteAtomicAction(_ref5) {
   var _useDatasourceClientE2 = useDatasourceClientExtension(),
     executeAction = _useDatasourceClientE2.executeAtomicAction,
     invalidateDatasourceDataCacheByAri = _useDatasourceClientE2.invalidateDatasourceDataCacheByAri;
-  var _useDatasourceAnalyti = useDatasourceAnalyticsEvents(),
-    fireEvent = _useDatasourceAnalyti.fireEvent;
-  var _useErrorLogger = useErrorLogger({
+  var loggerProps = useMemo(function () {
+    return {
       integrationKey: integrationKey
-    }),
+    };
+  }, [integrationKey]);
+  var _useErrorLogger = useErrorLogger(loggerProps),
     captureError = _useErrorLogger.captureError;
+  var _useDatasourceAnalyti = useDatasourceAnalyticsEvents(),
+    fireEvent = _useDatasourceAnalyti.fireEvent;
   var execute = useCallback(function (value) {
     if (!schema) {
       throw new Error('No action schema found.');

package/dist/esm/ui/issue-like-table/edit-type/icon/index.js

@@ -0,0 +1,124 @@
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _extends from "@babel/runtime/helpers/extends";
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+import React, { useEffect, useState } from 'react';
+import { ActionOperationStatus } from '@atlaskit/linking-types';
+// FilterOptionOption is used in the filterOption function which is part of the public API, but the type itself is not exported
+// eslint-disable-next-line import/no-extraneous-dependencies,no-restricted-imports
+
+import Select from '@atlaskit/select';
+import { SharedIconComponent } from '../../shared-components/icon';
+/**
+ * Should be gated by FF rollout of platform-datasources-enable-two-way-sync-priority
+ */
+var PriorityEditType = function PriorityEditType(props) {
+  var _currentValue$values;
+  var currentValue = props.currentValue,
+    executeFetch = props.executeFetch;
+  var _usePriorityOptions = usePriorityOptions(currentValue, executeFetch),
+    options = _usePriorityOptions.options,
+    isLoading = _usePriorityOptions.isLoading;
+  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Select, _extends({}, props, {
+    testId: "inline-edit-priority",
+    autoFocus: true,
+    defaultMenuIsOpen: true,
+    blurInputOnSelect: true,
+    getOptionValue: function getOptionValue(option) {
+      return option.label || '';
+    },
+    options: options,
+    isLoading: isLoading,
+    defaultValue: currentValue === null || currentValue === void 0 || (_currentValue$values = currentValue.values) === null || _currentValue$values === void 0 ? void 0 : _currentValue$values[0],
+    filterOption: filterOption,
+    formatOptionLabel: function formatOptionLabel(_ref) {
+      var source = _ref.source,
+        label = _ref.label,
+        text = _ref.text;
+      return /*#__PURE__*/React.createElement(SharedIconComponent, {
+        iconUrl: source,
+        text: text,
+        label: label,
+        testId: "inline-edit-priority-option-".concat(label)
+      });
+    },
+    onChange: function onChange(e) {
+      return props.setEditValues({
+        type: 'icon',
+        values: e ? [e] : []
+      });
+    }
+  })));
+};
+var filterOption = function filterOption(option, inputValue) {
+  return option.label.toLowerCase().includes(inputValue.toLowerCase());
+};
+var usePriorityOptions = function usePriorityOptions(currentValue, executeFetch) {
+  var _useState = useState({
+      isLoading: true,
+      options: []
+    }),
+    _useState2 = _slicedToArray(_useState, 2),
+    _useState2$ = _useState2[0],
+    options = _useState2$.options,
+    isLoading = _useState2$.isLoading,
+    setOptions = _useState2[1];
+  useEffect(function () {
+    var isMounted = true;
+    loadOptions(currentValue, executeFetch).then(function (options) {
+      if (isMounted) {
+        setOptions({
+          isLoading: false,
+          options: options
+        });
+      }
+    });
+    return function () {
+      isMounted = false;
+    };
+  }, [currentValue, executeFetch]);
+  return {
+    options: options,
+    isLoading: isLoading
+  };
+};
+
+/**
+ * Load options for the select
+ */
+var loadOptions = /*#__PURE__*/function () {
+  var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(_currentValue, executeFetch) {
+    var _yield$executeFetch, operationStatus, entities;
+    return _regeneratorRuntime.wrap(function _callee$(_context) {
+      while (1) switch (_context.prev = _context.next) {
+        case 0:
+          if (executeFetch) {
+            _context.next = 2;
+            break;
+          }
+          return _context.abrupt("return", []);
+        case 2:
+          _context.next = 4;
+          return executeFetch({});
+        case 4:
+          _yield$executeFetch = _context.sent;
+          operationStatus = _yield$executeFetch.operationStatus;
+          entities = _yield$executeFetch.entities;
+          if (!(operationStatus === ActionOperationStatus.SUCCESS && entities)) {
+            _context.next = 9;
+            break;
+          }
+          return _context.abrupt("return", entities);
+        case 9:
+          return _context.abrupt("return", []);
+        case 10:
+        case "end":
+          return _context.stop();
+      }
+    }, _callee);
+  }));
+  return function loadOptions(_x, _x2) {
+    return _ref2.apply(this, arguments);
+  };
+}();
+export default PriorityEditType;

package/dist/esm/ui/issue-like-table/edit-type/index.js

@@ -1,7 +1,11 @@
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _objectDestructuringEmpty from "@babel/runtime/helpers/objectDestructuringEmpty";
 import _extends from "@babel/runtime/helpers/extends";
+var _excluded = ["value"];
 import React from 'react';
 import { fg } from '@atlaskit/platform-feature-flags';
+import PriorityEditType from './icon';
 import StatusEditType from './status';
 import TextEditType, { toTextValue } from './text';
 
@@ -25,12 +29,13 @@ export var editType = function editType(_ref) {
           }));
         }
       };
-    case 'status':
+    case 'icon':
       return {
         defaultValue: toTextValue(defaultValue),
         editView: function editView(_ref3) {
-          var fieldProps = _extends({}, (_objectDestructuringEmpty(_ref3), _ref3));
-          return /*#__PURE__*/React.createElement(StatusEditType, _extends({}, fieldProps, {
+          var value = _ref3.value,
+            fieldProps = _objectWithoutProperties(_ref3, _excluded);
+          return /*#__PURE__*/React.createElement(PriorityEditType, _extends({}, fieldProps, {
             currentValue: currentValue,
             setEditValues: setEditValues,
             id: ACTIVE_INLINE_EDIT_ID,
@@ -38,17 +43,29 @@ export var editType = function editType(_ref) {
           }));
         }
       };
-    default:
+    case 'status':
       return {
-        defaultValue: '',
-        editView: function editView() {
-          return /*#__PURE__*/React.createElement(React.Fragment, null);
+        defaultValue: toTextValue(defaultValue),
+        editView: function editView(_ref4) {
+          var fieldProps = _extends({}, (_objectDestructuringEmpty(_ref4), _ref4));
+          return /*#__PURE__*/React.createElement(StatusEditType, _extends({}, fieldProps, {
+            currentValue: currentValue,
+            setEditValues: setEditValues,
+            id: ACTIVE_INLINE_EDIT_ID,
+            executeFetch: executeFetch
+          }));
         }
       };
   }
+  return {
+    defaultValue: '',
+    editView: function editView() {
+      return /*#__PURE__*/React.createElement(React.Fragment, null);
+    }
+  };
 };
 export var isEditTypeSupported = function isEditTypeSupported(type) {
-  var supportedEditType = fg('platform-datasources-enable-two-way-sync-statuses') ? ['string', 'status'] : ['string'];
+  var supportedEditType = ['string'].concat(_toConsumableArray(fg('platform-datasources-enable-two-way-sync-statuses') ? ['status'] : []), _toConsumableArray(fg('platform-datasources-enable-two-way-sync-priority') ? ['icon'] : []));
   return supportedEditType.includes(type);
 };
 export var isEditTypeSelectable = function isEditTypeSelectable(type) {