From 4ee19ed8dc7ae5bf81381d743108f544c04ee119 Mon Sep 17 00:00:00 2001 From: Benjamin Janssens Date: Wed, 13 Aug 2025 15:41:29 +0200 Subject: [PATCH 1/4] feat(plugin-org): add support for scrolling to OwnershipCard Signed-off-by: Benjamin Janssens --- .changeset/wild-ravens-laugh.md | 5 ++++ plugins/org/report.api.md | 2 ++ .../Cards/OwnershipCard/ComponentsGrid.tsx | 2 +- .../Cards/OwnershipCard/OwnershipCard.tsx | 28 +++++++++++++------ .../Cards/OwnershipCard/useGetEntities.ts | 2 +- 5 files changed, 29 insertions(+), 10 deletions(-) create mode 100644 .changeset/wild-ravens-laugh.md 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: | { From 737d4a73f838d8ef9f830769d163eefd1b03b96e Mon Sep 17 00:00:00 2001 From: Benjamin Janssens Date: Thu, 14 Aug 2025 13:40:45 +0200 Subject: [PATCH 2/4] chore(plugin-org): restore original default behaviour of OwnershipCard Signed-off-by: Benjamin Janssens --- .../src/components/Cards/OwnershipCard/ComponentsGrid.tsx | 2 +- .../src/components/Cards/OwnershipCard/OwnershipCard.tsx | 7 +++---- .../src/components/Cards/OwnershipCard/useGetEntities.ts | 2 +- 3 files changed, 5 insertions(+), 6 deletions(-) diff --git a/plugins/org/src/components/Cards/OwnershipCard/ComponentsGrid.tsx b/plugins/org/src/components/Cards/OwnershipCard/ComponentsGrid.tsx index 5ba91ab601..0c177f31a8 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, + entityLimit = 6, }: { 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 eac411a805..b449896b72 100644 --- a/plugins/org/src/components/Cards/OwnershipCard/OwnershipCard.tsx +++ b/plugins/org/src/components/Cards/OwnershipCard/OwnershipCard.tsx @@ -100,14 +100,13 @@ export const OwnershipCard = (props: { variant, entityFilterKind, hideRelationsToggle, - entityLimit, - scrollHeight: propScrollHeight = '292px', + entityLimit = 6, + scrollHeight: propScrollHeight, } = props; const relationAggregation = props.relationAggregation ?? props.relationsType; const relationsToggle = hideRelationsToggle === undefined ? false : hideRelationsToggle; - const scrollHeight = - entityLimit || variant === 'fullHeight' ? 'none' : propScrollHeight; + const scrollHeight = variant !== 'fullHeight' ? propScrollHeight : undefined; const classes = useStyles(); const { entity } = useEntity(); const { t } = useTranslationRef(orgTranslationRef); diff --git a/plugins/org/src/components/Cards/OwnershipCard/useGetEntities.ts b/plugins/org/src/components/Cards/OwnershipCard/useGetEntities.ts index 98e319a4c3..a5a5363192 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?: number, + entityLimit = 6, ): { componentsWithCounters: | { From c8b7ce9112f051a64f8cf6d729204d8d2530d493 Mon Sep 17 00:00:00 2001 From: Benjamin Janssens Date: Thu, 14 Aug 2025 13:41:59 +0200 Subject: [PATCH 3/4] chore(plugin-org): rename scrollHeight property to maxScrollHeight Signed-off-by: Benjamin Janssens --- .../src/components/Cards/OwnershipCard/OwnershipCard.tsx | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/plugins/org/src/components/Cards/OwnershipCard/OwnershipCard.tsx b/plugins/org/src/components/Cards/OwnershipCard/OwnershipCard.tsx index b449896b72..1df55c62c2 100644 --- a/plugins/org/src/components/Cards/OwnershipCard/OwnershipCard.tsx +++ b/plugins/org/src/components/Cards/OwnershipCard/OwnershipCard.tsx @@ -94,19 +94,20 @@ export const OwnershipCard = (props: { relationsType?: EntityRelationAggregation; relationAggregation?: EntityRelationAggregation; entityLimit?: number; - scrollHeight?: string; + maxScrollHeight?: string; }) => { const { variant, entityFilterKind, hideRelationsToggle, entityLimit = 6, - scrollHeight: propScrollHeight, + maxScrollHeight: propMaxScrollHeight, } = props; const relationAggregation = props.relationAggregation ?? props.relationsType; const relationsToggle = hideRelationsToggle === undefined ? false : hideRelationsToggle; - const scrollHeight = variant !== 'fullHeight' ? propScrollHeight : undefined; + const maxScrollHeight = + variant !== 'fullHeight' ? propMaxScrollHeight : undefined; const classes = useStyles(); const { entity } = useEntity(); const { t } = useTranslationRef(orgTranslationRef); @@ -174,7 +175,7 @@ export const OwnershipCard = (props: { )} - + Date: Tue, 19 Aug 2025 10:25:36 +0200 Subject: [PATCH 4/4] chore(plugin-org): update api reports Signed-off-by: Benjamin Janssens --- plugins/org/report.api.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/plugins/org/report.api.md b/plugins/org/report.api.md index a52e4160d3..13143d0e4c 100644 --- a/plugins/org/report.api.md +++ b/plugins/org/report.api.md @@ -40,7 +40,7 @@ export const EntityOwnershipCard: (props: { relationsType?: EntityRelationAggregation; relationAggregation?: EntityRelationAggregation; entityLimit?: number; - scrollHeight?: string; + maxScrollHeight?: string; }) => JSX_2.Element; // @public (undocumented) @@ -102,7 +102,7 @@ export const OwnershipCard: (props: { relationsType?: EntityRelationAggregation; relationAggregation?: EntityRelationAggregation; entityLimit?: number; - scrollHeight?: string; + maxScrollHeight?: string; }) => JSX_2.Element; // @public (undocumented)