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

package/CHANGELOG.md

@@ -1,5 +1,56 @@
 # @backstage/plugin-org
 
+## 0.7.0-next.2
+
+### Minor Changes
+
+- d14b6e0: **BREAKING**: Migrated `MembersListCard`, `OwnershipCard`, and `CatalogGraphCard` to use BUI card primitives via `EntityInfoCard`.
+
+  - `OwnershipCard`: Removed `variant` and `maxScrollHeight` props. Card height and scrolling are now controlled by the parent container — the card fills its container and the body scrolls automatically when content overflows.
+  - `CatalogGraphCard`: Removed `variant` prop.
+  - `MembersListCard`: Translation keys `subtitle`, `paginationLabel`, `aggregateMembersToggle.directMembers`, `aggregateMembersToggle.aggregatedMembers`, and `aggregateMembersToggle.ariaLabel` have been removed. The `title` key now includes `{{groupName}}`. New keys added: `cardLabel`, `noSearchResult`, `aggregateMembersToggle.label`.
+  - `OwnershipCard`: Translation keys `aggregateRelationsToggle.directRelations`, `aggregateRelationsToggle.aggregatedRelations`, and `aggregateRelationsToggle.ariaLabel` have been removed. New key added: `aggregateRelationsToggle.label`.
+  - Removed `MemberComponentClassKey` export, and `root` and `cardContent` from `MembersListCardClassKey`, `card` from `OwnershipCardClassKey`, and `card` from `CatalogGraphCardClassKey`.
+
+  **Migration:**
+
+  ```diff
+  - <EntityOwnershipCard variant="gridItem" />
+  + <EntityOwnershipCard />
+  ```
+
+  ```diff
+  - <EntityCatalogGraphCard variant="gridItem" height={400} />
+  + <EntityCatalogGraphCard height={400} />
+  ```
+
+- 5fc35bb: Migrated `EntityAboutCard`, `EntityLinksCard`, `EntityLabelsCard`, `GroupProfileCard`, and `UserProfileCard` from MUI/InfoCard to use the new BUI card layout and BUI components where possible.
+
+  **BREAKING**: Removed `variant` prop from EntityAboutCard, EntityUserProfileCard, EntityGroupProfileCard, EntityLabelsCard, EntityLinksCard. Removed `gridSizes` prop from `AboutField`.
+
+  **Migration:**
+
+  Simply delete the obsolete `variant` and `gridSizes` props, e.g:
+
+  ```diff
+  -      <EntityAboutCard variant="gridItem" />
+  +      <EntityAboutCard />
+  ```
+
+  ```diff
+  -      <AboutField label="Owner" gridSizes={{ xs: 12, sm: 6, lg: 4 }} />
+  +      <AboutField label="Owner" />
+  ```
+
+### Patch Changes
+
+- Updated dependencies
+  - @backstage/ui@0.13.0-next.2
+  - @backstage/frontend-plugin-api@0.15.0-next.1
+  - @backstage/core-plugin-api@1.12.4-next.1
+  - @backstage/plugin-catalog-react@2.1.0-next.2
+  - @backstage/core-components@0.18.8-next.1
+
 ## 0.6.50-next.1
 
 ### Patch Changes

package/dist/alpha.d.ts

@@ -17,17 +17,13 @@ declare const orgTranslationRef: _backstage_frontend_plugin_api.TranslationRef<"
     readonly "groupProfileCard.listItemTitle.entityRef": "Entity Ref";
     readonly "groupProfileCard.listItemTitle.parentGroup": "Parent Group";
     readonly "groupProfileCard.listItemTitle.childGroups": "Child Groups";
-    readonly "membersListCard.title": "Members";
-    readonly "membersListCard.subtitle": "of {{groupName}}";
-    readonly "membersListCard.paginationLabel": ", page {{page}} of {{nbPages}}";
+    readonly "membersListCard.title": "{{groupName}} members";
+    readonly "membersListCard.cardLabel": "User page for {{memberName}}";
     readonly "membersListCard.noMembersDescription": "This group has no members.";
-    readonly "membersListCard.aggregateMembersToggle.ariaLabel": "Users Type Switch";
-    readonly "membersListCard.aggregateMembersToggle.directMembers": "Direct Members";
-    readonly "membersListCard.aggregateMembersToggle.aggregatedMembers": "Aggregated Members";
+    readonly "membersListCard.noSearchResult": "Found no members matching \"{{searchTerm}}\".";
+    readonly "membersListCard.aggregateMembersToggle.label": "Include subgroups";
     readonly "ownershipCard.title": "Ownership";
-    readonly "ownershipCard.aggregateRelationsToggle.ariaLabel": "Ownership Type Switch";
-    readonly "ownershipCard.aggregateRelationsToggle.directRelations": "Direct Relations";
-    readonly "ownershipCard.aggregateRelationsToggle.aggregatedRelations": "Aggregated Relations";
+    readonly "ownershipCard.aggregateRelationsToggle.label": "Include indirect ownership";
     readonly "userProfileCard.editIconButtonTitle": "Edit Metadata";
     readonly "userProfileCard.listItemTitle.email": "Email";
     readonly "userProfileCard.listItemTitle.memberOf": "Member of";

package/dist/components/Cards/Group/GroupProfile/GroupProfileCard.esm.js

@@ -1,14 +1,13 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { stringifyEntityRef, RELATION_PARENT_OF, RELATION_CHILD_OF, ANNOTATION_LOCATION, ANNOTATION_EDIT_URL } from '@backstage/catalog-model';
-import { Link, InfoCard, Avatar } from '@backstage/core-components';
-import Box from '@material-ui/core/Box';
+import { Link } from '@backstage/core-components';
 import IconButton from '@material-ui/core/IconButton';
 import List from '@material-ui/core/List';
 import ListItem from '@material-ui/core/ListItem';
 import ListItemIcon from '@material-ui/core/ListItemIcon';
 import ListItemText from '@material-ui/core/ListItemText';
 import Tooltip from '@material-ui/core/Tooltip';
-import { catalogApiRef, useEntity, getEntityRelations, EntityRefLinks } from '@backstage/plugin-catalog-react';
+import { catalogApiRef, useEntity, getEntityRelations, EntityInfoCard, EntityRefLinks } from '@backstage/plugin-catalog-react';
 import { useCallback } from 'react';
 import { useApi, alertApiRef } from '@backstage/core-plugin-api';
 import AccountTreeIcon from '@material-ui/icons/AccountTree';
@@ -24,6 +23,7 @@ import { catalogEntityRefreshPermission } from '@backstage/plugin-catalog-common
 import { useTranslationRef } from '@backstage/frontend-plugin-api';
 import { orgTranslationRef } from '../../../../translation.esm.js';
 import { makeStyles } from '@material-ui/core/styles';
+import { Text, Box, Flex, Avatar } from '@backstage/ui';
 
 const useStyles = makeStyles((theme) => ({
   container: {
@@ -37,11 +37,20 @@ const useStyles = makeStyles((theme) => ({
     marginLeft: theme.spacing(0.5)
   }
 }));
-const CardTitle = (props) => /* @__PURE__ */ jsxs(Box, { display: "flex", alignItems: "center", children: [
-  /* @__PURE__ */ jsx(GroupIcon, { fontSize: "inherit" }),
-  /* @__PURE__ */ jsx(Box, { ml: 1, children: props.title })
+const CardTitle = (props) => /* @__PURE__ */ jsxs(Flex, { align: "center", gap: "2", children: [
+  /* @__PURE__ */ jsx(
+    Avatar,
+    {
+      size: "small",
+      purpose: "decoration",
+      name: props.title,
+      src: props.pictureSrc || ""
+    }
+  ),
+  props.title
 ] });
 const GroupProfileCard = (props) => {
+  const { showLinks } = props;
   const catalogApi = useApi(catalogApiRef);
   const alertApi = useApi(alertApiRef);
   const { entity: group } = useEntity();
@@ -94,13 +103,11 @@ const GroupProfileCard = (props) => {
       children: /* @__PURE__ */ jsx(EditIcon, {})
     }
   );
-  return /* @__PURE__ */ jsx(
-    InfoCard,
+  return /* @__PURE__ */ jsxs(
+    EntityInfoCard,
     {
-      title: /* @__PURE__ */ jsx(CardTitle, { title: displayName }),
-      subheader: description,
-      variant: props.variant,
-      action: /* @__PURE__ */ jsxs(Fragment, { children: [
+      title: /* @__PURE__ */ jsx(CardTitle, { title: displayName, pictureSrc: profile?.picture }),
+      headerActions: /* @__PURE__ */ jsxs(Fragment, { children: [
         allowRefresh && canRefresh && /* @__PURE__ */ jsx(
           IconButton,
           {
@@ -112,9 +119,9 @@ const GroupProfileCard = (props) => {
         ),
         infoCardAction
       ] }),
-      children: /* @__PURE__ */ jsxs(Box, { className: classes.container, children: [
-        /* @__PURE__ */ jsx(Avatar, { displayName, picture: profile?.picture }),
-        /* @__PURE__ */ jsxs(List, { className: classes.list, children: [
+      children: [
+        description && /* @__PURE__ */ jsx(Text, { color: "secondary", children: description }),
+        /* @__PURE__ */ jsx(Box, { p: "2", children: /* @__PURE__ */ jsxs(List, { className: classes.list, children: [
           /* @__PURE__ */ jsxs(ListItem, { children: [
             /* @__PURE__ */ jsx(ListItemIcon, { children: /* @__PURE__ */ jsx(Tooltip, { title: t("groupProfileCard.listItemTitle.entityRef"), children: /* @__PURE__ */ jsx(PermIdentityIcon, {}) }) }),
             /* @__PURE__ */ jsx(
@@ -167,9 +174,9 @@ const GroupProfileCard = (props) => {
               }
             )
           ] }),
-          props?.showLinks && /* @__PURE__ */ jsx(LinksGroup, { links })
-        ] })
-      ] })
+          showLinks && /* @__PURE__ */ jsx(LinksGroup, { links })
+        ] }) })
+      ]
     }
   );
 };

package/dist/components/Cards/Group/GroupProfile/GroupProfileCard.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"GroupProfileCard.esm.js","sources":["../../../../../src/components/Cards/Group/GroupProfile/GroupProfileCard.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  ANNOTATION_LOCATION,\n  GroupEntity,\n  RELATION_CHILD_OF,\n  RELATION_PARENT_OF,\n  stringifyEntityRef,\n} from '@backstage/catalog-model';\nimport {\n  Avatar,\n  InfoCard,\n  InfoCardVariants,\n  Link,\n} from '@backstage/core-components';\nimport Box from '@material-ui/core/Box';\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 {\n  EntityRefLinks,\n  catalogApiRef,\n  getEntityRelations,\n  useEntity,\n} from '@backstage/plugin-catalog-react';\nimport { useCallback } from 'react';\nimport { alertApiRef, useApi } from '@backstage/core-plugin-api';\n\nimport AccountTreeIcon from '@material-ui/icons/AccountTree';\nimport Alert from '@material-ui/lab/Alert';\nimport CachedIcon from '@material-ui/icons/Cached';\nimport EditIcon from '@material-ui/icons/Edit';\nimport EmailIcon from '@material-ui/icons/Email';\nimport GroupIcon from '@material-ui/icons/Group';\nimport PermIdentityIcon from '@material-ui/icons/PermIdentity';\nimport { LinksGroup } from '../../Meta';\nimport { useEntityPermission } from '@backstage/plugin-catalog-react/alpha';\nimport { catalogEntityRefreshPermission } from '@backstage/plugin-catalog-common/alpha';\nimport { useTranslationRef } from '@backstage/frontend-plugin-api';\nimport { orgTranslationRef } from '../../../../translation';\nimport { makeStyles } from '@material-ui/core/styles';\n\nconst useStyles = makeStyles(theme => ({\n  container: {\n    display: 'flex',\n    flexWrap: 'wrap',\n    gap: theme.spacing(1),\n    padding: theme.spacing(1),\n  },\n  list: {\n    padding: 0,\n    marginLeft: theme.spacing(0.5),\n  },\n}));\n\nconst CardTitle = (props: { title: string }) => (\n  <Box display=\"flex\" alignItems=\"center\">\n    <GroupIcon fontSize=\"inherit\" />\n    <Box ml={1}>{props.title}</Box>\n  </Box>\n);\n\n/** @public */\nexport const GroupProfileCard = (props: {\n  variant?: InfoCardVariants;\n  showLinks?: boolean;\n}) => {\n  const catalogApi = useApi(catalogApiRef);\n  const alertApi = useApi(alertApiRef);\n  const { entity: group } = useEntity<GroupEntity>();\n  const { allowed: canRefresh } = useEntityPermission(\n    catalogEntityRefreshPermission,\n  );\n  const { t } = useTranslationRef(orgTranslationRef);\n  const classes = useStyles();\n\n  const refreshEntity = useCallback(async () => {\n    await catalogApi.refreshEntity(stringifyEntityRef(group));\n    alertApi.post({\n      message: 'Refresh scheduled',\n      severity: 'info',\n      display: 'transient',\n    });\n  }, [catalogApi, alertApi, group]);\n\n  if (!group) {\n    return (\n      <Alert severity=\"error\">{t('groupProfileCard.groupNotFound')}</Alert>\n    );\n  }\n\n  const {\n    metadata: { name, description, title, annotations, links },\n    spec: { profile },\n  } = group;\n\n  const childRelations = getEntityRelations(group, RELATION_PARENT_OF, {\n    kind: 'Group',\n  });\n  const parentRelations = getEntityRelations(group, RELATION_CHILD_OF, {\n    kind: 'group',\n  });\n\n  const entityLocation = annotations?.[ANNOTATION_LOCATION];\n  const allowRefresh =\n    entityLocation?.startsWith('url:') || entityLocation?.startsWith('file:');\n\n  const entityMetadataEditUrl =\n    group.metadata.annotations?.[ANNOTATION_EDIT_URL];\n\n  const displayName = profile?.displayName ?? title ?? name;\n  const emailHref = profile?.email ? `mailto:${profile.email}` : '#';\n  const infoCardAction = entityMetadataEditUrl ? (\n    <IconButton\n      aria-label={t('groupProfileCard.editIconButtonTitle')}\n      title={t('groupProfileCard.editIconButtonTitle')}\n      component={Link}\n      to={entityMetadataEditUrl}\n    >\n      <EditIcon />\n    </IconButton>\n  ) : (\n    <IconButton\n      aria-label={t('groupProfileCard.editIconButtonTitle')}\n      disabled\n      title={t('groupProfileCard.editIconButtonTitle')}\n    >\n      <EditIcon />\n    </IconButton>\n  );\n\n  return (\n    <InfoCard\n      title={<CardTitle title={displayName} />}\n      subheader={description}\n      variant={props.variant}\n      action={\n        <>\n          {allowRefresh && canRefresh && (\n            <IconButton\n              aria-label={t('groupProfileCard.refreshIconButtonAriaLabel')}\n              title={t('groupProfileCard.refreshIconButtonTitle')}\n              onClick={refreshEntity}\n            >\n              <CachedIcon />\n            </IconButton>\n          )}\n          {infoCardAction}\n        </>\n      }\n    >\n      <Box className={classes.container}>\n        <Avatar displayName={displayName} picture={profile?.picture} />\n        <List className={classes.list}>\n          <ListItem>\n            <ListItemIcon>\n              <Tooltip title={t('groupProfileCard.listItemTitle.entityRef')}>\n                <PermIdentityIcon />\n              </Tooltip>\n            </ListItemIcon>\n            <ListItemText\n              primary={stringifyEntityRef(group)}\n              secondary={t('groupProfileCard.listItemTitle.entityRef')}\n            />\n          </ListItem>\n          {profile?.email && (\n            <ListItem>\n              <ListItemIcon>\n                <Tooltip title={t('groupProfileCard.listItemTitle.email')}>\n                  <EmailIcon />\n                </Tooltip>\n              </ListItemIcon>\n              <ListItemText\n                primary={<Link to={emailHref}>{profile.email}</Link>}\n                secondary={t('groupProfileCard.listItemTitle.email')}\n              />\n            </ListItem>\n          )}\n          <ListItem>\n            <ListItemIcon>\n              <Tooltip title={t('groupProfileCard.listItemTitle.parentGroup')}>\n                <AccountTreeIcon />\n              </Tooltip>\n            </ListItemIcon>\n            <ListItemText\n              primary={\n                parentRelations.length ? (\n                  <EntityRefLinks\n                    entityRefs={parentRelations}\n                    defaultKind=\"Group\"\n                  />\n                ) : (\n                  'N/A'\n                )\n              }\n              secondary={t('groupProfileCard.listItemTitle.parentGroup')}\n            />\n          </ListItem>\n          <ListItem>\n            <ListItemIcon>\n              <Tooltip title={t('groupProfileCard.listItemTitle.childGroups')}>\n                <GroupIcon />\n              </Tooltip>\n            </ListItemIcon>\n            <ListItemText\n              primary={\n                childRelations.length ? (\n                  <EntityRefLinks\n                    entityRefs={childRelations}\n                    defaultKind=\"Group\"\n                  />\n                ) : (\n                  'N/A'\n                )\n              }\n              secondary={t('groupProfileCard.listItemTitle.childGroups')}\n            />\n          </ListItem>\n          {props?.showLinks && <LinksGroup links={links} />}\n        </List>\n      </Box>\n    </InfoCard>\n  );\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"GroupProfileCard.esm.js","sources":["../../../../../src/components/Cards/Group/GroupProfile/GroupProfileCard.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  ANNOTATION_LOCATION,\n  GroupEntity,\n  RELATION_CHILD_OF,\n  RELATION_PARENT_OF,\n  stringifyEntityRef,\n} from '@backstage/catalog-model';\nimport { Link } from '@backstage/core-components';\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 {\n  EntityInfoCard,\n  EntityRefLinks,\n  catalogApiRef,\n  getEntityRelations,\n  useEntity,\n} from '@backstage/plugin-catalog-react';\nimport { useCallback } from 'react';\nimport { alertApiRef, useApi } from '@backstage/core-plugin-api';\n\nimport AccountTreeIcon from '@material-ui/icons/AccountTree';\nimport Alert from '@material-ui/lab/Alert';\nimport CachedIcon from '@material-ui/icons/Cached';\nimport EditIcon from '@material-ui/icons/Edit';\nimport EmailIcon from '@material-ui/icons/Email';\nimport GroupIcon from '@material-ui/icons/Group';\nimport PermIdentityIcon from '@material-ui/icons/PermIdentity';\nimport { LinksGroup } from '../../Meta';\nimport { useEntityPermission } from '@backstage/plugin-catalog-react/alpha';\nimport { catalogEntityRefreshPermission } from '@backstage/plugin-catalog-common/alpha';\nimport { useTranslationRef } from '@backstage/frontend-plugin-api';\nimport { orgTranslationRef } from '../../../../translation';\nimport { makeStyles } from '@material-ui/core/styles';\nimport { Avatar, Flex, Box, Text } from '@backstage/ui';\n\nconst useStyles = makeStyles(theme => ({\n  container: {\n    display: 'flex',\n    flexWrap: 'wrap',\n    gap: theme.spacing(1),\n    padding: theme.spacing(1),\n  },\n  list: {\n    padding: 0,\n    marginLeft: theme.spacing(0.5),\n  },\n}));\n\nconst CardTitle = (props: { title: string; pictureSrc?: string }) => (\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);\n\n/** @public */\nexport const GroupProfileCard = (props: { showLinks?: boolean }) => {\n  const { showLinks } = props;\n  const catalogApi = useApi(catalogApiRef);\n  const alertApi = useApi(alertApiRef);\n  const { entity: group } = useEntity<GroupEntity>();\n  const { allowed: canRefresh } = useEntityPermission(\n    catalogEntityRefreshPermission,\n  );\n  const { t } = useTranslationRef(orgTranslationRef);\n  const classes = useStyles();\n\n  const refreshEntity = useCallback(async () => {\n    await catalogApi.refreshEntity(stringifyEntityRef(group));\n    alertApi.post({\n      message: 'Refresh scheduled',\n      severity: 'info',\n      display: 'transient',\n    });\n  }, [catalogApi, alertApi, group]);\n\n  if (!group) {\n    return (\n      <Alert severity=\"error\">{t('groupProfileCard.groupNotFound')}</Alert>\n    );\n  }\n\n  const {\n    metadata: { name, description, title, annotations, links },\n    spec: { profile },\n  } = group;\n\n  const childRelations = getEntityRelations(group, RELATION_PARENT_OF, {\n    kind: 'Group',\n  });\n  const parentRelations = getEntityRelations(group, RELATION_CHILD_OF, {\n    kind: 'group',\n  });\n\n  const entityLocation = annotations?.[ANNOTATION_LOCATION];\n  const allowRefresh =\n    entityLocation?.startsWith('url:') || entityLocation?.startsWith('file:');\n\n  const entityMetadataEditUrl =\n    group.metadata.annotations?.[ANNOTATION_EDIT_URL];\n\n  const displayName = profile?.displayName ?? title ?? name;\n  const emailHref = profile?.email ? `mailto:${profile.email}` : '#';\n  const infoCardAction = entityMetadataEditUrl ? (\n    <IconButton\n      aria-label={t('groupProfileCard.editIconButtonTitle')}\n      title={t('groupProfileCard.editIconButtonTitle')}\n      component={Link}\n      to={entityMetadataEditUrl}\n    >\n      <EditIcon />\n    </IconButton>\n  ) : (\n    <IconButton\n      aria-label={t('groupProfileCard.editIconButtonTitle')}\n      disabled\n      title={t('groupProfileCard.editIconButtonTitle')}\n    >\n      <EditIcon />\n    </IconButton>\n  );\n\n  return (\n    <EntityInfoCard\n      title={<CardTitle title={displayName} pictureSrc={profile?.picture} />}\n      headerActions={\n        <>\n          {allowRefresh && canRefresh && (\n            <IconButton\n              aria-label={t('groupProfileCard.refreshIconButtonAriaLabel')}\n              title={t('groupProfileCard.refreshIconButtonTitle')}\n              onClick={refreshEntity}\n            >\n              <CachedIcon />\n            </IconButton>\n          )}\n          {infoCardAction}\n        </>\n      }\n    >\n      {description && <Text color=\"secondary\">{description}</Text>}\n      <Box p=\"2\">\n        <List className={classes.list}>\n          <ListItem>\n            <ListItemIcon>\n              <Tooltip title={t('groupProfileCard.listItemTitle.entityRef')}>\n                <PermIdentityIcon />\n              </Tooltip>\n            </ListItemIcon>\n            <ListItemText\n              primary={stringifyEntityRef(group)}\n              secondary={t('groupProfileCard.listItemTitle.entityRef')}\n            />\n          </ListItem>\n          {profile?.email && (\n            <ListItem>\n              <ListItemIcon>\n                <Tooltip title={t('groupProfileCard.listItemTitle.email')}>\n                  <EmailIcon />\n                </Tooltip>\n              </ListItemIcon>\n              <ListItemText\n                primary={<Link to={emailHref}>{profile.email}</Link>}\n                secondary={t('groupProfileCard.listItemTitle.email')}\n              />\n            </ListItem>\n          )}\n          <ListItem>\n            <ListItemIcon>\n              <Tooltip title={t('groupProfileCard.listItemTitle.parentGroup')}>\n                <AccountTreeIcon />\n              </Tooltip>\n            </ListItemIcon>\n            <ListItemText\n              primary={\n                parentRelations.length ? (\n                  <EntityRefLinks\n                    entityRefs={parentRelations}\n                    defaultKind=\"Group\"\n                  />\n                ) : (\n                  'N/A'\n                )\n              }\n              secondary={t('groupProfileCard.listItemTitle.parentGroup')}\n            />\n          </ListItem>\n          <ListItem>\n            <ListItemIcon>\n              <Tooltip title={t('groupProfileCard.listItemTitle.childGroups')}>\n                <GroupIcon />\n              </Tooltip>\n            </ListItemIcon>\n            <ListItemText\n              primary={\n                childRelations.length ? (\n                  <EntityRefLinks\n                    entityRefs={childRelations}\n                    defaultKind=\"Group\"\n                  />\n                ) : (\n                  'N/A'\n                )\n              }\n              secondary={t('groupProfileCard.listItemTitle.childGroups')}\n            />\n          </ListItem>\n          {showLinks && <LinksGroup links={links} />}\n        </List>\n      </Box>\n    </EntityInfoCard>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAwDA,MAAM,SAAA,GAAY,WAAW,CAAA,KAAA,MAAU;AAAA,EACrC,SAAA,EAAW;AAAA,IACT,OAAA,EAAS,MAAA;AAAA,IACT,QAAA,EAAU,MAAA;AAAA,IACV,GAAA,EAAK,KAAA,CAAM,OAAA,CAAQ,CAAC,CAAA;AAAA,IACpB,OAAA,EAAS,KAAA,CAAM,OAAA,CAAQ,CAAC;AAAA,GAC1B;AAAA,EACA,IAAA,EAAM;AAAA,IACJ,OAAA,EAAS,CAAA;AAAA,IACT,UAAA,EAAY,KAAA,CAAM,OAAA,CAAQ,GAAG;AAAA;AAEjC,CAAA,CAAE,CAAA;AAEF,MAAM,SAAA,GAAY,CAAC,KAAA,qBACjB,IAAA,CAAC,QAAK,KAAA,EAAM,QAAA,EAAS,KAAI,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;AAIK,MAAM,gBAAA,GAAmB,CAAC,KAAA,KAAmC;AAClE,EAAA,MAAM,EAAE,WAAU,GAAI,KAAA;AACtB,EAAA,MAAM,UAAA,GAAa,OAAO,aAAa,CAAA;AACvC,EAAA,MAAM,QAAA,GAAW,OAAO,WAAW,CAAA;AACnC,EAAA,MAAM,EAAE,MAAA,EAAQ,KAAA,EAAM,GAAI,SAAA,EAAuB;AACjD,EAAA,MAAM,EAAE,OAAA,EAAS,UAAA,EAAW,GAAI,mBAAA;AAAA,IAC9B;AAAA,GACF;AACA,EAAA,MAAM,EAAE,CAAA,EAAE,GAAI,iBAAA,CAAkB,iBAAiB,CAAA;AACjD,EAAA,MAAM,UAAU,SAAA,EAAU;AAE1B,EAAA,MAAM,aAAA,GAAgB,YAAY,YAAY;AAC5C,IAAA,MAAM,UAAA,CAAW,aAAA,CAAc,kBAAA,CAAmB,KAAK,CAAC,CAAA;AACxD,IAAA,QAAA,CAAS,IAAA,CAAK;AAAA,MACZ,OAAA,EAAS,mBAAA;AAAA,MACT,QAAA,EAAU,MAAA;AAAA,MACV,OAAA,EAAS;AAAA,KACV,CAAA;AAAA,EACH,CAAA,EAAG,CAAC,UAAA,EAAY,QAAA,EAAU,KAAK,CAAC,CAAA;AAEhC,EAAA,IAAI,CAAC,KAAA,EAAO;AACV,IAAA,2BACG,KAAA,EAAA,EAAM,QAAA,EAAS,OAAA,EAAS,QAAA,EAAA,CAAA,CAAE,gCAAgC,CAAA,EAAE,CAAA;AAAA,EAEjE;AAEA,EAAA,MAAM;AAAA,IACJ,UAAU,EAAE,IAAA,EAAM,WAAA,EAAa,KAAA,EAAO,aAAa,KAAA,EAAM;AAAA,IACzD,IAAA,EAAM,EAAE,OAAA;AAAQ,GAClB,GAAI,KAAA;AAEJ,EAAA,MAAM,cAAA,GAAiB,kBAAA,CAAmB,KAAA,EAAO,kBAAA,EAAoB;AAAA,IACnE,IAAA,EAAM;AAAA,GACP,CAAA;AACD,EAAA,MAAM,eAAA,GAAkB,kBAAA,CAAmB,KAAA,EAAO,iBAAA,EAAmB;AAAA,IACnE,IAAA,EAAM;AAAA,GACP,CAAA;AAED,EAAA,MAAM,cAAA,GAAiB,cAAc,mBAAmB,CAAA;AACxD,EAAA,MAAM,eACJ,cAAA,EAAgB,UAAA,CAAW,MAAM,CAAA,IAAK,cAAA,EAAgB,WAAW,OAAO,CAAA;AAE1E,EAAA,MAAM,qBAAA,GACJ,KAAA,CAAM,QAAA,CAAS,WAAA,GAAc,mBAAmB,CAAA;AAElD,EAAA,MAAM,WAAA,GAAc,OAAA,EAAS,WAAA,IAAe,KAAA,IAAS,IAAA;AACrD,EAAA,MAAM,YAAY,OAAA,EAAS,KAAA,GAAQ,CAAA,OAAA,EAAU,OAAA,CAAQ,KAAK,CAAA,CAAA,GAAK,GAAA;AAC/D,EAAA,MAAM,iBAAiB,qBAAA,mBACrB,GAAA;AAAA,IAAC,UAAA;AAAA,IAAA;AAAA,MACC,YAAA,EAAY,EAAE,sCAAsC,CAAA;AAAA,MACpD,KAAA,EAAO,EAAE,sCAAsC,CAAA;AAAA,MAC/C,SAAA,EAAW,IAAA;AAAA,MACX,EAAA,EAAI,qBAAA;AAAA,MAEJ,8BAAC,QAAA,EAAA,EAAS;AAAA;AAAA,GACZ,mBAEA,GAAA;AAAA,IAAC,UAAA;AAAA,IAAA;AAAA,MACC,YAAA,EAAY,EAAE,sCAAsC,CAAA;AAAA,MACpD,QAAA,EAAQ,IAAA;AAAA,MACR,KAAA,EAAO,EAAE,sCAAsC,CAAA;AAAA,MAE/C,8BAAC,QAAA,EAAA,EAAS;AAAA;AAAA,GACZ;AAGF,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,+BACE,IAAA,CAAA,QAAA,EAAA,EACG,QAAA,EAAA;AAAA,QAAA,YAAA,IAAgB,UAAA,oBACf,GAAA;AAAA,UAAC,UAAA;AAAA,UAAA;AAAA,YACC,YAAA,EAAY,EAAE,6CAA6C,CAAA;AAAA,YAC3D,KAAA,EAAO,EAAE,yCAAyC,CAAA;AAAA,YAClD,OAAA,EAAS,aAAA;AAAA,YAET,8BAAC,UAAA,EAAA,EAAW;AAAA;AAAA,SACd;AAAA,QAED;AAAA,OAAA,EACH,CAAA;AAAA,MAGD,QAAA,EAAA;AAAA,QAAA,WAAA,oBAAe,GAAA,CAAC,IAAA,EAAA,EAAK,KAAA,EAAM,WAAA,EAAa,QAAA,EAAA,WAAA,EAAY,CAAA;AAAA,wBACrD,GAAA,CAAC,OAAI,CAAA,EAAE,GAAA,EACL,+BAAC,IAAA,EAAA,EAAK,SAAA,EAAW,QAAQ,IAAA,EACvB,QAAA,EAAA;AAAA,0BAAA,IAAA,CAAC,QAAA,EAAA,EACC,QAAA,EAAA;AAAA,4BAAA,GAAA,CAAC,YAAA,EAAA,EACC,QAAA,kBAAA,GAAA,CAAC,OAAA,EAAA,EAAQ,KAAA,EAAO,CAAA,CAAE,0CAA0C,CAAA,EAC1D,QAAA,kBAAA,GAAA,CAAC,gBAAA,EAAA,EAAiB,CAAA,EACpB,CAAA,EACF,CAAA;AAAA,4BACA,GAAA;AAAA,cAAC,YAAA;AAAA,cAAA;AAAA,gBACC,OAAA,EAAS,mBAAmB,KAAK,CAAA;AAAA,gBACjC,SAAA,EAAW,EAAE,0CAA0C;AAAA;AAAA;AACzD,WAAA,EACF,CAAA;AAAA,UACC,OAAA,EAAS,KAAA,oBACR,IAAA,CAAC,QAAA,EAAA,EACC,QAAA,EAAA;AAAA,4BAAA,GAAA,CAAC,YAAA,EAAA,EACC,QAAA,kBAAA,GAAA,CAAC,OAAA,EAAA,EAAQ,KAAA,EAAO,CAAA,CAAE,sCAAsC,CAAA,EACtD,QAAA,kBAAA,GAAA,CAAC,SAAA,EAAA,EAAU,CAAA,EACb,CAAA,EACF,CAAA;AAAA,4BACA,GAAA;AAAA,cAAC,YAAA;AAAA,cAAA;AAAA,gBACC,yBAAS,GAAA,CAAC,IAAA,EAAA,EAAK,EAAA,EAAI,SAAA,EAAY,kBAAQ,KAAA,EAAM,CAAA;AAAA,gBAC7C,SAAA,EAAW,EAAE,sCAAsC;AAAA;AAAA;AACrD,WAAA,EACF,CAAA;AAAA,+BAED,QAAA,EAAA,EACC,QAAA,EAAA;AAAA,4BAAA,GAAA,CAAC,YAAA,EAAA,EACC,QAAA,kBAAA,GAAA,CAAC,OAAA,EAAA,EAAQ,KAAA,EAAO,CAAA,CAAE,4CAA4C,CAAA,EAC5D,QAAA,kBAAA,GAAA,CAAC,eAAA,EAAA,EAAgB,CAAA,EACnB,CAAA,EACF,CAAA;AAAA,4BACA,GAAA;AAAA,cAAC,YAAA;AAAA,cAAA;AAAA,gBACC,OAAA,EACE,gBAAgB,MAAA,mBACd,GAAA;AAAA,kBAAC,cAAA;AAAA,kBAAA;AAAA,oBACC,UAAA,EAAY,eAAA;AAAA,oBACZ,WAAA,EAAY;AAAA;AAAA,iBACd,GAEA,KAAA;AAAA,gBAGJ,SAAA,EAAW,EAAE,4CAA4C;AAAA;AAAA;AAC3D,WAAA,EACF,CAAA;AAAA,+BACC,QAAA,EAAA,EACC,QAAA,EAAA;AAAA,4BAAA,GAAA,CAAC,YAAA,EAAA,EACC,QAAA,kBAAA,GAAA,CAAC,OAAA,EAAA,EAAQ,KAAA,EAAO,CAAA,CAAE,4CAA4C,CAAA,EAC5D,QAAA,kBAAA,GAAA,CAAC,SAAA,EAAA,EAAU,CAAA,EACb,CAAA,EACF,CAAA;AAAA,4BACA,GAAA;AAAA,cAAC,YAAA;AAAA,cAAA;AAAA,gBACC,OAAA,EACE,eAAe,MAAA,mBACb,GAAA;AAAA,kBAAC,cAAA;AAAA,kBAAA;AAAA,oBACC,UAAA,EAAY,cAAA;AAAA,oBACZ,WAAA,EAAY;AAAA;AAAA,iBACd,GAEA,KAAA;AAAA,gBAGJ,SAAA,EAAW,EAAE,4CAA4C;AAAA;AAAA;AAC3D,WAAA,EACF,CAAA;AAAA,UACC,SAAA,oBAAa,GAAA,CAAC,UAAA,EAAA,EAAW,KAAA,EAAc;AAAA,SAAA,EAC1C,CAAA,EACF;AAAA;AAAA;AAAA,GACF;AAEJ;;;;"}

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