@atlaskit/teams-public 0.19.0 → 0.21.0

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/teams-public
 
+## 0.21.0
+
+### Minor Changes
+
+- [#132354](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/132354)
+  [`6a5be2324873a`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/6a5be2324873a) -
+  [ux] add a new query to only fetch number of connected teams
+
+## 0.20.0
+
+### Minor Changes
+
+- [#132367](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/132367)
+  [`4e35f939f5756`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/4e35f939f5756) -
+  Pass container id to analytics on continer click
+
 ## 0.19.0
 
 ### Minor Changes

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

@@ -6,9 +6,9 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.useTeamContainersHook = exports.useTeamContainers = exports.useConnectedTeams = void 0;
 var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 var _react = require("react");
 var _reactSweetState = require("react-sweet-state");
@@ -20,7 +20,8 @@ var initialConnectedTeamsState = {
   isLoading: false,
   hasLoaded: false,
   teams: undefined,
-  error: null
+  error: null,
+  numberOfTeams: undefined
 };
 var initialState = {
   teamContainers: [],
@@ -83,10 +84,10 @@ var actions = {
       };
     }();
   },
-  fetchConnectedTeams: function fetchConnectedTeams(containerId) {
+  fetchNumberOfConnectedTeams: function fetchNumberOfConnectedTeams(containerId) {
     return /*#__PURE__*/function () {
       var _ref4 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2(_ref3) {
-        var setState, getState, _getState2, currentContainerId, teams;
+        var setState, getState, _getState2, currentContainerId, numberOfTeams;
         return _regenerator.default.wrap(function _callee2$(_context2) {
           while (1) switch (_context2.prev = _context2.next) {
             case 0:
@@ -97,6 +98,60 @@ var actions = {
                 break;
               }
               return _context2.abrupt("return");
+            case 4:
+              setState({
+                connectedTeams: _objectSpread(_objectSpread({}, initialConnectedTeamsState), {}, {
+                  containerId: containerId,
+                  numberOfTeams: undefined
+                })
+              });
+              _context2.prev = 5;
+              _context2.next = 8;
+              return _services.teamsClient.getNumberOfConnectedTeams(containerId);
+            case 8:
+              numberOfTeams = _context2.sent;
+              setState({
+                connectedTeams: _objectSpread(_objectSpread({}, initialConnectedTeamsState), {}, {
+                  containerId: containerId,
+                  numberOfTeams: numberOfTeams
+                })
+              });
+              _context2.next = 15;
+              break;
+            case 12:
+              _context2.prev = 12;
+              _context2.t0 = _context2["catch"](5);
+              setState({
+                connectedTeams: _objectSpread(_objectSpread({}, initialConnectedTeamsState), {}, {
+                  containerId: containerId,
+                  error: _context2.t0
+                })
+              });
+            case 15:
+            case "end":
+              return _context2.stop();
+          }
+        }, _callee2, null, [[5, 12]]);
+      }));
+      return function (_x2) {
+        return _ref4.apply(this, arguments);
+      };
+    }();
+  },
+  fetchConnectedTeams: function fetchConnectedTeams(containerId) {
+    return /*#__PURE__*/function () {
+      var _ref6 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee3(_ref5) {
+        var setState, getState, _getState3, _getState3$connectedT, currentContainerId, numberOfTeams, hasLoaded, teams;
+        return _regenerator.default.wrap(function _callee3$(_context3) {
+          while (1) switch (_context3.prev = _context3.next) {
+            case 0:
+              setState = _ref5.setState, getState = _ref5.getState;
+              _getState3 = getState(), _getState3$connectedT = _getState3.connectedTeams, currentContainerId = _getState3$connectedT.containerId, numberOfTeams = _getState3$connectedT.numberOfTeams, hasLoaded = _getState3$connectedT.hasLoaded;
+              if (!(currentContainerId === containerId && hasLoaded)) {
+                _context3.next = 4;
+                break;
+              }
+              return _context3.abrupt("return");
             case 4:
               setState({
                 connectedTeams: {
@@ -104,71 +159,74 @@ var actions = {
                   isLoading: true,
                   hasLoaded: false,
                   teams: undefined,
-                  error: null
+                  error: null,
+                  numberOfTeams: numberOfTeams
                 }
               });
-              _context2.prev = 5;
-              _context2.next = 8;
+              _context3.prev = 5;
+              _context3.next = 8;
               return _services.teamsClient.getConnectedTeams(containerId);
             case 8:
-              teams = _context2.sent;
+              teams = _context3.sent;
               setState({
                 connectedTeams: {
                   containerId: containerId,
                   isLoading: false,
                   hasLoaded: true,
                   teams: teams,
-                  error: null
+                  error: null,
+                  numberOfTeams: numberOfTeams
                 }
               });
-              _context2.next = 15;
+              _context3.next = 15;
               break;
             case 12:
-              _context2.prev = 12;
-              _context2.t0 = _context2["catch"](5);
+              _context3.prev = 12;
+              _context3.t0 = _context3["catch"](5);
               setState({
                 connectedTeams: {
                   containerId: containerId,
                   isLoading: false,
                   hasLoaded: false,
                   teams: [],
-                  error: _context2.t0
+                  error: _context3.t0,
+                  numberOfTeams: numberOfTeams
                 }
               });
             case 15:
             case "end":
-              return _context2.stop();
+              return _context3.stop();
           }
-        }, _callee2, null, [[5, 12]]);
+        }, _callee3, null, [[5, 12]]);
       }));
-      return function (_x2) {
-        return _ref4.apply(this, arguments);
+      return function (_x3) {
+        return _ref6.apply(this, arguments);
       };
     }();
   },
   unlinkTeamContainers: function unlinkTeamContainers(teamId, containerId) {
     return /*#__PURE__*/function () {
-      var _ref6 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee3(_ref5) {
-        var setState, getState, mutationResult, _getState3, teamContainers, connectedTeams, newContainers;
-        return _regenerator.default.wrap(function _callee3$(_context3) {
-          while (1) switch (_context3.prev = _context3.next) {
+      var _ref8 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee4(_ref7) {
+        var setState, getState, mutationResult, _getState4, teamContainers, connectedTeams, newContainers;
+        return _regenerator.default.wrap(function _callee4$(_context4) {
+          while (1) switch (_context4.prev = _context4.next) {
             case 0:
-              setState = _ref5.setState, getState = _ref5.getState;
+              setState = _ref7.setState, getState = _ref7.getState;
               setState({
                 unlinkError: null
               });
-              _context3.prev = 2;
-              _context3.next = 5;
+              _context4.prev = 2;
+              _context4.next = 5;
               return _services.teamsClient.unlinkTeamContainer(teamId, containerId);
             case 5:
-              mutationResult = _context3.sent;
+              mutationResult = _context4.sent;
               if (mutationResult.deleteTeamConnectedToContainer.errors.length) {
                 // Just handle 1 error at a time should be suffcient as we disconenct only 1 container at a time
                 setState({
                   unlinkError: mutationResult.deleteTeamConnectedToContainer.errors[0]
                 });
               } else {
-                _getState3 = getState(), teamContainers = _getState3.teamContainers, connectedTeams = _getState3.connectedTeams;
+                _getState4 = getState(), teamContainers = _getState4.teamContainers, connectedTeams = _getState4.connectedTeams;
                 newContainers = teamContainers.filter(function (container) {
                   return container.id !== containerId;
                 });
@@ -183,42 +241,42 @@ var actions = {
                   });
                 }
               }
-              _context3.next = 12;
+              _context4.next = 12;
               break;
             case 9:
-              _context3.prev = 9;
-              _context3.t0 = _context3["catch"](2);
+              _context4.prev = 9;
+              _context4.t0 = _context4["catch"](2);
               setState({
-                unlinkError: _context3.t0
+                unlinkError: _context4.t0
               });
             case 12:
             case "end":
-              return _context3.stop();
+              return _context4.stop();
           }
-        }, _callee3, null, [[2, 9]]);
+        }, _callee4, null, [[2, 9]]);
       }));
-      return function (_x3) {
-        return _ref6.apply(this, arguments);
+      return function (_x4) {
+        return _ref8.apply(this, arguments);
       };
     }();
   },
   addTeamContainer: function addTeamContainer(teamContainer) {
     return /*#__PURE__*/function () {
-      var _ref8 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee4(_ref7) {
-        var setState, getState, _getState4, teamContainers, connectedTeams, containerExists;
-        return _regenerator.default.wrap(function _callee4$(_context4) {
-          while (1) switch (_context4.prev = _context4.next) {
+      var _ref10 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee5(_ref9) {
+        var setState, getState, _getState5, teamContainers, connectedTeams, containerExists;
+        return _regenerator.default.wrap(function _callee5$(_context5) {
+          while (1) switch (_context5.prev = _context5.next) {
             case 0:
-              setState = _ref7.setState, getState = _ref7.getState;
-              _getState4 = getState(), teamContainers = _getState4.teamContainers, connectedTeams = _getState4.connectedTeams;
+              setState = _ref9.setState, getState = _ref9.getState;
+              _getState5 = getState(), teamContainers = _getState5.teamContainers, connectedTeams = _getState5.connectedTeams;
               containerExists = teamContainers.some(function (container) {
                 return container.id === teamContainer.id;
               });
               if (!containerExists) {
-                _context4.next = 5;
+                _context5.next = 5;
                 break;
               }
-              return _context4.abrupt("return");
+              return _context5.abrupt("return");
             case 5:
               if (connectedTeams.containerId === teamContainer.id) {
                 setState({
@@ -232,12 +290,12 @@ var actions = {
               }
             case 6:
             case "end":
-              return _context4.stop();
+              return _context5.stop();
           }
-        }, _callee4);
+        }, _callee5);
       }));
-      return function (_x4) {
-        return _ref8.apply(this, arguments);
+      return function (_x5) {
+        return _ref10.apply(this, arguments);
       };
     }();
   }
@@ -269,6 +327,7 @@ var useConnectedTeams = exports.useConnectedTeams = function useConnectedTeams()
     state = _useTeamContainersHoo4[0],
     actions = _useTeamContainersHoo4[1];
   return _objectSpread(_objectSpread({}, state.connectedTeams), {}, {
+    fetchNumberOfConnectedTeams: actions.fetchNumberOfConnectedTeams,
     fetchConnectedTeams: actions.fetchConnectedTeams
   });
 };

package/dist/cjs/services/agg-client/index.js

@@ -17,6 +17,7 @@ var _userAri = require("../../common/utils/user-ari");
 var _constants = require("../constants");
 var _graphqlClient = require("../graphql-client");
 var _unlinkContainerMutation = require("./utils/mutations/unlink-container-mutation");
+var _numberOfTeamConnectedToContainerQuery = require("./utils/queries/number-of-team-connected-to-container-query");
 var _teamConnectedToContainerQuery = require("./utils/queries/team-connected-to-container-query");
 var _teamContainersQuery = require("./utils/queries/team-containers-query");
 function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2.default)(o), (0, _possibleConstructorReturn2.default)(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2.default)(t).constructor) : o.apply(t, e)); }
@@ -109,15 +110,47 @@ var AGGClient = exports.AGGClient = /*#__PURE__*/function (_BaseGraphQlClient) {
       return unlinkTeamContainer;
     }()
   }, {
-    key: "queryTeamsConnectedToContainer",
+    key: "queryNumberOfTeamConnectedToContainer",
     value: function () {
-      var _queryTeamsConnectedToContainer = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee3(containerId) {
+      var _queryNumberOfTeamConnectedToContainer = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee3(containerId) {
         var _response$graphStore;
         var response;
         return _regenerator.default.wrap(function _callee3$(_context3) {
           while (1) switch (_context3.prev = _context3.next) {
             case 0:
               _context3.next = 2;
+              return this.makeGraphQLRequest({
+                query: _numberOfTeamConnectedToContainerQuery.NumberOfTeamConnectedToContainerQuery,
+                variables: {
+                  containerId: containerId
+                }
+              }, {
+                operationName: 'NumberOfTeamConnectedToContainerQuery'
+              });
+            case 2:
+              response = _context3.sent;
+              return _context3.abrupt("return", response === null || response === void 0 || (_response$graphStore = response.graphStore) === null || _response$graphStore === void 0 || (_response$graphStore = _response$graphStore.teamConnectedToContainerInverse) === null || _response$graphStore === void 0 || (_response$graphStore = _response$graphStore.edges) === null || _response$graphStore === void 0 ? void 0 : _response$graphStore.length);
+            case 4:
+            case "end":
+              return _context3.stop();
+          }
+        }, _callee3, this);
+      }));
+      function queryNumberOfTeamConnectedToContainer(_x4) {
+        return _queryNumberOfTeamConnectedToContainer.apply(this, arguments);
+      }
+      return queryNumberOfTeamConnectedToContainer;
+    }()
+  }, {
+    key: "queryTeamsConnectedToContainer",
+    value: function () {
+      var _queryTeamsConnectedToContainer = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee4(containerId) {
+        var _response$graphStore2;
+        var response;
+        return _regenerator.default.wrap(function _callee4$(_context4) {
+          while (1) switch (_context4.prev = _context4.next) {
+            case 0:
+              _context4.next = 2;
               return this.makeGraphQLRequest({
                 query: _teamConnectedToContainerQuery.TeamConnectedToContainerQuery,
                 variables: {
@@ -127,8 +160,8 @@ var AGGClient = exports.AGGClient = /*#__PURE__*/function (_BaseGraphQlClient) {
                 operationName: 'TeamConnectedToContainerQuery'
               });
             case 2:
-              response = _context3.sent;
-              return _context3.abrupt("return", response === null || response === void 0 || (_response$graphStore = response.graphStore) === null || _response$graphStore === void 0 || (_response$graphStore = _response$graphStore.teamConnectedToContainerInverse) === null || _response$graphStore === void 0 || (_response$graphStore = _response$graphStore.edges) === null || _response$graphStore === void 0 ? void 0 : _response$graphStore.map(function (_ref) {
+              response = _context4.sent;
+              return _context4.abrupt("return", response === null || response === void 0 || (_response$graphStore2 = response.graphStore) === null || _response$graphStore2 === void 0 || (_response$graphStore2 = _response$graphStore2.teamConnectedToContainerInverse) === null || _response$graphStore2 === void 0 || (_response$graphStore2 = _response$graphStore2.edges) === null || _response$graphStore2 === void 0 ? void 0 : _response$graphStore2.map(function (_ref) {
                 var _node$members$nodes$m, _node$members, _node$members$nodes$l, _node$members2;
                 var node = _ref.node;
                 return {
@@ -162,11 +195,11 @@ var AGGClient = exports.AGGClient = /*#__PURE__*/function (_BaseGraphQlClient) {
               }));
             case 4:
             case "end":
-              return _context3.stop();
+              return _context4.stop();
           }
-        }, _callee3, this);
+        }, _callee4, this);
       }));
-      function queryTeamsConnectedToContainer(_x4) {
+      function queryTeamsConnectedToContainer(_x5) {
         return _queryTeamsConnectedToContainer.apply(this, arguments);
       }
       return queryTeamsConnectedToContainer;

package/dist/cjs/services/agg-client/mocks/index.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.MOCK_TEAM_CONTAINERS = exports.MOCK_CONNECTED_TEAMS_RESULT = exports.MOCK_CONNECTED_TEAMS = void 0;
+exports.MOCK_TEAM_CONTAINERS = exports.MOCK_NUMBER_OF_CONNECTED_TEAMS = exports.MOCK_CONNECTED_TEAMS_RESULT = exports.MOCK_CONNECTED_TEAMS = void 0;
 var MOCK_TEAM_CONTAINERS = exports.MOCK_TEAM_CONTAINERS = {
   graphStore: {
     cypherQuery: {
@@ -50,6 +50,15 @@ var MOCK_TEAM_CONTAINERS = exports.MOCK_TEAM_CONTAINERS = {
     }
   }
 };
+var MOCK_NUMBER_OF_CONNECTED_TEAMS = exports.MOCK_NUMBER_OF_CONNECTED_TEAMS = {
+  graphStore: {
+    teamConnectedToContainerInverse: {
+      edges: [{
+        id: 'ari:cloud:identity::team/8ee37950-7de7-41ec-aee2-2c02c95949f4'
+      }]
+    }
+  }
+};
 var MOCK_CONNECTED_TEAMS = exports.MOCK_CONNECTED_TEAMS = {
   graphStore: {
     teamConnectedToContainerInverse: {

package/dist/cjs/services/agg-client/utils/queries/number-of-team-connected-to-container-query.js

@@ -0,0 +1,12 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.NumberOfTeamConnectedToContainerQuery = void 0;
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _graphql = require("graphql");
+var _graphqlTag = _interopRequireDefault(require("graphql-tag"));
+var _templateObject;
+var NumberOfTeamConnectedToContainerQuery = exports.NumberOfTeamConnectedToContainerQuery = (0, _graphql.print)((0, _graphqlTag.default)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n\tquery getNumberOfTeamsForContainer($containerId: ID!) {\n\t\tgraphStore @optIn(to: \"GraphStore\") {\n\t\t\tteamConnectedToContainerInverse(id: $containerId, consistentRead: true)\n\t\t\t\t@optIn(to: \"GraphStoreTeamConnectedToContainer\") {\n\t\t\t\tedges {\n\t\t\t\t\tid\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n"]))));

package/dist/cjs/services/main.js

@@ -68,26 +68,51 @@ var TeamsClient = exports.TeamsClient = /*#__PURE__*/function () {
       return getTeamContainers;
     }()
     /**
-     * Get teams connected to a container (Confluence space or Jira project)
+     * Get the number of teams connected to a container (Confluence space or Jira project)
      * @param {string} containerId
      * @returns {Promise}
      */
     )
   }, {
-    key: "getConnectedTeams",
+    key: "getNumberOfConnectedTeams",
     value: (function () {
-      var _getConnectedTeams = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2(containerId) {
+      var _getNumberOfConnectedTeams = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2(containerId) {
         return _regenerator.default.wrap(function _callee2$(_context2) {
           while (1) switch (_context2.prev = _context2.next) {
             case 0:
-              return _context2.abrupt("return", this._aggClient.queryTeamsConnectedToContainer(containerId));
+              return _context2.abrupt("return", this._aggClient.queryNumberOfTeamConnectedToContainer(containerId));
             case 1:
             case "end":
               return _context2.stop();
           }
         }, _callee2, this);
       }));
-      function getConnectedTeams(_x2) {
+      function getNumberOfConnectedTeams(_x2) {
+        return _getNumberOfConnectedTeams.apply(this, arguments);
+      }
+      return getNumberOfConnectedTeams;
+    }()
+    /**
+     * Get teams connected to a container (Confluence space or Jira project)
+     * @param {string} containerId
+     * @returns {Promise}
+     */
+    )
+  }, {
+    key: "getConnectedTeams",
+    value: (function () {
+      var _getConnectedTeams = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee3(containerId) {
+        return _regenerator.default.wrap(function _callee3$(_context3) {
+          while (1) switch (_context3.prev = _context3.next) {
+            case 0:
+              return _context3.abrupt("return", this._aggClient.queryTeamsConnectedToContainer(containerId));
+            case 1:
+            case "end":
+              return _context3.stop();
+          }
+        }, _callee3, this);
+      }));
+      function getConnectedTeams(_x3) {
         return _getConnectedTeams.apply(this, arguments);
       }
       return getConnectedTeams;
@@ -102,18 +127,18 @@ var TeamsClient = exports.TeamsClient = /*#__PURE__*/function () {
   }, {
     key: "unlinkTeamContainer",
     value: (function () {
-      var _unlinkTeamContainer = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee3(teamId, containerId) {
-        return _regenerator.default.wrap(function _callee3$(_context3) {
-          while (1) switch (_context3.prev = _context3.next) {
+      var _unlinkTeamContainer = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee4(teamId, containerId) {
+        return _regenerator.default.wrap(function _callee4$(_context4) {
+          while (1) switch (_context4.prev = _context4.next) {
             case 0:
-              return _context3.abrupt("return", this._aggClient.unlinkTeamContainer(teamId, containerId));
+              return _context4.abrupt("return", this._aggClient.unlinkTeamContainer(teamId, containerId));
             case 1:
             case "end":
-              return _context3.stop();
+              return _context4.stop();
           }
-        }, _callee3, this);
+        }, _callee4, this);
       }));
-      function unlinkTeamContainer(_x3, _x4) {
+      function unlinkTeamContainer(_x4, _x5) {
         return _unlinkTeamContainer.apply(this, arguments);
       }
       return unlinkTeamContainer;

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

@@ -181,6 +181,7 @@ var TeamContainers = exports.TeamContainers = function TeamContainers(_ref) {
       title: container.name,
       containerIcon: container.icon || undefined,
       link: container.link || undefined,
+      containerId: container.id,
       onDisconnectButtonClick: function onDisconnectButtonClick() {
         return handleOpenDisconnectDialog({
           containerId: container.id,

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

@@ -6,7 +6,8 @@ const initialConnectedTeamsState = {
   isLoading: false,
   hasLoaded: false,
   teams: undefined,
-  error: null
+  error: null,
+  numberOfTeams: undefined
 };
 const initialState = {
   teamContainers: [],
@@ -48,7 +49,7 @@ const actions = {
       });
     }
   },
-  fetchConnectedTeams: containerId => async ({
+  fetchNumberOfConnectedTeams: containerId => async ({
     setState,
     getState
   }) => {
@@ -60,13 +61,54 @@ const actions = {
     if (currentContainerId === containerId) {
       return;
     }
+    setState({
+      connectedTeams: {
+        ...initialConnectedTeamsState,
+        containerId,
+        numberOfTeams: undefined
+      }
+    });
+    try {
+      const numberOfTeams = await teamsClient.getNumberOfConnectedTeams(containerId);
+      setState({
+        connectedTeams: {
+          ...initialConnectedTeamsState,
+          containerId,
+          numberOfTeams
+        }
+      });
+    } catch (e) {
+      setState({
+        connectedTeams: {
+          ...initialConnectedTeamsState,
+          containerId,
+          error: e
+        }
+      });
+    }
+  },
+  fetchConnectedTeams: containerId => async ({
+    setState,
+    getState
+  }) => {
+    const {
+      connectedTeams: {
+        containerId: currentContainerId,
+        numberOfTeams,
+        hasLoaded
+      }
+    } = getState();
+    if (currentContainerId === containerId && hasLoaded) {
+      return;
+    }
     setState({
       connectedTeams: {
         containerId,
         isLoading: true,
         hasLoaded: false,
         teams: undefined,
-        error: null
+        error: null,
+        numberOfTeams
       }
     });
     try {
@@ -77,7 +119,8 @@ const actions = {
           isLoading: false,
           hasLoaded: true,
           teams,
-          error: null
+          error: null,
+          numberOfTeams
         }
       });
     } catch (e) {
@@ -87,7 +130,8 @@ const actions = {
           isLoading: false,
           hasLoaded: false,
           teams: [],
-          error: e
+          error: e,
+          numberOfTeams
         }
       });
     }
@@ -175,6 +219,7 @@ export const useConnectedTeams = () => {
   const [state, actions] = useTeamContainersHook();
   return {
     ...state.connectedTeams,
+    fetchNumberOfConnectedTeams: actions.fetchNumberOfConnectedTeams,
     fetchConnectedTeams: actions.fetchConnectedTeams
   };
 };

package/dist/es2019/services/agg-client/index.js

@@ -3,6 +3,7 @@ import { toUserId } from '../../common/utils/user-ari';
 import { DEFAULT_CONFIG } from '../constants';
 import { BaseGraphQlClient } from '../graphql-client';
 import { UnlinkContainerMutation } from './utils/mutations/unlink-container-mutation';
+import { NumberOfTeamConnectedToContainerQuery } from './utils/queries/number-of-team-connected-to-container-query';
 import { TeamConnectedToContainerQuery } from './utils/queries/team-connected-to-container-query';
 import { TeamContainersQuery } from './utils/queries/team-containers-query';
 export class AGGClient extends BaseGraphQlClient {
@@ -46,8 +47,20 @@ export class AGGClient extends BaseGraphQlClient {
     });
     return response.graphStore;
   }
-  async queryTeamsConnectedToContainer(containerId) {
+  async queryNumberOfTeamConnectedToContainer(containerId) {
     var _response$graphStore, _response$graphStore$, _response$graphStore$2;
+    const response = await this.makeGraphQLRequest({
+      query: NumberOfTeamConnectedToContainerQuery,
+      variables: {
+        containerId
+      }
+    }, {
+      operationName: 'NumberOfTeamConnectedToContainerQuery'
+    });
+    return response === null || response === void 0 ? void 0 : (_response$graphStore = response.graphStore) === null || _response$graphStore === void 0 ? void 0 : (_response$graphStore$ = _response$graphStore.teamConnectedToContainerInverse) === null || _response$graphStore$ === void 0 ? void 0 : (_response$graphStore$2 = _response$graphStore$.edges) === null || _response$graphStore$2 === void 0 ? void 0 : _response$graphStore$2.length;
+  }
+  async queryTeamsConnectedToContainer(containerId) {
+    var _response$graphStore2, _response$graphStore3, _response$graphStore4;
     const response = await this.makeGraphQLRequest({
       query: TeamConnectedToContainerQuery,
       variables: {
@@ -56,7 +69,7 @@ export class AGGClient extends BaseGraphQlClient {
     }, {
       operationName: 'TeamConnectedToContainerQuery'
     });
-    return response === null || response === void 0 ? void 0 : (_response$graphStore = response.graphStore) === null || _response$graphStore === void 0 ? void 0 : (_response$graphStore$ = _response$graphStore.teamConnectedToContainerInverse) === null || _response$graphStore$ === void 0 ? void 0 : (_response$graphStore$2 = _response$graphStore$.edges) === null || _response$graphStore$2 === void 0 ? void 0 : _response$graphStore$2.map(({
+    return response === null || response === void 0 ? void 0 : (_response$graphStore2 = response.graphStore) === null || _response$graphStore2 === void 0 ? void 0 : (_response$graphStore3 = _response$graphStore2.teamConnectedToContainerInverse) === null || _response$graphStore3 === void 0 ? void 0 : (_response$graphStore4 = _response$graphStore3.edges) === null || _response$graphStore4 === void 0 ? void 0 : _response$graphStore4.map(({
       node
     }) => {
       var _node$members$nodes$m, _node$members, _node$members$nodes$l, _node$members2;