@atlaskit/link-datasource 1.19.46 → 1.21.0

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

@@ -53,54 +53,77 @@ var stringifyType = exports.stringifyType = function stringifyType(_ref, formatM
   }
 };
 var fallbackRenderType = exports.fallbackRenderType = function fallbackRenderType(item) {
-  var _item$value, _item$value2, _item$value3;
   switch (item.type) {
     case 'boolean':
-      return /*#__PURE__*/_react.default.createElement(_boolean.default, {
-        value: item.value
+      return item.values.map(function (booleanValue) {
+        return /*#__PURE__*/_react.default.createElement(_boolean.default, {
+          value: booleanValue
+        });
       });
     case 'date':
-      return /*#__PURE__*/_react.default.createElement(_dateTime.default, {
-        value: item.value,
-        display: "date"
+      return item.values.map(function (dateValue) {
+        return /*#__PURE__*/_react.default.createElement(_dateTime.default, {
+          value: dateValue,
+          display: "date"
+        });
       });
     case 'datetime':
-      return /*#__PURE__*/_react.default.createElement(_dateTime.default, {
-        value: item.value,
-        display: "datetime"
+      return item.values.map(function (datTimeValue) {
+        return /*#__PURE__*/_react.default.createElement(_dateTime.default, {
+          value: datTimeValue,
+          display: "datetime"
+        });
       });
     case 'icon':
-      return /*#__PURE__*/_react.default.createElement(_icon.default, item.value);
+      return item.values.map(function (iconValue) {
+        return /*#__PURE__*/_react.default.createElement(_icon.default, iconValue);
+      });
     case 'link':
-      return /*#__PURE__*/_react.default.createElement(_link.default, (0, _extends2.default)({
-        key: (_item$value = item.value) === null || _item$value === void 0 ? void 0 : _item$value.url
-      }, item.value));
+      return item.values.map(function (linkValue) {
+        return /*#__PURE__*/_react.default.createElement(_link.default, (0, _extends2.default)({
+          key: linkValue === null || linkValue === void 0 ? void 0 : linkValue.url
+        }, linkValue));
+      });
     case 'number':
-      return /*#__PURE__*/_react.default.createElement(_number.default, {
-        number: item.value
+      return item.values.map(function (numberValue) {
+        return /*#__PURE__*/_react.default.createElement(_number.default, {
+          number: numberValue
+        });
       });
     case 'status':
-      return /*#__PURE__*/_react.default.createElement(_status.default, item.value);
+      return item.values.map(function (statusValue) {
+        return /*#__PURE__*/_react.default.createElement(_status.default, statusValue);
+      });
     case 'string':
-      return /*#__PURE__*/_react.default.createElement(_text.default, {
-        key: item.value,
-        text: item.value
+      return item.values.map(function (stringValue) {
+        return /*#__PURE__*/_react.default.createElement(_text.default, {
+          key: stringValue,
+          text: stringValue
+        });
       });
     case 'tag':
-      return /*#__PURE__*/_react.default.createElement(_tag.default, {
-        key: ((_item$value2 = item.value) === null || _item$value2 === void 0 ? void 0 : _item$value2.id) || ((_item$value3 = item.value) === null || _item$value3 === void 0 ? void 0 : _item$value3.text),
-        tag: item.value
+      return item.values.map(function (tagValue) {
+        return /*#__PURE__*/_react.default.createElement(_tag.default, {
+          key: (tagValue === null || tagValue === void 0 ? void 0 : tagValue.id) || (tagValue === null || tagValue === void 0 ? void 0 : tagValue.text),
+          tag: tagValue
+        });
       });
     case 'time':
-      return /*#__PURE__*/_react.default.createElement(_dateTime.default, {
-        value: item.value,
-        display: "time"
+      return item.values.map(function (timeValue) {
+        return /*#__PURE__*/_react.default.createElement(_dateTime.default, {
+          value: timeValue,
+          display: "time"
+        });
       });
     case 'user':
-      return /*#__PURE__*/_react.default.createElement(_user.default, item.value);
+      return /*#__PURE__*/_react.default.createElement(_user.default, {
+        users: item.values
+      });
     case 'richtext':
-      return /*#__PURE__*/_react.default.createElement(_richtext.default, {
-        value: item.value
+      return item.values.map(function (richValue) {
+        return /*#__PURE__*/_react.default.createElement(_richtext.default, {
+          value: richValue
+        });
       });
     default:
       return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null);

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

@@ -1,36 +1,102 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.USER_TYPE_TEST_ID = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
+var _react2 = require("@emotion/react");
 var _styled = _interopRequireDefault(require("@emotion/styled"));
 var _reactIntlNext = require("react-intl-next");
 var _avatar = _interopRequireDefault(require("@atlaskit/avatar"));
+var _avatarGroup = _interopRequireDefault(require("@atlaskit/avatar-group"));
+var _primitives = require("@atlaskit/primitives");
+var _widthDetector = require("@atlaskit/width-detector");
 var _styled2 = require("../../styled");
 var _messages = require("./messages");
-var _templateObject, _templateObject2;
-var UserWrapper = _styled.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-items: center;\n  font-size: ", ";\n"])), _styled2.FieldTextFontSize);
-var AvatarWrapper = _styled.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  margin-right: 5px;\n"])));
+var _templateObject;
+/** @jsx jsx */
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+var userWrapperStyles = (0, _primitives.xcss)({
+  display: 'flex',
+  alignItems: 'center',
+  fontSize: "".concat(_styled2.FieldTextFontSize, "px")
+});
+var avatarWrapperStyles = (0, _primitives.xcss)({
+  marginRight: '5px'
+});
+var widthObserverWrapperStyles = (0, _primitives.xcss)({
+  position: 'relative'
+});
+var AvatarGroupWrapperStyles = _styled.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  /*\n  The css from editor core package affects the padding of the AvatarGroup\n  The & refers to the parent selector (.<generated className>),\n  so && becomes .<generated className>.<generated className> which increases its specificity\n  */\n  && ul {\n    padding-left: 0px;\n  }\n"])));
+var getMaxUserCount = function getMaxUserCount(userCount, availableWidth) {
+  if (availableWidth <= 28) {
+    // If width is less than or equal to 28px, we should only display the user count
+    return 1;
+  }
+  var defaultMaxCount = 5;
+  var usersNumFitToAvailableWidth = Math.ceil((availableWidth - 28) / 20);
+  return usersNumFitToAvailableWidth > defaultMaxCount ? defaultMaxCount : usersNumFitToAvailableWidth;
+};
 var USER_TYPE_TEST_ID = exports.USER_TYPE_TEST_ID = 'link-datasource-render-type--user';
 var UserType = function UserType(_ref) {
-  var avatarSource = _ref.avatarSource,
-    _ref$avatarSize = _ref.avatarSize,
-    avatarSize = _ref$avatarSize === void 0 ? 'small' : _ref$avatarSize,
-    displayName = _ref.displayName,
-    _ref$testId = _ref.testId,
-    testId = _ref$testId === void 0 ? USER_TYPE_TEST_ID : _ref$testId,
-    children = _ref.children;
-  return /*#__PURE__*/_react.default.createElement(UserWrapper, {
-    "data-testid": testId
-  }, /*#__PURE__*/_react.default.createElement(AvatarWrapper, null, /*#__PURE__*/_react.default.createElement(_avatar.default, {
-    appearance: "circle",
-    size: avatarSize,
-    src: avatarSource,
-    testId: "".concat(testId, "--avatar")
-  })), children || displayName || /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _messages.userTypeMessages.userDefaultdisplayNameValue));
+  var users = _ref.users;
+  var _useState = (0, _react.useState)(null),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    width = _useState2[0],
+    setWidth = _useState2[1];
+  if (users.length <= 1) {
+    var _ref2 = users[0] || {},
+      avatarSource = _ref2.avatarSource,
+      _ref2$avatarSize = _ref2.avatarSize,
+      avatarSize = _ref2$avatarSize === void 0 ? 'small' : _ref2$avatarSize,
+      displayName = _ref2.displayName,
+      _ref2$testId = _ref2.testId,
+      testId = _ref2$testId === void 0 ? USER_TYPE_TEST_ID : _ref2$testId,
+      children = _ref2.children;
+    return (0, _react2.jsx)(_primitives.Box, {
+      xcss: userWrapperStyles,
+      testId: testId
+    }, (0, _react2.jsx)(_primitives.Box, {
+      xcss: avatarWrapperStyles
+    }, (0, _react2.jsx)(_avatar.default, {
+      appearance: "circle",
+      size: avatarSize || 'small',
+      src: avatarSource,
+      testId: "".concat(testId, "--avatar")
+    })), children || displayName || (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _messages.userTypeMessages.userDefaultdisplayNameValue));
+  } else {
+    var maxCount = width !== null ? getMaxUserCount(users.length, width) : 5;
+    var data = users.filter(function (user) {
+      return !!user.displayName;
+    }).map(function (_ref3) {
+      var atlassianUserId = _ref3.atlassianUserId,
+        displayName = _ref3.displayName,
+        avatarSource = _ref3.avatarSource,
+        testId = _ref3.testId;
+      return {
+        key: atlassianUserId,
+        name: displayName,
+        src: avatarSource,
+        testId: "".concat(testId, "--avatar")
+      };
+    });
+    return (0, _react2.jsx)(AvatarGroupWrapperStyles, null, (0, _react2.jsx)(_primitives.Box, {
+      xcss: widthObserverWrapperStyles
+    }, (0, _react2.jsx)(_widthDetector.WidthObserver, {
+      setWidth: setWidth
+    })), (0, _react2.jsx)(_avatarGroup.default, {
+      data: data,
+      maxCount: maxCount,
+      size: "small",
+      isTooltipDisabled: true,
+      testId: USER_TYPE_TEST_ID
+    }));
+  }
 };
 var _default = exports.default = UserType;

package/dist/es2019/hooks/useDatasourceTableState.js

@@ -16,12 +16,14 @@ export const useDatasourceTableState = ({
   } = useErrorLogger();
   const idFieldCount = 1;
   const keyFieldCount = 1;
+  const [initialEmptyArray] = useState([]);
   const [defaultVisibleColumnKeys, setDefaultVisibleColumnKeys] = useState([]);
   const [lastRequestedFieldKeys, setLastRequestedFieldKeys] = useState([]);
   const [fullSchema, setFullSchema] = useState({
     properties: []
   });
   const [status, setStatus] = useState('empty');
+  const [authDetails, setAuthDetails] = useState([]);
   const [responseItems, setResponseItems] = useState([]);
   const [hasNextPage, setHasNextPage] = useState(true);
   const [nextCursor, setNextCursor] = useState(undefined);
@@ -41,7 +43,8 @@ export const useDatasourceTableState = ({
     try {
       const {
         meta: {
-          access
+          access,
+          auth
         },
         data: {
           schema
@@ -49,12 +52,9 @@ export const useDatasourceTableState = ({
       } = await getDatasourceDetails(datasourceId, {
         parameters
       });
-      if (access === 'unauthorized') {
-        setStatus('unauthorized');
-        return;
-      }
-      if (access === 'forbidden') {
-        setStatus('forbidden');
+      if (access === 'unauthorized' || access === 'forbidden') {
+        setStatus(access);
+        setAuthDetails(auth || initialEmptyArray);
         return;
       }
       const isColumnNotPresentInCurrentColumnsList = col => !columns.find(column => column.key === col.key);
@@ -73,7 +73,7 @@ export const useDatasourceTableState = ({
       }
       setStatus('rejected');
     }
-  }, [captureError, columns, datasourceId, getDatasourceDetails, parameters]);
+  }, [captureError, columns, datasourceId, getDatasourceDetails, parameters, initialEmptyArray]);
   const applySchemaProperties = useCallback((schema, fieldKeys) => {
     let {
       properties,
@@ -131,7 +131,8 @@ export const useDatasourceTableState = ({
         meta: {
           access,
           destinationObjectTypes,
-          extensionKey
+          extensionKey,
+          auth
         },
         data: {
           items,
@@ -140,12 +141,9 @@ export const useDatasourceTableState = ({
           schema
         }
       } = await getDatasourceData(datasourceId, datasourceDataRequest, shouldForceRequest);
-      if (access === 'unauthorized') {
-        setStatus('unauthorized');
-        return;
-      }
-      if (access === 'forbidden') {
-        setStatus('forbidden');
+      if (access === 'unauthorized' || access === 'forbidden') {
+        setStatus(access);
+        setAuthDetails(auth || initialEmptyArray);
         return;
       }
       setExtensionKey(extensionKey);
@@ -192,23 +190,26 @@ export const useDatasourceTableState = ({
       }
       setStatus('rejected');
     }
-  }, [captureError, parameters, fieldKeys, nextCursor, getDatasourceData, datasourceId, responseItems, applySchemaProperties, fireEvent, fullSchema]);
+  }, [captureError, parameters, fieldKeys, nextCursor, getDatasourceData, datasourceId, responseItems, applySchemaProperties, fireEvent, fullSchema, initialEmptyArray]);
   const reset = useCallback(options => {
-    setStatus('empty');
-    setResponseItems([]);
+    setResponseItems(initialEmptyArray);
     setHasNextPage(true);
     setNextCursor(undefined);
     setTotalCount(undefined);
-    setLastRequestedFieldKeys([]);
+    setLastRequestedFieldKeys(initialEmptyArray);
+    setAuthDetails(initialEmptyArray);
     setFullSchema({
-      properties: []
+      properties: initialEmptyArray
     });
     setShouldForceRequest((options === null || options === void 0 ? void 0 : options.shouldForceRequest) || false);
     if (options !== null && options !== void 0 && options.shouldResetColumns) {
-      setColumns([]);
-      setDefaultVisibleColumnKeys([]);
+      setColumns(initialEmptyArray);
+      setDefaultVisibleColumnKeys(initialEmptyArray);
     }
-  }, []);
+
+    // setting the status earlier is triggering useEffects without all reset state values, hence placing this as the last state reset item
+    setStatus('empty');
+  }, [initialEmptyArray]);
 
   // this takes care of requesting /data initially
   useEffect(() => {
@@ -255,6 +256,7 @@ export const useDatasourceTableState = ({
     defaultVisibleColumnKeys,
     totalCount,
     extensionKey,
-    destinationObjectTypes
+    destinationObjectTypes,
+    authDetails
   };
 };

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

@@ -54,5 +54,25 @@ export const loadingErrorMessages = defineMessages({
     id: 'linkDataSource.jira-issues.no.jira.sites.access.description',
     description: 'Description that shows in the modal when user has no access to any Jira sites',
     defaultMessage: 'To request access, contact your admin.'
+  },
+  authScreenHeaderText: {
+    id: 'linkDataSource.datasource.table.authScreenHeaderText',
+    defaultMessage: 'Connect your account',
+    description: 'Header text to be displayed in the auth screen UI.'
+  },
+  authScreenDescriptionText: {
+    id: 'linkDataSource.datasource.table.authScreenDescriptionText',
+    defaultMessage: 'Connect your account to collaborate on work across Atlassian products.',
+    description: 'Description text to be displayed in the auth screen UI.'
+  },
+  learnMoreAboutSmartLinks: {
+    id: 'linkDataSource.datasource.table.learnMoreAboutSmartLinks',
+    defaultMessage: 'Learn more about Smart Links.',
+    description: 'An anchor link to redirect user to a page about Smart Links.'
+  },
+  authConnectButtonText: {
+    id: 'linkDataSource.datasource.table.authConnectButtonText',
+    defaultMessage: 'Connect',
+    description: 'Label for the authentication button.'
   }
 });