diff --git a/.changeset/wild-ravens-laugh.md b/.changeset/wild-ravens-laugh.md new file mode 100644 index 0000000000..88e7d18646 --- /dev/null +++ b/.changeset/wild-ravens-laugh.md @@ -0,0 +1,5 @@ +--- +'@backstage/plugin-org': patch +--- + +Added support for scrolling to OwnershipCard component diff --git a/plugins/org/report.api.md b/plugins/org/report.api.md index 7d58d96263..a52e4160d3 100644 --- a/plugins/org/report.api.md +++ b/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) diff --git a/plugins/org/src/components/Cards/OwnershipCard/ComponentsGrid.tsx b/plugins/org/src/components/Cards/OwnershipCard/ComponentsGrid.tsx index 0c177f31a8..5ba91ab601 100644 --- a/plugins/org/src/components/Cards/OwnershipCard/ComponentsGrid.tsx +++ b/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; diff --git a/plugins/org/src/components/Cards/OwnershipCard/OwnershipCard.tsx b/plugins/org/src/components/Cards/OwnershipCard/OwnershipCard.tsx index cf34800bf4..eac411a805 100644 --- a/plugins/org/src/components/Cards/OwnershipCard/OwnershipCard.tsx +++ b/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: { )} - + + + ); }; diff --git a/plugins/org/src/components/Cards/OwnershipCard/useGetEntities.ts b/plugins/org/src/components/Cards/OwnershipCard/useGetEntities.ts index a5a5363192..98e319a4c3 100644 --- a/plugins/org/src/components/Cards/OwnershipCard/useGetEntities.ts +++ b/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: | {