From c4832a18d1d22a745ea71e415ae54bf3fb6125e3 Mon Sep 17 00:00:00 2001 From: Johan Persson Date: Mon, 2 Mar 2026 16:12:18 +0100 Subject: [PATCH] refactor: Remove obsolete variant prop from Entity card components. Signed-off-by: Johan Persson --- .../src/components/catalog/EntityPage.tsx | 12 ++++----- .../src/collectLegacyRoutes.test.tsx | 2 +- plugins/catalog/report-alpha.api.md | 8 +++--- plugins/catalog/report.api.md | 11 +------- .../src/components/AboutCard/AboutCard.tsx | 26 +++++-------------- .../catalog/src/components/AboutCard/index.ts | 1 - .../EntityLabelsCard/EntityLabelsCard.tsx | 6 +---- .../EntityLinksCard/EntityLinksCard.tsx | 6 +---- plugins/catalog/src/index.ts | 1 - plugins/catalog/src/plugin.ts | 18 ++++++------- plugins/org/report.api.md | 4 --- .../Group/GroupProfile/GroupProfileCard.tsx | 12 +++------ .../UserProfileCard.stories.tsx | 6 ++--- .../UserProfileCard/UserProfileCard.test.tsx | 18 ++++++------- .../User/UserProfileCard/UserProfileCard.tsx | 3 +-- 15 files changed, 45 insertions(+), 89 deletions(-) diff --git a/packages/app-legacy/src/components/catalog/EntityPage.tsx b/packages/app-legacy/src/components/catalog/EntityPage.tsx index 08d4d921b5..32249cb84a 100644 --- a/packages/app-legacy/src/components/catalog/EntityPage.tsx +++ b/packages/app-legacy/src/components/catalog/EntityPage.tsx @@ -166,7 +166,7 @@ const overviewContent = ( {entityWarningContent} - + @@ -330,7 +330,7 @@ const userPage = ( {entityWarningContent} - + {entityWarningContent} - + {entityWarningContent} - + @@ -418,7 +418,7 @@ const domainPage = ( {entityWarningContent} - + @@ -437,7 +437,7 @@ const resourcePage = ( {entityWarningContent} - + diff --git a/packages/core-compat-api/src/collectLegacyRoutes.test.tsx b/packages/core-compat-api/src/collectLegacyRoutes.test.tsx index c5138dac3d..f9e8793613 100644 --- a/packages/core-compat-api/src/collectLegacyRoutes.test.tsx +++ b/packages/core-compat-api/src/collectLegacyRoutes.test.tsx @@ -156,7 +156,7 @@ describe('collectLegacyRoutes', () => { if={isKind('component')} children={ - + } /> diff --git a/plugins/catalog/report-alpha.api.md b/plugins/catalog/report-alpha.api.md index 82b6837cc7..0b8376c8f6 100644 --- a/plugins/catalog/report-alpha.api.md +++ b/plugins/catalog/report-alpha.api.md @@ -74,8 +74,8 @@ export const catalogTranslationRef: TranslationRef< readonly 'aboutCard.targetsField.label': 'Targets'; readonly 'searchResultItem.type': 'Type'; readonly 'searchResultItem.kind': 'Kind'; - readonly 'searchResultItem.owner': 'Owner'; readonly 'searchResultItem.lifecycle': 'Lifecycle'; + readonly 'searchResultItem.owner': 'Owner'; readonly 'catalogTable.allFilters': 'All'; readonly 'catalogTable.warningPanelTitle': 'Could not fetch catalog entities.'; readonly 'catalogTable.viewActionTitle': 'View'; @@ -95,14 +95,14 @@ export const catalogTranslationRef: TranslationRef< readonly 'entityContextMenu.unregisterMenuTitle': 'Unregister entity'; readonly 'entityContextMenu.moreButtonAriaLabel': 'more'; readonly 'entityLabelsCard.title': 'Labels'; - readonly 'entityLabelsCard.readMoreButtonTitle': 'Read more'; readonly 'entityLabelsCard.emptyDescription': 'No labels defined for this entity. You can add labels to your entity YAML as shown in the highlighted example below:'; - readonly 'entityLabels.ownerLabel': 'Owner'; + readonly 'entityLabelsCard.readMoreButtonTitle': 'Read more'; readonly 'entityLabels.warningPanelTitle': 'Entity not found'; + readonly 'entityLabels.ownerLabel': 'Owner'; readonly 'entityLabels.lifecycleLabel': 'Lifecycle'; readonly 'entityLinksCard.title': 'Links'; - readonly 'entityLinksCard.readMoreButtonTitle': 'Read more'; readonly 'entityLinksCard.emptyDescription': 'No links defined for this entity. You can add links to your entity YAML as shown in the highlighted example below:'; + readonly 'entityLinksCard.readMoreButtonTitle': 'Read more'; readonly 'entityNotFound.title': 'Entity was not found'; readonly 'entityNotFound.description': 'Want to help us build this? Check out our Getting Started documentation.'; readonly 'entityNotFound.docButtonTitle': 'DOCS'; diff --git a/plugins/catalog/report.api.md b/plugins/catalog/report.api.md index 4539364917..411d60076e 100644 --- a/plugins/catalog/report.api.md +++ b/plugins/catalog/report.api.md @@ -41,11 +41,6 @@ import { TableProps } from '@backstage/core-components'; import { TabProps } from '@material-ui/core/Tab'; import { UserListFilterKind } from '@backstage/plugin-catalog-react'; -// @public -export type AboutCardProps = { - variant?: string; -}; - // @public (undocumented) export function AboutContent(props: AboutContentProps): JSX_2.Element; @@ -337,7 +332,7 @@ export interface DependsOnResourcesCardProps { } // @public -export const EntityAboutCard: (props: AboutCardProps) => JSX.Element; +export const EntityAboutCard: () => JSX.Element; // @public (undocumented) export type EntityContextMenuClassKey = 'button'; @@ -387,8 +382,6 @@ export const EntityLabelsCard: (props: EntityLabelsCardProps) => JSX_2.Element; export interface EntityLabelsCardProps { // (undocumented) title?: string; - // (undocumented) - variant?: string; } // @public (undocumented) @@ -438,8 +431,6 @@ export const EntityLinksCard: (props: EntityLinksCardProps) => JSX_2.Element; export interface EntityLinksCardProps { // (undocumented) cols?: ColumnBreakpoints | number; - // (undocumented) - variant?: string; } // @public (undocumented) diff --git a/plugins/catalog/src/components/AboutCard/AboutCard.tsx b/plugins/catalog/src/components/AboutCard/AboutCard.tsx index 3c2dcb1b34..e516432dad 100644 --- a/plugins/catalog/src/components/AboutCard/AboutCard.tsx +++ b/plugins/catalog/src/components/AboutCard/AboutCard.tsx @@ -147,25 +147,13 @@ function DefaultAboutCardSubheader() { return ; } -/** - * Props for {@link EntityAboutCard}. - * - * @public - */ -export type AboutCardProps = { - // Accepted for API compatibility but not applied. - // The new entity page layout handles card sizing. - // TODO: Discuss removal in code review. - variant?: string; -}; - -export interface InternalAboutCardProps extends AboutCardProps { +export interface InternalAboutCardProps { /** Icon link row rendered at the top of the card body. */ iconLinks?: JSX.Element; } export function InternalAboutCard(props: InternalAboutCardProps) { - const { variant: _variant, iconLinks } = props; + const { iconLinks } = props; const { entity } = useEntity(); const catalogApi = useApi(catalogApiRef); const alertApi = useApi(alertApiRef); @@ -244,10 +232,10 @@ export function InternalAboutCard(props: InternalAboutCardProps) { /** * Exported publicly via the EntityAboutCard * - * NOTE: We generally do not accept pull requests to extend this class with more - * props and customizability. If you need to tweak it, consider making a bespoke - * card in your own repository instead, that is perfect for your own needs. + * NOTE: We generally do not accept pull requests to extend this class with props + * and customizability. If you need to tweak it, consider making a bespoke card + * in your own repository instead, that is perfect for your own needs. */ -export function AboutCard(props: AboutCardProps) { - return ; +export function AboutCard() { + return ; } diff --git a/plugins/catalog/src/components/AboutCard/index.ts b/plugins/catalog/src/components/AboutCard/index.ts index 9660a5e2e2..f6a11dfbb7 100644 --- a/plugins/catalog/src/components/AboutCard/index.ts +++ b/plugins/catalog/src/components/AboutCard/index.ts @@ -15,7 +15,6 @@ */ export { AboutCard } from './AboutCard'; -export type { AboutCardProps } from './AboutCard'; export { AboutContent } from './AboutContent'; export type { AboutContentProps } from './AboutContent'; export { AboutField } from './AboutField'; diff --git a/plugins/catalog/src/components/EntityLabelsCard/EntityLabelsCard.tsx b/plugins/catalog/src/components/EntityLabelsCard/EntityLabelsCard.tsx index 8c096932f8..403ecefd1f 100644 --- a/plugins/catalog/src/components/EntityLabelsCard/EntityLabelsCard.tsx +++ b/plugins/catalog/src/components/EntityLabelsCard/EntityLabelsCard.tsx @@ -27,10 +27,6 @@ import { useTranslationRef } from '@backstage/core-plugin-api/alpha'; /** @public */ export interface EntityLabelsCardProps { - // Accepted for API compatibility but not applied. - // The new entity page layout handles card sizing. - // TODO: Discuss removal in code review. - variant?: string; title?: string; } @@ -55,7 +51,7 @@ const columnConfig: ColumnConfig[] = [ ]; export const EntityLabelsCard = (props: EntityLabelsCardProps) => { - const { variant: _variant, title } = props; + const { title } = props; const { entity } = useEntity(); const { t } = useTranslationRef(catalogTranslationRef); diff --git a/plugins/catalog/src/components/EntityLinksCard/EntityLinksCard.tsx b/plugins/catalog/src/components/EntityLinksCard/EntityLinksCard.tsx index 60b5811ce9..e090effb55 100644 --- a/plugins/catalog/src/components/EntityLinksCard/EntityLinksCard.tsx +++ b/plugins/catalog/src/components/EntityLinksCard/EntityLinksCard.tsx @@ -26,14 +26,10 @@ import { catalogTranslationRef } from '../../alpha/translation'; /** @public */ export interface EntityLinksCardProps { cols?: ColumnBreakpoints | number; - // Accepted for API compatibility but not applied. - // The new entity page layout handles card sizing. - // TODO: Discuss removal in code review. - variant?: string; } export const EntityLinksCard = (props: EntityLinksCardProps) => { - const { cols = undefined, variant: _variant } = props; + const { cols = undefined } = props; const { entity } = useEntity(); const app = useApp(); const { t } = useTranslationRef(catalogTranslationRef); diff --git a/plugins/catalog/src/index.ts b/plugins/catalog/src/index.ts index f3cc7d3d0b..a59283c677 100644 --- a/plugins/catalog/src/index.ts +++ b/plugins/catalog/src/index.ts @@ -23,7 +23,6 @@ export * from './apis'; export type { - AboutCardProps, AboutContentProps, AboutFieldProps, } from './components/AboutCard'; diff --git a/plugins/catalog/src/plugin.ts b/plugins/catalog/src/plugin.ts index 50d858a45f..6fe531418b 100644 --- a/plugins/catalog/src/plugin.ts +++ b/plugins/catalog/src/plugin.ts @@ -43,7 +43,6 @@ import { SearchResultListItemExtensionProps, } from '@backstage/plugin-search-react'; import { DefaultStarredEntitiesApi } from './apis'; -import { AboutCardProps } from './components/AboutCard'; import { DefaultCatalogPageProps } from './components/CatalogPage'; import { DependencyOfComponentsCardProps } from './components/DependencyOfComponentsCard'; import { DependsOnComponentsCardProps } from './components/DependsOnComponentsCard'; @@ -128,15 +127,14 @@ export const CatalogEntityPage: () => JSX.Element = catalogPlugin.provide( * not extremely customizable; feel free to make a copy of it as a starting * point if you like. */ -export const EntityAboutCard: (props: AboutCardProps) => JSX.Element = - catalogPlugin.provide( - createComponentExtension({ - name: 'EntityAboutCard', - component: { - lazy: () => import('./components/AboutCard').then(m => m.AboutCard), - }, - }), - ); +export const EntityAboutCard: () => JSX.Element = catalogPlugin.provide( + createComponentExtension({ + name: 'EntityAboutCard', + component: { + lazy: () => import('./components/AboutCard').then(m => m.AboutCard), + }, + }), +); /** @public */ export const EntityLinksCard = catalogPlugin.provide( diff --git a/plugins/org/report.api.md b/plugins/org/report.api.md index 776affbb9f..0d6b15b308 100644 --- a/plugins/org/report.api.md +++ b/plugins/org/report.api.md @@ -18,7 +18,6 @@ export type ComponentsGridClassKey = // @public (undocumented) export const EntityGroupProfileCard: (props: { - variant?: string; showLinks?: boolean; }) => JSX_2.Element; @@ -48,7 +47,6 @@ export type EntityRelationAggregation = 'direct' | 'aggregated'; // @public (undocumented) export const EntityUserProfileCard: (props: { - variant?: string; showLinks?: boolean; maxRelations?: number; hideIcons?: boolean; @@ -56,7 +54,6 @@ export const EntityUserProfileCard: (props: { // @public (undocumented) export const GroupProfileCard: (props: { - variant?: string; showLinks?: boolean; }) => JSX_2.Element; @@ -116,7 +113,6 @@ export type OwnershipCardClassKey = // @public (undocumented) export const UserProfileCard: (props: { - variant?: string; showLinks?: boolean; maxRelations?: number; hideIcons?: boolean; diff --git a/plugins/org/src/components/Cards/Group/GroupProfile/GroupProfileCard.tsx b/plugins/org/src/components/Cards/Group/GroupProfile/GroupProfileCard.tsx index 0bd1100633..5810a0447d 100644 --- a/plugins/org/src/components/Cards/Group/GroupProfile/GroupProfileCard.tsx +++ b/plugins/org/src/components/Cards/Group/GroupProfile/GroupProfileCard.tsx @@ -80,14 +80,8 @@ const CardTitle = (props: { title: string; pictureSrc?: string }) => ( ); /** @public */ -export const GroupProfileCard = (props: { - // Accepted for API compatibility but not applied. - // The new entity page layout handles card sizing. - // TODO: Discuss removal in code review. - variant?: string; - showLinks?: boolean; -}) => { - const { variant: _variant } = props; +export const GroupProfileCard = (props: { showLinks?: boolean }) => { + const { showLinks } = props; const catalogApi = useApi(catalogApiRef); const alertApi = useApi(alertApiRef); const { entity: group } = useEntity(); @@ -237,7 +231,7 @@ export const GroupProfileCard = (props: { secondary={t('groupProfileCard.listItemTitle.childGroups')} /> - {props?.showLinks && } + {showLinks && } diff --git a/plugins/org/src/components/Cards/User/UserProfileCard/UserProfileCard.stories.tsx b/plugins/org/src/components/Cards/User/UserProfileCard/UserProfileCard.stories.tsx index 0463cc78ad..aa1bf978e6 100644 --- a/plugins/org/src/components/Cards/User/UserProfileCard/UserProfileCard.stories.tsx +++ b/plugins/org/src/components/Cards/User/UserProfileCard/UserProfileCard.stories.tsx @@ -55,7 +55,7 @@ export const Default = () => ( - + @@ -82,7 +82,7 @@ export const NoImage = () => ( - + @@ -134,7 +134,7 @@ export const ExtraDetails = () => ( - + diff --git a/plugins/org/src/components/Cards/User/UserProfileCard/UserProfileCard.test.tsx b/plugins/org/src/components/Cards/User/UserProfileCard/UserProfileCard.test.tsx index bd446c8c6e..45936c564f 100644 --- a/plugins/org/src/components/Cards/User/UserProfileCard/UserProfileCard.test.tsx +++ b/plugins/org/src/components/Cards/User/UserProfileCard/UserProfileCard.test.tsx @@ -51,7 +51,7 @@ describe('UserSummary Test', () => { it('Display Profile Card', async () => { await renderInTestApp( - + , { mountedRoutes: { @@ -87,7 +87,7 @@ describe('UserSummary Test', () => { it('Should limit the number of displayed groups in the card', async () => { await renderInTestApp( - + , { mountedRoutes: { @@ -109,7 +109,7 @@ describe('UserSummary Test', () => { it('Show more groups button when there are more user relations than the maximum', async () => { await renderInTestApp( - + , { mountedRoutes: { @@ -128,7 +128,7 @@ describe('UserSummary Test', () => { it('Hide more groups button when limit value is less than or equal to user relations', async () => { await renderInTestApp( - + , { mountedRoutes: { @@ -148,7 +148,7 @@ describe('UserSummary Test', () => { it('Hide all groups when max relations is equals to zero', async () => { await renderInTestApp( - + , { mountedRoutes: { @@ -193,7 +193,7 @@ describe('Edit Button', () => { await renderInTestApp( - + , { mountedRoutes: { @@ -234,7 +234,7 @@ describe('Edit Button', () => { await renderInTestApp( - + , { mountedRoutes: { @@ -285,7 +285,7 @@ describe('Edit Button', () => { await renderInTestApp( - + , { mountedRoutes: { @@ -337,7 +337,7 @@ describe('Edit Button', () => { await renderInTestApp( - + , { mountedRoutes: { diff --git a/plugins/org/src/components/Cards/User/UserProfileCard/UserProfileCard.tsx b/plugins/org/src/components/Cards/User/UserProfileCard/UserProfileCard.tsx index 12a996cb4b..d35682101e 100644 --- a/plugins/org/src/components/Cards/User/UserProfileCard/UserProfileCard.tsx +++ b/plugins/org/src/components/Cards/User/UserProfileCard/UserProfileCard.tsx @@ -96,12 +96,11 @@ export const UserProfileCard = (props: { // Accepted for API compatibility but not applied. // The new entity page layout handles card sizing. // TODO: Discuss removal in code review. - variant?: string; showLinks?: boolean; maxRelations?: number; hideIcons?: boolean; }) => { - const { maxRelations, hideIcons, variant: _variant } = props; + const { maxRelations, hideIcons } = props; const classes = useStyles(); const { entity: user } = useEntity();