@atlaskit/link-datasource 3.19.1 → 3.20.0

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

@@ -0,0 +1,35 @@
+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 text label.
+ * If the text is undefined, will not render the text label.
+ */
+export function SharedIconComponentOld({
+  iconUrl,
+  label,
+  text,
+  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: `${testId}-text`
+  }, text));
+}

package/dist/es2019/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/es2019/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';
-const 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';
+const 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({
+export function SharedIconComponentNew({
   iconUrl,
   label,
   text,
@@ -29,7 +32,14 @@ export function SharedIconComponent({
       maxWidth: '24px'
     } // having just width: '24px' shrinks it when table width is reduced
   })), text && /*#__PURE__*/React.createElement(Box, {
-    xcss: labelStyles,
+    xcss: styles.labelStyles,
     testId: `${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/es2019/ui/issue-like-table/styled.js

@@ -1,3 +1,4 @@
+/* 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';
@@ -32,7 +33,6 @@ export const TableHeading = styled.th({
     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: `${verticalPadding} ${"var(--ds-space-050, 4px)"}`,
     borderRight: `0.5px solid ${`var(--ds-border, ${N40})`}`,
@@ -65,7 +65,6 @@ export const TableHeading = styled.th({
     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: `${verticalPadding} ${"var(--ds-space-050, 4px)"}`,
     display: '-webkit-box',

package/dist/es2019/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/es2019/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';
-const 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';
+const styles = {
+  readViewStyles: "_1reo15vq _18m915vq _1bto1l2s _1bsb1osq _ae4v1h6o"
+};
 const TooltipWrapper = ({
   columnKey,
   datasourceTypeWithValues: {
@@ -98,7 +98,13 @@ const InlineEditableCell = ({
     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;
@@ -133,7 +139,7 @@ const toDatasourceTypeWithValues = ({
     values
   };
 };
-export const TableCellContent = ({
+const TableCellContentNew = ({
   id,
   columnKey,
   columnTitle,
@@ -171,7 +177,13 @@ export const TableCellContent = ({
     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,
@@ -180,4 +192,11 @@ export const TableCellContent = ({
     wrappedColumnKeys: wrappedColumnKeys,
     renderItem: renderItem
   }));
+};
+export const TableCellContent = props => {
+  if (fg('bandicoots-compiled-migration-link-datasource')) {
+    return /*#__PURE__*/React.createElement(TableCellContentNew, props);
+  } else {
+    return /*#__PURE__*/React.createElement(TableCellContentOld, props);
+  }
 };

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

@@ -0,0 +1,275 @@
+import _extends from "@babel/runtime/helpers/extends";
+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 const InlineEditUFOExperience = 'inline-edit-rendered';
+const 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 const newGetBackendUpdateValue = typedNewValue => {
+  if (typedNewValue.values.length === 0) {
+    throw new Error(`Datasource 2 way sync: Backend update value or value ID not supplied for type ${typedNewValue.type}`);
+  }
+  switch (typedNewValue.type) {
+    case 'string':
+      return typedNewValue.values[0];
+    case 'status':
+      const {
+        transitionId
+      } = typedNewValue.values[0];
+      if (transitionId === undefined || transitionId === '') {
+        throw new Error(`Datasource 2 way sync: Backend status transition ID not supplied for type transition`);
+      }
+      return transitionId;
+    case 'user':
+      const {
+        atlassianUserId
+      } = typedNewValue.values[0];
+      if (atlassianUserId === undefined || atlassianUserId === '') {
+        throw new Error(`Datasource 2 way sync: Backend atlasian user ID not supplied for type user`);
+      }
+      return atlassianUserId;
+    case 'icon':
+      const {
+        id
+      } = typedNewValue.values[0];
+      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 ${typedNewValue.type}`);
+};
+const 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 ${typedNewValue.type}`);
+};
+const 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 '';
+  }
+};
+const mapUpdatedItem = (existingItem, columnKey, newValue) => {
+  switch (newValue.type) {
+    case 'string':
+      return {
+        ...existingItem,
+        [columnKey]: {
+          data: newValue.values[0] || ''
+        }
+      };
+    case 'status':
+    case 'user':
+    case 'icon':
+      return newValue.values[0] ? {
+        ...existingItem,
+        [columnKey]: {
+          data: newValue.values[0]
+        }
+      } : existingItem;
+    default:
+  }
+  return null;
+};
+const 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);
+};
+const useRefreshDatasourceItem = item => {
+  var _item$data, _item$data$key, _item$data$key$data;
+  const url = item === null || item === void 0 ? void 0 : (_item$data = item.data) === null || _item$data === void 0 ? void 0 : (_item$data$key = _item$data.key) === null || _item$data$key === void 0 ? void 0 : (_item$data$key$data = _item$data$key.data) === null || _item$data$key$data === void 0 ? void 0 : _item$data$key$data.url;
+
+  // passing empty string to the hook isn't ideal, but the alternatives are too much effort for this small fix.
+  const reloadSmartLinkAction = useSmartLinkReload({
+    url: url || ''
+  });
+  return useCallback(() => {
+    if (url) {
+      reloadSmartLinkAction();
+    }
+  }, [reloadSmartLinkAction, url]);
+};
+export const InlineEditOld = ({
+  ari,
+  execute,
+  executeFetch,
+  readView,
+  columnKey,
+  columnTitle,
+  datasourceTypeWithValues
+}) => {
+  const [isEditing, setIsEditing] = useState(false);
+  const [editValues, setEditValues] = useState(datasourceTypeWithValues);
+  const item = useDatasourceItem({
+    id: ari
+  });
+  const {
+    entityType,
+    integrationKey
+  } = item || {};
+  const {
+    showErrorFlag
+  } = useDatasourceTableFlag();
+  const {
+    onUpdateItem
+  } = useDatasourceActions();
+  const {
+    fireEvent
+  } = useDatasourceAnalyticsEvents();
+  const refreshDatasourceItem = useRefreshDatasourceItem(item);
+  const experienceId = useDatasourceExperienceId();
+  const onCommitUpdate = useCallback(newValue => {
+    if (!item) {
+      setIsEditing(false);
+      return;
+    }
+    const existingData = item.data;
+    const newItem = mapUpdatedItem(item.data, columnKey, newValue);
+    if (!newItem || !isNewValue(columnKey, newItem, existingData)) {
+      setIsEditing(false);
+      return;
+    }
+    onUpdateItem(ari, newItem);
+    fireEvent('ui.form.submitted.inlineEdit', {});
+    let 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 {
+        // 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(error => {
+      const status = error && typeof error === 'object' ? error.status : undefined;
+      showErrorFlag({
+        status
+      });
+      onUpdateItem(ari, existingData);
+    });
+    setIsEditing(false);
+  }, [item, columnKey, onUpdateItem, ari, refreshDatasourceItem, fireEvent, execute, showErrorFlag]);
+  const onEdit = useCallback(() => {
+    setIsEditing(true);
+    if (experienceId) {
+      startUfoExperience({
+        name: InlineEditUFOExperience
+      }, experienceId);
+    }
+    if (integrationKey && entityType) {
+      fireEvent('ui.inlineEdit.clicked.datasource', {
+        integrationKey,
+        entityType,
+        fieldKey: columnKey
+      });
+    }
+  }, [columnKey, entityType, experienceId, fireEvent, integrationKey]);
+  const onCancelEdit = useCallback(() => {
+    setIsEditing(false);
+    if (integrationKey && entityType) {
+      fireEvent('ui.inlineEdit.cancelled.datasource', {
+        integrationKey,
+        entityType,
+        fieldKey: columnKey
+      });
+    }
+  }, [columnKey, entityType, fireEvent, integrationKey]);
+  const {
+    formatMessage
+  } = useIntl();
+  const editButtonLabel = useMemo(() => {
+    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,
+    executeFetch,
+    labelId: getFieldLabelById(columnKey)
+  }), {
+    hideActionButtons: true,
+    readView: editableRenderType({
+      defaultValue: datasourceTypeWithValues,
+      readView
+    }),
+    readViewFitContainerWidth: true,
+    isEditing: isEditing,
+    onEdit: onEdit,
+    onCancel: onCancelEdit,
+    onConfirm: () => 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.
+ *
+ */
+const editableRenderType = ({
+  defaultValue,
+  readView
+}) => {
+  return () => {
+    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/es2019/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/es2019/ui/issue-like-table/table-cell-content/inline-edit.js

@@ -1,9 +1,12 @@
+/* inline-edit.tsx generated by @compiled/babel-plugin v0.36.0 */
 import _extends from "@babel/runtime/helpers/extends";
+import "./inline-edit.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
 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';
@@ -13,11 +16,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 const InlineEditUFOExperience = 'inline-edit-rendered';
-const editContainerStyles = xcss({
-  marginBlockStart: 'space.negative.100'
-});
+const 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.
@@ -125,7 +129,7 @@ const useRefreshDatasourceItem = item => {
     }
   }, [reloadSmartLinkAction, url]);
 };
-export const InlineEdit = ({
+const InlineEditNew = ({
   ari,
   execute,
   executeFetch,
@@ -230,7 +234,7 @@ export const InlineEdit = ({
     });
   }, [columnTitle, formatMessage, editValues]);
   return /*#__PURE__*/React.createElement(Box, {
-    xcss: editContainerStyles
+    xcss: styles.editContainerStyles
   }, /*#__PURE__*/React.createElement(AKInlineEdit, _extends({}, editType({
     defaultValue: datasourceTypeWithValues,
     currentValue: editValues,
@@ -251,6 +255,13 @@ export const InlineEdit = ({
     editButtonLabel: editButtonLabel
   })));
 };
+export const InlineEdit = props => {
+  if (fg('bandicoots-compiled-migration-link-datasource')) {
+    return /*#__PURE__*/React.createElement(InlineEditNew, props);
+  } else {
+    return /*#__PURE__*/React.createElement(InlineEditOld, props);
+  }
+};
 
 /**
  *