@backstage/plugin-org 0.6.50-next.0 → 0.7.0-next.2

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  EntityRefLink,\n} from '@backstage/plugin-catalog-react';\nimport Box from '@material-ui/core/Box';\nimport Grid from '@material-ui/core/Grid';\nimport Switch from '@material-ui/core/Switch';\nimport Typography from '@material-ui/core/Typography';\nimport { createStyles, makeStyles, Theme } from '@material-ui/core/styles';\nimport Pagination from '@material-ui/lab/Pagination';\nimport { useState, useEffect, ChangeEvent } from 'react';\nimport useAsync from 'react-use/esm/useAsync';\n\nimport {\n  Avatar,\n  InfoCard,\n  Progress,\n  ResponseErrorPanel,\n  Link,\n  OverflowTooltip,\n} 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 TextField from '@material-ui/core/TextField';\n\n/** @public */\nexport type MemberComponentClassKey = 'card' | 'avatar';\n\nconst useStyles = makeStyles(\n  (theme: Theme) =>\n    createStyles({\n      card: {\n        border: `1px solid ${theme.palette.divider}`,\n        boxShadow: theme.shadows[2],\n        borderRadius: '4px',\n        overflow: 'visible',\n        position: 'relative',\n        margin: theme.spacing(4, 1, 1),\n        flex: '1',\n        minWidth: '0px',\n      },\n      avatar: {\n        position: 'absolute',\n        top: '-2rem',\n      },\n    }),\n  { name: 'PluginOrgMemberComponent' },\n);\n\nconst MemberComponent = (props: { member: UserEntity }) => {\n  const classes = useStyles();\n  const {\n    metadata: { name: metaName, description },\n    spec: { profile },\n  } = props.member;\n  const displayName = profile?.displayName ?? metaName;\n\n  return (\n    <Box className={classes.card}>\n      <Box\n        display=\"flex\"\n        flexDirection=\"column\"\n        m={3}\n        alignItems=\"center\"\n        justifyContent=\"center\"\n      >\n        <Avatar\n          displayName={displayName}\n          picture={profile?.picture}\n          classes={classes}\n        />\n        <Box\n          pt={2}\n          sx={{\n            width: '100%',\n          }}\n          textAlign=\"center\"\n        >\n          <Typography variant=\"h6\">\n            <EntityRefLink\n              data-testid=\"user-link\"\n              entityRef={props.member}\n              title={displayName}\n            />\n          </Typography>\n          {profile?.email && (\n            <Link to={`mailto:${profile.email}`}>\n              <OverflowTooltip text={profile.email} />\n            </Link>\n          )}\n          {description && (\n            <Typography variant=\"subtitle2\">\n              <OverflowTooltip text={description} line={5} />\n            </Typography>\n          )}\n        </Box>\n      </Box>\n    </Box>\n  );\n};\n\n/** @public */\nexport type MembersListCardClassKey = 'root' | 'cardContent' | 'memberList';\n\nconst useListStyles = makeStyles(\n  theme => ({\n    root: {\n      height: '100%',\n    },\n    cardContent: {\n      overflow: 'auto',\n    },\n    memberList: {\n      display: 'grid',\n      gap: theme.spacing(1.5),\n      gridTemplateColumns: `repeat(auto-fit, minmax(auto, ${theme.spacing(\n        34,\n      )}px))`,\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 = t('membersListCard.title'),\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 },\n    spec: { profile },\n  } = groupEntity;\n  const catalogApi = useApi(catalogApiRef);\n\n  const displayName = profile?.displayName ?? groupName;\n\n  const groupNamespace = grpNamespace || DEFAULT_NAMESPACE;\n\n  const [page, setPage] = useState(1);\n  const pageChange = (_: ChangeEvent<unknown>, pageIndex: number) => {\n    setPage(pageIndex);\n  };\n\n  const [showAggregateMembers, setShowAggregateMembers] = useState(\n    relationAggregation === 'aggregated',\n  );\n\n  const [searchTerm, setSearchTerm] = useState('');\n\n  useEffect(() => {\n    setPage(1);\n  }, [searchTerm]);\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.toLocaleLowerCase('en-US')}`]: [\n          stringifyEntityRef({\n            kind: 'group',\n            namespace: groupNamespace.toLocaleLowerCase('en-US'),\n            name: groupName.toLocaleLowerCase('en-US'),\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 nbPages = Math.ceil((members?.length || 0) / pageSize);\n  const paginationLabel =\n    nbPages < 2\n      ? ''\n      : t('membersListCard.paginationLabel', {\n          page: String(page),\n          nbPages: String(nbPages),\n        });\n\n  const pagination = (\n    <Pagination\n      count={nbPages}\n      page={page}\n      onChange={pageChange}\n      showFirstButton\n      showLastButton\n    />\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\n        ?.toLocaleLowerCase('en-US')\n        .includes(searchTerm.toLocaleLowerCase('en-US')),\n    );\n  });\n\n  const membersToRender = searchTerm ? filteredMembers : members;\n\n  let memberList: JSX.Element;\n  if (membersToRender && membersToRender.length > 0) {\n    memberList = (\n      <Box className={classes.memberList}>\n        {membersToRender\n          .slice(pageSize * (page - 1), pageSize * page)\n          .map(member => (\n            <MemberComponent member={member} key={stringifyEntityRef(member)} />\n          ))}\n      </Box>\n    );\n  } else {\n    memberList = (\n      <Box p={2}>\n        <Typography>{t('membersListCard.noMembersDescription')}</Typography>\n      </Box>\n    );\n  }\n\n  return (\n    <Grid item className={classes.root}>\n      <InfoCard\n        title={`${memberDisplayTitle} (${filteredMembers.length} of ${members.length}${paginationLabel})`}\n        subheader={t('membersListCard.subtitle', {\n          groupName: displayName,\n        })}\n        {...(nbPages <= 1 ? {} : { actions: pagination })}\n        className={classes.root}\n        cardClassName={classes.cardContent}\n      >\n        {showAggregateMembersToggle && (\n          <>\n            {t('membersListCard.aggregateMembersToggle.directMembers')}\n            <Switch\n              color=\"primary\"\n              checked={showAggregateMembers}\n              onChange={() => {\n                setShowAggregateMembers(!showAggregateMembers);\n              }}\n              inputProps={{\n                'aria-label': t(\n                  'membersListCard.aggregateMembersToggle.ariaLabel',\n                ),\n              }}\n            />\n            {t('membersListCard.aggregateMembersToggle.aggregatedMembers')}\n          </>\n        )}\n        {showAggregateMembers && loadingDescendantMembers ? (\n          <Progress />\n        ) : (\n          <>\n            <TextField\n              fullWidth\n              margin=\"dense\"\n              placeholder=\"Search members...\"\n              value={searchTerm}\n              onChange={(e: React.ChangeEvent<HTMLInputElement>) =>\n                setSearchTerm(e.target.value)\n              }\n            />\n            <Box sx={{ mt: 2 }}>{memberList}</Box>\n          </>\n        )}\n      </InfoCard>\n    </Grid>\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  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 },\n    spec: { profile },\n  } = groupEntity;\n  const catalogApi = useApi(catalogApiRef);\n\n  const displayName = profile?.displayName ?? 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.toLocaleLowerCase('en-US')}`]: [\n          stringifyEntityRef({\n            kind: 'group',\n            namespace: groupNamespace.toLocaleLowerCase('en-US'),\n            name: groupName.toLocaleLowerCase('en-US'),\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\n        ?.toLocaleLowerCase('en-US')\n        .includes(searchTerm.toLocaleLowerCase('en-US')),\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/OwnershipCard/OwnershipCard.esm.js

@@ -1,57 +1,17 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { InfoCard } from '@backstage/core-components';
-import { useEntity } from '@backstage/plugin-catalog-react';
-import List from '@material-ui/core/List';
-import ListItem from '@material-ui/core/ListItem';
-import ListItemSecondaryAction from '@material-ui/core/ListItemSecondaryAction';
-import ListItemText from '@material-ui/core/ListItemText';
-import Switch from '@material-ui/core/Switch';
-import Tooltip from '@material-ui/core/Tooltip';
+import { jsx } from 'react/jsx-runtime';
+import { useEntity, EntityInfoCard } from '@backstage/plugin-catalog-react';
+import { Switch } from '@backstage/ui';
 import { makeStyles, createStyles } from '@material-ui/core/styles';
 import { useState, useEffect } from 'react';
 import { ComponentsGrid } from './ComponentsGrid.esm.js';
 import { useTranslationRef } from '@backstage/frontend-plugin-api';
 import { orgTranslationRef } from '../../../translation.esm.js';
-import Box from '@material-ui/core/Box';
 
 const useStyles = makeStyles(
-  (theme) => createStyles({
-    card: {
-      maxHeight: "100%"
-    },
-    cardContent: {
-      display: "flex",
-      flexDirection: "column",
-      overflow: "hidden"
-    },
-    list: {
-      [theme.breakpoints.down("xs")]: {
-        padding: `0 0 12px`
-      }
-    },
-    listItemText: {
-      [theme.breakpoints.down("xs")]: {
-        paddingRight: 0,
-        paddingLeft: 0
-      }
-    },
-    listItemSecondaryAction: {
-      [theme.breakpoints.down("xs")]: {
-        width: "100%",
-        top: "auto",
-        right: "auto",
-        position: "relative",
-        transform: "unset"
-      }
-    },
+  () => createStyles({
     grid: {
       overflowY: "auto",
       marginTop: 0
-    },
-    box: {
-      overflowY: "auto",
-      padding: theme.spacing(0, 1, 1),
-      margin: theme.spacing(0, -1)
     }
   }),
   {
@@ -59,16 +19,9 @@ const useStyles = makeStyles(
   }
 );
 const OwnershipCard = (props) => {
-  const {
-    variant,
-    entityFilterKind,
-    hideRelationsToggle,
-    entityLimit = 6,
-    maxScrollHeight: propMaxScrollHeight
-  } = props;
+  const { entityFilterKind, hideRelationsToggle, entityLimit = 6 } = props;
   const relationAggregation = props.relationAggregation ?? props.relationsType;
   const relationsToggle = hideRelationsToggle === void 0 ? false : hideRelationsToggle;
-  const maxScrollHeight = variant !== "fullHeight" ? propMaxScrollHeight : void 0;
   const classes = useStyles();
   const { entity } = useEntity();
   const { t } = useTranslationRef(orgTranslationRef);
@@ -81,67 +34,28 @@ const OwnershipCard = (props) => {
       setRelationAggregation(defaultRelationAggregation);
     }
   }, [setRelationAggregation, defaultRelationAggregation, relationAggregation]);
-  return /* @__PURE__ */ jsxs(
-    InfoCard,
+  return /* @__PURE__ */ jsx(
+    EntityInfoCard,
     {
       title: t("ownershipCard.title"),
-      variant,
-      className: classes.card,
-      cardClassName: classes.cardContent,
-      children: [
-        !relationsToggle && /* @__PURE__ */ jsx(List, { dense: true, children: /* @__PURE__ */ jsxs(ListItem, { className: classes.list, children: [
-          /* @__PURE__ */ jsx(ListItemText, { className: classes.listItemText }),
-          /* @__PURE__ */ jsxs(
-            ListItemSecondaryAction,
-            {
-              className: classes.listItemSecondaryAction,
-              children: [
-                t("ownershipCard.aggregateRelationsToggle.directRelations"),
-                /* @__PURE__ */ jsx(
-                  Tooltip,
-                  {
-                    placement: "top",
-                    arrow: true,
-                    title: getRelationAggregation === "direct" ? t(
-                      "ownershipCard.aggregateRelationsToggle.directRelations"
-                    ) : t(
-                      "ownershipCard.aggregateRelationsToggle.aggregatedRelations"
-                    ),
-                    children: /* @__PURE__ */ jsx(
-                      Switch,
-                      {
-                        color: "primary",
-                        checked: getRelationAggregation !== "direct",
-                        onChange: () => {
-                          const updatedRelationAggregation = getRelationAggregation === "direct" ? "aggregated" : "direct";
-                          setRelationAggregation(updatedRelationAggregation);
-                        },
-                        name: "pin",
-                        inputProps: {
-                          "aria-label": t(
-                            "ownershipCard.aggregateRelationsToggle.ariaLabel"
-                          )
-                        }
-                      }
-                    )
-                  }
-                ),
-                t("ownershipCard.aggregateRelationsToggle.aggregatedRelations")
-              ]
-            }
-          )
-        ] }) }),
-        /* @__PURE__ */ jsx(Box, { maxHeight: maxScrollHeight, className: classes.box, children: /* @__PURE__ */ jsx(
-          ComponentsGrid,
-          {
-            className: classes.grid,
-            entity,
-            entityLimit,
-            relationAggregation: getRelationAggregation,
-            entityFilterKind
-          }
-        ) })
-      ]
+      headerActions: !relationsToggle && /* @__PURE__ */ jsx(
+        Switch,
+        {
+          isSelected: getRelationAggregation !== "direct",
+          onChange: (isSelected) => setRelationAggregation(isSelected ? "aggregated" : "direct"),
+          label: t("ownershipCard.aggregateRelationsToggle.label")
+        }
+      ),
+      children: /* @__PURE__ */ jsx(
+        ComponentsGrid,
+        {
+          className: classes.grid,
+          entity,
+          entityLimit,
+          relationAggregation: getRelationAggregation,
+          entityFilterKind
+        }
+      )
     }
   );
 };

package/dist/components/Cards/OwnershipCard/OwnershipCard.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"OwnershipCard.esm.js","sources":["../../../../src/components/Cards/OwnershipCard/OwnershipCard.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 { InfoCard, InfoCardVariants } from '@backstage/core-components';\nimport { useEntity } from '@backstage/plugin-catalog-react';\nimport List from '@material-ui/core/List';\nimport ListItem from '@material-ui/core/ListItem';\nimport ListItemSecondaryAction from '@material-ui/core/ListItemSecondaryAction';\nimport ListItemText from '@material-ui/core/ListItemText';\nimport Switch from '@material-ui/core/Switch';\nimport Tooltip from '@material-ui/core/Tooltip';\nimport { createStyles, makeStyles } from '@material-ui/core/styles';\nimport { useEffect, useState } from 'react';\nimport { ComponentsGrid } from './ComponentsGrid';\nimport { EntityRelationAggregation } from '../types';\nimport { useTranslationRef } from '@backstage/frontend-plugin-api';\nimport { orgTranslationRef } from '../../../translation';\nimport Box from '@material-ui/core/Box';\n\n/** @public */\nexport type OwnershipCardClassKey =\n  | 'card'\n  | 'cardContent'\n  | 'list'\n  | 'listItemText'\n  | 'listItemSecondaryAction'\n  | 'grid';\n\nconst useStyles = makeStyles(\n  theme =>\n    createStyles({\n      card: {\n        maxHeight: '100%',\n      },\n      cardContent: {\n        display: 'flex',\n        flexDirection: 'column',\n        overflow: 'hidden',\n      },\n      list: {\n        [theme.breakpoints.down('xs')]: {\n          padding: `0 0 12px`,\n        },\n      },\n      listItemText: {\n        [theme.breakpoints.down('xs')]: {\n          paddingRight: 0,\n          paddingLeft: 0,\n        },\n      },\n      listItemSecondaryAction: {\n        [theme.breakpoints.down('xs')]: {\n          width: '100%',\n          top: 'auto',\n          right: 'auto',\n          position: 'relative',\n          transform: 'unset',\n        },\n      },\n      grid: {\n        overflowY: 'auto',\n        marginTop: 0,\n      },\n      box: {\n        overflowY: 'auto',\n        padding: theme.spacing(0, 1, 1),\n        margin: theme.spacing(0, -1),\n      },\n    }),\n  {\n    name: 'PluginOrgOwnershipCard',\n  },\n);\n\n/** @public */\nexport const OwnershipCard = (props: {\n  variant?: InfoCardVariants;\n  entityFilterKind?: string[];\n  hideRelationsToggle?: boolean;\n  /** @deprecated Please use relationAggregation instead */\n  relationsType?: EntityRelationAggregation;\n  relationAggregation?: EntityRelationAggregation;\n  entityLimit?: number;\n  maxScrollHeight?: string;\n}) => {\n  const {\n    variant,\n    entityFilterKind,\n    hideRelationsToggle,\n    entityLimit = 6,\n    maxScrollHeight: propMaxScrollHeight,\n  } = props;\n  const relationAggregation = props.relationAggregation ?? props.relationsType;\n  const relationsToggle =\n    hideRelationsToggle === undefined ? false : hideRelationsToggle;\n  const maxScrollHeight =\n    variant !== 'fullHeight' ? propMaxScrollHeight : undefined;\n  const classes = useStyles();\n  const { entity } = useEntity();\n  const { t } = useTranslationRef(orgTranslationRef);\n\n  const defaultRelationAggregation =\n    entity.kind === 'User' ? 'aggregated' : 'direct';\n  const [getRelationAggregation, setRelationAggregation] = useState(\n    relationAggregation ?? defaultRelationAggregation,\n  );\n\n  useEffect(() => {\n    if (!relationAggregation) {\n      setRelationAggregation(defaultRelationAggregation);\n    }\n  }, [setRelationAggregation, defaultRelationAggregation, relationAggregation]);\n\n  return (\n    <InfoCard\n      title={t('ownershipCard.title')}\n      variant={variant}\n      className={classes.card}\n      cardClassName={classes.cardContent}\n    >\n      {!relationsToggle && (\n        <List dense>\n          <ListItem className={classes.list}>\n            <ListItemText className={classes.listItemText} />\n            <ListItemSecondaryAction\n              className={classes.listItemSecondaryAction}\n            >\n              {t('ownershipCard.aggregateRelationsToggle.directRelations')}\n              <Tooltip\n                placement=\"top\"\n                arrow\n                title={\n                  getRelationAggregation === 'direct'\n                    ? t(\n                        'ownershipCard.aggregateRelationsToggle.directRelations',\n                      )\n                    : t(\n                        'ownershipCard.aggregateRelationsToggle.aggregatedRelations',\n                      )\n                }\n              >\n                <Switch\n                  color=\"primary\"\n                  checked={getRelationAggregation !== 'direct'}\n                  onChange={() => {\n                    const updatedRelationAggregation =\n                      getRelationAggregation === 'direct'\n                        ? 'aggregated'\n                        : 'direct';\n                    setRelationAggregation(updatedRelationAggregation);\n                  }}\n                  name=\"pin\"\n                  inputProps={{\n                    'aria-label': t(\n                      'ownershipCard.aggregateRelationsToggle.ariaLabel',\n                    ),\n                  }}\n                />\n              </Tooltip>\n              {t('ownershipCard.aggregateRelationsToggle.aggregatedRelations')}\n            </ListItemSecondaryAction>\n          </ListItem>\n        </List>\n      )}\n      <Box maxHeight={maxScrollHeight} className={classes.box}>\n        <ComponentsGrid\n          className={classes.grid}\n          entity={entity}\n          entityLimit={entityLimit}\n          relationAggregation={getRelationAggregation}\n          entityFilterKind={entityFilterKind}\n        />\n      </Box>\n    </InfoCard>\n  );\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"OwnershipCard.esm.js","sources":["../../../../src/components/Cards/OwnershipCard/OwnershipCard.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 { EntityInfoCard, useEntity } from '@backstage/plugin-catalog-react';\nimport { Switch } from '@backstage/ui';\nimport { createStyles, makeStyles } from '@material-ui/core/styles';\nimport { useEffect, useState } from 'react';\nimport { ComponentsGrid } from './ComponentsGrid';\nimport { EntityRelationAggregation } from '../types';\nimport { useTranslationRef } from '@backstage/frontend-plugin-api';\nimport { orgTranslationRef } from '../../../translation';\n\n/** @public */\nexport type OwnershipCardClassKey = 'grid';\n\nconst useStyles = makeStyles(\n  () =>\n    createStyles({\n      grid: {\n        overflowY: 'auto',\n        marginTop: 0,\n      },\n    }),\n  {\n    name: 'PluginOrgOwnershipCard',\n  },\n);\n\n/** @public */\nexport const OwnershipCard = (props: {\n  entityFilterKind?: string[];\n  hideRelationsToggle?: boolean;\n  /** @deprecated Please use relationAggregation instead */\n  relationsType?: EntityRelationAggregation;\n  relationAggregation?: EntityRelationAggregation;\n  entityLimit?: number;\n}) => {\n  const { entityFilterKind, hideRelationsToggle, entityLimit = 6 } = props;\n  const relationAggregation = props.relationAggregation ?? props.relationsType;\n  const relationsToggle =\n    hideRelationsToggle === undefined ? false : hideRelationsToggle;\n  const classes = useStyles();\n  const { entity } = useEntity();\n  const { t } = useTranslationRef(orgTranslationRef);\n\n  const defaultRelationAggregation =\n    entity.kind === 'User' ? 'aggregated' : 'direct';\n  const [getRelationAggregation, setRelationAggregation] = useState(\n    relationAggregation ?? defaultRelationAggregation,\n  );\n\n  useEffect(() => {\n    if (!relationAggregation) {\n      setRelationAggregation(defaultRelationAggregation);\n    }\n  }, [setRelationAggregation, defaultRelationAggregation, relationAggregation]);\n\n  return (\n    <EntityInfoCard\n      title={t('ownershipCard.title')}\n      headerActions={\n        !relationsToggle && (\n          <Switch\n            isSelected={getRelationAggregation !== 'direct'}\n            onChange={isSelected =>\n              setRelationAggregation(isSelected ? 'aggregated' : 'direct')\n            }\n            label={t('ownershipCard.aggregateRelationsToggle.label')}\n          />\n        )\n      }\n    >\n      <ComponentsGrid\n        className={classes.grid}\n        entity={entity}\n        entityLimit={entityLimit}\n        relationAggregation={getRelationAggregation}\n        entityFilterKind={entityFilterKind}\n      />\n    </EntityInfoCard>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;AA4BA,MAAM,SAAA,GAAY,UAAA;AAAA,EAChB,MACE,YAAA,CAAa;AAAA,IACX,IAAA,EAAM;AAAA,MACJ,SAAA,EAAW,MAAA;AAAA,MACX,SAAA,EAAW;AAAA;AACb,GACD,CAAA;AAAA,EACH;AAAA,IACE,IAAA,EAAM;AAAA;AAEV,CAAA;AAGO,MAAM,aAAA,GAAgB,CAAC,KAAA,KAOxB;AACJ,EAAA,MAAM,EAAE,gBAAA,EAAkB,mBAAA,EAAqB,WAAA,GAAc,GAAE,GAAI,KAAA;AACnE,EAAA,MAAM,mBAAA,GAAsB,KAAA,CAAM,mBAAA,IAAuB,KAAA,CAAM,aAAA;AAC/D,EAAA,MAAM,eAAA,GACJ,mBAAA,KAAwB,MAAA,GAAY,KAAA,GAAQ,mBAAA;AAC9C,EAAA,MAAM,UAAU,SAAA,EAAU;AAC1B,EAAA,MAAM,EAAE,MAAA,EAAO,GAAI,SAAA,EAAU;AAC7B,EAAA,MAAM,EAAE,CAAA,EAAE,GAAI,iBAAA,CAAkB,iBAAiB,CAAA;AAEjD,EAAA,MAAM,0BAAA,GACJ,MAAA,CAAO,IAAA,KAAS,MAAA,GAAS,YAAA,GAAe,QAAA;AAC1C,EAAA,MAAM,CAAC,sBAAA,EAAwB,sBAAsB,CAAA,GAAI,QAAA;AAAA,IACvD,mBAAA,IAAuB;AAAA,GACzB;AAEA,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,IAAI,CAAC,mBAAA,EAAqB;AACxB,MAAA,sBAAA,CAAuB,0BAA0B,CAAA;AAAA,IACnD;AAAA,EACF,CAAA,EAAG,CAAC,sBAAA,EAAwB,0BAAA,EAA4B,mBAAmB,CAAC,CAAA;AAE5E,EAAA,uBACE,GAAA;AAAA,IAAC,cAAA;AAAA,IAAA;AAAA,MACC,KAAA,EAAO,EAAE,qBAAqB,CAAA;AAAA,MAC9B,aAAA,EACE,CAAC,eAAA,oBACC,GAAA;AAAA,QAAC,MAAA;AAAA,QAAA;AAAA,UACC,YAAY,sBAAA,KAA2B,QAAA;AAAA,UACvC,QAAA,EAAU,CAAA,UAAA,KACR,sBAAA,CAAuB,UAAA,GAAa,eAAe,QAAQ,CAAA;AAAA,UAE7D,KAAA,EAAO,EAAE,8CAA8C;AAAA;AAAA,OACzD;AAAA,MAIJ,QAAA,kBAAA,GAAA;AAAA,QAAC,cAAA;AAAA,QAAA;AAAA,UACC,WAAW,OAAA,CAAQ,IAAA;AAAA,UACnB,MAAA;AAAA,UACA,WAAA;AAAA,UACA,mBAAA,EAAqB,sBAAA;AAAA,UACrB;AAAA;AAAA;AACF;AAAA,GACF;AAEJ;;;;"}

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

@@ -1,9 +1,9 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { ANNOTATION_EDIT_URL, RELATION_MEMBER_OF } from '@backstage/catalog-model';
-import { InfoCard, Avatar, Link } from '@backstage/core-components';
+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 { makeStyles, createStyles } from '@material-ui/core/styles';
-import Box from '@material-ui/core/Box';
-import Grid from '@material-ui/core/Grid';
 import BaseButton from '@material-ui/core/ButtonBase';
 import IconButton from '@material-ui/core/IconButton';
 import List from '@material-ui/core/List';
@@ -17,13 +17,11 @@ import DialogTitle from '@material-ui/core/DialogTitle';
 import DialogContent from '@material-ui/core/DialogContent';
 import DialogActions from '@material-ui/core/DialogActions';
 import CloseIcon from '@material-ui/icons/Close';
-import { useEntity, getEntityRelations, EntityRefLinks } from '@backstage/plugin-catalog-react';
 import Alert from '@material-ui/lab/Alert';
 import EditIcon from '@material-ui/icons/Edit';
 import EmailIcon from '@material-ui/icons/Email';
 import GroupIcon from '@material-ui/icons/Group';
 import { LinksGroup } from '../../Meta/LinksGroup.esm.js';
-import PersonIcon from '@material-ui/icons/Person';
 import { useState, useCallback } from 'react';
 import { useTranslationRef } from '@backstage/frontend-plugin-api';
 import { orgTranslationRef } from '../../../../translation.esm.js';
@@ -46,9 +44,17 @@ const useStyles = makeStyles(
   }),
   { name: "PluginOrgUserProfileCard" }
 );
-const CardTitle = (props) => props.title ? /* @__PURE__ */ jsxs(Box, { display: "flex", alignItems: "center", children: [
-  /* @__PURE__ */ jsx(PersonIcon, { fontSize: "inherit" }),
-  /* @__PURE__ */ jsx(Box, { ml: 1, children: props.title })
+const CardTitle = (props) => props.title ? /* @__PURE__ */ jsxs(Flex, { align: "center", gap: "2", children: [
+  /* @__PURE__ */ jsx(
+    Avatar,
+    {
+      size: "small",
+      purpose: "decoration",
+      name: props.title,
+      src: props.pictureSrc || ""
+    }
+  ),
+  props.title
 ] }) : null;
 const UserProfileCard = (props) => {
   const { maxRelations, hideIcons } = props;
@@ -76,12 +82,10 @@ const UserProfileCard = (props) => {
     kind: "Group"
   });
   return /* @__PURE__ */ jsxs(
-    InfoCard,
+    EntityInfoCard,
     {
-      title: /* @__PURE__ */ jsx(CardTitle, { title: displayName }),
-      subheader: description,
-      variant: props.variant,
-      action: /* @__PURE__ */ jsx(Fragment, { children: entityMetadataEditUrl && /* @__PURE__ */ jsx(
+      title: /* @__PURE__ */ jsx(CardTitle, { title: displayName, pictureSrc: profile?.picture }),
+      headerActions: /* @__PURE__ */ jsx(Fragment, { children: entityMetadataEditUrl && /* @__PURE__ */ jsx(
         IconButton,
         {
           "aria-label": t("userProfileCard.editIconButtonTitle"),
@@ -92,45 +96,41 @@ const UserProfileCard = (props) => {
         }
       ) }),
       children: [
-        /* @__PURE__ */ jsxs(Grid, { container: true, spacing: 3, alignItems: "flex-start", children: [
-          /* @__PURE__ */ jsx(Grid, { item: true, xs: 12, sm: 2, xl: 1, children: /* @__PURE__ */ jsx(Avatar, { displayName, picture: profile?.picture }) }),
-          /* @__PURE__ */ jsx(Grid, { item: true, md: 10, xl: 11, children: /* @__PURE__ */ jsxs(List, { children: [
-            profile?.email && /* @__PURE__ */ jsxs(ListItem, { children: [
-              /* @__PURE__ */ jsx(ListItemIcon, { children: /* @__PURE__ */ jsx(Tooltip, { title: t("userProfileCard.listItemTitle.email"), children: /* @__PURE__ */ jsx(EmailIcon, {}) }) }),
-              /* @__PURE__ */ jsx(ListItemText, { children: /* @__PURE__ */ jsx(Link, { to: emailHref ?? "", children: profile.email }) })
-            ] }),
-            maxRelations === void 0 || maxRelations > 0 ? /* @__PURE__ */ jsxs(ListItem, { children: [
-              /* @__PURE__ */ jsx(ListItemIcon, { children: /* @__PURE__ */ jsx(Tooltip, { title: t("userProfileCard.listItemTitle.memberOf"), children: /* @__PURE__ */ jsx(GroupIcon, {}) }) }),
-              /* @__PURE__ */ jsxs(ListItemText, { children: [
+        description && /* @__PURE__ */ jsx(Text, { color: "secondary", children: description }),
+        /* @__PURE__ */ jsx(Box, { p: "2", children: /* @__PURE__ */ jsxs(List, { children: [
+          profile?.email && /* @__PURE__ */ jsxs(ListItem, { children: [
+            /* @__PURE__ */ jsx(ListItemIcon, { children: /* @__PURE__ */ jsx(Tooltip, { title: t("userProfileCard.listItemTitle.email"), children: /* @__PURE__ */ jsx(EmailIcon, {}) }) }),
+            /* @__PURE__ */ jsx(ListItemText, { children: /* @__PURE__ */ jsx(Link, { to: emailHref ?? "", children: profile.email }) })
+          ] }),
+          maxRelations === void 0 || maxRelations > 0 ? /* @__PURE__ */ jsxs(ListItem, { children: [
+            /* @__PURE__ */ jsx(ListItemIcon, { children: /* @__PURE__ */ jsx(Tooltip, { title: t("userProfileCard.listItemTitle.memberOf"), children: /* @__PURE__ */ jsx(GroupIcon, {}) }) }),
+            /* @__PURE__ */ jsxs(ListItemText, { children: [
+              /* @__PURE__ */ jsx(
+                EntityRefLinks,
+                {
+                  entityRefs: memberOfRelations.slice(0, maxRelations),
+                  defaultKind: "Group",
+                  hideIcons
+                }
+              ),
+              maxRelations && memberOfRelations.length > maxRelations ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                ",",
                 /* @__PURE__ */ jsx(
-                  EntityRefLinks,
+                  BaseButton,
                   {
-                    entityRefs: memberOfRelations.slice(0, maxRelations),
-                    defaultKind: "Group",
-                    hideIcons
+                    className: classes.moreButton,
+                    onClick: toggleAllGroupsDialog,
+                    disableRipple: true,
+                    children: t("userProfileCard.moreGroupButtonTitle", {
+                      number: String(memberOfRelations.length - maxRelations)
+                    })
                   }
-                ),
-                maxRelations && memberOfRelations.length > maxRelations ? /* @__PURE__ */ jsxs(Fragment, { children: [
-                  ",",
-                  /* @__PURE__ */ jsx(
-                    BaseButton,
-                    {
-                      className: classes.moreButton,
-                      onClick: toggleAllGroupsDialog,
-                      disableRipple: true,
-                      children: t("userProfileCard.moreGroupButtonTitle", {
-                        number: String(
-                          memberOfRelations.length - maxRelations
-                        )
-                      })
-                    }
-                  )
-                ] }) : null
-              ] })
-            ] }) : null,
-            props?.showLinks && /* @__PURE__ */ jsx(LinksGroup, { links })
-          ] }) })
-        ] }),
+                )
+              ] }) : null
+            ] })
+          ] }) : null,
+          props?.showLinks && /* @__PURE__ */ jsx(LinksGroup, { links })
+        ] }) }),
         /* @__PURE__ */ jsxs(
           Dialog,
           {

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 {\n  Avatar,\n  InfoCard,\n  InfoCardVariants,\n  Link,\n} from '@backstage/core-components';\nimport { createStyles, makeStyles } from '@material-ui/core/styles';\nimport Box from '@material-ui/core/Box';\nimport Grid from '@material-ui/core/Grid';\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';\nimport PersonIcon from '@material-ui/icons/Person';\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\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    }),\n  { name: 'PluginOrgUserProfileCard' },\n);\n\nconst CardTitle = (props: { title?: string }) =>\n  props.title ? (\n    <Box display=\"flex\" alignItems=\"center\">\n      <PersonIcon fontSize=\"inherit\" />\n      <Box ml={1}>{props.title}</Box>\n    </Box>\n  ) : null;\n\n/** @public */\nexport const UserProfileCard = (props: {\n  variant?: InfoCardVariants;\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    <InfoCard\n      title={<CardTitle title={displayName} />}\n      subheader={description}\n      variant={props.variant}\n      action={\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      <Grid container spacing={3} alignItems=\"flex-start\">\n        <Grid item xs={12} sm={2} xl={1}>\n          <Avatar displayName={displayName} picture={profile?.picture} />\n        </Grid>\n\n        <Grid item md={10} xl={11}>\n          <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(\n                            memberOfRelations.length - maxRelations,\n                          ),\n                        })}\n                      </BaseButton>\n                    </>\n                  ) : null}\n                </ListItemText>\n              </ListItem>\n            ) : null}\n            {props?.showLinks && <LinksGroup links={links} />}\n          </List>\n        </Grid>\n      </Grid>\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    </InfoCard>\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 { 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\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    }),\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>\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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4DA,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;AACb,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,MAAA;AAAA,IAAA;AAAA,MACC,IAAA,EAAK,OAAA;AAAA,MACL,OAAA,EAAQ,YAAA;AAAA,MACR,MAAM,KAAA,CAAM,KAAA;AAAA,MACZ,GAAA,EAAK,MAAM,UAAA,IAAc;AAAA;AAAA,GAC3B;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,OAAO,WAAA,EAAa,UAAA,EAAY,SAAS,OAAA,EAAS,CAAA;AAAA,MACpE,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,GAAA,EAAA,EAAI,CAAA,EAAE,GAAA,EACL,+BAAC,IAAA,EAAA,EACE,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/index.d.ts

@@ -1,6 +1,4 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import * as _backstage_core_components from '@backstage/core-components';
-import { InfoCardVariants } from '@backstage/core-components';
 import * as _backstage_core_plugin_api from '@backstage/core-plugin-api';
 import { IconComponent } from '@backstage/core-plugin-api';
 
@@ -8,9 +6,7 @@ import { IconComponent } from '@backstage/core-plugin-api';
 type EntityRelationAggregation = 'direct' | 'aggregated';
 
 /** @public */
-type MemberComponentClassKey = 'card' | 'avatar';
-/** @public */
-type MembersListCardClassKey = 'root' | 'cardContent' | 'memberList';
+type MembersListCardClassKey = 'memberList';
 /** @public */
 declare const MembersListCard: (props: {
     memberDisplayTitle?: string;
@@ -24,7 +20,6 @@ declare const MembersListCard: (props: {
 
 /** @public */
 declare const GroupProfileCard: (props: {
-    variant?: InfoCardVariants;
     showLinks?: boolean;
 }) => react_jsx_runtime.JSX.Element;
 
@@ -32,24 +27,21 @@ declare const GroupProfileCard: (props: {
 type UserProfileCardClassKey = 'closeButton' | 'moreButton' | 'dialogPaper';
 /** @public */
 declare const UserProfileCard: (props: {
-    variant?: InfoCardVariants;
     showLinks?: boolean;
     maxRelations?: number;
     hideIcons?: boolean;
 }) => react_jsx_runtime.JSX.Element;
 
 /** @public */
-type OwnershipCardClassKey = 'card' | 'cardContent' | 'list' | 'listItemText' | 'listItemSecondaryAction' | 'grid';
+type OwnershipCardClassKey = 'grid';
 /** @public */
 declare const OwnershipCard: (props: {
-    variant?: InfoCardVariants;
     entityFilterKind?: string[];
     hideRelationsToggle?: boolean;
     /** @deprecated Please use relationAggregation instead */
     relationsType?: EntityRelationAggregation;
     relationAggregation?: EntityRelationAggregation;
     entityLimit?: number;
-    maxScrollHeight?: string;
 }) => react_jsx_runtime.JSX.Element;
 
 /** @public */
@@ -73,7 +65,6 @@ declare const orgPlugin: _backstage_core_plugin_api.BackstagePlugin<{}, {
 }>;
 /** @public */
 declare const EntityGroupProfileCard: (props: {
-    variant?: _backstage_core_components.InfoCardVariants;
     showLinks?: boolean;
 }) => react_jsx_runtime.JSX.Element;
 /** @public */
@@ -87,21 +78,18 @@ declare const EntityMembersListCard: (props: {
 }) => react_jsx_runtime.JSX.Element;
 /** @public */
 declare const EntityOwnershipCard: (props: {
-    variant?: _backstage_core_components.InfoCardVariants;
     entityFilterKind?: string[];
     hideRelationsToggle?: boolean;
     relationsType?: EntityRelationAggregation;
     relationAggregation?: EntityRelationAggregation;
     entityLimit?: number;
-    maxScrollHeight?: string;
 }) => react_jsx_runtime.JSX.Element;
 /** @public */
 declare const EntityUserProfileCard: (props: {
-    variant?: _backstage_core_components.InfoCardVariants;
     showLinks?: boolean;
     maxRelations?: number;
     hideIcons?: boolean;
 }) => react_jsx_runtime.JSX.Element;
 
 export { EntityGroupProfileCard, EntityMembersListCard, EntityOwnershipCard, EntityUserProfileCard, GroupProfileCard, MembersListCard, MyGroupsSidebarItem, OwnershipCard, UserProfileCard, orgPlugin, orgPlugin as plugin };
-export type { ComponentsGridClassKey, EntityRelationAggregation, MemberComponentClassKey, MembersListCardClassKey, OwnershipCardClassKey, UserProfileCardClassKey };
+export type { ComponentsGridClassKey, EntityRelationAggregation, MembersListCardClassKey, OwnershipCardClassKey, UserProfileCardClassKey };

package/dist/package.json.esm.js

@@ -1,5 +1,5 @@
 var name = "@backstage/plugin-org";
-var version = "0.6.50-next.0";
+var version = "0.7.0-next.2";
 var description = "A Backstage plugin that helps you create entity pages for your organization";
 var backstage = {
 	role: "frontend-plugin",
@@ -56,6 +56,7 @@ var dependencies = {
 	"@backstage/frontend-plugin-api": "workspace:^",
 	"@backstage/plugin-catalog-common": "workspace:^",
 	"@backstage/plugin-catalog-react": "workspace:^",
+	"@backstage/ui": "workspace:^",
 	"@material-ui/core": "^4.12.2",
 	"@material-ui/icons": "^4.9.1",
 	"@material-ui/lab": "4.0.0-alpha.61",

package/dist/package.json.esm.js.map

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