Skip to content

[NFS]: Default Sticky Entity Page Layout#28950

Merged
camilaibs merged 3 commits intomasterfrom
camilaibs/entity-page-layout-followup
Mar 5, 2025
Merged

[NFS]: Default Sticky Entity Page Layout#28950
camilaibs merged 3 commits intomasterfrom
camilaibs/entity-page-layout-followup

Conversation

@camilaibs
Copy link
Copy Markdown
Contributor

@camilaibs camilaibs commented Feb 24, 2025

Hey, I just made a Pull Request!

Now the default entity page layout can be customized with cards of 3 types: info, peek and full.

  • Cards of type info will be rendered in a right sticky area;
  • Peek cards are rendered at the top of the main content area;
  • Full cards and cards with undefined type are rendered as they were before, in the main area, below the peek cards.

So if you want to keep the layout as it was before, you don't need to do anything. But if you want to experiment with the card types and see how they are rendered, here is an example configuring the about card to be rendered as a card of type info:

app:
  extensions:
    # Entity page cards
+   - entity-card:catalog/about:
+       config:
+         type: info

✔️ Checklist

  • A changeset describing the change and affected packages. (more info)
  • Added or updated documentation
  • Tests for new functionality and regression tests for bug fixes
  • Screenshots attached (for UI changes)
  • All your commits have a Signed-off-by line in the message. (more info)

@github-actions github-actions Bot added the area:catalog Related to the Catalog Project Area label Feb 24, 2025
@backstage-goalie
Copy link
Copy Markdown
Contributor

backstage-goalie Bot commented Feb 24, 2025

Important

This PR includes changes that affect public-facing API. Please ensure you are adding/updating documentation for new features or behavior.

Changed Packages

Package Name Package Path Changeset Bump Current Version
example-app-next packages/app-next none v0.0.21-next.1
@backstage/plugin-catalog plugins/catalog minor v1.28.0-next.1

@backstage-goalie
Copy link
Copy Markdown
Contributor

Thanks for the contribution!
All commits need to be DCO signed before they are reviewed. Please refer to the the DCO section in CONTRIBUTING.md or the DCO status for more info.

@camilaibs camilaibs force-pushed the camilaibs/entity-page-layout-followup branch 3 times, most recently from 1a90040 to 859e79c Compare February 25, 2025 09:10
@camilaibs camilaibs marked this pull request as ready for review February 25, 2025 09:10
@camilaibs camilaibs requested review from a team as code owners February 25, 2025 09:10
@camilaibs camilaibs requested review from Rugvip and vinzscam February 25, 2025 09:10
@camilaibs camilaibs force-pushed the camilaibs/entity-page-layout-followup branch 2 times, most recently from f8f9f13 to 848ec94 Compare February 25, 2025 09:42
Comment thread plugins/catalog/src/alpha/DefaultEntityContentLayout.tsx Outdated
<Grid xs={12} md={infoCards.length ? 8 : undefined} item>
<Grid container spacing={3}>
{fullCards.map((card, index) => (
<Grid key={index} className={classes.card} xs={12} md={6} item>
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Kinda imagining that these will always be 12, regardless of size. Maybe if you expand to widescreen we'd have some side by side, but that'd be xxxl={6}

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I used md={6} for visual backwards compatibility. Wouldn't it be a breaking change if I changed this for everyone using the default layout?

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ah, arguably not or even the other way around I'd say. Currently we're kinda switching to 3 columns instead of 2 in total, but if we keep these cards at 12 it'd be more like 1.2 + 0.8 columns :p

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

In my mind, we only switch to 3 columns if people add types to the cards, but if they don't, the layout will remain 2 columns. However, I updated it to the size you suggested.

Comment thread plugins/catalog/src/alpha/DefaultEntityContentLayout.tsx
Comment thread .changeset/orange-turtles-join.md Outdated
@camilaibs camilaibs force-pushed the camilaibs/entity-page-layout-followup branch from 848ec94 to d2554df Compare March 3, 2025 08:32
@camilaibs camilaibs requested a review from Rugvip March 3, 2025 09:30
Copy link
Copy Markdown
Member

@Rugvip Rugvip left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice! 👌

Couple of things but pre-approved

Tried it out with a couple of peek cards to see what it looks like, in case anyone else is curious:

image

Comment thread plugins/catalog/src/alpha/DefaultEntityContentLayout.tsx Outdated
Comment thread plugins/catalog/src/alpha/DefaultEntityContentLayout.tsx Outdated
camilaibs and others added 3 commits March 4, 2025 13:38
Signed-off-by: Camila Belo <camilaibs@gmail.com>
Signed-off-by: Camila Belo <camilaibs@gmail.com>
Co-authored-by: Patrik Oldsberg <poldsberg@gmail.com>
Signed-off-by: Camila Belo <camilaibs@gmail.com>
@camilaibs camilaibs force-pushed the camilaibs/entity-page-layout-followup branch from a3cd14b to db8ff82 Compare March 5, 2025 15:06
@camilaibs camilaibs merged commit ebb68be into master Mar 5, 2025
@camilaibs camilaibs deleted the camilaibs/entity-page-layout-followup branch March 5, 2025 15:46
@freben freben mentioned this pull request Mar 18, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

area:catalog Related to the Catalog Project Area

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants