@atlaskit/link-datasource 3.19.2 → 3.20.0

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

@@ -1,38 +1,38 @@
+/* index.tsx generated by @compiled/babel-plugin v0.36.0 */
+import "./index.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
 import React from 'react';
 import { FormattedMessage, useIntl } from 'react-intl-next';
 import Avatar from '@atlaskit/avatar';
-import { Box, xcss } from '@atlaskit/primitives';
+import { fg } from "@atlaskit/platform-feature-flags";
+import { Box } from '@atlaskit/primitives/compiled';
 import Tooltip from '@atlaskit/tooltip';
 import { USER_TYPE_TEST_ID } from '../../render-type/user';
 import { userTypeMessages } from '../../render-type/user/messages';
-var userWrapperStyles = xcss({
-  display: 'flex',
-  alignItems: 'center',
-  font: 'font.body'
-});
-var avatarWrapperStyles = xcss({
-  marginRight: 'space.100'
-});
-var emptyAvatarWrapperStyles = xcss({
-  paddingBlock: 'space.050',
-  paddingInline: 'space.100',
-  opacity: 0,
-  ':hover': {
-    opacity: 1
-  }
-});
-export var EmptyAvatar = function EmptyAvatar() {
+import { EmptyAvatarOld } from './avatar-old';
+var styles = {
+  avatarWrapperStyles: "_2hwxu2gc",
+  emptyAvatarWrapperStyles: "_11c81oud _1rjc1b66 _18zru2gc _1e0c1txw _4cvr1h6o _tzy4idpf _16l4kb7n"
+};
+export var EmptyAvatarNew = function EmptyAvatarNew() {
   var intl = useIntl();
   return /*#__PURE__*/React.createElement(Tooltip, {
     content: intl.formatMessage(userTypeMessages.userDefaultdisplayNameValue)
   }, /*#__PURE__*/React.createElement(Box, {
-    xcss: [userWrapperStyles, emptyAvatarWrapperStyles],
+    xcss: styles.emptyAvatarWrapperStyles,
     testId: USER_TYPE_TEST_ID
   }, /*#__PURE__*/React.createElement(Box, {
-    xcss: avatarWrapperStyles
+    xcss: styles.avatarWrapperStyles
   }, /*#__PURE__*/React.createElement(Avatar, {
     appearance: "circle",
     size: 'small',
     testId: "".concat(USER_TYPE_TEST_ID, "--avatar")
   })), /*#__PURE__*/React.createElement(FormattedMessage, userTypeMessages.userDefaultdisplayNameValue)));
+};
+export var EmptyAvatar = function EmptyAvatar() {
+  if (fg('bandicoots-compiled-migration-link-datasource')) {
+    return /*#__PURE__*/React.createElement(EmptyAvatarNew, null);
+  } else {
+    return /*#__PURE__*/React.createElement(EmptyAvatarOld, null);
+  }
 };

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

@@ -0,0 +1,34 @@
+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 text label.
+ * If the text is undefined, will not render the text label.
+ */
+export function SharedIconComponentOld(_ref) {
+  var iconUrl = _ref.iconUrl,
+    label = _ref.label,
+    text = _ref.text,
+    testId = _ref.testId;
+  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
+  })), text && /*#__PURE__*/React.createElement(Box, {
+    xcss: labelStyles,
+    testId: "".concat(testId, "-text")
+  }, text));
+}

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

@@ -0,0 +1,4 @@
+._18m915vq{overflow-y:hidden}
+._1bsb1osq{width:100%}
+._1bto1l2s{text-overflow:ellipsis}
+._1reo15vq{overflow-x:hidden}

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

@@ -1,15 +1,18 @@
+/* index.tsx generated by @compiled/babel-plugin v0.36.0 */
+import "./index.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
 import React from 'react';
-import { Box, Flex, Inline, xcss } from '@atlaskit/primitives';
-var labelStyles = xcss({
-  overflow: 'hidden',
-  textOverflow: 'ellipsis',
-  width: '100%'
-});
+import { fg } from "@atlaskit/platform-feature-flags";
+import { Box, Flex, Inline } from '@atlaskit/primitives/compiled';
+import { SharedIconComponentOld } from './icon-old';
+var styles = {
+  labelStyles: "_1reo15vq _18m915vq _1bto1l2s _1bsb1osq"
+};
 /**
  * Renders a icon and text label.
  * If the text is undefined, will not render the text label.
  */
-export function SharedIconComponent(_ref) {
+export function SharedIconComponentNew(_ref) {
   var iconUrl = _ref.iconUrl,
     label = _ref.label,
     text = _ref.text,
@@ -28,7 +31,14 @@ export function SharedIconComponent(_ref) {
       maxWidth: '24px'
     } // having just width: '24px' shrinks it when table width is reduced
   })), text && /*#__PURE__*/React.createElement(Box, {
-    xcss: labelStyles,
+    xcss: styles.labelStyles,
     testId: "".concat(testId, "-text")
   }, text));
+}
+export function SharedIconComponent(props) {
+  if (fg('bandicoots-compiled-migration-link-datasource')) {
+    return /*#__PURE__*/React.createElement(SharedIconComponentNew, props);
+  } else {
+    return /*#__PURE__*/React.createElement(SharedIconComponentOld, props);
+  }
 }

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

@@ -1,4 +1,5 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+/* eslint-disable @atlaskit/design-system/use-tokens-typography */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import styled from '@emotion/styled';
 import { N40 } from '@atlaskit/theme/colors';
@@ -30,7 +31,6 @@ export var TableHeading = styled.th(_defineProperty(_defineProperty(_definePrope
   position: 'relative',
   /* This makes resizing work with out jumping due to padding + changes overall width for same default values. */
   boxSizing: 'border-box',
-  // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
   lineHeight: lineHeight,
   padding: "".concat(verticalPadding, " ", "var(--ds-space-050, 4px)"),
   borderRight: "0.5px solid ".concat("var(--ds-border, ".concat(N40, ")")),
@@ -55,7 +55,6 @@ export var TableHeading = styled.th(_defineProperty(_defineProperty(_definePrope
   width: '100%',
   /* With Button now being a parent for this component it adds its lineHeight value and spoils
       `height` calculation above. */
-  // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
   lineHeight: lineHeight,
   padding: "".concat(verticalPadding, " ", "var(--ds-space-050, 4px)"),
   display: '-webkit-box',

package/dist/esm/ui/issue-like-table/table-cell-content/index.compiled.css

@@ -0,0 +1,5 @@
+._18m915vq{overflow-y:hidden}
+._1bsb1osq{width:100%}
+._1bto1l2s{text-overflow:ellipsis}
+._1reo15vq{overflow-x:hidden}
+._ae4v1h6o{align-content:center}

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

@@ -1,6 +1,10 @@
+/* index.tsx generated by @compiled/babel-plugin v0.36.0 */
+import "./index.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
 import React from 'react';
 import { useIntl } from 'react-intl-next';
-import { Box, xcss } from '@atlaskit/primitives';
+import { fg } from "@atlaskit/platform-feature-flags";
+import { Box } from '@atlaskit/primitives/compiled';
 import Tooltip from '@atlaskit/tooltip';
 import { useDatasourceItem } from '../../../state';
 import { useExecuteAtomicAction } from '../../../state/actions';
@@ -8,14 +12,10 @@ import { isEditTypeSelectable, isEditTypeSupported } from '../edit-type';
 import { stringifyType } from '../render-type';
 import { TruncateTextTag } from '../truncate-text-tag';
 import { InlineEdit } from './inline-edit';
-var readViewStyles = xcss({
-  textOverflow: 'ellipsis',
-  overflow: 'hidden',
-  width: '100%',
-  // Compensates for 2px from both top and bottom taken by InlneEdit (from transparent border in read-view mode and border+padding in edit view)
-  minHeight: 'calc(40px - 2px * 2)',
-  alignContent: 'center'
-});
+import { TableCellContentOld } from './table-cell-content-old';
+var styles = {
+  readViewStyles: "_1reo15vq _18m915vq _1bto1l2s _1bsb1osq _ae4v1h6o"
+};
 var TooltipWrapper = function TooltipWrapper(_ref) {
   var columnKey = _ref.columnKey,
     _ref$datasourceTypeWi = _ref.datasourceTypeWithValues,
@@ -98,7 +98,13 @@ var InlineEditableCell = function InlineEditableCell(_ref3) {
     testId: "inline-edit-read-view",
     paddingInline: isEditable ? 'space.075' : 'space.100',
     paddingBlock: "space.050",
-    xcss: readViewStyles
+    xcss: styles.readViewStyles
+    // minHeight here compensates for 2px from both top and bottom taken by InlneEdit (from transparent border in read-view mode and border+padding in edit view)
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
+    ,
+    style: {
+      minHeight: 'calc(40px - 2px * 2)'
+    }
   }, renderItem(values)));
   if (!isEditable) {
     return readView;
@@ -132,7 +138,7 @@ var toDatasourceTypeWithValues = function toDatasourceTypeWithValues(_ref4) {
     values: values
   };
 };
-export var TableCellContent = function TableCellContent(_ref5) {
+var TableCellContentNew = function TableCellContentNew(_ref5) {
   var id = _ref5.id,
     columnKey = _ref5.columnKey,
     columnTitle = _ref5.columnTitle,
@@ -167,7 +173,13 @@ export var TableCellContent = function TableCellContent(_ref5) {
     testId: "inline-edit-read-view",
     paddingInline: "space.100",
     paddingBlock: "space.050",
-    xcss: readViewStyles
+    xcss: styles.readViewStyles
+    // minHeight here compensates for 2px from both top and bottom taken by InlneEdit (from transparent border in read-view mode and border+padding in edit view)
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
+    ,
+    style: {
+      minHeight: 'calc(40px - 2px * 2)'
+    }
   }, /*#__PURE__*/React.createElement(ReadOnlyCell, {
     id: id,
     columnKey: columnKey,
@@ -176,4 +188,11 @@ export var TableCellContent = function TableCellContent(_ref5) {
     wrappedColumnKeys: wrappedColumnKeys,
     renderItem: renderItem
   }));
+};
+export var TableCellContent = function TableCellContent(props) {
+  if (fg('bandicoots-compiled-migration-link-datasource')) {
+    return /*#__PURE__*/React.createElement(TableCellContentNew, props);
+  } else {
+    return /*#__PURE__*/React.createElement(TableCellContentOld, props);
+  }
 };

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

@@ -0,0 +1,269 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _typeof from "@babel/runtime/helpers/typeof";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+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, useMemo, useState } from 'react';
+import { useIntl } from 'react-intl-next';
+import AKInlineEdit from '@atlaskit/inline-edit';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { Box, xcss } from '@atlaskit/primitives';
+import { useSmartLinkReload } from '@atlaskit/smart-card/hooks';
+import { useDatasourceAnalyticsEvents } from '../../../analytics';
+import { startUfoExperience } from '../../../analytics/ufoExperiences';
+import { useDatasourceExperienceId } from '../../../contexts/datasource-experience-id';
+import { useDatasourceTableFlag } from '../../../hooks/useDatasourceTableFlag';
+import { useDatasourceActions, useDatasourceItem } from '../../../state';
+import { editType } from '../edit-type';
+import { EmptyAvatar } from '../shared-components/avatar';
+import { getFieldLabelById } from '../utils';
+import { tableCellMessages } from './messages';
+export var InlineEditUFOExperience = 'inline-edit-rendered';
+var editContainerStyles = xcss({
+  marginBlockStart: 'space.negative.100'
+});
+/**
+ * @returns String of the new field value, or ID of status transition / atlassian user ID / priority ID.
+ * @throws Error if the value is not supplied.
+ */
+export var newGetBackendUpdateValue = function newGetBackendUpdateValue(typedNewValue) {
+  if (typedNewValue.values.length === 0) {
+    throw new Error("Datasource 2 way sync: Backend update value or value ID not supplied for type ".concat(typedNewValue.type));
+  }
+  switch (typedNewValue.type) {
+    case 'string':
+      return typedNewValue.values[0];
+    case 'status':
+      var transitionId = typedNewValue.values[0].transitionId;
+      if (transitionId === undefined || transitionId === '') {
+        throw new Error("Datasource 2 way sync: Backend status transition ID not supplied for type transition");
+      }
+      return transitionId;
+    case 'user':
+      var atlassianUserId = typedNewValue.values[0].atlassianUserId;
+      if (atlassianUserId === undefined || atlassianUserId === '') {
+        throw new Error("Datasource 2 way sync: Backend atlasian user ID not supplied for type user");
+      }
+      return atlassianUserId;
+    case 'icon':
+      var id = typedNewValue.values[0].id;
+      if (id === undefined || id === '') {
+        throw new Error("Datasource 2 way sync: Backend update ID not supplied for type icon");
+      }
+      return id;
+  }
+  throw new Error("Datasource 2 way sync Backend update value not implemented for type ".concat(typedNewValue.type));
+};
+var getBackendUpdateValue = function getBackendUpdateValue(typedNewValue) {
+  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$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));
+};
+var getCurrentFieldLabel = function getCurrentFieldLabel(typedNewValue) {
+  var _typedNewValue$values4, _typedNewValue$values5, _typedNewValue$values6;
+  switch (typedNewValue.type) {
+    case 'string':
+      return typedNewValue.values[0] || '';
+    case 'status':
+      return ((_typedNewValue$values4 = typedNewValue.values[0]) === null || _typedNewValue$values4 === void 0 ? void 0 : _typedNewValue$values4.text) || '';
+    case 'user':
+      return ((_typedNewValue$values5 = typedNewValue.values[0]) === null || _typedNewValue$values5 === void 0 ? void 0 : _typedNewValue$values5.displayName) || '';
+    case 'icon':
+      return ((_typedNewValue$values6 = typedNewValue.values[0]) === null || _typedNewValue$values6 === void 0 ? void 0 : _typedNewValue$values6.text) || '';
+    default:
+      return '';
+  }
+};
+var mapUpdatedItem = function mapUpdatedItem(existingItem, columnKey, newValue) {
+  switch (newValue.type) {
+    case 'string':
+      return _objectSpread(_objectSpread({}, existingItem), {}, _defineProperty({}, columnKey, {
+        data: newValue.values[0] || ''
+      }));
+    case 'status':
+    case 'user':
+    case 'icon':
+      return newValue.values[0] ? _objectSpread(_objectSpread({}, existingItem), {}, _defineProperty({}, columnKey, {
+        data: newValue.values[0]
+      })) : existingItem;
+    default:
+  }
+  return null;
+};
+var isNewValue = function isNewValue(columnKey, newItem, existingData) {
+  var _newItem$columnKey, _existingData$columnK;
+  return ((_newItem$columnKey = newItem[columnKey]) === null || _newItem$columnKey === void 0 ? void 0 : _newItem$columnKey.data) && (!((_existingData$columnK = existingData[columnKey]) !== null && _existingData$columnK !== void 0 && _existingData$columnK.data) || newItem[columnKey].data !== existingData[columnKey].data);
+};
+var useRefreshDatasourceItem = function useRefreshDatasourceItem(item) {
+  var _item$data;
+  var url = item === null || item === void 0 || (_item$data = item.data) === null || _item$data === void 0 || (_item$data = _item$data.key) === null || _item$data === void 0 || (_item$data = _item$data.data) === null || _item$data === void 0 ? void 0 : _item$data.url;
+
+  // passing empty string to the hook isn't ideal, but the alternatives are too much effort for this small fix.
+  var reloadSmartLinkAction = useSmartLinkReload({
+    url: url || ''
+  });
+  return useCallback(function () {
+    if (url) {
+      reloadSmartLinkAction();
+    }
+  }, [reloadSmartLinkAction, url]);
+};
+export var InlineEditOld = function InlineEditOld(_ref) {
+  var ari = _ref.ari,
+    execute = _ref.execute,
+    executeFetch = _ref.executeFetch,
+    readView = _ref.readView,
+    columnKey = _ref.columnKey,
+    columnTitle = _ref.columnTitle,
+    datasourceTypeWithValues = _ref.datasourceTypeWithValues;
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isEditing = _useState2[0],
+    setIsEditing = _useState2[1];
+  var _useState3 = useState(datasourceTypeWithValues),
+    _useState4 = _slicedToArray(_useState3, 2),
+    editValues = _useState4[0],
+    setEditValues = _useState4[1];
+  var item = useDatasourceItem({
+    id: ari
+  });
+  var _ref2 = item || {},
+    entityType = _ref2.entityType,
+    integrationKey = _ref2.integrationKey;
+  var _useDatasourceTableFl = useDatasourceTableFlag(),
+    showErrorFlag = _useDatasourceTableFl.showErrorFlag;
+  var _useDatasourceActions = useDatasourceActions(),
+    onUpdateItem = _useDatasourceActions.onUpdateItem;
+  var _useDatasourceAnalyti = useDatasourceAnalyticsEvents(),
+    fireEvent = _useDatasourceAnalyti.fireEvent;
+  var refreshDatasourceItem = useRefreshDatasourceItem(item);
+  var experienceId = useDatasourceExperienceId();
+  var onCommitUpdate = useCallback(function (newValue) {
+    if (!item) {
+      setIsEditing(false);
+      return;
+    }
+    var existingData = item.data;
+    var newItem = mapUpdatedItem(item.data, columnKey, newValue);
+    if (!newItem || !isNewValue(columnKey, newItem, existingData)) {
+      setIsEditing(false);
+      return;
+    }
+    onUpdateItem(ari, newItem);
+    fireEvent('ui.form.submitted.inlineEdit', {});
+    var updateValue;
+    if (fg('platform-datasources-inline-edit-id-checks')) {
+      try {
+        // TODO: Refactor types so that valid update values are guaranteed for
+        // all object types. Invalid options should be filtered out of options -
+        // this frontend error flag is a last resort.
+        updateValue = newGetBackendUpdateValue(newValue);
+      } catch (_unused) {
+        // Show an error as the new value that was going to be sent to the
+        // backend is invalid (and would have failed anyway, silently to the user)
+        showErrorFlag({});
+        onUpdateItem(ari, existingData);
+        setIsEditing(false);
+        return;
+      }
+    }
+    execute(updateValue !== undefined && fg('platform-datasources-inline-edit-id-checks') ? updateValue :
+    // Old behaviour is preserved in non-FFed path: errors thrown by getBackendUpdateValue are caught by
+    // the error boundary, _not_ by the catch block & frontend flag here.
+    getBackendUpdateValue(newValue)).then(refreshDatasourceItem).catch(function (error) {
+      var status = error && _typeof(error) === 'object' ? error.status : undefined;
+      showErrorFlag({
+        status: status
+      });
+      onUpdateItem(ari, existingData);
+    });
+    setIsEditing(false);
+  }, [item, columnKey, onUpdateItem, ari, refreshDatasourceItem, fireEvent, execute, showErrorFlag]);
+  var onEdit = useCallback(function () {
+    setIsEditing(true);
+    if (experienceId) {
+      startUfoExperience({
+        name: InlineEditUFOExperience
+      }, experienceId);
+    }
+    if (integrationKey && entityType) {
+      fireEvent('ui.inlineEdit.clicked.datasource', {
+        integrationKey: integrationKey,
+        entityType: entityType,
+        fieldKey: columnKey
+      });
+    }
+  }, [columnKey, entityType, experienceId, fireEvent, integrationKey]);
+  var onCancelEdit = useCallback(function () {
+    setIsEditing(false);
+    if (integrationKey && entityType) {
+      fireEvent('ui.inlineEdit.cancelled.datasource', {
+        integrationKey: integrationKey,
+        entityType: entityType,
+        fieldKey: columnKey
+      });
+    }
+  }, [columnKey, entityType, fireEvent, integrationKey]);
+  var _useIntl = useIntl(),
+    formatMessage = _useIntl.formatMessage;
+  var editButtonLabel = useMemo(function () {
+    return formatMessage(tableCellMessages.editButtonLabel, {
+      fieldName: columnTitle,
+      fieldValue: getCurrentFieldLabel(editValues)
+    });
+  }, [columnTitle, formatMessage, editValues]);
+  return /*#__PURE__*/React.createElement(Box, {
+    xcss: editContainerStyles
+  }, /*#__PURE__*/React.createElement(AKInlineEdit, _extends({}, editType({
+    defaultValue: datasourceTypeWithValues,
+    currentValue: editValues,
+    setEditValues: setEditValues,
+    executeFetch: executeFetch,
+    labelId: getFieldLabelById(columnKey)
+  }), {
+    hideActionButtons: true,
+    readView: editableRenderType({
+      defaultValue: datasourceTypeWithValues,
+      readView: readView
+    }),
+    readViewFitContainerWidth: true,
+    isEditing: isEditing,
+    onEdit: onEdit,
+    onCancel: onCancelEdit,
+    onConfirm: function onConfirm() {
+      return onCommitUpdate(editValues);
+    },
+    editButtonLabel: editButtonLabel
+  })));
+};
+
+/**
+ *
+ * This function allows us to manipulate the readView on editable cells.
+ * This way, for example, we can show a fallback Avatar on empty user cells.
+ *
+ */
+var editableRenderType = function editableRenderType(_ref3) {
+  var defaultValue = _ref3.defaultValue,
+    readView = _ref3.readView;
+  return function () {
+    var _defaultValue$values;
+    switch (defaultValue.type) {
+      case 'user':
+        if (!((_defaultValue$values = defaultValue.values) !== null && _defaultValue$values !== void 0 && _defaultValue$values[0])) {
+          return /*#__PURE__*/React.createElement(EmptyAvatar, null);
+        }
+    }
+    return readView;
+  };
+};

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

@@ -0,0 +1 @@
+._1pfhx0bf{margin-block-start:var(--ds-space-negative-100,-8px)}

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

@@ -1,14 +1,17 @@
+/* inline-edit.tsx generated by @compiled/babel-plugin v0.36.0 */
 import _extends from "@babel/runtime/helpers/extends";
 import _typeof from "@babel/runtime/helpers/typeof";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import "./inline-edit.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
 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, useMemo, useState } from 'react';
 import { useIntl } from 'react-intl-next';
 import AKInlineEdit from '@atlaskit/inline-edit';
 import { fg } from '@atlaskit/platform-feature-flags';
-import { Box, xcss } from '@atlaskit/primitives';
+import { Box } from '@atlaskit/primitives/compiled';
 import { useSmartLinkReload } from '@atlaskit/smart-card/hooks';
 import { useDatasourceAnalyticsEvents } from '../../../analytics';
 import { startUfoExperience } from '../../../analytics/ufoExperiences';
@@ -18,11 +21,12 @@ import { useDatasourceActions, useDatasourceItem } from '../../../state';
 import { editType } from '../edit-type';
 import { EmptyAvatar } from '../shared-components/avatar';
 import { getFieldLabelById } from '../utils';
+import { InlineEditOld } from './inline-edit-old';
 import { tableCellMessages } from './messages';
 export var InlineEditUFOExperience = 'inline-edit-rendered';
-var editContainerStyles = xcss({
-  marginBlockStart: 'space.negative.100'
-});
+var styles = {
+  editContainerStyles: "_1pfhx0bf"
+};
 /**
  * @returns String of the new field value, or ID of status transition / atlassian user ID / priority ID.
  * @throws Error if the value is not supplied.
@@ -118,7 +122,7 @@ var useRefreshDatasourceItem = function useRefreshDatasourceItem(item) {
     }
   }, [reloadSmartLinkAction, url]);
 };
-export var InlineEdit = function InlineEdit(_ref) {
+var InlineEditNew = function InlineEditNew(_ref) {
   var ari = _ref.ari,
     execute = _ref.execute,
     executeFetch = _ref.executeFetch,
@@ -223,7 +227,7 @@ export var InlineEdit = function InlineEdit(_ref) {
     });
   }, [columnTitle, formatMessage, editValues]);
   return /*#__PURE__*/React.createElement(Box, {
-    xcss: editContainerStyles
+    xcss: styles.editContainerStyles
   }, /*#__PURE__*/React.createElement(AKInlineEdit, _extends({}, editType({
     defaultValue: datasourceTypeWithValues,
     currentValue: editValues,
@@ -246,6 +250,13 @@ export var InlineEdit = function InlineEdit(_ref) {
     editButtonLabel: editButtonLabel
   })));
 };
+export var InlineEdit = function InlineEdit(props) {
+  if (fg('bandicoots-compiled-migration-link-datasource')) {
+    return /*#__PURE__*/React.createElement(InlineEditNew, props);
+  } else {
+    return /*#__PURE__*/React.createElement(InlineEditOld, props);
+  }
+};
 
 /**
  *