diff --git a/.changeset/healthy-lions-sin.md b/.changeset/healthy-lions-sin.md new file mode 100644 index 0000000000..632b87067c --- /dev/null +++ b/.changeset/healthy-lions-sin.md @@ -0,0 +1,5 @@ +--- +'@backstage/plugin-scaffolder': patch +--- + +The `ScaffolderPage` now uses the `CatalogFilterLayout`, which means the filters are put in a drawer on smaller screens. diff --git a/.changeset/lucky-scissors-play.md b/.changeset/lucky-scissors-play.md new file mode 100644 index 0000000000..dca966d515 --- /dev/null +++ b/.changeset/lucky-scissors-play.md @@ -0,0 +1,9 @@ +--- +'@backstage/plugin-catalog': patch +--- + +**DEPRECATION**: The `FilteredEntityLayout` and related components have been moved to `@backstage/plugin-catalog-react` and renamed. The original components are now deprecated and should be replaced as follows: + +- `FilteredEntityLayout` -> `CatalogFilterLayout` +- `FilterContainer` -> `CatalogFilterLayout.Filters` +- `EntityListContainer` -> `CatalogFilterLayout.Content` diff --git a/.changeset/nasty-chefs-dream.md b/.changeset/nasty-chefs-dream.md new file mode 100644 index 0000000000..198f280fcc --- /dev/null +++ b/.changeset/nasty-chefs-dream.md @@ -0,0 +1,16 @@ +--- +'@backstage/plugin-catalog-react': patch +--- + +Added `CatalogFilterLayout`, which replaces `FilteredEntityLayout` from `@backstage/plugin-catalog`, as well as `FilterContainer` and `EntityListContainer`. It is used like this: + +```tsx + + + {/* filter drawer, for example and friends */} + + + {/* content view, for example a */} + + +``` diff --git a/.changeset/nice-seals-decide.md b/.changeset/nice-seals-decide.md new file mode 100644 index 0000000000..999b2db6a5 --- /dev/null +++ b/.changeset/nice-seals-decide.md @@ -0,0 +1,6 @@ +--- +'@backstage/plugin-api-docs': patch +'@backstage/plugin-techdocs': patch +--- + +Switched to using `CatalogFilterLayout` from `@backstage/plugin-catalog-react`. diff --git a/.changeset/wild-sheep-mate.md b/.changeset/wild-sheep-mate.md new file mode 100644 index 0000000000..f105a68cb2 --- /dev/null +++ b/.changeset/wild-sheep-mate.md @@ -0,0 +1,7 @@ +--- +'@backstage/plugin-catalog-backend': patch +'@backstage/plugin-catalog-backend-module-github': patch +'@backstage/plugin-catalog-backend-module-ldap': patch +--- + +Made sure to move the catalog-related github and ldap config into their right places diff --git a/.github/styles/vocab.txt b/.github/styles/vocab.txt index b8e432dd98..9e57785b3e 100644 --- a/.github/styles/vocab.txt +++ b/.github/styles/vocab.txt @@ -27,6 +27,7 @@ Billett bitbucket Bitrise Blackbox +Brex bool boolean builtins @@ -151,6 +152,7 @@ Leasot lerna Lerna LocalStack +lockdown lockfile lunr Luxon @@ -268,6 +270,7 @@ seb semlas semver Serverless +shoutout siloed Sinon Snyk diff --git a/docs/features/software-catalog/catalog-customization.md b/docs/features/software-catalog/catalog-customization.md index 80c9458aee..1b5535a464 100644 --- a/docs/features/software-catalog/catalog-customization.md +++ b/docs/features/software-catalog/catalog-customization.md @@ -41,16 +41,16 @@ export const CustomCatalogPage = ({ All your software catalog entities - - + + - - + + - - + + @@ -151,18 +151,18 @@ export const CustomCatalogPage = ({ return ( ... - - + + + + ... }; diff --git a/microsite/blog/2022-03-16-backstage-turns-two.md b/microsite/blog/2022-03-16-backstage-turns-two.md new file mode 100644 index 0000000000..172fb7b971 --- /dev/null +++ b/microsite/blog/2022-03-16-backstage-turns-two.md @@ -0,0 +1,68 @@ +--- +title: Backstage Turns Two! +author: Lee Mills, Spotify +authorURL: https://github.com/leemills83 +authorImageURL: https://avatars1.githubusercontent.com/u/1236238?s=460&v=4 +--- + +![A cake celebrating Backstage’s second birthday](assets/22-03-16/backstage-2nd-birthday.gif) + +**TLDR:** Backstage has turned two. Of course, this is software, so we expect things to move fast. But when you have a passionate, worldwide community building together, we’ve now seen firsthand just how fast that can be. We’re marking our second year as a community by becoming a CNCF incubating project, reaching 100 public adopters, releasing version 1.0 of the core app, and other very nice birthday gifts. Rather than a toddler finding their feet, Backstage today is beginning to look awfully grown-up for a two-year-old. + + + +## Out of the Sandbox and into Incubation + +Two years ago, a small team at Spotify launched Backstage into open source during our internal Hack Week. We knew we had something special on our hands and that Backstage could potentially be the most ambitious open source project in Spotify’s history (you can listen to me wax philosophical on this topic more in [Episode 2 of the new NerdOut@Spotify podcast](https://open.spotify.com/episode/332yTwGiILGKTS7dsHCj2P?si=pX9xTzB2SgmsROdlLLr24A).) + +When Spotify donated the project to the CNCF, we saw it as the first promising step toward making Backstage an industry standard. As the home to Kubernetes, Envoy, and so many other game-changing open technologies, the CNCF and its community has had a wide-ranging impact on the daily lives of developers everywhere. And that’s what we hoped for Backstage, even back then. + +But we couldn't have envisioned where we’d be two years later — part of an ever-growing community of people that feel as passionate as we do about unlocking better developer experience for every engineering organization. + +Yesterday, the CNCF announced that its [Technical Oversight Committee](https://github.com/cncf/toc) (TOC) voted to accept Backstage as a [CNCF incubating project](https://www.cncf.io/blog/2022/03/15/backstage-project-joins-the-cncf-incubator/). The move from the CNCF Sandbox to Incubation is an important step forward for the project’s technical governance. + +It’s also recognition for all the work the Backstage open source community has done to advance and grow this project since we launched the repo on GitHub just a few weeks after that Hack Week. We still have a long way to go to becoming the standard, but moving out of the CNCF Sandbox and beginning the Incubation phase is further validation of those aspirations. + +## What do retailers, gaming studios, banks, airlines, streamers, startups, and enterprise software makers all have in common? + +Developers, developers, developers — that’s what all companies have in common. Developers dealing with [more complexity](https://youtu.be/85TQEpNCaU0) than they’ve ever had to deal with before. Developers who want to be able to go from idea to bug fix or feature faster. + +Two years in, the Backstage ecosystem has grown by leaps and bounds. More than 5,000 contributors have joined the project and are submitting bugs, adding new features, and building valuable plugins that benefit the greater community. From [Expedia Group](https://backstage.spotify.com/blog/measuring-backstage-proof-of-value-at-expedia/) (adopter No.18) to Unity (adopter No.67), Backstage now has [100 publicly listed adopters](https://github.com/backstage/backstage/blob/master/ADOPTERS.md) across a variety of industries, including retail, gaming, financial services, manufacturing, and government. + +We have companies like [Roadie](http://roadie.io) providing hosting solutions and ThoughtWorks [providing technology and consulting services](https://www.thoughtworks.com/en-us/about-us/news/2021/thoughtworks-is-collaborating-with-spotify-to-deliver-better-dev) to teams looking to stand up Backstage in their own orgs. We’re starting to see more and more job listings for Backstage developers which tells us that companies of all shapes and sizes are going all-in on Backstage and developer effectiveness. + +Also, I’ll pause now to give a special shoutout to our early adopters. They stuck with us through all the bumps and breaking changes. But because of their early commitment, we now see instances of Backstage up and running in so many different kinds of engineering organizations. From [Zalando](https://youtu.be/6sg5uMCLxTA) to [American Airlines](https://backstage.spotify.com/blog/adopter-spotlight/american-airlines-runway/) and [Brex](https://backstage.spotify.com/blog/community-session/11-brex-backstage-upgrade-helper/), the growing pains of our earliest adopters helped pave the way for smoother adoptions for all who follow them. + +A few more numbers that make us proud: + +- 2,000+ project forks +- 20,000+ commits +- 10,000+ PRs & issues +- 15,000+ stars on GitHub +- 60+ open source plugins in the [Backstage Plugin Marketplace](https://backstage.io/plugins) + +## A global community of friendly, helpful contributors + +We open sourced Backstage in March 2020 and then almost immediately went into lockdown. When you think about this project in the context of the pandemic, it's really remarkable how much this community has been able to achieve. + +The Backstage community is truly global with adopters and contributors from almost every continent (sorry, Antarctica!) coming together to share what they’ve worked on and demo cool stuff in our monthly Community Sessions. The repo and the Discord server truly never sleep as a growing group of dedicated Backstage experts outside Spotify support one another and offer help 24/7. + +We asked a few contributors and maintainers to share their thoughts around this two-year milestone. + + + +Warms the heart, doesn’t it? Thanks again to all our contributors for making this possible. Seriously. We’re proud of what the community has accomplished and how we’ve accomplished it. All along, it’s your enthusiasm and warm/collaborative/positive vibes that have carried us and this project through. + +## Version 1.0 and beyond + +Tomorrow, we’ll be releasing version 1.0 of the Backstage core framework, including Software Catalog, Software Templates, TechDocs, and API Reference. With Backstage 1.0, the project’s core components are coming out of beta and into production with regular versioning and release cycle commitments (check back on this blog for more details!). + +v1.0 paves the way for more adoption, a bigger community, more contributions — and with this continued growth in the ecosystem, we expect even greater innovation on the platform just on the horizon with exchange of features and plugins. + +What comes next for Backstage is — in many ways — entirely up to you. We are looking to this community to [help us shape the next year](https://backstage.io/docs/overview/roadmap). + +If you’re already a part of this community, thank you for your hard work and dedication. Backstage wouldn’t be where it is today without you. We’ve come a long way together, but there’s still so much to do. + +And if you haven’t signed up yet, there’s plenty of room on this party boat! And there’s never been a better time to hop on board. As Irma ([@Irma12](https://github.com/Irma12)) said so beautifully: where else is there an opportunity to have so many people look at your code, hear you out, and help you out? + +Take a look at how to [start contributing](https://github.com/backstage/backstage/blob/master/CONTRIBUTING.md) and [join the community](https://github.com/backstage/community)! diff --git a/microsite/blog/assets/22-03-16/backstage-2nd-birthday.gif b/microsite/blog/assets/22-03-16/backstage-2nd-birthday.gif new file mode 100644 index 0000000000..bb830efa2a Binary files /dev/null and b/microsite/blog/assets/22-03-16/backstage-2nd-birthday.gif differ diff --git a/plugins/api-docs/src/components/ApiExplorerPage/DefaultApiExplorerPage.tsx b/plugins/api-docs/src/components/ApiExplorerPage/DefaultApiExplorerPage.tsx index d38383f004..9fc6b2c3c2 100644 --- a/plugins/api-docs/src/components/ApiExplorerPage/DefaultApiExplorerPage.tsx +++ b/plugins/api-docs/src/components/ApiExplorerPage/DefaultApiExplorerPage.tsx @@ -24,13 +24,7 @@ import { TableProps, } from '@backstage/core-components'; import { configApiRef, useApi, useRouteRef } from '@backstage/core-plugin-api'; -import { - CatalogTable, - CatalogTableRow, - FilteredEntityLayout, - EntityListContainer, - FilterContainer, -} from '@backstage/plugin-catalog'; +import { CatalogTable, CatalogTableRow } from '@backstage/plugin-catalog'; import { EntityKindPicker, EntityLifecyclePicker, @@ -40,6 +34,7 @@ import { EntityTypePicker, UserListFilterKind, UserListPicker, + CatalogFilterLayout, } from '@backstage/plugin-catalog-react'; import React from 'react'; import { registerComponentRouteRef } from '../../routes'; @@ -95,22 +90,22 @@ export const DefaultApiExplorerPage = ({ All your APIs - - + + - + + - - + + diff --git a/plugins/catalog-backend-module-github/config.d.ts b/plugins/catalog-backend-module-github/config.d.ts new file mode 100644 index 0000000000..a1702799c2 --- /dev/null +++ b/plugins/catalog-backend-module-github/config.d.ts @@ -0,0 +1,49 @@ +/* + * Copyright 2020 The Backstage Authors + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +export interface Config { + catalog?: { + processors?: { + /** + * GithubMultiOrgReaderProcessor configuration + */ + githubMultiOrg?: { + /** + * The configuration parameters for each GitHub org to process. + */ + orgs: Array<{ + /** + * The name of the GitHub org to process. + */ + name: string; + /** + * The namespace of the group created for this org. + * + * Defaults to org name if omitted. + */ + groupNamespace?: string; + + /** + * The namespace of the users created from this org. + * + * Defaults to empty string if omitted. + */ + userNamespace?: string; + }>; + }; + }; + }; +} diff --git a/plugins/catalog-backend-module-github/package.json b/plugins/catalog-backend-module-github/package.json index 0e63cf9da2..04bc5b7b07 100644 --- a/plugins/catalog-backend-module-github/package.json +++ b/plugins/catalog-backend-module-github/package.json @@ -52,6 +52,8 @@ "@types/lodash": "^4.14.151" }, "files": [ - "dist" - ] + "dist", + "config.d.ts" + ], + "configSchema": "config.d.ts" } diff --git a/plugins/catalog-backend-module-ldap/api-report.md b/plugins/catalog-backend-module-ldap/api-report.md index edeef4cb82..3c6cd4849b 100644 --- a/plugins/catalog-backend-module-ldap/api-report.md +++ b/plugins/catalog-backend-module-ldap/api-report.md @@ -134,7 +134,7 @@ export class LdapOrgReaderProcessor implements CatalogProcessor { }); // (undocumented) static fromConfig( - config: Config, + configRoot: Config, options: { logger: Logger; groupTransformer?: GroupTransformer; diff --git a/plugins/catalog-backend-module-ldap/config.d.ts b/plugins/catalog-backend-module-ldap/config.d.ts index 2605eb62f3..8ae3145811 100644 --- a/plugins/catalog-backend-module-ldap/config.d.ts +++ b/plugins/catalog-backend-module-ldap/config.d.ts @@ -17,8 +17,223 @@ import { JsonValue } from '@backstage/types'; export interface Config { + /** + * LdapOrgEntityProvider / LdapOrgReaderProcessor configuration + */ + ldap?: { + /** + * The configuration parameters for each single LDAP provider. + */ + providers: Array<{ + /** + * The prefix of the target that this matches on, e.g. + * "ldaps://ds.example.net", with no trailing slash. + */ + target: string; + + /** + * The settings to use for the bind command. If none are specified, + * the bind command is not issued. + */ + bind?: { + /** + * The DN of the user to auth as. + * + * E.g. "uid=ldap-robot,ou=robots,ou=example,dc=example,dc=net" + */ + dn: string; + /** + * The secret of the user to auth as (its password). + * + * @visibility secret + */ + secret: string; + }; + + /** + * The settings that govern the reading and interpretation of users. + */ + users: { + /** + * The DN under which users are stored. + * + * E.g. "ou=people,ou=example,dc=example,dc=net" + */ + dn: string; + /** + * The search options to use. The default is scope "one" and + * attributes "*" and "+". + * + * It is common to want to specify a filter, to narrow down the set + * of matching items. + */ + options: { + scope?: 'base' | 'one' | 'sub'; + filter?: string; + attributes?: string | string[]; + sizeLimit?: number; + timeLimit?: number; + derefAliases?: number; + typesOnly?: boolean; + paged?: + | boolean + | { + pageSize?: number; + pagePause?: boolean; + }; + }; + /** + * JSON paths (on a.b.c form) and hard coded values to set on those + * paths. + * + * This can be useful for example if you want to hard code a + * namespace or similar on the generated entities. + */ + set?: { [key: string]: JsonValue }; + /** + * Mappings from well known entity fields, to LDAP attribute names + */ + map?: { + /** + * The name of the attribute that holds the relative + * distinguished name of each entry. Defaults to "uid". + */ + rdn?: string; + /** + * The name of the attribute that shall be used for the value of + * the metadata.name field of the entity. Defaults to "uid". + */ + name?: string; + /** + * The name of the attribute that shall be used for the value of + * the metadata.description field of the entity. + */ + description?: string; + /** + * The name of the attribute that shall be used for the value of + * the spec.profile.displayName field of the entity. Defaults to + * "cn". + */ + displayName?: string; + /** + * The name of the attribute that shall be used for the value of + * the spec.profile.email field of the entity. Defaults to + * "mail". + */ + email?: string; + /** + * The name of the attribute that shall be used for the value of + * the spec.profile.picture field of the entity. + */ + picture?: string; + /** + * The name of the attribute that shall be used for the values of + * the spec.memberOf field of the entity. Defaults to "memberOf". + */ + memberOf?: string; + }; + }; + + /** + * The settings that govern the reading and interpretation of groups. + */ + groups: { + /** + * The DN under which groups are stored. + * + * E.g. "ou=people,ou=example,dc=example,dc=net" + */ + dn: string; + /** + * The search options to use. The default is scope "one" and + * attributes "*" and "+". + * + * It is common to want to specify a filter, to narrow down the set + * of matching items. + */ + options: { + scope?: 'base' | 'one' | 'sub'; + filter?: string; + attributes?: string | string[]; + sizeLimit?: number; + timeLimit?: number; + derefAliases?: number; + typesOnly?: boolean; + paged?: + | boolean + | { + pageSize?: number; + pagePause?: boolean; + }; + }; + /** + * JSON paths (on a.b.c form) and hard coded values to set on those + * paths. + * + * This can be useful for example if you want to hard code a + * namespace or similar on the generated entities. + */ + set?: { [key: string]: JsonValue }; + /** + * Mappings from well known entity fields, to LDAP attribute names + */ + map?: { + /** + * The name of the attribute that holds the relative + * distinguished name of each entry. Defaults to "cn". + */ + rdn?: string; + /** + * The name of the attribute that shall be used for the value of + * the metadata.name field of the entity. Defaults to "cn". + */ + name?: string; + /** + * The name of the attribute that shall be used for the value of + * the metadata.description field of the entity. Defaults to + * "description". + */ + description?: string; + /** + * The name of the attribute that shall be used for the value of + * the spec.type field of the entity. Defaults to "groupType". + */ + type?: string; + /** + * The name of the attribute that shall be used for the value of + * the spec.profile.displayName field of the entity. Defaults to + * "cn". + */ + displayName?: string; + /** + * The name of the attribute that shall be used for the value of + * the spec.profile.email field of the entity. + */ + email?: string; + /** + * The name of the attribute that shall be used for the value of + * the spec.profile.picture field of the entity. + */ + picture?: string; + /** + * The name of the attribute that shall be used for the values of + * the spec.parent field of the entity. Defaults to "memberOf". + */ + memberOf?: string; + /** + * The name of the attribute that shall be used for the values of + * the spec.children field of the entity. Defaults to "member". + */ + members?: string; + }; + }; + }>; + }; + /** * Configuration options for the catalog plugin. + * + * TODO(freben): Deprecate this entire block */ catalog?: { /** diff --git a/plugins/catalog-backend-module-ldap/src/processors/LdapOrgEntityProvider.ts b/plugins/catalog-backend-module-ldap/src/processors/LdapOrgEntityProvider.ts index bad3941767..b31b7ae266 100644 --- a/plugins/catalog-backend-module-ldap/src/processors/LdapOrgEntityProvider.ts +++ b/plugins/catalog-backend-module-ldap/src/processors/LdapOrgEntityProvider.ts @@ -114,17 +114,11 @@ export class LdapOrgEntityProvider implements EntityProvider { const config = configRoot.getOptionalConfig('ldap') || configRoot.getOptionalConfig('catalog.processors.ldapOrg'); - if (!config) { - throw new TypeError( - `There is no LDAP configuration. Please add it as "ldap.providers".`, - ); - } - - const providers = readLdapConfig(config); + const providers = config ? readLdapConfig(config) : []; const provider = providers.find(p => options.target === p.target); if (!provider) { throw new TypeError( - `There is no LDAP configuration that matches ${options.target}. Please add a configuration entry for it under "ldap.providers".`, + `There is no LDAP configuration that matches "${options.target}". Please add a configuration entry for it under "ldap.providers".`, ); } diff --git a/plugins/catalog-backend-module-ldap/src/processors/LdapOrgReaderProcessor.ts b/plugins/catalog-backend-module-ldap/src/processors/LdapOrgReaderProcessor.ts index bec24a1744..74a7e153b9 100644 --- a/plugins/catalog-backend-module-ldap/src/processors/LdapOrgReaderProcessor.ts +++ b/plugins/catalog-backend-module-ldap/src/processors/LdapOrgReaderProcessor.ts @@ -43,17 +43,20 @@ export class LdapOrgReaderProcessor implements CatalogProcessor { private readonly userTransformer?: UserTransformer; static fromConfig( - config: Config, + configRoot: Config, options: { logger: Logger; groupTransformer?: GroupTransformer; userTransformer?: UserTransformer; }, ) { - const c = config.getOptionalConfig('catalog.processors.ldapOrg'); + // TODO(freben): Deprecate the old catalog.processors.ldapOrg config + const config = + configRoot.getOptionalConfig('ldap') || + configRoot.getOptionalConfig('catalog.processors.ldapOrg'); return new LdapOrgReaderProcessor({ ...options, - providers: c ? readLdapConfig(c) : [], + providers: config ? readLdapConfig(config) : [], }); } @@ -85,7 +88,7 @@ export class LdapOrgReaderProcessor implements CatalogProcessor { const provider = this.providers.find(p => location.target === p.target); if (!provider) { throw new Error( - `There is no LDAP Org provider that matches ${location.target}. Please add a configuration entry for it under catalog.processors.ldapOrg.providers.`, + `There is no LDAP configuration that matches "${location.target}". Please add a configuration entry for it under "ldap.providers".`, ); } diff --git a/plugins/catalog-backend/config.d.ts b/plugins/catalog-backend/config.d.ts index 957f18c15f..950ed2f63c 100644 --- a/plugins/catalog-backend/config.d.ts +++ b/plugins/catalog-backend/config.d.ts @@ -105,38 +105,5 @@ export interface Config { allow: Array; }>; }>; - - /** - * List of processor-specific options and attributes - */ - processors?: { - /** - * GithubMultiOrgReaderProcessor configuration - */ - githubMultiOrg?: { - /** - * The configuration parameters for each GitHub org to process. - */ - orgs: Array<{ - /** - * The name of the GitHub org to process. - */ - name: string; - /** - * The namespace of the group created for this org. - * - * Defaults to org name if omitted. - */ - groupNamespace?: string; - - /** - * The namespace of the users created from this org. - * - * Defaults to empty string if omitted. - */ - userNamespace?: string; - }>; - }; - }; }; } diff --git a/plugins/catalog-react/api-report.md b/plugins/catalog-react/api-report.md index 265fce417d..a1541b555e 100644 --- a/plugins/catalog-react/api-report.md +++ b/plugins/catalog-react/api-report.md @@ -63,6 +63,13 @@ export { CatalogApi }; // @public export const catalogApiRef: ApiRef; +// @public (undocumented) +export const CatalogFilterLayout: { + (props: { children: React_2.ReactNode }): JSX.Element; + Filters: (props: { children: React_2.ReactNode }) => JSX.Element; + Content: (props: { children: React_2.ReactNode }) => JSX.Element; +}; + // @public (undocumented) export type CatalogReactComponentsNameToClassKey = { CatalogReactUserListPicker: CatalogReactUserListPickerClassKey; diff --git a/plugins/catalog-react/package.json b/plugins/catalog-react/package.json index 5ba52e8ac7..39180ad5fb 100644 --- a/plugins/catalog-react/package.json +++ b/plugins/catalog-react/package.json @@ -42,6 +42,7 @@ "@backstage/integration": "^0.8.0", "@backstage/plugin-permission-common": "^0.5.2", "@backstage/plugin-permission-react": "^0.3.3", + "@backstage/theme": "^0.2.15", "@backstage/types": "^0.1.3", "@backstage/version-bridge": "^0.1.2", "@material-ui/core": "^4.12.2", diff --git a/plugins/catalog/src/components/FilteredEntityLayout/FilterContainer.tsx b/plugins/catalog-react/src/components/CatalogFilterLayout/CatalogFilterLayout.tsx similarity index 78% rename from plugins/catalog/src/components/FilteredEntityLayout/FilterContainer.tsx rename to plugins/catalog-react/src/components/CatalogFilterLayout/CatalogFilterLayout.tsx index 4c0d17599d..751eb35f1d 100644 --- a/plugins/catalog/src/components/FilteredEntityLayout/FilterContainer.tsx +++ b/plugins/catalog-react/src/components/CatalogFilterLayout/CatalogFilterLayout.tsx @@ -14,7 +14,7 @@ * limitations under the License. */ -import { BackstageTheme } from '@backstage/theme'; +import React, { useState } from 'react'; import { Box, Button, @@ -25,10 +25,10 @@ import { useTheme, } from '@material-ui/core'; import FilterListIcon from '@material-ui/icons/FilterList'; -import React, { useState } from 'react'; +import { BackstageTheme } from '@backstage/theme'; /** @public */ -export function FilterContainer(props: { children: React.ReactNode }) { +export const Filters = (props: { children: React.ReactNode }) => { const isMidSizeScreen = useMediaQuery(theme => theme.breakpoints.down('md'), ); @@ -69,4 +69,25 @@ export function FilterContainer(props: { children: React.ReactNode }) { {props.children} ); -} +}; + +/** @public */ +export const Content = (props: { children: React.ReactNode }) => { + return ( + + {props.children} + + ); +}; + +/** @public */ +export const CatalogFilterLayout = (props: { children: React.ReactNode }) => { + return ( + + {props.children} + + ); +}; + +CatalogFilterLayout.Filters = Filters; +CatalogFilterLayout.Content = Content; diff --git a/plugins/catalog/src/components/FilteredEntityLayout/EntityListContainer.tsx b/plugins/catalog-react/src/components/CatalogFilterLayout/index.ts similarity index 71% rename from plugins/catalog/src/components/FilteredEntityLayout/EntityListContainer.tsx rename to plugins/catalog-react/src/components/CatalogFilterLayout/index.ts index d210d551fb..b69aab56ed 100644 --- a/plugins/catalog/src/components/FilteredEntityLayout/EntityListContainer.tsx +++ b/plugins/catalog-react/src/components/CatalogFilterLayout/index.ts @@ -14,14 +14,4 @@ * limitations under the License. */ -import { Grid } from '@material-ui/core'; -import React from 'react'; - -/** @public */ -export function EntityListContainer(props: { children: React.ReactNode }) { - return ( - - {props.children} - - ); -} +export { CatalogFilterLayout } from './CatalogFilterLayout'; diff --git a/plugins/catalog-react/src/components/index.ts b/plugins/catalog-react/src/components/index.ts index 807d6bb702..7a26a72bf9 100644 --- a/plugins/catalog-react/src/components/index.ts +++ b/plugins/catalog-react/src/components/index.ts @@ -14,6 +14,7 @@ * limitations under the License. */ +export * from './CatalogFilterLayout'; export * from './EntityKindPicker'; export * from './EntityLifecyclePicker'; export * from './EntityOwnerPicker'; diff --git a/plugins/catalog/api-report.md b/plugins/catalog/api-report.md index 43cde23c57..eddbe913d7 100644 --- a/plugins/catalog/api-report.md +++ b/plugins/catalog/api-report.md @@ -283,10 +283,10 @@ export interface EntityLinksCardProps { // @public (undocumented) export type EntityLinksEmptyStateClassKey = 'code'; -// @public (undocumented) -export function EntityListContainer(props: { - children: React_2.ReactNode; -}): JSX.Element; +// @public @deprecated (undocumented) +export const EntityListContainer: (props: { + children: ReactNode; +}) => JSX.Element; // @public export function EntityOrphanWarning(): JSX.Element; @@ -319,15 +319,13 @@ export interface EntitySwitchProps { children: ReactNode; } -// @public (undocumented) -export function FilterContainer(props: { - children: React_2.ReactNode; -}): JSX.Element; +// @public @deprecated (undocumented) +export const FilterContainer: (props: { children: ReactNode }) => JSX.Element; -// @public (undocumented) -export function FilteredEntityLayout(props: { - children: React_2.ReactNode; -}): JSX.Element; +// @public @deprecated (undocumented) +export const FilteredEntityLayout: (props: { + children: React.ReactNode; +}) => JSX.Element; // @public export function hasCatalogProcessingErrors( diff --git a/plugins/catalog/src/components/CatalogPage/DefaultCatalogPage.tsx b/plugins/catalog/src/components/CatalogPage/DefaultCatalogPage.tsx index 8bb9bae764..2a2861ac29 100644 --- a/plugins/catalog/src/components/CatalogPage/DefaultCatalogPage.tsx +++ b/plugins/catalog/src/components/CatalogPage/DefaultCatalogPage.tsx @@ -25,6 +25,7 @@ import { } from '@backstage/core-components'; import { configApiRef, useApi, useRouteRef } from '@backstage/core-plugin-api'; import { + CatalogFilterLayout, EntityLifecyclePicker, EntityListProvider, EntityOwnerPicker, @@ -36,11 +37,6 @@ import { import React from 'react'; import { createComponentRouteRef } from '../../routes'; import { CatalogTable, CatalogTableRow } from '../CatalogTable'; -import { - FilteredEntityLayout, - EntityListContainer, - FilterContainer, -} from '../FilteredEntityLayout'; import { CatalogKindHeader } from '../CatalogKindHeader'; /** @@ -71,18 +67,18 @@ export function DefaultCatalogPage(props: DefaultCatalogPageProps) { /> All your software catalog entities - - + + - - + + - - + + diff --git a/plugins/catalog/src/components/FilteredEntityLayout/FilteredEntityLayout.tsx b/plugins/catalog/src/components/FilteredEntityLayout/FilteredEntityLayout.tsx deleted file mode 100644 index 8e595fe5cd..0000000000 --- a/plugins/catalog/src/components/FilteredEntityLayout/FilteredEntityLayout.tsx +++ /dev/null @@ -1,27 +0,0 @@ -/* - * Copyright 2021 The Backstage Authors - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -import { Grid } from '@material-ui/core'; -import React from 'react'; - -/** @public */ -export function FilteredEntityLayout(props: { children: React.ReactNode }) { - return ( - - {props.children} - - ); -} diff --git a/plugins/catalog/src/components/FilteredEntityLayout/index.ts b/plugins/catalog/src/components/FilteredEntityLayout/index.ts index ded61a4edc..892aa34147 100644 --- a/plugins/catalog/src/components/FilteredEntityLayout/index.ts +++ b/plugins/catalog/src/components/FilteredEntityLayout/index.ts @@ -14,6 +14,24 @@ * limitations under the License. */ -export { FilteredEntityLayout } from './FilteredEntityLayout'; -export { FilterContainer } from './FilterContainer'; -export { EntityListContainer } from './EntityListContainer'; +import { CatalogFilterLayout } from '@backstage/plugin-catalog-react'; + +/** + * @public + * @deprecated Use `FilteredCatalogLayout` from `@backstage/plugin-catalog-react` instead. + */ +export const FilteredEntityLayout = CatalogFilterLayout as (props: { + children: React.ReactNode; +}) => JSX.Element; + +/** + * @public + * @deprecated Use `FilteredCatalogLayout.Filters` from `@backstage/plugin-catalog-react` instead. + */ +export const FilterContainer = CatalogFilterLayout.Filters; + +/** + * @public + * @deprecated Use `FilteredCatalogLayout.Content` from `@backstage/plugin-catalog-react` instead. + */ +export const EntityListContainer = CatalogFilterLayout.Content; diff --git a/plugins/scaffolder/src/components/ScaffolderPage/ScaffolderPage.tsx b/plugins/scaffolder/src/components/ScaffolderPage/ScaffolderPage.tsx index 13ab2e7d37..a60a60554a 100644 --- a/plugins/scaffolder/src/components/ScaffolderPage/ScaffolderPage.tsx +++ b/plugins/scaffolder/src/components/ScaffolderPage/ScaffolderPage.tsx @@ -26,13 +26,13 @@ import { Entity } from '@backstage/catalog-model'; import { TemplateEntityV1beta3 } from '@backstage/plugin-scaffolder-common'; import { useRouteRef } from '@backstage/core-plugin-api'; import { + CatalogFilterLayout, EntityKindPicker, EntityListProvider, EntitySearchBar, EntityTagPicker, UserListPicker, } from '@backstage/plugin-catalog-react'; -import { makeStyles } from '@material-ui/core'; import React, { ComponentType } from 'react'; import { registerComponentRouteRef } from '../../routes'; import { TemplateList } from '../TemplateList'; @@ -40,15 +40,6 @@ import { TemplateTypePicker } from '../TemplateTypePicker'; import { catalogEntityCreatePermission } from '@backstage/plugin-catalog-common'; import { usePermission } from '@backstage/plugin-permission-react'; -const useStyles = makeStyles(theme => ({ - contentWrapper: { - display: 'grid', - gridTemplateAreas: "'filters' 'grid'", - gridTemplateColumns: '250px 1fr', - gridColumnGap: theme.spacing(2), - }, -})); - export type ScaffolderPageProps = { TemplateCardComponent?: | ComponentType<{ template: TemplateEntityV1beta3 }> @@ -65,7 +56,6 @@ export const ScaffolderPageContents = ({ TemplateCardComponent, groups, }: ScaffolderPageProps) => { - const styles = useStyles(); const registerComponentLink = useRouteRef(registerComponentRouteRef); const otherTemplatesGroup = { title: groups ? 'Other Templates' : 'Templates', @@ -99,8 +89,8 @@ export const ScaffolderPageContents = ({ -
-
+ +
-
+ + {groups && groups.map((group, index) => ( -
-
+ + ); diff --git a/plugins/techdocs/package.json b/plugins/techdocs/package.json index e02e4e1fa1..54e8aa4c28 100644 --- a/plugins/techdocs/package.json +++ b/plugins/techdocs/package.json @@ -42,7 +42,6 @@ "@backstage/errors": "^0.2.2", "@backstage/integration": "^0.8.0", "@backstage/integration-react": "^0.1.25", - "@backstage/plugin-catalog": "^0.10.0", "@backstage/plugin-catalog-react": "^0.9.0", "@backstage/plugin-search": "^0.7.3", "@backstage/theme": "^0.2.15", diff --git a/plugins/techdocs/src/home/components/DefaultTechDocsHome.tsx b/plugins/techdocs/src/home/components/DefaultTechDocsHome.tsx index 4dcff501ed..bdbb4877ac 100644 --- a/plugins/techdocs/src/home/components/DefaultTechDocsHome.tsx +++ b/plugins/techdocs/src/home/components/DefaultTechDocsHome.tsx @@ -23,11 +23,7 @@ import { TableProps, } from '@backstage/core-components'; import { - EntityListContainer, - FilterContainer, - FilteredEntityLayout, -} from '@backstage/plugin-catalog'; -import { + CatalogFilterLayout, EntityListProvider, EntityOwnerPicker, EntityTagPicker, @@ -65,17 +61,17 @@ export const DefaultTechDocsHome = (props: DefaultTechDocsHomeProps) => { - - + + - - + + - - + +