[NFS] Entity Page Content Layouts by camilaibs · Pull Request #28758 · backstage/backstage

camilaibs · 2025-02-07T09:37:04Z

Warning

Merge after #28701

Hey, I just made a Pull Request!

Implements the ability to install custom layouts for the default entity page overview tab.

Usage example

Creating this custom overview tab layout:

import { StickyEntityContentOverviewLayout } from './StickyEntityContentOverviewLayout';
// ...

const customEntityContentOverviewStickyLayoutModule = createFrontendModule({
  pluginId: 'app',
  extensions: [
    EntityCardLayoutBlueprint.make({
      name: 'sticky',
      params: {
        loader: async () => StickyEntityContentOverviewLayout,
      },
    }),
  ],
});

Disabling the custom layout:

# app-config.yaml
app:
  extensions:
     - entity-card-layout:app/sticky: false

Overriding the custom layout filter:

# app-config.yaml
app:
  extensions:
     - entity-card-layout:app/sticky:
        config:
          # This layout will be used only with component entities
          filter: 'kind:component'

Overriding the about card default area, so it gets rendered in the info area:

# app-config-yaml
app:
  extensions:
    - entity-card:catalog/about:
        config:
          area: info

Overriding the links card default area, so it gets rendered in the info area:

# app-config-yaml
app:
  extensions:
    - entity-card:catalog/links:
        config:
          area: 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)

camilaibs · 2025-02-13T09:24:03Z

  dataRefs: {
    filterFunction: entityFilterFunctionDataRef,
    filterExpression: entityFilterExpressionDataRef,
+    area: entityCardAreaDataRef,


@Rugvip I could not name it variant because it conflicts with cards that already expect that prop:

Should we use the info card variant as default values?

Hmm, I don't quite see how this would actually result in a conflict. I'll need to dig a bit deeper. I do prefer variant still

Followup in #28930

camilaibs · 2025-02-13T09:30:09Z

+});
+
+/** @alpha */
+export const EntityCardLayoutBlueprint = createExtensionBlueprint({


We were unsure if we should rename to EntityContentLayout as the current name could be interpreted as individual card elements layout. I would particularly recommend renaming to EntityContentLayout if people can attach a layout to multiple parents or even EntityOverviewContentLayout if they can only attach this to the overview tab layout.

Yep let's go with EntityContentLayout, might leave for a followup depending on the potential for conflict with #28845

camilaibs · 2025-02-13T09:37:21Z

+- `peek`: used for cards containing infrastucture information (e.g. last builds, deployments, etc.).
+- `info`: used for cards that contain entity metadata (e.g. about, links);
+- `full`: Contains information that plugins add to an entity (e.g. PagerDuty incidents and on-call escalation).


Names like these are not really areas. They are more variant names, but the variant term is overused, and we encountered conflicts like the one mentioned here:
https://github.com/backstage/backstage/pull/28758/files#r1954130876

Open to suggestions.

Signed-off-by: Camila Belo <camilaibs@gmail.com>

Co-authored-by: Patrik Oldsberg <poldsberg@gmail.com> Signed-off-by: Camila Belo <camilaibs@gmail.com>

Rugvip

👌 ✨

Couple of notes for followups but let's 🚢 & 🇮🇹

Rugvip · 2025-02-19T15:11:52Z

+### Usage example
+
+Creating a custom overview tab layout:
+
+```tsx
+import {
+  EntityCardLayoutProps,
+  EntityCardLayoutBlueprint,
+} from '@backstage/plugin-catalog-react/alpha';
+// ...
+
+function StickyEntityContentOverviewLayout(props: EntityCardLayoutProps) {
+  const { cards } = props;
+  const classes = useStyles();
+  return (
+    <Grid container spacing={3}>
+      <Grid
+        className={classes.infoArea}
+        xs={12}
+        md={4}
+        item
+      >
+        <Grid container spacing={3}>
+          {cards
+            .filter(card => card.area === 'info')
+            .map((card, index) => (
+              <Grid key={index} xs={12} item>
+                {card.element}
+              </Grid>
+            ))}
+        </Grid>
+      </Grid>
+      <Grid xs={12} md={8} item>
+        <Grid container spacing={3}>
+          {cards
+            .filter(card => card.area === 'peek')
+            .map((card, index) => (
+              <Grid key={index} className={classes.card} xs={12} md={6} item>
+                {card.element}
+              </Grid>
+            ))}
+          {cards
+            .filter(card => !card.area || card.area === 'full')
+            .map((card, index) => (
+              <Grid key={index} className={classes.card} xs={12} md={6} item>
+                {card.element}
+              </Grid>
+            ))}
+        </Grid>
+      </Grid>
+    </Grid>
+  );
+}
+
+export const customEntityContentOverviewStickyLayoutModule = createFrontendModule({
+  pluginId: 'app',
+  extensions: [
+    EntityCardLayoutBlueprint.make({
+      name: 'sticky',
+      params: {
+        // (optional) defaults the `() => false` filter function
+        defaultFilter: 'kind:template'
+        loader: async () => StickyEntityContentOverviewLayout,
+      },
+    }),
+  ],
+```
+
+Disabling the custom layout:
+
+```yaml
+# app-config.yaml
+app:
+  extensions:
+    - entity-card-layout:app/sticky: false
+```
+
+Overriding the custom layout filter:
+
+```yaml
+# app-config.yaml
+app:
+  extensions:
+    - entity-card-layout:app/sticky:
+        config:
+          # This layout will be used only with component entities
+          filter: 'kind:component'
+```


Followup: let's move this to docs instead. It's a bit much for a changeset but useful content that should live longer than just the release notes. Some with some of the other changesets

Rugvip · 2025-02-19T15:45:42Z

+  },
+}));
+
+function StickyEntityContentOverviewLayout(props: EntityCardLayoutProps) {


Followup: Move this to be the default layout and add a different example here

Rugvip · 2025-02-19T19:52:17Z

+  kind: 'entity-card-layout';
+  name: undefined;
+  params: {
+    defaultFilter?: string | ((entity: Entity) => boolean) | undefined;


This doesn't line up with the rest, but might be better 🤔

Leaving as a followup to align these

Followup in #28923

Rugvip · 2025-02-19T19:52:58Z

+const entityCardLayoutComponentDataRef = createExtensionDataRef<
+  (props: EntityCardLayoutProps) => React.JSX.Element
+>().with({
+  id: 'catalog.entity-card-layout.component',


Reminder to update this too

Rugvip · 2025-02-19T19:56:04Z

+    const ExtensionComponent = reactLazy(() =>
+      loader().then(component => ({ default: component })),
+    );


I think we can switch to ExtensionBoundary.lazy here

Followup in #28927

github-actions · 2025-02-19T20:00:04Z

Thank you for contributing to Backstage! The changes in this pull request will be part of the 1.37.0 release, scheduled for Tue, 18 Mar 2025.

camilaibs changed the title ~~[NFS] Custom Entity Page Overview Tab lLayout~~ [NFS] Custom Entity Page Overview Tab Layout Feb 7, 2025

github-actions Bot added the area:catalog Related to the Catalog Project Area label Feb 7, 2025

camilaibs force-pushed the camilaibs/nfs-entity-page-layout branch 4 times, most recently from fa62b71 to 1b08c4e Compare February 7, 2025 09:49

camilaibs commented Feb 7, 2025

View reviewed changes

Comment thread plugins/catalog/src/alpha/entityContents.tsx Outdated

Comment thread plugins/catalog-react/src/alpha/blueprints/OverviewEntityContentLauyoutBlueprint.tsx Outdated

camilaibs force-pushed the camilaibs/nfs-entity-page-layout branch 4 times, most recently from ecc1a6e to f108d68 Compare February 13, 2025 07:46

camilaibs marked this pull request as ready for review February 13, 2025 08:14

camilaibs requested review from a team as code owners February 13, 2025 08:14

camilaibs requested review from freben and vinzscam and removed request for a team February 13, 2025 08:14

camilaibs force-pushed the camilaibs/nfs-entity-page-layout branch 4 times, most recently from 711d788 to c39b150 Compare February 13, 2025 09:22

camilaibs commented Feb 13, 2025

View reviewed changes

camilaibs force-pushed the camilaibs/nfs-entity-page-layout branch from c39b150 to 8c5e9d6 Compare February 13, 2025 09:32

camilaibs commented Feb 13, 2025

View reviewed changes

camilaibs changed the title ~~[NFS] Custom Entity Page Overview Tab Layout~~ [NFS] Entit Page Content Layout Feb 15, 2025

camilaibs changed the title ~~[NFS] Entit Page Content Layout~~ [NFS] Entity Page Content Layout Feb 15, 2025

camilaibs changed the title ~~[NFS] Entity Page Content Layout~~ [NFS] Entity Page Content Layouts Feb 15, 2025

camilaibs added the workflow:after-release This is a bit too scary to merge until after the next release label Feb 15, 2025

camilaibs force-pushed the camilaibs/nfs-entity-content-groups branch from d781239 to 22ce741 Compare February 16, 2025 07:14

camilaibs requested review from a team and backstage-service as code owners February 16, 2025 07:14

camilaibs force-pushed the camilaibs/nfs-entity-page-layout branch from 8c5e9d6 to 0a1ce97 Compare February 16, 2025 07:14

camilaibs and others added 2 commits February 16, 2025 08:15

feat: creat entity content layout extension

761b566

Signed-off-by: Camila Belo <camilaibs@gmail.com>

refactor: apply review suggestions

a3d93ca

Co-authored-by: Patrik Oldsberg <poldsberg@gmail.com> Signed-off-by: Camila Belo <camilaibs@gmail.com>

camilaibs force-pushed the camilaibs/nfs-entity-page-layout branch from 0a1ce97 to a3d93ca Compare February 16, 2025 07:16

camilaibs mentioned this pull request Feb 16, 2025

[NFS] Entity Page Headers #28845

Merged

5 tasks

Base automatically changed from camilaibs/nfs-entity-content-groups to master February 19, 2025 14:19

Rugvip approved these changes Feb 19, 2025

View reviewed changes

Rugvip merged commit 8f236fe into master Feb 19, 2025

Rugvip deleted the camilaibs/nfs-entity-page-layout branch February 19, 2025 19:59

freben mentioned this pull request Mar 18, 2025

Version Packages #29174

Merged

Conversation

camilaibs commented Feb 7, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Hey, I just made a Pull Request!

Usage example

✔️ Checklist

Uh oh!

Uh oh!

Uh oh!

camilaibs Feb 13, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

camilaibs Feb 13, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

camilaibs Feb 13, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Rugvip left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

github-actions Bot commented Feb 19, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

camilaibs commented Feb 7, 2025 •

edited

Loading

camilaibs Feb 13, 2025 •

edited

Loading

camilaibs Feb 13, 2025 •

edited

Loading

camilaibs Feb 13, 2025 •

edited

Loading