@atlaskit/link-datasource 3.9.0 → 3.10.0

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

@@ -8,12 +8,15 @@ 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';
 var StatusEditType = function StatusEditType(props) {
   var _currentValue$values;
   var currentValue = props.currentValue,
     executeFetch = props.executeFetch;
-  var _useStatusOptions = useStatusOptions(currentValue, executeFetch),
+  var _useStatusOptions = useStatusOptions({
+      executeFetch: executeFetch
+    }),
     options = _useStatusOptions.options,
     isLoading = _useStatusOptions.isLoading,
     hasFailed = _useStatusOptions.hasFailed;
@@ -61,7 +64,9 @@ var StatusEditType = function StatusEditType(props) {
 var filterOption = function filterOption(option, inputValue) {
   return option.data.text.toLowerCase().includes(inputValue.toLowerCase());
 };
-var useStatusOptions = function useStatusOptions(currentValue, executeFetch) {
+var useStatusOptions = function useStatusOptions(_ref) {
+  var fetchInputs = _ref.fetchInputs,
+    executeFetch = _ref.executeFetch;
   var _useState = useState({
       isLoading: true,
       options: [],
@@ -73,9 +78,13 @@ var useStatusOptions = function useStatusOptions(currentValue, executeFetch) {
     isLoading = _useState2$.isLoading,
     hasFailed = _useState2$.hasFailed,
     setOptions = _useState2[1];
+  var _useDatasourceTableFl = useDatasourceTableFlag({
+      isFetchAction: true
+    }),
+    showErrorFlag = _useDatasourceTableFl.showErrorFlag;
   useEffect(function () {
     var isMounted = true;
-    loadOptions(currentValue, executeFetch).then(function (options) {
+    loadOptions(fetchInputs, executeFetch).then(function (options) {
       if (isMounted) {
         setOptions({
           isLoading: false,
@@ -84,6 +93,7 @@ var useStatusOptions = function useStatusOptions(currentValue, executeFetch) {
         });
       }
     }).catch(function (err) {
+      showErrorFlag();
       setOptions({
         isLoading: false,
         options: [],
@@ -93,7 +103,7 @@ var useStatusOptions = function useStatusOptions(currentValue, executeFetch) {
     return function () {
       isMounted = false;
     };
-  }, [currentValue, executeFetch]);
+  }, [fetchInputs, executeFetch, showErrorFlag]);
   return {
     options: options,
     isLoading: isLoading,
@@ -101,28 +111,35 @@ var useStatusOptions = function useStatusOptions(currentValue, executeFetch) {
   };
 };
 var loadOptions = /*#__PURE__*/function () {
-  var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(currentValue, executeFetch) {
-    var result, operationStatus, entities;
+  var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+    var fetchInputs,
+      executeFetch,
+      result,
+      operationStatus,
+      entities,
+      _args = arguments;
     return _regeneratorRuntime.wrap(function _callee$(_context) {
       while (1) switch (_context.prev = _context.next) {
         case 0:
+          fetchInputs = _args.length > 0 && _args[0] !== undefined ? _args[0] : {};
+          executeFetch = _args.length > 1 ? _args[1] : undefined;
           if (!executeFetch) {
-            _context.next = 9;
+            _context.next = 11;
             break;
           }
-          _context.next = 3;
-          return executeFetch({});
-        case 3:
+          _context.next = 5;
+          return executeFetch(fetchInputs);
+        case 5:
           result = _context.sent;
           operationStatus = result.operationStatus, entities = result.entities;
           if (!(operationStatus === ActionOperationStatus.FAILURE)) {
-            _context.next = 7;
+            _context.next = 9;
             break;
           }
           throw new Error('Failed to fetch status options');
-        case 7:
+        case 9:
           if (!entities) {
-            _context.next = 9;
+            _context.next = 11;
             break;
           }
           return _context.abrupt("return", entities.map(function (entity) {
@@ -133,16 +150,16 @@ var loadOptions = /*#__PURE__*/function () {
               transitionId: entity.transitionId
             };
           }));
-        case 9:
+        case 11:
           return _context.abrupt("return", []);
-        case 10:
+        case 12:
         case "end":
           return _context.stop();
       }
     }, _callee);
   }));
-  return function loadOptions(_x, _x2) {
-    return _ref.apply(this, arguments);
+  return function loadOptions() {
+    return _ref2.apply(this, arguments);
   };
 }();
 export default StatusEditType;

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

@@ -20,6 +20,16 @@ export var 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/esm/ui/issue-like-table/render-type/icon/index.js

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

package/dist/esm/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';
@@ -65,7 +67,9 @@ export var renderType = function renderType(item) {
         });
       });
     case 'icon':
-      return item.values.map(function (iconValue) {
+      return fg('platform-datasources-enable-two-way-sync-priority') ? item.values.map(function (iconValue) {
+        return /*#__PURE__*/React.createElement(NewIconRenderType, iconValue);
+      }) : item.values.map(function (iconValue) {
         return /*#__PURE__*/React.createElement(IconRenderType, iconValue);
       });
     case 'link':

package/dist/esm/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 var ICON_TYPE_TEST_ID = 'link-datasource-render-type--icon';
+export var ICON_TYPE_TEXT_TEST_ID = "".concat(ICON_TYPE_TEST_ID, "-text");
+var IconRenderType = function IconRenderType(_ref) {
+  var label = _ref.label,
+    text = _ref.text,
+    source = _ref.source,
+    _ref$testId = _ref.testId,
+    testId = _ref$testId === void 0 ? ICON_TYPE_TEST_ID : _ref$testId;
+  return /*#__PURE__*/React.createElement(SharedIconComponent, {
+    testId: testId,
+    iconUrl: source,
+    label: label,
+    text: text
+  });
+};
+export default IconRenderType;

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

@@ -0,0 +1,35 @@
+import React from 'react';
+import { Box, Flex, Inline, xcss } from '@atlaskit/primitives';
+var 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(_ref) {
+  var iconUrl = _ref.iconUrl,
+    label = _ref.label,
+    text = _ref.text,
+    testId = _ref.testId;
+  var 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: "".concat(testId, "-text")
+  }, displayText));
+}

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

@@ -12,7 +12,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';
@@ -73,7 +72,7 @@ export var TableFooter = function TableFooter(_ref) {
   // 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/types/hooks/useDatasourceTableFlag.d.ts

@@ -1,6 +1,7 @@
 import { type CreateFlagArgs } from '@atlaskit/flag';
 interface DatasourceTableFlagOptions {
     url?: string;
+    isFetchAction?: boolean;
 }
 export declare const useDatasourceTableFlag: (options?: DatasourceTableFlagOptions) => {
     showErrorFlag: (args?: Partial<CreateFlagArgs> & {

package/dist/types/ui/issue-like-table/edit-type/icon/index.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import { type FieldProps } from '@atlaskit/form';
+import { type ExecuteFetch } from '../../../../state/actions';
+import type { DatasourceTypeWithOnlyTypeValues, DatasourceTypeWithOnlyValues } from '../../types';
+interface Props extends Omit<FieldProps<string>, 'value'> {
+    currentValue: DatasourceTypeWithOnlyTypeValues<'icon'>;
+    setEditValues: React.Dispatch<React.SetStateAction<DatasourceTypeWithOnlyValues>>;
+    executeFetch?: ExecuteFetch;
+}
+/**
+ * Should be gated by FF rollout of platform-datasources-enable-two-way-sync-priority
+ */
+declare const PriorityEditType: (props: Props) => JSX.Element;
+export default PriorityEditType;

package/dist/types/ui/issue-like-table/edit-type/index.d.ts

@@ -1,12 +1,13 @@
 import React from 'react';
 import type InlineEdit from '@atlaskit/inline-edit';
 import type { DatasourceType } from '@atlaskit/linking-types';
+import { type ExecuteFetch } from '../../../state/actions';
 import { type DatasourceTypeWithOnlyValues } from '../types';
 export declare const editType: ({ defaultValue, currentValue, setEditValues, executeFetch, }: {
     defaultValue: DatasourceTypeWithOnlyValues;
     currentValue: DatasourceTypeWithOnlyValues;
     setEditValues: React.Dispatch<React.SetStateAction<DatasourceTypeWithOnlyValues>>;
-    executeFetch?: (<E>(inputs: any) => Promise<E>) | undefined;
+    executeFetch?: ExecuteFetch | undefined;
 }) => Pick<React.ComponentProps<typeof InlineEdit>, 'defaultValue' | 'editView'>;
 export declare const isEditTypeSupported: (type: DatasourceType['type']) => boolean;
 export declare const isEditTypeSelectable: (type: DatasourceType['type']) => boolean;

package/dist/types/ui/issue-like-table/messages.d.ts

@@ -19,6 +19,16 @@ export declare const issueLikeTableMessages: {
         description: string;
         defaultMessage: string;
     };
+    fetchActionErrorGenericDescription: {
+        id: string;
+        description: string;
+        defaultMessage: string;
+    };
+    fetchActionErrorGenericTitle: {
+        id: string;
+        description: string;
+        defaultMessage: string;
+    };
     wrapText: {
         id: string;
         description: string;

package/dist/types/ui/issue-like-table/render-type/icon/index.d.ts

@@ -5,5 +5,9 @@ interface IconProps extends Icon {
 }
 export declare const ICON_TYPE_TEST_ID = "link-datasource-render-type--icon";
 export declare const ICON_TYPE_TEXT_TEST_ID = "link-datasource-render-type--icon-text";
+/**
+ * @deprecated: To be cleaned up and replaced with new-icon after
+ * `platform-datasources-enable-two-way-sync-priority` rollout.
+ */
 declare const IconRenderType: ({ label, text, source, testId }: IconProps) => JSX.Element;
 export default IconRenderType;

package/dist/types/ui/issue-like-table/render-type/new-icon/index.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { type Icon } from '@atlaskit/linking-types';
+interface IconProps extends Icon {
+    testId?: string;
+}
+export declare const ICON_TYPE_TEST_ID = "link-datasource-render-type--icon";
+export declare const ICON_TYPE_TEXT_TEST_ID = "link-datasource-render-type--icon-text";
+declare const IconRenderType: ({ label, text, source, testId }: IconProps) => JSX.Element;
+export default IconRenderType;

package/dist/types/ui/issue-like-table/shared-components/icon/index.d.ts

@@ -0,0 +1,23 @@
+/// <reference types="react" />
+interface SharedIconComponentProps {
+    /**
+     * URL or SVG for the priority icon
+     */
+    iconUrl: string;
+    /**
+     * Text that labels the icon. Will not be capitalised.
+     */
+    text?: string;
+    /**
+     * Label.
+     * Used for icon alt.
+     */
+    label?: string;
+    testId: string;
+}
+/**
+ * Renders a icon and label.
+ * If the text is undefined, render the capitalised label.
+ */
+export declare function SharedIconComponent({ iconUrl, label, text, testId }: SharedIconComponentProps): JSX.Element;
+export {};

package/dist/types/ui/issue-like-table/types.d.ts

@@ -9,6 +9,13 @@ export type DatasourceTypeWithOnlyValues = {
         }>['value'][];
     };
 }[DatasourceType['type']];
+/** Object typing a list of data objects for type K */
+export type DatasourceTypeWithOnlyTypeValues<K> = {
+    type: K;
+    values: Extract<DatasourceType, {
+        type: K;
+    }>['value'][];
+};
 export type TableViewPropsRenderType = (item: DatasourceTypeWithOnlyValues) => React.ReactNode;
 export interface ColumnSizesMap {
     [key: string]: number;

package/dist/types-ts4.5/hooks/useDatasourceTableFlag.d.ts

@@ -1,6 +1,7 @@
 import { type CreateFlagArgs } from '@atlaskit/flag';
 interface DatasourceTableFlagOptions {
     url?: string;
+    isFetchAction?: boolean;
 }
 export declare const useDatasourceTableFlag: (options?: DatasourceTableFlagOptions) => {
     showErrorFlag: (args?: Partial<CreateFlagArgs> & {

package/dist/types-ts4.5/ui/issue-like-table/edit-type/icon/index.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import { type FieldProps } from '@atlaskit/form';
+import { type ExecuteFetch } from '../../../../state/actions';
+import type { DatasourceTypeWithOnlyTypeValues, DatasourceTypeWithOnlyValues } from '../../types';
+interface Props extends Omit<FieldProps<string>, 'value'> {
+    currentValue: DatasourceTypeWithOnlyTypeValues<'icon'>;
+    setEditValues: React.Dispatch<React.SetStateAction<DatasourceTypeWithOnlyValues>>;
+    executeFetch?: ExecuteFetch;
+}
+/**
+ * Should be gated by FF rollout of platform-datasources-enable-two-way-sync-priority
+ */
+declare const PriorityEditType: (props: Props) => JSX.Element;
+export default PriorityEditType;

package/dist/types-ts4.5/ui/issue-like-table/edit-type/index.d.ts

@@ -1,12 +1,13 @@
 import React from 'react';
 import type InlineEdit from '@atlaskit/inline-edit';
 import type { DatasourceType } from '@atlaskit/linking-types';
+import { type ExecuteFetch } from '../../../state/actions';
 import { type DatasourceTypeWithOnlyValues } from '../types';
 export declare const editType: ({ defaultValue, currentValue, setEditValues, executeFetch, }: {
     defaultValue: DatasourceTypeWithOnlyValues;
     currentValue: DatasourceTypeWithOnlyValues;
     setEditValues: React.Dispatch<React.SetStateAction<DatasourceTypeWithOnlyValues>>;
-    executeFetch?: (<E>(inputs: any) => Promise<E>) | undefined;
+    executeFetch?: ExecuteFetch | undefined;
 }) => Pick<React.ComponentProps<typeof InlineEdit>, 'defaultValue' | 'editView'>;
 export declare const isEditTypeSupported: (type: DatasourceType['type']) => boolean;
 export declare const isEditTypeSelectable: (type: DatasourceType['type']) => boolean;

package/dist/types-ts4.5/ui/issue-like-table/messages.d.ts

@@ -19,6 +19,16 @@ export declare const issueLikeTableMessages: {
         description: string;
         defaultMessage: string;
     };
+    fetchActionErrorGenericDescription: {
+        id: string;
+        description: string;
+        defaultMessage: string;
+    };
+    fetchActionErrorGenericTitle: {
+        id: string;
+        description: string;
+        defaultMessage: string;
+    };
     wrapText: {
         id: string;
         description: string;

package/dist/types-ts4.5/ui/issue-like-table/render-type/icon/index.d.ts

@@ -5,5 +5,9 @@ interface IconProps extends Icon {
 }
 export declare const ICON_TYPE_TEST_ID = "link-datasource-render-type--icon";
 export declare const ICON_TYPE_TEXT_TEST_ID = "link-datasource-render-type--icon-text";
+/**
+ * @deprecated: To be cleaned up and replaced with new-icon after
+ * `platform-datasources-enable-two-way-sync-priority` rollout.
+ */
 declare const IconRenderType: ({ label, text, source, testId }: IconProps) => JSX.Element;
 export default IconRenderType;

package/dist/types-ts4.5/ui/issue-like-table/render-type/new-icon/index.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { type Icon } from '@atlaskit/linking-types';
+interface IconProps extends Icon {
+    testId?: string;
+}
+export declare const ICON_TYPE_TEST_ID = "link-datasource-render-type--icon";
+export declare const ICON_TYPE_TEXT_TEST_ID = "link-datasource-render-type--icon-text";
+declare const IconRenderType: ({ label, text, source, testId }: IconProps) => JSX.Element;
+export default IconRenderType;

package/dist/types-ts4.5/ui/issue-like-table/shared-components/icon/index.d.ts

@@ -0,0 +1,23 @@
+/// <reference types="react" />
+interface SharedIconComponentProps {
+    /**
+     * URL or SVG for the priority icon
+     */
+    iconUrl: string;
+    /**
+     * Text that labels the icon. Will not be capitalised.
+     */
+    text?: string;
+    /**
+     * Label.
+     * Used for icon alt.
+     */
+    label?: string;
+    testId: string;
+}
+/**
+ * Renders a icon and label.
+ * If the text is undefined, render the capitalised label.
+ */
+export declare function SharedIconComponent({ iconUrl, label, text, testId }: SharedIconComponentProps): JSX.Element;
+export {};

package/dist/types-ts4.5/ui/issue-like-table/types.d.ts

@@ -9,6 +9,13 @@ export type DatasourceTypeWithOnlyValues = {
         }>['value'][];
     };
 }[DatasourceType['type']];
+/** Object typing a list of data objects for type K */
+export type DatasourceTypeWithOnlyTypeValues<K> = {
+    type: K;
+    values: Extract<DatasourceType, {
+        type: K;
+    }>['value'][];
+};
 export type TableViewPropsRenderType = (item: DatasourceTypeWithOnlyValues) => React.ReactNode;
 export interface ColumnSizesMap {
     [key: string]: number;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/link-datasource",
-	"version": "3.9.0",
+	"version": "3.10.0",
 	"description": "UI Components to support linking platform dataset feature",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -70,7 +70,7 @@
 		"@atlaskit/pragmatic-drag-and-drop-hitbox": "^1.0.0",
 		"@atlaskit/pragmatic-drag-and-drop-react-beautiful-dnd-autoscroll": "^1.2.0",
 		"@atlaskit/pragmatic-drag-and-drop-react-drop-indicator": "^1.1.0",
-		"@atlaskit/primitives": "^13.1.0",
+		"@atlaskit/primitives": "^13.2.0",
 		"@atlaskit/react-select": "^1.3.0",
 		"@atlaskit/select": "^18.5.0",
 		"@atlaskit/smart-card": "^30.2.0",
@@ -168,13 +168,13 @@
 		"platform-datasources-enable-two-way-sync-statuses": {
 			"type": "boolean"
 		},
-		"platform.linking-platform.datasource-assets_add_version_parameter": {
+		"platform-datasources-enable-two-way-sync-priority": {
 			"type": "boolean"
 		},
-		"platform.linking-platform.datasource-assets_update_refresh_button_dt3qk": {
+		"platform.linking-platform.datasource-assets_add_version_parameter": {
 			"type": "boolean"
 		},
-		"platform.linking-platform.datasource.limit-total-results_8wqcd": {
+		"platform.linking-platform.datasource-assets_update_refresh_button_dt3qk": {
 			"type": "boolean"
 		},
 		"platform-datasources-use-refactored-config-modal": {