@atlaskit/teams-public 0.34.1 → 0.36.0

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # @atlaskit/teams-public
 
+## 0.36.0
+
+### Minor Changes
+
+- [#165970](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/165970)
+  [`2f04674b589a3`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/2f04674b589a3) -
+  [ux] PTC-11538 Render team web link card in team profile card && fetch team web link icons
+
+## 0.35.0
+
+### Minor Changes
+
+- [#163866](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/163866)
+  [`e15fce4142e99`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/e15fce4142e99) -
+  [ux] PTC-11966 Add actions of add/update/delete team link card
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 0.34.1
 
 ### Patch Changes

package/dist/cjs/common/ui/container-icon/index.compiled.css

@@ -0,0 +1,16 @@
+
+._2rko1hkb{border-radius:var(--ds-border-radius-050,4px)}
+._2rkoop52{border-radius:var(--ds-border-radius-100,8px)}._12jimuej{outline-color:var(--ds-border,#091e4224)}
+._18u0v77o{margin-left:var(--ds-space-025,2px)}
+._19pkv77o{margin-top:var(--ds-space-025,2px)}
+._1bah1h6o{justify-content:center}
+._1bsb1tcg{width:24px}
+._1bsb1u1b{width:34px}
+._1e0c1txw{display:flex}
+._1qu2nqa1{outline-style:solid}
+._2hwxv77o{margin-right:var(--ds-space-025,2px)}
+._4cvr1h6o{align-items:center}
+._4t3i1tcg{height:24px}
+._4t3i1u1b{height:34px}
+._bfhkqbzx{background-color:var(--ds-surface-sunken,#f7f8f9)}
+._otyrv77o{margin-bottom:var(--ds-space-025,2px)}

package/dist/cjs/common/ui/container-icon/index.js

@@ -0,0 +1,46 @@
+/* index.tsx generated by @compiled/babel-plugin v0.36.1 */
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ContainerIcon = void 0;
+require("./index.compiled.css");
+var _runtime = require("@compiled/react/runtime");
+var _react = _interopRequireDefault(require("react"));
+var _avatar = _interopRequireDefault(require("@atlaskit/avatar"));
+var _link = _interopRequireDefault(require("@atlaskit/icon/core/link"));
+var _compiled = require("@atlaskit/primitives/compiled");
+var _loomAvatar = require("../loom-avatar");
+var styles = {
+  linkIconWrapperMedium: "_2rkoop52 _1bsb1u1b _4t3i1u1b _1e0c1txw _4cvr1h6o _1bah1h6o _12jimuej _1qu2nqa1 _bfhkqbzx",
+  linkIconWrapperSmall: "_2rko1hkb _1bsb1tcg _4t3i1tcg _1e0c1txw _4cvr1h6o _1bah1h6o _19pkv77o _2hwxv77o _otyrv77o _18u0v77o _12jimuej _1qu2nqa1 _bfhkqbzx"
+};
+var ContainerIcon = exports.ContainerIcon = function ContainerIcon(_ref) {
+  var containerType = _ref.containerType,
+    title = _ref.title,
+    containerIcon = _ref.containerIcon,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 'medium' : _ref$size;
+  if (containerType === 'LoomSpace') {
+    return /*#__PURE__*/_react.default.createElement(_loomAvatar.LoomSpaceAvatar, {
+      spaceName: title,
+      size: size === 'medium' ? 'large' : size
+    });
+  }
+  if (containerType === 'WebLink' && !containerIcon) {
+    return /*#__PURE__*/_react.default.createElement(_compiled.Box, {
+      xcss: size === 'medium' ? styles.linkIconWrapperMedium : styles.linkIconWrapperSmall
+    }, /*#__PURE__*/_react.default.createElement(_link.default, {
+      label: "",
+      testId: "linked-container-WebLink-icon"
+    }));
+  }
+  return /*#__PURE__*/_react.default.createElement(_avatar.default, {
+    appearance: "square",
+    size: size,
+    src: containerIcon,
+    testId: "linked-container-".concat(containerType, "-icon")
+  });
+};

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

@@ -12,6 +12,7 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _react = _interopRequireDefault(require("react"));
 var _reactIntlNext = require("react-intl-next");
 var _globe = _interopRequireDefault(require("@atlaskit/icon/core/globe"));
+var _linkExternal = _interopRequireDefault(require("@atlaskit/icon/core/link-external"));
 var _image = _interopRequireDefault(require("@atlaskit/image"));
 var _compiled = require("@atlaskit/primitives/compiled");
 var _ConfluenceIcon = _interopRequireDefault(require("../assets/ConfluenceIcon.svg"));
@@ -128,14 +129,19 @@ var getJiraContainerProperties = function getJiraContainerProperties(_ref) {
       return baseProperties;
   }
 };
-var getWebLinkContainerEmptyStateProperties = function getWebLinkContainerEmptyStateProperties(_ref3) {
-  var isEmptyContainer = _ref3.isEmptyContainer;
+var getWebLinkContainerProperties = function getWebLinkContainerProperties(_ref3) {
+  var isEmptyContainer = _ref3.isEmptyContainer,
+    isDisplayedOnProfileCard = _ref3.isDisplayedOnProfileCard;
   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, {
+    icon: isEmptyContainer ? null : isDisplayedOnProfileCard ? /*#__PURE__*/_react.default.createElement(_linkExternal.default, {
+      label: "",
+      size: "small",
+      testId: "team-link-card-external-link-icon"
+    }) : /*#__PURE__*/_react.default.createElement(_compiled.Box, {
       xcss: styles.globeIconWrapper,
       testId: "team-link-card-globe-icon"
     }, /*#__PURE__*/_react.default.createElement(_globe.default, {
@@ -151,7 +157,8 @@ var getContainerProperties = exports.getContainerProperties = function getContai
     _ref4$iconSize = _ref4.iconSize,
     iconSize = _ref4$iconSize === void 0 ? 'small' : _ref4$iconSize,
     containerTypeProperties = _ref4.containerTypeProperties,
-    isEmptyContainer = _ref4.isEmptyContainer;
+    isEmptyContainer = _ref4.isEmptyContainer,
+    isDisplayedOnProfileCard = _ref4.isDisplayedOnProfileCard;
   switch (containerType) {
     case 'ConfluenceSpace':
       return {
@@ -163,7 +170,7 @@ var getContainerProperties = exports.getContainerProperties = function getContai
           alt: "",
           testId: "confluence-space-container-icon"
         })),
-        title: /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, messages.addLoomContainerTitle),
+        title: /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, messages.addConfluenceContainerTitle),
         containerTypeText: /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, messages.spaceContainerText)
       };
     case 'LoomSpace':
@@ -174,9 +181,9 @@ var getContainerProperties = exports.getContainerProperties = function getContai
         }, /*#__PURE__*/_react.default.createElement(_image.default, {
           src: _LoomIcon.default,
           alt: "",
-          testId: "confluence-space-container-icon"
+          testId: "loom-space-container-icon"
         })),
-        title: /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, messages.addConfluenceContainerTitle),
+        title: /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, messages.addLoomContainerTitle),
         containerTypeText: /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, messages.spaceContainerText)
       };
     case 'JiraProject':
@@ -185,8 +192,9 @@ var getContainerProperties = exports.getContainerProperties = function getContai
         iconSize: iconSize
       });
     case 'WebLink':
-      return getWebLinkContainerEmptyStateProperties({
-        isEmptyContainer: isEmptyContainer
+      return getWebLinkContainerProperties({
+        isEmptyContainer: isEmptyContainer,
+        isDisplayedOnProfileCard: isDisplayedOnProfileCard
       });
     default:
       return {

package/dist/cjs/common/utils/team-web-link-converters.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.webLinksToContainers = exports.webLinkToContainer = exports.containerToNewWebLink = void 0;
+exports.webLinksToContainers = exports.webLinkToContainer = exports.isNewTeamWebLink = exports.containerToNewWebLink = void 0;
 var containerToNewWebLink = exports.containerToNewWebLink = function containerToNewWebLink(container) {
   return {
     contentTitle: container.name,
@@ -11,15 +11,24 @@ var containerToNewWebLink = exports.containerToNewWebLink = function containerTo
     linkUri: container.link || ''
   };
 };
-var webLinkToContainer = exports.webLinkToContainer = function webLinkToContainer(link) {
+var webLinkToContainer = exports.webLinkToContainer = function webLinkToContainer(link, iconData) {
   return {
     id: link.linkId,
     type: 'WebLink',
     name: link.contentTitle,
-    icon: null,
+    icon: (iconData === null || iconData === void 0 ? void 0 : iconData.iconUrl) || null,
     link: link.linkUri
   };
 };
 var webLinksToContainers = exports.webLinksToContainers = function webLinksToContainers(links) {
-  return links.map(webLinkToContainer);
+  var linkIcons = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
+  return links.map(function (link) {
+    var iconData = linkIcons.find(function (icon) {
+      return icon.linkUrl === link.linkUri;
+    });
+    return webLinkToContainer(link, iconData);
+  });
+};
+var isNewTeamWebLink = exports.isNewTeamWebLink = function isNewTeamWebLink(input) {
+  return 'contentTitle' in input && 'linkUri' in input && !('type' in input) && !('id' in input);
 };

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

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.useTeamLinksAndContainers = void 0;
 var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
@@ -13,6 +14,8 @@ 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");
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (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 MAX_LINKS_LIMIT = 10;
 var useTeamLinksAndContainers = exports.useTeamLinksAndContainers = function useTeamLinksAndContainers(teamId) {
   var enableContainers = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
@@ -27,6 +30,7 @@ var useTeamLinksAndContainers = exports.useTeamLinksAndContainers = function use
     _useTeamWebLinks2 = (0, _slicedToArray2.default)(_useTeamWebLinks, 2),
     _useTeamWebLinks2$ = _useTeamWebLinks2[0],
     links = _useTeamWebLinks2$.links,
+    linkIcons = _useTeamWebLinks2$.linkIcons,
     webLinksLoading = _useTeamWebLinks2$.isLoading,
     webLinksError = _useTeamWebLinks2$.hasError,
     webLinksHasLoaded = _useTeamWebLinks2$.hasLoaded,
@@ -39,8 +43,8 @@ var useTeamLinksAndContainers = exports.useTeamLinksAndContainers = function use
     getTeamWebLinks(teamId);
   }, [getTeamWebLinks, teamId]);
   var webLinkContainers = (0, _react.useMemo)(function () {
-    return (0, _teamWebLinkConverters.webLinksToContainers)(links);
-  }, [links]);
+    return (0, _teamWebLinkConverters.webLinksToContainers)(links, linkIcons);
+  }, [links, linkIcons]);
   var allContainers = (0, _react.useMemo)(function () {
     return [].concat((0, _toConsumableArray2.default)(teamContainers), (0, _toConsumableArray2.default)(webLinkContainers));
   }, [teamContainers, webLinkContainers]);
@@ -48,24 +52,33 @@ var useTeamLinksAndContainers = exports.useTeamLinksAndContainers = function use
     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 _ref = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(containerOrWebLink) {
       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;
+            if (!(0, _teamWebLinkConverters.isNewTeamWebLink)(containerOrWebLink)) {
+              _context.next = 6;
               break;
             }
-            webLink = (0, _teamWebLinkConverters.containerToNewWebLink)(container);
-            _context.next = 4;
+            _context.next = 3;
+            return createTeamWebLink(teamId, containerOrWebLink);
+          case 3:
+            return _context.abrupt("return", _context.sent);
+          case 6:
+            if (!(containerOrWebLink.type === 'WebLink')) {
+              _context.next = 13;
+              break;
+            }
+            webLink = (0, _teamWebLinkConverters.containerToNewWebLink)(containerOrWebLink);
+            _context.next = 10;
             return createTeamWebLink(teamId, webLink);
-          case 4:
+          case 10:
             return _context.abrupt("return", _context.sent);
-          case 7:
-            addTeamContainer(container);
-            return _context.abrupt("return", Promise.resolve(container));
-          case 9:
+          case 13:
+            addTeamContainer(containerOrWebLink);
+            return _context.abrupt("return", Promise.resolve(containerOrWebLink));
+          case 15:
           case "end":
             return _context.stop();
         }
@@ -75,22 +88,32 @@ var useTeamLinksAndContainers = exports.useTeamLinksAndContainers = function use
       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;
+  var updateTeamLinkById = (0, _react.useCallback)( /*#__PURE__*/function () {
+    var _ref2 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2(linkId, updatedFields) {
+      var container, currentWebLink, updatedWebLink;
       return _regenerator.default.wrap(function _callee2$(_context2) {
         while (1) switch (_context2.prev = _context2.next) {
           case 0:
+            container = allContainers.find(function (link) {
+              return link.id === linkId;
+            });
+            if (container) {
+              _context2.next = 3;
+              break;
+            }
+            return _context2.abrupt("return");
+          case 3:
             if (!(container.type === 'WebLink')) {
-              _context2.next = 5;
+              _context2.next = 9;
               break;
             }
-            webLink = (0, _teamWebLinkConverters.containerToNewWebLink)(newContainer);
-            _context2.next = 4;
-            return updateTeamWebLink(teamId, container.id, webLink);
-          case 4:
+            currentWebLink = (0, _teamWebLinkConverters.containerToNewWebLink)(container);
+            updatedWebLink = _objectSpread(_objectSpread({}, currentWebLink), updatedFields);
+            _context2.next = 8;
+            return updateTeamWebLink(teamId, linkId, updatedWebLink);
+          case 8:
             return _context2.abrupt("return", _context2.sent);
-          case 5:
+          case 9:
           case "end":
             return _context2.stop();
         }
@@ -99,7 +122,7 @@ var useTeamLinksAndContainers = exports.useTeamLinksAndContainers = function use
     return function (_x2, _x3) {
       return _ref2.apply(this, arguments);
     };
-  }(), [teamId, updateTeamWebLink]);
+  }(), [teamId, allContainers, 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) {
@@ -138,7 +161,7 @@ var useTeamLinksAndContainers = exports.useTeamLinksAndContainers = function use
     teamLinks: allContainers,
     canAddMoreLink: canAddMoreLink,
     addTeamLink: addTeamLink,
-    updateTeamLink: updateTeamLink,
+    updateTeamLinkById: updateTeamLinkById,
     removeTeamLink: removeTeamLink
   };
 };

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

@@ -7,6 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.useTeamWebLinksActions = exports.useTeamWebLinks = exports.actions = void 0;
 var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 var _reactSweetState = require("react-sweet-state");
 var _teamsClient = require("@atlaskit/teams-client");
@@ -19,17 +20,20 @@ var _initialState = {
   hasError: false,
   shouldReload: false,
   errorType: null,
-  links: []
+  links: [],
+  linkIcons: [],
+  iconsLoading: false,
+  iconsError: false
 };
 var actions = exports.actions = {
   getTeamWebLinks: function getTeamWebLinks(teamId) {
     return /*#__PURE__*/function () {
       var _ref2 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(_ref) {
-        var getState, setState, _getState, links, currentTeamId, initialLinks, _yield$teamsClient$ge, entities;
+        var getState, setState, dispatch, _getState, links, currentTeamId, initialLinks, _yield$teamsClient$ge, entities;
         return _regenerator.default.wrap(function _callee$(_context) {
           while (1) switch (_context.prev = _context.next) {
             case 0:
-              getState = _ref.getState, setState = _ref.setState;
+              getState = _ref.getState, setState = _ref.setState, dispatch = _ref.dispatch;
               _getState = getState(), links = _getState.links, currentTeamId = _getState.teamId;
               initialLinks = teamId === currentTeamId ? links : [];
               setState({
@@ -59,17 +63,20 @@ var actions = exports.actions = {
                 shouldReload: false,
                 links: entities
               });
-              _context.next = 19;
+              if (entities.length > 0) {
+                dispatch(actions.getTeamWebLinkIcons(teamId));
+              }
+              _context.next = 20;
               break;
-            case 14:
-              _context.prev = 14;
+            case 15:
+              _context.prev = 15;
               _context.t0 = _context["catch"](4);
               if (!(getState().teamId !== teamId)) {
-                _context.next = 18;
+                _context.next = 19;
                 break;
               }
               return _context.abrupt("return");
-            case 18:
+            case 19:
               setState({
                 isLoading: false,
                 hasLoaded: true,
@@ -78,76 +85,211 @@ var actions = exports.actions = {
                 shouldReload: false,
                 links: []
               });
-            case 19:
+            case 20:
             case "end":
               return _context.stop();
           }
-        }, _callee, null, [[4, 14]]);
+        }, _callee, null, [[4, 15]]);
       }));
       return function (_x) {
         return _ref2.apply(this, arguments);
       };
     }();
   },
+  getTeamWebLinkIcons: function getTeamWebLinkIcons(teamId) {
+    return /*#__PURE__*/function () {
+      var _ref4 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2(_ref3) {
+        var getState, setState, _getState2, links, currentIcons, linkUrls, uncachedUrls, newIconData;
+        return _regenerator.default.wrap(function _callee2$(_context2) {
+          while (1) switch (_context2.prev = _context2.next) {
+            case 0:
+              getState = _ref3.getState, setState = _ref3.setState;
+              _getState2 = getState(), links = _getState2.links, currentIcons = _getState2.linkIcons;
+              if (!(links.length === 0)) {
+                _context2.next = 4;
+                break;
+              }
+              return _context2.abrupt("return");
+            case 4:
+              linkUrls = links.map(function (link) {
+                return link.linkUri;
+              });
+              uncachedUrls = linkUrls.filter(function (url) {
+                return !currentIcons.some(function (icon) {
+                  return icon.linkUrl === url;
+                });
+              });
+              if (!(uncachedUrls.length > 0)) {
+                _context2.next = 20;
+                break;
+              }
+              _context2.prev = 7;
+              setState({
+                iconsLoading: true,
+                iconsError: false
+              });
+              _context2.next = 11;
+              return _teamsClient.teamsClient.getTeamLinkIcons(uncachedUrls);
+            case 11:
+              newIconData = _context2.sent;
+              if (getState().teamId === teamId) {
+                setState({
+                  linkIcons: [].concat((0, _toConsumableArray2.default)(currentIcons), (0, _toConsumableArray2.default)(newIconData || [])),
+                  iconsLoading: false,
+                  iconsError: false
+                });
+              }
+              _context2.next = 18;
+              break;
+            case 15:
+              _context2.prev = 15;
+              _context2.t0 = _context2["catch"](7);
+              if (getState().teamId === teamId) {
+                setState({
+                  iconsLoading: false,
+                  iconsError: true
+                });
+              }
+            case 18:
+              _context2.next = 21;
+              break;
+            case 20:
+              setState({
+                iconsLoading: false,
+                iconsError: false
+              });
+            case 21:
+            case "end":
+              return _context2.stop();
+          }
+        }, _callee2, null, [[7, 15]]);
+      }));
+      return function (_x2) {
+        return _ref4.apply(this, arguments);
+      };
+    }();
+  },
   createTeamWebLink: function createTeamWebLink(teamId, newLink) {
-    return /*#__PURE__*/(0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2() {
-      return _regenerator.default.wrap(function _callee2$(_context2) {
-        while (1) switch (_context2.prev = _context2.next) {
-          case 0:
-            _context2.next = 2;
-            return _teamsClient.teamsClient.createTeamLink(teamId, newLink);
-          case 2:
-            return _context2.abrupt("return", _context2.sent);
-          case 3:
-          case "end":
-            return _context2.stop();
-        }
-      }, _callee2);
-    }));
+    return /*#__PURE__*/function () {
+      var _ref6 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee3(_ref5) {
+        var getState, setState, dispatch, result, currentState;
+        return _regenerator.default.wrap(function _callee3$(_context3) {
+          while (1) switch (_context3.prev = _context3.next) {
+            case 0:
+              getState = _ref5.getState, setState = _ref5.setState, dispatch = _ref5.dispatch;
+              _context3.next = 3;
+              return _teamsClient.teamsClient.createTeamLink(teamId, newLink);
+            case 3:
+              result = _context3.sent;
+              currentState = getState();
+              if (!(currentState.teamId !== teamId)) {
+                _context3.next = 7;
+                break;
+              }
+              return _context3.abrupt("return", result);
+            case 7:
+              setState({
+                links: [].concat((0, _toConsumableArray2.default)(currentState.links), [result])
+              });
+              dispatch(actions.getTeamWebLinkIcons(teamId));
+              return _context3.abrupt("return", result);
+            case 10:
+            case "end":
+              return _context3.stop();
+          }
+        }, _callee3);
+      }));
+      return function (_x3) {
+        return _ref6.apply(this, arguments);
+      };
+    }();
   },
   updateTeamWebLink: function updateTeamWebLink(teamId, linkId, newLink) {
-    return /*#__PURE__*/(0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee3() {
-      return _regenerator.default.wrap(function _callee3$(_context3) {
-        while (1) switch (_context3.prev = _context3.next) {
-          case 0:
-            _context3.next = 2;
-            return _teamsClient.teamsClient.updateTeamLink(teamId, linkId, newLink);
-          case 2:
-            return _context3.abrupt("return", _context3.sent);
-          case 3:
-          case "end":
-            return _context3.stop();
-        }
-      }, _callee3);
-    }));
-  },
-  removeWebLink: function removeWebLink(teamId, linkId) {
     return /*#__PURE__*/function () {
-      var _ref6 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee4(_ref5) {
-        var dispatch;
+      var _ref8 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee4(_ref7) {
+        var getState, setState, dispatch, result, currentState, oldLink, urlChanged, updatedIcons;
         return _regenerator.default.wrap(function _callee4$(_context4) {
           while (1) switch (_context4.prev = _context4.next) {
             case 0:
-              dispatch = _ref5.dispatch;
+              getState = _ref7.getState, setState = _ref7.setState, dispatch = _ref7.dispatch;
               _context4.next = 3;
-              return _teamsClient.teamsClient.deleteTeamLink(teamId, linkId);
+              return _teamsClient.teamsClient.updateTeamLink(teamId, linkId, newLink);
             case 3:
-              _context4.next = 5;
-              return dispatch(actions.getTeamWebLinks(teamId));
-            case 5:
+              result = _context4.sent;
+              currentState = getState();
+              if (!(currentState.teamId !== teamId)) {
+                _context4.next = 7;
+                break;
+              }
+              return _context4.abrupt("return", result);
+            case 7:
+              oldLink = currentState.links.find(function (link) {
+                return link.linkId === linkId;
+              });
+              urlChanged = oldLink && oldLink.linkUri !== result.linkUri;
+              setState({
+                links: currentState.links.map(function (link) {
+                  return link.linkId === linkId ? result : link;
+                })
+              });
+              if (urlChanged) {
+                updatedIcons = currentState.linkIcons.filter(function (icon) {
+                  return icon.linkUrl !== oldLink.linkUri;
+                });
+                setState({
+                  linkIcons: updatedIcons
+                });
+                dispatch(actions.getTeamWebLinkIcons(teamId));
+              }
+              return _context4.abrupt("return", result);
+            case 12:
             case "end":
               return _context4.stop();
           }
         }, _callee4);
       }));
-      return function (_x2) {
-        return _ref6.apply(this, arguments);
+      return function (_x4) {
+        return _ref8.apply(this, arguments);
+      };
+    }();
+  },
+  removeWebLink: function removeWebLink(teamId, linkId) {
+    return /*#__PURE__*/function () {
+      var _ref0 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee5(_ref9) {
+        var getState, setState, currentState;
+        return _regenerator.default.wrap(function _callee5$(_context5) {
+          while (1) switch (_context5.prev = _context5.next) {
+            case 0:
+              getState = _ref9.getState, setState = _ref9.setState;
+              currentState = getState();
+              if (!(currentState.teamId !== teamId)) {
+                _context5.next = 4;
+                break;
+              }
+              return _context5.abrupt("return");
+            case 4:
+              _context5.next = 6;
+              return _teamsClient.teamsClient.deleteTeamLink(teamId, linkId);
+            case 6:
+              setState({
+                links: currentState.links.filter(function (link) {
+                  return link.linkId !== linkId;
+                })
+              });
+            case 7:
+            case "end":
+              return _context5.stop();
+          }
+        }, _callee5);
+      }));
+      return function (_x5) {
+        return _ref0.apply(this, arguments);
       };
     }();
   },
   initialState: function initialState(state) {
-    return function (_ref7) {
-      var setState = _ref7.setState;
+    return function (_ref1) {
+      var setState = _ref1.setState;
       setState(_objectSpread(_objectSpread({}, _initialState), state));
     };
   }