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

Create OwnershipCard story

Browse Source 
Signed-off-by: Elliot Greenwood <hello@elliotgreenwood.co.uk>
This commit is contained in:
Elliot Greenwood
2021-02-14 00:38:25 +00:00
parent 2773050795
commit fdf9160a8c
8 changed files with 238 additions and 170 deletions
Download Patch File Download Diff File Expand all files Collapse all files
plugins/org/package.json
+2 -1
View File
@@ -22,6 +22,7 @@
"dependencies": {
"@backstage/catalog-model": "^0.7.1",
"@backstage/core": "^0.6.1",
"@backstage/core-api": "^0.2.9",
"@backstage/plugin-catalog-react": "^0.0.3",
"@backstage/theme": "^0.2.3",
"@material-ui/core": "^4.11.0",
@@ -29,7 +30,7 @@
"@material-ui/lab": "4.0.0-alpha.45",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-router": "^5.2.0",
"react-router": "6.0.0-beta.0",
"react-router-dom": "6.0.0-beta.0",
"react-use": "^15.3.3"
},
plugins/org/src/components/Cards/Group/GroupProfile/GroupProfileCard.stories.tsx
+2 -2
View File
@@ -34,7 +34,7 @@ const dummyDepartment = {
},
};
const defaultEntity: UserEntity = {
const defaultEntity: GroupEntity = {
kind: 'Group',
metadata: {
name: 'team-a',
@@ -55,7 +55,7 @@ export const Default = () => (
<MemoryRouter>
<EntityContext.Provider value={{ entity: defaultEntity, loading: false }}>
<Grid container spacing={4}>
<Grid item xs={12} md={3}>
<Grid item xs={12} md={4}>
<GroupProfileCard />
</Grid>
</Grid>
plugins/org/src/components/Cards/Group/MembersList/MembersListCard.stories.tsx
+106
View File
@@ -0,0 +1,106 @@
/*
* Copyright 2021 Spotify AB
*
* 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';
import { MemoryRouter } from 'react-router';
import { GroupEntity, UserEntity } from '@backstage/catalog-model';
import {
EntityContext,
CatalogApi,
catalogApiRef,
} from '@backstage/plugin-catalog-react';
import { ApiProvider, ApiRegistry } from '@backstage/core-api';
import { MembersListCard } from '.';
export default {
title: 'Plugins/Org/Group Members List Card',
component: MembersListCard,
};
const makeUser = ({ name, uid, displayName, email }) => ({
kind: 'User',
metadata: {
name,
uid,
},
spec: {
profile: {
displayName,
email,
picture: `https://avatars.dicebear.com/api/avataaars/${email}.svg?background=%23fff`,
},
},
relations: [
{
type: 'memberOf',
target: {
namespace: 'default',
kind: 'group',
name: 'team-a',
},
},
],
});
const defaultEntity: GroupEntity = {
kind: 'Group',
metadata: {
name: 'team-a',
description: 'Team A',
},
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',
},
},
};
const alice = makeUser({
name: 'alice',
uid: '123',
displayName: 'Alice Doe',
email: 'alice@example.com',
});
const bob = makeUser({
name: 'bob',
uid: '456',
displayName: 'Bob Jones',
email: 'bob@example.com',
});
const catalogApi: Partial<CatalogApi> = {
getEntities: () => Promise.resolve({ items: [alice, bob] }),
};
const apiRegistry = ApiRegistry.from([[catalogApiRef, catalogApi]]);
export const Default = () => (
<MemoryRouter>
<ApiProvider apis={apiRegistry}>
<EntityContext.Provider value={{ entity: defaultEntity, loading: false }}>
<Grid container spacing={4}>
<Grid item xs={12} md={6}>
<MembersListCard />
</Grid>
</Grid>
</EntityContext.Provider>
</ApiProvider>
</MemoryRouter>
);
plugins/org/src/components/Cards/Group/MembersList/MembersListCard.tsx
+2 -2
View File
@@ -47,7 +47,7 @@ const useStyles = makeStyles((theme: Theme) =>
borderRadius: '4px',
overflow: 'visible',
position: 'relative',
margin: theme.spacing(3, 0, 1),
margin: theme.spacing(4, 1, 1),
flex: '1',
minWidth: '0px',
},
@@ -69,7 +69,7 @@ const MemberComponent = ({
const displayName = profile?.displayName ?? metaName;
return (
<Grid item container xs={12} sm={6} md={3} xl={2}>
<Grid item container xs={12} sm={6} md={4} xl={2}>
<Box className={classes.card}>
<Box
display="flex"
plugins/org/src/components/Cards/OwnershipCard/OwnershipCard.stories.tsx
+92
View File
@@ -0,0 +1,92 @@
/*
* Copyright 2021 Spotify AB
*
* 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';
import { MemoryRouter } from 'react-router';
import { GroupEntity, UserEntity } from '@backstage/catalog-model';
import {
EntityContext,
CatalogApi,
catalogApiRef,
} from '@backstage/plugin-catalog-react';
import { ApiProvider, ApiRegistry } from '@backstage/core-api';
import { OwnershipCard } from '.';
export default {
title: 'Plugins/Org/Ownership Card',
component: OwnershipCard,
};
const defaultEntity: GroupEntity = {
kind: 'Group',
metadata: {
name: 'team-a',
description: 'Team A',
},
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',
},
},
};
const makeComponent = ({ type, name }: { type: string; name: string }) => ({
kind: 'Component',
metadata: {
name,
},
spec: {
type,
},
relations: [
{
type: 'ownedBy',
target: {
namespace: 'default',
kind: 'Group',
name: 'team-a',
},
},
],
});
const serviceA = makeComponent({ type: 'service', name: 'service-a' });
const serviceB = makeComponent({ type: 'service', name: 'service-a' });
const websiteA = makeComponent({ type: 'website', name: 'website-a' });
const catalogApi: Partial<CatalogApi> = {
getEntities: () => Promise.resolve({ items: [serviceA, serviceB, websiteA] }),
};
const apiRegistry = ApiRegistry.from([[catalogApiRef, catalogApi]]);
export const Default = () => (
<MemoryRouter>
<ApiProvider apis={apiRegistry}>
<EntityContext.Provider value={{ entity: defaultEntity, loading: false }}>
<Grid container spacing={4}>
<Grid item xs={12} md={6}>
<OwnershipCard />
</Grid>
</Grid>
</EntityContext.Provider>
</ApiProvider>
</MemoryRouter>
);
plugins/org/src/components/Cards/User/UserProfileCard/UserProfileCard.stories.tsx
+3 -3
View File
@@ -35,7 +35,7 @@ const dummyGroup = {
};
const defaultEntity: UserEntity = {
kind: 'user',
kind: 'User',
metadata: {
name: 'guest',
},
@@ -54,7 +54,7 @@ export const Default = () => (
<MemoryRouter>
<EntityContext.Provider value={{ entity: defaultEntity, loading: false }}>
<Grid container spacing={4}>
<Grid item xs={12} md={3}>
<Grid item xs={12} md={4}>
<UserProfileCard />
</Grid>
</Grid>
@@ -80,7 +80,7 @@ export const NoImage = () => (
<MemoryRouter>
<EntityContext.Provider value={{ entity: noImageEntity, loading: false }}>
<Grid container spacing={4}>
<Grid item xs={12} md={3}>
<Grid item xs={12} md={4}>
<UserProfileCard />
</Grid>
</Grid>
plugins/org/src/components/Cards/User/UserProfileCard/UserProfileCard.tsx
+2 -2
View File
@@ -95,11 +95,11 @@ export const UserProfileCard = ({
return (
<InfoCard title={<CardTitle title={displayName} />} variant={variant}>
<Grid container spacing={3} alignItems="flex-start">
<Grid item md={2} lg={1}>
<Grid item xs={12} sm={2} xl={1}>
<Avatar displayName={displayName} picture={profile?.picture} />
</Grid>
<Grid item md={10} lg={11}>
<Grid item md={10} xl={11}>
<List>
{profile?.email && (
<ListItem>