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

updating the pr on the feedback to add docs, remove some items not needed including the preview html

Browse Source 
Signed-off-by: Joe Patterson <jrwpatterson@gmail.com>
This commit is contained in:
Joe Patterson
2022-10-17 11:02:15 +10:00
parent bc825a7a7b
commit d7b0a11768
13 changed files with 302 additions and 117 deletions
Download Patch File Download Diff File Expand all files Collapse all files
plugins/org/src/components/Cards/Group/GroupProfile/GroupProfileCard.stories.tsx
+1 -1
View File
@@ -98,7 +98,7 @@ const extraDetailsEntity: GroupEntity = {
{
url: 'slack://user?team=T00000000&id=U00000000',
title: 'Slack',
icon: 'message',
icon: 'chat',
},
{
url: 'https://www.google.com',
plugins/org/src/components/Cards/Group/GroupProfile/GroupProfileCard.tsx
+3 -46
View File
@@ -37,13 +37,10 @@ import {
ListItemText,
Tooltip,
IconButton,
Divider,
} from '@material-ui/core';
import Icon from '@material-ui/core/Icon';
import AccountTreeIcon from '@material-ui/icons/AccountTree';
import EmailIcon from '@material-ui/icons/Email';
import GroupIcon from '@material-ui/icons/Group';
import LinkIcon from '@material-ui/icons/Link';
import EditIcon from '@material-ui/icons/Edit';
import CachedIcon from '@material-ui/icons/Cached';
import Alert from '@material-ui/lab/Alert';
@@ -55,8 +52,7 @@ import {
Link,
} from '@backstage/core-components';
import { alertApiRef, useApi } from '@backstage/core-plugin-api';
const staticProfileKeys = ['displayName', 'email', 'picture'];
import { LinksGroup, ProfileInfoGroup } from '../../Meta';
const CardTitle = (props: { title: string }) => (
<Box display="flex" alignItems="center">
@@ -99,11 +95,6 @@ export const GroupProfileCard = (props: { variant?: InfoCardVariants }) => {
const entityMetadataEditUrl =
group.metadata.annotations?.[ANNOTATION_EDIT_URL];
const profileKeys =
profile !== undefined
? Object.keys(profile).filter(key => !staticProfileKeys.includes(key))
: [];
const displayName = profile?.displayName ?? name;
const emailHref = profile?.email ? `mailto:${profile.email}` : '#';
const infoCardAction = entityMetadataEditUrl ? (
@@ -200,42 +191,8 @@ export const GroupProfileCard = (props: { variant?: InfoCardVariants }) => {
secondary="Child Groups"
/>
</ListItem>
{links !== undefined && <Divider />}
{links !== undefined &&
links.map(link => {
return (
<ListItem button component="a" key={link.url} href={link.url}>
{link.icon ? (
<ListItemIcon>
<Tooltip title={link.icon}>
<Icon>{link.icon}</Icon>
</Tooltip>
</ListItemIcon>
) : (
<ListItemIcon>
<LinkIcon />
</ListItemIcon>
)}
<ListItemText>{link.title}</ListItemText>
</ListItem>
);
})}
{profile !== undefined && profileKeys.length > 0 && <Divider />}
{profile !== undefined &&
profileKeys.length > 0 &&
profileKeys.map(key => {
const value = profile[key];
return (
<ListItem key={key}>
<ListItemText style={{ width: '25%', flexGrow: 0 }}>
{key}
</ListItemText>
<ListItemText>{value}</ListItemText>
</ListItem>
);
})}
<LinksGroup links={links} />
<ProfileInfoGroup profile={profile} />
</List>
</Grid>
</Grid>
plugins/org/src/components/Cards/Meta/LinksGroup.tsx
+69
View File
@@ -0,0 +1,69 @@
/*
* 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, { useCallback } 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 = useCallback(
(key?: string): IconComponent =>
key ? app.getSystemIcon(key) ?? LanguageIcon : LanguageIcon,
[app],
);
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/ProfileInfoGroup.tsx
+56
View File
@@ -0,0 +1,56 @@
/*
* 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 { ListItem, ListItemText, Divider } from '@material-ui/core';
import React, { useMemo } from 'react';
const staticProfileKeys = ['displayName', 'email', 'picture'];
export const ProfileInfoGroup = ({
profile,
}: {
profile?: Record<string, string>;
}) => {
const profileKeys = useMemo(
() =>
profile !== undefined
? Object.keys(profile).filter(key => !staticProfileKeys.includes(key))
: [],
[profile],
);
if (profile === undefined || profileKeys.length === 0) {
return null;
}
return (
<>
<Divider />
{profileKeys.map(key => {
const value = profile[key];
return (
<ListItem key={key}>
<ListItemText style={{ width: '25%', flexGrow: 0 }}>
{key}
</ListItemText>
<ListItemText>{value}</ListItemText>
</ListItem>
);
})}
</>
);
};
plugins/org/src/components/Cards/Meta/index.ts
+17
View File
@@ -0,0 +1,17 @@
/*
* 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';
export * from './ProfileInfoGroup';
plugins/org/src/components/Cards/User/UserProfileCard/UserProfileCard.stories.tsx
+1 -1
View File
@@ -113,7 +113,7 @@ const extraDetailsEntity: UserEntity = {
{
url: 'slack://user?team=T00000000&id=U00000000',
title: 'Slack',
icon: 'message',
icon: 'chat',
},
{
url: 'https://www.google.com',
plugins/org/src/components/Cards/User/UserProfileCard/UserProfileCard.tsx
+3 -47
View File
@@ -33,15 +33,12 @@ import {
ListItemIcon,
ListItemText,
Tooltip,
Divider,
} from '@material-ui/core';
import EditIcon from '@material-ui/icons/Edit';
import EmailIcon from '@material-ui/icons/Email';
import GroupIcon from '@material-ui/icons/Group';
import PersonIcon from '@material-ui/icons/Person';
import LinkIcon from '@material-ui/icons/Link';
import Alert from '@material-ui/lab/Alert';
import Icon from '@material-ui/core/Icon';
import React from 'react';
import {
Avatar,
@@ -49,8 +46,7 @@ import {
InfoCardVariants,
Link,
} from '@backstage/core-components';
const staticProfileKeys = ['displayName', 'email', 'picture'];
import { LinksGroup, ProfileInfoGroup } from '../../Meta';
const CardTitle = (props: { title?: string }) =>
props.title ? (
@@ -80,11 +76,6 @@ export const UserProfileCard = (props: { variant?: InfoCardVariants }) => {
kind: 'Group',
});
const profileKeys =
profile !== undefined
? Object.keys(profile).filter(key => !staticProfileKeys.includes(key))
: [];
return (
<InfoCard
title={<CardTitle title={displayName} />}
@@ -139,43 +130,8 @@ export const UserProfileCard = (props: { variant?: InfoCardVariants }) => {
</ListItemText>
</ListItem>
{links !== undefined && <Divider />}
{links !== undefined &&
links.map(link => {
return (
<ListItem button component="a" key={link.url} href={link.url}>
{link.icon ? (
<ListItemIcon>
<Tooltip title={link.icon}>
<Icon>{link.icon}</Icon>
</Tooltip>
</ListItemIcon>
) : (
<ListItemIcon>
<LinkIcon />
</ListItemIcon>
)}
<ListItemText>{link.title}</ListItemText>
</ListItem>
);
})}
{profile !== undefined && profileKeys.length > 0 && <Divider />}
{profile !== undefined &&
profileKeys.length > 0 &&
profileKeys.map(key => {
const value = profile[key];
return (
<ListItem key={key}>
<ListItemText style={{ width: '100px', flexGrow: 0 }}>
{key}
</ListItemText>
<ListItemText>{value}</ListItemText>
</ListItem>
);
})}
<LinksGroup links={links} />
<ProfileInfoGroup profile={profile} />
</List>
</Grid>
</Grid>