@atlaskit/teams-public 0.34.1 → 0.35.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/teams-public
 
+## 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/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,
@@ -22,4 +22,7 @@ var webLinkToContainer = exports.webLinkToContainer = function webLinkToContaine
 };
 var webLinksToContainers = exports.webLinksToContainers = function webLinksToContainers(links) {
   return links.map(webLinkToContainer);
+};
+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;
@@ -48,24 +51,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 +87,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 +121,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 +160,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");
@@ -90,64 +91,100 @@ var actions = exports.actions = {
     }();
   },
   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 _ref4 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2(_ref3) {
+        var getState, setState, result, currentState;
+        return _regenerator.default.wrap(function _callee2$(_context2) {
+          while (1) switch (_context2.prev = _context2.next) {
+            case 0:
+              getState = _ref3.getState, setState = _ref3.setState;
+              _context2.next = 3;
+              return _teamsClient.teamsClient.createTeamLink(teamId, newLink);
+            case 3:
+              result = _context2.sent;
+              currentState = getState();
+              if (currentState.teamId === teamId) {
+                setState({
+                  links: [].concat((0, _toConsumableArray2.default)(currentState.links), [result])
+                });
+              }
+              return _context2.abrupt("return", result);
+            case 7:
+            case "end":
+              return _context2.stop();
+          }
+        }, _callee2);
+      }));
+      return function (_x2) {
+        return _ref4.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);
-    }));
+    return /*#__PURE__*/function () {
+      var _ref6 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee3(_ref5) {
+        var getState, setState, result, currentState;
+        return _regenerator.default.wrap(function _callee3$(_context3) {
+          while (1) switch (_context3.prev = _context3.next) {
+            case 0:
+              getState = _ref5.getState, setState = _ref5.setState;
+              _context3.next = 3;
+              return _teamsClient.teamsClient.updateTeamLink(teamId, linkId, newLink);
+            case 3:
+              result = _context3.sent;
+              currentState = getState();
+              if (currentState.teamId === teamId) {
+                setState({
+                  links: currentState.links.map(function (link) {
+                    return link.linkId === linkId ? result : link;
+                  })
+                });
+              }
+              return _context3.abrupt("return", result);
+            case 7:
+            case "end":
+              return _context3.stop();
+          }
+        }, _callee3);
+      }));
+      return function (_x3) {
+        return _ref6.apply(this, arguments);
+      };
+    }();
   },
   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, currentState;
         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;
               _context4.next = 3;
               return _teamsClient.teamsClient.deleteTeamLink(teamId, linkId);
             case 3:
-              _context4.next = 5;
-              return dispatch(actions.getTeamWebLinks(teamId));
+              currentState = getState();
+              if (currentState.teamId === teamId) {
+                setState({
+                  links: currentState.links.filter(function (link) {
+                    return link.linkId !== linkId;
+                  })
+                });
+              }
             case 5:
             case "end":
               return _context4.stop();
           }
         }, _callee4);
       }));
-      return function (_x2) {
-        return _ref6.apply(this, arguments);
+      return function (_x4) {
+        return _ref8.apply(this, arguments);
       };
     }();
   },
   initialState: function initialState(state) {
-    return function (_ref7) {
-      var setState = _ref7.setState;
+    return function (_ref9) {
+      var setState = _ref9.setState;
       setState(_objectSpread(_objectSpread({}, _initialState), state));
     };
   }

package/dist/cjs/ui/team-containers/main.js

@@ -28,6 +28,7 @@ var _async = require("./disconnect-dialog/async");
 var _linkedContainerCard = require("./linked-container-card");
 var _noProductAccessEmptyState = require("./no-product-access-empty-state");
 var _teamContainersSkeleton = require("./team-containers-skeleton");
+var _teamLinkCard = require("./team-link-card");
 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 ICON_BACKGROUND = exports.ICON_BACKGROUND = "var(--ds-icon-inverse, ".concat(_colors.N0, ")");
 var ICON_COLOR = exports.ICON_COLOR = "var(--ds-icon-subtle, ".concat(_colors.N90, ")");
@@ -35,6 +36,7 @@ var MAX_NUMBER_OF_CONTAINERS_TO_SHOW = exports.MAX_NUMBER_OF_CONTAINERS_TO_SHOW
 var TeamContainers = exports.TeamContainers = function TeamContainers(_ref) {
   var teamId = _ref.teamId,
     _onAddAContainerClick = _ref.onAddAContainerClick,
+    onEditContainerClick = _ref.onEditContainerClick,
     components = _ref.components,
     userId = _ref.userId,
     cloudId = _ref.cloudId,
@@ -50,7 +52,8 @@ var TeamContainers = exports.TeamContainers = function TeamContainers(_ref) {
     loading = _useTeamContainers.loading,
     unlinkError = _useTeamContainers.unlinkError;
   var _useTeamLinksAndConta = (0, _useTeamLinksAndContainers.useTeamLinksAndContainers)(teamId, true),
-    teamLinks = _useTeamLinksAndConta.teamLinks;
+    teamLinks = _useTeamLinksAndConta.teamLinks,
+    removeTeamLink = _useTeamLinksAndConta.removeTeamLink;
   var _useTeamContainersHoo = (0, _useTeamContainers2.useTeamContainersHook)(),
     _useTeamContainersHoo2 = (0, _slicedToArray2.default)(_useTeamContainersHoo, 2),
     _ = _useTeamContainersHoo2[0],
@@ -156,19 +159,36 @@ var TeamContainers = exports.TeamContainers = function TeamContainers(_ref) {
       }
     });
   }, [createAnalyticsEvent, fireTrackEvent, teamId]);
-  var LinkedContainerCardComponent = (components === null || components === void 0 ? void 0 : components.ContainerCard) || _linkedContainerCard.LinkedContainerCard;
+  var handleEditContainerClick = (0, _react.useCallback)(function (container) {
+    if (container.type === 'WebLink' && onEditContainerClick) {
+      onEditContainerClick(container.id, container.link || '', container.name);
+    }
+  }, [onEditContainerClick]);
+  var LinkedContainerCardComponent = (components === null || components === void 0 ? void 0 : components.ContainerCard) || (isSupportingAddWebLink ? _teamLinkCard.TeamLinkCard : _linkedContainerCard.LinkedContainerCard);
   var handleDisconnect = (0, _react.useCallback)( /*#__PURE__*/function () {
     var _ref2 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(containerId) {
       var removedContainer;
       return _regenerator.default.wrap(function _callee$(_context) {
         while (1) switch (_context.prev = _context.next) {
           case 0:
-            removedContainer = filteredTeamContainers.find(function (container) {
+            removedContainer = isSupportingAddWebLink ? filteredTeamLinks.find(function (container) {
+              return container.id === containerId;
+            }) : filteredTeamContainers.find(function (container) {
               return container.id === containerId;
             });
-            _context.next = 3;
+            if (!(isSupportingAddWebLink && removedContainer)) {
+              _context.next = 6;
+              break;
+            }
+            _context.next = 4;
+            return removeTeamLink(removedContainer);
+          case 4:
+            _context.next = 8;
+            break;
+          case 6:
+            _context.next = 8;
             return actions.unlinkTeamContainers(teamId, containerId);
-          case 3:
+          case 8:
             setIsDisconnectDialogOpen(false);
             if (unlinkError) {
               fireOperationalEvent(createAnalyticsEvent, {
@@ -188,7 +208,7 @@ var TeamContainers = exports.TeamContainers = function TeamContainers(_ref) {
                 }
               });
             }
-          case 5:
+          case 10:
           case "end":
             return _context.stop();
         }
@@ -197,7 +217,7 @@ var TeamContainers = exports.TeamContainers = function TeamContainers(_ref) {
     return function (_x) {
       return _ref2.apply(this, arguments);
     };
-  }(), [actions, createAnalyticsEvent, fireOperationalEvent, filteredTeamContainers, teamId, unlinkError]);
+  }(), [actions, createAnalyticsEvent, fireOperationalEvent, filteredTeamContainers, filteredTeamLinks, isSupportingAddWebLink, removeTeamLink, teamId, unlinkError]);
   var TeamContainersSkeletonComponent = (components === null || components === void 0 ? void 0 : components.TeamContainersSkeleton) || _teamContainersSkeleton.TeamContainersSkeleton;
   if (loading || productPermissionIsLoading) {
     return /*#__PURE__*/_react.default.createElement(TeamContainersSkeletonComponent, {
@@ -227,6 +247,9 @@ var TeamContainers = exports.TeamContainers = function TeamContainers(_ref) {
           containerType: container.type,
           containerName: container.name
         });
+      },
+      onEditLinkClick: function onEditLinkClick() {
+        return handleEditContainerClick(container);
       }
     });
   }) : filteredTeamContainers.slice(0, maxNumberOfContainersToShow).map(function (container) {
@@ -262,7 +285,9 @@ var TeamContainers = exports.TeamContainers = function TeamContainers(_ref) {
     },
     containerType: "LoomSpace"
   }), isSupportingAddWebLink && showAddContainer.WebLink && /*#__PURE__*/_react.default.createElement(_addContainerCard.AddContainerCard, {
-    onAddAContainerClick: function onAddAContainerClick() {},
+    onAddAContainerClick: function onAddAContainerClick(e) {
+      return _onAddAContainerClick(e, 'WebLink');
+    },
     containerType: "WebLink"
   }), showMore && isSupportingAddWebLink ? filteredTeamLinks.slice(maxNumberOfContainersToShow).map(function (container) {
     return /*#__PURE__*/_react.default.createElement(LinkedContainerCardComponent, {
@@ -279,6 +304,9 @@ var TeamContainers = exports.TeamContainers = function TeamContainers(_ref) {
           containerType: container.type,
           containerName: container.name
         });
+      },
+      onEditLinkClick: function onEditLinkClick() {
+        return handleEditContainerClick(container);
       }
     });
   }) : showMore && filteredTeamContainers.slice(maxNumberOfContainersToShow).map(function (container) {

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

@@ -0,0 +1,26 @@
+
+._2rkoop52{border-radius:var(--ds-border-radius-100,8px)}
+._1h6dz9xs{border-color:var(--ds-border-accent-gray,#758195)}._12jimuej{outline-color:var(--ds-border,#091e4224)}
+._12y3e4h9{outline-width:var(--ds-border-width,1px)}
+._16jlkb7n{flex-grow:1}
+._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}
+._1o9zkb7n{flex-shrink:1}
+._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)}
+._i0dlf1ug{flex-basis:0%}
+._n3tdutpp{padding-bottom:var(--ds-space-150,9pt)}
+._syaz1fxt{color:var(--ds-text,#172b4d)}
+._u5f3utpp{padding-right:var(--ds-space-150,9pt)}