feat: exposed missing components in org plugin through

`overridableComponents`

Signed-off-by: eipc16 <pprzemek.312@gmail.com>

plugins/org/report.api.md

@@ -9,6 +9,13 @@ import { IconComponent } from '@backstage/core-plugin-api';
 import { InfoCardVariants } from '@backstage/core-components';
 import { JSX as JSX_2 } from 'react/jsx-runtime';
 
+// @public (undocumented)
+export type ComponentsGridClassKey =
+  | 'card'
+  | 'bold'
+  | 'smallFont'
+  | 'entityTypeBox';
+
 // @public (undocumented)
 export const EntityGroupProfileCard: (props: {
   variant?: InfoCardVariants;
@@ -96,6 +103,15 @@ export const OwnershipCard: (props: {
   entityLimit?: number;
 }) => JSX_2.Element;
 
+// @public (undocumented)
+export type OwnershipCardClassKey =
+  | 'card'
+  | 'cardContent'
+  | 'list'
+  | 'listItemText'
+  | 'listItemSecondaryAction'
+  | 'grid';
+
 // @public (undocumented)
 export const UserProfileCard: (props: {
   variant?: InfoCardVariants;
@@ -103,4 +119,10 @@ export const UserProfileCard: (props: {
   maxRelations?: number;
   hideIcons?: boolean;
 }) => JSX_2.Element;
+
+// @public (undocumented)
+export type UserProfileCardClassKey =
+  | 'closeButton'
+  | 'moreButton'
+  | 'dialogPaper';
 ```

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

@@ -31,32 +31,41 @@ import { catalogIndexRouteRef } from '../../../routes';
 import { useGetEntities } from './useGetEntities';
 import { EntityRelationAggregation } from '../types';
 
-const useStyles = makeStyles(theme =>
-  createStyles({
-    card: {
-      border: `1px solid ${theme.palette.divider}`,
-      boxShadow: theme.shadows[2],
-      borderRadius: '4px',
-      padding: theme.spacing(2),
-      transition: `${theme.transitions.duration.standard}ms`,
-      '&:hover': {
-        boxShadow: theme.shadows[4],
+/** @public */
+export type ComponentsGridClassKey =
+  | 'card'
+  | 'bold'
+  | 'smallFont'
+  | 'entityTypeBox';
+
+const useStyles = makeStyles(
+  theme =>
+    createStyles({
+      card: {
+        border: `1px solid ${theme.palette.divider}`,
+        boxShadow: theme.shadows[2],
+        borderRadius: '4px',
+        padding: theme.spacing(2),
+        transition: `${theme.transitions.duration.standard}ms`,
+        '&:hover': {
+          boxShadow: theme.shadows[4],
+        },
+        height: '100%',
       },
-      height: '100%',
-    },
-    bold: {
-      fontWeight: theme.typography.fontWeightBold,
-    },
-    smallFont: {
-      fontSize: theme.typography.body2.fontSize,
-    },
-    entityTypeBox: {
-      background: (props: { type: string }) =>
-        theme.getPageTheme({ themeId: props.type }).backgroundImage,
-      color: (props: { type: string }) =>
-        theme.getPageTheme({ themeId: props.type }).fontColor,
-    },
-  }),
+      bold: {
+        fontWeight: theme.typography.fontWeightBold,
+      },
+      smallFont: {
+        fontSize: theme.typography.body2.fontSize,
+      },
+      entityTypeBox: {
+        background: (props: { type: string }) =>
+          theme.getPageTheme({ themeId: props.type }).backgroundImage,
+        color: (props: { type: string }) =>
+          theme.getPageTheme({ themeId: props.type }).fontColor,
+      },
+    }),
+  { name: 'PluginOrgComponentsGrid' },
 );
 
 const EntityCountTile = ({

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

@@ -22,47 +22,62 @@ import ListItemSecondaryAction from '@material-ui/core/ListItemSecondaryAction';
 import ListItemText from '@material-ui/core/ListItemText';
 import Switch from '@material-ui/core/Switch';
 import Tooltip from '@material-ui/core/Tooltip';
-import { makeStyles } from '@material-ui/core/styles';
+import { createStyles, makeStyles } from '@material-ui/core/styles';
 import { useEffect, useState } from 'react';
 import { ComponentsGrid } from './ComponentsGrid';
 import { EntityRelationAggregation } from '../types';
 import { useTranslationRef } from '@backstage/frontend-plugin-api';
 import { orgTranslationRef } from '../../../translation';
 
-const useStyles = makeStyles(theme => ({
-  card: {
-    maxHeight: '100%',
+/** @public */
+export type OwnershipCardClassKey =
+  | 'card'
+  | 'cardContent'
+  | 'list'
+  | 'listItemText'
+  | 'listItemSecondaryAction'
+  | 'grid';
+
+const useStyles = makeStyles(
+  theme =>
+    createStyles({
+      card: {
+        maxHeight: '100%',
+      },
+      cardContent: {
+        display: 'flex',
+        flexDirection: 'column',
+        overflow: 'hidden',
+      },
+      list: {
+        [theme.breakpoints.down('xs')]: {
+          padding: `0 0 12px`,
+        },
+      },
+      listItemText: {
+        [theme.breakpoints.down('xs')]: {
+          paddingRight: 0,
+          paddingLeft: 0,
+        },
+      },
+      listItemSecondaryAction: {
+        [theme.breakpoints.down('xs')]: {
+          width: '100%',
+          top: 'auto',
+          right: 'auto',
+          position: 'relative',
+          transform: 'unset',
+        },
+      },
+      grid: {
+        overflowY: 'auto',
+        marginTop: 0,
+      },
+    }),
+  {
+    name: 'PluginOrgOwnershipCard',
   },
-  cardContent: {
-    display: 'flex',
-    flexDirection: 'column',
-    overflow: 'hidden',
-  },
-  list: {
-    [theme.breakpoints.down('xs')]: {
-      padding: `0 0 12px`,
-    },
-  },
-  listItemText: {
-    [theme.breakpoints.down('xs')]: {
-      paddingRight: 0,
-      paddingLeft: 0,
-    },
-  },
-  listItemSecondaryAction: {
-    [theme.breakpoints.down('xs')]: {
-      width: '100%',
-      top: 'auto',
-      right: 'auto',
-      position: 'relative',
-      transform: 'unset',
-    },
-  },
-  grid: {
-    overflowY: 'auto',
-    marginTop: 0,
-  },
-}));
+);
 
 /** @public */
 export const OwnershipCard = (props: {

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

@@ -14,3 +14,4 @@
  * limitations under the License.
  */
 export * from './OwnershipCard';
+export type { ComponentsGridClassKey } from './ComponentsGrid';

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

@@ -25,7 +25,7 @@ import {
   InfoCardVariants,
   Link,
 } from '@backstage/core-components';
-import { makeStyles } from '@material-ui/core/styles';
+import { createStyles, makeStyles } from '@material-ui/core/styles';
 import Box from '@material-ui/core/Box';
 import Grid from '@material-ui/core/Grid';
 import BaseButton from '@material-ui/core/ButtonBase';
@@ -58,21 +58,31 @@ import { useCallback, useState } from 'react';
 import { useTranslationRef } from '@backstage/frontend-plugin-api';
 import { orgTranslationRef } from '../../../../translation';
 
-const useStyles = makeStyles((theme: any) => ({
-  closeButton: {
-    position: 'absolute',
-    right: theme.spacing(1),
-    top: theme.spacing(1),
-    color: theme.palette.grey[500],
-  },
-  moreButton: {
-    display: 'contents',
-    color: theme.palette.primary.main,
-  },
-  dialogPaper: {
-    minHeight: 400,
-  },
-}));
+/** @public */
+export type UserProfileCardClassKey =
+  | 'closeButton'
+  | 'moreButton'
+  | 'dialogPaper';
+
+const useStyles = makeStyles(
+  theme =>
+    createStyles({
+      closeButton: {
+        position: 'absolute',
+        right: theme.spacing(1),
+        top: theme.spacing(1),
+        color: theme.palette.grey[500],
+      },
+      moreButton: {
+        display: 'contents',
+        color: theme.palette.primary.main,
+      },
+      dialogPaper: {
+        minHeight: 400,
+      },
+    }),
+  { name: 'PluginOrgUserProfileCard' },
+);
 
 const CardTitle = (props: { title?: string }) =>
   props.title ? (

plugins/org/src/overridableComponents.ts

@@ -16,12 +16,21 @@
 
 import { Overrides } from '@material-ui/core/styles/overrides';
 import { StyleRules } from '@material-ui/core/styles/withStyles';
-import { MemberComponentClassKey, MembersListCardClassKey } from './components';
+import {
+  ComponentsGridClassKey,
+  MemberComponentClassKey,
+  MembersListCardClassKey,
+  OwnershipCardClassKey,
+  UserProfileCardClassKey,
+} from './components';
 
 /** @public */
 export type CatalogReactComponentsNameToClassKey = {
   PluginOrgMemberComponent: MemberComponentClassKey;
   PluginOrgMembersListCardComponent: MembersListCardClassKey;
+  PluginOrgOwnershipCard: OwnershipCardClassKey;
+  PluginOrgComponentsGrid: ComponentsGridClassKey;
+  PluginOrgUserProfileCard: UserProfileCardClassKey;
 };
 
 /** @public */