@atlaskit/teams-public 0.2.0 → 0.3.0

package/dist/cjs/services/constants.js

@@ -0,0 +1,9 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DEFAULT_CONFIG = void 0;
+var DEFAULT_CONFIG = exports.DEFAULT_CONFIG = {
+  stargateRoot: '/gateway/api'
+};

package/dist/cjs/services/graphql-client/index.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "BaseGraphQlClient", {
+  enumerable: true,
+  get: function get() {
+    return _main.BaseGraphQlClient;
+  }
+});
+var _main = require("./main");

package/dist/cjs/services/graphql-client/main.js

@@ -0,0 +1,69 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.BaseGraphQlClient = void 0;
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+var _error = require("../../common/utils/error");
+var _baseClient = require("../base-client");
+var _utils = require("./utils");
+function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2.default)(o), (0, _possibleConstructorReturn2.default)(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2.default)(t).constructor) : o.apply(t, e)); }
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
+var BaseGraphQlClient = exports.BaseGraphQlClient = /*#__PURE__*/function (_BaseClient) {
+  function BaseGraphQlClient(serviceUrl, config) {
+    var _this;
+    (0, _classCallCheck2.default)(this, BaseGraphQlClient);
+    _this = _callSuper(this, BaseGraphQlClient, [config]);
+    _this.serviceUrl = serviceUrl;
+    return _this;
+  }
+  (0, _inherits2.default)(BaseGraphQlClient, _BaseClient);
+  return (0, _createClass2.default)(BaseGraphQlClient, [{
+    key: "setServiceUrl",
+    value: function setServiceUrl(serviceUrl) {
+      this.serviceUrl = serviceUrl;
+    }
+  }, {
+    key: "makeGraphQLRequest",
+    value: function () {
+      var _makeGraphQLRequest = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(body) {
+        var options,
+          _args = arguments;
+        return _regenerator.default.wrap(function _callee$(_context) {
+          while (1) switch (_context.prev = _context.next) {
+            case 0:
+              options = _args.length > 1 && _args[1] !== undefined ? _args[1] : {};
+              _context.prev = 1;
+              return _context.abrupt("return", (0, _utils.handleGraphQLRequest)(this.serviceUrl, body, options));
+            case 5:
+              _context.prev = 5;
+              _context.t0 = _context["catch"](1);
+              if (!(_context.t0 instanceof _error.GraphQLError)) {
+                _context.next = 9;
+                break;
+              }
+              throw _context.t0;
+            case 9:
+              this.logException(_context.t0, 'UnknownError in GraphQLClient.makeGraphQLRequestWithoutRetries');
+              throw new _error.DefaultError({});
+            case 11:
+            case "end":
+              return _context.stop();
+          }
+        }, _callee, this, [[1, 5]]);
+      }));
+      function makeGraphQLRequest(_x) {
+        return _makeGraphQLRequest.apply(this, arguments);
+      }
+      return makeGraphQLRequest;
+    }()
+  }]);
+}(_baseClient.BaseClient);

package/dist/cjs/services/graphql-client/types.js

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

package/dist/cjs/services/graphql-client/utils/index.js

@@ -0,0 +1,157 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.handleGraphQLRequest = handleGraphQLRequest;
+exports.makeGraphQLRequestWithoutRetries = makeGraphQLRequestWithoutRetries;
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+var _error = require("../../../common/utils/error");
+var _http = require("../../../common/utils/http");
+var _statusCodeHandlersProvider = require("../../../common/utils/status-code-handlers-provider");
+function makeGraphQLRequestWithoutRetries(_x, _x2) {
+  return _makeGraphQLRequestWithoutRetries.apply(this, arguments);
+}
+function _makeGraphQLRequestWithoutRetries() {
+  _makeGraphQLRequestWithoutRetries = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(serviceUrl, body) {
+    var options,
+      operationNameQuery,
+      errorPolicy,
+      url,
+      request,
+      response,
+      errors,
+      _args = arguments;
+    return _regenerator.default.wrap(function _callee$(_context) {
+      while (1) switch (_context.prev = _context.next) {
+        case 0:
+          options = _args.length > 2 && _args[2] !== undefined ? _args[2] : {};
+          operationNameQuery = options.operationName ? "?q=".concat(options.operationName) : '';
+          errorPolicy = options.errorPolicy || 'none';
+          url = serviceUrl + operationNameQuery;
+          request = fetch(url, {
+            method: 'POST',
+            headers: new Headers({
+              'Content-Type': 'application/json'
+            }),
+            credentials: 'include',
+            body: JSON.stringify(body)
+          }).then(function (res) {
+            if (res.status < 300 || res.status === 400) {
+              return res.json();
+            } else {
+              throw res;
+            }
+          });
+          _context.prev = 5;
+          _context.next = 8;
+          return request;
+        case 8:
+          response = _context.sent;
+          errors = response.errors;
+          if (!errors) {
+            _context.next = 17;
+            break;
+          }
+          if (!(errorPolicy === 'none')) {
+            _context.next = 15;
+            break;
+          }
+          throw _error.GraphQLError.from(errors);
+        case 15:
+          if (!(errorPolicy === 'all')) {
+            _context.next = 17;
+            break;
+          }
+          return _context.abrupt("return", new Promise(function (resolve, reject) {
+            setTimeout(function () {
+              reject(_error.GraphQLError.from(errors));
+            }, 0);
+          }));
+        case 17:
+          return _context.abrupt("return", response.data);
+        case 20:
+          _context.prev = 20;
+          _context.t0 = _context["catch"](5);
+          if (!(_context.t0 instanceof Response)) {
+            _context.next = 24;
+            break;
+          }
+          return _context.abrupt("return", {
+            response: _context.t0
+          });
+        case 24:
+          if (!Object(_context.t0).hasOwnProperty('response')) {
+            _context.next = 26;
+            break;
+          }
+          throw _context.t0;
+        case 26:
+          return _context.abrupt("return", _context.t0);
+        case 27:
+        case "end":
+          return _context.stop();
+      }
+    }, _callee, null, [[5, 20]]);
+  }));
+  return _makeGraphQLRequestWithoutRetries.apply(this, arguments);
+}
+function handleGraphQLRequest(_x3, _x4) {
+  return _handleGraphQLRequest.apply(this, arguments);
+}
+function _handleGraphQLRequest() {
+  _handleGraphQLRequest = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2(serviceUrl, body) {
+    var options,
+      makeGraphQLRequestWithRetries,
+      result,
+      response,
+      status,
+      statusText,
+      traceId,
+      _args2 = arguments;
+    return _regenerator.default.wrap(function _callee2$(_context2) {
+      while (1) switch (_context2.prev = _context2.next) {
+        case 0:
+          options = _args2.length > 2 && _args2[2] !== undefined ? _args2[2] : {};
+          makeGraphQLRequestWithRetries = (0, _http.withExponentialBackoff)(makeGraphQLRequestWithoutRetries, {
+            initial: _http.EXPONENTIAL_BACKOFF_RETRY_POLICY.INITIAL_DELAY,
+            jitter: _http.EXPONENTIAL_BACKOFF_RETRY_POLICY.JITTER,
+            max: _http.EXPONENTIAL_BACKOFF_RETRY_POLICY.MAX_RETRIES,
+            retryIf: function retryIf(data) {
+              return (0, _http.isFetchResponse)(data) && (0, _http.is5xx)(data.response.status);
+            }
+          });
+          _context2.next = 4;
+          return makeGraphQLRequestWithRetries(serviceUrl, body, options);
+        case 4:
+          result = _context2.sent;
+          response = result === null || result === void 0 ? void 0 : result.response;
+          if (!response) {
+            _context2.next = 13;
+            break;
+          }
+          status = response.status;
+          statusText = response.statusText;
+          traceId = response.headers.get('atl-traceid');
+          (0, _statusCodeHandlersProvider.handleResponse)(response);
+          if (!(status > 400 && status <= 599)) {
+            _context2.next = 13;
+            break;
+          }
+          throw new _error.HttpError({
+            message: statusText,
+            status: status,
+            traceId: traceId !== null && traceId !== void 0 ? traceId : undefined
+          });
+        case 13:
+          return _context2.abrupt("return", result);
+        case 14:
+        case "end":
+          return _context2.stop();
+      }
+    }, _callee2);
+  }));
+  return _handleGraphQLRequest.apply(this, arguments);
+}

package/dist/cjs/services/index.js

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "TeamsClient", {
+  enumerable: true,
+  get: function get() {
+    return _main.TeamsClient;
+  }
+});
+Object.defineProperty(exports, "teamsClient", {
+  enumerable: true,
+  get: function get() {
+    return _main.teamsClient;
+  }
+});
+var _main = require("./main");

package/dist/cjs/services/main.js

@@ -0,0 +1,72 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.teamsClient = exports.TeamsClient = void 0;
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _aggClient = require("./agg-client");
+var TeamsClient = exports.TeamsClient = /*#__PURE__*/function () {
+  function TeamsClient(
+  /**
+   * @param {ClientContextProps} context - Context including CloudId & OrgId to be used for all requests
+   */
+  context) {
+    (0, _classCallCheck2.default)(this, TeamsClient);
+    (0, _defineProperty2.default)(this, "_aggClient", _aggClient.aggClient);
+    if (context) {
+      this.setContext(context);
+    }
+  }
+
+  /**
+   * Sets the base URL to be used in the client requests
+   * @param {string} baseUrl - The new base URL
+   */
+  return (0, _createClass2.default)(TeamsClient, [{
+    key: "setBaseUrl",
+    value: function setBaseUrl(baseUrl) {
+      this._aggClient.setBaseUrl(baseUrl);
+    }
+
+    /**
+     * Sets context including CloudId & OrgId to be used for all requests
+     */
+  }, {
+    key: "setContext",
+    value: function setContext(context) {
+      this._aggClient.setContext(context);
+    }
+
+    /**
+     * Get the containers for a given team
+     * @param {string} teamId
+     * @returns {Promise<TeamContainers>}
+     */
+  }, {
+    key: "getTeamContainers",
+    value: (function () {
+      var _getTeamContainers = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(teamId) {
+        return _regenerator.default.wrap(function _callee$(_context) {
+          while (1) switch (_context.prev = _context.next) {
+            case 0:
+              return _context.abrupt("return", this._aggClient.getTeamContainers(teamId));
+            case 1:
+            case "end":
+              return _context.stop();
+          }
+        }, _callee, this);
+      }));
+      function getTeamContainers(_x) {
+        return _getTeamContainers.apply(this, arguments);
+      }
+      return getTeamContainers;
+    }())
+  }]);
+}();
+var teamsClient = exports.teamsClient = new TeamsClient();

package/dist/cjs/services/types.js

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

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

@@ -3,11 +3,9 @@
 ._12y3e4h9{outline-width:var(--ds-border-width,1px)}
 ._19bvutpp{padding-left:var(--ds-space-150,9pt)}
 ._1qu2gq9o{outline-style:dashed}
-._bfhkqbzx{background-color:var(--ds-surface-sunken,#f7f8f9)}
 ._ca0qutpp{padding-top:var(--ds-space-150,9pt)}
 ._n3tdutpp{padding-bottom:var(--ds-space-150,9pt)}
 ._syaz131l{color:var(--ds-text-subtlest,#626f86)}
 ._u5f3utpp{padding-right:var(--ds-space-150,9pt)}
 ._4cvxmuej:hover{border-color:var(--ds-border,#091e4224)}
-._irr3108i:hover{background-color:var(--ds-surface-hovered,#f1f2f4)}
 ._ksodnqa1:hover{outline-style:solid}

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

@@ -1,4 +1,4 @@
-/* index.tsx generated by @compiled/babel-plugin v0.36.0 */
+/* index.tsx generated by @compiled/babel-plugin v0.36.1 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
@@ -8,43 +8,61 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.AddContainerCard = void 0;
 require("./index.compiled.css");
-var React = _interopRequireWildcard(require("react"));
 var _runtime = require("@compiled/react/runtime");
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
 var _new = require("@atlaskit/button/new");
 var _add = _interopRequireDefault(require("@atlaskit/icon/utility/add"));
 var _menu = require("@atlaskit/menu");
-var _primitives = require("@atlaskit/primitives");
+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 styles = {
-  container: "_2rkoiti9 _bfhkqbzx _ca0qutpp _u5f3utpp _n3tdutpp _19bvutpp _irr3108i",
+  container: "_2rkoiti9 _ca0qutpp _u5f3utpp _n3tdutpp _19bvutpp",
   iconWrapper: "_2rkoiti9 _12y3e4h9 _12jimuej _1qu2gq9o _syaz131l _4cvxmuej _ksodnqa1"
 };
 var CustomItemInner = function CustomItemInner(_ref) {
   var children = _ref.children;
-  return /*#__PURE__*/React.createElement(_primitives.Box, {
-    xcss: styles.container
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    hovered = _useState2[0],
+    setHovered = _useState2[1];
+  var handleMouseEnter = function handleMouseEnter() {
+    return setHovered(true);
+  };
+  var handleMouseLeave = function handleMouseLeave() {
+    return setHovered(false);
+  };
+  return /*#__PURE__*/_react.default.createElement(_compiled.Box, {
+    backgroundColor: hovered ? 'elevation.surface.hovered' : 'elevation.surface.sunken',
+    xcss: styles.container,
+    onMouseEnter: handleMouseEnter,
+    onMouseLeave: handleMouseLeave
   }, children);
 };
 var AddContainerCard = exports.AddContainerCard = function AddContainerCard(_ref2) {
-  var containerType = _ref2.containerType;
+  var containerType = _ref2.containerType,
+    onAddAContainerClick = _ref2.onAddAContainerClick;
   var _getContainerProperti = (0, _getContainerProperties.getContainerProperties)(containerType),
     description = _getContainerProperti.description,
     icon = _getContainerProperti.icon,
     title = _getContainerProperti.title;
-  return /*#__PURE__*/React.createElement(_menu.CustomItem, {
-    iconBefore: /*#__PURE__*/React.createElement(_primitives.Box, {
+  return /*#__PURE__*/_react.default.createElement(_menu.CustomItem, {
+    iconBefore: /*#__PURE__*/_react.default.createElement(_compiled.Box, {
       xcss: styles.iconWrapper
-    }, /*#__PURE__*/React.createElement(_new.IconButton, {
+    }, /*#__PURE__*/_react.default.createElement(_new.IconButton, {
       label: "Add a container",
       appearance: "subtle",
       icon: _add.default,
       spacing: "compact",
-      testId: "add-icon"
+      testId: "add-icon",
+      onClick: function onClick(e) {
+        return onAddAContainerClick(e);
+      }
     })),
     component: CustomItemInner,
-    description: /*#__PURE__*/React.createElement(_primitives.Inline, {
+    description: /*#__PURE__*/_react.default.createElement(_compiled.Inline, {
       space: "space.050"
     }, icon, description)
   }, title);

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

@@ -9,5 +9,4 @@
 ._ca0qutpp{padding-top:var(--ds-space-150,9pt)}
 ._n3tdutpp{padding-bottom:var(--ds-space-150,9pt)}
 ._syaz1fxt{color:var(--ds-text,#172b4d)}
-._u5f3utpp{padding-right:var(--ds-space-150,9pt)}
-._irr31d5g:hover{background-color:var(--ds-background-input-hovered,#f7f8f9)}
+._u5f3utpp{padding-right:var(--ds-space-150,9pt)}

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

@@ -1,4 +1,4 @@
-/* index.tsx generated by @compiled/babel-plugin v0.36.0 */
+/* index.tsx generated by @compiled/babel-plugin v0.36.1 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
@@ -8,50 +8,74 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.LinkedContainerCard = void 0;
 require("./index.compiled.css");
-var React = _interopRequireWildcard(require("react"));
 var _runtime = require("@compiled/react/runtime");
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
 var _new = require("@atlaskit/button/new");
 var _cross = _interopRequireDefault(require("@atlaskit/icon/utility/cross"));
 var _image = _interopRequireDefault(require("@atlaskit/image"));
 var _link = _interopRequireDefault(require("@atlaskit/link"));
 var _menu = require("@atlaskit/menu");
-var _primitives = require("@atlaskit/primitives");
+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 styles = {
-  container: "_2rkoiti9 _1h6dz9xs _12y3e4h9 _12jimuej _1qu2nqa1 _ca0qutpp _u5f3utpp _n3tdutpp _19bvutpp _syaz1fxt _irr31d5g",
+  container: "_2rkoiti9 _1h6dz9xs _12y3e4h9 _12jimuej _1qu2nqa1 _ca0qutpp _u5f3utpp _n3tdutpp _19bvutpp _syaz1fxt",
   iconWrapper: "_1bsb1tcg _4t3i1tcg"
 };
 var CustomItemInner = function CustomItemInner(_ref) {
   var children = _ref.children,
-    href = _ref.href;
-  return /*#__PURE__*/React.createElement(_link.default, {
+    href = _ref.href,
+    handleMouseEnter = _ref.handleMouseEnter,
+    handleMouseLeave = _ref.handleMouseLeave;
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    hovered = _useState2[0],
+    setHovered = _useState2[1];
+  var onMouseEnter = function onMouseEnter() {
+    handleMouseEnter();
+    setHovered(true);
+  };
+  var onMouseLeave = function onMouseLeave() {
+    handleMouseLeave();
+    setHovered(false);
+  };
+  return /*#__PURE__*/_react.default.createElement(_link.default, {
     href: href,
     appearance: "subtle"
-  }, /*#__PURE__*/React.createElement(_primitives.Box, {
-    xcss: styles.container
+  }, /*#__PURE__*/_react.default.createElement(_compiled.Box, {
+    backgroundColor: hovered ? 'color.background.input.hovered' : 'color.background.input',
+    xcss: styles.container,
+    onMouseEnter: onMouseEnter,
+    onMouseLeave: onMouseLeave,
+    testId: "linked-container-card-inner"
   }, children));
 };
 var LinkedContainerCard = exports.LinkedContainerCard = function LinkedContainerCard(_ref2) {
   var containerType = _ref2.containerType,
     title = _ref2.title,
-    containerIcon = _ref2.containerIcon;
+    containerIcon = _ref2.containerIcon,
+    link = _ref2.link;
   var _getContainerProperti = (0, _getContainerProperties.getContainerProperties)(containerType),
     description = _getContainerProperti.description,
     icon = _getContainerProperti.icon;
-  return /*#__PURE__*/React.createElement(_menu.CustomItem, {
-    iconBefore: /*#__PURE__*/React.createElement(_primitives.Box, {
+  var _useState3 = (0, _react.useState)(false),
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    showCloseIcon = _useState4[0],
+    setShowCloseIcon = _useState4[1];
+  return /*#__PURE__*/_react.default.createElement(_menu.CustomItem, {
+    iconBefore: /*#__PURE__*/_react.default.createElement(_compiled.Box, {
       xcss: styles.iconWrapper
-    }, /*#__PURE__*/React.createElement(_image.default, {
+    }, /*#__PURE__*/_react.default.createElement(_image.default, {
       src: containerIcon,
       alt: "",
       testId: "linked-container-icon"
     })),
-    description: /*#__PURE__*/React.createElement(_primitives.Inline, {
+    description: /*#__PURE__*/_react.default.createElement(_compiled.Inline, {
       space: "space.050"
     }, icon, description),
-    iconAfter: /*#__PURE__*/React.createElement(_primitives.Box, null, /*#__PURE__*/React.createElement(_new.IconButton, {
+    iconAfter: showCloseIcon && /*#__PURE__*/_react.default.createElement(_compiled.Box, null, /*#__PURE__*/_react.default.createElement(_new.IconButton, {
       label: "disconnect the container ".concat(title),
       appearance: "subtle",
       icon: _cross.default,
@@ -60,7 +84,13 @@ var LinkedContainerCard = exports.LinkedContainerCard = function LinkedContainer
         e.preventDefault();
       }
     })),
-    href: "/",
+    href: link,
+    handleMouseEnter: function handleMouseEnter() {
+      return setShowCloseIcon(true);
+    },
+    handleMouseLeave: function handleMouseLeave() {
+      return setShowCloseIcon(false);
+    },
     component: CustomItemInner
   }, title);
 };