diff --git a/.changeset/brown-pans-guess.md b/.changeset/brown-pans-guess.md new file mode 100644 index 0000000000..e6ba4ee465 --- /dev/null +++ b/.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. diff --git a/.changeset/kind-pianos-fold.md b/.changeset/kind-pianos-fold.md new file mode 100644 index 0000000000..a0c2bf39bc --- /dev/null +++ b/.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. diff --git a/.changeset/rare-olives-lay.md b/.changeset/rare-olives-lay.md new file mode 100644 index 0000000000..0807e244ac --- /dev/null +++ b/.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. diff --git a/.changeset/thick-windows-juggle.md b/.changeset/thick-windows-juggle.md new file mode 100644 index 0000000000..1ee17e314d --- /dev/null +++ b/.changeset/thick-windows-juggle.md @@ -0,0 +1,5 @@ +--- +'@backstage/canon': patch +--- + +Fix Select styles on small sizes + with long option names in Canon. diff --git a/.changeset/wet-towns-laugh.md b/.changeset/wet-towns-laugh.md new file mode 100644 index 0000000000..1e16e0b6d8 --- /dev/null +++ b/.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. diff --git a/packages/canon/css/components.css b/packages/canon/css/components.css index 6d2508ac59..d8f289d019 100644 --- a/packages/canon/css/components.css +++ b/packages/canon/css/components.css @@ -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; +} diff --git a/packages/canon/css/select.css b/packages/canon/css/select.css index 6c64c39245..29494c634a 100644 --- a/packages/canon/css/select.css +++ b/packages/canon/css/select.css @@ -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; +} diff --git a/packages/canon/css/styles.css b/packages/canon/css/styles.css index e95584bbae..395b8ccde8 100644 --- a/packages/canon/css/styles.css +++ b/packages/canon/css/styles.css @@ -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; +} diff --git a/packages/canon/src/components/Select/Select.stories.tsx b/packages/canon/src/components/Select/Select.stories.tsx index 0a621162b5..000ba180dc 100644 --- a/packages/canon/src/components/Select/Select.stories.tsx +++ b/packages/canon/src/components/Select/Select.stories.tsx @@ -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', }, }; diff --git a/packages/canon/src/components/Select/Select.styles.css b/packages/canon/src/components/Select/Select.styles.css index 19fa327bf5..2fcdbf7a6a 100644 --- a/packages/canon/src/components/Select/Select.styles.css +++ b/packages/canon/src/components/Select/Select.styles.css @@ -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%; +} diff --git a/packages/canon/src/components/Select/Select.tsx b/packages/canon/src/components/Select/Select.tsx index 9463735829..6e28d3a9a0 100644 --- a/packages/canon/src/components/Select/Select.tsx +++ b/packages/canon/src/components/Select/Select.tsx @@ -66,7 +66,10 @@ export const Select = forwardRef((props, ref) => { })} data-invalid={error} > - + diff --git a/plugins/catalog-react/report-alpha.api.md b/plugins/catalog-react/report-alpha.api.md index b9a064043c..d5f85b7836 100644 --- a/plugins/catalog-react/report-alpha.api.md +++ b/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; diff --git a/plugins/catalog-react/src/alpha/blueprints/extensionData.tsx b/plugins/catalog-react/src/alpha/blueprints/extensionData.tsx index b5092d99b7..0a52ce2c5c 100644 --- a/plugins/catalog-react/src/alpha/blueprints/extensionData.tsx +++ b/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', diff --git a/plugins/catalog/src/alpha/DefaultEntityContentLayout.tsx b/plugins/catalog/src/alpha/DefaultEntityContentLayout.tsx index badfaf6d72..21276f424a 100644 --- a/plugins/catalog/src/alpha/DefaultEntityContentLayout.tsx +++ b/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 ? (
- + {summaryCards.map(card => (
{card.element}
))} diff --git a/plugins/catalog/src/alpha/entityCards.tsx b/plugins/catalog/src/alpha/entityCards.tsx index 98921958ad..8662518d30 100644 --- a/plugins/catalog/src/alpha/entityCards.tsx +++ b/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(), @@ -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 => diff --git a/plugins/catalog/src/alpha/entityContents.tsx b/plugins/catalog/src/alpha/entityContents.tsx index 8be3608b82..165ed33e04 100644 --- a/plugins/catalog/src/alpha/entityContents.tsx +++ b/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 => ({