Merge branch 'master' into canon-table-updates

2025-04-11 09:13:45 +02:00
parent 9806fd8adf 9ede6ffcb7
commit 04c054c8bf
16 changed files with 105 additions and 3 deletions
@@ -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.
@@ -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.
@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-catalog-react': patch
+---
+
+Added a new `overview` entity content group for the new frontend system.
@@ -0,0 +1,5 @@
+---
+'@backstage/canon': patch
+---
+
+Fix Select styles on small sizes + with long option names in Canon.
@@ -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.
@@ -757,6 +757,7 @@
  cursor: pointer;
  justify-content: space-between;
  align-items: center;
+  gap: var(--canon-space-2);
  width: 100%;
  transition: border-color .2s ease-in-out, outline-color .2s ease-in-out;
  display: flex;
@@ -883,3 +884,16 @@
  font-weight: var(--canon-font-weight-regular);
  margin-left: var(--canon-space-1);
 }
+
+.canon-Select--icon {
+  justify-content: center;
+  align-items: center;
+  display: flex;
+}
+
+.canon-Select--value {
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  width: 100%;
+  overflow: hidden;
+}
@@ -41,6 +41,7 @@
  cursor: pointer;
  justify-content: space-between;
  align-items: center;
+  gap: var(--canon-space-2);
  width: 100%;
  transition: border-color .2s ease-in-out, outline-color .2s ease-in-out;
  display: flex;
@@ -167,3 +168,16 @@
  font-weight: var(--canon-font-weight-regular);
  margin-left: var(--canon-space-1);
 }
+
+.canon-Select--icon {
+  justify-content: center;
+  align-items: center;
+  display: flex;
+}
+
+.canon-Select--value {
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  width: 100%;
+  overflow: hidden;
+}
@@ -9981,6 +9981,7 @@
  cursor: pointer;
  justify-content: space-between;
  align-items: center;
+  gap: var(--canon-space-2);
  width: 100%;
  transition: border-color .2s ease-in-out, outline-color .2s ease-in-out;
  display: flex;
@@ -10107,3 +10108,16 @@
  font-weight: var(--canon-font-weight-regular);
  margin-left: var(--canon-space-1);
 }
+
+.canon-Select--icon {
+  justify-content: center;
+  align-items: center;
+  display: flex;
+}
+
+.canon-Select--value {
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  width: 100%;
+  overflow: hidden;
+}
@@ -253,7 +253,7 @@ export const WithErrorAndDescription: Story = {
  },
 };

-export const WithLongLabels: Story = {
+export const WithLongOptionNames: Story = {
  args: {
    label: 'Document Template',
    options: [
@@ -272,9 +272,20 @@ export const WithLongLabels: Story = {
        label:
          'Detailed User Guide and Technical Documentation for Advanced System Features Covering Installation Procedures, Configuration Settings, Security Protocols, Troubleshooting Guidelines, Best Practices, Common Use Cases, Performance Optimization Tips, Integration Methods, API Documentation, and Frequently Asked Questions with Step-by-Step Solutions',
      },
+      {
+        value: 'marketing-plan',
+        label:
+          'Integrated Marketing Strategy and Campaign Planning Document for Q3 2024 Encompassing Target Audience Analysis, Channel Selection Criteria, Budget Allocation Framework, Creative Development Process, Content Calendar, Social Media Strategy, Email Marketing Campaigns, SEO Optimization, Paid Advertising Plans, and ROI Measurement Methodology',
+      },
+      {
+        value: 'research-paper',
+        label:
+          'Scientific Research Paper on Advanced Machine Learning Techniques and Applications Including Literature Review, Methodology Description, Experimental Setup, Data Collection Procedures, Analysis Techniques, Results Interpretation, Comparative Studies, Limitations Discussion, Future Research Directions, and Practical Implementation Guidelines',
+      },
    ],
    placeholder: 'Select a document template',
    name: 'template',
    style: { maxWidth: 400 },
+    value: 'annual-report-2024',
  },
 };
@@ -60,6 +60,7 @@
  align-items: center;
  transition: border-color 0.2s ease-in-out, outline-color 0.2s ease-in-out;
  cursor: pointer;
+  gap: var(--canon-space-2);
 }

 .canon-Select--trigger::placeholder {
@@ -187,3 +188,16 @@
  font-weight: var(--canon-font-weight-regular);
  margin-left: var(--canon-space-1);
 }
+
+.canon-Select--icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.canon-Select--value {
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+  width: 100%;
+}
@@ -66,7 +66,10 @@ export const Select = forwardRef<HTMLDivElement, SelectProps>((props, ref) => {
          })}
          data-invalid={error}
        >
-          <SelectPrimitive.Value placeholder={placeholder} />
+          <SelectPrimitive.Value
+            className="canon-Select--value"
+            placeholder={placeholder}
+          />
          <SelectPrimitive.Icon className="canon-Select--icon">
            <Icon name="chevron-down" />
          </SelectPrimitive.Icon>
@@ -110,6 +110,7 @@ export function convertLegacyEntityContentExtension(

 // @alpha
 export const defaultEntityContentGroups: {
+  overview: string;
  documentation: string;
  development: string;
  deployment: string;
@@ -38,6 +38,7 @@ export const entityFilterExpressionDataRef =
 * Default entity content groups.
 */
 export const defaultEntityContentGroups = {
+  overview: 'Overview',
  documentation: 'Documentation',
  development: 'Development',
  deployment: 'Deployment',
@@ -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>
              ))}
@@ -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 =>
@@ -49,6 +49,7 @@ export const catalogOverviewEntityContent =
      return originalFactory({
        defaultPath: '/',
        defaultTitle: 'Overview',
+        defaultGroup: 'overview',
        loader: async () => {
          const LazyDefaultLayoutComponent = reactLazy(() =>
            import('./DefaultEntityContentLayout').then(m => ({