Merge pull request #29546 from backstage/rugvip/catalog-fixes

catalog: couple of fixes for new frontend system

.changeset/brown-pans-guess.md

@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-catalog': patch
+---
+
+Fixed the layout of summary cards in the new frontend system, ensuring that the horizontal scroll grid doesn't grow too large as well as tweaked its scrolling parameters.

.changeset/kind-pianos-fold.md

@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-catalog': patch
+---
+
+The about, links, and labels card now all have the `info` card type by default in the new frontend system.

.changeset/rare-olives-lay.md

@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-catalog-react': patch
+---
+
+Added a new `overview` entity content group for the new frontend system.

.changeset/wet-towns-laugh.md

@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-catalog': patch
+---
+
+The overview content is now part of the overview group by default in the new frontend system.

plugins/catalog-react/report-alpha.api.md

@@ -110,6 +110,7 @@ export function convertLegacyEntityContentExtension(
 
 // @alpha
 export const defaultEntityContentGroups: {
+  overview: string;
   documentation: string;
   development: string;
   deployment: string;

plugins/catalog-react/src/alpha/blueprints/extensionData.tsx

@@ -38,6 +38,7 @@ export const entityFilterExpressionDataRef =
  * Default entity content groups.
  */
 export const defaultEntityContentGroups = {
+  overview: 'Overview',
   documentation: 'Documentation',
   development: 'Development',
   deployment: 'Deployment',

plugins/catalog/src/alpha/DefaultEntityContentLayout.tsx

@@ -56,6 +56,7 @@ const useStyles = makeStyles<
     minWidth: 0,
   },
   summaryArea: {
+    minWidth: 0,
     margin: theme.spacing(1.5), // To counteract MUI negative grid margin
   },
   summaryCard: {
@@ -145,7 +146,7 @@ export function DefaultEntityContentLayout(props: EntityContentLayoutProps) {
         ) : null}
         {summaryCards.length > 0 ? (
           <div className={classes.summaryArea}>
-            <HorizontalScrollGrid>
+            <HorizontalScrollGrid scrollStep={400} scrollSpeed={100}>
               {summaryCards.map(card => (
                 <div className={classes.summaryCard}>{card.element}</div>
               ))}

plugins/catalog/src/alpha/entityCards.tsx

@@ -20,6 +20,7 @@ import { compatWrapper } from '@backstage/core-compat-api';
 export const catalogAboutEntityCard = EntityCardBlueprint.make({
   name: 'about',
   params: {
+    type: 'info',
     loader: async () =>
       import('../components/AboutCard').then(m =>
         compatWrapper(<m.AboutCard variant="gridItem" />),
@@ -30,6 +31,7 @@ export const catalogAboutEntityCard = EntityCardBlueprint.make({
 export const catalogLinksEntityCard = EntityCardBlueprint.make({
   name: 'links',
   params: {
+    type: 'info',
     filter: 'has:links',
     loader: async () =>
       import('../components/EntityLinksCard').then(m =>
@@ -41,6 +43,7 @@ export const catalogLinksEntityCard = EntityCardBlueprint.make({
 export const catalogLabelsEntityCard = EntityCardBlueprint.make({
   name: 'labels',
   params: {
+    type: 'info',
     filter: 'has:labels',
     loader: async () =>
       import('../components/EntityLabelsCard').then(m =>

plugins/catalog/src/alpha/entityContents.tsx

@@ -49,6 +49,7 @@ export const catalogOverviewEntityContent =
       return originalFactory({
         defaultPath: '/',
         defaultTitle: 'Overview',
+        defaultGroup: 'overview',
         loader: async () => {
           const LazyDefaultLayoutComponent = reactLazy(() =>
             import('./DefaultEntityContentLayout').then(m => ({