@atlaskit/teams-public 0.54.0 → 0.54.2

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @atlaskit/teams-public
 
+## 0.54.2
+
+### Patch Changes
+
+- [`64db8286c7b8e`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/64db8286c7b8e) -
+  Slightly tweak the design of create container button (hidden behind experiment)
+
+## 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

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

@@ -15,7 +15,11 @@ var actions = {
       var setState = _ref.setState,
         getState = _ref.getState;
       var containers = getState();
-      setState(_objectSpread(_objectSpread({}, containers), {}, (0, _defineProperty2.default)({}, product, _objectSpread(_objectSpread({}, containers[product]), {}, {
+      var current = containers[product];
+      if (current.isLoading === isLoading) {
+        return;
+      }
+      setState(_objectSpread(_objectSpread({}, containers), {}, (0, _defineProperty2.default)({}, product, _objectSpread(_objectSpread({}, current), {}, {
         isLoading: isLoading
       }))));
     };
@@ -25,8 +29,14 @@ var actions = {
       var setState = _ref2.setState,
         getState = _ref2.getState;
       var containers = getState();
-      setState(_objectSpread(_objectSpread({}, containers), {}, (0, _defineProperty2.default)({}, product, _objectSpread(_objectSpread({}, containers[product]), {}, {
-        isCreated: isCreated
+      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
       }))));
     };
   }

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

@@ -0,0 +1,93 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.AddContainerCardButton = AddContainerCardButton;
+var _react = _interopRequireDefault(require("react"));
+var _reactIntlNext = require("react-intl-next");
+var _compiled = require("@atlaskit/primitives/compiled");
+function AddContainerCardButton(_ref) {
+  var type = _ref.type;
+  var _getContainerProperti = getContainerProperties(type),
+    title = _getContainerProperti.title,
+    description = _getContainerProperti.description;
+  return /*#__PURE__*/_react.default.createElement(_compiled.Stack, null, /*#__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)));
+}
+function getContainerProperties(type) {
+  switch (type) {
+    case 'ConfluenceSpace':
+      return {
+        description: /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, messages.confluenceContainerDescription),
+        title: /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, messages.addConfluenceContainerTitle)
+      };
+    case 'LoomSpace':
+      return {
+        description: /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, messages.loomSpaceDescription),
+        title: /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, messages.addLoomContainerTitle)
+      };
+    case 'JiraProject':
+      return {
+        description: /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, messages.jiraProjectDescription),
+        title: /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, messages.addJiraProjectTitle)
+      };
+    case 'WebLink':
+      return {
+        description: null,
+        title: /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, messages.addWebLinkTitle)
+      };
+    default:
+      return {
+        description: null,
+        title: null
+      };
+  }
+}
+var messages = (0, _reactIntlNext.defineMessages)({
+  addConfluenceContainerTitle: {
+    id: 'ptc-directory.team-profile-page.team-containers.create.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.create.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.create.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.create.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.create.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.create.add-jira-project-description',
+    defaultMessage: 'Plan out project tasks',
+    description: 'Description of the card to add a Jira project to a team'
+  },
+  addWebLinkTitle: {
+    id: 'ptc-directory.team-profile-page.team-containers.create.add-web-link-title',
+    defaultMessage: 'Add any web link',
+    description: 'Title of the card to add a any web link to a team'
+  }
+});

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

@@ -18,6 +18,7 @@ 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");
+var _addContainerCardButton = require("./add-container-card-button");
 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",
@@ -49,7 +50,9 @@ var AddContainerCard = exports.AddContainerCard = function AddContainerCard(_ref
   var containerType = _ref2.containerType,
     onAddAContainerClick = _ref2.onAddAContainerClick,
     _ref2$isLoading = _ref2.isLoading,
-    isLoading = _ref2$isLoading === void 0 ? false : _ref2$isLoading;
+    isLoading = _ref2$isLoading === void 0 ? false : _ref2$isLoading,
+    _ref2$showNewDesign = _ref2.showNewDesign,
+    showNewDesign = _ref2$showNewDesign === void 0 ? false : _ref2$showNewDesign;
   var _getContainerProperti = (0, _getContainerProperties.getContainerProperties)({
       containerType: containerType,
       iconSize: (0, _platformFeatureFlags.fg)('enable_medium_size_icons_for_team_link_cards') ? 'medium' : undefined,
@@ -83,7 +86,9 @@ var AddContainerCard = exports.AddContainerCard = function AddContainerCard(_ref
       onAddAContainerClick(e);
       e.stopPropagation();
     }
-  })), /*#__PURE__*/_react.default.createElement(_compiled.Stack, (0, _platformFeatureFlags.fg)('enable_medium_size_icons_for_team_link_cards') ? {
+  })), showNewDesign ? /*#__PURE__*/_react.default.createElement(_addContainerCardButton.AddContainerCardButton, {
+    type: containerType
+  }) : /*#__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,
@@ -99,29 +104,34 @@ var AddContainerCard = exports.AddContainerCard = function AddContainerCard(_ref
 };
 var getAddContainerCards = exports.getAddContainerCards = function getAddContainerCards(_ref3) {
   var containers = _ref3.containers,
-    _onAddAContainerClick = _ref3.onAddAContainerClick;
+    _onAddAContainerClick = _ref3.onAddAContainerClick,
+    showNewDesign = _ref3.showNewDesign;
   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",
-    isLoading: containers.Jira.isLoading
+    isLoading: containers.Jira.isLoading,
+    showNewDesign: showNewDesign
   }), containers.Confluence.canAdd && /*#__PURE__*/_react.default.createElement(AddContainerCard, {
     onAddAContainerClick: function onAddAContainerClick(e) {
       return _onAddAContainerClick(e, 'Confluence');
     },
     containerType: "ConfluenceSpace",
-    isLoading: containers.Confluence.isLoading
+    isLoading: containers.Confluence.isLoading,
+    showNewDesign: showNewDesign
   }), 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",
-    isLoading: containers.Loom.isLoading
+    isLoading: containers.Loom.isLoading,
+    showNewDesign: showNewDesign
   }), containers.WebLink.canAdd && /*#__PURE__*/_react.default.createElement(AddContainerCard, {
     onAddAContainerClick: function onAddAContainerClick(e) {
       return _onAddAContainerClick(e, 'WebLink');
     },
-    containerType: "WebLink"
+    containerType: "WebLink",
+    showNewDesign: showNewDesign
   }));
 };

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

@@ -14,6 +14,7 @@ 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");
@@ -146,6 +147,16 @@ var TeamContainers = exports.TeamContainers = function TeamContainers(_ref) {
     productPermissionsOld = _useProductPermission2.data,
     productPermissionIsLoadingOld = _useProductPermission2.loading;
   useRefreshOnContainerCreated(teamId);
+  var hasPermissionToCreateContainer = (0, _react.useMemo)(function () {
+    if (!productPermissions) {
+      return {};
+    }
+    var getPermission = function getPermission(product, permission) {
+      return productPermissions && (0, _teamsAppInternalProductPermissions.hasProductPermission)(productPermissions, product, permission);
+    };
+    return getPermission('confluence', ['CREATE_SPACE']) || getPermission('jira', ['CREATE_PROJECT']) || getPermission('loom', ['write']);
+  }, [productPermissions]);
+  var createContainerExperimentEnabled = hasPermissionToCreateContainer && _featureGateJsClient.default.initializeCompleted() && _featureGateJsClient.default.getExperimentValue('teams_app_auto_container_creation', 'isEnabled', false);
   (0, _react.useEffect)(function () {
     if (isDisplayedOnProfileCard && filterContainerId) {
       setFilteredTeamLinks(teamLinks.filter(function (container) {
@@ -332,7 +343,8 @@ var TeamContainers = exports.TeamContainers = function TeamContainers(_ref) {
     });
   }), (0, _addContainerCard.getAddContainerCards)({
     containers: availableContainers,
-    onAddAContainerClick: onAddAContainerClick
+    onAddAContainerClick: onAddAContainerClick,
+    showNewDesign: createContainerExperimentEnabled
   }), 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

@@ -5,10 +5,14 @@ const actions = {
     getState
   }) => {
     const containers = getState();
+    const current = containers[product];
+    if (current.isLoading === isLoading) {
+      return;
+    }
     setState({
       ...containers,
       [product]: {
-        ...containers[product],
+        ...current,
         isLoading
       }
     });
@@ -18,11 +22,17 @@ const actions = {
     getState
   }) => {
     const containers = getState();
+    const current = containers[product];
+    if (current.isCreated === isCreated) {
+      return;
+    }
+    const isLoading = isCreated ? false : current.isLoading;
     setState({
       ...containers,
       [product]: {
-        ...containers[product],
-        isCreated
+        ...current,
+        isCreated,
+        isLoading
       }
     });
   }

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

@@ -0,0 +1,89 @@
+import React from 'react';
+import { defineMessages, FormattedMessage } from 'react-intl-next';
+import { Flex, Stack, Text } from '@atlaskit/primitives/compiled';
+function AddContainerCardButton({
+  type
+}) {
+  const {
+    title,
+    description
+  } = getContainerProperties(type);
+  return /*#__PURE__*/React.createElement(Stack, null, /*#__PURE__*/React.createElement(Text, {
+    maxLines: 1,
+    weight: "medium",
+    color: "color.text"
+  }, title), /*#__PURE__*/React.createElement(Flex, {
+    gap: "space.050",
+    alignItems: "center"
+  }, /*#__PURE__*/React.createElement(Text, {
+    size: "small",
+    color: "color.text.subtle"
+  }, description)));
+}
+function getContainerProperties(type) {
+  switch (type) {
+    case 'ConfluenceSpace':
+      return {
+        description: /*#__PURE__*/React.createElement(FormattedMessage, messages.confluenceContainerDescription),
+        title: /*#__PURE__*/React.createElement(FormattedMessage, messages.addConfluenceContainerTitle)
+      };
+    case 'LoomSpace':
+      return {
+        description: /*#__PURE__*/React.createElement(FormattedMessage, messages.loomSpaceDescription),
+        title: /*#__PURE__*/React.createElement(FormattedMessage, messages.addLoomContainerTitle)
+      };
+    case 'JiraProject':
+      return {
+        description: /*#__PURE__*/React.createElement(FormattedMessage, messages.jiraProjectDescription),
+        title: /*#__PURE__*/React.createElement(FormattedMessage, messages.addJiraProjectTitle)
+      };
+    case 'WebLink':
+      return {
+        description: null,
+        title: /*#__PURE__*/React.createElement(FormattedMessage, messages.addWebLinkTitle)
+      };
+    default:
+      return {
+        description: null,
+        title: null
+      };
+  }
+}
+const messages = defineMessages({
+  addConfluenceContainerTitle: {
+    id: 'ptc-directory.team-profile-page.team-containers.create.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.create.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.create.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.create.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.create.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.create.add-jira-project-description',
+    defaultMessage: 'Plan out project tasks',
+    description: 'Description of the card to add a Jira project to a team'
+  },
+  addWebLinkTitle: {
+    id: 'ptc-directory.team-profile-page.team-containers.create.add-web-link-title',
+    defaultMessage: 'Add any web link',
+    description: 'Title of the card to add a any web link to a team'
+  }
+});
+export { AddContainerCardButton };

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

@@ -9,6 +9,7 @@ import { fg } from '@atlaskit/platform-feature-flags';
 import { Box, Flex, Inline, Stack, Text } from '@atlaskit/primitives/compiled';
 import { LinkedContainerCardSkeleton } from '../../../common/ui/team-containers-skeleton/linked-container-card-skeleton';
 import { getContainerProperties } from '../../../common/utils/get-container-properties';
+import { AddContainerCardButton } from './add-container-card-button';
 const styles = {
   card: "_4cvr1h6o _1bsb1osq",
   container: "_2rkoop52 _ca0qutpp _u5f3utpp _n3tdutpp _19bvutpp _d0altlke",
@@ -32,7 +33,8 @@ const AddContainerCardWrapper = ({
 export const AddContainerCard = ({
   containerType,
   onAddAContainerClick,
-  isLoading = false
+  isLoading = false,
+  showNewDesign = false
 }) => {
   const {
     description,
@@ -66,7 +68,9 @@ export const AddContainerCard = ({
       onAddAContainerClick(e);
       e.stopPropagation();
     }
-  })), /*#__PURE__*/React.createElement(Stack, fg('enable_medium_size_icons_for_team_link_cards') ? {
+  })), showNewDesign ? /*#__PURE__*/React.createElement(AddContainerCardButton, {
+    type: containerType
+  }) : /*#__PURE__*/React.createElement(Stack, fg('enable_medium_size_icons_for_team_link_cards') ? {
     space: 'space.025'
   } : {}, /*#__PURE__*/React.createElement(Text, {
     maxLines: 1,
@@ -82,22 +86,27 @@ export const AddContainerCard = ({
 };
 export const getAddContainerCards = ({
   containers,
-  onAddAContainerClick
+  onAddAContainerClick,
+  showNewDesign
 }) => {
   return /*#__PURE__*/React.createElement(React.Fragment, null, containers.Jira.canAdd && /*#__PURE__*/React.createElement(AddContainerCard, {
     onAddAContainerClick: e => onAddAContainerClick(e, 'Jira'),
     containerType: "JiraProject",
-    isLoading: containers.Jira.isLoading
+    isLoading: containers.Jira.isLoading,
+    showNewDesign: showNewDesign
   }), containers.Confluence.canAdd && /*#__PURE__*/React.createElement(AddContainerCard, {
     onAddAContainerClick: e => onAddAContainerClick(e, 'Confluence'),
     containerType: "ConfluenceSpace",
-    isLoading: containers.Confluence.isLoading
+    isLoading: containers.Confluence.isLoading,
+    showNewDesign: showNewDesign
   }), containers.Loom.canAdd && fg('loom_tab_in_container_linker_team_profile_page') && /*#__PURE__*/React.createElement(AddContainerCard, {
     onAddAContainerClick: e => onAddAContainerClick(e, 'Loom'),
     containerType: "LoomSpace",
-    isLoading: containers.Loom.isLoading
+    isLoading: containers.Loom.isLoading,
+    showNewDesign: showNewDesign
   }), containers.WebLink.canAdd && /*#__PURE__*/React.createElement(AddContainerCard, {
     onAddAContainerClick: e => onAddAContainerClick(e, 'WebLink'),
-    containerType: "WebLink"
+    containerType: "WebLink",
+    showNewDesign: showNewDesign
   }));
 };

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

@@ -2,6 +2,7 @@ import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { defineMessages, FormattedMessage } from 'react-intl-next';
 import { useAnalyticsEvents } from '@atlaskit/analytics-next';
 import Button from '@atlaskit/button/new';
+import FeatureGates from '@atlaskit/feature-gate-js-client';
 import ModalTransition from '@atlaskit/modal-dialog/modal-transition';
 import { fg } from '@atlaskit/platform-feature-flags';
 // eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- to be migrated to @atlaskit/primitives/compiled – go/akcss
@@ -115,6 +116,16 @@ export const TeamContainers = ({
     enabled: !fg('migrate-product-permissions')
   });
   useRefreshOnContainerCreated(teamId);
+  const hasPermissionToCreateContainer = useMemo(() => {
+    if (!productPermissions) {
+      return {};
+    }
+    const getPermission = (product, permission) => {
+      return productPermissions && hasProductPermission(productPermissions, product, permission);
+    };
+    return getPermission('confluence', ['CREATE_SPACE']) || getPermission('jira', ['CREATE_PROJECT']) || getPermission('loom', ['write']);
+  }, [productPermissions]);
+  const createContainerExperimentEnabled = hasPermissionToCreateContainer && FeatureGates.initializeCompleted() && FeatureGates.getExperimentValue('teams_app_auto_container_creation', 'isEnabled', false);
   useEffect(() => {
     if (isDisplayedOnProfileCard && filterContainerId) {
       setFilteredTeamLinks(teamLinks.filter(container => container.id !== filterContainerId && !requestedContainers.includes(container.type)));
@@ -265,7 +276,8 @@ export const TeamContainers = ({
     });
   }), getAddContainerCards({
     containers: availableContainers,
-    onAddAContainerClick: onAddAContainerClick
+    onAddAContainerClick: onAddAContainerClick,
+    showNewDesign: createContainerExperimentEnabled
   }), showMore && filteredTeamLinks.slice(maxNumberOfContainersToShow).map(container => {
     return /*#__PURE__*/React.createElement(LinkedContainerCardComponent, {
       key: container.id,

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

@@ -8,7 +8,11 @@ var actions = {
       var setState = _ref.setState,
         getState = _ref.getState;
       var containers = getState();
-      setState(_objectSpread(_objectSpread({}, containers), {}, _defineProperty({}, product, _objectSpread(_objectSpread({}, containers[product]), {}, {
+      var current = containers[product];
+      if (current.isLoading === isLoading) {
+        return;
+      }
+      setState(_objectSpread(_objectSpread({}, containers), {}, _defineProperty({}, product, _objectSpread(_objectSpread({}, current), {}, {
         isLoading: isLoading
       }))));
     };
@@ -18,8 +22,14 @@ var actions = {
       var setState = _ref2.setState,
         getState = _ref2.getState;
       var containers = getState();
-      setState(_objectSpread(_objectSpread({}, containers), {}, _defineProperty({}, product, _objectSpread(_objectSpread({}, containers[product]), {}, {
-        isCreated: isCreated
+      var current = containers[product];
+      if (current.isCreated === isCreated) {
+        return;
+      }
+      var isLoading = isCreated ? false : current.isLoading;
+      setState(_objectSpread(_objectSpread({}, containers), {}, _defineProperty({}, product, _objectSpread(_objectSpread({}, current), {}, {
+        isCreated: isCreated,
+        isLoading: isLoading
       }))));
     };
   }

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

@@ -0,0 +1,87 @@
+import React from 'react';
+import { defineMessages, FormattedMessage } from 'react-intl-next';
+import { Flex, Stack, Text } from '@atlaskit/primitives/compiled';
+function AddContainerCardButton(_ref) {
+  var type = _ref.type;
+  var _getContainerProperti = getContainerProperties(type),
+    title = _getContainerProperti.title,
+    description = _getContainerProperti.description;
+  return /*#__PURE__*/React.createElement(Stack, null, /*#__PURE__*/React.createElement(Text, {
+    maxLines: 1,
+    weight: "medium",
+    color: "color.text"
+  }, title), /*#__PURE__*/React.createElement(Flex, {
+    gap: "space.050",
+    alignItems: "center"
+  }, /*#__PURE__*/React.createElement(Text, {
+    size: "small",
+    color: "color.text.subtle"
+  }, description)));
+}
+function getContainerProperties(type) {
+  switch (type) {
+    case 'ConfluenceSpace':
+      return {
+        description: /*#__PURE__*/React.createElement(FormattedMessage, messages.confluenceContainerDescription),
+        title: /*#__PURE__*/React.createElement(FormattedMessage, messages.addConfluenceContainerTitle)
+      };
+    case 'LoomSpace':
+      return {
+        description: /*#__PURE__*/React.createElement(FormattedMessage, messages.loomSpaceDescription),
+        title: /*#__PURE__*/React.createElement(FormattedMessage, messages.addLoomContainerTitle)
+      };
+    case 'JiraProject':
+      return {
+        description: /*#__PURE__*/React.createElement(FormattedMessage, messages.jiraProjectDescription),
+        title: /*#__PURE__*/React.createElement(FormattedMessage, messages.addJiraProjectTitle)
+      };
+    case 'WebLink':
+      return {
+        description: null,
+        title: /*#__PURE__*/React.createElement(FormattedMessage, messages.addWebLinkTitle)
+      };
+    default:
+      return {
+        description: null,
+        title: null
+      };
+  }
+}
+var messages = defineMessages({
+  addConfluenceContainerTitle: {
+    id: 'ptc-directory.team-profile-page.team-containers.create.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.create.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.create.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.create.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.create.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.create.add-jira-project-description',
+    defaultMessage: 'Plan out project tasks',
+    description: 'Description of the card to add a Jira project to a team'
+  },
+  addWebLinkTitle: {
+    id: 'ptc-directory.team-profile-page.team-containers.create.add-web-link-title',
+    defaultMessage: 'Add any web link',
+    description: 'Title of the card to add a any web link to a team'
+  }
+});
+export { AddContainerCardButton };

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

@@ -10,6 +10,7 @@ import { fg } from '@atlaskit/platform-feature-flags';
 import { Box, Flex, Inline, Stack, Text } from '@atlaskit/primitives/compiled';
 import { LinkedContainerCardSkeleton } from '../../../common/ui/team-containers-skeleton/linked-container-card-skeleton';
 import { getContainerProperties } from '../../../common/utils/get-container-properties';
+import { AddContainerCardButton } from './add-container-card-button';
 var styles = {
   card: "_4cvr1h6o _1bsb1osq",
   container: "_2rkoop52 _ca0qutpp _u5f3utpp _n3tdutpp _19bvutpp _d0altlke",
@@ -40,7 +41,9 @@ export var AddContainerCard = function AddContainerCard(_ref2) {
   var containerType = _ref2.containerType,
     onAddAContainerClick = _ref2.onAddAContainerClick,
     _ref2$isLoading = _ref2.isLoading,
-    isLoading = _ref2$isLoading === void 0 ? false : _ref2$isLoading;
+    isLoading = _ref2$isLoading === void 0 ? false : _ref2$isLoading,
+    _ref2$showNewDesign = _ref2.showNewDesign,
+    showNewDesign = _ref2$showNewDesign === void 0 ? false : _ref2$showNewDesign;
   var _getContainerProperti = getContainerProperties({
       containerType: containerType,
       iconSize: fg('enable_medium_size_icons_for_team_link_cards') ? 'medium' : undefined,
@@ -74,7 +77,9 @@ export var AddContainerCard = function AddContainerCard(_ref2) {
       onAddAContainerClick(e);
       e.stopPropagation();
     }
-  })), /*#__PURE__*/React.createElement(Stack, fg('enable_medium_size_icons_for_team_link_cards') ? {
+  })), showNewDesign ? /*#__PURE__*/React.createElement(AddContainerCardButton, {
+    type: containerType
+  }) : /*#__PURE__*/React.createElement(Stack, fg('enable_medium_size_icons_for_team_link_cards') ? {
     space: 'space.025'
   } : {}, /*#__PURE__*/React.createElement(Text, {
     maxLines: 1,
@@ -90,29 +95,34 @@ export var AddContainerCard = function AddContainerCard(_ref2) {
 };
 export var getAddContainerCards = function getAddContainerCards(_ref3) {
   var containers = _ref3.containers,
-    _onAddAContainerClick = _ref3.onAddAContainerClick;
+    _onAddAContainerClick = _ref3.onAddAContainerClick,
+    showNewDesign = _ref3.showNewDesign;
   return /*#__PURE__*/React.createElement(React.Fragment, null, containers.Jira.canAdd && /*#__PURE__*/React.createElement(AddContainerCard, {
     onAddAContainerClick: function onAddAContainerClick(e) {
       return _onAddAContainerClick(e, 'Jira');
     },
     containerType: "JiraProject",
-    isLoading: containers.Jira.isLoading
+    isLoading: containers.Jira.isLoading,
+    showNewDesign: showNewDesign
   }), containers.Confluence.canAdd && /*#__PURE__*/React.createElement(AddContainerCard, {
     onAddAContainerClick: function onAddAContainerClick(e) {
       return _onAddAContainerClick(e, 'Confluence');
     },
     containerType: "ConfluenceSpace",
-    isLoading: containers.Confluence.isLoading
+    isLoading: containers.Confluence.isLoading,
+    showNewDesign: showNewDesign
   }), containers.Loom.canAdd && fg('loom_tab_in_container_linker_team_profile_page') && /*#__PURE__*/React.createElement(AddContainerCard, {
     onAddAContainerClick: function onAddAContainerClick(e) {
       return _onAddAContainerClick(e, 'Loom');
     },
     containerType: "LoomSpace",
-    isLoading: containers.Loom.isLoading
+    isLoading: containers.Loom.isLoading,
+    showNewDesign: showNewDesign
   }), containers.WebLink.canAdd && /*#__PURE__*/React.createElement(AddContainerCard, {
     onAddAContainerClick: function onAddAContainerClick(e) {
       return _onAddAContainerClick(e, 'WebLink');
     },
-    containerType: "WebLink"
+    containerType: "WebLink",
+    showNewDesign: showNewDesign
   }));
 };

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

@@ -8,6 +8,7 @@ import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { defineMessages, FormattedMessage } from 'react-intl-next';
 import { useAnalyticsEvents } from '@atlaskit/analytics-next';
 import Button from '@atlaskit/button/new';
+import FeatureGates from '@atlaskit/feature-gate-js-client';
 import ModalTransition from '@atlaskit/modal-dialog/modal-transition';
 import { fg } from '@atlaskit/platform-feature-flags';
 // eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- to be migrated to @atlaskit/primitives/compiled – go/akcss
@@ -138,6 +139,16 @@ export var TeamContainers = function TeamContainers(_ref) {
     productPermissionsOld = _useProductPermission2.data,
     productPermissionIsLoadingOld = _useProductPermission2.loading;
   useRefreshOnContainerCreated(teamId);
+  var hasPermissionToCreateContainer = useMemo(function () {
+    if (!productPermissions) {
+      return {};
+    }
+    var getPermission = function getPermission(product, permission) {
+      return productPermissions && hasProductPermission(productPermissions, product, permission);
+    };
+    return getPermission('confluence', ['CREATE_SPACE']) || getPermission('jira', ['CREATE_PROJECT']) || getPermission('loom', ['write']);
+  }, [productPermissions]);
+  var createContainerExperimentEnabled = hasPermissionToCreateContainer && FeatureGates.initializeCompleted() && FeatureGates.getExperimentValue('teams_app_auto_container_creation', 'isEnabled', false);
   useEffect(function () {
     if (isDisplayedOnProfileCard && filterContainerId) {
       setFilteredTeamLinks(teamLinks.filter(function (container) {
@@ -324,7 +335,8 @@ export var TeamContainers = function TeamContainers(_ref) {
     });
   }), getAddContainerCards({
     containers: availableContainers,
-    onAddAContainerClick: onAddAContainerClick
+    onAddAContainerClick: onAddAContainerClick,
+    showNewDesign: createContainerExperimentEnabled
   }), showMore && filteredTeamLinks.slice(maxNumberOfContainersToShow).map(function (container) {
     return /*#__PURE__*/React.createElement(LinkedContainerCardComponent, {
       key: container.id,

package/dist/types/ui/team-containers/add-container-card/add-container-card-button/index.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import type { ContainerTypes } from '../../../../common/types';
+declare function AddContainerCardButton({ type }: {
+    type: ContainerTypes;
+}): React.JSX.Element;
+export { AddContainerCardButton };

package/dist/types/ui/team-containers/add-container-card/index.d.ts

@@ -4,8 +4,9 @@ interface AddContainerCardProps {
     containerType: ContainerTypes;
     onAddAContainerClick: (e: React.MouseEvent<HTMLButtonElement>) => void;
     isLoading?: boolean;
+    showNewDesign?: boolean;
 }
-export declare const AddContainerCard: ({ containerType, onAddAContainerClick, isLoading, }: AddContainerCardProps) => React.JSX.Element;
+export declare const AddContainerCard: ({ containerType, onAddAContainerClick, isLoading, showNewDesign, }: AddContainerCardProps) => React.JSX.Element;
 type Container = {
     canAdd: boolean;
     isLoading: boolean;
@@ -18,6 +19,7 @@ type GetAddContainerCardsProps = {
         WebLink: Container;
     };
     onAddAContainerClick: (e: React.MouseEvent<HTMLButtonElement>, containerType: 'Confluence' | 'Jira' | 'Loom' | 'WebLink') => void;
+    showNewDesign?: boolean;
 };
-export declare const getAddContainerCards: ({ containers, onAddAContainerClick, }: GetAddContainerCardsProps) => React.JSX.Element;
+export declare const getAddContainerCards: ({ containers, onAddAContainerClick, showNewDesign, }: GetAddContainerCardsProps) => React.JSX.Element;
 export {};

package/dist/types-ts4.5/ui/team-containers/add-container-card/add-container-card-button/index.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import type { ContainerTypes } from '../../../../common/types';
+declare function AddContainerCardButton({ type }: {
+    type: ContainerTypes;
+}): React.JSX.Element;
+export { AddContainerCardButton };

package/dist/types-ts4.5/ui/team-containers/add-container-card/index.d.ts

@@ -4,8 +4,9 @@ interface AddContainerCardProps {
     containerType: ContainerTypes;
     onAddAContainerClick: (e: React.MouseEvent<HTMLButtonElement>) => void;
     isLoading?: boolean;
+    showNewDesign?: boolean;
 }
-export declare const AddContainerCard: ({ containerType, onAddAContainerClick, isLoading, }: AddContainerCardProps) => React.JSX.Element;
+export declare const AddContainerCard: ({ containerType, onAddAContainerClick, isLoading, showNewDesign, }: AddContainerCardProps) => React.JSX.Element;
 type Container = {
     canAdd: boolean;
     isLoading: boolean;
@@ -18,6 +19,7 @@ type GetAddContainerCardsProps = {
         WebLink: Container;
     };
     onAddAContainerClick: (e: React.MouseEvent<HTMLButtonElement>, containerType: 'Confluence' | 'Jira' | 'Loom' | 'WebLink') => void;
+    showNewDesign?: boolean;
 };
-export declare const getAddContainerCards: ({ containers, onAddAContainerClick, }: GetAddContainerCardsProps) => React.JSX.Element;
+export declare const getAddContainerCards: ({ containers, onAddAContainerClick, showNewDesign, }: GetAddContainerCardsProps) => React.JSX.Element;
 export {};

package/i18n/package.json

@@ -8,7 +8,7 @@
   ],
   "types": "../dist/types/i18n/index.d.ts",
   "typesVersions": {
-    ">=4.5 <5.4": {
+    ">=4.5 <5.9": {
       "*": [
         "../dist/types-ts4.5/i18n/index.d.ts"
       ]

package/loom-avatar/package.json

@@ -8,7 +8,7 @@
   ],
   "types": "../dist/types/common/ui/loom-avatar/index.d.ts",
   "typesVersions": {
-    ">=4.5 <5.4": {
+    ">=4.5 <5.9": {
       "*": [
         "../dist/types-ts4.5/common/ui/loom-avatar/index.d.ts"
       ]

package/package.json

@@ -117,7 +117,7 @@
 		}
 	},
 	"name": "@atlaskit/teams-public",
-	"version": "0.54.0",
+	"version": "0.54.2",
 	"description": "Public components related to teams",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",

package/team-containers/package.json

@@ -8,7 +8,7 @@
   ],
   "types": "../dist/types/ui/team-containers/index.d.ts",
   "typesVersions": {
-    ">=4.5 <5.4": {
+    ">=4.5 <5.9": {
       "*": [
         "../dist/types-ts4.5/ui/team-containers/index.d.ts"
       ]