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

Merge pull request #14129 from jrwpatterson/master

Browse Source 
Extend the UserProfileCard and GroupProfileCard to allow for adding links
This commit is contained in:
Patrik Oldsberg
2022-11-02 17:18:21 +01:00
committed by GitHub
parent 6af31f5310 a71c4545b1
commit 2b3d3a9fee
9 changed files with 352 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.changeset/popular-ants-mix.md
+5
View File
@@ -0,0 +1,5 @@
---
'@backstage/plugin-org': minor
---
Updates the User and Group Profile cards to add the links from the UserEntity or the GroupEntity
docs/features/software-catalog/external-integrations.md
+123
View File
@@ -261,6 +261,129 @@ the `connect` call has been made to the provider.
Start up the backend - it should now start reading from the previously
registered location and you'll see your entities start to appear in Backstage.
### Example User Entity Provider
If you have a 3rd party entity provider such as an internal HR system that you wish to use you are not limited to using our entity providers, (or simply wish to add to existing entity providers with your own data).
We can create an entity provider to read entities that are based off that provider.
We create a basic entity provider as shown above. In the example below we might want to extract our users from an HR system, I am assuming the HR system already has the slackUserId to get that information please see the [Slack Api](https://api.slack.com/methods).
```typescript
import {
ANNOTATION_LOCATION,
ANNOTATION_ORIGIN_LOCATION,
} from '@backstage/catalog-model'
import {
EntityProvider,
EntityProviderConnection,
} from '@backstage/plugin-catalog-backend'
import { WebClient } from '@slack/web-api'
import {kebabCase} from 'lodash'
interface Staff {
displayName: string
slackUserId: string
jobTitle: string
photoUrl: string
address: string
email:string
}
export class UserEntityProvider implements EntityProvider {
private readonly getStaffUrl: string
protected readonly slackTeam: string
protected readonly slackToken: string
protected connection?: EntityProviderConnection
static fromConfig(config: Config, options: { logger: Logger }) {
const getStaffUrl = config.getString('staff.url')
const slackToken = config.getString('slack.token')
const slackTeam = config.getString('slack.team')
return new UserEntityProvider({
...options,
getStaffUrl,
slackToken,
slackTeam,
})
}
private constructor(options: {
getStaffUrl: string
slackToken: string
slackTeam: string
}) {
this.getStaffUrl = options.getStaffUrl
this.slackToken = options.slackToken
this.slackTeam = options.slackTeam
}
async getAllStaff(): Promise<Staff[]>{
await return axios.get(this.getStaffUrl)
}
public async connect(connection: EntityProviderConnection): Promise<void> {
this.connection = connection
}
async run(): Promise<void> {
if (!this.connection) {
throw new Error('User Connection Not initialized')
}
const userResources: UserEntity[] = []
const staff = await this.getAllStaff()
for (const user of staff) {
// we can add any links here in this case it would be adding a slack link to the users so you can directly slack them.
const links =
user.slackUserId != null && user.slackUserId.length > 0
? [
{
url: `slack://user?team=${this.slackTeam}&id=${user.slackUserId}`,
title: 'Slack',
icon: 'message',
},
]
: undefined
const userEntity: UserEntity = {
kind: 'User',
apiVersion: 'backstage.io/v1alpha1',
metadata: {
annotations: {
[ANNOTATION_LOCATION]: 'hr-user-https://www.hrurl.com/',
[ANNOTATION_ORIGIN_LOCATION]: 'hr-user-https://www.hrurl.com/',
},
links,
// name of the entity
name: kebabCase(user.displayName),
// name for display purposes could be anything including email
title: user.displayName,
},
spec: {
profile: {
displayName: user.displayName,
email: user.email,
picture: user.photoUrl,
},
memberOf: [],
},
}
userResources.push(userEntity)
}
await this.connection.applyMutation({
type: 'full',
entities: userResources.map((entity) => ({
entity,
locationKey: 'hr-user-https://www.hrurl.com/',
})),
})
}
```
## Custom Processors
The other possible way of ingesting data into the catalog is through the use of
plugins/org/src/components/Cards/Group/GroupProfile/GroupProfileCard.stories.tsx
+41
View File
@@ -87,3 +87,44 @@ export default {
),
],
};
const extraDetailsEntity: GroupEntity = {
apiVersion: 'backstage.io/v1alpha1',
kind: 'Group',
metadata: {
name: 'team-a',
description: 'Team A',
links: [
{
url: 'slack://user?team=T00000000&id=U00000000',
title: 'Slack',
icon: 'chat',
},
{
url: 'https://www.google.com',
title: 'Google',
},
],
},
spec: {
profile: {
displayName: 'Team A',
email: 'team-a@example.com',
picture:
'https://avatars.dicebear.com/api/identicon/team-a@example.com.svg?background=%23fff&margin=25',
},
type: 'group',
children: [],
},
relations: [dummyDepartment],
};
export const ExtraDetails = () => (
<EntityProvider entity={extraDetailsEntity}>
<Grid container spacing={4}>
<Grid item xs={12} md={4}>
<GroupProfileCard variant="gridItem" />
</Grid>
</Grid>
</EntityProvider>
);
plugins/org/src/components/Cards/Group/GroupProfile/GroupProfileCard.tsx
+3 -1
View File
@@ -52,6 +52,7 @@ import {
Link,
} from '@backstage/core-components';
import { alertApiRef, useApi } from '@backstage/core-plugin-api';
import { LinksGroup } from '../../Meta';
const CardTitle = (props: { title: string }) => (
<Box display="flex" alignItems="center">
@@ -76,7 +77,7 @@ export const GroupProfileCard = (props: { variant?: InfoCardVariants }) => {
}
const {
metadata: { name, description, annotations },
metadata: { name, description, annotations, links },
spec: { profile },
} = group;
@@ -190,6 +191,7 @@ export const GroupProfileCard = (props: { variant?: InfoCardVariants }) => {
secondary="Child Groups"
/>
</ListItem>
<LinksGroup links={links} />
</List>
</Grid>
</Grid>
plugins/org/src/components/Cards/Meta/LinksGroup.tsx
+66
View File
@@ -0,0 +1,66 @@
/*
* Copyright 2022 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 { EntityLink } from '@backstage/catalog-model';
import { IconComponent, useApp } from '@backstage/core-plugin-api';
import LanguageIcon from '@material-ui/icons/Language';
import {
ListItem,
ListItemIcon,
ListItemText,
Divider,
} from '@material-ui/core';
import React from 'react';
const WebLink = ({
href,
Icon,
text,
}: {
href: string;
text?: string;
Icon?: IconComponent;
}) => (
<ListItem button component="a" key={href} href={href}>
<ListItemIcon>{Icon ? <Icon /> : <LanguageIcon />}</ListItemIcon>
<ListItemText>{text}</ListItemText>
</ListItem>
);
export const LinksGroup = ({ links }: { links?: EntityLink[] }) => {
const app = useApp();
const iconResolver = (key?: string): IconComponent =>
key ? app.getSystemIcon(key) ?? LanguageIcon : LanguageIcon;
if (links === undefined) {
return null;
}
return (
<>
<Divider />
{links.map(link => {
return (
<WebLink
key={link.url}
href={link.url}
text={link.title}
Icon={iconResolver(link.icon)}
/>
);
})}
</>
);
};
plugins/org/src/components/Cards/Meta/index.ts
+16
View File
@@ -0,0 +1,16 @@
/*
* Copyright 2022 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 * from './LinksGroup';
plugins/org/src/components/Cards/User/UserProfileCard/UserProfileCard.stories.tsx
+40
View File
@@ -102,3 +102,43 @@ export default {
}),
],
};
const extraDetailsEntity: UserEntity = {
apiVersion: 'backstage.io/v1alpha1',
kind: 'User',
metadata: {
name: 'guest',
description: 'Description for guest',
links: [
{
url: 'slack://user?team=T00000000&id=U00000000',
title: 'Slack',
icon: 'chat',
},
{
url: 'https://www.google.com',
title: 'Google',
},
],
},
spec: {
profile: {
displayName: 'Guest User',
email: 'guest@example.com',
picture:
'https://avatars.dicebear.com/api/avataaars/guest@example.com.svg?background=%23fff',
},
memberOf: ['team-a'],
},
relations: [dummyGroup],
};
export const ExtraDetails = () => (
<EntityProvider entity={extraDetailsEntity}>
<Grid container spacing={4}>
<Grid item xs={12} md={4}>
<UserProfileCard variant="gridItem" />
</Grid>
</Grid>
</EntityProvider>
);
plugins/org/src/components/Cards/User/UserProfileCard/UserProfileCard.test.tsx
+54
View File
@@ -155,4 +155,58 @@ describe('Edit Button', () => {
);
expect(rendered.getByRole('button')).toBeInTheDocument();
});
it('Should show the extra fields if either links or extra profile are filled', async () => {
const annotations: Record<string, string> = {
'backstage.io/edit-url': 'https://example.com/user.yaml',
};
const userEntity: UserEntity = {
apiVersion: 'backstage.io/v1alpha1',
kind: 'User',
metadata: {
name: 'calum.leavy',
description: 'Super awesome human',
annotations,
links: [
{
url: 'slack://user?team=T00000000&id=U00000000',
title: 'Slack',
icon: 'message',
},
{
url: 'https://www.google.com',
title: 'Google',
},
],
},
spec: {
profile: {
displayName: 'Calum Leavy',
email: 'calum-leavy@example.com',
},
memberOf: ['ExampleGroup'],
},
relations: [
{
type: 'memberOf',
targetRef: 'group:default/examplegroup',
},
],
};
const rendered = await renderWithEffects(
wrapInTestApp(
<EntityProvider entity={userEntity}>
<UserProfileCard variant="gridItem" />
</EntityProvider>,
{
mountedRoutes: {
'/catalog/:namespace/:kind/:name': entityRouteRef,
},
},
),
);
expect(rendered.getByText('Slack')).toBeInTheDocument();
expect(rendered.getByText('Google')).toBeInTheDocument();
});
});
plugins/org/src/components/Cards/User/UserProfileCard/UserProfileCard.tsx
+4 -1
View File
@@ -46,6 +46,7 @@ import {
InfoCardVariants,
Link,
} from '@backstage/core-components';
import { LinksGroup } from '../../Meta';
const CardTitle = (props: { title?: string }) =>
props.title ? (
@@ -66,7 +67,7 @@ export const UserProfileCard = (props: { variant?: InfoCardVariants }) => {
user.metadata.annotations?.[ANNOTATION_EDIT_URL];
const {
metadata: { name: metaName, description },
metadata: { name: metaName, description, links },
spec: { profile },
} = user;
const displayName = profile?.displayName ?? metaName;
@@ -128,6 +129,8 @@ export const UserProfileCard = (props: { variant?: InfoCardVariants }) => {
/>
</ListItemText>
</ListItem>
<LinksGroup links={links} />
</List>
</Grid>
</Grid>