@atlaskit/teams-public 0.47.0 → 0.49.0

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # @atlaskit/teams-public
 
+## 0.49.0
+
+### Minor Changes
+
+- [#191837](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/191837)
+  [`45c985a1802dd`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/45c985a1802dd) -
+  Implemented open in new tab link behaviour
+
+## 0.48.0
+
+### Minor Changes
+
+- [#187832](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/187832)
+  [`68ed62073dd56`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/68ed62073dd56) -
+  Integrate useRequestedContainers to team containers
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 0.47.0
 
 ### Minor Changes

package/dist/cjs/controllers/hooks/use-requested-container/index.js

@@ -0,0 +1,146 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useRequestedContainers = useRequestedContainers;
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = require("react");
+var _reactIntlNext = require("react-intl-next");
+var _useTeamContainers2 = require("../use-team-containers");
+var _utils = require("./utils");
+/**
+ * Hook to track and poll for requested product containers (such as a Jira Project).
+ * The initial list of requested containers is derived from the URL parameters, however it can be updated based on user interactions.
+ *
+ * Manages a list of requested containers, polls for updates, and removes found containers from the list.
+ *
+ * Supported container types: CONFLUENCE_SPACE, JIRA_PROJECT, LOOM_SPACE.
+ *
+ * @param teamId - The ID of the team whose containers are being tracked.
+ * @param onRequestedContainerTimeout - Optional callback to handle timeout events for requested containers.
+ * @returns The current list of requested containers and a function to add a container.
+ */
+function useRequestedContainers(_ref) {
+  var teamId = _ref.teamId,
+    onRequestedContainerTimeout = _ref.onRequestedContainerTimeout;
+  var _useIntl = (0, _reactIntlNext.useIntl)(),
+    formatMessage = _useIntl.formatMessage;
+  var _useTeamContainers = (0, _useTeamContainers2.useTeamContainers)(teamId),
+    refetchTeamContainers = _useTeamContainers.refetchTeamContainers,
+    teamContainers = _useTeamContainers.teamContainers;
+  var _useState = (0, _react.useState)(function () {
+      return (0, _utils.userCanAccessFeature)() ? (0, _utils.getRequestedContainersFromUrl)() : [];
+    }),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    requestedContainers = _useState2[0],
+    setRequestedContainers = _useState2[1];
+  var checkContainers = (0, _react.useCallback)( /*#__PURE__*/(0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee() {
+    return _regenerator.default.wrap(function _callee$(_context) {
+      while (1) switch (_context.prev = _context.next) {
+        case 0:
+          _context.next = 2;
+          return refetchTeamContainers();
+        case 2:
+        case "end":
+          return _context.stop();
+      }
+    }, _callee);
+  })), [refetchTeamContainers]);
+  var _useAsyncPolling = (0, _utils.useAsyncPolling)(checkContainers),
+    startPolling = _useAsyncPolling.startPolling,
+    stopPolling = _useAsyncPolling.stopPolling,
+    isPolling = _useAsyncPolling.isPolling,
+    hasTimedOut = _useAsyncPolling.hasTimedOut;
+  var checkForContainer = function checkForContainer(container) {
+    if (!requestedContainers.includes(container)) {
+      setRequestedContainers(function (prev) {
+        return [].concat((0, _toConsumableArray2.default)(prev), [container]);
+      });
+    }
+    startPolling();
+  };
+  (0, _react.useEffect)(function () {
+    if (!(0, _utils.userCanAccessFeature)()) {
+      return;
+    }
+    if (hasTimedOut) {
+      return;
+    }
+    var containerCount = requestedContainers.length;
+    if (isPolling && containerCount === 0) {
+      stopPolling();
+      return;
+    }
+    if (!isPolling && containerCount > 0) {
+      startPolling();
+    }
+  }, [isPolling, requestedContainers.length, hasTimedOut, startPolling, stopPolling]);
+  (0, _react.useEffect)(function () {
+    var containersNotFound = requestedContainers.filter(function (containerType) {
+      return !teamContainers.some(function (teamContainer) {
+        return teamContainer.type === containerType;
+      });
+    });
+    if (!(0, _utils.containersEqual)(containersNotFound, requestedContainers)) {
+      setRequestedContainers(containersNotFound);
+    }
+  }, [requestedContainers, checkContainers, teamContainers]);
+  (0, _react.useEffect)(function () {
+    if (hasTimedOut && onRequestedContainerTimeout) {
+      var action = function action() {
+        // @todo: send request to retry creating containers
+        // This will be implemented in the next pull request
+      };
+      var flagId = "requested-container-timeout-".concat(requestedContainers.join('-'));
+      var _createFlag = function _createFlag(_ref3) {
+        var onAction = _ref3.onAction;
+        return {
+          id: flagId,
+          title: requestedContainers.length === 1 ? formatMessage(messages.timeoutTitle, {
+            container: (0, _utils.containerDisplayName)(requestedContainers[0])
+          }) : formatMessage(messages.timeoutTitleMultiple),
+          description: formatMessage(messages.timeoutDescription),
+          actions: [{
+            content: formatMessage(messages.timeoutAction),
+            onClick: function onClick() {
+              action();
+              onAction(flagId);
+            }
+          }]
+        };
+      };
+      onRequestedContainerTimeout(_createFlag);
+    }
+  }, [hasTimedOut, onRequestedContainerTimeout, requestedContainers, formatMessage]);
+  return {
+    requestedContainers: requestedContainers,
+    checkForContainer: checkForContainer
+  };
+}
+var messages = (0, _reactIntlNext.defineMessages)({
+  timeoutTitle: {
+    id: 'teams-public.team-containers.timeout-title',
+    defaultMessage: 'We’re couldn’t connect your {container}',
+    description: 'Title for the timeout flag'
+  },
+  timeoutTitleMultiple: {
+    id: 'teams-public.team-containers.timeout-title',
+    defaultMessage: 'We’re couldn’t connect your spaces',
+    description: 'Title for the timeout flag'
+  },
+  timeoutDescription: {
+    id: 'teams-public..team-containers.timeout-description',
+    defaultMessage: 'Something went wrong. Verify your connection and retry.',
+    description: 'Description for the timeout flag'
+  },
+  timeoutAction: {
+    id: 'teams-public.team-containers.timeout-action',
+    defaultMessage: 'Try again',
+    description: 'Action text for the timeout flag'
+  }
+});

package/dist/cjs/controllers/hooks/use-requested-container/utils.js

@@ -0,0 +1,132 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.POLLING_INTERVAL = exports.POLLING_DURATION = void 0;
+exports.containerDisplayName = containerDisplayName;
+exports.containersEqual = containersEqual;
+exports.getRequestedContainersFromUrl = getRequestedContainersFromUrl;
+exports.useAsyncPolling = useAsyncPolling;
+exports.userCanAccessFeature = userCanAccessFeature;
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+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 _react = require("react");
+var _featureGateJsClient = _interopRequireDefault(require("@atlaskit/feature-gate-js-client"));
+var _frontendUtilities = require("@atlaskit/frontend-utilities");
+var _types = require("@atlaskit/teams-client/types");
+var CONTAINER_MAP = (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, _types.ContainerType.CONFLUENCE_SPACE, 'ConfluenceSpace'), _types.ContainerType.JIRA_PROJECT, 'JiraProject'), _types.ContainerType.LOOM_SPACE, 'LoomSpace');
+var CONTAINER_HUMAN_NAMES = {
+  ConfluenceSpace: 'Confluence space',
+  JiraProject: 'Jira project',
+  LoomSpace: 'Loom space'
+};
+function containersEqual(arr1, arr2) {
+  return JSON.stringify((0, _toConsumableArray2.default)(arr1).sort()) === JSON.stringify((0, _toConsumableArray2.default)(arr2).sort());
+}
+function getRequestedContainersFromUrl() {
+  var _searchParams$get;
+  var searchParams = new URLSearchParams(window.location.search);
+  var values = ((_searchParams$get = searchParams.get('requestedContainers')) === null || _searchParams$get === void 0 ? void 0 : _searchParams$get.split(',').filter(Boolean)) || [];
+  return values.filter(function (value) {
+    return Object.values(_types.ContainerType).includes(value);
+  }).map(function (value) {
+    return CONTAINER_MAP[value];
+  });
+}
+function containerDisplayName(container) {
+  return CONTAINER_HUMAN_NAMES[container];
+}
+function userCanAccessFeature() {
+  if (_featureGateJsClient.default.initializeCalled()) {
+    var value = _featureGateJsClient.default.getExperimentValue('teams_app_auto_container_creation', 'cohort', 'control');
+    return value === 'universal_create' || value === 'profile_page';
+  }
+  return false;
+}
+
+//@todo: PTC-12250 update these to P90 value
+var POLLING_INTERVAL = exports.POLLING_INTERVAL = 1000;
+var POLLING_DURATION = exports.POLLING_DURATION = 10000;
+
+/**
+ * Hook for polling an async callback at a fixed interval, with timeout and pending state management.
+ *
+ * Starts polling the provided callback and stops after a set duration or when stopped manually.
+ * Ensures only one callback is pending at a time.
+ *
+ * @param callback - The async function to poll.
+ * @returns An object with polling controls and state: startPolling, stopPolling, isPolling, hasTimedOut.
+ */
+function useAsyncPolling(callback) {
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    hasTimedOut = _useState2[0],
+    setHasTimedOut = _useState2[1];
+  var timeoutRef = (0, _react.useRef)(null);
+  var _useState3 = (0, _react.useState)(false),
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    isPolling = _useState4[0],
+    setIsPolling = _useState4[1];
+  var _useState5 = (0, _react.useState)(false),
+    _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+    isPending = _useState6[0],
+    setIsPending = _useState6[1];
+  var stopPolling = (0, _react.useCallback)(function () {
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
+      timeoutRef.current = null;
+    }
+    setIsPolling(false);
+    setHasTimedOut(false);
+    setIsPending(false);
+  }, []);
+  var startPolling = (0, _react.useCallback)(function () {
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
+      timeoutRef.current = null;
+    }
+    setHasTimedOut(false);
+    setIsPolling(true);
+    setIsPending(false);
+    timeoutRef.current = setTimeout(function () {
+      stopPolling();
+      setHasTimedOut(true);
+    }, POLLING_DURATION);
+  }, [stopPolling]);
+  var wrappedCallback = (0, _react.useCallback)( /*#__PURE__*/(0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee() {
+    return _regenerator.default.wrap(function _callee$(_context) {
+      while (1) switch (_context.prev = _context.next) {
+        case 0:
+          if (!isPending) {
+            _context.next = 2;
+            break;
+          }
+          return _context.abrupt("return");
+        case 2:
+          setIsPending(true);
+          _context.prev = 3;
+          _context.next = 6;
+          return callback();
+        case 6:
+          _context.prev = 6;
+          setIsPending(false);
+          return _context.finish(6);
+        case 9:
+        case "end":
+          return _context.stop();
+      }
+    }, _callee, null, [[3,, 6, 9]]);
+  })), [callback, isPending]);
+  (0, _frontendUtilities.useInterval)(isPolling ? wrappedCallback : function () {}, isPolling ? POLLING_INTERVAL : null);
+  return {
+    startPolling: startPolling,
+    stopPolling: stopPolling,
+    isPolling: isPolling,
+    hasTimedOut: hasTimedOut
+  };
+}

package/dist/cjs/index.js

@@ -33,6 +33,12 @@ Object.defineProperty(exports, "TeamContainers", {
     return _teamContainers.TeamContainers;
   }
 });
+Object.defineProperty(exports, "TeamLinkCard", {
+  enumerable: true,
+  get: function get() {
+    return _teamLinkCard.TeamLinkCard;
+  }
+});
 Object.defineProperty(exports, "getContainerProperties", {
   enumerable: true,
   get: function get() {
@@ -82,6 +88,7 @@ Object.defineProperty(exports, "useTeamWebLinksActions", {
   }
 });
 var _teamContainers = require("./ui/team-containers");
+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");

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

@@ -21,6 +21,7 @@ var _colors = require("@atlaskit/theme/colors");
 var _analytics = require("../../common/utils/analytics");
 var _controllers = require("../../controllers");
 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 _useTeamLinksAndContainers = require("../../controllers/hooks/use-team-links-and-containers");
 var _addContainerCard = require("./add-container-card");
@@ -28,6 +29,7 @@ var _async = require("./disconnect-dialog/async");
 var _linkedContainerCard = require("./linked-container-card");
 var _noProductAccessEmptyState = require("./no-product-access-empty-state");
 var _teamContainersSkeleton = require("./team-containers-skeleton");
+var _linkedContainerCardSkeleton = require("./team-containers-skeleton/linked-container-card-skeleton");
 var _teamLinkCard = require("./team-link-card");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 // eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- to be migrated to @atlaskit/primitives/compiled – go/akcss
@@ -39,6 +41,8 @@ var TeamContainers = exports.TeamContainers = function TeamContainers(_ref) {
   var teamId = _ref.teamId,
     _onAddAContainerClick = _ref.onAddAContainerClick,
     onEditContainerClick = _ref.onEditContainerClick,
+    _ref$onRequestedConta = _ref.onRequestedContainerTimeout,
+    onRequestedContainerTimeout = _ref$onRequestedConta === void 0 ? function () {} : _ref$onRequestedConta,
     components = _ref.components,
     userId = _ref.userId,
     cloudId = _ref.cloudId,
@@ -57,6 +61,11 @@ var TeamContainers = exports.TeamContainers = function TeamContainers(_ref) {
     removeTeamLink = _useTeamLinksAndConta.removeTeamLink,
     iconsLoading = _useTeamLinksAndConta.iconsLoading,
     iconHasLoaded = _useTeamLinksAndConta.iconHasLoaded;
+  var _useRequestedContaine = (0, _useRequestedContainer.useRequestedContainers)({
+      teamId: teamId,
+      onRequestedContainerTimeout: onRequestedContainerTimeout
+    }),
+    requestedContainers = _useRequestedContaine.requestedContainers;
   var _useTeamContainersHoo = (0, _useTeamContainers2.useTeamContainersHook)(),
     _useTeamContainersHoo2 = (0, _slicedToArray2.default)(_useTeamContainersHoo, 2),
     _ = _useTeamContainersHoo2[0],
@@ -114,7 +123,7 @@ var TeamContainers = exports.TeamContainers = function TeamContainers(_ref) {
     if ((0, _platformFeatureFlags.fg)('enable_web_links_in_team_containers')) {
       if (isDisplayedOnProfileCard && filterContainerId) {
         setFilteredTeamLinks(teamLinks.filter(function (container) {
-          return container.id !== filterContainerId;
+          return container.id !== filterContainerId && !requestedContainers.includes(container.type);
         }));
       } else {
         setFilteredTeamLinks(teamLinks);
@@ -128,7 +137,7 @@ var TeamContainers = exports.TeamContainers = function TeamContainers(_ref) {
         setFilteredTeamContainers(teamContainers);
       }
     }
-  }, [teamLinks, teamContainers, isDisplayedOnProfileCard, filterContainerId]);
+  }, [teamLinks, teamContainers, isDisplayedOnProfileCard, filterContainerId, requestedContainers]);
   (0, _react.useEffect)(function () {
     var containersToCheck = (0, _platformFeatureFlags.fg)('enable_web_links_in_team_containers') ? filteredTeamLinks : filteredTeamContainers;
     if (containersToCheck.length > maxNumberOfContainersToShow || isDisplayedOnProfileCard) {
@@ -139,31 +148,31 @@ var TeamContainers = exports.TeamContainers = function TeamContainers(_ref) {
         WebLink: false
       });
     } else {
-      var hasJiraProject = containersToCheck.some(function (container) {
-        return container.type === 'JiraProject';
-      });
-      var hasConfluenceSpace = containersToCheck.some(function (container) {
-        return container.type === 'ConfluenceSpace';
-      });
-      var hasLoomSpace = containersToCheck.some(function (container) {
-        return container.type === 'LoomSpace';
-      });
-      var hasWebLink = containersToCheck.some(function (container) {
-        return container.type === 'WebLink';
-      });
-      setShowAddContainer((0, _platformFeatureFlags.fg)('migrate-product-permissions') ? {
-        Jira: !hasJiraProject && !!productPermissions && !!(0, _teamsAppInternalProductPermissions.hasProductPermission)(productPermissions, 'jira'),
-        Confluence: !hasConfluenceSpace && !!productPermissions && !!(0, _teamsAppInternalProductPermissions.hasProductPermission)(productPermissions, 'confluence'),
-        Loom: !hasLoomSpace && !!productPermissions && !!(0, _teamsAppInternalProductPermissions.hasProductPermission)(productPermissions, 'loom'),
-        WebLink: !hasWebLink
-      } : {
-        Jira: !hasJiraProject && !!productPermissionsOld && !!(0, _controllers.hasProductPermission)(productPermissionsOld, 'jira'),
-        Confluence: !hasConfluenceSpace && !!productPermissionsOld && !!(0, _controllers.hasProductPermission)(productPermissionsOld, 'confluence'),
-        Loom: !hasLoomSpace && !!productPermissionsOld && !!(0, _controllers.hasProductPermission)(productPermissionsOld, 'loom'),
-        WebLink: !hasWebLink
+      var containerExists = function containerExists(type) {
+        return containersToCheck.some(function (container) {
+          return container.type === type;
+        });
+      };
+      var containerRequested = function containerRequested(type) {
+        return requestedContainers.includes(type);
+      };
+      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) || false;
+        }
+        return productPermissionsOld && (0, _controllers.hasProductPermission)(productPermissionsOld, product) || false;
+      };
+      setShowAddContainer({
+        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, filteredTeamContainers, filteredTeamLinks, maxNumberOfContainersToShow]);
+  }, [isDisplayedOnProfileCard, productPermissions, productPermissionsOld, filteredTeamContainers, filteredTeamLinks, maxNumberOfContainersToShow, requestedContainers]);
   var handleShowMore = function handleShowMore() {
     setShowMore(!showMore);
   };
@@ -238,13 +247,33 @@ var TeamContainers = exports.TeamContainers = function TeamContainers(_ref) {
     };
   }(), [actions, createAnalyticsEvent, fireOperationalEvent, filteredTeamContainers, filteredTeamLinks, removeTeamLink, teamId, unlinkError]);
   var TeamContainersSkeletonComponent = (components === null || components === void 0 ? void 0 : components.TeamContainersSkeleton) || _teamContainersSkeleton.TeamContainersSkeleton;
-  if (loading || ((0, _platformFeatureFlags.fg)('migrate-product-permissions') ? productPermissionIsLoading : productPermissionIsLoadingOld)) {
+  var hasNoPermissions = (0, _react.useMemo)(function () {
+    if ((0, _platformFeatureFlags.fg)('migrate-product-permissions')) {
+      return productPermissions && !(0, _teamsAppInternalProductPermissions.hasProductPermission)(productPermissions, 'jira') && !(0, _teamsAppInternalProductPermissions.hasProductPermission)(productPermissions, 'confluence') && !(0, _teamsAppInternalProductPermissions.hasProductPermission)(productPermissions, 'loom');
+    }
+    return productPermissionsOld && !(0, _controllers.hasProductPermission)(productPermissionsOld, 'jira') && !(0, _controllers.hasProductPermission)(productPermissionsOld, 'confluence') && !(0, _controllers.hasProductPermission)(productPermissionsOld, 'loom');
+  }, [productPermissions, productPermissionsOld]);
+  var hasNoContainers = (0, _react.useMemo)(function () {
+    if ((0, _platformFeatureFlags.fg)('enable_web_links_in_team_containers')) {
+      return filteredTeamLinks.length === 0;
+    }
+    return filteredTeamContainers.length === 0;
+  }, [filteredTeamLinks, filteredTeamContainers]);
+  var isLoading = (0, _react.useMemo)(function () {
+    if (loading) {
+      return true;
+    }
+    if ((0, _platformFeatureFlags.fg)('migrate-product-permissions')) {
+      return productPermissionIsLoading;
+    }
+    return productPermissionIsLoadingOld;
+  }, [loading, productPermissionIsLoading, productPermissionIsLoadingOld]);
+  if (isLoading) {
     return /*#__PURE__*/_react.default.createElement(TeamContainersSkeletonComponent, {
       numberOfContainers: maxNumberOfContainersToShow
     });
   }
-  var hasAnyProductPermission = productPermissions && ((0, _teamsAppInternalProductPermissions.hasProductPermission)(productPermissions, 'jira') || (0, _teamsAppInternalProductPermissions.hasProductPermission)(productPermissions, 'confluence') || (0, _teamsAppInternalProductPermissions.hasProductPermission)(productPermissions, 'loom')) && (0, _platformFeatureFlags.fg)('migrate-product-permissions') || productPermissionsOld && ((0, _controllers.hasProductPermission)(productPermissionsOld, 'jira') || (0, _controllers.hasProductPermission)(productPermissionsOld, 'confluence') || (0, _controllers.hasProductPermission)(productPermissionsOld, 'loom')) && !(0, _platformFeatureFlags.fg)('migrate-product-permissions');
-  if (((0, _platformFeatureFlags.fg)('enable_web_links_in_team_containers') ? filteredTeamLinks.length === 0 : filteredTeamContainers.length === 0) && !isDisplayedOnProfileCard && !hasAnyProductPermission) {
+  if (hasNoContainers && !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, {
@@ -252,7 +281,12 @@ 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'
-  }, (0, _platformFeatureFlags.fg)('enable_web_links_in_team_containers') ? filteredTeamLinks.slice(0, maxNumberOfContainersToShow).map(function (container) {
+  }, requestedContainers.map(function (containerType) {
+    return /*#__PURE__*/_react.default.createElement(_linkedContainerCardSkeleton.LinkedContainerCardSkeleton, {
+      key: containerType,
+      containerType: containerType
+    });
+  }), (0, _platformFeatureFlags.fg)('enable_web_links_in_team_containers') ? filteredTeamLinks.slice(0, maxNumberOfContainersToShow).map(function (container) {
     return /*#__PURE__*/_react.default.createElement(LinkedContainerCardComponent, {
       key: container.id,
       containerType: container.type,

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

@@ -10,13 +10,15 @@ require("./index.compiled.css");
 var _runtime = require("@compiled/react/runtime");
 var _react = _interopRequireDefault(require("react"));
 var _compiled = require("@atlaskit/primitives/compiled");
+var _getContainerProperties = require("../../../../common/utils/get-container-properties");
 var styles = {
   container: "_2rkoiti9 _1h6dz9xs _12y3e4h9 _12jimuej _1qu2nqa1 _syaz1fxt _ca0qpxbi _u5f3pxbi _n3tdpxbi _19bvpxbi",
   avatarSkeleton: "_2rkoglpi _ca0qpxbi _u5f3pxbi _n3tdpxbi _19bvpxbi",
   firstLineSkeleton: "_2rko1q77 _1rjc1b66",
   secondLineSkeleton: "_2rko1q77 _1rjc1b66 _1bsbqkoa"
 };
-var LinkedContainerCardSkeleton = exports.LinkedContainerCardSkeleton = function LinkedContainerCardSkeleton() {
+var LinkedContainerCardSkeleton = exports.LinkedContainerCardSkeleton = function LinkedContainerCardSkeleton(_ref) {
+  var containerType = _ref.containerType;
   return /*#__PURE__*/_react.default.createElement(_compiled.Box, {
     xcss: styles.container
   }, /*#__PURE__*/_react.default.createElement(_compiled.Inline, {
@@ -31,8 +33,32 @@ var LinkedContainerCardSkeleton = exports.LinkedContainerCardSkeleton = function
   }, /*#__PURE__*/_react.default.createElement(_compiled.Box, {
     backgroundColor: "color.background.neutral",
     xcss: styles.firstLineSkeleton
-  }), /*#__PURE__*/_react.default.createElement(_compiled.Box, {
+  }), containerType ? /*#__PURE__*/_react.default.createElement(ContainerIcon, {
+    containerType: containerType
+  }) : /*#__PURE__*/_react.default.createElement(_compiled.Box, {
     backgroundColor: "color.background.neutral",
     xcss: styles.secondLineSkeleton
   }))));
-};
+};
+function ContainerIcon(_ref2) {
+  var containerType = _ref2.containerType;
+  var _getContainerProperti = (0, _getContainerProperties.getContainerProperties)({
+      containerType: containerType,
+      iconSize: 'medium'
+    }),
+    description = _getContainerProperti.description,
+    icon = _getContainerProperti.icon,
+    containerTypeText = _getContainerProperti.containerTypeText;
+  return /*#__PURE__*/_react.default.createElement(_compiled.Flex, {
+    gap: "space.050",
+    alignItems: "center"
+  }, icon, /*#__PURE__*/_react.default.createElement(_compiled.Inline, {
+    space: "space.050"
+  }, /*#__PURE__*/_react.default.createElement(_compiled.Text, {
+    size: "small",
+    color: "color.text.subtle"
+  }, description), /*#__PURE__*/_react.default.createElement(_compiled.Text, {
+    size: "small",
+    color: "color.text.subtle"
+  }, containerTypeText)));
+}

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

@@ -52,7 +52,8 @@ var TeamLinkCard = exports.TeamLinkCard = function TeamLinkCard(_ref) {
     _onDisconnectButtonClick = _ref.onDisconnectButtonClick,
     _onEditLinkClick = _ref.onEditLinkClick,
     iconsLoading = _ref.iconsLoading,
-    iconHasLoaded = _ref.iconHasLoaded;
+    iconHasLoaded = _ref.iconHasLoaded,
+    openInNewTab = _ref.openInNewTab;
   var _useAnalyticsEvents = (0, _analyticsNext.useAnalyticsEvents)(),
     createAnalyticsEvent = _useAnalyticsEvents.createAnalyticsEvent;
   var _getContainerProperti = (0, _getContainerProperties.getContainerProperties)({
@@ -121,7 +122,7 @@ var TeamLinkCard = exports.TeamLinkCard = function TeamLinkCard(_ref) {
       setShowKeyboardFocus(true);
     }
   };
-  var handleLinkClick = function handleLinkClick() {
+  var handleLinkClick = function handleLinkClick(e) {
     var baseAttributes = {
       container: containerType,
       containerId: containerId
@@ -139,6 +140,10 @@ var TeamLinkCard = exports.TeamLinkCard = function TeamLinkCard(_ref) {
       actionSubjectId: 'teamContainer',
       attributes: attributes
     });
+    if (openInNewTab) {
+      e.preventDefault();
+      window.open(link || '#', '_blank', 'noopener, noreferrer');
+    }
   };
   return /*#__PURE__*/_react.default.createElement(_compiled.Box, {
     backgroundColor: hovered ? 'color.background.input.hovered' : 'color.background.input',