@atlaskit/teams-public 0.4.0 → 0.5.0

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # @atlaskit/teams-public
 
+## 0.5.0
+
+### Minor Changes
+
+- [#116071](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/116071)
+  [`cd351ff2c2abc`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/cd351ff2c2abc) -
+  Move useProductPermissions to teams-public package
+- [#116370](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/116370)
+  [`83accb97730ab`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/83accb97730ab) -
+  [ux] Add disconnect dialog to the teams container
+
 ## 0.4.0
 
 ### Minor Changes

package/dist/cjs/common/utils/get-container-properties.js

@@ -38,6 +38,16 @@ var messages = exports.messages = (0, _reactIntlNext.defineMessages)({
     id: 'ptc-directory.team-profile-page.team-containers.add-loom-space-description.non-final',
     defaultMessage: 'Loom space',
     description: 'Description of the card to add a Loom space to a team'
+  },
+  projectContainerText: {
+    id: 'ptc-directory.team-profile-page.team-containers.project-container-text.non-final',
+    defaultMessage: 'project',
+    description: 'Text for project type containers'
+  },
+  spaceContainerText: {
+    id: 'ptc-directory.team-profile-page.team-containers.space-container-text.non-final',
+    defaultMessage: 'space',
+    description: 'Text for space type containers'
   }
 });
 var getContainerProperties = exports.getContainerProperties = function getContainerProperties(containerType) {
@@ -50,7 +60,8 @@ var getContainerProperties = exports.getContainerProperties = function getContai
           label: "",
           size: "xsmall"
         }),
-        title: /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, messages.addConfluenceContainerTitle)
+        title: /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, messages.addConfluenceContainerTitle),
+        containerTypeText: /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, messages.spaceContainerText)
       };
     case 'JiraProject':
       return {
@@ -60,13 +71,15 @@ var getContainerProperties = exports.getContainerProperties = function getContai
           label: "",
           size: "xsmall"
         }),
-        title: /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, messages.addJiraProjectTitle)
+        title: /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, messages.addJiraProjectTitle),
+        containerTypeText: /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, messages.projectContainerText)
       };
     default:
       return {
         description: null,
         icon: null,
-        title: null
+        title: null,
+        containerTypeText: null
       };
   }
 };

package/dist/cjs/controllers/hooks/use-team-containers/use-product-permission/index.js

@@ -0,0 +1,50 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useProductPermissions = 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 = require("react");
+var _main = require("../../../product-permission/main");
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var useProductPermissions = exports.useProductPermissions = function useProductPermissions(userId, cloudId) {
+  var permissionId = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'read';
+  var _ref = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {
+      enabled: true
+    },
+    enabled = _ref.enabled;
+  var _useProductPermission = (0, _main.useProductPermissionsStore)(),
+    _useProductPermission2 = (0, _slicedToArray2.default)(_useProductPermission, 2),
+    state = _useProductPermission2[0],
+    getPermissions = _useProductPermission2[1].getPermissions;
+  var fetchData = (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:
+          getPermissions({
+            cloudId: cloudId,
+            userId: userId,
+            enabled: enabled,
+            permissionId: permissionId
+          });
+        case 1:
+        case "end":
+          return _context.stop();
+      }
+    }, _callee);
+  })), [cloudId, enabled, getPermissions, userId, permissionId]);
+  (0, _react.useEffect)(function () {
+    fetchData();
+  }, [fetchData]);
+  return _objectSpread({
+    loading: state.isLoading,
+    data: state.permissions,
+    error: state.error
+  }, state);
+};

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

@@ -0,0 +1,115 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useProductPermissionsStore = void 0;
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+var _reactSweetState = require("react-sweet-state");
+var _utils = require("./utils");
+var actions = {
+  getPermissions: function getPermissions(_ref) {
+    var userId = _ref.userId,
+      cloudId = _ref.cloudId,
+      enabled = _ref.enabled,
+      permissionId = _ref.permissionId;
+    return /*#__PURE__*/function () {
+      var _ref3 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(_ref2) {
+        var setState, getState, dispatch, _getState, hasLoaded, isLoading, response, permissions;
+        return _regenerator.default.wrap(function _callee$(_context) {
+          while (1) switch (_context.prev = _context.next) {
+            case 0:
+              setState = _ref2.setState, getState = _ref2.getState, dispatch = _ref2.dispatch;
+              _getState = getState(), hasLoaded = _getState.hasLoaded, isLoading = _getState.isLoading;
+              if (!(hasLoaded || isLoading || !userId || !cloudId || !enabled)) {
+                _context.next = 4;
+                break;
+              }
+              return _context.abrupt("return");
+            case 4:
+              _context.prev = 4;
+              setState({
+                isLoading: true
+              });
+              _context.next = 8;
+              return fetch('/gateway/api/permissions/bulk/permitted', {
+                headers: {
+                  'Content-Type': 'application/json'
+                },
+                method: 'POST',
+                credentials: 'include',
+                body: (0, _utils.getProductPermissionRequestBody)(cloudId, userId, permissionId)
+              });
+            case 8:
+              response = _context.sent;
+              if (response.ok) {
+                _context.next = 11;
+                break;
+              }
+              throw new Error('Failed to fetch product permissions');
+            case 11:
+              _context.next = 13;
+              return response.json();
+            case 13:
+              permissions = _context.sent;
+              dispatch(actions.setPermissions(permissions));
+              _context.next = 20;
+              break;
+            case 17:
+              _context.prev = 17;
+              _context.t0 = _context["catch"](4);
+              dispatch(actions.setError(new Error('Failed to fetch product permissions')));
+            case 20:
+            case "end":
+              return _context.stop();
+          }
+        }, _callee, null, [[4, 17]]);
+      }));
+      return function (_x) {
+        return _ref3.apply(this, arguments);
+      };
+    }();
+  },
+  setError: function setError(error) {
+    return function (_ref4) {
+      var setState = _ref4.setState;
+      setState({
+        hasLoaded: true,
+        isLoading: false,
+        error: error
+      });
+    };
+  },
+  setLoading: function setLoading(isLoading) {
+    return function (_ref5) {
+      var setState = _ref5.setState;
+      setState({
+        isLoading: isLoading
+      });
+    };
+  },
+  setPermissions: function setPermissions(permissions) {
+    return function (_ref6) {
+      var setState = _ref6.setState;
+      setState({
+        hasLoaded: true,
+        isLoading: false,
+        permissions: (0, _utils.transformPermissions)(permissions),
+        permissionsResponse: permissions
+      });
+    };
+  }
+};
+var Store = (0, _reactSweetState.createStore)({
+  initialState: {
+    error: undefined,
+    hasLoaded: false,
+    isLoading: false,
+    permissions: {}
+  },
+  actions: actions,
+  name: 'product-permissions'
+});
+var useProductPermissionsStore = exports.useProductPermissionsStore = (0, _reactSweetState.createHook)(Store);

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

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

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

@@ -0,0 +1,34 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.transformPermissions = exports.getProductPermissionRequestBody = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var transformPermissions = exports.transformPermissions = function transformPermissions(permissions) {
+  return permissions.reduce(function (acc, permission) {
+    if (permission.resourceId.includes('jira-software')) {
+      acc['jira'] = _objectSpread(_objectSpread({}, acc['jira']), {}, (0, _defineProperty2.default)({}, permission.permissionId, permission.permitted));
+    } else if (permission.resourceId.includes('confluence')) {
+      acc['confluence'] = _objectSpread(_objectSpread({}, acc['confluence']), {}, (0, _defineProperty2.default)({}, permission.permissionId, permission.permitted));
+    }
+    return acc;
+  }, {});
+};
+var getProductPermissionRequestBody = exports.getProductPermissionRequestBody = function getProductPermissionRequestBody(cloudId, userId, permissionId) {
+  var body = [{
+    permissionId: permissionId,
+    resourceId: "ari:cloud:confluence::site/".concat(cloudId),
+    principalId: "ari:cloud:identity::user/".concat(userId),
+    dontRequirePrincipalInSite: true
+  }, {
+    permissionId: permissionId,
+    resourceId: "ari:cloud:jira-software::site/".concat(cloudId),
+    principalId: "ari:cloud:identity::user/".concat(userId),
+    dontRequirePrincipalInSite: true
+  }];
+  return JSON.stringify(body);
+};

package/dist/cjs/ui/team-containers/disconnect-dialog/async.js

@@ -0,0 +1,25 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DisconnectDialogLazy = void 0;
+var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
+var _react = _interopRequireDefault(require("react"));
+var _reactLooselyLazy = require("react-loosely-lazy");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != (0, _typeof2.default)(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+var DisconnectDialogLazyInner = (0, _reactLooselyLazy.lazyForPaint)(function () {
+  return Promise.resolve().then(function () {
+    return _interopRequireWildcard(require( /* webpackChunkName: "@atlaskit-internal_teams-public_disconnect-dialog" */'./index'));
+  }).then(function (_ref) {
+    var DisconnectDialog = _ref.DisconnectDialog;
+    return DisconnectDialog;
+  });
+});
+var DisconnectDialogLazy = exports.DisconnectDialogLazy = function DisconnectDialogLazy(props) {
+  return /*#__PURE__*/_react.default.createElement(_reactLooselyLazy.LazySuspense, {
+    fallback: null
+  }, /*#__PURE__*/_react.default.createElement(DisconnectDialogLazyInner, props));
+};

package/dist/cjs/ui/team-containers/disconnect-dialog/index.js

@@ -0,0 +1,106 @@
+"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.DisconnectDialog = void 0;
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = _interopRequireDefault(require("react"));
+var _reactIntlNext = require("react-intl-next");
+var _new = _interopRequireDefault(require("@atlaskit/button/new"));
+var _modalDialog = _interopRequireWildcard(require("@atlaskit/modal-dialog"));
+var _compiled = require("@atlaskit/primitives/compiled");
+var _getContainerProperties = require("../../../common/utils/get-container-properties");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+var messages = exports.messages = (0, _reactIntlNext.defineMessages)({
+  disconnectDialogTitle: {
+    id: 'ptc-directory.team-profile-page.team-containers.disconnect-dialog.title.non-final',
+    defaultMessage: 'Disconnect place',
+    description: 'Title of the disconnect dialog for team containers'
+  },
+  disconnectDialogDescription: {
+    id: 'ptc-directory.team-profile-page.team-containers.disconnect-dialog.description.non-final',
+    defaultMessage: 'This team will no longer be connected to the {containerName} {containerType}.',
+    description: 'Description of the disconnect dialog for team containers'
+  },
+  disconnectDialogDisclaimer: {
+    id: 'ptc-directory.team-profile-page.team-containers.disconnect-dialog.disclaimer.non-final',
+    defaultMessage: 'Disconnecting the team from the {containerType} will not affect any work connected to the team within the {containerType}.',
+    description: 'Disclaimer of the disconnect dialog for team containers'
+  },
+  disconnectDialogCancelButton: {
+    id: 'ptc-directory.team-profile-page.team-containers.disconnect-dialog.cancel-button.non-final',
+    defaultMessage: 'Cancel',
+    description: 'Button to cancel the dialog'
+  },
+  disconnectDialogRemoveButton: {
+    id: 'ptc-directory.team-profile-page.team-containers.disconnect-dialog.remove-button.non-final',
+    defaultMessage: 'Remove',
+    description: 'Button to disconnect the team from the container'
+  }
+});
+var DisconnectDialog = exports.DisconnectDialog = function DisconnectDialog(_ref) {
+  var containerName = _ref.containerName,
+    containerType = _ref.containerType,
+    onDisconnect = _ref.onDisconnect,
+    onClose = _ref.onClose;
+  var _React$useState = _react.default.useState(false),
+    _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
+    isDisconnecting = _React$useState2[0],
+    setIsDisconnecting = _React$useState2[1];
+  var handleDisconnect = /*#__PURE__*/function () {
+    var _ref2 = (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:
+            setIsDisconnecting(true);
+            _context.next = 3;
+            return onDisconnect();
+          case 3:
+            setIsDisconnecting(false);
+          case 4:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee);
+    }));
+    return function handleDisconnect() {
+      return _ref2.apply(this, arguments);
+    };
+  }();
+  var _getContainerProperti = (0, _getContainerProperties.getContainerProperties)(containerType),
+    containerTypeText = _getContainerProperti.containerTypeText,
+    description = _getContainerProperti.description;
+  return /*#__PURE__*/_react.default.createElement(_modalDialog.default, {
+    onClose: onClose,
+    width: "small",
+    testId: "team-containers-disconnect-dialog",
+    shouldScrollInViewport: true
+  }, /*#__PURE__*/_react.default.createElement(_modalDialog.ModalHeader, null, /*#__PURE__*/_react.default.createElement(_modalDialog.ModalTitle, {
+    appearance: "warning"
+  }, /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, messages.disconnectDialogTitle))), /*#__PURE__*/_react.default.createElement(_modalDialog.ModalBody, null, /*#__PURE__*/_react.default.createElement(_compiled.Stack, {
+    space: "space.150"
+  }, /*#__PURE__*/_react.default.createElement(_compiled.Box, null, /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, (0, _extends2.default)({}, messages.disconnectDialogDescription, {
+    values: {
+      containerName: /*#__PURE__*/_react.default.createElement("b", null, containerName),
+      containerType: description
+    }
+  }))), /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, (0, _extends2.default)({}, messages.disconnectDialogDisclaimer, {
+    values: {
+      containerType: containerTypeText
+    }
+  })))), /*#__PURE__*/_react.default.createElement(_modalDialog.ModalFooter, null, /*#__PURE__*/_react.default.createElement(_new.default, {
+    appearance: "subtle",
+    onClick: onClose
+  }, /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, messages.disconnectDialogCancelButton)), /*#__PURE__*/_react.default.createElement(_new.default, {
+    appearance: "warning",
+    onClick: handleDisconnect,
+    isLoading: isDisconnecting
+  }, /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, messages.disconnectDialogRemoveButton))));
+};

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

@@ -56,7 +56,8 @@ var LinkedContainerCard = exports.LinkedContainerCard = function LinkedContainer
   var containerType = _ref2.containerType,
     title = _ref2.title,
     containerIcon = _ref2.containerIcon,
-    link = _ref2.link;
+    link = _ref2.link,
+    onDisconnectButtonClick = _ref2.onDisconnectButtonClick;
   var _getContainerProperti = (0, _getContainerProperties.getContainerProperties)(containerType),
     description = _getContainerProperti.description,
     icon = _getContainerProperti.icon;
@@ -82,6 +83,7 @@ var LinkedContainerCard = exports.LinkedContainerCard = function LinkedContainer
       spacing: "compact",
       onClick: function onClick(e) {
         e.preventDefault();
+        onDisconnectButtonClick();
       }
     })),
     href: link,

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

@@ -10,10 +10,12 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 var _react = _interopRequireWildcard(require("react"));
 var _reactIntlNext = require("react-intl-next");
 var _new = _interopRequireDefault(require("@atlaskit/button/new"));
+var _modalTransition = _interopRequireDefault(require("@atlaskit/modal-dialog/modal-transition"));
 var _primitives = require("@atlaskit/primitives");
 var _colors = require("@atlaskit/theme/colors");
 var _useTeamContainers2 = require("../../controllers/hooks/use-team-containers");
 var _addContainerCard = require("./add-container-card");
+var _async = require("./disconnect-dialog/async");
 var _linkedContainerCard = require("./linked-container-card");
 var _teamContainersSkeleton = require("./team-containers-skeleton");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
@@ -39,6 +41,10 @@ var TeamContainers = exports.TeamContainers = function TeamContainers(_ref) {
     _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
     showMore = _useState6[0],
     setShowMore = _useState6[1];
+  var _useState7 = (0, _react.useState)(false),
+    _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
+    isDisconnectDialogOpen = _useState8[0],
+    setIsDisconnectDialogOpen = _useState8[1];
   (0, _react.useEffect)(function () {
     if (teamContainers.length > MAX_NUMBER_OF_CONTAINERS_TO_SHOW) {
       setShowAddJiraContainer(false);
@@ -62,7 +68,7 @@ var TeamContainers = exports.TeamContainers = function TeamContainers(_ref) {
       numberOfContainers: MAX_NUMBER_OF_CONTAINERS_TO_SHOW
     });
   }
-  return /*#__PURE__*/_react.default.createElement(_primitives.Stack, {
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_primitives.Stack, {
     space: "space.200"
   }, /*#__PURE__*/_react.default.createElement(_primitives.Grid, {
     templateColumns: "1fr 1fr",
@@ -74,7 +80,10 @@ var TeamContainers = exports.TeamContainers = function TeamContainers(_ref) {
       containerType: container.type,
       title: container.name,
       containerIcon: container.icon,
-      link: container.link
+      link: container.link,
+      onDisconnectButtonClick: function onDisconnectButtonClick() {
+        return setIsDisconnectDialogOpen(true);
+      }
     });
   }), showAddJiraContainer && /*#__PURE__*/_react.default.createElement(_addContainerCard.AddContainerCard, {
     onAddAContainerClick: onAddAContainerClick,
@@ -88,12 +97,26 @@ var TeamContainers = exports.TeamContainers = function TeamContainers(_ref) {
       containerType: container.type,
       title: container.name,
       containerIcon: container.icon,
-      link: container.link
+      link: container.link,
+      onDisconnectButtonClick: function onDisconnectButtonClick() {
+        return setIsDisconnectDialogOpen(true);
+      }
     });
   })), teamContainers.length > MAX_NUMBER_OF_CONTAINERS_TO_SHOW && /*#__PURE__*/_react.default.createElement(_primitives.Inline, null, /*#__PURE__*/_react.default.createElement(_new.default, {
     appearance: "subtle",
     onClick: handleShowMore
-  }, showMore ? /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, messages.showLess) : /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, messages.showMore))));
+  }, showMore ? /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, messages.showLess) : /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, messages.showMore)))), /*#__PURE__*/_react.default.createElement(_modalTransition.default, null, isDisconnectDialogOpen && /*#__PURE__*/_react.default.createElement(_async.DisconnectDialogLazy, {
+    containerName: "something",
+    containerType: "ConfluenceSpace",
+    onClose: function onClose() {
+      return setIsDisconnectDialogOpen(false);
+    }
+    // TODO: hook the mutation
+    ,
+    onDisconnect: function onDisconnect() {
+      return Promise.resolve();
+    }
+  })));
 };
 var messages = (0, _reactIntlNext.defineMessages)({
   showMore: {

package/dist/es2019/common/utils/get-container-properties.js

@@ -31,6 +31,16 @@ export const messages = defineMessages({
     id: 'ptc-directory.team-profile-page.team-containers.add-loom-space-description.non-final',
     defaultMessage: 'Loom space',
     description: 'Description of the card to add a Loom space to a team'
+  },
+  projectContainerText: {
+    id: 'ptc-directory.team-profile-page.team-containers.project-container-text.non-final',
+    defaultMessage: 'project',
+    description: 'Text for project type containers'
+  },
+  spaceContainerText: {
+    id: 'ptc-directory.team-profile-page.team-containers.space-container-text.non-final',
+    defaultMessage: 'space',
+    description: 'Text for space type containers'
   }
 });
 export const getContainerProperties = containerType => {
@@ -43,7 +53,8 @@ export const getContainerProperties = containerType => {
           label: "",
           size: "xsmall"
         }),
-        title: /*#__PURE__*/React.createElement(FormattedMessage, messages.addConfluenceContainerTitle)
+        title: /*#__PURE__*/React.createElement(FormattedMessage, messages.addConfluenceContainerTitle),
+        containerTypeText: /*#__PURE__*/React.createElement(FormattedMessage, messages.spaceContainerText)
       };
     case 'JiraProject':
       return {
@@ -53,13 +64,15 @@ export const getContainerProperties = containerType => {
           label: "",
           size: "xsmall"
         }),
-        title: /*#__PURE__*/React.createElement(FormattedMessage, messages.addJiraProjectTitle)
+        title: /*#__PURE__*/React.createElement(FormattedMessage, messages.addJiraProjectTitle),
+        containerTypeText: /*#__PURE__*/React.createElement(FormattedMessage, messages.projectContainerText)
       };
     default:
       return {
         description: null,
         icon: null,
-        title: null
+        title: null,
+        containerTypeText: null
       };
   }
 };

package/dist/es2019/controllers/hooks/use-team-containers/use-product-permission/index.js

@@ -0,0 +1,28 @@
+import { useCallback, useEffect } from 'react';
+import { useProductPermissionsStore } from '../../../product-permission/main';
+export const useProductPermissions = (userId, cloudId, permissionId = 'read', {
+  enabled
+} = {
+  enabled: true
+}) => {
+  const [state, {
+    getPermissions
+  }] = useProductPermissionsStore();
+  const fetchData = useCallback(async () => {
+    getPermissions({
+      cloudId,
+      userId,
+      enabled,
+      permissionId
+    });
+  }, [cloudId, enabled, getPermissions, userId, permissionId]);
+  useEffect(() => {
+    fetchData();
+  }, [fetchData]);
+  return {
+    loading: state.isLoading,
+    data: state.permissions,
+    error: state.error,
+    ...state
+  };
+};

package/dist/es2019/controllers/product-permission/main.js

@@ -0,0 +1,79 @@
+import { createHook, createStore } from 'react-sweet-state';
+import { getProductPermissionRequestBody, transformPermissions } from './utils';
+const actions = {
+  getPermissions: ({
+    userId,
+    cloudId,
+    enabled,
+    permissionId
+  }) => async ({
+    setState,
+    getState,
+    dispatch
+  }) => {
+    const {
+      hasLoaded,
+      isLoading
+    } = getState();
+    if (hasLoaded || isLoading || !userId || !cloudId || !enabled) {
+      return;
+    }
+    try {
+      setState({
+        isLoading: true
+      });
+      const response = await fetch('/gateway/api/permissions/bulk/permitted', {
+        headers: {
+          'Content-Type': 'application/json'
+        },
+        method: 'POST',
+        credentials: 'include',
+        body: getProductPermissionRequestBody(cloudId, userId, permissionId)
+      });
+      if (!response.ok) {
+        throw new Error('Failed to fetch product permissions');
+      }
+      const permissions = await response.json();
+      dispatch(actions.setPermissions(permissions));
+    } catch (error) {
+      dispatch(actions.setError(new Error('Failed to fetch product permissions')));
+    }
+  },
+  setError: error => ({
+    setState
+  }) => {
+    setState({
+      hasLoaded: true,
+      isLoading: false,
+      error
+    });
+  },
+  setLoading: isLoading => ({
+    setState
+  }) => {
+    setState({
+      isLoading
+    });
+  },
+  setPermissions: permissions => ({
+    setState
+  }) => {
+    setState({
+      hasLoaded: true,
+      isLoading: false,
+      permissions: transformPermissions(permissions),
+      permissionsResponse: permissions
+    });
+  }
+};
+const Store = createStore({
+  initialState: {
+    error: undefined,
+    hasLoaded: false,
+    isLoading: false,
+    permissions: {}
+  },
+  actions,
+  name: 'product-permissions'
+});
+export const useProductPermissionsStore = createHook(Store);

package/dist/es2019/controllers/product-permission/types.js

@@ -0,0 +1 @@
+export {};