refactor: Remove obsolete variant prop from Entity card components.

Signed-off-by: Johan Persson <johanopersson@gmail.com>

packages/app-legacy/src/components/catalog/EntityPage.tsx

@@ -166,7 +166,7 @@ const overviewContent = (
   <Grid container spacing={3} alignItems="stretch">
     {entityWarningContent}
     <Grid item md={6} xs={12}>
-      <EntityAboutCard variant="gridItem" />
+      <EntityAboutCard />
     </Grid>
 
     <Grid item md={6} xs={12}>
@@ -330,7 +330,7 @@ const userPage = (
       <Grid container spacing={3}>
         {entityWarningContent}
         <Grid item xs={12} md={6}>
-          <EntityUserProfileCard variant="gridItem" />
+          <EntityUserProfileCard />
         </Grid>
         <Grid item xs={12} md={6}>
           <EntityOwnershipCard
@@ -349,7 +349,7 @@ const groupPage = (
       <Grid container spacing={3}>
         {entityWarningContent}
         <Grid item xs={12} md={6}>
-          <EntityGroupProfileCard variant="gridItem" />
+          <EntityGroupProfileCard />
         </Grid>
         <Grid item xs={12} md={6}>
           <EntityOwnershipCard
@@ -374,7 +374,7 @@ const systemPage = (
       <Grid container spacing={3} alignItems="stretch">
         {entityWarningContent}
         <Grid item md={6}>
-          <EntityAboutCard variant="gridItem" />
+          <EntityAboutCard />
         </Grid>
         <Grid item md={6} xs={12}>
           <EntityCatalogGraphCard variant="gridItem" height={400} />
@@ -418,7 +418,7 @@ const domainPage = (
       <Grid container spacing={3} alignItems="stretch">
         {entityWarningContent}
         <Grid item md={6}>
-          <EntityAboutCard variant="gridItem" />
+          <EntityAboutCard />
         </Grid>
         <Grid item md={6} xs={12}>
           <EntityCatalogGraphCard variant="gridItem" height={400} />
@@ -437,7 +437,7 @@ const resourcePage = (
       <Grid container spacing={3} alignItems="stretch">
         {entityWarningContent}
         <Grid item md={6}>
-          <EntityAboutCard variant="gridItem" />
+          <EntityAboutCard />
         </Grid>
         <Grid item md={6} xs={12}>
           <EntityCatalogGraphCard variant="gridItem" height={400} />

packages/core-compat-api/src/collectLegacyRoutes.test.tsx

@@ -156,7 +156,7 @@ describe('collectLegacyRoutes', () => {
               if={isKind('component')}
               children={
                 <EntityLayout>
-                  <EntityAboutCard variant="gridItem" />
+                  <EntityAboutCard />
                 </EntityLayout>
               }
             />

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';

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)

plugins/catalog/src/components/AboutCard/AboutCard.tsx

@@ -147,25 +147,13 @@ function DefaultAboutCardSubheader() {
   return <HeaderIconLinkRow links={links} />;
 }
 
-/**
- * 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 <InternalAboutCard {...props} />;
+export function AboutCard() {
+  return <InternalAboutCard />;
 }

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';

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<LabelItem>[] = [
 ];
 
 export const EntityLabelsCard = (props: EntityLabelsCardProps) => {
-  const { variant: _variant, title } = props;
+  const { title } = props;
   const { entity } = useEntity();
   const { t } = useTranslationRef(catalogTranslationRef);
 

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);

plugins/catalog/src/index.ts

@@ -23,7 +23,6 @@
 export * from './apis';
 
 export type {
-  AboutCardProps,
   AboutContentProps,
   AboutFieldProps,
 } from './components/AboutCard';

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(

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;

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<GroupEntity>();
@@ -237,7 +231,7 @@ export const GroupProfileCard = (props: {
               secondary={t('groupProfileCard.listItemTitle.childGroups')}
             />
           </ListItem>
-          {props?.showLinks && <LinksGroup links={links} />}
+          {showLinks && <LinksGroup links={links} />}
         </List>
       </Box>
     </EntityInfoCard>

plugins/org/src/components/Cards/User/UserProfileCard/UserProfileCard.stories.tsx

@@ -55,7 +55,7 @@ export const Default = () => (
   <EntityProvider entity={defaultEntity}>
     <Grid container spacing={4}>
       <Grid item xs={12} md={4}>
-        <UserProfileCard variant="gridItem" />
+        <UserProfileCard />
       </Grid>
     </Grid>
   </EntityProvider>
@@ -82,7 +82,7 @@ export const NoImage = () => (
   <EntityProvider entity={noImageEntity}>
     <Grid container spacing={4}>
       <Grid item xs={12} md={4}>
-        <UserProfileCard variant="gridItem" />
+        <UserProfileCard />
       </Grid>
     </Grid>
   </EntityProvider>
@@ -134,7 +134,7 @@ export const ExtraDetails = () => (
   <EntityProvider entity={extraDetailsEntity}>
     <Grid container spacing={4}>
       <Grid item xs={12} md={4}>
-        <UserProfileCard variant="gridItem" />
+        <UserProfileCard />
       </Grid>
     </Grid>
   </EntityProvider>

plugins/org/src/components/Cards/User/UserProfileCard/UserProfileCard.test.tsx

@@ -51,7 +51,7 @@ describe('UserSummary Test', () => {
   it('Display Profile Card', async () => {
     await renderInTestApp(
       <EntityProvider entity={userEntity}>
-        <UserProfileCard variant="gridItem" />
+        <UserProfileCard />
       </EntityProvider>,
       {
         mountedRoutes: {
@@ -87,7 +87,7 @@ describe('UserSummary Test', () => {
     it('Should limit the number of displayed groups in the card', async () => {
       await renderInTestApp(
         <EntityProvider entity={entity}>
-          <UserProfileCard variant="gridItem" maxRelations={3} />
+          <UserProfileCard maxRelations={3} />
         </EntityProvider>,
         {
           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(
         <EntityProvider entity={entity}>
-          <UserProfileCard variant="gridItem" maxRelations={3} />
+          <UserProfileCard maxRelations={3} />
         </EntityProvider>,
         {
           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(
         <EntityProvider entity={entity}>
-          <UserProfileCard variant="gridItem" maxRelations={5} />
+          <UserProfileCard maxRelations={5} />
         </EntityProvider>,
         {
           mountedRoutes: {
@@ -148,7 +148,7 @@ describe('UserSummary Test', () => {
     it('Hide all groups when max relations is equals to zero', async () => {
       await renderInTestApp(
         <EntityProvider entity={entity}>
-          <UserProfileCard variant="gridItem" maxRelations={0} />
+          <UserProfileCard maxRelations={0} />
         </EntityProvider>,
         {
           mountedRoutes: {
@@ -193,7 +193,7 @@ describe('Edit Button', () => {
 
     await renderInTestApp(
       <EntityProvider entity={userEntity}>
-        <UserProfileCard variant="gridItem" />
+        <UserProfileCard />
       </EntityProvider>,
       {
         mountedRoutes: {
@@ -234,7 +234,7 @@ describe('Edit Button', () => {
 
     await renderInTestApp(
       <EntityProvider entity={userEntity}>
-        <UserProfileCard variant="gridItem" />
+        <UserProfileCard />
       </EntityProvider>,
       {
         mountedRoutes: {
@@ -285,7 +285,7 @@ describe('Edit Button', () => {
 
     await renderInTestApp(
       <EntityProvider entity={userEntity}>
-        <UserProfileCard variant="gridItem" />
+        <UserProfileCard />
       </EntityProvider>,
       {
         mountedRoutes: {
@@ -337,7 +337,7 @@ describe('Edit Button', () => {
 
     await renderInTestApp(
       <EntityProvider entity={userEntity}>
-        <UserProfileCard showLinks variant="gridItem" />
+        <UserProfileCard showLinks />
       </EntityProvider>,
       {
         mountedRoutes: {

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<UserEntity>();