@atlaskit/link-datasource 3.12.0 → 3.13.0

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

@@ -0,0 +1,87 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import React, { useEffect, useState } from 'react';
+import { useDebouncedCallback } from 'use-debounce';
+import Avatar, { AvatarItem } from '@atlaskit/avatar';
+import Select from '@atlaskit/select';
+import { failUfoExperience, succeedUfoExperience } from '../../../../analytics/ufoExperiences';
+import { useDatasourceExperienceId } from '../../../../contexts/datasource-experience-id';
+import { useLoadOptions } from '../../../../hooks/useLoadOptions';
+import { SEARCH_DEBOUNCE_MS } from '../../../common/modal/popup-select/constants';
+import { USER_TYPE_TEST_ID } from '../../render-type/user';
+import { InlineEditUFOExperience } from '../../table-cell-content/inline-edit';
+var UserEditType = function UserEditType(props) {
+  var _currentValue$values;
+  var currentValue = props.currentValue,
+    executeFetch = props.executeFetch;
+  var _useState = useState({
+      query: ''
+    }),
+    _useState2 = _slicedToArray(_useState, 2),
+    fetchInputs = _useState2[0],
+    setFetchInputs = _useState2[1];
+  var _useDebouncedCallback = useDebouncedCallback(function (query) {
+      return setFetchInputs({
+        query: query
+      });
+    }, SEARCH_DEBOUNCE_MS),
+    _useDebouncedCallback2 = _slicedToArray(_useDebouncedCallback, 1),
+    handleUserInputDebounced = _useDebouncedCallback2[0];
+  var _useLoadOptions = useLoadOptions({
+      executeFetch: executeFetch,
+      fetchInputs: fetchInputs
+    }),
+    options = _useLoadOptions.options,
+    isLoading = _useLoadOptions.isLoading,
+    hasFailed = _useLoadOptions.hasFailed;
+  var experienceId = useDatasourceExperienceId();
+  useEffect(function () {
+    if (!experienceId) {
+      return;
+    }
+    if (hasFailed) {
+      failUfoExperience({
+        name: InlineEditUFOExperience
+      }, experienceId);
+    } else if (!isLoading) {
+      succeedUfoExperience({
+        name: InlineEditUFOExperience
+      }, experienceId);
+    }
+  }, [experienceId, isLoading, hasFailed]);
+  return /*#__PURE__*/React.createElement(Select, _extends({}, props, {
+    autoFocus: true,
+    defaultMenuIsOpen: true,
+    blurInputOnSelect: true,
+    options: options,
+    isLoading: isLoading,
+    testId: "inline-edit-user",
+    filterOption: function filterOption() {
+      return true;
+    } // necessary, otherwise by default all options will be filtered out on user input
+    ,
+    onInputChange: handleUserInputDebounced,
+    defaultValue: currentValue === null || currentValue === void 0 || (_currentValue$values = currentValue.values) === null || _currentValue$values === void 0 ? void 0 : _currentValue$values[0],
+    getOptionValue: function getOptionValue(option) {
+      return option.atlassianUserId;
+    },
+    formatOptionLabel: function formatOptionLabel(option) {
+      return /*#__PURE__*/React.createElement(AvatarItem, {
+        avatar: /*#__PURE__*/React.createElement(Avatar, {
+          appearance: "circle",
+          size: 'small',
+          src: option.avatarSource,
+          testId: "".concat(USER_TYPE_TEST_ID, "--avatar--").concat(option.atlassianUserId)
+        }),
+        primaryText: option.displayName
+      });
+    },
+    onChange: function onChange(e) {
+      return props.setEditValues({
+        type: 'user',
+        values: e ? [e] : []
+      });
+    }
+  }));
+};
+export default UserEditType;

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

@@ -715,35 +715,37 @@ export var IssueLikeDataTableView = function IssueLikeDataTableView(_ref5) {
         shouldUseWidth: shouldUseWidth,
         width: width
       });
-
       // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
-      if (fg('platform-datasources-enable-two-way-sync')) {
-        return jsx(InlineEditableTableCell, {
-          key: cellKey,
-          "data-testid": testId && "".concat(testId, "--cell-").concat(cellIndex),
-          colSpan: isEditable && isLastCell ? 2 : undefined
-          // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
-          ,
-          style: loadingRowStyle,
-          css: [wrappedColumnKeys !== null && wrappedColumnKeys !== void 0 && wrappedColumnKeys.includes(cellKey) ? null : truncateStyles]
-        }, content);
-      } else {
-        // extra padding is required around skeleton loader to avoid vertical jumps when data loads
-        if (key !== null && key !== void 0 && key.includes('loading')) {
-          loadingRowStyle = _objectSpread(_objectSpread({}, loadingRowStyle), {}, {
-            paddingBlock: "var(--ds-space-100, 8px)"
-          });
+      if (fg('enable_datasource_react_sweet_state')) {
+        // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
+        if (fg('platform-datasources-enable-two-way-sync')) {
+          return jsx(InlineEditableTableCell, {
+            key: cellKey,
+            "data-testid": testId && "".concat(testId, "--cell-").concat(cellIndex),
+            colSpan: isEditable && isLastCell ? 2 : undefined
+            // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+            ,
+            style: loadingRowStyle,
+            css: [wrappedColumnKeys !== null && wrappedColumnKeys !== void 0 && wrappedColumnKeys.includes(cellKey) ? null : truncateStyles]
+          }, content);
         }
-        return jsx(TableCell, {
-          key: cellKey,
-          "data-testid": testId && "".concat(testId, "--cell-").concat(cellIndex),
-          colSpan: isEditable && isLastCell ? 2 : undefined
-          // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
-          ,
-          style: loadingRowStyle,
-          css: [wrappedColumnKeys !== null && wrappedColumnKeys !== void 0 && wrappedColumnKeys.includes(cellKey) ? null : truncateStyles]
-        }, content);
       }
+
+      // extra padding is required around skeleton loader to avoid vertical jumps when data loads
+      if (key !== null && key !== void 0 && key.includes('loading')) {
+        loadingRowStyle = _objectSpread(_objectSpread({}, loadingRowStyle), {}, {
+          paddingBlock: "var(--ds-space-100, 8px)"
+        });
+      }
+      return jsx(TableCell, {
+        key: cellKey,
+        "data-testid": testId && "".concat(testId, "--cell-").concat(cellIndex),
+        colSpan: isEditable && isLastCell ? 2 : undefined
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+        ,
+        style: loadingRowStyle,
+        css: [wrappedColumnKeys !== null && wrappedColumnKeys !== void 0 && wrappedColumnKeys.includes(cellKey) ? null : truncateStyles]
+      }, content);
     }));
   }))));
   return fg('platform-datasources-enable-two-way-sync') ? jsx(FlagsProvider, null, view) : view;

package/dist/esm/ui/issue-like-table/table-cell-content/inline-edit.js

@@ -19,14 +19,16 @@ var editContainerStyles = xcss({
   marginBlockStart: 'space.negative.100'
 });
 var getBackendUpdateValue = function getBackendUpdateValue(typedNewValue) {
-  var _typedNewValue$values, _typedNewValue$values2;
+  var _typedNewValue$values, _typedNewValue$values2, _typedNewValue$values3;
   switch (typedNewValue.type) {
     case 'string':
       return typedNewValue.values[0] || '';
     case 'status':
       return ((_typedNewValue$values = typedNewValue.values[0]) === null || _typedNewValue$values === void 0 ? void 0 : _typedNewValue$values.transitionId) || '';
+    case 'user':
+      return ((_typedNewValue$values2 = typedNewValue.values[0]) === null || _typedNewValue$values2 === void 0 ? void 0 : _typedNewValue$values2.atlassianUserId) || '';
     case 'icon':
-      return ((_typedNewValue$values2 = typedNewValue.values[0]) === null || _typedNewValue$values2 === void 0 ? void 0 : _typedNewValue$values2.id) || '';
+      return ((_typedNewValue$values3 = typedNewValue.values[0]) === null || _typedNewValue$values3 === void 0 ? void 0 : _typedNewValue$values3.id) || '';
   }
   throw new Error("Datasource 2 way sync Backend update value not implemented for type ".concat(typedNewValue.type));
 };
@@ -37,6 +39,7 @@ var mapUpdatedItem = function mapUpdatedItem(existingItem, columnKey, newValue)
         data: newValue.values[0] || ''
       }));
     case 'status':
+    case 'user':
     case 'icon':
       return newValue.values[0] ? _objectSpread(_objectSpread({}, existingItem), {}, _defineProperty({}, columnKey, {
         data: newValue.values[0]

package/dist/types/hooks/useLoadOptions.d.ts

@@ -0,0 +1,11 @@
+import { type AtomicActionExecuteRequest } from '@atlaskit/linking-types';
+import type { ExecuteFetch } from '../state/actions';
+export type LoadOptionsProps = {
+    fetchInputs?: AtomicActionExecuteRequest['parameters']['inputs'];
+    executeFetch?: ExecuteFetch;
+};
+export declare const useLoadOptions: <T>({ fetchInputs, executeFetch }: LoadOptionsProps) => {
+    options: T[];
+    isLoading: boolean;
+    hasFailed: boolean;
+};

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

@@ -2,7 +2,7 @@ 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'> {
+interface IconEditTypeProps extends Omit<FieldProps<string>, 'value'> {
     currentValue: DatasourceTypeWithOnlyTypeValues<'icon'>;
     setEditValues: React.Dispatch<React.SetStateAction<DatasourceTypeWithOnlyValues>>;
     executeFetch?: ExecuteFetch;
@@ -10,5 +10,5 @@ interface Props extends Omit<FieldProps<string>, 'value'> {
 /**
  * Should be gated by FF rollout of platform-datasources-enable-two-way-sync-priority
  */
-declare const IconEditType: (props: Props) => JSX.Element;
+declare const IconEditType: (props: IconEditTypeProps) => JSX.Element;
 export default IconEditType;

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

@@ -11,3 +11,4 @@ export declare const editType: ({ defaultValue, currentValue, setEditValues, exe
 }) => Pick<React.ComponentProps<typeof InlineEdit>, 'defaultValue' | 'editView'>;
 export declare const isEditTypeSupported: (type: DatasourceType['type']) => boolean;
 export declare const isEditTypeSelectable: (type: DatasourceType['type']) => boolean;
+export declare const toValueType: <T>(typeWithValues: DatasourceTypeWithOnlyValues) => T;

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

@@ -1,11 +1,11 @@
 import React from 'react';
 import { type FieldProps } from '@atlaskit/form';
 import type { ExecuteFetch } from '../../../../state/actions';
-import type { DatasourceTypeWithOnlyValues } from '../../types';
-interface Props extends Omit<FieldProps<string>, 'value'> {
-    currentValue: DatasourceTypeWithOnlyValues;
+import type { DatasourceTypeWithOnlyTypeValues, DatasourceTypeWithOnlyValues } from '../../types';
+interface StatusEditTypeProps extends Omit<FieldProps<string>, 'value'> {
+    currentValue: DatasourceTypeWithOnlyTypeValues<'status'>;
     setEditValues: React.Dispatch<React.SetStateAction<DatasourceTypeWithOnlyValues>>;
     executeFetch?: ExecuteFetch;
 }
-declare const StatusEditType: (props: Props) => JSX.Element;
+declare const StatusEditType: (props: StatusEditTypeProps) => JSX.Element;
 export default StatusEditType;

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

@@ -1,10 +1,9 @@
 import React from 'react';
 import { type FieldProps } from '@atlaskit/form';
-import type { DatasourceTypeWithOnlyValues } from '../../types';
+import type { DatasourceTypeWithOnlyTypeValues, DatasourceTypeWithOnlyValues } from '../../types';
 interface TextEditTypeProps extends Omit<FieldProps<string>, 'value'> {
-    currentValue: DatasourceTypeWithOnlyValues;
+    currentValue: DatasourceTypeWithOnlyTypeValues<'string'>;
     setEditValues: React.Dispatch<React.SetStateAction<DatasourceTypeWithOnlyValues>>;
 }
-export declare const toTextValue: (typeWithValues: DatasourceTypeWithOnlyValues) => string;
 declare const TextEditType: (props: TextEditTypeProps) => JSX.Element;
 export default TextEditType;

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

@@ -0,0 +1,11 @@
+import React from 'react';
+import { type FieldProps } from '@atlaskit/form';
+import type { ExecuteFetch } from '../../../../state/actions';
+import type { DatasourceTypeWithOnlyTypeValues, DatasourceTypeWithOnlyValues } from '../../types';
+interface UserEditTypeProps extends Omit<FieldProps<string>, 'value'> {
+    currentValue: DatasourceTypeWithOnlyTypeValues<'user'>;
+    setEditValues: React.Dispatch<React.SetStateAction<DatasourceTypeWithOnlyValues>>;
+    executeFetch?: ExecuteFetch;
+}
+declare const UserEditType: (props: UserEditTypeProps) => JSX.Element;
+export default UserEditType;

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

@@ -16,6 +16,9 @@ export type DatasourceTypeWithOnlyTypeValues<K> = {
         type: K;
     }>['value'][];
 };
+export type DatasourceTypeValueType<K> = Extract<DatasourceType, {
+    type: K;
+}>['value'];
 export type TableViewPropsRenderType = (item: DatasourceTypeWithOnlyValues) => React.ReactNode;
 export interface ColumnSizesMap {
     [key: string]: number;

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

@@ -0,0 +1,11 @@
+import { type AtomicActionExecuteRequest } from '@atlaskit/linking-types';
+import type { ExecuteFetch } from '../state/actions';
+export type LoadOptionsProps = {
+    fetchInputs?: AtomicActionExecuteRequest['parameters']['inputs'];
+    executeFetch?: ExecuteFetch;
+};
+export declare const useLoadOptions: <T>({ fetchInputs, executeFetch }: LoadOptionsProps) => {
+    options: T[];
+    isLoading: boolean;
+    hasFailed: boolean;
+};

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

@@ -2,7 +2,7 @@ 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'> {
+interface IconEditTypeProps extends Omit<FieldProps<string>, 'value'> {
     currentValue: DatasourceTypeWithOnlyTypeValues<'icon'>;
     setEditValues: React.Dispatch<React.SetStateAction<DatasourceTypeWithOnlyValues>>;
     executeFetch?: ExecuteFetch;
@@ -10,5 +10,5 @@ interface Props extends Omit<FieldProps<string>, 'value'> {
 /**
  * Should be gated by FF rollout of platform-datasources-enable-two-way-sync-priority
  */
-declare const IconEditType: (props: Props) => JSX.Element;
+declare const IconEditType: (props: IconEditTypeProps) => JSX.Element;
 export default IconEditType;

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

@@ -11,3 +11,4 @@ export declare const editType: ({ defaultValue, currentValue, setEditValues, exe
 }) => Pick<React.ComponentProps<typeof InlineEdit>, 'defaultValue' | 'editView'>;
 export declare const isEditTypeSupported: (type: DatasourceType['type']) => boolean;
 export declare const isEditTypeSelectable: (type: DatasourceType['type']) => boolean;
+export declare const toValueType: <T>(typeWithValues: DatasourceTypeWithOnlyValues) => T;

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

@@ -1,11 +1,11 @@
 import React from 'react';
 import { type FieldProps } from '@atlaskit/form';
 import type { ExecuteFetch } from '../../../../state/actions';
-import type { DatasourceTypeWithOnlyValues } from '../../types';
-interface Props extends Omit<FieldProps<string>, 'value'> {
-    currentValue: DatasourceTypeWithOnlyValues;
+import type { DatasourceTypeWithOnlyTypeValues, DatasourceTypeWithOnlyValues } from '../../types';
+interface StatusEditTypeProps extends Omit<FieldProps<string>, 'value'> {
+    currentValue: DatasourceTypeWithOnlyTypeValues<'status'>;
     setEditValues: React.Dispatch<React.SetStateAction<DatasourceTypeWithOnlyValues>>;
     executeFetch?: ExecuteFetch;
 }
-declare const StatusEditType: (props: Props) => JSX.Element;
+declare const StatusEditType: (props: StatusEditTypeProps) => JSX.Element;
 export default StatusEditType;

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

@@ -1,10 +1,9 @@
 import React from 'react';
 import { type FieldProps } from '@atlaskit/form';
-import type { DatasourceTypeWithOnlyValues } from '../../types';
+import type { DatasourceTypeWithOnlyTypeValues, DatasourceTypeWithOnlyValues } from '../../types';
 interface TextEditTypeProps extends Omit<FieldProps<string>, 'value'> {
-    currentValue: DatasourceTypeWithOnlyValues;
+    currentValue: DatasourceTypeWithOnlyTypeValues<'string'>;
     setEditValues: React.Dispatch<React.SetStateAction<DatasourceTypeWithOnlyValues>>;
 }
-export declare const toTextValue: (typeWithValues: DatasourceTypeWithOnlyValues) => string;
 declare const TextEditType: (props: TextEditTypeProps) => JSX.Element;
 export default TextEditType;

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

@@ -0,0 +1,11 @@
+import React from 'react';
+import { type FieldProps } from '@atlaskit/form';
+import type { ExecuteFetch } from '../../../../state/actions';
+import type { DatasourceTypeWithOnlyTypeValues, DatasourceTypeWithOnlyValues } from '../../types';
+interface UserEditTypeProps extends Omit<FieldProps<string>, 'value'> {
+    currentValue: DatasourceTypeWithOnlyTypeValues<'user'>;
+    setEditValues: React.Dispatch<React.SetStateAction<DatasourceTypeWithOnlyValues>>;
+    executeFetch?: ExecuteFetch;
+}
+declare const UserEditType: (props: UserEditTypeProps) => JSX.Element;
+export default UserEditType;

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

@@ -16,6 +16,9 @@ export type DatasourceTypeWithOnlyTypeValues<K> = {
         type: K;
     }>['value'][];
 };
+export type DatasourceTypeValueType<K> = 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.12.0",
+	"version": "3.13.0",
 	"description": "UI Components to support linking platform dataset feature",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -42,13 +42,13 @@
 		"@atlaskit/badge": "^16.4.0",
 		"@atlaskit/button": "^20.3.0",
 		"@atlaskit/datetime-picker": "^15.9.0",
-		"@atlaskit/dropdown-menu": "^12.22.0",
+		"@atlaskit/dropdown-menu": "^12.23.0",
 		"@atlaskit/editor-prosemirror": "6.0.0",
 		"@atlaskit/empty-state": "^7.12.0",
 		"@atlaskit/flag": "^15.8.0",
 		"@atlaskit/form": "^10.5.0",
 		"@atlaskit/heading": "^3.1.0",
-		"@atlaskit/icon": "^22.25.0",
+		"@atlaskit/icon": "^22.26.0",
 		"@atlaskit/icon-object": "^6.7.0",
 		"@atlaskit/image": "^1.3.0",
 		"@atlaskit/inline-edit": "^13.7.0",
@@ -72,7 +72,7 @@
 		"@atlaskit/pragmatic-drag-and-drop-react-drop-indicator": "^1.1.0",
 		"@atlaskit/primitives": "^13.2.0",
 		"@atlaskit/react-select": "^1.4.0",
-		"@atlaskit/select": "^18.5.0",
+		"@atlaskit/select": "^18.6.0",
 		"@atlaskit/smart-card": "^30.3.0",
 		"@atlaskit/smart-user-picker": "6.11.2",
 		"@atlaskit/spinner": "^16.3.0",
@@ -101,7 +101,7 @@
 	"devDependencies": {
 		"@af/integration-testing": "*",
 		"@af/visual-regression": "*",
-		"@atlaskit/link-provider": "^1.16.0",
+		"@atlaskit/link-provider": "^1.17.0",
 		"@atlaskit/link-test-helpers": "^7.5.0",
 		"@atlaskit/ssr": "*",
 		"@atlaskit/visual-regression": "*",
@@ -171,6 +171,9 @@
 		"platform-datasources-enable-two-way-sync-priority": {
 			"type": "boolean"
 		},
+		"platform-datasources-enable-two-way-sync-assignee": {
+			"type": "boolean"
+		},
 		"platform.linking-platform.datasource-assets_update_refresh_button_dt3qk": {
 			"type": "boolean"
 		},