paulononato/backstage
1
0
Fork 0
Code Issues Pull Requests Actions 47 Packages Projects Releases Wiki Activity

Merge branch 'backstage:master' into fcorti-blog-001

Browse Source
This commit is contained in:
Francesco Corti
2022-03-16 15:45:41 +01:00
committed by GitHub
parent 2bc854cb39 c484c4825f
commit 7f6e812d15
29 changed files with 499 additions and 170 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.changeset/healthy-lions-sin.md
+5
View File
@@ -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.
.changeset/lucky-scissors-play.md
+9
View File
@@ -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`
.changeset/nasty-chefs-dream.md
+16
View File
@@ -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
<CatalogFilterLayout>
<CatalogFilterLayout.Filters>
{/* filter drawer, for example <EntityTypePicker /> and friends */}
</CatalogFilterLayout.Filters>
<CatalogFilterLayout.Content>
{/* content view, for example a <CatalogTable /> */}
</CatalogFilterLayout.Content>
</CatalogFilterLayout>
```
.changeset/nice-seals-decide.md
+6
View File
@@ -0,0 +1,6 @@
---
'@backstage/plugin-api-docs': patch
'@backstage/plugin-techdocs': patch
---
Switched to using `CatalogFilterLayout` from `@backstage/plugin-catalog-react`.
.changeset/wild-sheep-mate.md
+7
View File
@@ -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
.github/styles/vocab.txt
+3
View File
@@ -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
docs/features/software-catalog/catalog-customization.md
+12 -12
View File
@@ -41,16 +41,16 @@ export const CustomCatalogPage = ({
<CreateButton title="Create Component" to={createComponentLink()} />
<SupportButton>All your software catalog entities</SupportButton>
</ContentHeader>
<FilteredEntityLayout>
<FilterContainer>
<CatalogFilterLayout>
<CatalogFilterLayout.Filters>
<EntityTypePicker />
<UserListPicker initialFilter={initiallySelectedFilter} />
<EntityTagPicker />
</FilterContainer>
<EntityListContainer>
</CatalogFilterLayout.Filters>
<CatalogFilterLayout.Content>
<CatalogTable columns={columns} actions={actions} />
</EntityListContainer>
</FilteredEntityLayout>
</CatalogFilterLayout.Content>
</CatalogFilterLayout>
</Content>
</EntityListProvider>
</PageWithHeader>
@@ -151,18 +151,18 @@ export const CustomCatalogPage = ({
return (
...
<EntityListProvider>
<FilteredEntityLayout>
<FilterContainer>
<CatalogFilterLayout>
<CatalogFilterLayout.Filters>
<EntityKindPicker initialFilter="component" hidden />
<EntityTypePicker />
<UserListPicker initialFilter={initiallySelectedFilter} />
+ <EntitySecurityTierPicker />
<EntityTagPicker />
<FilterContainer>
<EntityListContainer>
<CatalogFilterLayout.Filters>
<CatalogFilterLayout.Content>
<CatalogTable columns={columns} actions={actions} />
</EntityListContainer>
</FilteredEntityLayout>
</CatalogFilterLayout.Content>
</CatalogFilterLayout>
</EntityListProvider>
...
};
microsite/blog/2022-03-16-backstage-turns-two.md
+68
View File
@@ -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.
<!--truncate-->
## 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.
<iframe width="780" height="440" src="https://www.youtube.com/embed/-j-waaybcH0" frameBorder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowFullScreen></iframe>
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)!
microsite/blog/assets/22-03-16/backstage-2nd-birthday.gif
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.6 MiB

plugins/api-docs/src/components/ApiExplorerPage/DefaultApiExplorerPage.tsx
+8 -13
View File
@@ -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 = ({
<SupportButton>All your APIs</SupportButton>
</ContentHeader>
<EntityListProvider>
<FilteredEntityLayout>
<FilterContainer>
<CatalogFilterLayout>
<CatalogFilterLayout.Filters>
<EntityKindPicker initialFilter="api" hidden />
<EntityTypePicker />
<UserListPicker initialFilter={initiallySelectedFilter} />
<EntityOwnerPicker />
<EntityLifecyclePicker />
<EntityTagPicker />
</FilterContainer>
<EntityListContainer>
</CatalogFilterLayout.Filters>
<CatalogFilterLayout.Content>
<CatalogTable
columns={columns || defaultColumns}
actions={actions}
/>
</EntityListContainer>
</FilteredEntityLayout>
</CatalogFilterLayout.Content>
</CatalogFilterLayout>
</EntityListProvider>
</Content>
</PageWithHeader>
plugins/catalog-backend-module-github/config.d.ts
Vendored
+49
View File
@@ -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;
}>;
};
};
};
}
plugins/catalog-backend-module-github/package.json
+4 -2
View File
@@ -52,6 +52,8 @@
"@types/lodash": "^4.14.151"
},
"files": [
"dist"
]
"dist",
"config.d.ts"
],
"configSchema": "config.d.ts"
}
plugins/catalog-backend-module-ldap/api-report.md
+1 -1
View File
@@ -134,7 +134,7 @@ export class LdapOrgReaderProcessor implements CatalogProcessor {
});
// (undocumented)
static fromConfig(
config: Config,
configRoot: Config,
options: {
logger: Logger;
groupTransformer?: GroupTransformer;
plugins/catalog-backend-module-ldap/config.d.ts
Vendored
+215
View File
@@ -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?: {
/**
plugins/catalog-backend-module-ldap/src/processors/LdapOrgEntityProvider.ts
+2 -8
View File
@@ -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".`,
);
}
plugins/catalog-backend-module-ldap/src/processors/LdapOrgReaderProcessor.ts
+7 -4
View File
@@ -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".`,
);
}
plugins/catalog-backend/config.d.ts
Vendored
-33
View File
@@ -105,38 +105,5 @@ export interface Config {
allow: Array<string>;
}>;
}>;
/**
* 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;
}>;
};
};
};
}
plugins/catalog-react/api-report.md
+7
View File
@@ -63,6 +63,13 @@ export { CatalogApi };
// @public
export const catalogApiRef: ApiRef<CatalogApi>;
// @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;
plugins/catalog-react/package.json
+1
View File
@@ -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",
plugins/catalog/src/components/FilteredEntityLayout/FilterContainer.tsx → plugins/catalog-react/src/components/CatalogFilterLayout/CatalogFilterLayout.tsx
+25 -4
View File
@@ -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<BackstageTheme>(theme =>
theme.breakpoints.down('md'),
);
@@ -69,4 +69,25 @@ export function FilterContainer(props: { children: React.ReactNode }) {
{props.children}
</Grid>
);
}
};
/** @public */
export const Content = (props: { children: React.ReactNode }) => {
return (
<Grid item xs={12} lg={10}>
{props.children}
</Grid>
);
};
/** @public */
export const CatalogFilterLayout = (props: { children: React.ReactNode }) => {
return (
<Grid container style={{ position: 'relative' }}>
{props.children}
</Grid>
);
};
CatalogFilterLayout.Filters = Filters;
CatalogFilterLayout.Content = Content;
plugins/catalog/src/components/FilteredEntityLayout/EntityListContainer.tsx → plugins/catalog-react/src/components/CatalogFilterLayout/index.ts
+1 -11
View File
@@ -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 (
<Grid item xs={12} lg={10}>
{props.children}
</Grid>
);
}
export { CatalogFilterLayout } from './CatalogFilterLayout';
plugins/catalog-react/src/components/index.ts
+1
View File
@@ -14,6 +14,7 @@
* limitations under the License.
*/
export * from './CatalogFilterLayout';
export * from './EntityKindPicker';
export * from './EntityLifecyclePicker';
export * from './EntityOwnerPicker';
plugins/catalog/api-report.md
+10 -12
View File
@@ -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(
plugins/catalog/src/components/CatalogPage/DefaultCatalogPage.tsx
+7 -11
View File
@@ -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) {
/>
<SupportButton>All your software catalog entities</SupportButton>
</ContentHeader>
<FilteredEntityLayout>
<FilterContainer>
<CatalogFilterLayout>
<CatalogFilterLayout.Filters>
<EntityTypePicker />
<UserListPicker initialFilter={initiallySelectedFilter} />
<EntityOwnerPicker />
<EntityLifecyclePicker />
<EntityTagPicker />
</FilterContainer>
<EntityListContainer>
</CatalogFilterLayout.Filters>
<CatalogFilterLayout.Content>
<CatalogTable columns={columns} actions={actions} />
</EntityListContainer>
</FilteredEntityLayout>
</CatalogFilterLayout.Content>
</CatalogFilterLayout>
</Content>
</EntityListProvider>
</PageWithHeader>
plugins/catalog/src/components/FilteredEntityLayout/FilteredEntityLayout.tsx
-27
View File
@@ -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 (
<Grid container style={{ position: 'relative' }}>
{props.children}
</Grid>
);
}
plugins/catalog/src/components/FilteredEntityLayout/index.ts
+21 -3
View File
@@ -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;
plugins/scaffolder/src/components/ScaffolderPage/ScaffolderPage.tsx
+7 -17
View File
@@ -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 = ({
</SupportButton>
</ContentHeader>
<div className={styles.contentWrapper}>
<div>
<CatalogFilterLayout>
<CatalogFilterLayout.Filters>
<EntitySearchBar />
<EntityKindPicker initialFilter="template" hidden />
<UserListPicker
@@ -109,8 +99,8 @@ export const ScaffolderPageContents = ({
/>
<TemplateTypePicker />
<EntityTagPicker />
</div>
<div>
</CatalogFilterLayout.Filters>
<CatalogFilterLayout.Content>
{groups &&
groups.map((group, index) => (
<TemplateList
@@ -124,8 +114,8 @@ export const ScaffolderPageContents = ({
TemplateCardComponent={TemplateCardComponent}
group={otherTemplatesGroup}
/>
</div>
</div>
</CatalogFilterLayout.Content>
</CatalogFilterLayout>
</Content>
</Page>
);
plugins/techdocs/package.json
-1
View File
@@ -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",
plugins/techdocs/src/home/components/DefaultTechDocsHome.tsx
+7 -11
View File
@@ -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) => {
</SupportButton>
</ContentHeader>
<EntityListProvider>
<FilteredEntityLayout>
<FilterContainer>
<CatalogFilterLayout>
<CatalogFilterLayout.Filters>
<TechDocsPicker />
<UserListPicker initialFilter={initialFilter} />
<EntityOwnerPicker />
<EntityTagPicker />
</FilterContainer>
<EntityListContainer>
</CatalogFilterLayout.Filters>
<CatalogFilterLayout.Content>
<EntityListDocsTable actions={actions} columns={columns} />
</EntityListContainer>
</FilteredEntityLayout>
</CatalogFilterLayout.Content>
</CatalogFilterLayout>
</EntityListProvider>
</Content>
</TechDocsPageWrapper>