@atlaskit/link-datasource 3.19.2 → 3.20.0

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

@@ -0,0 +1,179 @@
+import React from 'react';
+import { useIntl } from 'react-intl-next';
+import { Box, xcss } from '@atlaskit/primitives';
+import Tooltip from '@atlaskit/tooltip';
+import { useDatasourceItem } from '../../../state';
+import { useExecuteAtomicAction } from '../../../state/actions';
+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'
+});
+var TooltipWrapper = function TooltipWrapper(_ref) {
+  var columnKey = _ref.columnKey,
+    _ref$datasourceTypeWi = _ref.datasourceTypeWithValues,
+    type = _ref$datasourceTypeWi.type,
+    values = _ref$datasourceTypeWi.values,
+    wrappedColumnKeys = _ref.wrappedColumnKeys,
+    children = _ref.children;
+  var intl = useIntl();
+  var stringifiedContent = values.map(function (value) {
+    return stringifyType({
+      type: type,
+      value: value
+    }, intl.formatMessage, intl.formatDate);
+  }).filter(function (value) {
+    return value !== '';
+  }).join(', ');
+  if (stringifiedContent && !(wrappedColumnKeys !== null && wrappedColumnKeys !== void 0 && wrappedColumnKeys.includes(columnKey))) {
+    return /*#__PURE__*/React.createElement(Tooltip
+    // @ts-ignore: [PIT-1685] Fails in post-office due to backwards incompatibility issue with React 18
+    , {
+      tag: TruncateTextTag,
+      content: stringifiedContent,
+      testId: "issues-table-cell-tooltip"
+    }, children);
+  }
+  return /*#__PURE__*/React.createElement(React.Fragment, null, children);
+};
+export var ReadOnlyCell = function ReadOnlyCell(_ref2) {
+  var _useDatasourceItem, _rowData$columnKey;
+  var id = _ref2.id,
+    columnType = _ref2.columnType,
+    _ref2$wrappedColumnKe = _ref2.wrappedColumnKeys,
+    wrappedColumnKeys = _ref2$wrappedColumnKe === void 0 ? [] : _ref2$wrappedColumnKe,
+    renderItem = _ref2.renderItem,
+    columnKey = _ref2.columnKey;
+  var rowData = (_useDatasourceItem = useDatasourceItem({
+    id: id
+  })) === null || _useDatasourceItem === void 0 ? void 0 : _useDatasourceItem.data;
+  if (!rowData || !columnKey || !rowData[columnKey]) {
+    return null;
+  }
+
+  // Need to make sure we keep falsy values like 0 and '', as well as the boolean false.
+  var value = (_rowData$columnKey = rowData[columnKey]) === null || _rowData$columnKey === void 0 ? void 0 : _rowData$columnKey.data;
+  var values = Array.isArray(value) ? value : [value];
+  var datasourceTypeWithValues = {
+    type: columnType,
+    values: values
+  };
+  return /*#__PURE__*/React.createElement(TooltipWrapper, {
+    columnKey: columnKey,
+    datasourceTypeWithValues: datasourceTypeWithValues,
+    wrappedColumnKeys: wrappedColumnKeys
+  }, renderItem(datasourceTypeWithValues));
+};
+var InlineEditableCell = function InlineEditableCell(_ref3) {
+  var ari = _ref3.ari,
+    values = _ref3.values,
+    columnKey = _ref3.columnKey,
+    columnTitle = _ref3.columnTitle,
+    renderItem = _ref3.renderItem,
+    integrationKey = _ref3.integrationKey,
+    wrappedColumnKeys = _ref3.wrappedColumnKeys;
+  // Callbacks are returned only when the ari is editable and the action schemas exist in the store
+  var _useExecuteAtomicActi = useExecuteAtomicAction({
+      ari: ari,
+      fieldKey: columnKey,
+      integrationKey: integrationKey
+    }),
+    execute = _useExecuteAtomicActi.execute,
+    executeFetch = _useExecuteAtomicActi.executeFetch;
+
+  // A field is editable when `execute` is returned from the store
+  var isEditable = !!execute;
+  var readView = /*#__PURE__*/React.createElement(TooltipWrapper, {
+    columnKey: columnKey,
+    datasourceTypeWithValues: values,
+    wrappedColumnKeys: wrappedColumnKeys
+  }, /*#__PURE__*/React.createElement(Box, {
+    testId: "inline-edit-read-view",
+    paddingInline: isEditable ? 'space.075' : 'space.100',
+    paddingBlock: "space.050",
+    xcss: readViewStyles
+  }, renderItem(values)));
+  if (!isEditable) {
+    return readView;
+  }
+
+  // if the field requires to fetch options to execute, then is editable only if `executeFetch` is defined
+  // `executeFetch` is returned only when ff:`enable_datasource_supporting_actions` is enabled
+  if (isEditTypeSelectable(values.type) && !executeFetch) {
+    return readView;
+  }
+  return /*#__PURE__*/React.createElement(InlineEdit, {
+    ari: ari,
+    execute: execute,
+    executeFetch: executeFetch,
+    readView: readView,
+    columnKey: columnKey,
+    columnTitle: columnTitle,
+    datasourceTypeWithValues: values
+  });
+};
+var toDatasourceTypeWithValues = function toDatasourceTypeWithValues(_ref4) {
+  var _rowData$columnKey2;
+  var rowData = _ref4.rowData,
+    columnKey = _ref4.columnKey,
+    columnType = _ref4.columnType;
+  // Need to make sure we keep falsy values like 0 and '', as well as the boolean false.
+  var value = (_rowData$columnKey2 = rowData[columnKey]) === null || _rowData$columnKey2 === void 0 ? void 0 : _rowData$columnKey2.data;
+  var values = !value ? [] : Array.isArray(value) ? value : [value];
+  return {
+    type: columnType,
+    values: values
+  };
+};
+export var TableCellContentOld = function TableCellContentOld(_ref5) {
+  var id = _ref5.id,
+    columnKey = _ref5.columnKey,
+    columnTitle = _ref5.columnTitle,
+    columnType = _ref5.columnType,
+    renderItem = _ref5.renderItem,
+    wrappedColumnKeys = _ref5.wrappedColumnKeys;
+  var item = useDatasourceItem({
+    id: id
+  });
+  if (item) {
+    var integrationKey = item.integrationKey,
+      ari = item.ari,
+      rowData = item.data;
+    var isEditType = !!ari && !!integrationKey && isEditTypeSupported(columnType);
+    if (isEditType) {
+      return /*#__PURE__*/React.createElement(InlineEditableCell, {
+        ari: ari,
+        columnKey: columnKey,
+        columnTitle: columnTitle,
+        renderItem: renderItem,
+        integrationKey: integrationKey,
+        values: toDatasourceTypeWithValues({
+          rowData: rowData,
+          columnKey: columnKey,
+          columnType: columnType
+        }),
+        wrappedColumnKeys: wrappedColumnKeys
+      });
+    }
+  }
+  return /*#__PURE__*/React.createElement(Box, {
+    testId: "inline-edit-read-view",
+    paddingInline: "space.100",
+    paddingBlock: "space.050",
+    xcss: readViewStyles
+  }, /*#__PURE__*/React.createElement(ReadOnlyCell, {
+    id: id,
+    columnKey: columnKey,
+    columnTitle: columnTitle,
+    columnType: columnType,
+    wrappedColumnKeys: wrappedColumnKeys,
+    renderItem: renderItem
+  }));
+};

package/dist/esm/ui/issue-like-table/truncate-text-tag/index.compiled.css

@@ -0,0 +1,4 @@
+._18m915vq{overflow-y:hidden}
+._1bto1l2s{text-overflow:ellipsis}
+._1reo15vq{overflow-x:hidden}
+._o5721q9c{white-space:nowrap}

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

@@ -1,21 +1,25 @@
+/* index.tsx generated by @compiled/babel-plugin v0.36.0 */
 import _extends from "@babel/runtime/helpers/extends";
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
+import "./index.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
 import React, { forwardRef } from 'react';
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled
-import { css, jsx } from '@emotion/react';
-var truncateTextStyles = css({
-  overflow: 'hidden',
-  textOverflow: 'ellipsis',
-  whiteSpace: 'nowrap'
+import { fg } from "@atlaskit/platform-feature-flags";
+import { TruncateTextTagOld } from "./truncate-text-tag-old";
+var truncateTextStyles = null;
+export var TruncateTextTagNew = /*#__PURE__*/forwardRef(function (props, ref) {
+  return /*#__PURE__*/React.createElement("span", _extends({}, props, {
+    ref: ref,
+    className: ax(["_1reo15vq _18m915vq _1bto1l2s _o5721q9c"])
+  }), props.children);
 });
 export var TruncateTextTag = /*#__PURE__*/forwardRef(function (props, ref) {
-  return jsx("span", _extends({
-    css: truncateTextStyles
-  }, props, {
-    ref: ref
-  }), props.children);
+  if (fg('bandicoots-compiled-migration-link-datasource')) {
+    return /*#__PURE__*/React.createElement(TruncateTextTagNew, _extends({}, props, {
+      ref: ref
+    }));
+  } else {
+    return /*#__PURE__*/React.createElement(TruncateTextTagOld, _extends({}, props, {
+      ref: ref
+    }));
+  }
 });

package/dist/esm/ui/issue-like-table/truncate-text-tag/truncate-text-tag-old.js

@@ -0,0 +1,21 @@
+import _extends from "@babel/runtime/helpers/extends";
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import React, { forwardRef } from 'react';
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled
+import { css, jsx } from '@emotion/react';
+var truncateTextStyles = css({
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+  whiteSpace: 'nowrap'
+});
+export var TruncateTextTagOld = /*#__PURE__*/forwardRef(function (props, ref) {
+  return jsx("span", _extends({
+    css: truncateTextStyles
+  }, props, {
+    ref: ref
+  }), props.children);
+});

package/dist/esm/ui/jira-issues-modal/basic-filters/ui/index.compiled.css

@@ -0,0 +1 @@
+._19bvu2gc{padding-left:var(--ds-space-100,8px)}

package/dist/esm/ui/jira-issues-modal/basic-filters/ui/index.js

@@ -1,11 +1,16 @@
+/* index.tsx generated by @compiled/babel-plugin v0.36.0 */
+import "./index.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
 import React, { useMemo } from 'react';
-import { Flex, xcss } from '@atlaskit/primitives';
+import { fg } from "@atlaskit/platform-feature-flags";
+import { Flex } from '@atlaskit/primitives/compiled';
 import { extractValuesFromNonComplexJQL } from '../utils/extractValuesFromNonComplexJQL';
 import AsyncPopupSelect from './async-popup-select';
+import BasicFilterContainerOld from './ui-old';
 export var availableBasicFilterTypes = ['project', 'type', 'status', 'assignee'];
-var basicFilterContainerStyles = xcss({
-  paddingLeft: 'space.100'
-});
+var styles = {
+  basicFilterContainerStyles: "_19bvu2gc"
+};
 var BasicFilterContainer = function BasicFilterContainer(_ref) {
   var jql = _ref.jql,
     site = _ref.site,
@@ -18,7 +23,7 @@ var BasicFilterContainer = function BasicFilterContainer(_ref) {
   var _ref2 = site || {},
     cloudId = _ref2.cloudId;
   return /*#__PURE__*/React.createElement(Flex, {
-    xcss: basicFilterContainerStyles,
+    xcss: styles.basicFilterContainerStyles,
     gap: "space.100",
     testId: "jlol-basic-filter-container"
   }, availableBasicFilterTypes.map(function (filter) {
@@ -35,4 +40,11 @@ var BasicFilterContainer = function BasicFilterContainer(_ref) {
     });
   }));
 };
-export default BasicFilterContainer;
+var BasicFilterContainerExported = function BasicFilterContainerExported(props) {
+  if (fg('bandicoots-compiled-migration-link-datasource')) {
+    return /*#__PURE__*/React.createElement(BasicFilterContainer, props);
+  } else {
+    return /*#__PURE__*/React.createElement(BasicFilterContainerOld, props);
+  }
+};
+export default BasicFilterContainerExported;

package/dist/esm/ui/jira-issues-modal/basic-filters/ui/ui-old.js

@@ -0,0 +1,38 @@
+import React, { useMemo } from 'react';
+import { Flex, xcss } from '@atlaskit/primitives';
+import { extractValuesFromNonComplexJQL } from '../utils/extractValuesFromNonComplexJQL';
+import AsyncPopupSelect from './async-popup-select';
+export var availableBasicFilterTypes = ['project', 'type', 'status', 'assignee'];
+var basicFilterContainerStyles = xcss({
+  paddingLeft: 'space.100'
+});
+var BasicFilterContainer = function BasicFilterContainer(_ref) {
+  var jql = _ref.jql,
+    site = _ref.site,
+    onChange = _ref.onChange,
+    selections = _ref.selections,
+    isJQLHydrating = _ref.isJQLHydrating;
+  var extractedFilterValues = useMemo(function () {
+    return isJQLHydrating ? extractValuesFromNonComplexJQL(jql) : {};
+  }, [isJQLHydrating, jql]);
+  var _ref2 = site || {},
+    cloudId = _ref2.cloudId;
+  return /*#__PURE__*/React.createElement(Flex, {
+    xcss: basicFilterContainerStyles,
+    gap: "space.100",
+    testId: "jlol-basic-filter-container"
+  }, availableBasicFilterTypes.map(function (filter) {
+    var _extractedFilterValue;
+    var shouldShowHydrationLoader = isJQLHydrating && ((_extractedFilterValue = extractedFilterValues[filter]) === null || _extractedFilterValue === void 0 ? void 0 : _extractedFilterValue.length) > 0;
+    return /*#__PURE__*/React.createElement(AsyncPopupSelect, {
+      site: site,
+      filterType: filter,
+      key: filter,
+      selection: selections[filter] || [],
+      isJQLHydrating: shouldShowHydrationLoader,
+      isDisabled: !cloudId,
+      onSelectionChange: onChange
+    });
+  }));
+};
+export default BasicFilterContainer;

package/dist/esm/ui/jira-issues-modal/jira-search-container/index.compiled.css

@@ -0,0 +1,4 @@
+._16jlkb7n{flex-grow:1}
+._1e0c1txw{display:flex}
+._1tket9kd{min-height:72px}
+._4cvr1q9y{align-items:baseline}

package/dist/esm/ui/jira-issues-modal/jira-search-container/index.js

@@ -1,20 +1,17 @@
+/* index.tsx generated by @compiled/babel-plugin v0.36.0 */
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 var _excluded = ["basicInputTextValue"];
+import "./index.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; }
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { css, jsx } from '@emotion/react';
 import { useIntl } from 'react-intl-next';
 import { useDebouncedCallback } from 'use-debounce';
-import { Flex, xcss } from '@atlaskit/primitives';
+import { fg } from "@atlaskit/platform-feature-flags";
+import { Flex } from '@atlaskit/primitives/compiled';
 import { useDatasourceAnalyticsEvents } from '../../../analytics';
 import { BasicSearchInput } from '../../common/modal/basic-search-input';
 import { basicSearchInputMessages } from '../../common/modal/basic-search-input/messages';
@@ -25,18 +22,15 @@ import { useHydrateJqlQuery } from '../basic-filters/hooks/useHydrateJqlQuery';
 import { isQueryTooComplex } from '../basic-filters/utils/isQueryTooComplex';
 import { JiraJQLEditor } from '../jql-editor';
 import { buildJQL } from './buildJQL';
+import { JiraSearchContainerOld } from "./jira-search-container-old";
 import { modeSwitcherMessages } from './messages';
-var inputContainerStyles = css({
-  alignItems: 'baseline',
-  display: 'flex',
-  minHeight: '72px'
-});
-var basicSearchInputContainerStyles = xcss({
-  flexGrow: 1
-});
+var styles = {
+  basicSearchInputContainerStyles: "_16jlkb7n",
+  inputContainerStyles: "_4cvr1q9y _1e0c1txw _1tket9kd"
+};
 export var DEFAULT_JQL_QUERY = 'ORDER BY created DESC';
 export var ALLOWED_ORDER_BY_KEYS = ['key', 'summary', 'assignee', 'status', 'created'];
-export var JiraSearchContainer = function JiraSearchContainer(props) {
+export var JiraSearchContainerNew = function JiraSearchContainerNew(props) {
   var isSearching = props.isSearching,
     parameters = props.parameters,
     onSearch = props.onSearch,
@@ -204,13 +198,13 @@ export var JiraSearchContainer = function JiraSearchContainer(props) {
       setCloudId(currentCloudId);
     }
   }, [currentCloudId, cloudId, setSearchBarJql]);
-  return jsx("div", {
-    css: inputContainerStyles,
-    "data-testid": "jira-search-container"
-  }, currentSearchMethod === 'basic' && jsx(Flex, {
+  return /*#__PURE__*/React.createElement("div", {
+    "data-testid": "jira-search-container",
+    className: ax([styles.inputContainerStyles])
+  }, currentSearchMethod === 'basic' && /*#__PURE__*/React.createElement(Flex, {
     alignItems: "center",
-    xcss: basicSearchInputContainerStyles
-  }, jsx(BasicSearchInput, {
+    xcss: styles.basicSearchInputContainerStyles
+  }, /*#__PURE__*/React.createElement(BasicSearchInput, {
     isSearching: isSearching,
     onChange: handleBasicSearchChange,
     onSearch: handleSearch,
@@ -218,21 +212,28 @@ export var JiraSearchContainer = function JiraSearchContainer(props) {
     placeholder: basicSearchInputMessages.basicTextSearchLabel,
     testId: "jira-datasource-modal",
     fullWidth: false
-  }), jsx(BasicFilters, {
+  }), /*#__PURE__*/React.createElement(BasicFilters, {
     jql: searchBarJql,
     site: site,
     onChange: handleBasicFilterSelectionChange,
     selections: filterSelections,
     isJQLHydrating: basicFilterHydrationStatus === 'loading'
-  })), currentSearchMethod === 'jql' && jsx(JiraJQLEditor, {
+  })), currentSearchMethod === 'jql' && /*#__PURE__*/React.createElement(JiraJQLEditor, {
     cloudId: cloudId || '',
     isSearching: isSearching,
     onChange: onQueryChange,
     onSearch: handleSearch,
     query: searchBarJql
-  }), jsx(ModeSwitcher, {
+  }), /*#__PURE__*/React.createElement(ModeSwitcher, {
     onOptionValueChange: onSearchMethodChange,
     selectedOptionValue: currentSearchMethod,
     options: modeSwitcherOptions
   }));
+};
+export var JiraSearchContainer = function JiraSearchContainer(props) {
+  if (fg('bandicoots-compiled-migration-link-datasource')) {
+    return /*#__PURE__*/React.createElement(JiraSearchContainerNew, props);
+  } else {
+    return /*#__PURE__*/React.createElement(JiraSearchContainerOld, props);
+  }
 };