@atlaskit/link-datasource 3.12.1 → 3.13.1

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

@@ -6,17 +6,13 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
-var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _react = _interopRequireWildcard(require("react"));
-var _linkingTypes = require("@atlaskit/linking-types");
 var _lozenge = _interopRequireDefault(require("@atlaskit/lozenge"));
 var _select = _interopRequireDefault(require("@atlaskit/select"));
 var _ufoExperiences = require("../../../../analytics/ufoExperiences");
 var _datasourceExperienceId = require("../../../../contexts/datasource-experience-id");
-var _useDatasourceTableFlag = require("../../../../hooks/useDatasourceTableFlag");
+var _useLoadOptions2 = require("../../../../hooks/useLoadOptions");
 var _inlineEdit = require("../../table-cell-content/inline-edit");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
@@ -24,12 +20,12 @@ var StatusEditType = function StatusEditType(props) {
   var _currentValue$values;
   var currentValue = props.currentValue,
     executeFetch = props.executeFetch;
-  var _useStatusOptions = useStatusOptions({
+  var _useLoadOptions = (0, _useLoadOptions2.useLoadOptions)({
       executeFetch: executeFetch
     }),
-    options = _useStatusOptions.options,
-    isLoading = _useStatusOptions.isLoading,
-    hasFailed = _useStatusOptions.hasFailed;
+    options = _useLoadOptions.options,
+    isLoading = _useLoadOptions.isLoading,
+    hasFailed = _useLoadOptions.hasFailed;
   var experienceId = (0, _datasourceExperienceId.useDatasourceExperienceId)();
   (0, _react.useEffect)(function () {
     if (!experienceId) {
@@ -46,18 +42,18 @@ var StatusEditType = function StatusEditType(props) {
     }
   }, [experienceId, isLoading, hasFailed]);
   return /*#__PURE__*/_react.default.createElement(_select.default, (0, _extends2.default)({}, props, {
-    testId: "inline-edit-status",
     autoFocus: true,
+    options: options,
     defaultMenuIsOpen: true,
     blurInputOnSelect: true,
+    menuPlacement: "auto",
+    isLoading: isLoading,
+    filterOption: filterOption,
+    testId: "inline-edit-status",
     getOptionValue: function getOptionValue(option) {
       return option.text;
     },
-    options: options,
-    isLoading: isLoading,
     defaultValue: currentValue === null || currentValue === void 0 || (_currentValue$values = currentValue.values) === null || _currentValue$values === void 0 ? void 0 : _currentValue$values[0],
-    filterOption: filterOption,
-    menuPlacement: "auto",
     formatOptionLabel: function formatOptionLabel(option) {
       return /*#__PURE__*/_react.default.createElement(_lozenge.default, (0, _extends2.default)({
         testId: "inline-edit-status-option-".concat(option.text)
@@ -74,102 +70,4 @@ var StatusEditType = function StatusEditType(props) {
 var filterOption = function filterOption(option, inputValue) {
   return option.data.text.toLowerCase().includes(inputValue.toLowerCase());
 };
-var useStatusOptions = function useStatusOptions(_ref) {
-  var fetchInputs = _ref.fetchInputs,
-    executeFetch = _ref.executeFetch;
-  var _useState = (0, _react.useState)({
-      isLoading: true,
-      options: [],
-      hasFailed: false
-    }),
-    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-    _useState2$ = _useState2[0],
-    options = _useState2$.options,
-    isLoading = _useState2$.isLoading,
-    hasFailed = _useState2$.hasFailed,
-    setOptions = _useState2[1];
-  var _useDatasourceTableFl = (0, _useDatasourceTableFlag.useDatasourceTableFlag)({
-      isFetchAction: true
-    }),
-    showErrorFlag = _useDatasourceTableFl.showErrorFlag;
-  (0, _react.useEffect)(function () {
-    var isMounted = true;
-    loadOptions(fetchInputs, executeFetch).then(function (options) {
-      if (isMounted) {
-        setOptions({
-          isLoading: false,
-          options: options,
-          hasFailed: false
-        });
-      }
-    }).catch(function (err) {
-      showErrorFlag();
-      setOptions({
-        isLoading: false,
-        options: [],
-        hasFailed: true
-      });
-    });
-    return function () {
-      isMounted = false;
-    };
-  }, [fetchInputs, executeFetch, showErrorFlag]);
-  return {
-    options: options,
-    isLoading: isLoading,
-    hasFailed: hasFailed
-  };
-};
-var loadOptions = /*#__PURE__*/function () {
-  var _ref2 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee() {
-    var fetchInputs,
-      executeFetch,
-      result,
-      operationStatus,
-      entities,
-      _args = arguments;
-    return _regenerator.default.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 = 11;
-            break;
-          }
-          _context.next = 5;
-          return executeFetch(fetchInputs);
-        case 5:
-          result = _context.sent;
-          operationStatus = result.operationStatus, entities = result.entities;
-          if (!(operationStatus === _linkingTypes.ActionOperationStatus.FAILURE)) {
-            _context.next = 9;
-            break;
-          }
-          throw new Error('Failed to fetch status options');
-        case 9:
-          if (!entities) {
-            _context.next = 11;
-            break;
-          }
-          return _context.abrupt("return", entities.map(function (entity) {
-            return {
-              id: entity.id,
-              text: entity.text,
-              style: entity.style,
-              transitionId: entity.transitionId
-            };
-          }));
-        case 11:
-          return _context.abrupt("return", []);
-        case 12:
-        case "end":
-          return _context.stop();
-      }
-    }, _callee);
-  }));
-  return function loadOptions() {
-    return _ref2.apply(this, arguments);
-  };
-}();
 var _default = exports.default = StatusEditType;

package/dist/cjs/ui/issue-like-table/edit-type/text/index.js

@@ -5,7 +5,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.toTextValue = exports.default = void 0;
+exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _react = _interopRequireWildcard(require("react"));
 var _layering = require("@atlaskit/layering");
@@ -14,12 +14,10 @@ var _ufoExperiences = require("../../../../analytics/ufoExperiences");
 var _datasourceExperienceId = require("../../../../contexts/datasource-experience-id");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-var toTextValue = exports.toTextValue = function toTextValue(typeWithValues) {
-  var _ref, _typeWithValues$value;
-  return (_ref = (_typeWithValues$value = typeWithValues.values) === null || _typeWithValues$value === void 0 ? void 0 : _typeWithValues$value[0]) !== null && _ref !== void 0 ? _ref : '';
-};
 var TextEditType = function TextEditType(props) {
+  var _currentValue$values$, _currentValue$values;
   var experienceId = (0, _datasourceExperienceId.useDatasourceExperienceId)();
+  var currentValue = props.currentValue;
   (0, _react.useEffect)(function () {
     if (experienceId) {
       (0, _ufoExperiences.succeedUfoExperience)({
@@ -37,7 +35,7 @@ var TextEditType = function TextEditType(props) {
       // We need 8px left padding to match read only version, but there is already 1px of border
       padding: "var(--ds-space-100, 8px)".concat(" calc(", "var(--ds-space-100, 8px)", " - 1px)")
     },
-    value: toTextValue(props.currentValue),
+    value: (_currentValue$values$ = currentValue === null || currentValue === void 0 || (_currentValue$values = currentValue.values) === null || _currentValue$values === void 0 ? void 0 : _currentValue$values[0]) !== null && _currentValue$values$ !== void 0 ? _currentValue$values$ : '',
     onChange: function onChange(e) {
       return props.setEditValues({
         type: 'string',

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

@@ -0,0 +1,97 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _useDebounce = require("use-debounce");
+var _avatar = _interopRequireWildcard(require("@atlaskit/avatar"));
+var _select = _interopRequireDefault(require("@atlaskit/select"));
+var _ufoExperiences = require("../../../../analytics/ufoExperiences");
+var _datasourceExperienceId = require("../../../../contexts/datasource-experience-id");
+var _useLoadOptions2 = require("../../../../hooks/useLoadOptions");
+var _constants = require("../../../common/modal/popup-select/constants");
+var _user = require("../../render-type/user");
+var _inlineEdit = require("../../table-cell-content/inline-edit");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+var UserEditType = function UserEditType(props) {
+  var _currentValue$values;
+  var currentValue = props.currentValue,
+    executeFetch = props.executeFetch;
+  var _useState = (0, _react.useState)({
+      query: ''
+    }),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    fetchInputs = _useState2[0],
+    setFetchInputs = _useState2[1];
+  var _useDebouncedCallback = (0, _useDebounce.useDebouncedCallback)(function (query) {
+      return setFetchInputs({
+        query: query
+      });
+    }, _constants.SEARCH_DEBOUNCE_MS),
+    _useDebouncedCallback2 = (0, _slicedToArray2.default)(_useDebouncedCallback, 1),
+    handleUserInputDebounced = _useDebouncedCallback2[0];
+  var _useLoadOptions = (0, _useLoadOptions2.useLoadOptions)({
+      executeFetch: executeFetch,
+      fetchInputs: fetchInputs
+    }),
+    options = _useLoadOptions.options,
+    isLoading = _useLoadOptions.isLoading,
+    hasFailed = _useLoadOptions.hasFailed;
+  var experienceId = (0, _datasourceExperienceId.useDatasourceExperienceId)();
+  (0, _react.useEffect)(function () {
+    if (!experienceId) {
+      return;
+    }
+    if (hasFailed) {
+      (0, _ufoExperiences.failUfoExperience)({
+        name: _inlineEdit.InlineEditUFOExperience
+      }, experienceId);
+    } else if (!isLoading) {
+      (0, _ufoExperiences.succeedUfoExperience)({
+        name: _inlineEdit.InlineEditUFOExperience
+      }, experienceId);
+    }
+  }, [experienceId, isLoading, hasFailed]);
+  return /*#__PURE__*/_react.default.createElement(_select.default, (0, _extends2.default)({}, 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.default.createElement(_avatar.AvatarItem, {
+        avatar: /*#__PURE__*/_react.default.createElement(_avatar.default, {
+          appearance: "circle",
+          size: 'small',
+          src: option.avatarSource,
+          testId: "".concat(_user.USER_TYPE_TEST_ID, "--avatar--").concat(option.atlassianUserId)
+        }),
+        primaryText: option.displayName
+      });
+    },
+    onChange: function onChange(e) {
+      return props.setEditValues({
+        type: 'user',
+        values: e ? [e] : []
+      });
+    }
+  }));
+};
+var _default = exports.default = UserEditType;

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

@@ -29,14 +29,16 @@ var editContainerStyles = (0, _primitives.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));
 };
@@ -47,6 +49,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), {}, (0, _defineProperty2.default)({}, columnKey, {
         data: newValue.values[0]

package/dist/es2019/hooks/useLoadOptions.js

@@ -0,0 +1,63 @@
+import { useEffect, useState } from 'react';
+import { ActionOperationStatus } from '@atlaskit/linking-types';
+import { useDatasourceTableFlag } from './useDatasourceTableFlag';
+const loadOptions = async (fetchInputs = {}, executeFetch) => {
+  if (!executeFetch) {
+    return [];
+  }
+  const result = await executeFetch(fetchInputs);
+  const {
+    operationStatus,
+    entities
+  } = result;
+  if (operationStatus === ActionOperationStatus.FAILURE) {
+    throw new Error('Failed to fetch status options');
+  }
+  return entities !== null && entities !== void 0 ? entities : [];
+};
+export const useLoadOptions = ({
+  fetchInputs,
+  executeFetch
+}) => {
+  const [{
+    options,
+    isLoading,
+    hasFailed
+  }, setOptions] = useState({
+    isLoading: true,
+    options: [],
+    hasFailed: false
+  });
+  const {
+    showErrorFlag
+  } = useDatasourceTableFlag({
+    isFetchAction: true
+  });
+  useEffect(() => {
+    let isMounted = true;
+    loadOptions(fetchInputs, executeFetch).then(options => {
+      if (isMounted) {
+        setOptions({
+          isLoading: false,
+          options,
+          hasFailed: false
+        });
+      }
+    }).catch(err => {
+      showErrorFlag();
+      setOptions({
+        isLoading: false,
+        options: [],
+        hasFailed: true
+      });
+    });
+    return () => {
+      isMounted = false;
+    };
+  }, [fetchInputs, executeFetch, showErrorFlag]);
+  return {
+    options,
+    isLoading,
+    hasFailed
+  };
+};

package/dist/es2019/ui/common/error-state/loading-error.js

@@ -8,6 +8,7 @@ import { useEffect } from 'react';
 import { css, jsx } from '@emotion/react';
 import { FormattedMessage } from 'react-intl-next';
 import Button from '@atlaskit/button/standard-button';
+import { Box, Inline, Text } from '@atlaskit/primitives';
 import { fontFallback } from '@atlaskit/theme/typography';
 import { useDatasourceAnalyticsEvents } from '../../../analytics';
 import { LoadingErrorSVG } from './loading-error-svg';
@@ -27,9 +28,6 @@ const errorMessageStyles = css({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
   font: `var(--ds-font-heading-small, ${fontFallback.heading.small})`
 });
-const errorDescriptionStyles = css({
-  margin: 0
-});
 export const LoadingError = ({
   onRefresh
 }) => {
@@ -41,15 +39,16 @@ export const LoadingError = ({
       reason: 'network'
     });
   }, [fireEvent]);
-  return jsx("div", {
-    css: errorContainerStyles,
-    "data-testid": "datasource--loading-error"
-  }, jsx(LoadingErrorSVG, null), jsx("div", {
-    css: errorMessageContainerStyles
-  }, jsx("span", {
-    css: errorMessageStyles
-  }, jsx(FormattedMessage, loadingErrorMessages.unableToLoadItems)), jsx("p", {
-    css: errorDescriptionStyles
+  return jsx(Box, {
+    xcss: errorContainerStyles,
+    testId: "datasource--loading-error"
+  }, jsx(LoadingErrorSVG, null), jsx(Box, {
+    xcss: errorMessageContainerStyles
+  }, jsx(Inline, {
+    as: "span",
+    xcss: errorMessageStyles
+  }, jsx(FormattedMessage, loadingErrorMessages.unableToLoadItems)), jsx(Text, {
+    as: "p"
   }, jsx(FormattedMessage, loadingErrorMessages.checkConnection)), onRefresh && jsx(Button, {
     appearance: "primary",
     onClick: onRefresh

package/dist/es2019/ui/common/error-state/modal-loading-error.js

@@ -7,7 +7,7 @@ import { useEffect } from 'react';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
 import { FormattedMessage } from 'react-intl-next';
-import { fontFallback } from '@atlaskit/theme/typography';
+import { Box, Text } from '@atlaskit/primitives';
 import { useDatasourceAnalyticsEvents } from '../../../analytics';
 import { LoadingErrorSVG } from './loading-error-svg';
 import { loadingErrorMessages } from './messages';
@@ -22,13 +22,6 @@ const errorMessageContainerStyles = css({
   gap: "var(--ds-space-100, 8px)",
   placeItems: 'center'
 });
-const errorMessageStyles = css({
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-  font: `var(--ds-font-heading-small, ${fontFallback.heading.small})`
-});
-const errorDescriptionStyles = css({
-  margin: 0
-});
 export const ModalLoadingError = ({
   errorMessage = jsx(FormattedMessage, loadingErrorMessages.checkConnection)
 }) => {
@@ -40,14 +33,14 @@ export const ModalLoadingError = ({
       reason: 'network'
     });
   }, [fireEvent]);
-  return jsx("div", {
-    css: errorContainerStyles,
-    "data-testid": "datasource-modal--loading-error"
-  }, jsx(LoadingErrorSVG, null), jsx("div", {
-    css: errorMessageContainerStyles
-  }, jsx("span", {
-    css: errorMessageStyles
-  }, jsx(FormattedMessage, loadingErrorMessages.unableToLoadResults)), jsx("p", {
-    css: errorDescriptionStyles
+  return jsx(Box, {
+    xcss: errorContainerStyles,
+    testId: "datasource-modal--loading-error"
+  }, jsx(LoadingErrorSVG, null), jsx(Box, {
+    xcss: errorMessageContainerStyles
+  }, jsx(Text, {
+    size: "small"
+  }, jsx(FormattedMessage, loadingErrorMessages.unableToLoadResults)), jsx(Text, {
+    as: "p"
   }, errorMessage)));
 };

package/dist/es2019/ui/common/error-state/no-instances.js

@@ -3,18 +3,16 @@
  * @jsx jsx
  */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { css, jsx } from '@emotion/react';
+import { jsx } from '@emotion/react';
 import { useIntl } from 'react-intl-next';
-import { Flex, xcss } from '@atlaskit/primitives';
-import { fontFallback } from '@atlaskit/theme/typography';
+import { Flex, Inline, xcss } from '@atlaskit/primitives';
 import { NoInstancesSvg } from './no-instances-svg';
-const titleStyles = css({
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-  font: `var(--ds-font-heading-small, ${fontFallback.heading.small})`,
-  marginTop: "var(--ds-space-200, 16px)"
+const titleStyles = xcss({
+  font: 'font.heading.small',
+  marginTop: 'space.200'
 });
-const descriptionStyles = css({
-  marginTop: "var(--ds-space-100, 8px)"
+const descriptionStyles = xcss({
+  marginTop: 'space.100'
 });
 const containerStyles = xcss({
   marginTop: 'space.800'
@@ -32,9 +30,11 @@ export const NoInstancesView = ({
     direction: "column",
     alignItems: "center",
     xcss: containerStyles
-  }, jsx(NoInstancesSvg, null), jsx("span", {
-    css: titleStyles
-  }, formatMessage(title)), jsx("span", {
-    css: descriptionStyles
+  }, jsx(NoInstancesSvg, null), jsx(Inline, {
+    as: "span",
+    xcss: titleStyles
+  }, formatMessage(title)), jsx(Inline, {
+    as: "span",
+    xcss: descriptionStyles
   }, formatMessage(description)));
 };

package/dist/es2019/ui/common/error-state/no-results.js

@@ -5,28 +5,22 @@
 import { useEffect } from 'react';
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { css, jsx } from '@emotion/react';
+import { jsx } from '@emotion/react';
 import { FormattedMessage } from 'react-intl-next';
 import Button from '@atlaskit/button/standard-button';
-import { fontFallback } from '@atlaskit/theme/typography';
+import { Grid, Text, xcss } from '@atlaskit/primitives';
 import { useDatasourceAnalyticsEvents } from '../../../analytics';
 import { loadingErrorMessages } from './messages';
-const noResultsContainerStyles = css({
-  margin: `${"var(--ds-space-500, 40px)"} auto`,
-  display: 'grid',
-  gap: "var(--ds-space-300, 24px)",
+const noResultsContainerStyles = xcss({
+  margin: 'space.500',
+  gap: 'space.300',
   placeItems: 'center',
   placeSelf: 'center'
 });
-const noResultsMessageContainerStyles = css({
-  display: 'grid',
-  gap: "var(--ds-space-100, 8px)",
+const noResultsMessageContainerStyles = xcss({
+  gap: 'space.100',
   placeItems: 'center'
 });
-const noResultsMessageStyles = css({
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-  font: `var(--ds-font-heading-small, ${fontFallback.heading.small})`
-});
 export const NoResults = ({
   onRefresh
 }) => {
@@ -36,9 +30,9 @@ export const NoResults = ({
   useEffect(() => {
     fireEvent('ui.emptyResult.shown.datasource', {});
   }, [fireEvent]);
-  return jsx("div", {
-    css: noResultsContainerStyles,
-    "data-testid": "datasource-modal--no-results"
+  return jsx(Grid, {
+    xcss: noResultsContainerStyles,
+    testId: "datasource-modal--no-results"
   }, jsx("svg", {
     width: "131",
     height: "120",
@@ -164,10 +158,12 @@ export const NoResults = ({
     width: "130.927",
     height: "120",
     fill: "white"
-  })))), jsx("div", {
-    css: noResultsMessageContainerStyles
-  }, jsx("span", {
-    css: noResultsMessageStyles
+  })))), jsx(Grid, {
+    xcss: noResultsMessageContainerStyles
+  }, jsx(Text, {
+    as: "span",
+    size: "large",
+    weight: "bold"
   }, jsx(FormattedMessage, loadingErrorMessages.noResultsFound)), onRefresh && jsx(Button, {
     appearance: "primary",
     onClick: onRefresh

package/dist/es2019/ui/common/modal/count-view-smart-link/index.js

@@ -3,32 +3,36 @@
  * @jsx jsx
  */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { css, jsx } from '@emotion/react';
+import { jsx } from '@emotion/react';
 import { FormattedMessage } from 'react-intl-next';
-import { B400, N0 } from '@atlaskit/theme/colors';
+import { Box, xcss } from '@atlaskit/primitives';
 import LinkRenderType from '../../../issue-like-table/render-type/link';
-const placeholderSmartLinkStyles = css({
-  backgroundColor: `var(--ds-surface-raised, ${N0})`,
+const placeholderSmartLinkStyles = xcss({
+  backgroundColor: 'elevation.surface.raised',
   borderRadius: "var(--ds-border-radius-200, 3px)",
-  boxShadow: '0px 1px 1px rgba(9, 30, 66, 0.25), 0px 0px 1px rgba(9, 30, 66, 0.31)',
-  color: `var(--ds-text-brand, ${B400})`,
-  padding: `${"var(--ds-space-0, 0px)"} ${"var(--ds-space-025, 2px)"}`
+  color: 'color.text.brand',
+  paddingTop: 'space.0',
+  paddingBottom: 'space.0',
+  paddingLeft: 'space.025',
+  paddingRight: 'space.025',
+  boxShadow: 'elevation.shadow.raised'
 });
-const smartLinkContainerStyles = css({
-  paddingLeft: "var(--ds-space-025, 2px)"
+const smartLinkContainerStyles = xcss({
+  paddingLeft: 'space.025'
 });
 export const SmartCardPlaceholder = ({
   placeholderText
-}) => jsx("div", {
-  css: smartLinkContainerStyles
-}, jsx("span", {
-  "data-testid": `datasource-modal--smart-card-placeholder`,
-  css: placeholderSmartLinkStyles
+}) => jsx(Box, {
+  xcss: smartLinkContainerStyles
+}, jsx(Box, {
+  as: "span",
+  testId: "datasource-modal--smart-card-placeholder",
+  xcss: placeholderSmartLinkStyles
 }, jsx(FormattedMessage, placeholderText)));
 export const SmartLink = ({
   url
-}) => jsx("div", {
-  css: smartLinkContainerStyles
+}) => jsx(Box, {
+  xcss: smartLinkContainerStyles
 }, jsx(LinkRenderType, {
   url: url
 }));