Merge pull request #30880 from benjidotsh/plugin-org/ownership-card-scroll

feat(plugin-org): add support for scrolling to OwnershipCard component

.changeset/wild-ravens-laugh.md

@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-org': patch
+---
+
+Added support for scrolling to OwnershipCard component

plugins/org/report.api.md

@@ -40,6 +40,7 @@ export const EntityOwnershipCard: (props: {
   relationsType?: EntityRelationAggregation;
   relationAggregation?: EntityRelationAggregation;
   entityLimit?: number;
+  maxScrollHeight?: string;
 }) => JSX_2.Element;
 
 // @public (undocumented)
@@ -101,6 +102,7 @@ export const OwnershipCard: (props: {
   relationsType?: EntityRelationAggregation;
   relationAggregation?: EntityRelationAggregation;
   entityLimit?: number;
+  maxScrollHeight?: string;
 }) => JSX_2.Element;
 
 // @public (undocumented)

plugins/org/src/components/Cards/OwnershipCard/OwnershipCard.tsx

@@ -28,6 +28,7 @@ import { ComponentsGrid } from './ComponentsGrid';
 import { EntityRelationAggregation } from '../types';
 import { useTranslationRef } from '@backstage/frontend-plugin-api';
 import { orgTranslationRef } from '../../../translation';
+import Box from '@material-ui/core/Box';
 
 /** @public */
 export type OwnershipCardClassKey =
@@ -73,6 +74,11 @@ const useStyles = makeStyles(
         overflowY: 'auto',
         marginTop: 0,
       },
+      box: {
+        overflowY: 'auto',
+        padding: theme.spacing(0, 1, 1),
+        margin: theme.spacing(0, -1),
+      },
     }),
   {
     name: 'PluginOrgOwnershipCard',
@@ -88,16 +94,20 @@ export const OwnershipCard = (props: {
   relationsType?: EntityRelationAggregation;
   relationAggregation?: EntityRelationAggregation;
   entityLimit?: number;
+  maxScrollHeight?: string;
 }) => {
   const {
     variant,
     entityFilterKind,
     hideRelationsToggle,
     entityLimit = 6,
+    maxScrollHeight: propMaxScrollHeight,
   } = props;
   const relationAggregation = props.relationAggregation ?? props.relationsType;
   const relationsToggle =
     hideRelationsToggle === undefined ? false : hideRelationsToggle;
+  const maxScrollHeight =
+    variant !== 'fullHeight' ? propMaxScrollHeight : undefined;
   const classes = useStyles();
   const { entity } = useEntity();
   const { t } = useTranslationRef(orgTranslationRef);
@@ -165,13 +175,15 @@ export const OwnershipCard = (props: {
           </ListItem>
         </List>
       )}
-      <ComponentsGrid
-        className={classes.grid}
-        entity={entity}
-        entityLimit={entityLimit}
-        relationAggregation={getRelationAggregation}
-        entityFilterKind={entityFilterKind}
-      />
+      <Box maxHeight={maxScrollHeight} className={classes.box}>
+        <ComponentsGrid
+          className={classes.grid}
+          entity={entity}
+          entityLimit={entityLimit}
+          relationAggregation={getRelationAggregation}
+          entityFilterKind={entityFilterKind}
+        />
+      </Box>
     </InfoCard>
   );
 };