@backstage/plugin-org 0.6.50-next.1 → 0.7.0

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

@@ -1,104 +1,100 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { stringifyEntityRef, DEFAULT_NAMESPACE } from '@backstage/catalog-model';
-import { useEntity, catalogApiRef, EntityRefLink } from '@backstage/plugin-catalog-react';
-import Box from '@material-ui/core/Box';
-import Grid from '@material-ui/core/Grid';
-import Switch from '@material-ui/core/Switch';
-import Typography from '@material-ui/core/Typography';
-import { makeStyles, createStyles } from '@material-ui/core/styles';
-import Pagination from '@material-ui/lab/Pagination';
+import { useEntity, catalogApiRef, EntityInfoCard, useEntityRefLink } from '@backstage/plugin-catalog-react';
+import { makeStyles } from '@material-ui/core/styles';
 import { useState, useEffect } from 'react';
 import useAsync from 'react-use/esm/useAsync';
-import { Progress, ResponseErrorPanel, InfoCard, Avatar, Link, OverflowTooltip } from '@backstage/core-components';
+import { Progress, ResponseErrorPanel } from '@backstage/core-components';
 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 TextField from '@material-ui/core/TextField';
+import { Box, Text, SearchField, Switch, Card, Avatar, Flex, Link, TablePagination } from '@backstage/ui';
 
-const useStyles = makeStyles(
-  (theme) => createStyles({
-    card: {
-      border: `1px solid ${theme.palette.divider}`,
-      boxShadow: theme.shadows[2],
-      borderRadius: "4px",
-      overflow: "visible",
-      position: "relative",
-      margin: theme.spacing(4, 1, 1),
-      flex: "1",
-      minWidth: "0px"
-    },
-    avatar: {
-      position: "absolute",
-      top: "-2rem"
-    }
-  }),
-  { name: "PluginOrgMemberComponent" }
-);
+const useMemberStyles = makeStyles({
+  card: {
+    display: "flex",
+    gap: "var(--bui-space-3)",
+    padding: "var(--bui-space-3)",
+    alignItems: "flex-start",
+    flexDirection: "row",
+    height: 140,
+    overflow: "hidden"
+  },
+  avatar: {
+    flexShrink: 0
+  },
+  cardTextContainer: {
+    overflow: "hidden"
+  },
+  singlelineEllipsis: {
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    whiteSpace: "nowrap"
+  },
+  multilineEllipsis: {
+    display: "-webkit-box",
+    "-webkit-line-clamp": "3",
+    "-webkit-box-orient": "vertical",
+    overflow: "hidden"
+  }
+});
 const MemberComponent = (props) => {
-  const classes = useStyles();
+  const { t } = useTranslationRef(orgTranslationRef);
+  const classes = useMemberStyles();
   const {
     metadata: { name: metaName, description },
     spec: { profile }
   } = props.member;
   const displayName = profile?.displayName ?? metaName;
-  return /* @__PURE__ */ jsx(Box, { className: classes.card, children: /* @__PURE__ */ jsxs(
-    Box,
+  const entityLink = useEntityRefLink();
+  return /* @__PURE__ */ jsxs(
+    Card,
     {
-      display: "flex",
-      flexDirection: "column",
-      m: 3,
-      alignItems: "center",
-      justifyContent: "center",
+      className: classes.card,
+      href: entityLink(props.member),
+      label: t("membersListCard.cardLabel", { memberName: displayName }),
       children: [
         /* @__PURE__ */ jsx(
           Avatar,
           {
-            displayName,
-            picture: profile?.picture,
-            classes
+            className: classes.avatar,
+            name: displayName,
+            src: profile?.picture ?? "",
+            purpose: "decoration",
+            size: "x-large"
           }
         ),
-        /* @__PURE__ */ jsxs(
-          Box,
-          {
-            pt: 2,
-            sx: {
-              width: "100%"
-            },
-            textAlign: "center",
-            children: [
-              /* @__PURE__ */ jsx(Typography, { variant: "h6", children: /* @__PURE__ */ jsx(
-                EntityRefLink,
-                {
-                  "data-testid": "user-link",
-                  entityRef: props.member,
-                  title: displayName
-                }
-              ) }),
-              profile?.email && /* @__PURE__ */ jsx(Link, { to: `mailto:${profile.email}`, children: /* @__PURE__ */ jsx(OverflowTooltip, { text: profile.email }) }),
-              description && /* @__PURE__ */ jsx(Typography, { variant: "subtitle2", children: /* @__PURE__ */ jsx(OverflowTooltip, { text: description, line: 5 }) })
-            ]
-          }
-        )
+        /* @__PURE__ */ jsxs(Flex, { className: classes.cardTextContainer, direction: "column", gap: "1", children: [
+          /* @__PURE__ */ jsx(Text, { variant: "body-large", as: "h4", children: displayName }),
+          profile?.email && /* @__PURE__ */ jsx(
+            Link,
+            {
+              className: classes.singlelineEllipsis,
+              href: `mailto:${profile.email}`,
+              children: profile.email
+            }
+          ),
+          description && /* @__PURE__ */ jsx(Text, { className: classes.multilineEllipsis, children: description })
+        ] })
       ]
     }
-  ) });
+  );
 };
 const useListStyles = makeStyles(
-  (theme) => ({
-    root: {
-      height: "100%"
-    },
-    cardContent: {
-      overflow: "auto"
-    },
+  () => ({
     memberList: {
       display: "grid",
-      gap: theme.spacing(1.5),
-      gridTemplateColumns: `repeat(auto-fit, minmax(auto, ${theme.spacing(
-        34
-      )}px))`
+      gap: "var(--bui-space-3)",
+      gridTemplateColumns: `repeat(auto-fit, minmax(275px, 1fr))`,
+      gridAutoRows: "1fr",
+      margin: 0,
+      padding: 0,
+      paddingTop: "var(--bui-space-3)",
+      listStyle: "none"
+    },
+    memberListItem: {
+      display: "contents"
     }
   }),
   { name: "PluginOrgMembersListCardComponent" }
@@ -106,7 +102,7 @@ const useListStyles = makeStyles(
 const MembersListCard = (props) => {
   const { t } = useTranslationRef(orgTranslationRef);
   const {
-    memberDisplayTitle = t("membersListCard.title"),
+    memberDisplayTitle,
     pageSize = 50,
     showAggregateMembersToggle,
     relationType = "memberof"
@@ -120,18 +116,16 @@ const MembersListCard = (props) => {
   } = groupEntity;
   const catalogApi = useApi(catalogApiRef);
   const displayName = profile?.displayName ?? groupName;
+  const cardTitle = memberDisplayTitle ?? t("membersListCard.title", { groupName: displayName });
   const groupNamespace = grpNamespace || DEFAULT_NAMESPACE;
-  const [page, setPage] = useState(1);
-  const pageChange = (_, pageIndex) => {
-    setPage(pageIndex);
-  };
+  const [offset, setOffset] = useState(0);
   const [showAggregateMembers, setShowAggregateMembers] = useState(
     relationAggregation === "aggregated"
   );
   const [searchTerm, setSearchTerm] = useState("");
   useEffect(() => {
-    setPage(1);
-  }, [searchTerm]);
+    setOffset(0);
+  }, [searchTerm, showAggregateMembers]);
   const { loading: loadingDescendantMembers, value: descendantMembers } = useAsync(async () => {
     if (!showAggregateMembers) {
       return [];
@@ -174,21 +168,6 @@ const MembersListCard = (props) => {
   } else if (error) {
     return /* @__PURE__ */ jsx(ResponseErrorPanel, { error });
   }
-  const nbPages = Math.ceil((members?.length || 0) / pageSize);
-  const paginationLabel = nbPages < 2 ? "" : t("membersListCard.paginationLabel", {
-    page: String(page),
-    nbPages: String(nbPages)
-  });
-  const pagination = /* @__PURE__ */ jsx(
-    Pagination,
-    {
-      count: nbPages,
-      page,
-      onChange: pageChange,
-      showFirstButton: true,
-      showLastButton: true
-    }
-  );
   const filteredMembers = members.filter((member) => {
     const fields = [
       member.metadata.name,
@@ -201,58 +180,64 @@ const MembersListCard = (props) => {
     );
   });
   const membersToRender = searchTerm ? filteredMembers : members;
+  const totalCount = membersToRender.length;
+  const hasNextPage = offset + pageSize < totalCount;
+  const hasPreviousPage = offset > 0;
+  const pagination = totalCount > pageSize ? /* @__PURE__ */ jsx(
+    TablePagination,
+    {
+      showPageSizeOptions: false,
+      pageSizeOptions: [pageSize],
+      pageSize,
+      offset,
+      totalCount,
+      hasNextPage,
+      hasPreviousPage,
+      onNextPage: () => setOffset((prev) => prev + pageSize),
+      onPreviousPage: () => setOffset((prev) => Math.max(0, prev - pageSize))
+    }
+  ) : void 0;
   let memberList;
-  if (membersToRender && membersToRender.length > 0) {
-    memberList = /* @__PURE__ */ jsx(Box, { className: classes.memberList, children: membersToRender.slice(pageSize * (page - 1), pageSize * page).map((member) => /* @__PURE__ */ jsx(MemberComponent, { member }, stringifyEntityRef(member))) });
+  if (membersToRender.length > 0) {
+    memberList = /* @__PURE__ */ jsx("ul", { className: classes.memberList, children: membersToRender.slice(offset, offset + pageSize).map((member) => /* @__PURE__ */ jsx(
+      "li",
+      {
+        className: classes.memberListItem,
+        children: /* @__PURE__ */ jsx(MemberComponent, { member })
+      },
+      stringifyEntityRef(member)
+    )) });
   } else {
-    memberList = /* @__PURE__ */ jsx(Box, { p: 2, children: /* @__PURE__ */ jsx(Typography, { children: t("membersListCard.noMembersDescription") }) });
+    memberList = /* @__PURE__ */ jsx(Box, { p: "2", children: /* @__PURE__ */ jsx(Text, { as: "p", children: searchTerm ? t("membersListCard.noSearchResult", { searchTerm }) : t("membersListCard.noMembersDescription") }) });
   }
-  return /* @__PURE__ */ jsx(Grid, { item: true, className: classes.root, children: /* @__PURE__ */ jsxs(
-    InfoCard,
+  return /* @__PURE__ */ jsx(
+    EntityInfoCard,
     {
-      title: `${memberDisplayTitle} (${filteredMembers.length} of ${members.length}${paginationLabel})`,
-      subheader: t("membersListCard.subtitle", {
-        groupName: displayName
-      }),
-      ...nbPages <= 1 ? {} : { actions: pagination },
-      className: classes.root,
-      cardClassName: classes.cardContent,
-      children: [
-        showAggregateMembersToggle && /* @__PURE__ */ jsxs(Fragment, { children: [
-          t("membersListCard.aggregateMembersToggle.directMembers"),
-          /* @__PURE__ */ jsx(
-            Switch,
-            {
-              color: "primary",
-              checked: showAggregateMembers,
-              onChange: () => {
-                setShowAggregateMembers(!showAggregateMembers);
-              },
-              inputProps: {
-                "aria-label": t(
-                  "membersListCard.aggregateMembersToggle.ariaLabel"
-                )
-              }
-            }
-          ),
-          t("membersListCard.aggregateMembersToggle.aggregatedMembers")
-        ] }),
-        showAggregateMembers && loadingDescendantMembers ? /* @__PURE__ */ jsx(Progress, {}) : /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx(
-            TextField,
-            {
-              fullWidth: true,
-              margin: "dense",
-              placeholder: "Search members...",
-              value: searchTerm,
-              onChange: (e) => setSearchTerm(e.target.value)
-            }
-          ),
-          /* @__PURE__ */ jsx(Box, { sx: { mt: 2 }, children: memberList })
-        ] })
-      ]
+      title: `${cardTitle} (${filteredMembers.length} of ${members.length})`,
+      headerActions: showAggregateMembersToggle && /* @__PURE__ */ jsx(
+        Switch,
+        {
+          isSelected: showAggregateMembers,
+          onChange: setShowAggregateMembers,
+          label: t("membersListCard.aggregateMembersToggle.label")
+        }
+      ),
+      footerActions: pagination,
+      children: showAggregateMembers && loadingDescendantMembers ? /* @__PURE__ */ jsx(Progress, {}) : /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(
+          SearchField,
+          {
+            "aria-label": "Search members",
+            placeholder: "Search members...",
+            value: searchTerm,
+            onChange: setSearchTerm,
+            onClear: () => setSearchTerm("")
+          }
+        ),
+        memberList
+      ] })
     }
-  ) });
+  );
 };
 
 export { MembersListCard };

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;;;;"}