paulononato/backstage
1
0
Fork 0
Code Issues Pull Requests Actions 30 Packages Projects Releases Wiki Activity

Merge pull request #29145 from backstage/rugvip/cards

Browse Source 
catalog-react: rename card types peek -> summary, full -> content
This commit is contained in:
Patrik Oldsberg
2025-03-11 10:20:00 +01:00
committed by GitHub
parent 846a639b94 396e175fce
commit 6bc81c78e7
9 changed files with 79 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files
plugins/api-docs/report-alpha.api.md
+12 -12
View File
@@ -48,11 +48,11 @@ const _default: FrontendPlugin<
name: 'consumed-apis';
config: {
filter: EntityPredicate | undefined;
type: 'full' | 'info' | 'peek' | undefined;
type: 'content' | 'summary' | 'info' | undefined;
};
configInput: {
filter?: EntityPredicate | undefined;
type?: 'full' | 'info' | 'peek' | undefined;
type?: 'content' | 'summary' | 'info' | undefined;
};
output:
| ConfigurableExtensionDataRef<
@@ -93,11 +93,11 @@ const _default: FrontendPlugin<
name: 'consuming-components';
config: {
filter: EntityPredicate | undefined;
type: 'full' | 'info' | 'peek' | undefined;
type: 'content' | 'summary' | 'info' | undefined;
};
configInput: {
filter?: EntityPredicate | undefined;
type?: 'full' | 'info' | 'peek' | undefined;
type?: 'content' | 'summary' | 'info' | undefined;
};
output:
| ConfigurableExtensionDataRef<
@@ -138,11 +138,11 @@ const _default: FrontendPlugin<
name: 'definition';
config: {
filter: EntityPredicate | undefined;
type: 'full' | 'info' | 'peek' | undefined;
type: 'content' | 'summary' | 'info' | undefined;
};
configInput: {
filter?: EntityPredicate | undefined;
type?: 'full' | 'info' | 'peek' | undefined;
type?: 'content' | 'summary' | 'info' | undefined;
};
output:
| ConfigurableExtensionDataRef<
@@ -183,11 +183,11 @@ const _default: FrontendPlugin<
name: 'has-apis';
config: {
filter: EntityPredicate | undefined;
type: 'full' | 'info' | 'peek' | undefined;
type: 'content' | 'summary' | 'info' | undefined;
};
configInput: {
filter?: EntityPredicate | undefined;
type?: 'full' | 'info' | 'peek' | undefined;
type?: 'content' | 'summary' | 'info' | undefined;
};
output:
| ConfigurableExtensionDataRef<
@@ -228,11 +228,11 @@ const _default: FrontendPlugin<
name: 'provided-apis';
config: {
filter: EntityPredicate | undefined;
type: 'full' | 'info' | 'peek' | undefined;
type: 'content' | 'summary' | 'info' | undefined;
};
configInput: {
filter?: EntityPredicate | undefined;
type?: 'full' | 'info' | 'peek' | undefined;
type?: 'content' | 'summary' | 'info' | undefined;
};
output:
| ConfigurableExtensionDataRef<
@@ -273,11 +273,11 @@ const _default: FrontendPlugin<
name: 'providing-components';
config: {
filter: EntityPredicate | undefined;
type: 'full' | 'info' | 'peek' | undefined;
type: 'content' | 'summary' | 'info' | undefined;
};
configInput: {
filter?: EntityPredicate | undefined;
type?: 'full' | 'info' | 'peek' | undefined;
type?: 'content' | 'summary' | 'info' | undefined;
};
output:
| ConfigurableExtensionDataRef<
plugins/catalog-graph/report-alpha.api.md
+2 -2
View File
@@ -45,7 +45,7 @@ const _default: FrontendPlugin<
height: number | undefined;
} & {
filter: EntityPredicate | undefined;
type: 'full' | 'info' | 'peek' | undefined;
type: 'content' | 'summary' | 'info' | undefined;
};
configInput: {
height?: number | undefined;
@@ -61,7 +61,7 @@ const _default: FrontendPlugin<
relationPairs?: [string, string][] | undefined;
} & {
filter?: EntityPredicate | undefined;
type?: 'full' | 'info' | 'peek' | undefined;
type?: 'content' | 'summary' | 'info' | undefined;
};
output:
| ConfigurableExtensionDataRef<
plugins/catalog-react/CHANGELOG.md
+5 -5
View File
@@ -78,7 +78,7 @@
The layout components receive card elements and can render them as they see fit. Cards is an array of objects with the following properties:
- element: `JSx.Element`;
- type: `"peek" | "info" | "full" | undefined`;
- type: `"summary" | "info" | "content" | undefined`;
### Usage example
@@ -115,14 +115,14 @@
<Grid xs={12} md={8} item>
<Grid container spacing={3}>
{cards
.filter(card => card.type === 'peek')
.filter(card => card.type === 'summary')
.map((card, index) => (
<Grid key={index} className={classes.card} xs={12} md={6} item>
{card.element}
</Grid>
))}
{cards
.filter(card => !card.type || card.type === 'full')
.filter(card => !card.type || card.type === 'content')
.map((card, index) => (
<Grid key={index} className={classes.card} xs={12} md={6} item>
{card.element}
@@ -176,9 +176,9 @@
Initially the following three types are supported:
- `peek`: small vertical cards that provide information at a glance, for example recent builds, deployments, and service health.
- `summary`: small vertical cards that provide information at a glance, for example recent builds, deployments, and service health.
- `info`: medium size cards with high priority and frequently used information such as common actions, entity metadata, and links.
- `full`: Large cards that are more feature rich with more information, typically used by plugins that don't quite need the full content view and want to show a card instead.
- `content`: Large cards that are more feature rich with more information, typically used by plugins that don't quite need the content content view and want to show a card instead.
### Usage examples
plugins/catalog-react/report-alpha.api.md
+3 -3
View File
@@ -137,11 +137,11 @@ export const EntityCardBlueprint: ExtensionBlueprint<{
inputs: {};
config: {
filter: EntityPredicate | undefined;
type: 'full' | 'info' | 'peek' | undefined;
type: 'content' | 'summary' | 'info' | undefined;
};
configInput: {
filter?: EntityPredicate | undefined;
type?: 'full' | 'info' | 'peek' | undefined;
type?: 'content' | 'summary' | 'info' | undefined;
};
dataRefs: {
filterFunction: ConfigurableExtensionDataRef<
@@ -163,7 +163,7 @@ export const EntityCardBlueprint: ExtensionBlueprint<{
}>;
// @alpha (undocumented)
export type EntityCardType = 'peek' | 'info' | 'full';
export type EntityCardType = 'summary' | 'info' | 'content';
// @alpha
export const EntityContentBlueprint: ExtensionBlueprint<{
plugins/catalog-react/src/alpha/blueprints/EntityCardBlueprint.test.tsx
+2 -2
View File
@@ -175,9 +175,9 @@ describe('EntityCardBlueprint', () => {
},
"type": {
"enum": [
"peek",
"summary",
"info",
"full",
"content",
],
"type": "string",
},
plugins/catalog-react/src/alpha/blueprints/extensionData.tsx
+3 -3
View File
@@ -54,13 +54,13 @@ export const entityContentGroupDataRef = createExtensionDataRef<string>().with({
* Available entity card types
*/
export const entityCardTypes = [
'peek',
'summary',
'info',
'full',
'content',
] as const satisfies readonly EntityCardType[];
/** @alpha */
export type EntityCardType = 'peek' | 'info' | 'full';
export type EntityCardType = 'summary' | 'info' | 'content';
/** @internal */
export const entityCardTypeDataRef =
plugins/catalog/report-alpha.api.md
+20 -20
View File
@@ -354,11 +354,11 @@ const _default: FrontendPlugin<
name: 'about';
config: {
filter: EntityPredicate | undefined;
type: 'full' | 'info' | 'peek' | undefined;
type: 'content' | 'summary' | 'info' | undefined;
};
configInput: {
filter?: EntityPredicate | undefined;
type?: 'full' | 'info' | 'peek' | undefined;
type?: 'content' | 'summary' | 'info' | undefined;
};
output:
| ConfigurableExtensionDataRef<JSX_2.Element, 'core.reactElement', {}>
@@ -395,11 +395,11 @@ const _default: FrontendPlugin<
name: 'depends-on-components';
config: {
filter: EntityPredicate | undefined;
type: 'full' | 'info' | 'peek' | undefined;
type: 'content' | 'summary' | 'info' | undefined;
};
configInput: {
filter?: EntityPredicate | undefined;
type?: 'full' | 'info' | 'peek' | undefined;
type?: 'content' | 'summary' | 'info' | undefined;
};
output:
| ConfigurableExtensionDataRef<JSX_2.Element, 'core.reactElement', {}>
@@ -436,11 +436,11 @@ const _default: FrontendPlugin<
name: 'depends-on-resources';
config: {
filter: EntityPredicate | undefined;
type: 'full' | 'info' | 'peek' | undefined;
type: 'content' | 'summary' | 'info' | undefined;
};
configInput: {
filter?: EntityPredicate | undefined;
type?: 'full' | 'info' | 'peek' | undefined;
type?: 'content' | 'summary' | 'info' | undefined;
};
output:
| ConfigurableExtensionDataRef<JSX_2.Element, 'core.reactElement', {}>
@@ -477,11 +477,11 @@ const _default: FrontendPlugin<
name: 'has-components';
config: {
filter: EntityPredicate | undefined;
type: 'full' | 'info' | 'peek' | undefined;
type: 'content' | 'summary' | 'info' | undefined;
};
configInput: {
filter?: EntityPredicate | undefined;
type?: 'full' | 'info' | 'peek' | undefined;
type?: 'content' | 'summary' | 'info' | undefined;
};
output:
| ConfigurableExtensionDataRef<JSX_2.Element, 'core.reactElement', {}>
@@ -518,11 +518,11 @@ const _default: FrontendPlugin<
name: 'has-resources';
config: {
filter: EntityPredicate | undefined;
type: 'full' | 'info' | 'peek' | undefined;
type: 'content' | 'summary' | 'info' | undefined;
};
configInput: {
filter?: EntityPredicate | undefined;
type?: 'full' | 'info' | 'peek' | undefined;
type?: 'content' | 'summary' | 'info' | undefined;
};
output:
| ConfigurableExtensionDataRef<JSX_2.Element, 'core.reactElement', {}>
@@ -559,11 +559,11 @@ const _default: FrontendPlugin<
name: 'has-subcomponents';
config: {
filter: EntityPredicate | undefined;
type: 'full' | 'info' | 'peek' | undefined;
type: 'content' | 'summary' | 'info' | undefined;
};
configInput: {
filter?: EntityPredicate | undefined;
type?: 'full' | 'info' | 'peek' | undefined;
type?: 'content' | 'summary' | 'info' | undefined;
};
output:
| ConfigurableExtensionDataRef<JSX_2.Element, 'core.reactElement', {}>
@@ -600,11 +600,11 @@ const _default: FrontendPlugin<
name: 'has-subdomains';
config: {
filter: EntityPredicate | undefined;
type: 'full' | 'info' | 'peek' | undefined;
type: 'content' | 'summary' | 'info' | undefined;
};
configInput: {
filter?: EntityPredicate | undefined;
type?: 'full' | 'info' | 'peek' | undefined;
type?: 'content' | 'summary' | 'info' | undefined;
};
output:
| ConfigurableExtensionDataRef<JSX_2.Element, 'core.reactElement', {}>
@@ -641,11 +641,11 @@ const _default: FrontendPlugin<
name: 'has-systems';
config: {
filter: EntityPredicate | undefined;
type: 'full' | 'info' | 'peek' | undefined;
type: 'content' | 'summary' | 'info' | undefined;
};
configInput: {
filter?: EntityPredicate | undefined;
type?: 'full' | 'info' | 'peek' | undefined;
type?: 'content' | 'summary' | 'info' | undefined;
};
output:
| ConfigurableExtensionDataRef<JSX_2.Element, 'core.reactElement', {}>
@@ -682,11 +682,11 @@ const _default: FrontendPlugin<
name: 'labels';
config: {
filter: EntityPredicate | undefined;
type: 'full' | 'info' | 'peek' | undefined;
type: 'content' | 'summary' | 'info' | undefined;
};
configInput: {
filter?: EntityPredicate | undefined;
type?: 'full' | 'info' | 'peek' | undefined;
type?: 'content' | 'summary' | 'info' | undefined;
};
output:
| ConfigurableExtensionDataRef<JSX_2.Element, 'core.reactElement', {}>
@@ -723,11 +723,11 @@ const _default: FrontendPlugin<
name: 'links';
config: {
filter: EntityPredicate | undefined;
type: 'full' | 'info' | 'peek' | undefined;
type: 'content' | 'summary' | 'info' | undefined;
};
configInput: {
filter?: EntityPredicate | undefined;
type?: 'full' | 'info' | 'peek' | undefined;
type?: 'content' | 'summary' | 'info' | undefined;
};
output:
| ConfigurableExtensionDataRef<JSX_2.Element, 'core.reactElement', {}>
plugins/catalog/src/alpha/DefaultEntityContentLayout.tsx
+24 -22
View File
@@ -35,14 +35,14 @@ import { HorizontalScrollGrid } from '@backstage/core-components';
const useStyles = makeStyles<
Theme,
{ infoCards: boolean; peekCards: boolean; fullCards: boolean }
{ infoCards: boolean; summaryCards: boolean; contentCards: boolean }
>(theme => ({
root: {
display: 'flex',
flexFlow: 'column nowrap',
gap: theme.spacing(3),
},
fullArea: {
contentArea: {
display: 'flex',
flexFlow: 'column',
gap: theme.spacing(3),
@@ -56,10 +56,10 @@ const useStyles = makeStyles<
gap: theme.spacing(3),
minWidth: 0,
},
peekArea: {
summaryArea: {
margin: theme.spacing(1.5), // To counteract MUI negative grid margin
},
peekCard: {
summaryCard: {
flex: '0 0 auto',
'& + &': {
marginLeft: theme.spacing(3),
@@ -69,9 +69,9 @@ const useStyles = makeStyles<
root: {
display: 'grid',
gap: 0,
gridTemplateAreas: ({ peekCards }) => `
"${peekCards ? 'peek' : 'full'} info"
"full info"
gridTemplateAreas: ({ summaryCards }) => `
"${summaryCards ? 'summary' : 'content'} info"
"content info"
`,
gridTemplateColumns: ({ infoCards }) => (infoCards ? '2fr 1fr' : '1fr'),
alignItems: 'start',
@@ -82,11 +82,11 @@ const useStyles = makeStyles<
top: theme.spacing(3),
marginLeft: theme.spacing(3),
},
fullArea: {
gridArea: 'full',
contentArea: {
gridArea: 'content',
},
peekArea: {
gridArea: 'peek',
summaryArea: {
gridArea: 'summary',
marginBottom: theme.spacing(3),
},
},
@@ -124,13 +124,15 @@ export function DefaultEntityContentLayout(props: EntityContentLayoutProps) {
const { cards } = props;
const infoCards = cards.filter(card => card.type === 'info');
const peekCards = cards.filter(card => card.type === 'peek');
const fullCards = cards.filter(card => !card.type || card.type === 'full');
const summaryCards = cards.filter(card => card.type === 'summary');
const contentCards = cards.filter(
card => !card.type || card.type === 'content',
);
const classes = useStyles({
infoCards: !!infoCards.length,
peekCards: !!peekCards.length,
fullCards: !!fullCards.length,
summaryCards: !!summaryCards.length,
contentCards: !!contentCards.length,
});
return (
@@ -142,18 +144,18 @@ export function DefaultEntityContentLayout(props: EntityContentLayoutProps) {
{infoCards.map(card => card.element)}
</div>
) : null}
{peekCards.length > 0 ? (
<div className={classes.peekArea}>
{summaryCards.length > 0 ? (
<div className={classes.summaryArea}>
<HorizontalScrollGrid>
{peekCards.map(card => (
<div className={classes.peekCard}>{card.element}</div>
{summaryCards.map(card => (
<div className={classes.summaryCard}>{card.element}</div>
))}
</HorizontalScrollGrid>
</div>
) : null}
{fullCards.length > 0 ? (
<div className={classes.fullArea}>
{fullCards.map(card => card.element)}
{contentCards.length > 0 ? (
<div className={classes.contentArea}>
{contentCards.map(card => card.element)}
</div>
) : null}
</div>
plugins/org/report-alpha.api.md
+8 -8
View File
@@ -24,11 +24,11 @@ const _default: FrontendPlugin<
name: 'group-profile';
config: {
filter: EntityPredicate | undefined;
type: 'full' | 'info' | 'peek' | undefined;
type: 'content' | 'summary' | 'info' | undefined;
};
configInput: {
filter?: EntityPredicate | undefined;
type?: 'full' | 'info' | 'peek' | undefined;
type?: 'content' | 'summary' | 'info' | undefined;
};
output:
| ConfigurableExtensionDataRef<
@@ -69,11 +69,11 @@ const _default: FrontendPlugin<
name: 'members-list';
config: {
filter: EntityPredicate | undefined;
type: 'full' | 'info' | 'peek' | undefined;
type: 'content' | 'summary' | 'info' | undefined;
};
configInput: {
filter?: EntityPredicate | undefined;
type?: 'full' | 'info' | 'peek' | undefined;
type?: 'content' | 'summary' | 'info' | undefined;
};
output:
| ConfigurableExtensionDataRef<
@@ -114,11 +114,11 @@ const _default: FrontendPlugin<
name: 'ownership';
config: {
filter: EntityPredicate | undefined;
type: 'full' | 'info' | 'peek' | undefined;
type: 'content' | 'summary' | 'info' | undefined;
};
configInput: {
filter?: EntityPredicate | undefined;
type?: 'full' | 'info' | 'peek' | undefined;
type?: 'content' | 'summary' | 'info' | undefined;
};
output:
| ConfigurableExtensionDataRef<
@@ -159,11 +159,11 @@ const _default: FrontendPlugin<
name: 'user-profile';
config: {
filter: EntityPredicate | undefined;
type: 'full' | 'info' | 'peek' | undefined;
type: 'content' | 'summary' | 'info' | undefined;
};
configInput: {
filter?: EntityPredicate | undefined;
type?: 'full' | 'info' | 'peek' | undefined;
type?: 'content' | 'summary' | 'info' | undefined;
};
output:
| ConfigurableExtensionDataRef<