@atlaskit/teams-public 0.53.0 → 0.54.1

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # @atlaskit/teams-public
 
+## 0.54.1
+
+### Patch Changes
+
+- [`a16cf46ffdef0`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/a16cf46ffdef0) -
+  Optimise setting state in create containers store
+
+## 0.54.0
+
+### Minor Changes
+
+- [`a57ad7783aa82`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/a57ad7783aa82) -
+  Add create container store and update create container UX
+
+### Patch Changes
+
+- [`aa3cc45df6311`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/aa3cc45df6311) -
+  Update failed events to be track (so they can be used in stastig)
+- Updated dependencies
+
 ## 0.53.0
 
 ### Minor Changes

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

@@ -0,0 +1,71 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useCreateContainers = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _reactSweetState = require("react-sweet-state");
+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 actions = {
+  updateContainerLoading: function updateContainerLoading(product, isLoading) {
+    return function (_ref) {
+      var setState = _ref.setState,
+        getState = _ref.getState;
+      var containers = getState();
+      var current = containers[product];
+      if (current.isLoading === isLoading) {
+        return;
+      }
+      setState(_objectSpread(_objectSpread({}, containers), {}, (0, _defineProperty2.default)({}, product, _objectSpread(_objectSpread({}, current), {}, {
+        isLoading: isLoading
+      }))));
+    };
+  },
+  updateContainerCreated: function updateContainerCreated(product, isCreated) {
+    return function (_ref2) {
+      var setState = _ref2.setState,
+        getState = _ref2.getState;
+      var containers = getState();
+      var current = containers[product];
+      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
+      }))));
+    };
+  }
+};
+var initialState = {
+  Jira: {
+    isLoading: false,
+    isCreated: false
+  },
+  Confluence: {
+    isLoading: false,
+    isCreated: false
+  },
+  Loom: {
+    isLoading: false,
+    isCreated: false
+  }
+};
+var store = (0, _reactSweetState.createStore)({
+  initialState: initialState,
+  actions: actions,
+  name: 'CreateContainers'
+});
+
+/**
+ * Custom hook for accessing and updating the state of container creation (Jira, Confluence, Loom).
+ *
+ * Provides state and actions for loading and creation status of each container type.
+ *
+ * @returns {object} State and actions for managing container creation.
+ */
+var useCreateContainers = exports.useCreateContainers = (0, _reactSweetState.createHook)(store);

package/dist/cjs/index.js

@@ -57,6 +57,12 @@ Object.defineProperty(exports, "useConnectedTeams", {
     return _useTeamContainers.useConnectedTeams;
   }
 });
+Object.defineProperty(exports, "useCreateContainers", {
+  enumerable: true,
+  get: function get() {
+    return _useCreateContainers.useCreateContainers;
+  }
+});
 Object.defineProperty(exports, "useProductPermissions", {
   enumerable: true,
   get: function get() {
@@ -92,6 +98,7 @@ var _teamLinkCard = require("./ui/team-containers/team-link-card");
 var _containerIcon = require("./common/ui/container-icon");
 var _useTeamContainers = require("./controllers/hooks/use-team-containers");
 var _useTeamWebLinks = require("./controllers/hooks/use-team-web-links");
+var _useCreateContainers = require("./controllers/hooks/use-create-containers");
 var _useTeamLinksAndContainers = require("./controllers/hooks/use-team-links-and-containers");
 var _useProductPermission = require("./controllers/hooks/use-product-permission");
 var _utils = require("./controllers/product-permission/utils");

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

@@ -16,6 +16,7 @@ var _new = require("@atlaskit/button/new");
 var _add = _interopRequireDefault(require("@atlaskit/icon/core/add"));
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _compiled = require("@atlaskit/primitives/compiled");
+var _linkedContainerCardSkeleton = require("../../../common/ui/team-containers-skeleton/linked-container-card-skeleton");
 var _getContainerProperties = require("../../../common/utils/get-container-properties");
 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 styles = {
@@ -46,7 +47,9 @@ var AddContainerCardWrapper = function AddContainerCardWrapper(_ref) {
 };
 var AddContainerCard = exports.AddContainerCard = function AddContainerCard(_ref2) {
   var containerType = _ref2.containerType,
-    onAddAContainerClick = _ref2.onAddAContainerClick;
+    onAddAContainerClick = _ref2.onAddAContainerClick,
+    _ref2$isLoading = _ref2.isLoading,
+    isLoading = _ref2$isLoading === void 0 ? false : _ref2$isLoading;
   var _getContainerProperti = (0, _getContainerProperties.getContainerProperties)({
       containerType: containerType,
       iconSize: (0, _platformFeatureFlags.fg)('enable_medium_size_icons_for_team_link_cards') ? 'medium' : undefined,
@@ -55,6 +58,11 @@ var AddContainerCard = exports.AddContainerCard = function AddContainerCard(_ref
     description = _getContainerProperti.description,
     icon = _getContainerProperti.icon,
     title = _getContainerProperti.title;
+  if (isLoading) {
+    return /*#__PURE__*/_react.default.createElement(_linkedContainerCardSkeleton.LinkedContainerCardSkeleton, {
+      containerType: containerType
+    });
+  }
   return /*#__PURE__*/_react.default.createElement(AddContainerCardWrapper, {
     onClick: onAddAContainerClick
   }, /*#__PURE__*/_react.default.createElement(_compiled.Inline, {
@@ -90,24 +98,27 @@ var AddContainerCard = exports.AddContainerCard = function AddContainerCard(_ref
   }, description)))));
 };
 var getAddContainerCards = exports.getAddContainerCards = function getAddContainerCards(_ref3) {
-  var showAddContainer = _ref3.showAddContainer,
+  var containers = _ref3.containers,
     _onAddAContainerClick = _ref3.onAddAContainerClick;
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, showAddContainer.Jira && /*#__PURE__*/_react.default.createElement(AddContainerCard, {
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, containers.Jira.canAdd && /*#__PURE__*/_react.default.createElement(AddContainerCard, {
     onAddAContainerClick: function onAddAContainerClick(e) {
       return _onAddAContainerClick(e, 'Jira');
     },
-    containerType: "JiraProject"
-  }), showAddContainer.Confluence && /*#__PURE__*/_react.default.createElement(AddContainerCard, {
+    containerType: "JiraProject",
+    isLoading: containers.Jira.isLoading
+  }), containers.Confluence.canAdd && /*#__PURE__*/_react.default.createElement(AddContainerCard, {
     onAddAContainerClick: function onAddAContainerClick(e) {
       return _onAddAContainerClick(e, 'Confluence');
     },
-    containerType: "ConfluenceSpace"
-  }), showAddContainer.Loom && (0, _platformFeatureFlags.fg)('loom_tab_in_container_linker_team_profile_page') && /*#__PURE__*/_react.default.createElement(AddContainerCard, {
+    containerType: "ConfluenceSpace",
+    isLoading: containers.Confluence.isLoading
+  }), containers.Loom.canAdd && (0, _platformFeatureFlags.fg)('loom_tab_in_container_linker_team_profile_page') && /*#__PURE__*/_react.default.createElement(AddContainerCard, {
     onAddAContainerClick: function onAddAContainerClick(e) {
       return _onAddAContainerClick(e, 'Loom');
     },
-    containerType: "LoomSpace"
-  }), showAddContainer.WebLink && /*#__PURE__*/_react.default.createElement(AddContainerCard, {
+    containerType: "LoomSpace",
+    isLoading: containers.Loom.isLoading
+  }), containers.WebLink.canAdd && /*#__PURE__*/_react.default.createElement(AddContainerCard, {
     onAddAContainerClick: function onAddAContainerClick(e) {
       return _onAddAContainerClick(e, 'WebLink');
     },

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

@@ -7,54 +7,62 @@ 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 _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 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");
 var _analyticsNext = require("@atlaskit/analytics-next");
 var _new = _interopRequireDefault(require("@atlaskit/button/new"));
-var _featureGateJsClient = _interopRequireDefault(require("@atlaskit/feature-gate-js-client"));
 var _modalTransition = _interopRequireDefault(require("@atlaskit/modal-dialog/modal-transition"));
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _primitives = require("@atlaskit/primitives");
 var _teamsAppInternalProductPermissions = require("@atlaskit/teams-app-internal-product-permissions");
-var _teamsClient = require("@atlaskit/teams-client");
-var _types = require("@atlaskit/teams-client/types");
 var _colors = require("@atlaskit/theme/colors");
 var _teamContainersSkeleton = require("../../common/ui/team-containers-skeleton");
-var _linkedContainerCardSkeleton = require("../../common/ui/team-containers-skeleton/linked-container-card-skeleton");
 var _analytics = require("../../common/utils/analytics");
 var _controllers = require("../../controllers");
+var _useCreateContainers5 = require("../../controllers/hooks/use-create-containers");
 var _useProductPermission3 = require("../../controllers/hooks/use-product-permission");
 var _useRequestedContainer = require("../../controllers/hooks/use-requested-container");
-var _useTeamContainers2 = require("../../controllers/hooks/use-team-containers");
+var _useTeamContainers3 = require("../../controllers/hooks/use-team-containers");
 var _useTeamLinksAndContainers = require("../../controllers/hooks/use-team-links-and-containers");
 var _addContainerCard = require("./add-container-card");
-var _addContainerCardWithCreate = require("./add-container-card/add-container-card-with-create");
 var _async = require("./disconnect-dialog/async");
 var _noProductAccessEmptyState = require("./no-product-access-empty-state");
 var _teamLinkCard = require("./team-link-card");
-var _utils = require("./utils");
 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
 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;
-var containerTypeMap = {
-  Confluence: _types.ContainerType.CONFLUENCE_SPACE,
-  Jira: _types.ContainerType.JIRA_PROJECT,
-  Loom: _types.ContainerType.LOOM_SPACE
-};
-var containerTypeToTextMap = {
-  Confluence: 'Confluence space',
-  Jira: 'Jira project',
-  Loom: 'Loom space'
-};
+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,
+    onAddAContainerClick = _ref.onAddAContainerClick,
     onEditContainerClick = _ref.onEditContainerClick,
     _ref$onRequestedConta = _ref.onRequestedContainerTimeout,
     onRequestedContainerTimeout = _ref$onRequestedConta === void 0 ? function () {} : _ref$onRequestedConta,
@@ -64,13 +72,11 @@ var TeamContainers = exports.TeamContainers = function TeamContainers(_ref) {
     filterContainerId = _ref.filterContainerId,
     isDisplayedOnProfileCard = _ref.isDisplayedOnProfileCard,
     _ref$maxNumberOfConta = _ref.maxNumberOfContainersToShow,
-    maxNumberOfContainersToShow = _ref$maxNumberOfConta === void 0 ? MAX_NUMBER_OF_CONTAINERS_TO_SHOW : _ref$maxNumberOfConta,
-    addFlag = _ref.addFlag;
+    maxNumberOfContainersToShow = _ref$maxNumberOfConta === void 0 ? MAX_NUMBER_OF_CONTAINERS_TO_SHOW : _ref$maxNumberOfConta;
   var _useAnalyticsEvents = (0, _analyticsNext.useAnalyticsEvents)(),
     createAnalyticsEvent = _useAnalyticsEvents.createAnalyticsEvent;
-  var _useTeamContainers = (0, _useTeamContainers2.useTeamContainers)(teamId),
-    unlinkError = _useTeamContainers.unlinkError,
-    refetchTeamContainers = _useTeamContainers.refetchTeamContainers;
+  var _useTeamContainers2 = (0, _useTeamContainers3.useTeamContainers)(teamId),
+    unlinkError = _useTeamContainers2.unlinkError;
   var _useTeamLinksAndConta = (0, _useTeamLinksAndContainers.useTeamLinksAndContainers)(teamId, true),
     teamLinks = _useTeamLinksAndConta.teamLinks,
     removeTeamLink = _useTeamLinksAndConta.removeTeamLink,
@@ -83,45 +89,39 @@ var TeamContainers = exports.TeamContainers = function TeamContainers(_ref) {
       onRequestedContainerTimeout: onRequestedContainerTimeout
     }),
     requestedContainers = _useRequestedContaine.requestedContainers;
-  var _useTeamContainersHoo = (0, _useTeamContainers2.useTeamContainersHook)(),
+  var _useTeamContainersHoo = (0, _useTeamContainers3.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),
-    isDisconnectDialogOpen = _useState4[0],
-    setIsDisconnectDialogOpen = _useState4[1];
-  var _useState5 = (0, _react.useState)(),
+    showMore = _useState4[0],
+    setShowMore = _useState4[1];
+  var _useState5 = (0, _react.useState)(false),
     _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
-    selectedContainerDetails = _useState6[0],
-    setSelectedContainerDetails = _useState6[1];
-  var _useState7 = (0, _react.useState)(teamLinks),
+    isDisconnectDialogOpen = _useState6[0],
+    setIsDisconnectDialogOpen = _useState6[1];
+  var _useState7 = (0, _react.useState)(),
     _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
-    filteredTeamLinks = _useState8[0],
-    setFilteredTeamLinks = _useState8[1];
-  var _useState9 = (0, _react.useState)({
+    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)({
       Jira: false,
       Confluence: false,
       Loom: false,
       WebLink: false
     }),
-    _useState0 = (0, _slicedToArray2.default)(_useState9, 2),
-    showAddContainer = _useState0[0],
-    setShowAddContainer = _useState0[1];
-  var _useState1 = (0, _react.useState)({
-      jira: false,
-      confluence: false,
-      loom: false
-    }),
     _useState10 = (0, _slicedToArray2.default)(_useState1, 2),
-    containersBeingCreated = _useState10[0],
-    setContainersBeingCreated = _useState10[1];
+    canAddContainer = _useState10[0],
+    setCanAddContainer = _useState10[1];
+  var _useCreateContainers3 = (0, _useCreateContainers5.useCreateContainers)(),
+    _useCreateContainers4 = (0, _slicedToArray2.default)(_useCreateContainers3, 1),
+    containers = _useCreateContainers4[0];
   var _usePeopleAndTeamAnal = (0, _analytics.usePeopleAndTeamAnalytics)(),
-    fireOperationalEvent = _usePeopleAndTeamAnal.fireOperationalEvent,
     fireTrackEvent = _usePeopleAndTeamAnal.fireTrackEvent;
   var _useProductPermission = (0, _teamsAppInternalProductPermissions.useProductPermissions)({
       userId: userId,
@@ -145,20 +145,7 @@ var TeamContainers = exports.TeamContainers = function TeamContainers(_ref) {
     }),
     productPermissionsOld = _useProductPermission2.data,
     productPermissionIsLoadingOld = _useProductPermission2.loading;
-  var hasPermissionToCreateContainers = (0, _react.useMemo)(function () {
-    if (!productPermissions) {
-      return false;
-    }
-    if ((0, _platformFeatureFlags.fg)('migrate-product-permissions')) {
-      return (0, _teamsAppInternalProductPermissions.hasProductPermission)(productPermissions, 'jira', ['CREATE_PROJECT']) ||
-      //@todo: fix in PTC-12660
-      (0, _teamsAppInternalProductPermissions.hasProductPermission)(productPermissions, 'confluence', ['write']) || (0, _teamsAppInternalProductPermissions.hasProductPermission)(productPermissions, 'loom', ['write']);
-    }
-    return false;
-  }, [productPermissions]);
-  var isCreateContainerExperimentEnabled = (0, _react.useMemo)(function () {
-    return hasPermissionToCreateContainers && _featureGateJsClient.default.initializeCompleted() && _featureGateJsClient.default.getExperimentValue('teams_app_auto_container_creation', 'isEnabled', false);
-  }, [hasPermissionToCreateContainers]);
+  useRefreshOnContainerCreated(teamId);
   (0, _react.useEffect)(function () {
     if (isDisplayedOnProfileCard && filterContainerId) {
       setFilteredTeamLinks(teamLinks.filter(function (container) {
@@ -171,7 +158,7 @@ var TeamContainers = exports.TeamContainers = function TeamContainers(_ref) {
   (0, _react.useEffect)(function () {
     var containersToCheck = filteredTeamLinks;
     if (containersToCheck.length > maxNumberOfContainersToShow || isDisplayedOnProfileCard) {
-      setShowAddContainer({
+      setCanAddContainer({
         Jira: false,
         Confluence: false,
         Loom: false,
@@ -186,23 +173,23 @@ var TeamContainers = exports.TeamContainers = function TeamContainers(_ref) {
       var containerRequested = function containerRequested(type) {
         return requestedContainers.includes(type);
       };
-      var showContainer = function showContainer(containerExists, isRequesting, product, permissionIds) {
+      var showContainer = function showContainer(containerExists, isRequesting, product) {
         if (containerExists || isRequesting) {
           return false;
         }
         if ((0, _platformFeatureFlags.fg)('migrate-product-permissions')) {
-          return productPermissions && (0, _teamsAppInternalProductPermissions.hasProductPermission)(productPermissions, product, permissionIds) || false;
+          return productPermissions && (0, _teamsAppInternalProductPermissions.hasProductPermission)(productPermissions, product, []) || false;
         }
-        return productPermissionsOld && (0, _controllers.hasProductPermission)(productPermissionsOld, product, permissionIds) || false;
+        return productPermissionsOld && (0, _controllers.hasProductPermission)(productPermissionsOld, product, []) || false;
       };
-      setShowAddContainer({
-        Jira: showContainer(containerExists('JiraProject'), containerRequested('JiraProject'), 'jira', isCreateContainerExperimentEnabled ? ['CREATE_PROJECT'] : []),
-        Confluence: showContainer(containerExists('ConfluenceSpace'), containerRequested('ConfluenceSpace'), 'confluence', isCreateContainerExperimentEnabled ? ['write'] : []),
-        Loom: showContainer(containerExists('LoomSpace'), containerRequested('LoomSpace'), 'loom', isCreateContainerExperimentEnabled ? ['write'] : []),
+      setCanAddContainer({
+        Jira: showContainer(containerExists('JiraProject'), containerRequested('JiraProject'), 'jira'),
+        Confluence: showContainer(containerExists('ConfluenceSpace'), containerRequested('ConfluenceSpace'), 'confluence'),
+        Loom: showContainer(containerExists('LoomSpace'), containerRequested('LoomSpace'), 'loom'),
         WebLink: !containerExists('WebLink')
       });
     }
-  }, [isDisplayedOnProfileCard, productPermissions, productPermissionsOld, filteredTeamLinks, maxNumberOfContainersToShow, requestedContainers, isCreateContainerExperimentEnabled]);
+  }, [isDisplayedOnProfileCard, productPermissions, productPermissionsOld, filteredTeamLinks, maxNumberOfContainersToShow, requestedContainers]);
   var handleShowMore = function handleShowMore() {
     setShowMore(!showMore);
   };
@@ -247,12 +234,12 @@ var TeamContainers = exports.TeamContainers = function TeamContainers(_ref) {
           case 8:
             setIsDisconnectDialogOpen(false);
             if (unlinkError) {
-              fireOperationalEvent(createAnalyticsEvent, {
+              fireTrackEvent(createAnalyticsEvent, {
                 action: _analytics.AnalyticsAction.FAILED,
                 actionSubject: 'teamContainerUnlinked'
               });
             } else {
-              fireOperationalEvent(createAnalyticsEvent, {
+              fireTrackEvent(createAnalyticsEvent, {
                 action: _analytics.AnalyticsAction.SUCCEEDED,
                 actionSubject: 'teamContainerUnlinked',
                 attributes: {
@@ -273,87 +260,7 @@ var TeamContainers = exports.TeamContainers = function TeamContainers(_ref) {
     return function (_x) {
       return _ref2.apply(this, arguments);
     };
-  }(), [actions, createAnalyticsEvent, fireOperationalEvent, filteredTeamLinks, removeTeamLink, teamId, unlinkError]);
-  var handleCreateContainer = (0, _react.useCallback)( /*#__PURE__*/function () {
-    var _ref3 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2(containerType) {
-      var result;
-      return _regenerator.default.wrap(function _callee2$(_context2) {
-        while (1) switch (_context2.prev = _context2.next) {
-          case 0:
-            setContainersBeingCreated(_objectSpread(_objectSpread({}, containersBeingCreated), {}, (0, _defineProperty2.default)({}, containerType.toLowerCase(), true)));
-            _context2.prev = 1;
-            _context2.next = 4;
-            return _teamsClient.teamsClient.createTeamContainers({
-              teamId: teamId,
-              containers: [{
-                type: containerTypeMap[containerType],
-                containerSiteId: cloudId
-              }]
-            });
-          case 4:
-            result = _context2.sent;
-            if (result.containersNotCreated.length === 0) {
-              fireOperationalEvent(createAnalyticsEvent, {
-                action: _analytics.AnalyticsAction.SUCCEEDED,
-                actionSubject: 'teamContainerCreate',
-                attributes: {
-                  containerType: containerType,
-                  teamId: teamId
-                }
-              });
-              refetchTeamContainers();
-            } else {
-              fireOperationalEvent(createAnalyticsEvent, {
-                action: _analytics.AnalyticsAction.FAILED,
-                actionSubject: 'teamContainerCreate',
-                attributes: {
-                  containerType: containerType,
-                  teamId: teamId
-                }
-              });
-              addFlag === null || addFlag === void 0 || addFlag((0, _utils.getCreateContainerTryAgainFlag)({
-                tryAgainAction: function tryAgainAction() {
-                  handleCreateContainer(containerType);
-                },
-                containerType: containerTypeToTextMap[containerType]
-              }));
-            }
-            setContainersBeingCreated(_objectSpread(_objectSpread({}, containersBeingCreated), {}, (0, _defineProperty2.default)({}, containerType.toLowerCase(), false)));
-            _context2.next = 13;
-            break;
-          case 9:
-            _context2.prev = 9;
-            _context2.t0 = _context2["catch"](1);
-            fireOperationalEvent(createAnalyticsEvent, {
-              action: _analytics.AnalyticsAction.FAILED,
-              actionSubject: 'teamContainerCreate',
-              attributes: {
-                containerType: containerType,
-                teamId: teamId
-              }
-            });
-            if (_context2.t0 instanceof _teamsClient.HttpError) {
-              if (_context2.t0.status === 500) {
-                addFlag === null || addFlag === void 0 || addFlag((0, _utils.getCreateContainerTryAgainFlag)({
-                  tryAgainAction: function tryAgainAction() {
-                    handleCreateContainer(containerType);
-                  },
-                  containerType: containerTypeToTextMap[containerType]
-                }));
-              } else {
-                addFlag === null || addFlag === void 0 || addFlag((0, _utils.getCreateContainerContactSupportFlag)());
-              }
-            }
-          case 13:
-          case "end":
-            return _context2.stop();
-        }
-      }, _callee2, null, [[1, 9]]);
-    }));
-    return function (_x2) {
-      return _ref3.apply(this, arguments);
-    };
-  }(), [containersBeingCreated, teamId, cloudId, fireOperationalEvent, createAnalyticsEvent, refetchTeamContainers, addFlag]);
+  }(), [actions, createAnalyticsEvent, fireTrackEvent, filteredTeamLinks, removeTeamLink, teamId, unlinkError]);
   var TeamContainersSkeletonComponent = (components === null || components === void 0 ? void 0 : components.TeamContainersSkeleton) || _teamContainersSkeleton.TeamContainersSkeleton;
   var hasNoPermissions = (0, _react.useMemo)(function () {
     if ((0, _platformFeatureFlags.fg)('migrate-product-permissions')) {
@@ -373,6 +280,21 @@ var TeamContainers = exports.TeamContainers = function TeamContainers(_ref) {
     }
     return productPermissionIsLoadingOld;
   }, [linksLoading, productPermissionIsLoading, productPermissionIsLoadingOld]);
+  var availableContainers = (0, _react.useMemo)(function () {
+    var getAvailableContainer = function getAvailableContainer(productKey, requestedType) {
+      var _containers;
+      return {
+        canAdd: canAddContainer === null || canAddContainer === void 0 ? void 0 : canAddContainer[productKey],
+        isLoading: (containers === null || containers === void 0 || (_containers = containers[productKey]) === null || _containers === void 0 ? void 0 : _containers.isLoading) || (requestedContainers === null || requestedContainers === void 0 ? void 0 : requestedContainers.includes(requestedType))
+      };
+    };
+    return {
+      Jira: getAvailableContainer('Jira', 'JiraProject'),
+      Confluence: getAvailableContainer('Confluence', 'ConfluenceSpace'),
+      Loom: getAvailableContainer('Loom', 'LoomSpace'),
+      WebLink: getAvailableContainer('WebLink', 'WebLink')
+    };
+  }, [canAddContainer, containers, requestedContainers]);
   if (isLoading) {
     return /*#__PURE__*/_react.default.createElement(TeamContainersSkeletonComponent, {
       numberOfContainers: maxNumberOfContainersToShow
@@ -386,12 +308,7 @@ var TeamContainers = exports.TeamContainers = function TeamContainers(_ref) {
   }, /*#__PURE__*/_react.default.createElement(_primitives.Grid, {
     templateColumns: "repeat(auto-fill, minmax(300px, 1fr))",
     gap: isDisplayedOnProfileCard ? 'space.0' : 'space.100'
-  }, requestedContainers.map(function (containerType) {
-    return /*#__PURE__*/_react.default.createElement(_linkedContainerCardSkeleton.LinkedContainerCardSkeleton, {
-      key: containerType,
-      containerType: containerType
-    });
-  }), filteredTeamLinks.slice(0, maxNumberOfContainersToShow).map(function (container) {
+  }, filteredTeamLinks.slice(0, maxNumberOfContainersToShow).map(function (container) {
     return /*#__PURE__*/_react.default.createElement(LinkedContainerCardComponent, {
       key: container.id,
       containerType: container.type,
@@ -413,15 +330,9 @@ var TeamContainers = exports.TeamContainers = function TeamContainers(_ref) {
         return handleEditContainerClick(container);
       }
     });
-  }), isCreateContainerExperimentEnabled ? (0, _addContainerCardWithCreate.getAddContainerCardsWithCreate)({
-    showAddContainer: showAddContainer,
-    onAddAContainerClick: function onAddAContainerClick(e, containerType) {
-      _onAddAContainerClick(e, containerType);
-    },
-    containersLoading: containersBeingCreated
-  }) : (0, _addContainerCard.getAddContainerCards)({
-    showAddContainer: showAddContainer,
-    onAddAContainerClick: _onAddAContainerClick
+  }), (0, _addContainerCard.getAddContainerCards)({
+    containers: availableContainers,
+    onAddAContainerClick: onAddAContainerClick
   }), showMore && filteredTeamLinks.slice(maxNumberOfContainersToShow).map(function (container) {
     return /*#__PURE__*/_react.default.createElement(LinkedContainerCardComponent, {
       key: container.id,

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

@@ -0,0 +1,68 @@
+import { createHook, createStore } from 'react-sweet-state';
+const actions = {
+  updateContainerLoading: (product, isLoading) => ({
+    setState,
+    getState
+  }) => {
+    const containers = getState();
+    const current = containers[product];
+    if (current.isLoading === isLoading) {
+      return;
+    }
+    setState({
+      ...containers,
+      [product]: {
+        ...current,
+        isLoading
+      }
+    });
+  },
+  updateContainerCreated: (product, isCreated) => ({
+    setState,
+    getState
+  }) => {
+    const containers = getState();
+    const current = containers[product];
+    if (current.isCreated === isCreated) {
+      return;
+    }
+    const isLoading = isCreated ? false : current.isLoading;
+    setState({
+      ...containers,
+      [product]: {
+        ...current,
+        isCreated,
+        isLoading
+      }
+    });
+  }
+};
+const initialState = {
+  Jira: {
+    isLoading: false,
+    isCreated: false
+  },
+  Confluence: {
+    isLoading: false,
+    isCreated: false
+  },
+  Loom: {
+    isLoading: false,
+    isCreated: false
+  }
+};
+const store = createStore({
+  initialState,
+  actions,
+  name: 'CreateContainers'
+});
+
+/**
+ * Custom hook for accessing and updating the state of container creation (Jira, Confluence, Loom).
+ *
+ * Provides state and actions for loading and creation status of each container type.
+ *
+ * @returns {object} State and actions for managing container creation.
+ */
+const useCreateContainers = createHook(store);
+export { useCreateContainers };

package/dist/es2019/index.js

@@ -3,6 +3,7 @@ export { TeamLinkCard } from './ui/team-containers/team-link-card';
 export { ContainerIcon } from './common/ui/container-icon';
 export { useTeamContainers, useConnectedTeams } from './controllers/hooks/use-team-containers';
 export { useTeamWebLinks, useTeamWebLinksActions } from './controllers/hooks/use-team-web-links';
+export { useCreateContainers } from './controllers/hooks/use-create-containers';
 export { useTeamLinksAndContainers } from './controllers/hooks/use-team-links-and-containers';
 export { useProductPermissions } from './controllers/hooks/use-product-permission';
 export { hasProductPermission } from './controllers/product-permission/utils';