@atlaskit/teams-public 0.49.0 → 0.50.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/teams-public
 
+## 0.50.0
+
+### Minor Changes
+
+- [#189223](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/189223)
+  [`2b465d07bf40a`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/2b465d07bf40a) -
+  Update useRequestedContainers to support try again behaviour
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 0.49.0
 
 ### Minor Changes

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

@@ -1,18 +1,22 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useRequestedContainers = useRequestedContainers;
 var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
-var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-var _react = require("react");
+var _react = _interopRequireWildcard(require("react"));
 var _reactIntlNext = require("react-intl-next");
+var _linkExternal = _interopRequireDefault(require("@atlaskit/icon/core/link-external"));
+var _compiled = require("@atlaskit/primitives/compiled");
+var _teamsClient = require("@atlaskit/teams-client");
 var _useTeamContainers2 = require("../use-team-containers");
 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); }
 /**
  * Hook to track and poll for requested product containers (such as a Jira Project).
  * The initial list of requested containers is derived from the URL parameters, however it can be updated based on user interactions.
@@ -27,48 +31,198 @@ var _utils = require("./utils");
  */
 function useRequestedContainers(_ref) {
   var teamId = _ref.teamId,
+    cloudId = _ref.cloudId,
     onRequestedContainerTimeout = _ref.onRequestedContainerTimeout;
   var _useIntl = (0, _reactIntlNext.useIntl)(),
     formatMessage = _useIntl.formatMessage;
   var _useTeamContainers = (0, _useTeamContainers2.useTeamContainers)(teamId),
     refetchTeamContainers = _useTeamContainers.refetchTeamContainers,
     teamContainers = _useTeamContainers.teamContainers;
-  var _useState = (0, _react.useState)(function () {
-      return (0, _utils.userCanAccessFeature)() ? (0, _utils.getRequestedContainersFromUrl)() : [];
-    }),
+  var _useState = (0, _react.useState)(false),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-    requestedContainers = _useState2[0],
-    setRequestedContainers = _useState2[1];
+    isTryingAgain = _useState2[0],
+    setIsTryingAgain = _useState2[1];
+  var tryAgainCountRef = (0, _react.useRef)(0);
+  var _useState3 = (0, _react.useState)(0),
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    refetchErrorCount = _useState4[0],
+    setRefetchErrorCount = _useState4[1];
+  var _useState5 = (0, _react.useState)(function () {
+      return (0, _utils.getRequestedContainersFromUrl)();
+    }),
+    _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+    requestedContainers = _useState6[0],
+    setRequestedContainers = _useState6[1];
   var checkContainers = (0, _react.useCallback)( /*#__PURE__*/(0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee() {
     return _regenerator.default.wrap(function _callee$(_context) {
       while (1) switch (_context.prev = _context.next) {
         case 0:
-          _context.next = 2;
+          _context.prev = 0;
+          _context.next = 3;
           return refetchTeamContainers();
-        case 2:
+        case 3:
+          _context.next = 8;
+          break;
+        case 5:
+          _context.prev = 5;
+          _context.t0 = _context["catch"](0);
+          setRefetchErrorCount(function (prev) {
+            return prev + 1;
+          });
+        case 8:
         case "end":
           return _context.stop();
       }
-    }, _callee);
+    }, _callee, null, [[0, 5]]);
   })), [refetchTeamContainers]);
-  var _useAsyncPolling = (0, _utils.useAsyncPolling)(checkContainers),
+  var onTimeout = (0, _react.useCallback)(function (_ref3) {
+    var startPolling = _ref3.startPolling,
+      reset = _ref3.reset;
+    if (!onRequestedContainerTimeout) {
+      return;
+    }
+    var flagId = "requested-container-timeout-".concat(requestedContainers.join('-'), "-").concat(tryAgainCountRef.current);
+    var createTryAgainFlag = function createTryAgainFlag(_ref4) {
+      var onAction = _ref4.onAction;
+      return {
+        id: flagId,
+        title: requestedContainers.length === 1 ? formatMessage(messages.timeoutTitle, {
+          container: (0, _utils.containerDisplayName)(requestedContainers[0])
+        }) : formatMessage(messages.timeoutTitleMultiple),
+        description: formatMessage(messages.timeoutDescription),
+        actions: [{
+          content: formatMessage(messages.timeoutAction),
+          onClick: function onClick() {
+            onAction(flagId);
+            _tryAgainAction();
+          }
+        }]
+      };
+    };
+    var createContactSupportFlag = function createContactSupportFlag(_ref5) {
+      var onAction = _ref5.onAction;
+      return {
+        id: flagId,
+        title: formatMessage(messages.noConnectionTitle),
+        description: formatMessage(messages.noConnectionDescription),
+        actions: [{
+          content: /*#__PURE__*/_react.default.createElement(_compiled.Flex, {
+            alignItems: "center",
+            columnGap: "space.100"
+          }, formatMessage(messages.noConnectionAction), /*#__PURE__*/_react.default.createElement(_linkExternal.default, {
+            label: ""
+          })),
+          onClick: function onClick() {
+            onAction(flagId);
+          },
+          href: 'https://support.atlassian.com/contact/#/&support_type=customer'
+        }]
+      };
+    };
+    var _tryAgainAction = /*#__PURE__*/function () {
+      var _ref6 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2() {
+        var containers, response, containersNotCreated;
+        return _regenerator.default.wrap(function _callee2$(_context2) {
+          while (1) switch (_context2.prev = _context2.next) {
+            case 0:
+              setIsTryingAgain(true);
+              tryAgainCountRef.current = tryAgainCountRef.current + 1;
+
+              //todo: add analytics event here
+              containers = requestedContainers.map(function (container) {
+                return {
+                  type: (0, _utils.convertContainerToType)(container),
+                  containerSiteId: cloudId
+                };
+              }).filter(function (_ref7) {
+                var type = _ref7.type;
+                return Boolean(type);
+              });
+              _context2.prev = 3;
+              _context2.next = 6;
+              return _teamsClient.teamsClient.createTeamContainers({
+                teamId: teamId,
+                containers: containers
+              });
+            case 6:
+              response = _context2.sent;
+              containersNotCreated = requestedContainers.filter(function (containerType) {
+                var _response$containersC;
+                return !((_response$containersC = response.containersCreated) !== null && _response$containersC !== void 0 && _response$containersC.some(function (container) {
+                  return container.containerType === (0, _utils.convertContainerToType)(containerType);
+                }));
+              }); //containers are still being created
+              if (!(containersNotCreated.length > 0)) {
+                _context2.next = 12;
+                break;
+              }
+              startPolling();
+              _context2.next = 15;
+              break;
+            case 12:
+              //all containers created so reset and update state
+              reset();
+              _context2.next = 15;
+              return refetchTeamContainers();
+            case 15:
+              _context2.next = 24;
+              break;
+            case 17:
+              _context2.prev = 17;
+              _context2.t0 = _context2["catch"](3);
+              if (!(_context2.t0 instanceof _teamsClient.HttpError)) {
+                _context2.next = 23;
+                break;
+              }
+              if (!(_context2.t0.status === 500)) {
+                _context2.next = 23;
+                break;
+              }
+              if (!(tryAgainCountRef.current < 2)) {
+                _context2.next = 23;
+                break;
+              }
+              return _context2.abrupt("return", setTimeout(function () {
+                //bug: this can cause two flags to be shown
+                _tryAgainAction();
+              }, _utils.POLLING_INTERVAL));
+            case 23:
+              onRequestedContainerTimeout(createContactSupportFlag);
+            case 24:
+              _context2.prev = 24;
+              setIsTryingAgain(false);
+              return _context2.finish(24);
+            case 27:
+            case "end":
+              return _context2.stop();
+          }
+        }, _callee2, null, [[3, 17, 24, 27]]);
+      }));
+      return function tryAgainAction() {
+        return _ref6.apply(this, arguments);
+      };
+    }();
+    onRequestedContainerTimeout(tryAgainCountRef.current === 0 ? createTryAgainFlag : createContactSupportFlag);
+  }, [cloudId, formatMessage, onRequestedContainerTimeout, refetchTeamContainers, requestedContainers, teamId]);
+  var _useAsyncPolling = (0, _utils.useAsyncPolling)(checkContainers, {
+      onTimeout: onTimeout
+    }),
     startPolling = _useAsyncPolling.startPolling,
     stopPolling = _useAsyncPolling.stopPolling,
     isPolling = _useAsyncPolling.isPolling,
     hasTimedOut = _useAsyncPolling.hasTimedOut;
-  var checkForContainer = function checkForContainer(container) {
-    if (!requestedContainers.includes(container)) {
-      setRequestedContainers(function (prev) {
-        return [].concat((0, _toConsumableArray2.default)(prev), [container]);
-      });
-    }
-    startPolling();
-  };
   (0, _react.useEffect)(function () {
     if (!(0, _utils.userCanAccessFeature)()) {
       return;
     }
-    if (hasTimedOut) {
+
+    //stop gap to prevent sending too many failed errors
+    if (refetchErrorCount > 3) {
+      stopPolling();
+      //todo: add analytics event here
+      return;
+    }
+    if (hasTimedOut || isTryingAgain) {
       return;
     }
     var containerCount = requestedContainers.length;
@@ -77,9 +231,10 @@ function useRequestedContainers(_ref) {
       return;
     }
     if (!isPolling && containerCount > 0) {
+      setIsTryingAgain(false);
       startPolling();
     }
-  }, [isPolling, requestedContainers.length, hasTimedOut, startPolling, stopPolling]);
+  }, [isPolling, refetchErrorCount, requestedContainers.length, hasTimedOut, startPolling, stopPolling, isTryingAgain]);
   (0, _react.useEffect)(function () {
     var containersNotFound = requestedContainers.filter(function (containerType) {
       return !teamContainers.some(function (teamContainer) {
@@ -90,36 +245,11 @@ function useRequestedContainers(_ref) {
       setRequestedContainers(containersNotFound);
     }
   }, [requestedContainers, checkContainers, teamContainers]);
-  (0, _react.useEffect)(function () {
-    if (hasTimedOut && onRequestedContainerTimeout) {
-      var action = function action() {
-        // @todo: send request to retry creating containers
-        // This will be implemented in the next pull request
-      };
-      var flagId = "requested-container-timeout-".concat(requestedContainers.join('-'));
-      var _createFlag = function _createFlag(_ref3) {
-        var onAction = _ref3.onAction;
-        return {
-          id: flagId,
-          title: requestedContainers.length === 1 ? formatMessage(messages.timeoutTitle, {
-            container: (0, _utils.containerDisplayName)(requestedContainers[0])
-          }) : formatMessage(messages.timeoutTitleMultiple),
-          description: formatMessage(messages.timeoutDescription),
-          actions: [{
-            content: formatMessage(messages.timeoutAction),
-            onClick: function onClick() {
-              action();
-              onAction(flagId);
-            }
-          }]
-        };
-      };
-      onRequestedContainerTimeout(_createFlag);
-    }
-  }, [hasTimedOut, onRequestedContainerTimeout, requestedContainers, formatMessage]);
+  var containersLoading = (0, _react.useMemo)(function () {
+    return hasTimedOut && !isTryingAgain || refetchErrorCount > 3 ? [] : requestedContainers;
+  }, [hasTimedOut, requestedContainers, isTryingAgain, refetchErrorCount]);
   return {
-    requestedContainers: requestedContainers,
-    checkForContainer: checkForContainer
+    requestedContainers: containersLoading
   };
 }
 var messages = (0, _reactIntlNext.defineMessages)({
@@ -134,7 +264,7 @@ var messages = (0, _reactIntlNext.defineMessages)({
     description: 'Title for the timeout flag'
   },
   timeoutDescription: {
-    id: 'teams-public..team-containers.timeout-description',
+    id: 'teams-public.team-containers.timeout-description',
     defaultMessage: 'Something went wrong. Verify your connection and retry.',
     description: 'Description for the timeout flag'
   },
@@ -142,5 +272,20 @@ var messages = (0, _reactIntlNext.defineMessages)({
     id: 'teams-public.team-containers.timeout-action',
     defaultMessage: 'Try again',
     description: 'Action text for the timeout flag'
+  },
+  noConnectionTitle: {
+    id: 'teams-public.team-containers.timeout-no-connection-title',
+    defaultMessage: 'Connection failed',
+    description: 'Title for the no connection flag'
+  },
+  noConnectionDescription: {
+    id: 'teams-public.team-containers.timeout-no-connection-description',
+    defaultMessage: 'Try manually creating the space yourself.',
+    description: 'Description for the no connection flag'
+  },
+  noConnectionAction: {
+    id: 'teams-public.team-containers.timeout-no-connection-action',
+    defaultMessage: 'Contact support',
+    description: 'Action text for the no connection flag'
   }
 });

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

@@ -4,9 +4,10 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.POLLING_INTERVAL = exports.POLLING_DURATION = void 0;
+exports.POLLING_INTERVAL = exports.POLLING_DURATION = exports.CONTAINER_MAP = void 0;
 exports.containerDisplayName = containerDisplayName;
 exports.containersEqual = containersEqual;
+exports.convertContainerToType = convertContainerToType;
 exports.getRequestedContainersFromUrl = getRequestedContainersFromUrl;
 exports.useAsyncPolling = useAsyncPolling;
 exports.userCanAccessFeature = userCanAccessFeature;
@@ -19,7 +20,7 @@ var _react = require("react");
 var _featureGateJsClient = _interopRequireDefault(require("@atlaskit/feature-gate-js-client"));
 var _frontendUtilities = require("@atlaskit/frontend-utilities");
 var _types = require("@atlaskit/teams-client/types");
-var CONTAINER_MAP = (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, _types.ContainerType.CONFLUENCE_SPACE, 'ConfluenceSpace'), _types.ContainerType.JIRA_PROJECT, 'JiraProject'), _types.ContainerType.LOOM_SPACE, 'LoomSpace');
+var CONTAINER_MAP = exports.CONTAINER_MAP = (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, _types.ContainerType.CONFLUENCE_SPACE, 'ConfluenceSpace'), _types.ContainerType.JIRA_PROJECT, 'JiraProject'), _types.ContainerType.LOOM_SPACE, 'LoomSpace');
 var CONTAINER_HUMAN_NAMES = {
   ConfluenceSpace: 'Confluence space',
   JiraProject: 'Jira project',
@@ -32,15 +33,31 @@ function getRequestedContainersFromUrl() {
   var _searchParams$get;
   var searchParams = new URLSearchParams(window.location.search);
   var values = ((_searchParams$get = searchParams.get('requestedContainers')) === null || _searchParams$get === void 0 ? void 0 : _searchParams$get.split(',').filter(Boolean)) || [];
-  return values.filter(function (value) {
+  var containers = values.filter(function (value) {
     return Object.values(_types.ContainerType).includes(value);
   }).map(function (value) {
     return CONTAINER_MAP[value];
   });
+  if (containers.length === 0) {
+    return [];
+  }
+  return userCanAccessFeature() ? containers : [];
 }
 function containerDisplayName(container) {
   return CONTAINER_HUMAN_NAMES[container];
 }
+function convertContainerToType(container) {
+  switch (container) {
+    case 'ConfluenceSpace':
+      return _types.ContainerType.CONFLUENCE_SPACE;
+    case 'JiraProject':
+      return _types.ContainerType.JIRA_PROJECT;
+    case 'LoomSpace':
+      return _types.ContainerType.LOOM_SPACE;
+    default:
+      return null;
+  }
+}
 function userCanAccessFeature() {
   if (_featureGateJsClient.default.initializeCalled()) {
     var value = _featureGateJsClient.default.getExperimentValue('teams_app_auto_container_creation', 'cohort', 'control');
@@ -60,9 +77,12 @@ var POLLING_DURATION = exports.POLLING_DURATION = 10000;
  * Ensures only one callback is pending at a time.
  *
  * @param callback - The async function to poll.
+ * @param onTimeout - Optional callback to execute when polling times out.
  * @returns An object with polling controls and state: startPolling, stopPolling, isPolling, hasTimedOut.
  */
 function useAsyncPolling(callback) {
+  var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
+    onTimeout = _ref.onTimeout;
   var _useState = (0, _react.useState)(false),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     hasTimedOut = _useState2[0],
@@ -85,6 +105,15 @@ function useAsyncPolling(callback) {
     setHasTimedOut(false);
     setIsPending(false);
   }, []);
+  var reset = (0, _react.useCallback)(function () {
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
+      timeoutRef.current = null;
+    }
+    setHasTimedOut(false);
+    setIsPolling(false);
+    setIsPending(false);
+  }, []);
   var startPolling = (0, _react.useCallback)(function () {
     if (timeoutRef.current) {
       clearTimeout(timeoutRef.current);
@@ -96,8 +125,15 @@ function useAsyncPolling(callback) {
     timeoutRef.current = setTimeout(function () {
       stopPolling();
       setHasTimedOut(true);
+      if (onTimeout) {
+        onTimeout({
+          startPolling: startPolling,
+          stopPolling: stopPolling,
+          reset: reset
+        });
+      }
     }, POLLING_DURATION);
-  }, [stopPolling]);
+  }, [stopPolling, onTimeout, reset]);
   var wrappedCallback = (0, _react.useCallback)( /*#__PURE__*/(0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee() {
     return _regenerator.default.wrap(function _callee$(_context) {
       while (1) switch (_context.prev = _context.next) {
@@ -124,6 +160,7 @@ function useAsyncPolling(callback) {
   })), [callback, isPending]);
   (0, _frontendUtilities.useInterval)(isPolling ? wrappedCallback : function () {}, isPolling ? POLLING_INTERVAL : null);
   return {
+    reset: reset,
     startPolling: startPolling,
     stopPolling: stopPolling,
     isPolling: isPolling,

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

@@ -428,14 +428,23 @@ var useTeamContainers = exports.useTeamContainers = function useTeamContainers(t
       actions.fetchTeamContainers(teamId, fireOperationalAnalytics);
     }
   }, [teamId, actions, enable, fireOperationalAnalytics]);
+  var refetchTeamContainers = (0, _react.useCallback)( /*#__PURE__*/(0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee7() {
+    return _regenerator.default.wrap(function _callee7$(_context7) {
+      while (1) switch (_context7.prev = _context7.next) {
+        case 0:
+          return _context7.abrupt("return", actions.refetchTeamContainers(fireOperationalAnalytics));
+        case 1:
+        case "end":
+          return _context7.stop();
+      }
+    }, _callee7);
+  })), [actions, fireOperationalAnalytics]);
   return _objectSpread(_objectSpread({}, state), {}, {
     addTeamContainer: actions.addTeamContainer,
     unlinkTeamContainers: function unlinkTeamContainers(containerId) {
       return actions.unlinkTeamContainers(teamId, containerId);
     },
-    refetchTeamContainers: function refetchTeamContainers() {
-      return actions.refetchTeamContainers(fireOperationalAnalytics);
-    }
+    refetchTeamContainers: refetchTeamContainers
   });
 };
 var useConnectedTeams = exports.useConnectedTeams = function useConnectedTeams() {
@@ -447,12 +456,12 @@ var useConnectedTeams = exports.useConnectedTeams = function useConnectedTeams()
     fireOperationalEvent = _usePeopleAndTeamAnal2.fireOperationalEvent;
   var _useAnalyticsEvents2 = (0, _analyticsNext.useAnalyticsEvents)(),
     createAnalyticsEvent = _useAnalyticsEvents2.createAnalyticsEvent;
-  var fireOperationalAnalytics = (0, _react.useCallback)(function (_ref11) {
-    var action = _ref11.action,
-      actionSubject = _ref11.actionSubject,
-      containerId = _ref11.containerId,
-      numberOfTeams = _ref11.numberOfTeams,
-      error = _ref11.error;
+  var fireOperationalAnalytics = (0, _react.useCallback)(function (_ref12) {
+    var action = _ref12.action,
+      actionSubject = _ref12.actionSubject,
+      containerId = _ref12.containerId,
+      numberOfTeams = _ref12.numberOfTeams,
+      error = _ref12.error;
     fireOperationalEvent(createAnalyticsEvent, {
       action: action,
       actionSubject: actionSubject,

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

@@ -63,6 +63,7 @@ var TeamContainers = exports.TeamContainers = function TeamContainers(_ref) {
     iconHasLoaded = _useTeamLinksAndConta.iconHasLoaded;
   var _useRequestedContaine = (0, _useRequestedContainer.useRequestedContainers)({
       teamId: teamId,
+      cloudId: cloudId,
       onRequestedContainerTimeout: onRequestedContainerTimeout
     }),
     requestedContainers = _useRequestedContaine.requestedContainers;