@atlaskit/profilecard 23.11.2 → 23.13.0

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # @atlaskit/profilecard
 
+## 23.13.0
+
+### Minor Changes
+
+- [#153632](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/153632)
+  [`b3c90207ec3e4`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/b3c90207ec3e4) -
+  [ux] update the TeamProfileCardWithContainer layout
+
+## 23.12.0
+
+### Minor Changes
+
+- [#140885](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/140885)
+  [`e8f0bc1586879`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/e8f0bc1586879) -
+  Cleanup FF rovo_use_agent_permissions
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 23.11.2
 
 ### Patch Changes

package/dist/cjs/client/getOrgIdForCloudIdFromAGG.js

@@ -11,7 +11,7 @@ var _graphqlUtils = require("./graphqlUtils");
 var ORG_ID_FROM_CLOUD_ID_QUERY = "query OrgIdFromCloudId($cloudId: ID!) {\n\ttenantContexts(cloudIds: [$cloudId]) {\n\t\torgId\n\t}\n}";
 var addHeaders = function addHeaders(headers) {
   headers.append('atl-client-name', "@atlaskit/profilecard");
-  headers.append('atl-client-version', "23.11.2");
+  headers.append('atl-client-version', "23.13.0");
   return headers;
 };
 function getOrgIdForCloudIdFromAGG(_x, _x2) {

package/dist/cjs/client/getTeamFromAGG.js

@@ -66,7 +66,7 @@ var addHeaders = exports.addHeaders = function addHeaders(headers) {
   headers.append('X-ExperimentalApi', 'teams-beta');
   headers.append('X-ExperimentalApi', 'team-members-beta');
   headers.append('atl-client-name', "@atlaskit/profilecard");
-  headers.append('atl-client-version', "23.11.2");
+  headers.append('atl-client-version', "23.13.0");
   return headers;
 };
 function getTeamFromAGG(_x, _x2, _x3) {

package/dist/cjs/components/Agent/Actions.js

@@ -6,21 +6,15 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.AgentActions = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
 var _reactIntlNext = require("react-intl-next");
-var _new = _interopRequireWildcard(require("@atlaskit/button/new"));
-var _dropdownMenu = _interopRequireWildcard(require("@atlaskit/dropdown-menu"));
-var _showMoreHorizontalMore = _interopRequireDefault(require("@atlaskit/icon/core/migration/show-more-horizontal--more"));
-var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _new = _interopRequireDefault(require("@atlaskit/button/new"));
 var _primitives = require("@atlaskit/primitives");
 var _rovoAgentComponents = require("@atlaskit/rovo-agent-components");
 var _AgentDeleteConfirmationModal = require("./AgentDeleteConfirmationModal");
-var _excluded = ["triggerRef"];
 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 chatToAgentButtonContainer = (0, _primitives.xcss)({
@@ -52,42 +46,16 @@ var actionsWrapperStyles = (0, _primitives.xcss)({
   marginBlockStart: 'space.200',
   color: 'color.text'
 });
-var buildAgentActions = function buildAgentActions(_ref) {
-  var onDuplicateAgent = _ref.onDuplicateAgent,
+var AgentActions = exports.AgentActions = function AgentActions(_ref) {
+  var isAgentCreatedByCurrentUser = _ref.isAgentCreatedByCurrentUser,
+    onEditAgent = _ref.onEditAgent,
+    onDeleteAgent = _ref.onDeleteAgent,
+    onDuplicateAgent = _ref.onDuplicateAgent,
     onCopyAgent = _ref.onCopyAgent,
-    isForgeAgent = _ref.isForgeAgent;
-  return isForgeAgent ? [{
-    text: /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, messages.actionCopyLink),
-    onClick: onCopyAgent
-  }] : [{
-    text: /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, messages.actionDuplicate),
-    onClick: onDuplicateAgent
-  }, {
-    text: /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, messages.actionCopyLink),
-    onClick: onCopyAgent
-  }];
-};
-var buildAgentSettings = function buildAgentSettings(_ref2) {
-  var onEditAgent = _ref2.onEditAgent,
-    onDeleteAgent = _ref2.onDeleteAgent;
-  return [{
-    text: /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, messages.actionEdit),
-    onClick: onEditAgent
-  }, {
-    text: /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, messages.actionDelete),
-    onClick: onDeleteAgent
-  }];
-};
-var AgentActions = exports.AgentActions = function AgentActions(_ref3) {
-  var isAgentCreatedByCurrentUser = _ref3.isAgentCreatedByCurrentUser,
-    onEditAgent = _ref3.onEditAgent,
-    onDeleteAgent = _ref3.onDeleteAgent,
-    onDuplicateAgent = _ref3.onDuplicateAgent,
-    onCopyAgent = _ref3.onCopyAgent,
-    onChatClick = _ref3.onChatClick,
-    onViewFullProfileClick = _ref3.onViewFullProfileClick,
-    agent = _ref3.agent,
-    resourceClient = _ref3.resourceClient;
+    onChatClick = _ref.onChatClick,
+    onViewFullProfileClick = _ref.onViewFullProfileClick,
+    agent = _ref.agent,
+    resourceClient = _ref.resourceClient;
   var _useIntl = (0, _reactIntlNext.useIntl)(),
     formatMessage = _useIntl.formatMessage;
   var _useState = (0, _react.useState)(false),
@@ -117,17 +85,6 @@ var AgentActions = exports.AgentActions = function AgentActions(_ref3) {
       }
     }, _callee);
   })), [agent.id, resourceClient]);
-  var agentActions = buildAgentActions({
-    onDuplicateAgent: onDuplicateAgent,
-    onCopyAgent: onCopyAgent,
-    isForgeAgent: agent.creator_type === 'FORGE' || agent.creator_type === 'THIRD_PARTY'
-  });
-  var agentSetting = buildAgentSettings({
-    onEditAgent: onEditAgent,
-    onDeleteAgent: function onDeleteAgent() {
-      setIsDeleteModalOpen(true);
-    }
-  });
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_primitives.Inline, {
     space: "space.100",
     xcss: actionsWrapperStyles
@@ -148,7 +105,7 @@ var AgentActions = exports.AgentActions = function AgentActions(_ref3) {
     xcss: chatPillIconWrapper
   }, /*#__PURE__*/_react.default.createElement(_rovoAgentComponents.ChatPillIcon, null)), /*#__PURE__*/_react.default.createElement(_primitives.Box, {
     xcss: chatPillTextStyles
-  }, formatMessage(messages.actionChatToAgent)))))), (0, _platformFeatureFlags.fg)('rovo_use_agent_permissions') ? /*#__PURE__*/_react.default.createElement(_rovoAgentComponents.AgentDropdownMenu, {
+  }, formatMessage(messages.actionChatToAgent)))))), /*#__PURE__*/_react.default.createElement(_rovoAgentComponents.AgentDropdownMenu, {
     agentId: agent.id,
     isAgentCreatedByUser: isAgentCreatedByCurrentUser !== null && isAgentCreatedByCurrentUser !== void 0 ? isAgentCreatedByCurrentUser : false,
     onDeleteAgent: function onDeleteAgent() {
@@ -163,45 +120,7 @@ var AgentActions = exports.AgentActions = function AgentActions(_ref3) {
     onViewAgentFullProfileClick: onViewFullProfileClick,
     doesAgentHaveIdentityAccountId: !!agent.identity_account_id,
     shouldTriggerStopPropagation: true
-  }) : /*#__PURE__*/_react.default.createElement(_dropdownMenu.default, {
-    trigger: function trigger(_ref5) {
-      var triggerRef = _ref5.triggerRef,
-        props = (0, _objectWithoutProperties2.default)(_ref5, _excluded);
-      return /*#__PURE__*/_react.default.createElement(_primitives.Box, null, /*#__PURE__*/_react.default.createElement(_new.IconButton, (0, _extends2.default)({}, props, {
-        icon: _showMoreHorizontalMore.default,
-        label: "more",
-        ref: triggerRef,
-        onClick: function onClick(e) {
-          var _props$onClick;
-          e.stopPropagation();
-          (_props$onClick = props.onClick) === null || _props$onClick === void 0 || _props$onClick.call(props, e);
-        }
-      })));
-    },
-    placement: "bottom-end"
-  }, /*#__PURE__*/_react.default.createElement(_dropdownMenu.DropdownItemGroup, null, agentActions.map(function (_ref6, idx) {
-    var text = _ref6.text,
-      _onClick = _ref6.onClick;
-    return /*#__PURE__*/_react.default.createElement(_dropdownMenu.DropdownItem, {
-      key: idx,
-      onClick: function onClick(e) {
-        e.stopPropagation();
-        _onClick === null || _onClick === void 0 || _onClick();
-      }
-    }, text);
-  })), isAgentCreatedByCurrentUser && /*#__PURE__*/_react.default.createElement(_dropdownMenu.DropdownItemGroup, {
-    hasSeparator: true
-  }, agentSetting.map(function (_ref7, idx) {
-    var text = _ref7.text,
-      _onClick2 = _ref7.onClick;
-    return /*#__PURE__*/_react.default.createElement(_dropdownMenu.DropdownItem, {
-      key: idx,
-      onClick: function onClick(e) {
-        e.stopPropagation();
-        _onClick2 === null || _onClick2 === void 0 || _onClick2();
-      }
-    }, text);
-  })))), /*#__PURE__*/_react.default.createElement(_AgentDeleteConfirmationModal.AgentDeleteConfirmationModal, {
+  })), /*#__PURE__*/_react.default.createElement(_AgentDeleteConfirmationModal.AgentDeleteConfirmationModal, {
     isOpen: isDeleteModalOpen,
     onClose: function onClose() {
       setIsDeleteModalOpen(false);
@@ -216,25 +135,5 @@ var messages = (0, _reactIntlNext.defineMessages)({
     id: 'ptc-directory.agent-profile.action.dropdown.chat-to-agent.nonfinal',
     defaultMessage: 'Chat to Agent',
     description: 'Text for the "chat to agent" action to chat to the agent'
-  },
-  actionDelete: {
-    id: 'ptc-directory.agent-profile.action.dropdown.delete.nonfinal',
-    defaultMessage: 'Delete Agent',
-    description: 'Text for the "Delete" action to delete an agent'
-  },
-  actionEdit: {
-    id: 'ptc-directory.agent-profile.action.dropdown.edit.nonfinal',
-    defaultMessage: 'Edit Agent',
-    description: 'Text for the "Edit" action to edit an agent'
-  },
-  actionCopyLink: {
-    id: 'ptc-directory.agent-profile.action.dropdown.copy-link.nonfinal',
-    defaultMessage: 'Copy link',
-    description: 'Text for the Copy link of an agent'
-  },
-  actionDuplicate: {
-    id: 'ptc-directory.agent-profile.action.dropdown.duplicate.nonfinal',
-    defaultMessage: 'Duplicate Agent',
-    description: 'Text for the Duplicate Agent action to create a duplicate'
   }
 });

package/dist/cjs/components/team-profile-card/main.compiled.css

@@ -9,13 +9,16 @@
 ._18m915vq{overflow-y:hidden}
 ._18m91wug{overflow-y:auto}
 ._18u01ejb{margin-left:var(--ds-space-300,24px)}
+._18u01wug{margin-left:auto}
 ._18u0pxbi{margin-left:var(--ds-space-200,1pc)}
 ._18u0u2gc{margin-left:var(--ds-space-100,8px)}
 ._19bv1ejb{padding-left:var(--ds-space-300,24px)}
+._19pk1b66{margin-top:var(--ds-space-050,4px)}
 ._19pkpxbi{margin-top:var(--ds-space-200,1pc)}
 ._19pku2gc{margin-top:var(--ds-space-100,8px)}
 ._1bsb1gwv{width:360px}
 ._1bsb1osq{width:100%}
+._1bsb7vkz{width:1pc}
 ._1e0c1txw{display:flex}
 ._1i53muej{border-top-color:var(--ds-border,#091e4224)}
 ._1reo15vq{overflow-x:hidden}
@@ -25,9 +28,11 @@
 ._2hwxu2gc{margin-right:var(--ds-space-100,8px)}
 ._2lx21bp4{flex-direction:column}
 ._4cvr1h6o{align-items:center}
+._4t3i12am{height:50px}
 ._4t3i1ul9{height:30px}
 ._4t3i1wug{height:auto}
 ._4t3i53f4{height:75pt}
+._4t3i7vkz{height:1pc}
 ._5ral1dfr{object-fit:cover}
 ._bfhksm61{background-color:var(--ds-background-neutral-subtle,#00000000)}
 ._c71lx2si{max-height:265px}

package/dist/cjs/components/team-profile-card/main.js

@@ -16,11 +16,13 @@ var _reactIntlNext = require("react-intl-next");
 var _analyticsNext = require("@atlaskit/analytics-next");
 var _avatarGroup = _interopRequireDefault(require("@atlaskit/avatar-group"));
 var _heading = _interopRequireDefault(require("@atlaskit/heading"));
+var _linkItem = _interopRequireDefault(require("@atlaskit/menu/link-item"));
 var _verifiedTeamIcon = require("@atlaskit/people-teams-ui-public/verified-team-icon");
 var _compiled = require("@atlaskit/primitives/compiled");
 var _teamsAvatar = _interopRequireDefault(require("@atlaskit/teams-avatar"));
 var _teamsPublic = require("@atlaskit/teams-public");
 var _analytics = require("../../util/analytics");
+var _TeamAppTile = _interopRequireDefault(require("../common/assets/TeamAppTile.svg"));
 var _teamActions = require("./team-actions");
 var _main = require("./team-connections/main");
 var _teamContainersSkeleton = require("./team-containers-skeleton");
@@ -33,10 +35,14 @@ var styles = {
   containerStyles: "_otyrpxbi",
   avatarImageStyles: "_kqswstnw _18u01ejb",
   headerImageStyles: "_5ral1dfr _s7n4jp4b _4t3i53f4 _1bsb1osq",
+  newHeaderImageStyles: "_5ral1dfr _s7n4jp4b _4t3i12am _1bsb1osq",
   teamInformationStyles: "_18u01ejb _19pku2gc _2hwx1ejb",
   teamConnectionHeaderStyles: "_18u0u2gc _2hwxu2gc _c71lx2si _18m91wug",
-  teamConnectionContainerStyles: "_18u01ejb _2hwx1ejb",
-  connectionTitleStyles: "_11c81vhk _18u0pxbi _19pkpxbi _2hwxpxbi _otyr12x7 _syaz1gjq",
+  teamConnectionContainerStyles: "_18u0u2gc _2hwxu2gc",
+  teamConnectionStyles: "_18u0u2gc _2hwxu2gc",
+  teamConnectionItemsStyles: "_c71lx2si _18m91wug",
+  connectionTitleStyles: "_11c81vhk _18u0pxbi _19pk1b66 _2hwxpxbi _otyr12x7 _syaz1gjq",
+  teamAppTileStyles: "_18u01wug _4t3i7vkz _1bsb7vkz",
   viewProfileContainerStyles: "_4cvr1h6o _uwhke4h9 _15a5nqa1 _1i53muej _19bv1ejb _u5f31ejb",
   viewProfileButtonStyles: "_2rkoiti9 _189ee4h9 _1dqonqa1 _1h6dmuej _bfhksm61 _syaz1gjq _1bsb1osq _4t3i1ul9 _19pkpxbi"
 };
@@ -83,6 +89,9 @@ var TeamProfileCard = exports.TeamProfileCard = function TeamProfileCard(_ref3)
       return tc.id === containerId;
     }).length < teamContainers.length;
   }, [containerId, teamContainers]);
+
+  // TODO: set isNewLayout to be true when clean up 'team-bi-directional-container-connection' experiment
+  var isNewLayout = Boolean(props.isKudosEnabled || props.otherActions);
   var onClick = (0, _react.useCallback)(function () {
     if (createAnalyticsEvent) {
       (0, _analytics.fireEvent)(createAnalyticsEvent, {
@@ -92,8 +101,106 @@ var TeamProfileCard = exports.TeamProfileCard = function TeamProfileCard(_ref3)
         attributes: {}
       });
     }
-    window.open(teamProfileUrl, '_blank');
-  }, [createAnalyticsEvent, teamProfileUrl]);
+    if (!isNewLayout) {
+      window.open(teamProfileUrl, '_blank');
+    }
+  }, [createAnalyticsEvent, teamProfileUrl, isNewLayout]);
+  if (isNewLayout) {
+    return /*#__PURE__*/_react.default.createElement(_compiled.Box, {
+      xcss: styles.wrapperStyles,
+      testId: "team-card-".concat(teamId)
+    }, /*#__PURE__*/_react.default.createElement(_compiled.Box, {
+      as: "img",
+      src: headerImageUrl,
+      xcss: styles.newHeaderImageStyles,
+      testId: "profile-header-image",
+      alt: "team-header-image"
+    }), /*#__PURE__*/_react.default.createElement(_compiled.Stack, {
+      space: "space.200",
+      xcss: styles.containerStyles
+    }, /*#__PURE__*/_react.default.createElement(_compiled.Inline, {
+      spread: "space-between",
+      alignBlock: "center"
+    }, /*#__PURE__*/_react.default.createElement(_compiled.Box, {
+      xcss: styles.avatarImageStyles
+    }, /*#__PURE__*/_react.default.createElement(_teamsAvatar.default, {
+      size: "medium",
+      src: avatarImageUrl
+    }))), /*#__PURE__*/_react.default.createElement(_compiled.Stack, {
+      xcss: styles.teamInformationStyles,
+      space: "space.200"
+    }, /*#__PURE__*/_react.default.createElement(_compiled.Flex, {
+      justifyContent: "space-between"
+    }, /*#__PURE__*/_react.default.createElement(_compiled.Stack, {
+      space: "space.050"
+    }, /*#__PURE__*/_react.default.createElement(_compiled.Inline, {
+      alignBlock: "center"
+    }, /*#__PURE__*/_react.default.createElement(_heading.default, {
+      size: "medium"
+    }, displayName), isVerified && /*#__PURE__*/_react.default.createElement(_verifiedTeamIcon.VerifiedTeamIcon, {
+      showTooltip: true
+    })), /*#__PURE__*/_react.default.createElement(_compiled.Text, {
+      color: "color.text.subtlest"
+    }, /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, {
+      defaultMessage: "Contributing team \u2022 {count, plural, one {# member} other {# members}}",
+      values: {
+        count: memberCount
+      },
+      id: "people-and-teams.team-profile-card.member-count"
+    }))), /*#__PURE__*/_react.default.createElement(_teamActions.TeamActions, (0, _extends2.default)({
+      cloudId: cloudId,
+      teamId: teamId
+    }, props))), /*#__PURE__*/_react.default.createElement(_compiled.Inline, null, /*#__PURE__*/_react.default.createElement(_avatarGroup.default, {
+      appearance: "stack",
+      data: memberAvatars
+    })), description && /*#__PURE__*/_react.default.createElement(_compiled.Text, {
+      color: "color.text",
+      maxLines: 3
+    }, description)), /*#__PURE__*/_react.default.createElement(_compiled.Box, {
+      xcss: styles.teamConnectionStyles
+    }, /*#__PURE__*/_react.default.createElement(_compiled.Box, {
+      xcss: styles.connectionTitleStyles
+    }, /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, {
+      defaultMessage: "Team links",
+      id: "people-and-teams.team-profile-card.team-connections"
+    })), /*#__PURE__*/_react.default.createElement(_compiled.Box, {
+      xcss: styles.teamConnectionItemsStyles
+    }, /*#__PURE__*/_react.default.createElement(_linkItem.default, {
+      href: teamProfileUrl,
+      target: "_blank",
+      onClick: onClick,
+      description: /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, {
+        defaultMessage: "Team profile",
+        id: "people-and-teams.team-profile-card.team-profile-description"
+      }),
+      iconBefore: /*#__PURE__*/_react.default.createElement(_teamsAvatar.default, {
+        size: "small",
+        src: avatarImageUrl
+      }),
+      iconAfter: /*#__PURE__*/_react.default.createElement(_compiled.Box, {
+        as: "img",
+        src: _TeamAppTile.default,
+        testId: "team-app-tile",
+        alt: "team-app-tile",
+        xcss: styles.teamAppTileStyles
+      })
+    }, /*#__PURE__*/_react.default.createElement(_compiled.Text, {
+      maxLines: 1,
+      color: "color.text"
+    }, displayName)), (loading || hasOtherTeamConnections) && /*#__PURE__*/_react.default.createElement(_teamsPublic.TeamContainers, {
+      teamId: teamId,
+      onAddAContainerClick: noop,
+      userId: userId,
+      cloudId: cloudId,
+      components: {
+        ContainerCard: _main.NewTeamConnections,
+        TeamContainersSkeleton: _teamContainersSkeleton.TeamContainersSkeleton
+      },
+      filterContainerId: containerId,
+      isDisplayedOnProfileCard: true,
+      maxNumberOfContainersToShow: 3
+    })))));
+  }
   return /*#__PURE__*/_react.default.createElement(TeamCardWrapper, {
     id: teamId
   }, /*#__PURE__*/_react.default.createElement(HeaderImage, {
@@ -140,7 +247,7 @@ var TeamProfileCard = exports.TeamProfileCard = function TeamProfileCard(_ref3)
     xcss: styles.connectionTitleStyles
   }, /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, {
     defaultMessage: "Where we work",
-    id: "people-and-teams.team-profile-card.team-connections"
+    id: "people-and-teams.team-profile-card.team-connections-header"
   })), /*#__PURE__*/_react.default.createElement(_teamsPublic.TeamContainers, {
     teamId: teamId,
     onAddAContainerClick: noop,
@@ -152,12 +259,7 @@ var TeamProfileCard = exports.TeamProfileCard = function TeamProfileCard(_ref3)
     },
     filterContainerId: containerId,
     isDisplayedOnProfileCard: true
-  })), props.isKudosEnabled || props.otherActions ? /*#__PURE__*/_react.default.createElement(_teamActions.ButtonSection, (0, _extends2.default)({
-    teamProfileUrl: teamProfileUrl,
-    cloudId: cloudId,
-    teamId: teamId,
-    loading: loading
-  }, props)) : teamProfileUrl && /*#__PURE__*/_react.default.createElement(_compiled.Stack, {
+  })), teamProfileUrl && /*#__PURE__*/_react.default.createElement(_compiled.Stack, {
     xcss: styles.viewProfileContainerStyles
   }, /*#__PURE__*/_react.default.createElement(_compiled.Pressable, {
     onClick: onClick,

package/dist/cjs/components/team-profile-card/mocks.js

@@ -136,6 +136,28 @@ var mockTeamContainersQueries = exports.mockTeamContainersQueries = function moc
                     }
                   }
                 }
+              }, {
+                node: {
+                  from: {
+                    id: '1'
+                  },
+                  to: {
+                    id: '4',
+                    data: {
+                      __typename: 'ConfluenceSpace',
+                      id: '2',
+                      confluenceSpaceName: 'Confluence Space',
+                      type: 'confluence',
+                      createdDate: '2021-01-01',
+                      links: {
+                        webUi: 'https://example.com/confluence'
+                      },
+                      icon: {
+                        path: 'https://avatar-management--avatars.us-west-2.staging.public.atl-paas.net/712020:2981defd-17f1-440e-a377-8c7657b72a6f/4b5b0d55-614b-4e75-858f-9da3d0c7e3f8/128'
+                      }
+                    }
+                  }
+                }
               }]
             }
           }

package/dist/cjs/components/team-profile-card/team-actions/index.js

@@ -1,4 +1,3 @@
-/* index.tsx generated by @compiled/babel-plugin v0.36.1 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
@@ -6,62 +5,39 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.ButtonSection = void 0;
-require("./index.compiled.css");
-var _runtime = require("@compiled/react/runtime");
+exports.TeamActions = void 0;
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = _interopRequireWildcard(require("react"));
 var _reactIntlNext = require("react-intl-next");
-var _analyticsNext = require("@atlaskit/analytics-next");
-var _new = require("@atlaskit/button/new");
 var _giveKudos = require("@atlaskit/give-kudos");
 var _menu = require("@atlaskit/menu");
-var _primitives = require("@atlaskit/primitives");
 var _getTeamFromAGG = require("../../../client/getTeamFromAGG");
-var _analytics = require("../../../util/analytics");
 var _messages = require("./messages");
 var _moreActions = require("./more-actions");
-var _excluded = ["teamProfileUrl", "isKudosEnabled", "otherActions", "loading"];
+var _excluded = ["isKudosEnabled", "otherActions", "loading"];
 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 GIVE_KUDOS_ACTION_ID = 'give-kudos';
-var styles = {
-  containerStyles: "_uwhke4h9 _15a5nqa1 _1i53muej _19bv1ejb _u5f31ejb _ca0qpxbi",
-  actionContainerStyles: "_16jlkb7n"
-};
-var ButtonSection = exports.ButtonSection = function ButtonSection(_ref) {
-  var teamProfileUrl = _ref.teamProfileUrl,
-    isKudosEnabled = _ref.isKudosEnabled,
+var TeamActions = exports.TeamActions = function TeamActions(_ref) {
+  var isKudosEnabled = _ref.isKudosEnabled,
     otherActions = _ref.otherActions,
     loading = _ref.loading,
     props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  var _useAnalyticsEvents = (0, _analyticsNext.useAnalyticsEvents)(),
-    createAnalyticsEvent = _useAnalyticsEvents.createAnalyticsEvent;
   var _useIntl = (0, _reactIntlNext.useIntl)(),
     formatMessage = _useIntl.formatMessage;
   var _useState = (0, _react.useState)(false),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     isKudosOpen = _useState2[0],
     setIsKudosOpen = _useState2[1];
-  var onTeamProfileClick = (0, _react.useCallback)(function () {
-    if (createAnalyticsEvent) {
-      (0, _analytics.fireEvent)(createAnalyticsEvent, {
-        action: 'clicked',
-        actionSubject: 'button',
-        actionSubjectId: 'viewTeamProfileButton',
-        attributes: {}
-      });
-    }
-  }, [createAnalyticsEvent]);
   var onKudosClick = (0, _react.useCallback)(function () {
     setIsKudosOpen(true);
   }, []);
-  var extraActions = [];
+  var actions = [];
   var kudosProps = null;
   if (isKudosEnabled) {
-    extraActions.push({
+    actions.push({
       id: GIVE_KUDOS_ACTION_ID,
       item: /*#__PURE__*/_react.default.createElement(_menu.ButtonItem, {
         onClick: onKudosClick
@@ -70,23 +46,15 @@ var ButtonSection = exports.ButtonSection = function ButtonSection(_ref) {
     kudosProps = props;
   }
   if (otherActions) {
-    extraActions.push.apply(extraActions, (0, _toConsumableArray2.default)(otherActions));
+    actions.push.apply(actions, (0, _toConsumableArray2.default)(otherActions));
   }
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_primitives.Stack, {
-    xcss: styles.containerStyles
-  }, /*#__PURE__*/_react.default.createElement(_primitives.Inline, {
-    space: "space.050"
-  }, teamProfileUrl && /*#__PURE__*/_react.default.createElement(_primitives.Box, {
-    xcss: styles.actionContainerStyles
-  }, /*#__PURE__*/_react.default.createElement(_new.LinkButton, {
-    onClick: onTeamProfileClick,
-    href: teamProfileUrl,
-    target: "_blank",
-    shouldFitContainer: true
-  }, formatMessage(_messages.messages.viewProfile))), extraActions.length > 0 && /*#__PURE__*/_react.default.createElement(_moreActions.MoreActions, {
-    actions: extraActions,
+  if (actions.length === 0) {
+    return null;
+  }
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_moreActions.MoreActions, {
+    actions: actions,
     loading: loading
-  }))), isKudosEnabled && kudosProps && /*#__PURE__*/_react.default.createElement(_react.Suspense, {
+  }), isKudosEnabled && kudosProps && /*#__PURE__*/_react.default.createElement(_react.Suspense, {
     fallback: null
   }, /*#__PURE__*/_react.default.createElement(_giveKudos.GiveKudosLauncherLazy, {
     isOpen: isKudosOpen,

package/dist/cjs/components/team-profile-card/team-actions/messages.js

@@ -6,11 +6,6 @@ Object.defineProperty(exports, "__esModule", {
 exports.messages = void 0;
 var _reactIntlNext = require("react-intl-next");
 var messages = exports.messages = (0, _reactIntlNext.defineMessages)({
-  viewProfile: {
-    id: 'team-profile-card.team-actions.view-profile',
-    defaultMessage: 'View profile',
-    description: 'View profile button text'
-  },
   giveKudos: {
     id: 'team-profile-card.team-actions.give-kudos',
     defaultMessage: 'Give kudos',

package/dist/cjs/components/team-profile-card/team-connections/main.js

@@ -1,15 +1,17 @@
 /* main.tsx generated by @compiled/babel-plugin v0.36.1 */
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.TeamConnections = void 0;
+exports.TeamConnections = exports.NewTeamConnections = void 0;
 require("./main.compiled.css");
 var _runtime = require("@compiled/react/runtime");
 var _react = _interopRequireWildcard(require("react"));
 var _analyticsNext = require("@atlaskit/analytics-next");
+var _avatar = _interopRequireDefault(require("@atlaskit/avatar"));
 var _menu = require("@atlaskit/menu");
 var _compiled = require("@atlaskit/primitives/compiled");
 var _teamsPublic = require("@atlaskit/teams-public");
@@ -70,4 +72,53 @@ var TeamConnections = exports.TeamConnections = function TeamConnections(_ref) {
     xcss: styles.containerTypeIconButtonStyles,
     testId: "container-type-icon"
   }, icon)));
+};
+var NewTeamConnections = exports.NewTeamConnections = function NewTeamConnections(_ref2) {
+  var containerType = _ref2.containerType,
+    title = _ref2.title,
+    containerIcon = _ref2.containerIcon,
+    link = _ref2.link;
+  var _getContainerProperti2 = (0, _teamsPublic.getContainerProperties)(containerType, 'medium'),
+    description = _getContainerProperti2.description,
+    icon = _getContainerProperti2.icon,
+    containerTypeText = _getContainerProperti2.containerTypeText;
+  var _useAnalyticsEvents2 = (0, _analyticsNext.useAnalyticsEvents)(),
+    createAnalyticsEvent = _useAnalyticsEvents2.createAnalyticsEvent;
+  var onClick = (0, _react.useCallback)(function () {
+    (0, _analytics.fireEvent)(createAnalyticsEvent, {
+      action: 'clicked',
+      actionSubject: 'teamConnectionItem',
+      actionSubjectId: 'teamProfileCard',
+      attributes: {
+        container: containerType
+      }
+    });
+  }, [containerType, createAnalyticsEvent]);
+  return /*#__PURE__*/_react.default.createElement(_menu.LinkItem, {
+    href: link,
+    onClick: onClick,
+    description: /*#__PURE__*/_react.default.createElement(_compiled.Inline, {
+      space: "space.050"
+    }, /*#__PURE__*/_react.default.createElement(_compiled.Text, {
+      size: "small",
+      color: "color.text.subtlest"
+    }, description), /*#__PURE__*/_react.default.createElement(_compiled.Text, {
+      size: "small",
+      color: "color.text.subtlest"
+    }, containerTypeText)),
+    iconBefore: /*#__PURE__*/_react.default.createElement(_avatar.default, {
+      size: "small",
+      appearance: "square",
+      src: containerIcon,
+      testId: "linked-container-icon"
+    }),
+    iconAfter: /*#__PURE__*/_react.default.createElement(_compiled.Box, {
+      backgroundColor: 'color.background.neutral.subtle',
+      xcss: styles.containerTypeIconButtonStyles,
+      testId: "container-type-icon"
+    }, icon)
+  }, /*#__PURE__*/_react.default.createElement(_compiled.Text, {
+    maxLines: 1,
+    color: "color.text"
+  }, title));
 };

package/dist/cjs/components/team-profile-card/team-containers-skeleton/index.compiled.css

@@ -1,3 +1,5 @@
 
 ._2rko1q77{border-radius:var(--ds-border-radius-400,1pc)}
-._1rjc1b66{padding-block:var(--ds-space-050,4px)}._1bsbvbgk{width:4pc}
+._1rjc1b66{padding-block:var(--ds-space-050,4px)}._1bsbvbgk{width:4pc}
+._bozgpxbi{padding-inline-start:var(--ds-space-200,1pc)}
+._y4tipxbi{padding-inline-end:var(--ds-space-200,1pc)}