@atlaskit/teams-public 0.50.3 → 0.51.0

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # @atlaskit/teams-public
 
+## 0.51.0
+
+### Minor Changes
+
+- [`3c3c951f9cd92`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/3c3c951f9cd92) -
+  [ux] Add create container feature to team profile
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 0.50.3
 
 ### Patch Changes

package/dist/cjs/controllers/product-permission/utils.js

@@ -48,7 +48,7 @@ var hasProductPermission = exports.hasProductPermission = function hasProductPer
     });
   }
   return permissionIds === null || permissionIds === void 0 ? void 0 : permissionIds.some(function (permissionId) {
-    var _permissions$product;
-    return (_permissions$product = permissions[product]) === null || _permissions$product === void 0 ? void 0 : _permissions$product[permissionId];
+    var productPermissions = permissions[product];
+    return productPermissions === null || productPermissions === void 0 ? void 0 : productPermissions[permissionId];
   });
 };

package/dist/cjs/ui/team-containers/add-container-card/add-container-card-with-create/index.compiled.css

@@ -0,0 +1,18 @@
+
+._2rkoiti9{border-radius:var(--ds-border-radius-100,4px)}
+._2rkoop52{border-radius:var(--ds-border-radius-100,8px)}
+._2rkopd34{border-radius:var(--ds-border-radius-200,8px)}._12jimuej{outline-color:var(--ds-border,#091e4224)}
+._18u01wug{margin-left:auto}
+._19bvutpp{padding-left:var(--ds-space-150,9pt)}
+._1bah1h6o{justify-content:center}
+._1bahesu3{justify-content:flex-end}
+._1bsb1osq{width:100%}
+._1bsb1u1b{width:34px}
+._1e0c1txw{display:flex}
+._1qu2nqa1{outline-style:solid}
+._4cvr1h6o{align-items:center}
+._4t3i1u1b{height:34px}
+._ca0qutpp{padding-top:var(--ds-space-150,9pt)}
+._n3tdutpp{padding-bottom:var(--ds-space-150,9pt)}
+._u5f3utpp{padding-right:var(--ds-space-150,9pt)}
+._d0altlke:hover{cursor:pointer}

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

@@ -0,0 +1,155 @@
+/* index.tsx generated by @compiled/babel-plugin v0.36.1 */
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.messages = exports.getAddContainerCardsWithCreate = exports.AddContainerCardWithCreate = void 0;
+require("./index.compiled.css");
+var _runtime = require("@compiled/react/runtime");
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _reactIntlNext = require("react-intl-next");
+var _new = _interopRequireWildcard(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 _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); }
+var styles = {
+  card: "_4cvr1h6o _1bsb1osq",
+  container: "_2rkoop52 _ca0qutpp _u5f3utpp _n3tdutpp _19bvutpp _d0altlke",
+  createButtonWrapper: "_2rkoiti9 _1e0c1txw _4cvr1h6o _1bahesu3 _18u01wug _12jimuej _1qu2nqa1",
+  iconWrapper: "_2rkopd34 _1bsb1u1b _4t3i1u1b _1e0c1txw _4cvr1h6o _1bah1h6o _12jimuej _1qu2nqa1"
+};
+var AddContainerCardWrapper = function AddContainerCardWrapper(_ref) {
+  var children = _ref.children,
+    onClick = _ref.onClick;
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    hovered = _useState2[0],
+    setHovered = _useState2[1];
+  var handleMouseEnter = function handleMouseEnter() {
+    return setHovered(true);
+  };
+  var handleMouseLeave = function handleMouseLeave() {
+    return setHovered(false);
+  };
+  return /*#__PURE__*/_react.default.createElement(_compiled.Box, {
+    backgroundColor: hovered ? 'elevation.surface.hovered' : 'elevation.surface.sunken',
+    xcss: styles.container,
+    onMouseEnter: handleMouseEnter,
+    onMouseLeave: handleMouseLeave,
+    onClick: onClick
+  }, children);
+};
+var AddContainerCardWithCreate = exports.AddContainerCardWithCreate = function AddContainerCardWithCreate(_ref2) {
+  var containerType = _ref2.containerType,
+    onCreateContainerClick = _ref2.onCreateContainerClick,
+    isLoading = _ref2.isLoading;
+  var _getContainerProperti = (0, _utils.getContainerProperties)({
+      containerType: containerType
+    }),
+    description = _getContainerProperti.description,
+    icon = _getContainerProperti.icon,
+    title = _getContainerProperti.title;
+  if (isLoading) {
+    return /*#__PURE__*/_react.default.createElement(_linkedContainerCardSkeleton.LinkedContainerCardSkeleton, null);
+  }
+  return /*#__PURE__*/_react.default.createElement(AddContainerCardWrapper, {
+    onClick: onCreateContainerClick
+  }, /*#__PURE__*/_react.default.createElement(_compiled.Inline, {
+    space: "space.100",
+    xcss: styles.card
+  }, /*#__PURE__*/_react.default.createElement(_compiled.Box, {
+    xcss: styles.iconWrapper
+  }, icon), /*#__PURE__*/_react.default.createElement(_compiled.Stack, (0, _platformFeatureFlags.fg)('enable_medium_size_icons_for_team_link_cards') ? {
+    space: 'space.025'
+  } : {}, /*#__PURE__*/_react.default.createElement(_compiled.Text, {
+    maxLines: 1,
+    weight: "medium",
+    color: "color.text"
+  }, title), /*#__PURE__*/_react.default.createElement(_compiled.Flex, {
+    gap: "space.050",
+    alignItems: "center"
+  }, /*#__PURE__*/_react.default.createElement(_compiled.Text, {
+    size: "small",
+    color: "color.text.subtle"
+  }, description))), /*#__PURE__*/_react.default.createElement(_compiled.Box, {
+    xcss: styles.createButtonWrapper
+  }, /*#__PURE__*/_react.default.createElement(_new.default, {
+    appearance: "subtle",
+    testId: "add-create-icon",
+    onClick: function onClick(e) {
+      onCreateContainerClick(e);
+      e.stopPropagation();
+    }
+  }, /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, messages.createLinkButtonText)))));
+};
+var getAddContainerCardsWithCreate = exports.getAddContainerCardsWithCreate = function getAddContainerCardsWithCreate(_ref3) {
+  var showAddContainer = _ref3.showAddContainer,
+    _onCreateContainerClick = _ref3.onCreateContainerClick,
+    onAddAContainerClick = _ref3.onAddAContainerClick,
+    containersLoading = _ref3.containersLoading;
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, showAddContainer.Jira && /*#__PURE__*/_react.default.createElement(AddContainerCardWithCreate, {
+    onCreateContainerClick: function onCreateContainerClick(e) {
+      _onCreateContainerClick(e, 'Jira');
+    },
+    containerType: "JiraProject",
+    isLoading: containersLoading.jira
+  }), showAddContainer.Confluence && /*#__PURE__*/_react.default.createElement(AddContainerCardWithCreate, {
+    onCreateContainerClick: function onCreateContainerClick(e) {
+      _onCreateContainerClick(e, 'Confluence');
+    },
+    containerType: "ConfluenceSpace",
+    isLoading: containersLoading.confluence
+  }), showAddContainer.Loom && /*#__PURE__*/_react.default.createElement(AddContainerCardWithCreate, {
+    onCreateContainerClick: function onCreateContainerClick(e) {
+      _onCreateContainerClick(e, 'Loom');
+    },
+    containerType: "LoomSpace",
+    isLoading: containersLoading.loom
+  }), (showAddContainer.Loom || showAddContainer.Jira || showAddContainer.Confluence) && /*#__PURE__*/_react.default.createElement(AddContainerCardWrapper, {
+    onClick: onAddAContainerClick
+  }, /*#__PURE__*/_react.default.createElement(_compiled.Inline, {
+    space: "space.100",
+    xcss: styles.card
+  }, /*#__PURE__*/_react.default.createElement(_compiled.Box, {
+    xcss: styles.iconWrapper
+  }, /*#__PURE__*/_react.default.createElement(_new.IconButton, {
+    label: "Add a container",
+    appearance: "subtle",
+    icon: function icon(iconProps) {
+      return /*#__PURE__*/_react.default.createElement(_add.default, (0, _extends2.default)({}, iconProps, {
+        size: "small"
+      }));
+    },
+    testId: "add-icon",
+    onClick: function onClick(e) {
+      onAddAContainerClick(e);
+      e.stopPropagation();
+    }
+  })), /*#__PURE__*/_react.default.createElement(_compiled.Stack, {
+    space: 'space.025'
+  }, /*#__PURE__*/_react.default.createElement(_compiled.Text, {
+    maxLines: 1,
+    weight: "medium",
+    color: "color.text"
+  }, /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, messages.addExistingLinkTitle))))));
+};
+var messages = exports.messages = (0, _reactIntlNext.defineMessages)({
+  createLinkButtonText: {
+    id: 'ptc-directory.team-profile-page.team-containers.add-confluence-space-title',
+    defaultMessage: 'Create',
+    description: 'Title of the card to add a Confluence space to a team'
+  },
+  addExistingLinkTitle: {
+    id: 'ptc-directory.team-profile-page.team-containers.add-confluence-space-title',
+    defaultMessage: 'Add an existing space',
+    description: 'Title of the card to add a Confluence space to a team'
+  }
+});

package/dist/cjs/ui/team-containers/add-container-card/add-container-card-with-create/utils.js

@@ -0,0 +1,91 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.messages = exports.getContainerProperties = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _reactIntlNext = require("react-intl-next");
+var _spaces = _interopRequireDefault(require("@atlaskit/icon-lab/core/spaces"));
+var _project = _interopRequireDefault(require("@atlaskit/icon/core/project"));
+var getContainerProperties = exports.getContainerProperties = function getContainerProperties(_ref) {
+  var containerType = _ref.containerType;
+  switch (containerType) {
+    case 'ConfluenceSpace':
+      return {
+        description: /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, messages.confluenceContainerDescription),
+        icon: /*#__PURE__*/_react.default.createElement(_spaces.default, {
+          label: 'confluence space',
+          spacing: 'spacious'
+        }),
+        title: /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, messages.addConfluenceContainerTitle)
+      };
+    case 'LoomSpace':
+      return {
+        description: /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, messages.loomSpaceDescription),
+        icon: /*#__PURE__*/_react.default.createElement(_spaces.default, {
+          label: 'loom space',
+          spacing: 'spacious'
+        }),
+        title: /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, messages.addLoomContainerTitle)
+      };
+    case 'JiraProject':
+      return {
+        description: /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, messages.jiraProjectDescription),
+        icon: /*#__PURE__*/_react.default.createElement(_project.default, {
+          label: 'jira project',
+          spacing: 'spacious'
+        }),
+        title: /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, messages.addJiraProjectTitle)
+      };
+    default:
+      return {
+        description: null,
+        icon: null,
+        title: null
+      };
+  }
+};
+var messages = exports.messages = (0, _reactIntlNext.defineMessages)({
+  addConfluenceContainerTitle: {
+    id: 'ptc-directory.team-profile-page.team-containers.add-confluence-space-title',
+    defaultMessage: 'Confluence space',
+    description: 'Title of the card to add a Confluence space to a team'
+  },
+  confluenceContainerDescription: {
+    id: 'ptc-directory.team-profile-page.team-containers.add-confluence-space-description',
+    defaultMessage: 'Create a knowledge bank',
+    description: 'Description of the card to add a Confluence space to a team'
+  },
+  addLoomContainerTitle: {
+    id: 'ptc-directory.team-profile-page.team-containers.add-loom-space-title',
+    defaultMessage: 'Loom space',
+    description: 'Title of the card to add a Loom space to a team'
+  },
+  loomSpaceDescription: {
+    id: 'ptc-directory.team-profile-page.team-containers.add-loom-space-description',
+    defaultMessage: 'Share async updates',
+    description: 'Description of the card to add a Loom space to a team'
+  },
+  addJiraProjectTitle: {
+    id: 'ptc-directory.team-profile-page.team-containers.add-jira-project-title',
+    defaultMessage: 'Jira project',
+    description: 'Title of the card to add a Jira project to a team'
+  },
+  jiraProjectDescription: {
+    id: 'ptc-directory.team-profile-page.team-containers.add-jira-project-description',
+    defaultMessage: 'Plan out project tasks',
+    description: 'Description of the card to add a Jira project to a team'
+  },
+  emptyWebLinkContainerDescription: {
+    id: 'platform.teams.containers.empty-web-link-description',
+    defaultMessage: 'Add any web link',
+    description: 'Description displayed on the empty card for adding a web link to a team'
+  },
+  webLinkContainerDescription: {
+    id: 'platform.teams.containers.web-link-title-description',
+    defaultMessage: 'Web link',
+    description: 'Description displayed for web link containers in team profile'
+  }
+});

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

@@ -6,7 +6,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.AddContainerCard = void 0;
+exports.getAddContainerCards = exports.AddContainerCard = void 0;
 require("./index.compiled.css");
 var _runtime = require("@compiled/react/runtime");
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
@@ -88,4 +88,29 @@ var AddContainerCard = exports.AddContainerCard = function AddContainerCard(_ref
     size: "small",
     color: "color.text.subtle"
   }, description)))));
+};
+var getAddContainerCards = exports.getAddContainerCards = function getAddContainerCards(_ref3) {
+  var showAddContainer = _ref3.showAddContainer,
+    _onAddAContainerClick = _ref3.onAddAContainerClick;
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, showAddContainer.Jira && /*#__PURE__*/_react.default.createElement(AddContainerCard, {
+    onAddAContainerClick: function onAddAContainerClick(e) {
+      return _onAddAContainerClick(e, 'Jira');
+    },
+    containerType: "JiraProject"
+  }), showAddContainer.Confluence && /*#__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, {
+    onAddAContainerClick: function onAddAContainerClick(e) {
+      return _onAddAContainerClick(e, 'Loom');
+    },
+    containerType: "LoomSpace"
+  }), showAddContainer.WebLink && /*#__PURE__*/_react.default.createElement(AddContainerCard, {
+    onAddAContainerClick: function onAddAContainerClick(e) {
+      return _onAddAContainerClick(e, 'WebLink');
+    },
+    containerType: "WebLink"
+  }));
 };

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

@@ -7,17 +7,23 @@ 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 _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 _useProductPermission3 = require("../../controllers/hooks/use-product-permission");
@@ -25,17 +31,27 @@ var _useRequestedContainer = require("../../controllers/hooks/use-requested-cont
 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 _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 _teamContainersSkeleton = require("./team-containers-skeleton");
-var _linkedContainerCardSkeleton = require("./team-containers-skeleton/linked-container-card-skeleton");
 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); }
-// eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- to be migrated to @atlaskit/primitives/compiled – go/akcss
-
+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'
+};
 var TeamContainers = exports.TeamContainers = function TeamContainers(_ref) {
   var teamId = _ref.teamId,
     _onAddAContainerClick = _ref.onAddAContainerClick,
@@ -48,11 +64,13 @@ 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;
+    maxNumberOfContainersToShow = _ref$maxNumberOfConta === void 0 ? MAX_NUMBER_OF_CONTAINERS_TO_SHOW : _ref$maxNumberOfConta,
+    addFlag = _ref.addFlag;
   var _useAnalyticsEvents = (0, _analyticsNext.useAnalyticsEvents)(),
     createAnalyticsEvent = _useAnalyticsEvents.createAnalyticsEvent;
   var _useTeamContainers = (0, _useTeamContainers2.useTeamContainers)(teamId),
-    unlinkError = _useTeamContainers.unlinkError;
+    unlinkError = _useTeamContainers.unlinkError,
+    refetchTeamContainers = _useTeamContainers.refetchTeamContainers;
   var _useTeamLinksAndConta = (0, _useTeamLinksAndContainers.useTeamLinksAndContainers)(teamId, true),
     teamLinks = _useTeamLinksAndConta.teamLinks,
     removeTeamLink = _useTeamLinksAndConta.removeTeamLink,
@@ -94,12 +112,25 @@ var TeamContainers = exports.TeamContainers = function TeamContainers(_ref) {
     _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];
   var _usePeopleAndTeamAnal = (0, _analytics.usePeopleAndTeamAnalytics)(),
     fireOperationalEvent = _usePeopleAndTeamAnal.fireOperationalEvent,
     fireTrackEvent = _usePeopleAndTeamAnal.fireTrackEvent;
   var _useProductPermission = (0, _teamsAppInternalProductPermissions.useProductPermissions)({
       userId: userId,
       cloudId: cloudId,
+      permissionsToCheck: {
+        jira: ['CREATE_PROJECT', 'manage', 'write'],
+        loom: ['write', 'manage'],
+        confluence: ['write', 'manage']
+      },
       options: {
         enabled: (0, _platformFeatureFlags.fg)('migrate-product-permissions')
       }
@@ -114,6 +145,7 @@ var TeamContainers = exports.TeamContainers = function TeamContainers(_ref) {
     }),
     productPermissionsOld = _useProductPermission2.data,
     productPermissionIsLoadingOld = _useProductPermission2.loading;
+  var autoCreateExperimentValue = _featureGateJsClient.default.initializeCompleted() && _featureGateJsClient.default.getExperimentValue('teams_app_auto_container_creation', 'cohort', 'control') || '';
   (0, _react.useEffect)(function () {
     if (isDisplayedOnProfileCard && filterContainerId) {
       setFilteredTeamLinks(teamLinks.filter(function (container) {
@@ -141,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) {
+      var showContainer = function showContainer(containerExists, isRequesting, product, permissionIds) {
         if (containerExists || isRequesting) {
           return false;
         }
         if ((0, _platformFeatureFlags.fg)('migrate-product-permissions')) {
-          return productPermissions && (0, _teamsAppInternalProductPermissions.hasProductPermission)(productPermissions, product) || false;
+          return productPermissions && (0, _teamsAppInternalProductPermissions.hasProductPermission)(productPermissions, product, permissionIds) || false;
         }
-        return productPermissionsOld && (0, _controllers.hasProductPermission)(productPermissionsOld, product) || false;
+        return productPermissionsOld && (0, _controllers.hasProductPermission)(productPermissionsOld, product, permissionIds) || false;
       };
       setShowAddContainer({
-        Jira: showContainer(containerExists('JiraProject'), containerRequested('JiraProject'), 'jira'),
-        Confluence: showContainer(containerExists('ConfluenceSpace'), containerRequested('ConfluenceSpace'), 'confluence'),
-        Loom: showContainer(containerExists('LoomSpace'), containerRequested('LoomSpace'), 'loom'),
+        Jira: showContainer(containerExists('JiraProject'), containerRequested('JiraProject'), 'jira', autoCreateExperimentValue === 'profile_page' ? ['CREATE_PROJECT'] : []),
+        Confluence: showContainer(containerExists('ConfluenceSpace'), containerRequested('ConfluenceSpace'), 'confluence', autoCreateExperimentValue === 'profile_page' ? ['write'] : []),
+        Loom: showContainer(containerExists('LoomSpace'), containerRequested('LoomSpace'), 'loom', autoCreateExperimentValue === 'profile_page' ? ['write'] : []),
         WebLink: !containerExists('WebLink')
       });
     }
-  }, [isDisplayedOnProfileCard, productPermissions, productPermissionsOld, filteredTeamLinks, maxNumberOfContainersToShow, requestedContainers]);
+  }, [isDisplayedOnProfileCard, productPermissions, productPermissionsOld, filteredTeamLinks, maxNumberOfContainersToShow, requestedContainers, autoCreateExperimentValue]);
   var handleShowMore = function handleShowMore() {
     setShowMore(!showMore);
   };
@@ -229,6 +261,86 @@ var TeamContainers = exports.TeamContainers = function TeamContainers(_ref) {
       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]);
   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')) {
@@ -288,26 +400,20 @@ var TeamContainers = exports.TeamContainers = function TeamContainers(_ref) {
         return handleEditContainerClick(container);
       }
     });
-  }), showAddContainer.Jira && /*#__PURE__*/_react.default.createElement(_addContainerCard.AddContainerCard, {
-    onAddAContainerClick: function onAddAContainerClick(e) {
-      return _onAddAContainerClick(e, 'Jira');
-    },
-    containerType: "JiraProject"
-  }), showAddContainer.Confluence && /*#__PURE__*/_react.default.createElement(_addContainerCard.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.AddContainerCard, {
-    onAddAContainerClick: function onAddAContainerClick(e) {
-      return _onAddAContainerClick(e, 'Loom');
+  }), autoCreateExperimentValue === 'profile_page' ? (0, _addContainerCardWithCreate.getAddContainerCardsWithCreate)({
+    showAddContainer: showAddContainer,
+    onCreateContainerClick: function onCreateContainerClick(e, containerType) {
+      if (containerType !== 'WebLink') {
+        handleCreateContainer(containerType);
+      }
     },
-    containerType: "LoomSpace"
-  }), showAddContainer.WebLink && /*#__PURE__*/_react.default.createElement(_addContainerCard.AddContainerCard, {
+    containersLoading: containersBeingCreated,
     onAddAContainerClick: function onAddAContainerClick(e) {
       return _onAddAContainerClick(e, 'WebLink');
-    },
-    containerType: "WebLink"
+    }
+  }) : (0, _addContainerCard.getAddContainerCards)({
+    showAddContainer: showAddContainer,
+    onAddAContainerClick: _onAddAContainerClick
   }), showMore && filteredTeamLinks.slice(maxNumberOfContainersToShow).map(function (container) {
     return /*#__PURE__*/_react.default.createElement(LinkedContainerCardComponent, {
       key: container.id,