@atlaskit/link-datasource 7.8.2 → 7.10.0

package/CHANGELOG.md

@@ -1,5 +1,29 @@
 # @atlaskit/link-datasource
 
+## 7.10.0
+
+### Minor Changes
+
+- [`4b0ec5ed92261`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/4b0ec5ed92261) -
+  Update i18n NPM package versions for linking-platform,smart-experiences (Group 15)
+
+### Patch Changes
+
+- Updated dependencies
+
+## 7.9.0
+
+### Minor Changes
+
+- [`cdcc836eb6f91`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/cdcc836eb6f91) -
+  Add support for the new `objectReference` datasource type (`{ url, text?, avatarUrl? }`). Behind
+  `astral_assets_macro_table_ui_uplift` it renders as an `AvatarTag` with a Smart Link hover card
+  that opens in a new tab; when the gate is off it falls back to the existing link render type.
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 7.8.2
 
 ### Patch Changes

package/dist/cjs/ui/assets-modal/modal/render-assets-content/index.js

@@ -109,6 +109,7 @@ var RenderAssetsContent = exports.RenderAssetsContent = function RenderAssetsCon
     return /*#__PURE__*/React.createElement(_stack.Stack, {
       space: "space.200"
     }, status !== 'empty' && /*#__PURE__*/React.createElement(_heading.default, {
+      as: "h2",
       size: "xsmall"
     }, /*#__PURE__*/React.createElement(_reactIntl.FormattedMessage, _messages.modalMessages.tablePreviewText)), renderAssetsContentView());
   }

package/dist/cjs/ui/assets-modal/search-container/index.js

@@ -126,6 +126,7 @@ var AssetsSearchContainer = exports.AssetsSearchContainer = function AssetsSearc
     }, /*#__PURE__*/React.createElement(_closeButton.CloseButton, {
       onClick: onCancel
     })))), (0, _fg.fg)('astral_assets_macro_table_ui_uplift') ? /*#__PURE__*/React.createElement(_heading.default, {
+      as: "h2",
       size: "xsmall"
     }, /*#__PURE__*/React.createElement(_reactIntl.FormattedMessage, _messages.modalMessages.filterObjectsText)) : null, /*#__PURE__*/React.createElement(_styled.FormRowContainer, null, /*#__PURE__*/React.createElement(_aqlSearchInput.AqlSearchInput, {
       value: (_initialSearchData$aq = initialSearchData.aql) !== null && _initialSearchData$aq !== void 0 ? _initialSearchData$aq : DEFAULT_AQL_QUERY,

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

@@ -0,0 +1,75 @@
+"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.OBJECT_REFERENCE_TYPE_TEST_ID = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _react = _interopRequireWildcard(require("react"));
+var _reactIntl = require("react-intl");
+var _anchor = require("@atlaskit/primitives/compiled/anchor");
+var _useSmartLinkDestinationUrl = require("@atlaskit/smart-card/hook/use-smart-link-destination-url");
+var _hover = require("@atlaskit/smart-card/hover");
+var _avatarTag = _interopRequireDefault(require("@atlaskit/tag/avatar-tag"));
+var _teamsAvatar = _interopRequireDefault(require("@atlaskit/teams-avatar/teams-avatar"));
+var _messages = require("../link/messages");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+var OBJECT_REFERENCE_TYPE_TEST_ID = exports.OBJECT_REFERENCE_TYPE_TEST_ID = 'link-datasource-render-type--object-reference';
+
+/**
+ * Renders an `objectReference` datasource value as an avatar tag that links to the referenced
+ * object. Behaves like the `link` render type (opens in a new tab, shows a Smart Link hover card,
+ * honours cross-product URL wrapping) but with the look and feel of an `AvatarTag`.
+ */
+var ObjectReferenceRenderType = function ObjectReferenceRenderType(_ref) {
+  var url = _ref.url,
+    text = _ref.text,
+    avatarUrl = _ref.avatarUrl,
+    _ref$testId = _ref.testId,
+    testId = _ref$testId === void 0 ? OBJECT_REFERENCE_TYPE_TEST_ID : _ref$testId;
+  var _useIntl = (0, _reactIntl.useIntl)(),
+    formatMessage = _useIntl.formatMessage;
+  var destinationUrl = (0, _useSmartLinkDestinationUrl.useSmartLinkDestinationUrl)(url);
+  var newWindowLabel = formatMessage(_messages.messages.opensInNewTab);
+
+  // `AvatarTag` provides the controlled avatar props (size, appearance, border colour); we only
+  // supply the image source and accessible name.
+  var avatar = (0, _react.useMemo)(function () {
+    return function (props) {
+      return /*#__PURE__*/_react.default.createElement(_teamsAvatar.default, (0, _extends2.default)({}, props, {
+        src: avatarUrl,
+        name: text,
+        testId: "".concat(testId, "--avatar")
+      }));
+    };
+  }, [avatarUrl, text, testId]);
+  var linkComponent = (0, _react.useMemo)(function () {
+    return function (props) {
+      return /*#__PURE__*/_react.default.createElement(_anchor.Anchor, (0, _extends2.default)({}, props, {
+        target: "_blank",
+        rel: "noopener noreferrer",
+        newWindowLabel: newWindowLabel
+      }));
+    };
+  }, [newWindowLabel]);
+
+  // url can be undefined before data is fetched whilst adding a new column to display
+  if (!url) {
+    return null;
+  }
+  return /*#__PURE__*/_react.default.createElement(_hover.HoverCard, {
+    url: url
+  }, /*#__PURE__*/_react.default.createElement(_avatarTag.default, {
+    type: "other",
+    text: text,
+    href: destinationUrl,
+    isRemovable: false,
+    avatar: avatar,
+    linkComponent: linkComponent,
+    testId: testId
+  }));
+};
+var _default_1 = /*#__PURE__*/_react.default.memo(ObjectReferenceRenderType);
+var _default = exports.default = _default_1;

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

@@ -7,12 +7,14 @@ Object.defineProperty(exports, "__esModule", {
 exports.renderType = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _react = _interopRequireDefault(require("react"));
+var _fg = require("@atlaskit/platform-feature-flags/fg");
 var _boolean = _interopRequireDefault(require("./boolean"));
 var _dateRange = _interopRequireDefault(require("./date-range"));
 var _dateTime = _interopRequireDefault(require("./date-time"));
 var _icon = _interopRequireDefault(require("./icon"));
 var _link = _interopRequireDefault(require("./link"));
 var _number = _interopRequireDefault(require("./number"));
+var _objectReference = _interopRequireDefault(require("./object-reference"));
 var _richtext = _interopRequireDefault(require("./richtext"));
 var _status = _interopRequireDefault(require("./status"));
 var _tag = _interopRequireDefault(require("./tag"));
@@ -64,6 +66,16 @@ var renderType = exports.renderType = function renderType(item) {
           number: numberValue
         });
       });
+    case 'objectReference':
+      return item.values.map(function (objectReferenceValue) {
+        return (0, _fg.fg)('astral_assets_macro_table_ui_uplift') ? /*#__PURE__*/_react.default.createElement(_objectReference.default, (0, _extends2.default)({
+          key: objectReferenceValue === null || objectReferenceValue === void 0 ? void 0 : objectReferenceValue.url
+        }, objectReferenceValue)) : /*#__PURE__*/_react.default.createElement(_link.default, {
+          key: objectReferenceValue === null || objectReferenceValue === void 0 ? void 0 : objectReferenceValue.url,
+          url: objectReferenceValue === null || objectReferenceValue === void 0 ? void 0 : objectReferenceValue.url,
+          text: objectReferenceValue === null || objectReferenceValue === void 0 ? void 0 : objectReferenceValue.text
+        });
+      });
     case 'status':
       return item.values.map(function (statusValue) {
         return /*#__PURE__*/_react.default.createElement(_status.default, statusValue);

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

@@ -43,6 +43,7 @@ var stringifyType = exports.stringifyType = function stringifyType(_ref, formatM
         return adfPlainText || '';
       }
     case 'link':
+    case 'objectReference':
     default:
       return '';
   }

package/dist/es2019/ui/assets-modal/modal/render-assets-content/index.js

@@ -90,6 +90,7 @@ export const RenderAssetsContent = props => {
     return /*#__PURE__*/React.createElement(Stack, {
       space: "space.200"
     }, status !== 'empty' && /*#__PURE__*/React.createElement(Heading, {
+      as: "h2",
       size: "xsmall"
     }, /*#__PURE__*/React.createElement(FormattedMessage, modalMessages.tablePreviewText)), renderAssetsContentView());
   }

package/dist/es2019/ui/assets-modal/search-container/index.js

@@ -121,6 +121,7 @@ export const AssetsSearchContainer = props => {
     }, /*#__PURE__*/React.createElement(CloseButton, {
       onClick: onCancel
     })))), fg('astral_assets_macro_table_ui_uplift') ? /*#__PURE__*/React.createElement(Heading, {
+      as: "h2",
       size: "xsmall"
     }, /*#__PURE__*/React.createElement(FormattedMessage, modalMessages.filterObjectsText)) : null, /*#__PURE__*/React.createElement(FormRowContainer, null, /*#__PURE__*/React.createElement(AqlSearchInput, {
       value: (_initialSearchData$aq = initialSearchData.aql) !== null && _initialSearchData$aq !== void 0 ? _initialSearchData$aq : DEFAULT_AQL_QUERY,

package/dist/es2019/ui/issue-like-table/render-type/object-reference/index.js

@@ -0,0 +1,59 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React, { useMemo } from 'react';
+import { useIntl } from 'react-intl';
+import { Anchor } from '@atlaskit/primitives/compiled/anchor';
+import { useSmartLinkDestinationUrl } from '@atlaskit/smart-card/hook/use-smart-link-destination-url';
+import { HoverCard } from '@atlaskit/smart-card/hover';
+import AvatarTag from '@atlaskit/tag/avatar-tag';
+import TeamAvatar from '@atlaskit/teams-avatar/teams-avatar';
+import { messages } from '../link/messages';
+export const OBJECT_REFERENCE_TYPE_TEST_ID = 'link-datasource-render-type--object-reference';
+
+/**
+ * Renders an `objectReference` datasource value as an avatar tag that links to the referenced
+ * object. Behaves like the `link` render type (opens in a new tab, shows a Smart Link hover card,
+ * honours cross-product URL wrapping) but with the look and feel of an `AvatarTag`.
+ */
+const ObjectReferenceRenderType = ({
+  url,
+  text,
+  avatarUrl,
+  testId = OBJECT_REFERENCE_TYPE_TEST_ID
+}) => {
+  const {
+    formatMessage
+  } = useIntl();
+  const destinationUrl = useSmartLinkDestinationUrl(url);
+  const newWindowLabel = formatMessage(messages.opensInNewTab);
+
+  // `AvatarTag` provides the controlled avatar props (size, appearance, border colour); we only
+  // supply the image source and accessible name.
+  const avatar = useMemo(() => props => /*#__PURE__*/React.createElement(TeamAvatar, _extends({}, props, {
+    src: avatarUrl,
+    name: text,
+    testId: `${testId}--avatar`
+  })), [avatarUrl, text, testId]);
+  const linkComponent = useMemo(() => props => /*#__PURE__*/React.createElement(Anchor, _extends({}, props, {
+    target: "_blank",
+    rel: "noopener noreferrer",
+    newWindowLabel: newWindowLabel
+  })), [newWindowLabel]);
+
+  // url can be undefined before data is fetched whilst adding a new column to display
+  if (!url) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement(HoverCard, {
+    url: url
+  }, /*#__PURE__*/React.createElement(AvatarTag, {
+    type: "other",
+    text: text,
+    href: destinationUrl,
+    isRemovable: false,
+    avatar: avatar,
+    linkComponent: linkComponent,
+    testId: testId
+  }));
+};
+const _default_1 = /*#__PURE__*/React.memo(ObjectReferenceRenderType);
+export default _default_1;

package/dist/es2019/ui/issue-like-table/render-type/renderType.js

@@ -1,11 +1,13 @@
 import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
+import { fg } from '@atlaskit/platform-feature-flags/fg';
 import BooleanRenderType from './boolean';
 import DateRangeRenderType from './date-range';
 import DateTimeRenderType from './date-time';
 import IconRenderType from './icon';
 import LinkRenderType from './link';
 import NumberRenderType from './number';
+import ObjectReferenceRenderType from './object-reference';
 import RichTextRenderType from './richtext';
 import StatusRenderType from './status';
 import TagRenderType from './tag';
@@ -43,6 +45,14 @@ export const renderType = item => {
       return item.values.map(numberValue => /*#__PURE__*/React.createElement(NumberRenderType, {
         number: numberValue
       }));
+    case 'objectReference':
+      return item.values.map(objectReferenceValue => fg('astral_assets_macro_table_ui_uplift') ? /*#__PURE__*/React.createElement(ObjectReferenceRenderType, _extends({
+        key: objectReferenceValue === null || objectReferenceValue === void 0 ? void 0 : objectReferenceValue.url
+      }, objectReferenceValue)) : /*#__PURE__*/React.createElement(LinkRenderType, {
+        key: objectReferenceValue === null || objectReferenceValue === void 0 ? void 0 : objectReferenceValue.url,
+        url: objectReferenceValue === null || objectReferenceValue === void 0 ? void 0 : objectReferenceValue.url,
+        text: objectReferenceValue === null || objectReferenceValue === void 0 ? void 0 : objectReferenceValue.text
+      }));
     case 'status':
       return item.values.map(statusValue => /*#__PURE__*/React.createElement(StatusRenderType, statusValue));
     case 'string':

package/dist/es2019/ui/issue-like-table/render-type/stringifyType.js

@@ -38,6 +38,7 @@ export const stringifyType = ({
         return adfPlainText || '';
       }
     case 'link':
+    case 'objectReference':
     default:
       return '';
   }

package/dist/esm/ui/assets-modal/modal/render-assets-content/index.js

@@ -100,6 +100,7 @@ export var RenderAssetsContent = function RenderAssetsContent(props) {
     return /*#__PURE__*/React.createElement(Stack, {
       space: "space.200"
     }, status !== 'empty' && /*#__PURE__*/React.createElement(Heading, {
+      as: "h2",
       size: "xsmall"
     }, /*#__PURE__*/React.createElement(FormattedMessage, modalMessages.tablePreviewText)), renderAssetsContentView());
   }

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

@@ -117,6 +117,7 @@ export var AssetsSearchContainer = function AssetsSearchContainer(props) {
     }, /*#__PURE__*/React.createElement(CloseButton, {
       onClick: onCancel
     })))), fg('astral_assets_macro_table_ui_uplift') ? /*#__PURE__*/React.createElement(Heading, {
+      as: "h2",
       size: "xsmall"
     }, /*#__PURE__*/React.createElement(FormattedMessage, modalMessages.filterObjectsText)) : null, /*#__PURE__*/React.createElement(FormRowContainer, null, /*#__PURE__*/React.createElement(AqlSearchInput, {
       value: (_initialSearchData$aq = initialSearchData.aql) !== null && _initialSearchData$aq !== void 0 ? _initialSearchData$aq : DEFAULT_AQL_QUERY,

package/dist/esm/ui/issue-like-table/render-type/object-reference/index.js

@@ -0,0 +1,66 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React, { useMemo } from 'react';
+import { useIntl } from 'react-intl';
+import { Anchor } from '@atlaskit/primitives/compiled/anchor';
+import { useSmartLinkDestinationUrl } from '@atlaskit/smart-card/hook/use-smart-link-destination-url';
+import { HoverCard } from '@atlaskit/smart-card/hover';
+import AvatarTag from '@atlaskit/tag/avatar-tag';
+import TeamAvatar from '@atlaskit/teams-avatar/teams-avatar';
+import { messages } from '../link/messages';
+export var OBJECT_REFERENCE_TYPE_TEST_ID = 'link-datasource-render-type--object-reference';
+
+/**
+ * Renders an `objectReference` datasource value as an avatar tag that links to the referenced
+ * object. Behaves like the `link` render type (opens in a new tab, shows a Smart Link hover card,
+ * honours cross-product URL wrapping) but with the look and feel of an `AvatarTag`.
+ */
+var ObjectReferenceRenderType = function ObjectReferenceRenderType(_ref) {
+  var url = _ref.url,
+    text = _ref.text,
+    avatarUrl = _ref.avatarUrl,
+    _ref$testId = _ref.testId,
+    testId = _ref$testId === void 0 ? OBJECT_REFERENCE_TYPE_TEST_ID : _ref$testId;
+  var _useIntl = useIntl(),
+    formatMessage = _useIntl.formatMessage;
+  var destinationUrl = useSmartLinkDestinationUrl(url);
+  var newWindowLabel = formatMessage(messages.opensInNewTab);
+
+  // `AvatarTag` provides the controlled avatar props (size, appearance, border colour); we only
+  // supply the image source and accessible name.
+  var avatar = useMemo(function () {
+    return function (props) {
+      return /*#__PURE__*/React.createElement(TeamAvatar, _extends({}, props, {
+        src: avatarUrl,
+        name: text,
+        testId: "".concat(testId, "--avatar")
+      }));
+    };
+  }, [avatarUrl, text, testId]);
+  var linkComponent = useMemo(function () {
+    return function (props) {
+      return /*#__PURE__*/React.createElement(Anchor, _extends({}, props, {
+        target: "_blank",
+        rel: "noopener noreferrer",
+        newWindowLabel: newWindowLabel
+      }));
+    };
+  }, [newWindowLabel]);
+
+  // url can be undefined before data is fetched whilst adding a new column to display
+  if (!url) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement(HoverCard, {
+    url: url
+  }, /*#__PURE__*/React.createElement(AvatarTag, {
+    type: "other",
+    text: text,
+    href: destinationUrl,
+    isRemovable: false,
+    avatar: avatar,
+    linkComponent: linkComponent,
+    testId: testId
+  }));
+};
+var _default_1 = /*#__PURE__*/React.memo(ObjectReferenceRenderType);
+export default _default_1;

package/dist/esm/ui/issue-like-table/render-type/renderType.js

@@ -1,11 +1,13 @@
 import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
+import { fg } from '@atlaskit/platform-feature-flags/fg';
 import BooleanRenderType from './boolean';
 import DateRangeRenderType from './date-range';
 import DateTimeRenderType from './date-time';
 import IconRenderType from './icon';
 import LinkRenderType from './link';
 import NumberRenderType from './number';
+import ObjectReferenceRenderType from './object-reference';
 import RichTextRenderType from './richtext';
 import StatusRenderType from './status';
 import TagRenderType from './tag';
@@ -57,6 +59,16 @@ export var renderType = function renderType(item) {
           number: numberValue
         });
       });
+    case 'objectReference':
+      return item.values.map(function (objectReferenceValue) {
+        return fg('astral_assets_macro_table_ui_uplift') ? /*#__PURE__*/React.createElement(ObjectReferenceRenderType, _extends({
+          key: objectReferenceValue === null || objectReferenceValue === void 0 ? void 0 : objectReferenceValue.url
+        }, objectReferenceValue)) : /*#__PURE__*/React.createElement(LinkRenderType, {
+          key: objectReferenceValue === null || objectReferenceValue === void 0 ? void 0 : objectReferenceValue.url,
+          url: objectReferenceValue === null || objectReferenceValue === void 0 ? void 0 : objectReferenceValue.url,
+          text: objectReferenceValue === null || objectReferenceValue === void 0 ? void 0 : objectReferenceValue.text
+        });
+      });
     case 'status':
       return item.values.map(function (statusValue) {
         return /*#__PURE__*/React.createElement(StatusRenderType, statusValue);

package/dist/esm/ui/issue-like-table/render-type/stringifyType.js

@@ -37,6 +37,7 @@ export var stringifyType = function stringifyType(_ref, formatMessage, formatDat
         return adfPlainText || '';
       }
     case 'link':
+    case 'objectReference':
     default:
       return '';
   }

package/dist/types/ui/issue-like-table/render-type/object-reference/index.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import type { ObjectReference } from '@atlaskit/linking-types/datasource';
+interface ObjectReferenceProps extends ObjectReference {
+    testId?: string;
+}
+export declare const OBJECT_REFERENCE_TYPE_TEST_ID = "link-datasource-render-type--object-reference";
+declare const _default_1: React.MemoExoticComponent<({ url, text, avatarUrl, testId }: ObjectReferenceProps) => React.JSX.Element | null>;
+export default _default_1;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/link-datasource",
-	"version": "7.8.2",
+	"version": "7.10.0",
 	"description": "UI Components to support linking platform dataset feature",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -39,7 +39,7 @@
 	},
 	"dependencies": {
 		"@atlaskit/adf-schema": "^57.7.0",
-		"@atlaskit/afm-i18n-platform-linking-platform-link-datasource": "2.292.0",
+		"@atlaskit/afm-i18n-platform-linking-platform-link-datasource": "2.295.0",
 		"@atlaskit/analytics-cross-product": "^2.3.0",
 		"@atlaskit/analytics-next": "^12.6.0",
 		"@atlaskit/atlassian-context": "^2.0.0",
@@ -69,7 +69,7 @@
 		"@atlaskit/link-client-extension": "^8.0.0",
 		"@atlaskit/link-provider": "^6.0.0",
 		"@atlaskit/linking-common": "^13.0.0",
-		"@atlaskit/linking-types": "^16.0.0",
+		"@atlaskit/linking-types": "^16.1.0",
 		"@atlaskit/logo": "^23.3.0",
 		"@atlaskit/lozenge": "^17.0.0",
 		"@atlaskit/modal-dialog": "^17.1.0",
@@ -87,10 +87,11 @@
 		"@atlaskit/react-compiler-gating": "^0.2.0",
 		"@atlaskit/react-select": "^4.12.0",
 		"@atlaskit/select": "^23.1.0",
-		"@atlaskit/smart-card": "^46.10.0",
-		"@atlaskit/smart-user-picker": "^12.8.0",
+		"@atlaskit/smart-card": "^46.11.0",
+		"@atlaskit/smart-user-picker": "^12.9.0",
 		"@atlaskit/spinner": "^20.4.0",
 		"@atlaskit/tag": "^17.0.0",
+		"@atlaskit/teams-avatar": "^4.2.0",
 		"@atlaskit/textfield": "^10.3.0",
 		"@atlaskit/theme": "^28.2.0",
 		"@atlaskit/toggle": "^17.3.0",