@backstage/plugin-org 0.7.10-next.0 → 0.8.0-next.1

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @backstage/plugin-org
 
+## 0.8.0-next.1
+
+### Minor Changes
+
+- 1557a8c: Added a swappable `UserAvatar` component and wired org plugin surfaces to use it for user profile pictures.
+
+### Patch Changes
+
+- Updated dependencies
+  - @backstage/plugin-catalog-react@3.2.4-next.1
+  - @backstage/core-components@0.18.15-next.2
+
 ## 0.7.10-next.0
 
 ### Patch Changes

package/README.md

@@ -83,3 +83,32 @@ Once added MyGroupsSidebarItem will work in three ways:
 3. The user is logged in and a member of more than one group: the MyGroupsSidebarItem will display a single items with a sub-menu with all the related groups like this:
 
    ![MyGroupsSidebarItem multiple example](./docs/mygroupssidebaritem-multiple.png)
+
+### UserAvatar and custom member avatars
+
+Org plugin surfaces such as `MembersListCard` and `UserProfileCard` render user avatars through the shared `UserAvatar` swappable component. By default, avatars use `entity.spec.profile.picture` from the catalog; when that field is empty, initials are shown.
+
+To customize avatar rendering (for example, when profile pictures are not stored on catalog entities), override `UserAvatar` once in your app module:
+
+```tsx
+import { createFrontendModule } from '@backstage/frontend-plugin-api';
+import { SwappableComponentBlueprint } from '@backstage/plugin-app-react';
+import { UserAvatar } from '@backstage/plugin-org';
+
+export const appModuleOrg = createFrontendModule({
+  pluginId: 'app',
+  extensions: [
+    SwappableComponentBlueprint.make({
+      name: 'org-user-avatar',
+      params: defineParams =>
+        defineParams({
+          component: UserAvatar,
+          loader: () =>
+            import('./YourCustomComponent').then(m => m.YourCustomComponent),
+        }),
+    }),
+  ],
+});
+```
+
+When no override is registered, behavior is unchanged.

package/dist/components/Cards/Group/MembersList/MembersListCard.esm.js

@@ -9,7 +9,8 @@ import { useApi } from '@backstage/core-plugin-api';
 import { getAllDesendantMembersForGroupEntity, removeDuplicateEntitiesFrom } from '../../../../helpers/helpers.esm.js';
 import { useTranslationRef } from '@backstage/frontend-plugin-api';
 import { orgTranslationRef } from '../../../../translation.esm.js';
-import { Box, Text, SearchField, Switch, Card, Avatar, Flex, Link, TablePagination } from '@backstage/ui';
+import { Box, Text, SearchField, Switch, Card, Flex, Link, TablePagination } from '@backstage/ui';
+import { UserAvatar } from '../../../UserAvatar/UserAvatar.esm.js';
 
 const useMemberStyles = makeStyles({
   card: {
@@ -56,12 +57,11 @@ const MemberComponent = (props) => {
       label: t("membersListCard.cardLabel", { memberName: displayName }),
       children: [
         /* @__PURE__ */ jsx(
-          Avatar,
+          UserAvatar,
           {
             className: classes.avatar,
-            name: displayName,
-            src: profile?.picture ?? "",
-            purpose: "decoration",
+            displayName,
+            entity: props.member,
             size: "x-large"
           }
         ),

package/dist/components/Cards/Group/MembersList/MembersListCard.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"MembersListCard.esm.js","sources":["../../../../../src/components/Cards/Group/MembersList/MembersListCard.tsx"],"sourcesContent":["/*\n * Copyright 2020 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport {\n  DEFAULT_NAMESPACE,\n  GroupEntity,\n  UserEntity,\n  stringifyEntityRef,\n} from '@backstage/catalog-model';\nimport {\n  catalogApiRef,\n  useEntity,\n  EntityInfoCard,\n  useEntityRefLink,\n} from '@backstage/plugin-catalog-react';\nimport { makeStyles } from '@material-ui/core/styles';\nimport { useState, useEffect } from 'react';\nimport useAsync from 'react-use/esm/useAsync';\n\nimport { Progress, ResponseErrorPanel } from '@backstage/core-components';\nimport { useApi } from '@backstage/core-plugin-api';\nimport {\n  getAllDesendantMembersForGroupEntity,\n  removeDuplicateEntitiesFrom,\n} from '../../../../helpers/helpers';\nimport { EntityRelationAggregation } from '../../types';\nimport { useTranslationRef } from '@backstage/frontend-plugin-api';\nimport { orgTranslationRef } from '../../../../translation';\nimport {\n  Avatar,\n  Box,\n  Card,\n  Flex,\n  Link,\n  SearchField,\n  Switch,\n  TablePagination,\n  Text,\n} from '@backstage/ui';\n\nconst useMemberStyles = makeStyles({\n  card: {\n    display: 'flex',\n    gap: 'var(--bui-space-3)',\n    padding: 'var(--bui-space-3)',\n    alignItems: 'flex-start',\n    flexDirection: 'row',\n    height: 140,\n    overflow: 'hidden',\n  },\n  avatar: {\n    flexShrink: 0,\n  },\n  cardTextContainer: {\n    overflow: 'hidden',\n  },\n  singlelineEllipsis: {\n    overflow: 'hidden',\n    textOverflow: 'ellipsis',\n    whiteSpace: 'nowrap',\n  },\n  multilineEllipsis: {\n    display: '-webkit-box',\n    '-webkit-line-clamp': '3',\n    '-webkit-box-orient': 'vertical',\n    overflow: 'hidden',\n  },\n});\n\nconst MemberComponent = (props: { member: UserEntity }) => {\n  const { t } = useTranslationRef(orgTranslationRef);\n  const classes = useMemberStyles();\n  const {\n    metadata: { name: metaName, description },\n    spec: { profile },\n  } = props.member;\n  const displayName = profile?.displayName ?? metaName;\n  const entityLink = useEntityRefLink();\n\n  return (\n    <Card\n      className={classes.card}\n      href={entityLink(props.member)}\n      label={t('membersListCard.cardLabel', { memberName: displayName })}\n    >\n      <Avatar\n        className={classes.avatar}\n        name={displayName}\n        src={profile?.picture ?? ''}\n        purpose=\"decoration\"\n        size=\"x-large\"\n      />\n      <Flex className={classes.cardTextContainer} direction=\"column\" gap=\"1\">\n        <Text variant=\"body-large\" as=\"h4\">\n          {displayName}\n        </Text>\n        {profile?.email && (\n          <Link\n            className={classes.singlelineEllipsis}\n            href={`mailto:${profile.email}`}\n          >\n            {profile.email}\n          </Link>\n        )}\n        {description && (\n          <Text className={classes.multilineEllipsis}>{description}</Text>\n        )}\n      </Flex>\n    </Card>\n  );\n};\n\n/** @public */\nexport type MembersListCardClassKey = 'memberList';\n\nconst useListStyles = makeStyles(\n  () => ({\n    memberList: {\n      display: 'grid',\n      gap: 'var(--bui-space-3)',\n      gridTemplateColumns: `repeat(auto-fit, minmax(275px, 1fr))`,\n      gridAutoRows: '1fr',\n      margin: 0,\n      padding: 0,\n      paddingTop: 'var(--bui-space-3)',\n      listStyle: 'none',\n    },\n    memberListItem: {\n      display: 'contents',\n    },\n  }),\n  { name: 'PluginOrgMembersListCardComponent' },\n);\n\n/** @public */\nexport const MembersListCard = (props: {\n  memberDisplayTitle?: string;\n  pageSize?: number;\n  showAggregateMembersToggle?: boolean;\n  relationType?: string;\n  /** @deprecated Please use `relationAggregation` instead */\n  relationsType?: EntityRelationAggregation;\n  relationAggregation?: EntityRelationAggregation;\n}) => {\n  const { t } = useTranslationRef(orgTranslationRef);\n  const {\n    memberDisplayTitle,\n    pageSize = 50,\n    showAggregateMembersToggle,\n    relationType = 'memberof',\n  } = props;\n  const relationAggregation =\n    props.relationAggregation ?? props.relationsType ?? 'direct';\n  const classes = useListStyles();\n\n  const { entity: groupEntity } = useEntity<GroupEntity>();\n  const {\n    metadata: { name: groupName, namespace: grpNamespace, title: groupTitle },\n    spec: { profile },\n  } = groupEntity;\n  const catalogApi = useApi(catalogApiRef);\n\n  const displayName = profile?.displayName ?? groupTitle ?? groupName;\n  const cardTitle =\n    memberDisplayTitle ??\n    t('membersListCard.title', { groupName: displayName });\n\n  const groupNamespace = grpNamespace || DEFAULT_NAMESPACE;\n\n  const [offset, setOffset] = useState(0);\n\n  const [showAggregateMembers, setShowAggregateMembers] = useState(\n    relationAggregation === 'aggregated',\n  );\n\n  const [searchTerm, setSearchTerm] = useState('');\n\n  useEffect(() => {\n    setOffset(0);\n  }, [searchTerm, showAggregateMembers]);\n\n  const { loading: loadingDescendantMembers, value: descendantMembers } =\n    useAsync(async () => {\n      if (!showAggregateMembers) {\n        return [] as UserEntity[];\n      }\n\n      return await getAllDesendantMembersForGroupEntity(\n        groupEntity,\n        catalogApi,\n        relationType,\n      );\n    }, [catalogApi, groupEntity, showAggregateMembers]);\n  const {\n    loading,\n    error,\n    value: directMembers,\n  } = useAsync(async () => {\n    const membersList = await catalogApi.getEntities({\n      filter: {\n        kind: 'User',\n        [`relations.${relationType.toLowerCase()}`]: [\n          stringifyEntityRef({\n            kind: 'group',\n            namespace: groupNamespace.toLowerCase(),\n            name: groupName.toLowerCase(),\n          }),\n        ],\n      },\n    });\n\n    return membersList.items as UserEntity[];\n  }, [catalogApi, groupEntity]);\n\n  const members = removeDuplicateEntitiesFrom(\n    [\n      ...(directMembers ?? []),\n      ...(descendantMembers && showAggregateMembers ? descendantMembers : []),\n    ].sort((a, b) =>\n      stringifyEntityRef(a).localeCompare(stringifyEntityRef(b)),\n    ),\n  ) as UserEntity[];\n\n  if (loading) {\n    return <Progress />;\n  } else if (error) {\n    return <ResponseErrorPanel error={error} />;\n  }\n\n  const filteredMembers = members.filter(member => {\n    const fields = [\n      member.metadata.name,\n      member.metadata.title,\n      member.spec?.profile?.displayName,\n      member.spec?.profile?.email,\n    ];\n    return fields.some(val =>\n      val?.toLowerCase().includes(searchTerm.toLowerCase()),\n    );\n  });\n\n  const membersToRender = searchTerm ? filteredMembers : members;\n  const totalCount = membersToRender.length;\n  const hasNextPage = offset + pageSize < totalCount;\n  const hasPreviousPage = offset > 0;\n\n  const pagination =\n    totalCount > pageSize ? (\n      <TablePagination\n        showPageSizeOptions={false}\n        pageSizeOptions={[pageSize]}\n        pageSize={pageSize}\n        offset={offset}\n        totalCount={totalCount}\n        hasNextPage={hasNextPage}\n        hasPreviousPage={hasPreviousPage}\n        onNextPage={() => setOffset(prev => prev + pageSize)}\n        onPreviousPage={() => setOffset(prev => Math.max(0, prev - pageSize))}\n      />\n    ) : undefined;\n\n  let memberList: JSX.Element;\n  if (membersToRender.length > 0) {\n    memberList = (\n      <ul className={classes.memberList}>\n        {membersToRender.slice(offset, offset + pageSize).map(member => (\n          <li\n            className={classes.memberListItem}\n            key={stringifyEntityRef(member)}\n          >\n            <MemberComponent member={member} />\n          </li>\n        ))}\n      </ul>\n    );\n  } else {\n    memberList = (\n      <Box p=\"2\">\n        <Text as=\"p\">\n          {searchTerm\n            ? t('membersListCard.noSearchResult', { searchTerm })\n            : t('membersListCard.noMembersDescription')}\n        </Text>\n      </Box>\n    );\n  }\n\n  return (\n    <EntityInfoCard\n      title={`${cardTitle} (${filteredMembers.length} of ${members.length})`}\n      headerActions={\n        showAggregateMembersToggle && (\n          <Switch\n            isSelected={showAggregateMembers}\n            onChange={setShowAggregateMembers}\n            label={t('membersListCard.aggregateMembersToggle.label')}\n          />\n        )\n      }\n      footerActions={pagination}\n    >\n      {showAggregateMembers && loadingDescendantMembers ? (\n        <Progress />\n      ) : (\n        <>\n          <SearchField\n            aria-label=\"Search members\"\n            placeholder=\"Search members...\"\n            value={searchTerm}\n            onChange={setSearchTerm}\n            onClear={() => setSearchTerm('')}\n          />\n          {memberList}\n        </>\n      )}\n    </EntityInfoCard>\n  );\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"MembersListCard.esm.js","sources":["../../../../../src/components/Cards/Group/MembersList/MembersListCard.tsx"],"sourcesContent":["/*\n * Copyright 2020 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport {\n  DEFAULT_NAMESPACE,\n  GroupEntity,\n  UserEntity,\n  stringifyEntityRef,\n} from '@backstage/catalog-model';\nimport {\n  catalogApiRef,\n  useEntity,\n  EntityInfoCard,\n  useEntityRefLink,\n} from '@backstage/plugin-catalog-react';\nimport { makeStyles } from '@material-ui/core/styles';\nimport { useState, useEffect } from 'react';\nimport useAsync from 'react-use/esm/useAsync';\n\nimport { Progress, ResponseErrorPanel } from '@backstage/core-components';\nimport { useApi } from '@backstage/core-plugin-api';\nimport {\n  getAllDesendantMembersForGroupEntity,\n  removeDuplicateEntitiesFrom,\n} from '../../../../helpers/helpers';\nimport { EntityRelationAggregation } from '../../types';\nimport { useTranslationRef } from '@backstage/frontend-plugin-api';\nimport { orgTranslationRef } from '../../../../translation';\nimport {\n  Box,\n  Card,\n  Flex,\n  Link,\n  SearchField,\n  Switch,\n  TablePagination,\n  Text,\n} from '@backstage/ui';\nimport { UserAvatar } from '../../../UserAvatar';\n\nconst useMemberStyles = makeStyles({\n  card: {\n    display: 'flex',\n    gap: 'var(--bui-space-3)',\n    padding: 'var(--bui-space-3)',\n    alignItems: 'flex-start',\n    flexDirection: 'row',\n    height: 140,\n    overflow: 'hidden',\n  },\n  avatar: {\n    flexShrink: 0,\n  },\n  cardTextContainer: {\n    overflow: 'hidden',\n  },\n  singlelineEllipsis: {\n    overflow: 'hidden',\n    textOverflow: 'ellipsis',\n    whiteSpace: 'nowrap',\n  },\n  multilineEllipsis: {\n    display: '-webkit-box',\n    '-webkit-line-clamp': '3',\n    '-webkit-box-orient': 'vertical',\n    overflow: 'hidden',\n  },\n});\n\nconst MemberComponent = (props: { member: UserEntity }) => {\n  const { t } = useTranslationRef(orgTranslationRef);\n  const classes = useMemberStyles();\n  const {\n    metadata: { name: metaName, description },\n    spec: { profile },\n  } = props.member;\n  const displayName = profile?.displayName ?? metaName;\n  const entityLink = useEntityRefLink();\n\n  return (\n    <Card\n      className={classes.card}\n      href={entityLink(props.member)}\n      label={t('membersListCard.cardLabel', { memberName: displayName })}\n    >\n      <UserAvatar\n        className={classes.avatar}\n        displayName={displayName}\n        entity={props.member}\n        size=\"x-large\"\n      />\n      <Flex className={classes.cardTextContainer} direction=\"column\" gap=\"1\">\n        <Text variant=\"body-large\" as=\"h4\">\n          {displayName}\n        </Text>\n        {profile?.email && (\n          <Link\n            className={classes.singlelineEllipsis}\n            href={`mailto:${profile.email}`}\n          >\n            {profile.email}\n          </Link>\n        )}\n        {description && (\n          <Text className={classes.multilineEllipsis}>{description}</Text>\n        )}\n      </Flex>\n    </Card>\n  );\n};\n\n/** @public */\nexport type MembersListCardClassKey = 'memberList';\n\nconst useListStyles = makeStyles(\n  () => ({\n    memberList: {\n      display: 'grid',\n      gap: 'var(--bui-space-3)',\n      gridTemplateColumns: `repeat(auto-fit, minmax(275px, 1fr))`,\n      gridAutoRows: '1fr',\n      margin: 0,\n      padding: 0,\n      paddingTop: 'var(--bui-space-3)',\n      listStyle: 'none',\n    },\n    memberListItem: {\n      display: 'contents',\n    },\n  }),\n  { name: 'PluginOrgMembersListCardComponent' },\n);\n\n/** @public */\nexport const MembersListCard = (props: {\n  memberDisplayTitle?: string;\n  pageSize?: number;\n  showAggregateMembersToggle?: boolean;\n  relationType?: string;\n  /** @deprecated Please use `relationAggregation` instead */\n  relationsType?: EntityRelationAggregation;\n  relationAggregation?: EntityRelationAggregation;\n}) => {\n  const { t } = useTranslationRef(orgTranslationRef);\n  const {\n    memberDisplayTitle,\n    pageSize = 50,\n    showAggregateMembersToggle,\n    relationType = 'memberof',\n  } = props;\n  const relationAggregation =\n    props.relationAggregation ?? props.relationsType ?? 'direct';\n  const classes = useListStyles();\n\n  const { entity: groupEntity } = useEntity<GroupEntity>();\n  const {\n    metadata: { name: groupName, namespace: grpNamespace, title: groupTitle },\n    spec: { profile },\n  } = groupEntity;\n  const catalogApi = useApi(catalogApiRef);\n\n  const displayName = profile?.displayName ?? groupTitle ?? groupName;\n  const cardTitle =\n    memberDisplayTitle ??\n    t('membersListCard.title', { groupName: displayName });\n\n  const groupNamespace = grpNamespace || DEFAULT_NAMESPACE;\n\n  const [offset, setOffset] = useState(0);\n\n  const [showAggregateMembers, setShowAggregateMembers] = useState(\n    relationAggregation === 'aggregated',\n  );\n\n  const [searchTerm, setSearchTerm] = useState('');\n\n  useEffect(() => {\n    setOffset(0);\n  }, [searchTerm, showAggregateMembers]);\n\n  const { loading: loadingDescendantMembers, value: descendantMembers } =\n    useAsync(async () => {\n      if (!showAggregateMembers) {\n        return [] as UserEntity[];\n      }\n\n      return await getAllDesendantMembersForGroupEntity(\n        groupEntity,\n        catalogApi,\n        relationType,\n      );\n    }, [catalogApi, groupEntity, showAggregateMembers]);\n  const {\n    loading,\n    error,\n    value: directMembers,\n  } = useAsync(async () => {\n    const membersList = await catalogApi.getEntities({\n      filter: {\n        kind: 'User',\n        [`relations.${relationType.toLowerCase()}`]: [\n          stringifyEntityRef({\n            kind: 'group',\n            namespace: groupNamespace.toLowerCase(),\n            name: groupName.toLowerCase(),\n          }),\n        ],\n      },\n    });\n\n    return membersList.items as UserEntity[];\n  }, [catalogApi, groupEntity]);\n\n  const members = removeDuplicateEntitiesFrom(\n    [\n      ...(directMembers ?? []),\n      ...(descendantMembers && showAggregateMembers ? descendantMembers : []),\n    ].sort((a, b) =>\n      stringifyEntityRef(a).localeCompare(stringifyEntityRef(b)),\n    ),\n  ) as UserEntity[];\n\n  if (loading) {\n    return <Progress />;\n  } else if (error) {\n    return <ResponseErrorPanel error={error} />;\n  }\n\n  const filteredMembers = members.filter(member => {\n    const fields = [\n      member.metadata.name,\n      member.metadata.title,\n      member.spec?.profile?.displayName,\n      member.spec?.profile?.email,\n    ];\n    return fields.some(val =>\n      val?.toLowerCase().includes(searchTerm.toLowerCase()),\n    );\n  });\n\n  const membersToRender = searchTerm ? filteredMembers : members;\n  const totalCount = membersToRender.length;\n  const hasNextPage = offset + pageSize < totalCount;\n  const hasPreviousPage = offset > 0;\n\n  const pagination =\n    totalCount > pageSize ? (\n      <TablePagination\n        showPageSizeOptions={false}\n        pageSizeOptions={[pageSize]}\n        pageSize={pageSize}\n        offset={offset}\n        totalCount={totalCount}\n        hasNextPage={hasNextPage}\n        hasPreviousPage={hasPreviousPage}\n        onNextPage={() => setOffset(prev => prev + pageSize)}\n        onPreviousPage={() => setOffset(prev => Math.max(0, prev - pageSize))}\n      />\n    ) : undefined;\n\n  let memberList: JSX.Element;\n  if (membersToRender.length > 0) {\n    memberList = (\n      <ul className={classes.memberList}>\n        {membersToRender.slice(offset, offset + pageSize).map(member => (\n          <li\n            className={classes.memberListItem}\n            key={stringifyEntityRef(member)}\n          >\n            <MemberComponent member={member} />\n          </li>\n        ))}\n      </ul>\n    );\n  } else {\n    memberList = (\n      <Box p=\"2\">\n        <Text as=\"p\">\n          {searchTerm\n            ? t('membersListCard.noSearchResult', { searchTerm })\n            : t('membersListCard.noMembersDescription')}\n        </Text>\n      </Box>\n    );\n  }\n\n  return (\n    <EntityInfoCard\n      title={`${cardTitle} (${filteredMembers.length} of ${members.length})`}\n      headerActions={\n        showAggregateMembersToggle && (\n          <Switch\n            isSelected={showAggregateMembers}\n            onChange={setShowAggregateMembers}\n            label={t('membersListCard.aggregateMembersToggle.label')}\n          />\n        )\n      }\n      footerActions={pagination}\n    >\n      {showAggregateMembers && loadingDescendantMembers ? (\n        <Progress />\n      ) : (\n        <>\n          <SearchField\n            aria-label=\"Search members\"\n            placeholder=\"Search members...\"\n            value={searchTerm}\n            onChange={setSearchTerm}\n            onClear={() => setSearchTerm('')}\n          />\n          {memberList}\n        </>\n      )}\n    </EntityInfoCard>\n  );\n};\n"],"names":[],"mappings":"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"}

package/dist/components/Cards/User/UserProfileCard/UserProfileCard.esm.js

@@ -2,7 +2,7 @@ import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { ANNOTATION_EDIT_URL, RELATION_MEMBER_OF } from '@backstage/catalog-model';
 import { Link } from '@backstage/core-components';
 import { useEntity, getEntityRelations, EntityInfoCard, EntityRefLinks } from '@backstage/plugin-catalog-react';
-import { Text, Box, Flex, Avatar } from '@backstage/ui';
+import { Text, Box, Flex } from '@backstage/ui';
 import { makeStyles, createStyles } from '@material-ui/core/styles';
 import BaseButton from '@material-ui/core/ButtonBase';
 import IconButton from '@material-ui/core/IconButton';
@@ -25,6 +25,7 @@ import { LinksGroup } from '../../Meta/LinksGroup.esm.js';
 import { useState, useCallback } from 'react';
 import { useTranslationRef } from '@backstage/frontend-plugin-api';
 import { orgTranslationRef } from '../../../../translation.esm.js';
+import { UserAvatar } from '../../../UserAvatar/UserAvatar.esm.js';
 
 const useStyles = makeStyles(
   (theme) => createStyles({
@@ -49,12 +50,11 @@ const useStyles = makeStyles(
 );
 const CardTitle = (props) => props.title ? /* @__PURE__ */ jsxs(Flex, { align: "center", gap: "2", children: [
   /* @__PURE__ */ jsx(
-    Avatar,
+    UserAvatar,
     {
-      size: "small",
-      purpose: "decoration",
-      name: props.title,
-      src: props.pictureSrc || ""
+      entity: props.entity,
+      displayName: props.title,
+      size: "small"
     }
   ),
   props.title
@@ -87,7 +87,7 @@ const UserProfileCard = (props) => {
   return /* @__PURE__ */ jsxs(
     EntityInfoCard,
     {
-      title: /* @__PURE__ */ jsx(CardTitle, { title: displayName, pictureSrc: profile?.picture }),
+      title: /* @__PURE__ */ jsx(CardTitle, { entity: user, title: displayName }),
       headerActions: /* @__PURE__ */ jsx(Fragment, { children: entityMetadataEditUrl && /* @__PURE__ */ jsx(
         IconButton,
         {

package/dist/components/Cards/User/UserProfileCard/UserProfileCard.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"UserProfileCard.esm.js","sources":["../../../../../src/components/Cards/User/UserProfileCard/UserProfileCard.tsx"],"sourcesContent":["/*\n * Copyright 2020 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport {\n  ANNOTATION_EDIT_URL,\n  RELATION_MEMBER_OF,\n  UserEntity,\n} from '@backstage/catalog-model';\nimport { Link } from '@backstage/core-components';\nimport { EntityInfoCard } from '@backstage/plugin-catalog-react';\nimport { Avatar, Box, Flex, Text } from '@backstage/ui';\nimport { createStyles, makeStyles } from '@material-ui/core/styles';\nimport BaseButton from '@material-ui/core/ButtonBase';\nimport IconButton from '@material-ui/core/IconButton';\nimport List from '@material-ui/core/List';\nimport ListItem from '@material-ui/core/ListItem';\nimport ListItemIcon from '@material-ui/core/ListItemIcon';\nimport ListItemText from '@material-ui/core/ListItemText';\nimport Tooltip from '@material-ui/core/Tooltip';\nimport Button from '@material-ui/core/Button';\nimport Dialog from '@material-ui/core/Dialog';\nimport DialogTitle from '@material-ui/core/DialogTitle';\nimport DialogContent from '@material-ui/core/DialogContent';\nimport DialogActions from '@material-ui/core/DialogActions';\nimport CloseIcon from '@material-ui/icons/Close';\nimport {\n  EntityRefLinks,\n  getEntityRelations,\n  useEntity,\n} from '@backstage/plugin-catalog-react';\n\nimport Alert from '@material-ui/lab/Alert';\nimport EditIcon from '@material-ui/icons/Edit';\nimport EmailIcon from '@material-ui/icons/Email';\nimport GroupIcon from '@material-ui/icons/Group';\nimport { LinksGroup } from '../../Meta';\n\nimport { useCallback, useState } from 'react';\nimport { useTranslationRef } from '@backstage/frontend-plugin-api';\nimport { orgTranslationRef } from '../../../../translation';\n\n/** @public */\nexport type UserProfileCardClassKey =\n  | 'closeButton'\n  | 'moreButton'\n  | 'dialogPaper'\n  | 'list';\n\nconst useStyles = makeStyles(\n  theme =>\n    createStyles({\n      closeButton: {\n        position: 'absolute',\n        right: theme.spacing(1),\n        top: theme.spacing(1),\n        color: theme.palette.grey[500],\n      },\n      moreButton: {\n        display: 'contents',\n        color: theme.palette.primary.main,\n      },\n      dialogPaper: {\n        minHeight: 400,\n      },\n      list: {\n        overflowWrap: 'anywhere',\n      },\n    }),\n  { name: 'PluginOrgUserProfileCard' },\n);\n\nconst CardTitle = (props: { title: string; pictureSrc?: string }) =>\n  props.title ? (\n    <Flex align=\"center\" gap=\"2\">\n      <Avatar\n        size=\"small\"\n        purpose=\"decoration\"\n        name={props.title}\n        src={props.pictureSrc || ''}\n      />\n      {props.title}\n    </Flex>\n  ) : null;\n\n/** @public */\nexport const UserProfileCard = (props: {\n  showLinks?: boolean;\n  maxRelations?: number;\n  hideIcons?: boolean;\n}) => {\n  const { maxRelations, hideIcons } = props;\n\n  const classes = useStyles();\n  const { entity: user } = useEntity<UserEntity>();\n  const [isAllGroupsDialogOpen, setIsAllGroupsDialogOpen] = useState(false);\n  const { t } = useTranslationRef(orgTranslationRef);\n\n  const toggleAllGroupsDialog = useCallback(\n    () =>\n      setIsAllGroupsDialogOpen(\n        prevIsViewAllGroupsDialogOpen => !prevIsViewAllGroupsDialogOpen,\n      ),\n    [],\n  );\n\n  if (!user) {\n    return <Alert severity=\"error\">{t('userProfileCard.userNotFound')}</Alert>;\n  }\n\n  const entityMetadataEditUrl =\n    user.metadata.annotations?.[ANNOTATION_EDIT_URL];\n\n  const {\n    metadata: { name: metaName, description, links },\n    spec: { profile },\n  } = user;\n  const displayName = profile?.displayName ?? metaName;\n  const emailHref = profile?.email ? `mailto:${profile.email}` : undefined;\n  const memberOfRelations = getEntityRelations(user, RELATION_MEMBER_OF, {\n    kind: 'Group',\n  });\n\n  return (\n    <EntityInfoCard\n      title={<CardTitle title={displayName} pictureSrc={profile?.picture} />}\n      headerActions={\n        <>\n          {entityMetadataEditUrl && (\n            <IconButton\n              aria-label={t('userProfileCard.editIconButtonTitle')}\n              title={t('userProfileCard.editIconButtonTitle')}\n              component={Link}\n              to={entityMetadataEditUrl}\n            >\n              <EditIcon />\n            </IconButton>\n          )}\n        </>\n      }\n    >\n      {description && <Text color=\"secondary\">{description}</Text>}\n      <Box p=\"2\">\n        <List className={classes.list}>\n          {profile?.email && (\n            <ListItem>\n              <ListItemIcon>\n                <Tooltip title={t('userProfileCard.listItemTitle.email')}>\n                  <EmailIcon />\n                </Tooltip>\n              </ListItemIcon>\n              <ListItemText>\n                <Link to={emailHref ?? ''}>{profile.email}</Link>\n              </ListItemText>\n            </ListItem>\n          )}\n\n          {maxRelations === undefined || maxRelations > 0 ? (\n            <ListItem>\n              <ListItemIcon>\n                <Tooltip title={t('userProfileCard.listItemTitle.memberOf')}>\n                  <GroupIcon />\n                </Tooltip>\n              </ListItemIcon>\n              <ListItemText>\n                <EntityRefLinks\n                  entityRefs={memberOfRelations.slice(0, maxRelations)}\n                  defaultKind=\"Group\"\n                  hideIcons={hideIcons}\n                />\n                {maxRelations && memberOfRelations.length > maxRelations ? (\n                  <>\n                    ,\n                    <BaseButton\n                      className={classes.moreButton}\n                      onClick={toggleAllGroupsDialog}\n                      disableRipple\n                    >\n                      {t('userProfileCard.moreGroupButtonTitle', {\n                        number: String(memberOfRelations.length - maxRelations),\n                      })}\n                    </BaseButton>\n                  </>\n                ) : null}\n              </ListItemText>\n            </ListItem>\n          ) : null}\n          {props?.showLinks && <LinksGroup links={links} />}\n        </List>\n      </Box>\n\n      <Dialog\n        classes={{ paper: classes.dialogPaper }}\n        open={isAllGroupsDialogOpen}\n        onClose={toggleAllGroupsDialog}\n        scroll=\"paper\"\n        aria-labelledby=\"view-all-groups-dialog-title\"\n        maxWidth=\"md\"\n        fullWidth\n      >\n        <DialogTitle id=\"view-all-groups-dialog-title\">\n          {t('userProfileCard.allGroupDialog.title', {\n            name: user.metadata.name,\n          })}\n          <IconButton\n            className={classes.closeButton}\n            aria-label={t('userProfileCard.allGroupDialog.closeButtonTitle')}\n            onClick={toggleAllGroupsDialog}\n          >\n            <CloseIcon />\n          </IconButton>\n        </DialogTitle>\n        <DialogContent dividers>\n          <EntityRefLinks entityRefs={memberOfRelations} defaultKind=\"Group\" />\n        </DialogContent>\n        <DialogActions>\n          <Button onClick={toggleAllGroupsDialog}>\n            {t('userProfileCard.allGroupDialog.closeButtonTitle')}\n          </Button>\n        </DialogActions>\n      </Dialog>\n    </EntityInfoCard>\n  );\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"UserProfileCard.esm.js","sources":["../../../../../src/components/Cards/User/UserProfileCard/UserProfileCard.tsx"],"sourcesContent":["/*\n * Copyright 2020 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport {\n  ANNOTATION_EDIT_URL,\n  RELATION_MEMBER_OF,\n  UserEntity,\n} from '@backstage/catalog-model';\nimport { Link } from '@backstage/core-components';\nimport { EntityInfoCard } from '@backstage/plugin-catalog-react';\nimport { Box, Flex, Text } from '@backstage/ui';\nimport { createStyles, makeStyles } from '@material-ui/core/styles';\nimport BaseButton from '@material-ui/core/ButtonBase';\nimport IconButton from '@material-ui/core/IconButton';\nimport List from '@material-ui/core/List';\nimport ListItem from '@material-ui/core/ListItem';\nimport ListItemIcon from '@material-ui/core/ListItemIcon';\nimport ListItemText from '@material-ui/core/ListItemText';\nimport Tooltip from '@material-ui/core/Tooltip';\nimport Button from '@material-ui/core/Button';\nimport Dialog from '@material-ui/core/Dialog';\nimport DialogTitle from '@material-ui/core/DialogTitle';\nimport DialogContent from '@material-ui/core/DialogContent';\nimport DialogActions from '@material-ui/core/DialogActions';\nimport CloseIcon from '@material-ui/icons/Close';\nimport {\n  EntityRefLinks,\n  getEntityRelations,\n  useEntity,\n} from '@backstage/plugin-catalog-react';\n\nimport Alert from '@material-ui/lab/Alert';\nimport EditIcon from '@material-ui/icons/Edit';\nimport EmailIcon from '@material-ui/icons/Email';\nimport GroupIcon from '@material-ui/icons/Group';\nimport { LinksGroup } from '../../Meta';\n\nimport { useCallback, useState } from 'react';\nimport { useTranslationRef } from '@backstage/frontend-plugin-api';\nimport { orgTranslationRef } from '../../../../translation';\nimport { UserAvatar } from '../../../UserAvatar';\n\n/** @public */\nexport type UserProfileCardClassKey =\n  | 'closeButton'\n  | 'moreButton'\n  | 'dialogPaper'\n  | 'list';\n\nconst useStyles = makeStyles(\n  theme =>\n    createStyles({\n      closeButton: {\n        position: 'absolute',\n        right: theme.spacing(1),\n        top: theme.spacing(1),\n        color: theme.palette.grey[500],\n      },\n      moreButton: {\n        display: 'contents',\n        color: theme.palette.primary.main,\n      },\n      dialogPaper: {\n        minHeight: 400,\n      },\n      list: {\n        overflowWrap: 'anywhere',\n      },\n    }),\n  { name: 'PluginOrgUserProfileCard' },\n);\n\nconst CardTitle = (props: { entity: UserEntity; title: string }) =>\n  props.title ? (\n    <Flex align=\"center\" gap=\"2\">\n      <UserAvatar\n        entity={props.entity}\n        displayName={props.title}\n        size=\"small\"\n      />\n      {props.title}\n    </Flex>\n  ) : null;\n\n/** @public */\nexport const UserProfileCard = (props: {\n  showLinks?: boolean;\n  maxRelations?: number;\n  hideIcons?: boolean;\n}) => {\n  const { maxRelations, hideIcons } = props;\n\n  const classes = useStyles();\n  const { entity: user } = useEntity<UserEntity>();\n  const [isAllGroupsDialogOpen, setIsAllGroupsDialogOpen] = useState(false);\n  const { t } = useTranslationRef(orgTranslationRef);\n\n  const toggleAllGroupsDialog = useCallback(\n    () =>\n      setIsAllGroupsDialogOpen(\n        prevIsViewAllGroupsDialogOpen => !prevIsViewAllGroupsDialogOpen,\n      ),\n    [],\n  );\n\n  if (!user) {\n    return <Alert severity=\"error\">{t('userProfileCard.userNotFound')}</Alert>;\n  }\n\n  const entityMetadataEditUrl =\n    user.metadata.annotations?.[ANNOTATION_EDIT_URL];\n\n  const {\n    metadata: { name: metaName, description, links },\n    spec: { profile },\n  } = user;\n  const displayName = profile?.displayName ?? metaName;\n  const emailHref = profile?.email ? `mailto:${profile.email}` : undefined;\n  const memberOfRelations = getEntityRelations(user, RELATION_MEMBER_OF, {\n    kind: 'Group',\n  });\n\n  return (\n    <EntityInfoCard\n      title={<CardTitle entity={user} title={displayName} />}\n      headerActions={\n        <>\n          {entityMetadataEditUrl && (\n            <IconButton\n              aria-label={t('userProfileCard.editIconButtonTitle')}\n              title={t('userProfileCard.editIconButtonTitle')}\n              component={Link}\n              to={entityMetadataEditUrl}\n            >\n              <EditIcon />\n            </IconButton>\n          )}\n        </>\n      }\n    >\n      {description && <Text color=\"secondary\">{description}</Text>}\n      <Box p=\"2\">\n        <List className={classes.list}>\n          {profile?.email && (\n            <ListItem>\n              <ListItemIcon>\n                <Tooltip title={t('userProfileCard.listItemTitle.email')}>\n                  <EmailIcon />\n                </Tooltip>\n              </ListItemIcon>\n              <ListItemText>\n                <Link to={emailHref ?? ''}>{profile.email}</Link>\n              </ListItemText>\n            </ListItem>\n          )}\n\n          {maxRelations === undefined || maxRelations > 0 ? (\n            <ListItem>\n              <ListItemIcon>\n                <Tooltip title={t('userProfileCard.listItemTitle.memberOf')}>\n                  <GroupIcon />\n                </Tooltip>\n              </ListItemIcon>\n              <ListItemText>\n                <EntityRefLinks\n                  entityRefs={memberOfRelations.slice(0, maxRelations)}\n                  defaultKind=\"Group\"\n                  hideIcons={hideIcons}\n                />\n                {maxRelations && memberOfRelations.length > maxRelations ? (\n                  <>\n                    ,\n                    <BaseButton\n                      className={classes.moreButton}\n                      onClick={toggleAllGroupsDialog}\n                      disableRipple\n                    >\n                      {t('userProfileCard.moreGroupButtonTitle', {\n                        number: String(memberOfRelations.length - maxRelations),\n                      })}\n                    </BaseButton>\n                  </>\n                ) : null}\n              </ListItemText>\n            </ListItem>\n          ) : null}\n          {props?.showLinks && <LinksGroup links={links} />}\n        </List>\n      </Box>\n\n      <Dialog\n        classes={{ paper: classes.dialogPaper }}\n        open={isAllGroupsDialogOpen}\n        onClose={toggleAllGroupsDialog}\n        scroll=\"paper\"\n        aria-labelledby=\"view-all-groups-dialog-title\"\n        maxWidth=\"md\"\n        fullWidth\n      >\n        <DialogTitle id=\"view-all-groups-dialog-title\">\n          {t('userProfileCard.allGroupDialog.title', {\n            name: user.metadata.name,\n          })}\n          <IconButton\n            className={classes.closeButton}\n            aria-label={t('userProfileCard.allGroupDialog.closeButtonTitle')}\n            onClick={toggleAllGroupsDialog}\n          >\n            <CloseIcon />\n          </IconButton>\n        </DialogTitle>\n        <DialogContent dividers>\n          <EntityRefLinks entityRefs={memberOfRelations} defaultKind=\"Group\" />\n        </DialogContent>\n        <DialogActions>\n          <Button onClick={toggleAllGroupsDialog}>\n            {t('userProfileCard.allGroupDialog.closeButtonTitle')}\n          </Button>\n        </DialogActions>\n      </Dialog>\n    </EntityInfoCard>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8DA,MAAM,SAAA,GAAY,UAAA;AAAA,EAChB,WACE,YAAA,CAAa;AAAA,IACX,WAAA,EAAa;AAAA,MACX,QAAA,EAAU,UAAA;AAAA,MACV,KAAA,EAAO,KAAA,CAAM,OAAA,CAAQ,CAAC,CAAA;AAAA,MACtB,GAAA,EAAK,KAAA,CAAM,OAAA,CAAQ,CAAC,CAAA;AAAA,MACpB,KAAA,EAAO,KAAA,CAAM,OAAA,CAAQ,IAAA,CAAK,GAAG;AAAA,KAC/B;AAAA,IACA,UAAA,EAAY;AAAA,MACV,OAAA,EAAS,UAAA;AAAA,MACT,KAAA,EAAO,KAAA,CAAM,OAAA,CAAQ,OAAA,CAAQ;AAAA,KAC/B;AAAA,IACA,WAAA,EAAa;AAAA,MACX,SAAA,EAAW;AAAA,KACb;AAAA,IACA,IAAA,EAAM;AAAA,MACJ,YAAA,EAAc;AAAA;AAChB,GACD,CAAA;AAAA,EACH,EAAE,MAAM,0BAAA;AACV,CAAA;AAEA,MAAM,SAAA,GAAY,CAAC,KAAA,KACjB,KAAA,CAAM,KAAA,wBACH,IAAA,EAAA,EAAK,KAAA,EAAM,QAAA,EAAS,GAAA,EAAI,GAAA,EACvB,QAAA,EAAA;AAAA,kBAAA,GAAA;AAAA,IAAC,UAAA;AAAA,IAAA;AAAA,MACC,QAAQ,KAAA,CAAM,MAAA;AAAA,MACd,aAAa,KAAA,CAAM,KAAA;AAAA,MACnB,IAAA,EAAK;AAAA;AAAA,GACP;AAAA,EACC,KAAA,CAAM;AAAA,CAAA,EACT,CAAA,GACE,IAAA;AAGC,MAAM,eAAA,GAAkB,CAAC,KAAA,KAI1B;AACJ,EAAA,MAAM,EAAE,YAAA,EAAc,SAAA,EAAU,GAAI,KAAA;AAEpC,EAAA,MAAM,UAAU,SAAA,EAAU;AAC1B,EAAA,MAAM,EAAE,MAAA,EAAQ,IAAA,EAAK,GAAI,SAAA,EAAsB;AAC/C,EAAA,MAAM,CAAC,qBAAA,EAAuB,wBAAwB,CAAA,GAAI,SAAS,KAAK,CAAA;AACxE,EAAA,MAAM,EAAE,CAAA,EAAE,GAAI,iBAAA,CAAkB,iBAAiB,CAAA;AAEjD,EAAA,MAAM,qBAAA,GAAwB,WAAA;AAAA,IAC5B,MACE,wBAAA;AAAA,MACE,mCAAiC,CAAC;AAAA,KACpC;AAAA,IACF;AAAC,GACH;AAEA,EAAA,IAAI,CAAC,IAAA,EAAM;AACT,IAAA,2BAAQ,KAAA,EAAA,EAAM,QAAA,EAAS,OAAA,EAAS,QAAA,EAAA,CAAA,CAAE,8BAA8B,CAAA,EAAE,CAAA;AAAA,EACpE;AAEA,EAAA,MAAM,qBAAA,GACJ,IAAA,CAAK,QAAA,CAAS,WAAA,GAAc,mBAAmB,CAAA;AAEjD,EAAA,MAAM;AAAA,IACJ,QAAA,EAAU,EAAE,IAAA,EAAM,QAAA,EAAU,aAAa,KAAA,EAAM;AAAA,IAC/C,IAAA,EAAM,EAAE,OAAA;AAAQ,GAClB,GAAI,IAAA;AACJ,EAAA,MAAM,WAAA,GAAc,SAAS,WAAA,IAAe,QAAA;AAC5C,EAAA,MAAM,YAAY,OAAA,EAAS,KAAA,GAAQ,CAAA,OAAA,EAAU,OAAA,CAAQ,KAAK,CAAA,CAAA,GAAK,MAAA;AAC/D,EAAA,MAAM,iBAAA,GAAoB,kBAAA,CAAmB,IAAA,EAAM,kBAAA,EAAoB;AAAA,IACrE,IAAA,EAAM;AAAA,GACP,CAAA;AAED,EAAA,uBACE,IAAA;AAAA,IAAC,cAAA;AAAA,IAAA;AAAA,MACC,uBAAO,GAAA,CAAC,SAAA,EAAA,EAAU,MAAA,EAAQ,IAAA,EAAM,OAAO,WAAA,EAAa,CAAA;AAAA,MACpD,aAAA,kCAEK,QAAA,EAAA,qBAAA,oBACC,GAAA;AAAA,QAAC,UAAA;AAAA,QAAA;AAAA,UACC,YAAA,EAAY,EAAE,qCAAqC,CAAA;AAAA,UACnD,KAAA,EAAO,EAAE,qCAAqC,CAAA;AAAA,UAC9C,SAAA,EAAW,IAAA;AAAA,UACX,EAAA,EAAI,qBAAA;AAAA,UAEJ,8BAAC,QAAA,EAAA,EAAS;AAAA;AAAA,OACZ,EAEJ,CAAA;AAAA,MAGD,QAAA,EAAA;AAAA,QAAA,WAAA,oBAAe,GAAA,CAAC,IAAA,EAAA,EAAK,KAAA,EAAM,WAAA,EAAa,QAAA,EAAA,WAAA,EAAY,CAAA;AAAA,wBACrD,GAAA,CAAC,OAAI,CAAA,EAAE,GAAA,EACL,+BAAC,IAAA,EAAA,EAAK,SAAA,EAAW,QAAQ,IAAA,EACtB,QAAA,EAAA;AAAA,UAAA,OAAA,EAAS,KAAA,yBACP,QAAA,EAAA,EACC,QAAA,EAAA;AAAA,4BAAA,GAAA,CAAC,YAAA,EAAA,EACC,QAAA,kBAAA,GAAA,CAAC,OAAA,EAAA,EAAQ,KAAA,EAAO,CAAA,CAAE,qCAAqC,CAAA,EACrD,QAAA,kBAAA,GAAA,CAAC,SAAA,EAAA,EAAU,CAAA,EACb,CAAA,EACF,CAAA;AAAA,4BACA,GAAA,CAAC,gBACC,QAAA,kBAAA,GAAA,CAAC,IAAA,EAAA,EAAK,IAAI,SAAA,IAAa,EAAA,EAAK,QAAA,EAAA,OAAA,CAAQ,KAAA,EAAM,CAAA,EAC5C;AAAA,WAAA,EACF,CAAA;AAAA,UAGD,YAAA,KAAiB,MAAA,IAAa,YAAA,GAAe,CAAA,wBAC3C,QAAA,EAAA,EACC,QAAA,EAAA;AAAA,4BAAA,GAAA,CAAC,YAAA,EAAA,EACC,QAAA,kBAAA,GAAA,CAAC,OAAA,EAAA,EAAQ,KAAA,EAAO,CAAA,CAAE,wCAAwC,CAAA,EACxD,QAAA,kBAAA,GAAA,CAAC,SAAA,EAAA,EAAU,CAAA,EACb,CAAA,EACF,CAAA;AAAA,iCACC,YAAA,EAAA,EACC,QAAA,EAAA;AAAA,8BAAA,GAAA;AAAA,gBAAC,cAAA;AAAA,gBAAA;AAAA,kBACC,UAAA,EAAY,iBAAA,CAAkB,KAAA,CAAM,CAAA,EAAG,YAAY,CAAA;AAAA,kBACnD,WAAA,EAAY,OAAA;AAAA,kBACZ;AAAA;AAAA,eACF;AAAA,cACC,YAAA,IAAgB,iBAAA,CAAkB,MAAA,GAAS,YAAA,mBAC1C,IAAA,CAAA,QAAA,EAAA,EAAE,QAAA,EAAA;AAAA,gBAAA,GAAA;AAAA,gCAEA,GAAA;AAAA,kBAAC,UAAA;AAAA,kBAAA;AAAA,oBACC,WAAW,OAAA,CAAQ,UAAA;AAAA,oBACnB,OAAA,EAAS,qBAAA;AAAA,oBACT,aAAA,EAAa,IAAA;AAAA,oBAEZ,YAAE,sCAAA,EAAwC;AAAA,sBACzC,MAAA,EAAQ,MAAA,CAAO,iBAAA,CAAkB,MAAA,GAAS,YAAY;AAAA,qBACvD;AAAA;AAAA;AACH,eAAA,EACF,CAAA,GACE;AAAA,aAAA,EACN;AAAA,WAAA,EACF,CAAA,GACE,IAAA;AAAA,UACH,KAAA,EAAO,SAAA,oBAAa,GAAA,CAAC,UAAA,EAAA,EAAW,KAAA,EAAc;AAAA,SAAA,EACjD,CAAA,EACF,CAAA;AAAA,wBAEA,IAAA;AAAA,UAAC,MAAA;AAAA,UAAA;AAAA,YACC,OAAA,EAAS,EAAE,KAAA,EAAO,OAAA,CAAQ,WAAA,EAAY;AAAA,YACtC,IAAA,EAAM,qBAAA;AAAA,YACN,OAAA,EAAS,qBAAA;AAAA,YACT,MAAA,EAAO,OAAA;AAAA,YACP,iBAAA,EAAgB,8BAAA;AAAA,YAChB,QAAA,EAAS,IAAA;AAAA,YACT,SAAA,EAAS,IAAA;AAAA,YAET,QAAA,EAAA;AAAA,8BAAA,IAAA,CAAC,WAAA,EAAA,EAAY,IAAG,8BAAA,EACb,QAAA,EAAA;AAAA,gBAAA,CAAA,CAAE,sCAAA,EAAwC;AAAA,kBACzC,IAAA,EAAM,KAAK,QAAA,CAAS;AAAA,iBACrB,CAAA;AAAA,gCACD,GAAA;AAAA,kBAAC,UAAA;AAAA,kBAAA;AAAA,oBACC,WAAW,OAAA,CAAQ,WAAA;AAAA,oBACnB,YAAA,EAAY,EAAE,iDAAiD,CAAA;AAAA,oBAC/D,OAAA,EAAS,qBAAA;AAAA,oBAET,8BAAC,SAAA,EAAA,EAAU;AAAA;AAAA;AACb,eAAA,EACF,CAAA;AAAA,8BACA,GAAA,CAAC,aAAA,EAAA,EAAc,QAAA,EAAQ,IAAA,EACrB,QAAA,kBAAA,GAAA,CAAC,kBAAe,UAAA,EAAY,iBAAA,EAAmB,WAAA,EAAY,OAAA,EAAQ,CAAA,EACrE,CAAA;AAAA,8BACA,GAAA,CAAC,iBACC,QAAA,kBAAA,GAAA,CAAC,MAAA,EAAA,EAAO,SAAS,qBAAA,EACd,QAAA,EAAA,CAAA,CAAE,iDAAiD,CAAA,EACtD,CAAA,EACF;AAAA;AAAA;AAAA;AACF;AAAA;AAAA,GACF;AAEJ;;"}

package/dist/components/UserAvatar/DefaultUserAvatar.esm.js

@@ -0,0 +1,20 @@
+import { jsx } from 'react/jsx-runtime';
+import { Avatar } from '@backstage/ui';
+
+const DefaultUserAvatar = (props) => {
+  const { entity, displayName, className, size = "x-large", purpose } = props;
+  const picture = entity.spec?.profile?.picture;
+  return /* @__PURE__ */ jsx(
+    Avatar,
+    {
+      className,
+      name: displayName,
+      src: picture ?? "",
+      purpose: purpose ?? "decoration",
+      size
+    }
+  );
+};
+
+export { DefaultUserAvatar };
+//# sourceMappingURL=DefaultUserAvatar.esm.js.map

package/dist/components/UserAvatar/DefaultUserAvatar.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DefaultUserAvatar.esm.js","sources":["../../../src/components/UserAvatar/DefaultUserAvatar.tsx"],"sourcesContent":["/*\n * Copyright 2026 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { UserEntity } from '@backstage/catalog-model';\nimport { Avatar, AvatarOwnProps } from '@backstage/ui';\n\n/**\n * Props for the default {@link UserAvatar} implementation.\n *\n * @public\n */\nexport interface DefaultUserAvatarProps {\n  entity: UserEntity;\n  displayName: string;\n  className?: string;\n  size?: AvatarOwnProps['size'];\n  purpose?: AvatarOwnProps['purpose'];\n}\n\n/**\n * Default implementation of the {@link UserAvatar} swappable component.\n *\n * @public\n */\nexport const DefaultUserAvatar = (props: DefaultUserAvatarProps) => {\n  const { entity, displayName, className, size = 'x-large', purpose } = props;\n  const picture = entity.spec?.profile?.picture;\n\n  return (\n    <Avatar\n      className={className}\n      name={displayName}\n      src={picture ?? ''}\n      purpose={purpose ?? 'decoration'}\n      size={size}\n    />\n  );\n};\n"],"names":[],"mappings":";;;AAqCO,MAAM,iBAAA,GAAoB,CAAC,KAAA,KAAkC;AAClE,EAAA,MAAM,EAAE,MAAA,EAAQ,WAAA,EAAa,WAAW,IAAA,GAAO,SAAA,EAAW,SAAQ,GAAI,KAAA;AACtE,EAAA,MAAM,OAAA,GAAU,MAAA,CAAO,IAAA,EAAM,OAAA,EAAS,OAAA;AAEtC,EAAA,uBACE,GAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,SAAA;AAAA,MACA,IAAA,EAAM,WAAA;AAAA,MACN,KAAK,OAAA,IAAW,EAAA;AAAA,MAChB,SAAS,OAAA,IAAW,YAAA;AAAA,MACpB;AAAA;AAAA,GACF;AAEJ;;"}

package/dist/components/UserAvatar/UserAvatar.esm.js

@@ -0,0 +1,16 @@
+import { createSwappableComponent } from '@backstage/frontend-plugin-api';
+
+const UserAvatar = createSwappableComponent({
+  id: "org.user-avatar",
+  loader: () => import('./DefaultUserAvatar.esm.js').then((m) => m.DefaultUserAvatar),
+  transformProps: ({ entity, displayName, className, size, purpose }) => ({
+    entity,
+    displayName: displayName ?? entity.spec?.profile?.displayName ?? entity.metadata.name,
+    className,
+    size,
+    purpose
+  })
+});
+
+export { UserAvatar };
+//# sourceMappingURL=UserAvatar.esm.js.map

package/dist/components/UserAvatar/UserAvatar.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"UserAvatar.esm.js","sources":["../../../src/components/UserAvatar/UserAvatar.tsx"],"sourcesContent":["/*\n * Copyright 2026 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { UserEntity } from '@backstage/catalog-model';\nimport { createSwappableComponent } from '@backstage/frontend-plugin-api';\nimport type { AvatarOwnProps } from '@backstage/ui';\nimport type { DefaultUserAvatarProps } from './DefaultUserAvatar';\n\n/**\n * Props for the {@link UserAvatar} swappable component.\n *\n * @public\n */\nexport interface UserAvatarProps {\n  /**\n   * The catalog user entity whose profile picture should be displayed.\n   */\n  entity: UserEntity;\n  /**\n   * Display name used for avatar initials when no picture is available.\n   * Defaults to `entity.spec.profile.displayName` or `entity.metadata.name`.\n   */\n  displayName?: string;\n  className?: string;\n  size?: AvatarOwnProps['size'];\n  purpose?: AvatarOwnProps['purpose'];\n}\n\n/**\n * Swappable component that renders a user profile avatar. Apps can override\n * this to customize avatar rendering consistently across org plugin surfaces\n * such as the members list and user profile cards.\n *\n * @public\n */\nexport const UserAvatar = createSwappableComponent<\n  DefaultUserAvatarProps,\n  UserAvatarProps\n>({\n  id: 'org.user-avatar',\n  loader: () => import('./DefaultUserAvatar').then(m => m.DefaultUserAvatar),\n  transformProps: ({ entity, displayName, className, size, purpose }) => ({\n    entity,\n    displayName:\n      displayName ?? entity.spec?.profile?.displayName ?? entity.metadata.name,\n    className,\n    size,\n    purpose,\n  }),\n});\n"],"names":[],"mappings":";;AAgDO,MAAM,aAAa,wBAAA,CAGxB;AAAA,EACA,EAAA,EAAI,iBAAA;AAAA,EACJ,MAAA,EAAQ,MAAM,OAAO,4BAAqB,EAAE,IAAA,CAAK,CAAA,CAAA,KAAK,EAAE,iBAAiB,CAAA;AAAA,EACzE,cAAA,EAAgB,CAAC,EAAE,MAAA,EAAQ,aAAa,SAAA,EAAW,IAAA,EAAM,SAAQ,MAAO;AAAA,IACtE,MAAA;AAAA,IACA,aACE,WAAA,IAAe,MAAA,CAAO,MAAM,OAAA,EAAS,WAAA,IAAe,OAAO,QAAA,CAAS,IAAA;AAAA,IACtE,SAAA;AAAA,IACA,IAAA;AAAA,IACA;AAAA,GACF;AACF,CAAC;;"}

package/dist/components/index.esm.js

@@ -3,6 +3,8 @@ import { GroupProfileCard } from './Cards/Group/GroupProfile/GroupProfileCard.es
 import { UserProfileCard } from './Cards/User/UserProfileCard/UserProfileCard.esm.js';
 import { OwnershipCard } from './Cards/OwnershipCard/OwnershipCard.esm.js';
 export { MyGroupsSidebarItem } from './MyGroupsSidebarItem/MyGroupsSidebarItem.esm.js';
+export { UserAvatar } from './UserAvatar/UserAvatar.esm.js';
+export { DefaultUserAvatar } from './UserAvatar/DefaultUserAvatar.esm.js';
 
 
 

package/dist/components/index.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.esm.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;"}
+{"version":3,"file":"index.esm.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;"}

package/dist/index.d.ts

@@ -2,6 +2,8 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as _backstage_core_plugin_api from '@backstage/core-plugin-api';
 import { IconComponent } from '@backstage/core-plugin-api';
 import * as _backstage_frontend_plugin_api from '@backstage/frontend-plugin-api';
+import { UserEntity } from '@backstage/catalog-model';
+import { AvatarOwnProps } from '@backstage/ui';
 
 /** @public */
 type EntityRelationAggregation = 'direct' | 'aggregated';
@@ -60,6 +62,56 @@ declare const MyGroupsSidebarItem: (props: {
     filter?: Record<string, string | symbol | (string | symbol)[]>;
 }) => react_jsx_runtime.JSX.Element | null;
 
+/**
+ * Props for the default {@link UserAvatar} implementation.
+ *
+ * @public
+ */
+interface DefaultUserAvatarProps {
+    entity: UserEntity;
+    displayName: string;
+    className?: string;
+    size?: AvatarOwnProps['size'];
+    purpose?: AvatarOwnProps['purpose'];
+}
+/**
+ * Default implementation of the {@link UserAvatar} swappable component.
+ *
+ * @public
+ */
+declare const DefaultUserAvatar: (props: DefaultUserAvatarProps) => react_jsx_runtime.JSX.Element;
+
+/**
+ * Props for the {@link UserAvatar} swappable component.
+ *
+ * @public
+ */
+interface UserAvatarProps {
+    /**
+     * The catalog user entity whose profile picture should be displayed.
+     */
+    entity: UserEntity;
+    /**
+     * Display name used for avatar initials when no picture is available.
+     * Defaults to `entity.spec.profile.displayName` or `entity.metadata.name`.
+     */
+    displayName?: string;
+    className?: string;
+    size?: AvatarOwnProps['size'];
+    purpose?: AvatarOwnProps['purpose'];
+}
+/**
+ * Swappable component that renders a user profile avatar. Apps can override
+ * this to customize avatar rendering consistently across org plugin surfaces
+ * such as the members list and user profile cards.
+ *
+ * @public
+ */
+declare const UserAvatar: {
+    (props: UserAvatarProps): JSX.Element | null;
+    ref: _backstage_frontend_plugin_api.SwappableComponentRef<DefaultUserAvatarProps, UserAvatarProps>;
+};
+
 /** @public */
 declare const orgPlugin: _backstage_core_plugin_api.BackstagePlugin<{}, {
     catalogIndex: _backstage_core_plugin_api.ExternalRouteRef<undefined, true>;
@@ -120,5 +172,5 @@ declare const orgTranslationRef: _backstage_frontend_plugin_api.TranslationRef<"
     readonly "userProfileCard.allGroupDialog.closeButtonTitle": "Close";
 }>;
 
-export { EntityGroupProfileCard, EntityMembersListCard, EntityOwnershipCard, EntityUserProfileCard, GroupProfileCard, MembersListCard, MyGroupsSidebarItem, OwnershipCard, UserProfileCard, orgPlugin, orgTranslationRef, orgPlugin as plugin };
-export type { ComponentsGridClassKey, EntityRelationAggregation, MembersListCardClassKey, OwnershipCardClassKey, UserProfileCardClassKey };
+export { DefaultUserAvatar, EntityGroupProfileCard, EntityMembersListCard, EntityOwnershipCard, EntityUserProfileCard, GroupProfileCard, MembersListCard, MyGroupsSidebarItem, OwnershipCard, UserAvatar, UserProfileCard, orgPlugin, orgTranslationRef, orgPlugin as plugin };
+export type { ComponentsGridClassKey, DefaultUserAvatarProps, EntityRelationAggregation, MembersListCardClassKey, OwnershipCardClassKey, UserAvatarProps, UserProfileCardClassKey };

package/dist/index.esm.js

@@ -4,5 +4,7 @@ export { GroupProfileCard } from './components/Cards/Group/GroupProfile/GroupPro
 export { UserProfileCard } from './components/Cards/User/UserProfileCard/UserProfileCard.esm.js';
 export { OwnershipCard } from './components/Cards/OwnershipCard/OwnershipCard.esm.js';
 export { MyGroupsSidebarItem } from './components/MyGroupsSidebarItem/MyGroupsSidebarItem.esm.js';
+export { UserAvatar } from './components/UserAvatar/UserAvatar.esm.js';
+export { DefaultUserAvatar } from './components/UserAvatar/DefaultUserAvatar.esm.js';
 export { orgTranslationRef } from './translation.esm.js';
 //# sourceMappingURL=index.esm.js.map

package/dist/index.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.esm.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}
+{"version":3,"file":"index.esm.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;"}

package/dist/package.json.esm.js

@@ -1,5 +1,5 @@
 var name = "@backstage/plugin-org";
-var version = "0.7.10-next.0";
+var version = "0.8.0-next.1";
 var description = "A Backstage plugin that helps you create entity pages for your organization";
 var backstage = {
 	role: "frontend-plugin",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@backstage/plugin-org",
-  "version": "0.7.10-next.0",
+  "version": "0.8.0-next.1",
   "description": "A Backstage plugin that helps you create entity pages for your organization",
   "backstage": {
     "role": "frontend-plugin",
@@ -64,11 +64,11 @@
   },
   "dependencies": {
     "@backstage/catalog-model": "1.10.2-next.0",
-    "@backstage/core-components": "0.18.15-next.0",
+    "@backstage/core-components": "0.18.15-next.2",
     "@backstage/core-plugin-api": "1.12.11-next.0",
     "@backstage/frontend-plugin-api": "0.18.2-next.0",
     "@backstage/plugin-catalog-common": "1.2.1-next.0",
-    "@backstage/plugin-catalog-react": "3.2.4-next.0",
+    "@backstage/plugin-catalog-react": "3.2.4-next.1",
     "@backstage/ui": "0.18.0",
     "@material-ui/core": "^4.12.2",
     "@material-ui/icons": "^4.9.1",
@@ -87,7 +87,7 @@
     "@backstage/core-app-api": "1.20.6-next.0",
     "@backstage/dev-utils": "1.1.28-next.0",
     "@backstage/frontend-test-utils": "0.6.5-next.0",
-    "@backstage/plugin-catalog": "2.0.10-next.0",
+    "@backstage/plugin-catalog": "2.0.10-next.2",
     "@backstage/plugin-permission-common": "0.9.12-next.0",
     "@backstage/plugin-permission-react": "0.5.6-next.0",
     "@backstage/test-utils": "1.7.23-next.0",