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

Signed-off-by: Benjamin Janssens <benji.janssens@gmail.com>

plugins/org/report.api.md

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

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

@@ -124,7 +124,7 @@ export const ComponentsGrid = ({
   relationsType,
   relationAggregation,
   entityFilterKind,
-  entityLimit = 6,
+  entityLimit,
 }: {
   className?: string;
   entity: Entity;

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;
+  scrollHeight?: string;
 }) => {
   const {
     variant,
     entityFilterKind,
     hideRelationsToggle,
-    entityLimit = 6,
+    entityLimit,
+    scrollHeight: propScrollHeight = '292px',
   } = props;
   const relationAggregation = props.relationAggregation ?? props.relationsType;
   const relationsToggle =
     hideRelationsToggle === undefined ? false : hideRelationsToggle;
+  const scrollHeight =
+    entityLimit || variant === 'fullHeight' ? 'none' : propScrollHeight;
   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={scrollHeight} className={classes.box}>
+        <ComponentsGrid
+          className={classes.grid}
+          entity={entity}
+          entityLimit={entityLimit}
+          relationAggregation={getRelationAggregation}
+          entityFilterKind={entityFilterKind}
+        />
+      </Box>
     </InfoCard>
   );
 };

plugins/org/src/components/Cards/OwnershipCard/useGetEntities.ts

@@ -184,7 +184,7 @@ export function useGetEntities(
   entity: Entity,
   relationAggregation: EntityRelationAggregation,
   entityFilterKind?: string[],
-  entityLimit = 6,
+  entityLimit?: number,
 ): {
   componentsWithCounters:
     | {