@atlaskit/teams-public 0.31.0 → 0.33.0

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/teams-public
 
+## 0.33.0
+
+### Minor Changes
+
+- [#160653](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/160653)
+  [`9e0f4bc934a62`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/9e0f4bc934a62) -
+  [ux] PTC-11533 Render team web link card && update where we work section title to Team links
+
+## 0.32.0
+
+### Minor Changes
+
+- [#158233](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/158233)
+  [`e23647a437f46`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/e23647a437f46) -
+  PTC-11755 Build useTeamLinksAndContainers to retrieve all containers data
+
 ## 0.31.0
 
 ### Minor Changes

package/dist/cjs/common/utils/get-container-properties.compiled.css

@@ -1,4 +1,10 @@
+
+._2rko1sit{border-radius:var(--ds-border-radius,3px)}._12jimuej{outline-color:var(--ds-border,#091e4224)}
+._1bah1h6o{justify-content:center}
 ._1bsb1crf{width:9pt}
 ._1bsb7vkz{width:1pc}
+._1e0c1txw{display:flex}
+._1qu2nqa1{outline-style:solid}
+._4cvr1h6o{align-items:center}
 ._4t3i1crf{height:9pt}
 ._4t3i7vkz{height:1pc}

package/dist/cjs/common/utils/get-container-properties.js

@@ -11,6 +11,7 @@ var _runtime = require("@compiled/react/runtime");
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireDefault(require("react"));
 var _reactIntlNext = require("react-intl-next");
+var _globe = _interopRequireDefault(require("@atlaskit/icon/core/globe"));
 var _image = _interopRequireDefault(require("@atlaskit/image"));
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _compiled = require("@atlaskit/primitives/compiled");
@@ -23,7 +24,8 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
 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) { (0, _defineProperty2.default)(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; }
 var styles = {
   iconWrapper: "_1bsb1crf _4t3i1crf",
-  mediumIconWrapper: "_1bsb7vkz _4t3i7vkz"
+  mediumIconWrapper: "_1bsb7vkz _4t3i7vkz",
+  globeIconWrapper: "_2rko1sit _1bsb7vkz _4t3i7vkz _1e0c1txw _4cvr1h6o _1bah1h6o _12jimuej _1qu2nqa1"
 };
 var messages = exports.messages = (0, _reactIntlNext.defineMessages)({
   addConfluenceContainerTitle: {
@@ -76,10 +78,15 @@ var messages = exports.messages = (0, _reactIntlNext.defineMessages)({
     defaultMessage: 'space',
     description: 'Text for space type containers'
   },
-  webLinkContainerTitle: {
-    id: 'ptc-directory.team-profile-page.team-containers.webLink-container-text.non-final',
+  emptyWebLinkContainerDescription: {
+    id: 'platform.teams.containers.empty-web-link-description.non-final',
     defaultMessage: 'Add any web link',
-    description: 'Description of the card to add a web link to a team'
+    description: 'Description displayed on the empty card for adding a web link to a team'
+  },
+  webLinkContainerDescription: {
+    id: 'platform.teams.containers.web-link-title-description.non-final',
+    defaultMessage: 'Web link',
+    description: 'Description displayed for web link containers in team profile'
   }
 });
 var getJiraIcon = function getJiraIcon(containerSubTypes) {
@@ -92,11 +99,13 @@ var getJiraIcon = function getJiraIcon(containerSubTypes) {
       return _JiraIcon.default;
   }
 };
-var getJiraContainerProperties = function getJiraContainerProperties(containerTypeProperties) {
-  var iconSize = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'small';
-  var _ref = containerTypeProperties || {},
-    subType = _ref.subType,
-    name = _ref.name;
+var getJiraContainerProperties = function getJiraContainerProperties(_ref) {
+  var containerTypeProperties = _ref.containerTypeProperties,
+    _ref$iconSize = _ref.iconSize,
+    iconSize = _ref$iconSize === void 0 ? 'small' : _ref$iconSize;
+  var _ref2 = containerTypeProperties || {},
+    subType = _ref2.subType,
+    name = _ref2.name;
   var Comp = (0, _platformFeatureFlags.fg)('enable_card_alignment_fix') ? _compiled.Flex : _compiled.Box;
   var baseProperties = {
     description: /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, messages.jiraProjectDescription),
@@ -121,9 +130,30 @@ var getJiraContainerProperties = function getJiraContainerProperties(containerTy
       return baseProperties;
   }
 };
-var getContainerProperties = exports.getContainerProperties = function getContainerProperties(containerType) {
-  var iconSize = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'small';
-  var containerTypeProperties = arguments.length > 2 ? arguments[2] : undefined;
+var getWebLinkContainerEmptyStateProperties = function getWebLinkContainerEmptyStateProperties(_ref3) {
+  var isEmptyContainer = _ref3.isEmptyContainer;
+  return {
+    description: isEmptyContainer ? /*#__PURE__*/_react.default.createElement(_compiled.Text, {
+      size: "medium",
+      weight: "medium"
+    }, /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, messages.emptyWebLinkContainerDescription)) : /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, messages.webLinkContainerDescription),
+    icon: isEmptyContainer ? null : /*#__PURE__*/_react.default.createElement(_compiled.Box, {
+      xcss: styles.globeIconWrapper,
+      testId: "team-link-card-globe-icon"
+    }, /*#__PURE__*/_react.default.createElement(_globe.default, {
+      label: "",
+      size: "small"
+    })),
+    title: null,
+    containerTypeText: null
+  };
+};
+var getContainerProperties = exports.getContainerProperties = function getContainerProperties(_ref4) {
+  var containerType = _ref4.containerType,
+    _ref4$iconSize = _ref4.iconSize,
+    iconSize = _ref4$iconSize === void 0 ? 'small' : _ref4$iconSize,
+    containerTypeProperties = _ref4.containerTypeProperties,
+    isEmptyContainer = _ref4.isEmptyContainer;
   var Comp = (0, _platformFeatureFlags.fg)('enable_card_alignment_fix') ? _compiled.Flex : _compiled.Box;
   switch (containerType) {
     case 'ConfluenceSpace':
@@ -153,17 +183,14 @@ var getContainerProperties = exports.getContainerProperties = function getContai
         containerTypeText: /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, messages.spaceContainerText)
       };
     case 'JiraProject':
-      return getJiraContainerProperties(containerTypeProperties, iconSize);
+      return getJiraContainerProperties({
+        containerTypeProperties: containerTypeProperties,
+        iconSize: iconSize
+      });
     case 'WebLink':
-      return {
-        description: /*#__PURE__*/_react.default.createElement(_compiled.Text, {
-          size: "medium",
-          weight: "medium"
-        }, /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, messages.webLinkContainerTitle)),
-        icon: null,
-        title: null,
-        containerTypeText: null
-      };
+      return getWebLinkContainerEmptyStateProperties({
+        isEmptyContainer: isEmptyContainer
+      });
     default:
       return {
         description: null,

package/dist/cjs/controllers/hooks/use-team-containers/index.js

@@ -28,6 +28,7 @@ var initialConnectedTeamsState = {
 var initialState = {
   teamContainers: [],
   loading: true,
+  hasLoaded: false,
   error: null,
   unlinkError: null,
   teamId: null,
@@ -53,7 +54,8 @@ var actions = {
                 loading: true,
                 error: null,
                 teamContainers: [],
-                teamId: teamId
+                teamId: teamId,
+                hasLoaded: false
               });
               _context.prev = 5;
               _context.next = 8;
@@ -64,7 +66,8 @@ var actions = {
               setState({
                 teamContainers: containers,
                 loading: false,
-                error: null
+                error: null,
+                hasLoaded: true
               });
               _context.next = 17;
               break;
@@ -75,7 +78,8 @@ var actions = {
               setState({
                 teamContainers: [],
                 error: _context.t0,
-                loading: false
+                loading: false,
+                hasLoaded: true
               });
             case 17:
             case "end":
@@ -366,7 +370,10 @@ var useTeamContainers = exports.useTeamContainers = function useTeamContainers(t
     }
   }, [teamId, actions, enable, fireOperationalAnalytics]);
   return _objectSpread(_objectSpread({}, state), {}, {
-    addTeamContainer: actions.addTeamContainer
+    addTeamContainer: actions.addTeamContainer,
+    unlinkTeamContainers: function unlinkTeamContainers(containerId) {
+      return actions.unlinkTeamContainers(teamId, containerId);
+    }
   });
 };
 var useConnectedTeams = exports.useConnectedTeams = function useConnectedTeams() {

package/dist/cjs/controllers/hooks/use-team-links-and-containers/index.js

@@ -0,0 +1,144 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useTeamLinksAndContainers = void 0;
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = require("react");
+var _teamWebLinkConverters = require("../../../common/utils/team-web-link-converters");
+var _useTeamContainers2 = require("../use-team-containers");
+var _useTeamWebLinks3 = require("../use-team-web-links");
+var MAX_LINKS_LIMIT = 10;
+var useTeamLinksAndContainers = exports.useTeamLinksAndContainers = function useTeamLinksAndContainers(teamId) {
+  var enableContainers = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
+  var _useTeamContainers = (0, _useTeamContainers2.useTeamContainers)(teamId, enableContainers),
+    teamContainers = _useTeamContainers.teamContainers,
+    containersLoading = _useTeamContainers.loading,
+    containersHasLoaded = _useTeamContainers.hasLoaded,
+    containersError = _useTeamContainers.error,
+    addTeamContainer = _useTeamContainers.addTeamContainer,
+    unlinkTeamContainers = _useTeamContainers.unlinkTeamContainers;
+  var _useTeamWebLinks = (0, _useTeamWebLinks3.useTeamWebLinks)(),
+    _useTeamWebLinks2 = (0, _slicedToArray2.default)(_useTeamWebLinks, 2),
+    _useTeamWebLinks2$ = _useTeamWebLinks2[0],
+    links = _useTeamWebLinks2$.links,
+    webLinksLoading = _useTeamWebLinks2$.isLoading,
+    webLinksError = _useTeamWebLinks2$.hasError,
+    webLinksHasLoaded = _useTeamWebLinks2$.hasLoaded,
+    _useTeamWebLinks2$2 = _useTeamWebLinks2[1],
+    getTeamWebLinks = _useTeamWebLinks2$2.getTeamWebLinks,
+    createTeamWebLink = _useTeamWebLinks2$2.createTeamWebLink,
+    updateTeamWebLink = _useTeamWebLinks2$2.updateTeamWebLink,
+    removeWebLink = _useTeamWebLinks2$2.removeWebLink;
+  (0, _react.useEffect)(function () {
+    getTeamWebLinks(teamId);
+  }, [getTeamWebLinks, teamId]);
+  var webLinkContainers = (0, _react.useMemo)(function () {
+    return (0, _teamWebLinkConverters.webLinksToContainers)(links);
+  }, [links]);
+  var allContainers = (0, _react.useMemo)(function () {
+    return [].concat((0, _toConsumableArray2.default)(teamContainers), (0, _toConsumableArray2.default)(webLinkContainers));
+  }, [teamContainers, webLinkContainers]);
+  var canAddMoreLink = (0, _react.useMemo)(function () {
+    return allContainers.length <= MAX_LINKS_LIMIT;
+  }, [allContainers.length]);
+  var addTeamLink = (0, _react.useCallback)( /*#__PURE__*/function () {
+    var _ref = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(container) {
+      var webLink;
+      return _regenerator.default.wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            if (!(container.type === 'WebLink')) {
+              _context.next = 7;
+              break;
+            }
+            webLink = (0, _teamWebLinkConverters.containerToNewWebLink)(container);
+            _context.next = 4;
+            return createTeamWebLink(teamId, webLink);
+          case 4:
+            return _context.abrupt("return", _context.sent);
+          case 7:
+            addTeamContainer(container);
+            return _context.abrupt("return", Promise.resolve(container));
+          case 9:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee);
+    }));
+    return function (_x) {
+      return _ref.apply(this, arguments);
+    };
+  }(), [teamId, createTeamWebLink, addTeamContainer]);
+  var updateTeamLink = (0, _react.useCallback)( /*#__PURE__*/function () {
+    var _ref2 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2(container, newContainer) {
+      var webLink;
+      return _regenerator.default.wrap(function _callee2$(_context2) {
+        while (1) switch (_context2.prev = _context2.next) {
+          case 0:
+            if (!(container.type === 'WebLink')) {
+              _context2.next = 5;
+              break;
+            }
+            webLink = (0, _teamWebLinkConverters.containerToNewWebLink)(newContainer);
+            _context2.next = 4;
+            return updateTeamWebLink(teamId, container.id, webLink);
+          case 4:
+            return _context2.abrupt("return", _context2.sent);
+          case 5:
+          case "end":
+            return _context2.stop();
+        }
+      }, _callee2);
+    }));
+    return function (_x2, _x3) {
+      return _ref2.apply(this, arguments);
+    };
+  }(), [teamId, updateTeamWebLink]);
+  var removeTeamLink = (0, _react.useCallback)( /*#__PURE__*/function () {
+    var _ref3 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee3(container) {
+      return _regenerator.default.wrap(function _callee3$(_context3) {
+        while (1) switch (_context3.prev = _context3.next) {
+          case 0:
+            if (!(container.type === 'WebLink')) {
+              _context3.next = 5;
+              break;
+            }
+            _context3.next = 3;
+            return removeWebLink(teamId, container.id);
+          case 3:
+            _context3.next = 7;
+            break;
+          case 5:
+            _context3.next = 7;
+            return unlinkTeamContainers(container.id);
+          case 7:
+          case "end":
+            return _context3.stop();
+        }
+      }, _callee3);
+    }));
+    return function (_x4) {
+      return _ref3.apply(this, arguments);
+    };
+  }(), [teamId, removeWebLink, unlinkTeamContainers]);
+  return {
+    isLoading: containersLoading || webLinksLoading,
+    hasError: !!containersError || webLinksError,
+    containersError: !!containersError,
+    webLinksError: webLinksError,
+    containersHasLoaded: containersHasLoaded,
+    webLinksHasLoaded: webLinksHasLoaded,
+    hasLoaded: containersHasLoaded && webLinksHasLoaded,
+    teamLinks: allContainers,
+    canAddMoreLink: canAddMoreLink,
+    addTeamLink: addTeamLink,
+    updateTeamLink: updateTeamLink,
+    removeTeamLink: removeTeamLink
+  };
+};

package/dist/cjs/index.js

@@ -57,6 +57,12 @@ Object.defineProperty(exports, "useTeamContainers", {
     return _useTeamContainers.useTeamContainers;
   }
 });
+Object.defineProperty(exports, "useTeamLinksAndContainers", {
+  enumerable: true,
+  get: function get() {
+    return _useTeamLinksAndContainers.useTeamLinksAndContainers;
+  }
+});
 Object.defineProperty(exports, "useTeamWebLinks", {
   enumerable: true,
   get: function get() {
@@ -72,6 +78,7 @@ Object.defineProperty(exports, "useTeamWebLinksActions", {
 var _teamContainers = require("./ui/team-containers");
 var _useTeamContainers = require("./controllers/hooks/use-team-containers");
 var _useTeamWebLinks = require("./controllers/hooks/use-team-web-links");
+var _useTeamLinksAndContainers = require("./controllers/hooks/use-team-links-and-containers");
 var _useProductPermission = require("./controllers/hooks/use-product-permission");
 var _utils = require("./controllers/product-permission/utils");
 var _getContainerProperties = require("./common/utils/get-container-properties");

package/dist/cjs/ui/team-containers/add-container-card/index.js

@@ -13,7 +13,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
 var _new = require("@atlaskit/button/new");
-var _add = _interopRequireDefault(require("@atlaskit/icon/utility/add"));
+var _add = _interopRequireDefault(require("@atlaskit/icon/core/add"));
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _compiled = require("@atlaskit/primitives/compiled");
 var _getContainerProperties = require("../../../common/utils/get-container-properties");
@@ -48,7 +48,10 @@ var AddContainerCardWrapper = function AddContainerCardWrapper(_ref) {
 var AddContainerCard = exports.AddContainerCard = function AddContainerCard(_ref2) {
   var containerType = _ref2.containerType,
     onAddAContainerClick = _ref2.onAddAContainerClick;
-  var _getContainerProperti = (0, _getContainerProperties.getContainerProperties)(containerType),
+  var _getContainerProperti = (0, _getContainerProperties.getContainerProperties)({
+      containerType: containerType,
+      isEmptyContainer: true
+    }),
     description = _getContainerProperti.description,
     icon = _getContainerProperti.icon,
     title = _getContainerProperti.title;
@@ -62,7 +65,11 @@ var AddContainerCard = exports.AddContainerCard = function AddContainerCard(_ref
   }, /*#__PURE__*/_react.default.createElement(_new.IconButton, {
     label: "Add a container",
     appearance: "subtle",
-    icon: _add.default,
+    icon: function icon(iconProps) {
+      return /*#__PURE__*/_react.default.createElement(_add.default, (0, _extends2.default)({}, iconProps, {
+        size: "small"
+      }));
+    },
     testId: "add-icon",
     onClick: function onClick(e) {
       onAddAContainerClick(e);

package/dist/cjs/ui/team-containers/disconnect-dialog/index.js

@@ -74,7 +74,9 @@ var DisconnectDialog = exports.DisconnectDialog = function DisconnectDialog(_ref
       return _ref2.apply(this, arguments);
     };
   }();
-  var _getContainerProperti = (0, _getContainerProperties.getContainerProperties)(containerType),
+  var _getContainerProperti = (0, _getContainerProperties.getContainerProperties)({
+      containerType: containerType
+    }),
     containerTypeText = _getContainerProperti.containerTypeText,
     description = _getContainerProperti.description;
   return /*#__PURE__*/_react.default.createElement(_modalDialog.default, {

package/dist/cjs/ui/team-containers/linked-container-card/index.compiled.css

@@ -4,15 +4,19 @@
 ._12y3e4h9{outline-width:var(--ds-border-width,1px)}
 ._18u01wug{margin-left:auto}
 ._19bvutpp{padding-left:var(--ds-space-150,9pt)}
+._1bah1h6o{justify-content:center}
 ._1bahesu3{justify-content:flex-end}
 ._1bsb1osq{width:100%}
+._1bsb1u1b{width:34px}
 ._1bsbzwfg{width:2pc}
 ._1e0c1txw{display:flex}
 ._1qu2nqa1{outline-style:solid}
 ._1tkezwfg{min-height:2pc}
 ._1ul9zwfg{min-width:2pc}
 ._4cvr1h6o{align-items:center}
+._4t3i1u1b{height:34px}
 ._4t3izwfg{height:2pc}
+._bfhkqbzx{background-color:var(--ds-surface-sunken,#f7f8f9)}
 ._ca0qutpp{padding-top:var(--ds-space-150,9pt)}
 ._n3tdutpp{padding-bottom:var(--ds-space-150,9pt)}
 ._syaz1fxt{color:var(--ds-text,#172b4d)}

package/dist/cjs/ui/team-containers/linked-container-card/index.js

@@ -16,8 +16,10 @@ var _reactIntlNext = require("react-intl-next");
 var _analyticsNext = require("@atlaskit/analytics-next");
 var _avatar = _interopRequireDefault(require("@atlaskit/avatar"));
 var _new = require("@atlaskit/button/new");
-var _cross = _interopRequireDefault(require("@atlaskit/icon/utility/cross"));
-var _link = _interopRequireDefault(require("@atlaskit/link"));
+var _featureGateJsClient = _interopRequireDefault(require("@atlaskit/feature-gate-js-client"));
+var _close = _interopRequireDefault(require("@atlaskit/icon/core/close"));
+var _link = _interopRequireDefault(require("@atlaskit/icon/core/link"));
+var _link2 = _interopRequireDefault(require("@atlaskit/link"));
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _compiled = require("@atlaskit/primitives/compiled");
 var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
@@ -30,8 +32,10 @@ var styles = {
   container: "_2rkoop52 _1h6dz9xs _12y3e4h9 _12jimuej _1qu2nqa1 _ca0qutpp _u5f3utpp _n3tdutpp _19bvutpp _syaz1fxt",
   card: "_4cvr1h6o _1bsb1osq",
   iconWrapper: "_1bsbzwfg _4t3izwfg _1ul9zwfg _1tkezwfg",
-  crossIconWrapper: "_1e0c1txw _4cvr1h6o _1bahesu3 _18u01wug"
+  crossIconWrapper: "_1e0c1txw _4cvr1h6o _1bahesu3 _18u01wug",
+  linkIconWrapper: "_2rkoop52 _1bsb1u1b _4t3i1u1b _1e0c1txw _4cvr1h6o _1bah1h6o _12jimuej _1qu2nqa1 _bfhkqbzx"
 };
+var isSupportingAddWebLink = _featureGateJsClient.default.initializeCompleted() && _featureGateJsClient.default.getExperimentValue('team_and_container_web_link', 'isEnabled', false);
 var LinkedCardWrapper = function LinkedCardWrapper(_ref) {
   var children = _ref.children,
     href = _ref.href,
@@ -61,7 +65,7 @@ var LinkedCardWrapper = function LinkedCardWrapper(_ref) {
     onMouseEnter: onMouseEnter,
     onMouseLeave: onMouseLeave,
     testId: "linked-container-card-inner"
-  }, /*#__PURE__*/_react.default.createElement(_link.default, {
+  }, /*#__PURE__*/_react.default.createElement(_link2.default, {
     href: href,
     appearance: "subtle",
     onClick: function onClick() {
@@ -86,6 +90,13 @@ var getContainerIcon = function getContainerIcon(containerType, title, container
       size: 'large'
     });
   }
+  if (isSupportingAddWebLink && containerType === 'WebLink') {
+    return /*#__PURE__*/_react.default.createElement(_compiled.Box, {
+      xcss: styles.linkIconWrapper
+    }, /*#__PURE__*/_react.default.createElement(_link.default, {
+      label: ""
+    }));
+  }
   return /*#__PURE__*/_react.default.createElement(_avatar.default, {
     appearance: "square",
     size: "medium",
@@ -103,7 +114,11 @@ var LinkedContainerCard = exports.LinkedContainerCard = function LinkedContainer
     onDisconnectButtonClick = _ref2.onDisconnectButtonClick;
   var _useAnalyticsEvents2 = (0, _analyticsNext.useAnalyticsEvents)(),
     createAnalyticsEvent = _useAnalyticsEvents2.createAnalyticsEvent;
-  var _getContainerProperti = (0, _getContainerProperties.getContainerProperties)(containerType, 'small', containerTypeProperties),
+  var _getContainerProperti = (0, _getContainerProperties.getContainerProperties)({
+      containerType: containerType,
+      iconSize: 'small',
+      containerTypeProperties: containerTypeProperties
+    }),
     description = _getContainerProperti.description,
     icon = _getContainerProperti.icon,
     containerTypeText = _getContainerProperti.containerTypeText;
@@ -152,7 +167,11 @@ var LinkedContainerCard = exports.LinkedContainerCard = function LinkedContainer
   }, /*#__PURE__*/_react.default.createElement(_new.IconButton, {
     label: "disconnect the container ".concat(title),
     appearance: "subtle",
-    icon: _cross.default,
+    icon: function icon(iconProps) {
+      return /*#__PURE__*/_react.default.createElement(_close.default, (0, _extends2.default)({}, iconProps, {
+        size: "small"
+      }));
+    },
     spacing: "compact",
     onClick: function onClick(e) {
       e.preventDefault();