@atlaskit/teams-public 0.54.3 → 0.55.0

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @atlaskit/teams-public
 
+## 0.55.0
+
+### Minor Changes
+
+- [`aac362891a691`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/aac362891a691) -
+  Team containers made reusable
+- [`2aa702d47e9d3`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/2aa702d47e9d3) -
+  Update useRefreshOnContainerCreated to poll for container until its ready
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 0.54.3
 
 ### Patch Changes

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

@@ -33,10 +33,8 @@ var actions = {
       if (current.isCreated === isCreated) {
         return;
       }
-      var isLoading = isCreated ? false : current.isLoading;
       setState(_objectSpread(_objectSpread({}, containers), {}, (0, _defineProperty2.default)({}, product, _objectSpread(_objectSpread({}, current), {}, {
-        isCreated: isCreated,
-        isLoading: isLoading
+        isCreated: isCreated
       }))));
     };
   }

package/dist/cjs/controllers/hooks/use-refresh-containers-on-container-created/index.js

@@ -0,0 +1,143 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TIMEOUT_DURATION = exports.INTERVAL_TIME = void 0;
+exports.useRefreshOnContainerCreated = useRefreshOnContainerCreated;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = require("react");
+var _useCreateContainers3 = require("../use-create-containers");
+var _useTeamContainers2 = require("../use-team-containers");
+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 PRODUCT_TO_CONTAINER_TYPE = {
+  Jira: 'JiraProject',
+  Confluence: 'ConfluenceSpace',
+  Loom: 'LoomSpace'
+};
+var INTERVAL_TIME = exports.INTERVAL_TIME = 2000;
+var TIMEOUT_DURATION = exports.TIMEOUT_DURATION = 30000;
+function useRefreshOnContainerCreated(teamId) {
+  var _useCreateContainers = (0, _useCreateContainers3.useCreateContainers)(),
+    _useCreateContainers2 = (0, _slicedToArray2.default)(_useCreateContainers, 2),
+    containers = _useCreateContainers2[0],
+    updateContainerLoading = _useCreateContainers2[1].updateContainerLoading;
+  var _useTeamContainers = (0, _useTeamContainers2.useTeamContainers)(teamId),
+    refetchTeamContainers = _useTeamContainers.refetchTeamContainers,
+    teamContainers = _useTeamContainers.teamContainers;
+  var _useState = (0, _react.useState)({}),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    createdContainers = _useState2[0],
+    setCreatedContainers = _useState2[1];
+  var intervalRef = (0, _react.useRef)(null);
+  (0, _react.useEffect)(function () {
+    setCreatedContainers({});
+    if (intervalRef.current) {
+      clearInterval(intervalRef.current);
+      intervalRef.current = null;
+    }
+  }, [teamId]);
+  (0, _react.useEffect)(function () {
+    var products = Object.keys(containers);
+    products.forEach(function (product) {
+      var isCreated = containers[product].isCreated;
+      if (!isCreated) {
+        return;
+      }
+      var existing = createdContainers[product];
+      if (existing && existing.found === false) {
+        return;
+      }
+      if (existing && existing.found) {
+        return;
+      }
+      var containerType = PRODUCT_TO_CONTAINER_TYPE[product];
+      if (!containerType) {
+        return;
+      }
+      var currentCount = teamContainers.filter(function (c) {
+        return c.type === containerType;
+      }).length;
+      if (currentCount > 0) {
+        setCreatedContainers(function (prev) {
+          return _objectSpread(_objectSpread({}, prev), {}, (0, _defineProperty2.default)({}, product, {
+            startedAt: Date.now(),
+            found: true
+          }));
+        });
+        updateContainerLoading(product, false);
+        return;
+      }
+      setCreatedContainers(function (prev) {
+        return _objectSpread(_objectSpread({}, prev), {}, (0, _defineProperty2.default)({}, product, {
+          startedAt: Date.now(),
+          found: false
+        }));
+      });
+    });
+  }, [containers, createdContainers, teamContainers, updateContainerLoading]);
+  (0, _react.useEffect)(function () {
+    if (Object.keys(createdContainers).length === 0) {
+      if (intervalRef.current) {
+        clearInterval(intervalRef.current);
+        intervalRef.current = null;
+      }
+      return;
+    }
+    if (intervalRef.current) {
+      return;
+    }
+    intervalRef.current = setInterval(function () {
+      setCreatedContainers(function (prev) {
+        var anyPending = false;
+        var next = _objectSpread({}, prev);
+        Object.keys(prev).forEach(function (product) {
+          var target = prev[product];
+          if (!target || target.found) {
+            return;
+          }
+          var startedAt = target.startedAt;
+          var containerType = PRODUCT_TO_CONTAINER_TYPE[product];
+          if (!containerType) {
+            next[product] = _objectSpread(_objectSpread({}, target), {}, {
+              found: true
+            });
+            updateContainerLoading(product, false);
+            return;
+          }
+          var currentCount = teamContainers.filter(function (container) {
+            return container.type === containerType;
+          }).length;
+          var elapsed = Date.now() - startedAt;
+          if (currentCount > 0 || elapsed >= TIMEOUT_DURATION) {
+            next[product] = _objectSpread(_objectSpread({}, target), {}, {
+              found: true
+            });
+            updateContainerLoading(product, false);
+          } else {
+            anyPending = true;
+          }
+        });
+        if (!anyPending) {
+          if (intervalRef.current) {
+            clearInterval(intervalRef.current);
+            intervalRef.current = null;
+          }
+        }
+        if (anyPending) {
+          refetchTeamContainers();
+        }
+        return next;
+      });
+    }, INTERVAL_TIME);
+    return function () {
+      if (intervalRef.current) {
+        clearInterval(intervalRef.current);
+        intervalRef.current = null;
+      }
+    };
+  }, [createdContainers, teamContainers, refetchTeamContainers, updateContainerLoading]);
+}

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

@@ -8,7 +8,6 @@ Object.defineProperty(exports, "__esModule", {
 exports.TeamContainers = exports.MAX_NUMBER_OF_CONTAINERS_TO_SHOW = exports.ICON_COLOR = exports.ICON_BACKGROUND = void 0;
 var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
 var _reactIntlNext = require("react-intl-next");
@@ -23,44 +22,22 @@ var _colors = require("@atlaskit/theme/colors");
 var _teamContainersSkeleton = require("../../common/ui/team-containers-skeleton");
 var _analytics = require("../../common/utils/analytics");
 var _controllers = require("../../controllers");
-var _useCreateContainers5 = require("../../controllers/hooks/use-create-containers");
+var _useCreateContainers3 = require("../../controllers/hooks/use-create-containers");
 var _useProductPermission3 = require("../../controllers/hooks/use-product-permission");
+var _useRefreshContainersOnContainerCreated = require("../../controllers/hooks/use-refresh-containers-on-container-created");
 var _useRequestedContainer = require("../../controllers/hooks/use-requested-container");
-var _useTeamContainers3 = require("../../controllers/hooks/use-team-containers");
+var _useTeamContainers2 = require("../../controllers/hooks/use-team-containers");
 var _useTeamLinksAndContainers = require("../../controllers/hooks/use-team-links-and-containers");
 var _addContainerCard = require("./add-container-card");
 var _async = require("./disconnect-dialog/async");
 var _noProductAccessEmptyState = require("./no-product-access-empty-state");
 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); }
-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; } // eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- to be migrated to @atlaskit/primitives/compiled – go/akcss
+// eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- to be migrated to @atlaskit/primitives/compiled – go/akcss
+
 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, ")");
 var MAX_NUMBER_OF_CONTAINERS_TO_SHOW = exports.MAX_NUMBER_OF_CONTAINERS_TO_SHOW = 4;
-function useRefreshOnContainerCreated(teamId) {
-  var _useCreateContainers = (0, _useCreateContainers5.useCreateContainers)(),
-    _useCreateContainers2 = (0, _slicedToArray2.default)(_useCreateContainers, 1),
-    containers = _useCreateContainers2[0];
-  var _useTeamContainers = (0, _useTeamContainers3.useTeamContainers)(teamId),
-    refetchTeamContainers = _useTeamContainers.refetchTeamContainers;
-  var _useState = (0, _react.useState)({}),
-    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-    refreshedProducts = _useState2[0],
-    setRefreshedProducts = _useState2[1];
-  (0, _react.useEffect)(function () {
-    var products = Object.keys(containers);
-    products.forEach(function (product) {
-      var isCreated = containers[product].isCreated;
-      if (isCreated && !refreshedProducts[product]) {
-        setRefreshedProducts(function (prev) {
-          return _objectSpread(_objectSpread({}, prev), {}, (0, _defineProperty2.default)({}, product, true));
-        });
-        refetchTeamContainers();
-      }
-    });
-  }, [containers, refetchTeamContainers, refreshedProducts]);
-}
 var TeamContainers = exports.TeamContainers = function TeamContainers(_ref) {
   var teamId = _ref.teamId,
     onAddAContainerClick = _ref.onAddAContainerClick,
@@ -72,17 +49,21 @@ var TeamContainers = exports.TeamContainers = function TeamContainers(_ref) {
     cloudId = _ref.cloudId,
     filterContainerId = _ref.filterContainerId,
     isDisplayedOnProfileCard = _ref.isDisplayedOnProfileCard,
+    isReadOnly = _ref.isReadOnly,
+    onError = _ref.onError,
     _ref$maxNumberOfConta = _ref.maxNumberOfContainersToShow,
-    maxNumberOfContainersToShow = _ref$maxNumberOfConta === void 0 ? MAX_NUMBER_OF_CONTAINERS_TO_SHOW : _ref$maxNumberOfConta;
+    maxNumberOfContainersToShow = _ref$maxNumberOfConta === void 0 ? MAX_NUMBER_OF_CONTAINERS_TO_SHOW : _ref$maxNumberOfConta,
+    elemBeforeCards = _ref.elemBeforeCards;
   var _useAnalyticsEvents = (0, _analyticsNext.useAnalyticsEvents)(),
     createAnalyticsEvent = _useAnalyticsEvents.createAnalyticsEvent;
-  var _useTeamContainers2 = (0, _useTeamContainers3.useTeamContainers)(teamId),
-    unlinkError = _useTeamContainers2.unlinkError;
+  var _useTeamContainers = (0, _useTeamContainers2.useTeamContainers)(teamId),
+    unlinkError = _useTeamContainers.unlinkError;
   var _useTeamLinksAndConta = (0, _useTeamLinksAndContainers.useTeamLinksAndContainers)(teamId, true),
     teamLinks = _useTeamLinksAndConta.teamLinks,
     removeTeamLink = _useTeamLinksAndConta.removeTeamLink,
     iconsLoading = _useTeamLinksAndConta.iconsLoading,
     iconHasLoaded = _useTeamLinksAndConta.iconHasLoaded,
+    hasError = _useTeamLinksAndConta.hasError,
     linksLoading = _useTeamLinksAndConta.isLoading;
   var _useRequestedContaine = (0, _useRequestedContainer.useRequestedContainers)({
       teamId: teamId,
@@ -90,38 +71,38 @@ var TeamContainers = exports.TeamContainers = function TeamContainers(_ref) {
       onRequestedContainerTimeout: onRequestedContainerTimeout
     }),
     requestedContainers = _useRequestedContaine.requestedContainers;
-  var _useTeamContainersHoo = (0, _useTeamContainers3.useTeamContainersHook)(),
+  var _useTeamContainersHoo = (0, _useTeamContainers2.useTeamContainersHook)(),
     _useTeamContainersHoo2 = (0, _slicedToArray2.default)(_useTeamContainersHoo, 2),
     _ = _useTeamContainersHoo2[0],
     actions = _useTeamContainersHoo2[1];
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    showMore = _useState2[0],
+    setShowMore = _useState2[1];
   var _useState3 = (0, _react.useState)(false),
     _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
-    showMore = _useState4[0],
-    setShowMore = _useState4[1];
-  var _useState5 = (0, _react.useState)(false),
+    isDisconnectDialogOpen = _useState4[0],
+    setIsDisconnectDialogOpen = _useState4[1];
+  var _useState5 = (0, _react.useState)(),
     _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
-    isDisconnectDialogOpen = _useState6[0],
-    setIsDisconnectDialogOpen = _useState6[1];
-  var _useState7 = (0, _react.useState)(),
+    selectedContainerDetails = _useState6[0],
+    setSelectedContainerDetails = _useState6[1];
+  var _useState7 = (0, _react.useState)(teamLinks),
     _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
-    selectedContainerDetails = _useState8[0],
-    setSelectedContainerDetails = _useState8[1];
-  var _useState9 = (0, _react.useState)(teamLinks),
-    _useState0 = (0, _slicedToArray2.default)(_useState9, 2),
-    filteredTeamLinks = _useState0[0],
-    setFilteredTeamLinks = _useState0[1];
-  var _useState1 = (0, _react.useState)({
+    filteredTeamLinks = _useState8[0],
+    setFilteredTeamLinks = _useState8[1];
+  var _useState9 = (0, _react.useState)({
       Jira: false,
       Confluence: false,
       Loom: false,
       WebLink: false
     }),
-    _useState10 = (0, _slicedToArray2.default)(_useState1, 2),
-    canAddContainer = _useState10[0],
-    setCanAddContainer = _useState10[1];
-  var _useCreateContainers3 = (0, _useCreateContainers5.useCreateContainers)(),
-    _useCreateContainers4 = (0, _slicedToArray2.default)(_useCreateContainers3, 1),
-    containers = _useCreateContainers4[0];
+    _useState0 = (0, _slicedToArray2.default)(_useState9, 2),
+    canAddContainer = _useState0[0],
+    setCanAddContainer = _useState0[1];
+  var _useCreateContainers = (0, _useCreateContainers3.useCreateContainers)(),
+    _useCreateContainers2 = (0, _slicedToArray2.default)(_useCreateContainers, 1),
+    containers = _useCreateContainers2[0];
   var _usePeopleAndTeamAnal = (0, _analytics.usePeopleAndTeamAnalytics)(),
     fireTrackEvent = _usePeopleAndTeamAnal.fireTrackEvent;
   var _useProductPermission = (0, _teamsAppInternalProductPermissions.useProductPermissions)({
@@ -146,7 +127,7 @@ var TeamContainers = exports.TeamContainers = function TeamContainers(_ref) {
     }),
     productPermissionsOld = _useProductPermission2.data,
     productPermissionIsLoadingOld = _useProductPermission2.loading;
-  useRefreshOnContainerCreated(teamId);
+  (0, _useRefreshContainersOnContainerCreated.useRefreshOnContainerCreated)(teamId);
   var hasPermissionToCreateContainer = (0, _react.useMemo)(function () {
     if (!productPermissions) {
       return {};
@@ -168,7 +149,7 @@ var TeamContainers = exports.TeamContainers = function TeamContainers(_ref) {
   }, [teamLinks, isDisplayedOnProfileCard, filterContainerId, requestedContainers]);
   (0, _react.useEffect)(function () {
     var containersToCheck = filteredTeamLinks;
-    if (containersToCheck.length > maxNumberOfContainersToShow || isDisplayedOnProfileCard) {
+    if (containersToCheck.length > maxNumberOfContainersToShow || isDisplayedOnProfileCard || isReadOnly) {
       setCanAddContainer({
         Jira: false,
         Confluence: false,
@@ -200,7 +181,16 @@ var TeamContainers = exports.TeamContainers = function TeamContainers(_ref) {
         WebLink: !containerExists('WebLink')
       });
     }
-  }, [isDisplayedOnProfileCard, productPermissions, productPermissionsOld, filteredTeamLinks, maxNumberOfContainersToShow, requestedContainers]);
+  }, [isDisplayedOnProfileCard, productPermissions, productPermissionsOld, filteredTeamLinks, maxNumberOfContainersToShow, requestedContainers, isReadOnly]);
+  (0, _react.useEffect)(function () {
+    if (onError) {
+      if (hasError) {
+        onError(hasError);
+      } else if (unlinkError) {
+        onError(unlinkError);
+      }
+    }
+  }, [hasError, unlinkError, onError]);
   var handleShowMore = function handleShowMore() {
     setShowMore(!showMore);
   };
@@ -311,63 +301,78 @@ var TeamContainers = exports.TeamContainers = function TeamContainers(_ref) {
       numberOfContainers: maxNumberOfContainersToShow
     });
   }
-  if (hasNoContainers && !isDisplayedOnProfileCard && hasNoPermissions) {
-    return /*#__PURE__*/_react.default.createElement(_noProductAccessEmptyState.NoProductAccessState, null);
+  if (hasNoContainers) {
+    if (components !== null && components !== void 0 && components.TeamContainersEmptyState) {
+      var EmptyStateComponent = components.TeamContainersEmptyState;
+      return /*#__PURE__*/_react.default.createElement(EmptyStateComponent, {
+        hasNoPermissions: !!hasNoPermissions
+      });
+    } else if (!isDisplayedOnProfileCard && hasNoPermissions) {
+      return /*#__PURE__*/_react.default.createElement(_noProductAccessEmptyState.NoProductAccessState, null);
+    }
   }
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_primitives.Stack, {
     space: "space.200"
-  }, /*#__PURE__*/_react.default.createElement(_primitives.Grid, {
-    templateColumns: "repeat(auto-fill, minmax(300px, 1fr))",
-    gap: isDisplayedOnProfileCard ? 'space.0' : 'space.100'
-  }, filteredTeamLinks.slice(0, maxNumberOfContainersToShow).map(function (container) {
-    return /*#__PURE__*/_react.default.createElement(LinkedContainerCardComponent, {
-      key: container.id,
-      containerType: container.type,
-      containerTypeProperties: container.containerTypeProperties,
-      title: container.name,
-      containerIcon: container.icon || undefined,
-      link: container.link || undefined,
-      containerId: container.id,
-      iconsLoading: iconsLoading,
-      iconHasLoaded: iconHasLoaded,
-      onDisconnectButtonClick: function onDisconnectButtonClick() {
-        return handleOpenDisconnectDialog({
-          containerId: container.id,
-          containerType: container.type,
-          containerName: container.name
-        });
-      },
-      onEditLinkClick: function onEditLinkClick() {
-        return handleEditContainerClick(container);
-      }
-    });
-  }), (0, _addContainerCard.getAddContainerCards)({
-    containers: availableContainers,
-    onAddAContainerClick: onAddAContainerClick,
-    showNewDesign: createContainerExperimentEnabled
-  }), showMore && filteredTeamLinks.slice(maxNumberOfContainersToShow).map(function (container) {
-    return /*#__PURE__*/_react.default.createElement(LinkedContainerCardComponent, {
-      key: container.id,
-      containerType: container.type,
-      containerTypeProperties: container.containerTypeProperties,
-      title: container.name,
-      containerId: container.id,
-      containerIcon: container.icon || undefined,
-      link: container.link || undefined,
-      iconsLoading: iconsLoading,
-      iconHasLoaded: iconHasLoaded,
-      onDisconnectButtonClick: function onDisconnectButtonClick() {
-        return handleOpenDisconnectDialog({
-          containerId: container.id,
-          containerType: container.type,
-          containerName: container.name
-        });
-      },
-      onEditLinkClick: function onEditLinkClick() {
-        return handleEditContainerClick(container);
-      }
-    });
-  })), filteredTeamLinks.length > maxNumberOfContainersToShow && /*#__PURE__*/_react.default.createElement(_primitives.Inline, null, /*#__PURE__*/_react.default.createElement(_new.default, {
+  }, function () {
+    var GridComponent = (components === null || components === void 0 ? void 0 : components.Grid) || _primitives.Grid;
+    return /*#__PURE__*/_react.default.createElement(GridComponent, {
+      templateColumns: "repeat(auto-fill, minmax(300px, 1fr))",
+      gap: isDisplayedOnProfileCard ? 'space.0' : 'space.100'
+    }, elemBeforeCards && function () {
+      var ElemBeforeCards = elemBeforeCards;
+      return /*#__PURE__*/_react.default.createElement(ElemBeforeCards, null);
+    }(), filteredTeamLinks.slice(0, maxNumberOfContainersToShow).map(function (container) {
+      return /*#__PURE__*/_react.default.createElement(LinkedContainerCardComponent, {
+        key: container.id,
+        containerType: container.type,
+        containerTypeProperties: container.containerTypeProperties,
+        title: container.name,
+        containerIcon: container.icon || undefined,
+        link: container.link || undefined,
+        containerId: container.id,
+        iconsLoading: iconsLoading,
+        iconHasLoaded: iconHasLoaded,
+        isReadOnly: isReadOnly,
+        onDisconnectButtonClick: function onDisconnectButtonClick() {
+          return handleOpenDisconnectDialog({
+            containerId: container.id,
+            containerType: container.type,
+            containerName: container.name
+          });
+        },
+        onEditLinkClick: function onEditLinkClick() {
+          return handleEditContainerClick(container);
+        }
+      });
+    }), (0, _addContainerCard.getAddContainerCards)({
+      containers: availableContainers,
+      onAddAContainerClick: onAddAContainerClick,
+      showNewDesign: createContainerExperimentEnabled
+    }), showMore && filteredTeamLinks.slice(maxNumberOfContainersToShow).map(function (container) {
+      return /*#__PURE__*/_react.default.createElement(LinkedContainerCardComponent, {
+        key: container.id,
+        containerType: container.type,
+        containerTypeProperties: container.containerTypeProperties,
+        title: container.name,
+        containerId: container.id,
+        containerIcon: container.icon || undefined,
+        link: container.link || undefined,
+        iconsLoading: iconsLoading,
+        iconHasLoaded: iconHasLoaded,
+        isReadOnly: isReadOnly,
+        onDisconnectButtonClick: function onDisconnectButtonClick() {
+          return handleOpenDisconnectDialog({
+            containerId: container.id,
+            containerType: container.type,
+            containerName: container.name
+          });
+        },
+        onEditLinkClick: function onEditLinkClick() {
+          return handleEditContainerClick(container);
+        }
+      });
+    }));
+  }(), filteredTeamLinks.length > maxNumberOfContainersToShow && /*#__PURE__*/_react.default.createElement(_primitives.Inline, null, /*#__PURE__*/_react.default.createElement(_new.default, {
     appearance: "subtle",
     onClick: handleShowMore
   }, showMore ? /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, messages.showLess) : /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, messages.showMore)))), /*#__PURE__*/_react.default.createElement(_modalTransition.default, null, isDisconnectDialogOpen && selectedContainerDetails && /*#__PURE__*/_react.default.createElement(_async.DisconnectDialogLazy, {

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

@@ -53,7 +53,8 @@ var TeamLinkCard = exports.TeamLinkCard = function TeamLinkCard(_ref) {
     _onEditLinkClick = _ref.onEditLinkClick,
     iconsLoading = _ref.iconsLoading,
     iconHasLoaded = _ref.iconHasLoaded,
-    openInNewTab = _ref.openInNewTab;
+    openInNewTab = _ref.openInNewTab,
+    isReadOnly = _ref.isReadOnly;
   var _useAnalyticsEvents = (0, _analyticsNext.useAnalyticsEvents)(),
     createAnalyticsEvent = _useAnalyticsEvents.createAnalyticsEvent;
   var _getContainerProperti = (0, _getContainerProperties.getContainerProperties)({
@@ -186,7 +187,7 @@ var TeamLinkCard = exports.TeamLinkCard = function TeamLinkCard(_ref) {
   }, description), /*#__PURE__*/_react.default.createElement(_compiled.Text, {
     size: "small",
     color: "color.text.subtle"
-  }, containerTypeText))))), /*#__PURE__*/_react.default.createElement(_teamLinkCardActions.TeamLinkCardActions, {
+  }, containerTypeText))))), !isReadOnly && /*#__PURE__*/_react.default.createElement(_teamLinkCardActions.TeamLinkCardActions, {
     containerType: containerType,
     title: title,
     containerId: containerId,

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

@@ -26,13 +26,11 @@ const actions = {
     if (current.isCreated === isCreated) {
       return;
     }
-    const isLoading = isCreated ? false : current.isLoading;
     setState({
       ...containers,
       [product]: {
         ...current,
-        isCreated,
-        isLoading
+        isCreated
       }
     });
   }

package/dist/es2019/controllers/hooks/use-refresh-containers-on-container-created/index.js

@@ -0,0 +1,135 @@
+import { useEffect, useRef, useState } from 'react';
+import { useCreateContainers } from '../use-create-containers';
+import { useTeamContainers } from '../use-team-containers';
+const PRODUCT_TO_CONTAINER_TYPE = {
+  Jira: 'JiraProject',
+  Confluence: 'ConfluenceSpace',
+  Loom: 'LoomSpace'
+};
+const INTERVAL_TIME = 2000;
+const TIMEOUT_DURATION = 30000;
+function useRefreshOnContainerCreated(teamId) {
+  const [containers, {
+    updateContainerLoading
+  }] = useCreateContainers();
+  const {
+    refetchTeamContainers,
+    teamContainers
+  } = useTeamContainers(teamId);
+  const [createdContainers, setCreatedContainers] = useState({});
+  const intervalRef = useRef(null);
+  useEffect(() => {
+    setCreatedContainers({});
+    if (intervalRef.current) {
+      clearInterval(intervalRef.current);
+      intervalRef.current = null;
+    }
+  }, [teamId]);
+  useEffect(() => {
+    const products = Object.keys(containers);
+    products.forEach(product => {
+      const {
+        isCreated
+      } = containers[product];
+      if (!isCreated) {
+        return;
+      }
+      const existing = createdContainers[product];
+      if (existing && existing.found === false) {
+        return;
+      }
+      if (existing && existing.found) {
+        return;
+      }
+      const containerType = PRODUCT_TO_CONTAINER_TYPE[product];
+      if (!containerType) {
+        return;
+      }
+      const currentCount = teamContainers.filter(c => c.type === containerType).length;
+      if (currentCount > 0) {
+        setCreatedContainers(prev => ({
+          ...prev,
+          [product]: {
+            startedAt: Date.now(),
+            found: true
+          }
+        }));
+        updateContainerLoading(product, false);
+        return;
+      }
+      setCreatedContainers(prev => ({
+        ...prev,
+        [product]: {
+          startedAt: Date.now(),
+          found: false
+        }
+      }));
+    });
+  }, [containers, createdContainers, teamContainers, updateContainerLoading]);
+  useEffect(() => {
+    if (Object.keys(createdContainers).length === 0) {
+      if (intervalRef.current) {
+        clearInterval(intervalRef.current);
+        intervalRef.current = null;
+      }
+      return;
+    }
+    if (intervalRef.current) {
+      return;
+    }
+    intervalRef.current = setInterval(() => {
+      setCreatedContainers(prev => {
+        let anyPending = false;
+        const next = {
+          ...prev
+        };
+        Object.keys(prev).forEach(product => {
+          const target = prev[product];
+          if (!target || target.found) {
+            return;
+          }
+          const {
+            startedAt
+          } = target;
+          const containerType = PRODUCT_TO_CONTAINER_TYPE[product];
+          if (!containerType) {
+            next[product] = {
+              ...target,
+              found: true
+            };
+            updateContainerLoading(product, false);
+            return;
+          }
+          const currentCount = teamContainers.filter(container => container.type === containerType).length;
+          const elapsed = Date.now() - startedAt;
+          if (currentCount > 0 || elapsed >= TIMEOUT_DURATION) {
+            next[product] = {
+              ...target,
+              found: true
+            };
+            updateContainerLoading(product, false);
+          } else {
+            anyPending = true;
+          }
+        });
+        if (!anyPending) {
+          if (intervalRef.current) {
+            clearInterval(intervalRef.current);
+            intervalRef.current = null;
+          }
+        }
+        if (anyPending) {
+          refetchTeamContainers();
+        }
+        return next;
+      });
+    }, INTERVAL_TIME);
+    return () => {
+      if (intervalRef.current) {
+        clearInterval(intervalRef.current);
+        intervalRef.current = null;
+      }
+    };
+  }, [createdContainers, teamContainers, refetchTeamContainers, updateContainerLoading]);
+}
+export { useRefreshOnContainerCreated, INTERVAL_TIME, TIMEOUT_DURATION };