From 9d7af28e8725d13b04c318ae27ff6e505cf360e9 Mon Sep 17 00:00:00 2001 From: Samira Mokaram Date: Fri, 11 Dec 2020 17:10:39 +0100 Subject: [PATCH 01/14] add AboutCard and IconLinkVertical to core --- .../src/components/AboutCard/AboutCard.tsx | 72 ++++++++++++ .../components/AboutCard/IconLinkVertical.tsx | 104 ++++++++++++++++++ .../src/components/AboutCard/SubHeader.tsx | 44 ++++++++ .../core/src/components/AboutCard/index.ts | 18 +++ .../core/src/components/AboutCard/types.ts | 24 ++++ 5 files changed, 262 insertions(+) create mode 100644 packages/core/src/components/AboutCard/AboutCard.tsx create mode 100644 packages/core/src/components/AboutCard/IconLinkVertical.tsx create mode 100644 packages/core/src/components/AboutCard/SubHeader.tsx create mode 100644 packages/core/src/components/AboutCard/index.ts create mode 100644 packages/core/src/components/AboutCard/types.ts diff --git a/packages/core/src/components/AboutCard/AboutCard.tsx b/packages/core/src/components/AboutCard/AboutCard.tsx new file mode 100644 index 0000000000..e18894f3fb --- /dev/null +++ b/packages/core/src/components/AboutCard/AboutCard.tsx @@ -0,0 +1,72 @@ +/* + * Copyright 2020 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 React from 'react'; +import { + Card, + CardContent, + CardHeader, + Divider, + makeStyles, +} from '@material-ui/core'; +import { SubHeader } from './SubHeader'; +import { SubHeaderLink } from './types'; + +const useStyles = makeStyles({ + gridItemCard: { + display: 'flex', + flexDirection: 'column', + height: 'calc(100% - 10px)', // for pages without content header + marginBottom: '10px', + }, + gridItemCardContent: { + flex: 1, + }, +}); + +type Props = { + title: string; + headerClass?: string; + headerAction?: React.ReactNode; + links: SubHeaderLink[]; + contentClass?: string; + content: React.ReactNode; + variant?: string; +}; + +export const AboutCard = ({ + title, + headerAction, + links, + content, + variant, +}: Props) => { + const classes = useStyles(); + return ( + + } + /> + + + {content} + + + ); +}; diff --git a/packages/core/src/components/AboutCard/IconLinkVertical.tsx b/packages/core/src/components/AboutCard/IconLinkVertical.tsx new file mode 100644 index 0000000000..f935d2fa6e --- /dev/null +++ b/packages/core/src/components/AboutCard/IconLinkVertical.tsx @@ -0,0 +1,104 @@ +/* + * Copyright 2020 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 React from 'react'; +import classnames from 'classnames'; +import { makeStyles, Link } from '@material-ui/core'; +import LinkIcon from '@material-ui/icons/Link'; +import { Link as RouterLink } from 'react-router-dom'; + +type IconLinkVerticalProps = { + icon?: React.ReactNode; + href?: string; + disabled?: boolean; + title?: string; + label: string; + action?: React.ReactNode; +}; + +const useIconStyles = makeStyles(theme => ({ + link: { + display: 'grid', + justifyItems: 'center', + gridGap: 4, + textAlign: 'center', + }, + disabled: { + color: 'gray', + }, + label: { + fontSize: '0.7rem', + textTransform: 'uppercase', + fontWeight: 600, + letterSpacing: 1.2, + }, + linkStyle: { + color: theme.palette.secondary.main, + }, +})); + +export function IconLinkVertical({ + icon = , + href = '#', + disabled = false, + action, + ...props +}: IconLinkVerticalProps) { + const classes = useIconStyles(); + + if (disabled) { + return ( + + {icon} + {props.label} + + ); + } + + if (action) { + return ( + + {icon} + {action} + + ); + } + + // Absolute links should not be using RouterLink + if (href?.startsWith('//') || href?.includes('://')) { + return ( + + {icon} + {props.label} + + ); + } + + return ( + + {icon} + {props.label} + + ); +} diff --git a/packages/core/src/components/AboutCard/SubHeader.tsx b/packages/core/src/components/AboutCard/SubHeader.tsx new file mode 100644 index 0000000000..861821f89b --- /dev/null +++ b/packages/core/src/components/AboutCard/SubHeader.tsx @@ -0,0 +1,44 @@ +/* + * Copyright 2020 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 React from 'react'; +import { IconLinkVertical } from './IconLinkVertical'; +import { SubHeaderLink } from './types'; +import { makeStyles } from '@material-ui/core'; + +const useStyles = makeStyles(theme => ({ + links: { + margin: theme.spacing(2, 0), + display: 'grid', + gridAutoFlow: 'column', + gridAutoColumns: 'min-content', + gridGap: theme.spacing(3), + }, +})); + +type Props = { + links: SubHeaderLink[]; +}; + +export const SubHeader = ({ links }: Props) => { + const classes = useStyles(); + return ( + + ); +}; diff --git a/packages/core/src/components/AboutCard/index.ts b/packages/core/src/components/AboutCard/index.ts new file mode 100644 index 0000000000..0491d467f8 --- /dev/null +++ b/packages/core/src/components/AboutCard/index.ts @@ -0,0 +1,18 @@ +/* + * Copyright 2020 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. + */ + +export { AboutCard } from './AboutCard'; +export { IconLinkVertical } from './IconLinkVertical'; diff --git a/packages/core/src/components/AboutCard/types.ts b/packages/core/src/components/AboutCard/types.ts new file mode 100644 index 0000000000..e1c3948797 --- /dev/null +++ b/packages/core/src/components/AboutCard/types.ts @@ -0,0 +1,24 @@ +/* + * Copyright 2020 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. + */ +export type SubHeaderLink = { + icon?: React.ReactNode; + href?: string; + disabled?: boolean; + title?: string; + label: string; + action?: React.ReactNode; + edithref?: string; +}; From 97c3a71d568490a2610c49012b55f2164766cc3a Mon Sep 17 00:00:00 2001 From: Samira Mokaram Date: Fri, 11 Dec 2020 17:13:47 +0100 Subject: [PATCH 02/14] remove IconLinkVertical from catalog --- .../IconLinkVertical/IconLinkVertical.tsx | 86 ------------------- .../AboutCard/IconLinkVertical/index.ts | 17 ---- 2 files changed, 103 deletions(-) delete mode 100644 plugins/catalog/src/components/AboutCard/IconLinkVertical/IconLinkVertical.tsx delete mode 100644 plugins/catalog/src/components/AboutCard/IconLinkVertical/index.ts diff --git a/plugins/catalog/src/components/AboutCard/IconLinkVertical/IconLinkVertical.tsx b/plugins/catalog/src/components/AboutCard/IconLinkVertical/IconLinkVertical.tsx deleted file mode 100644 index dd267dde35..0000000000 --- a/plugins/catalog/src/components/AboutCard/IconLinkVertical/IconLinkVertical.tsx +++ /dev/null @@ -1,86 +0,0 @@ -/* - * Copyright 2020 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 * as React from 'react'; -import classnames from 'classnames'; -import { makeStyles, Link } from '@material-ui/core'; -import LinkIcon from '@material-ui/icons/Link'; -import { Link as RouterLink } from 'react-router-dom'; - -export type IconLinkVerticalProps = { - icon?: React.ReactNode; - href?: string; - disabled?: boolean; - title?: string; - label: string; -}; - -const useIconStyles = makeStyles({ - link: { - display: 'grid', - justifyItems: 'center', - gridGap: 4, - textAlign: 'center', - }, - disabled: { - color: 'gray', - }, - label: { - fontSize: '0.7rem', - textTransform: 'uppercase', - fontWeight: 600, - letterSpacing: 1.2, - }, -}); - -export function IconLinkVertical({ - icon = , - href = '#', - disabled = false, - ...props -}: IconLinkVerticalProps) { - const classes = useIconStyles(); - - if (disabled) { - return ( - - {icon} - {props.label} - - ); - } - - // Absolute links should not be using RouterLink - if (href?.startsWith('//') || href?.includes('://')) { - return ( - - {icon} - {props.label} - - ); - } - - return ( - - {icon} - {props.label} - - ); -} diff --git a/plugins/catalog/src/components/AboutCard/IconLinkVertical/index.ts b/plugins/catalog/src/components/AboutCard/IconLinkVertical/index.ts deleted file mode 100644 index ddc146dbd8..0000000000 --- a/plugins/catalog/src/components/AboutCard/IconLinkVertical/index.ts +++ /dev/null @@ -1,17 +0,0 @@ -/* - * Copyright 2020 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. - */ - -export { IconLinkVertical } from './IconLinkVertical'; From 4c8097894a958dac21424f7fb8799b73e85983d2 Mon Sep 17 00:00:00 2001 From: Samira Mokaram Date: Fri, 11 Dec 2020 17:18:23 +0100 Subject: [PATCH 03/14] remove AboutCard from pagerduty --- .../src/components/About/AboutCard.tsx | 33 ------- .../src/components/About/SubHeader.tsx | 50 ----------- .../src/components/About/VerticalIcon.tsx | 85 ------------------- .../pagerduty/src/components/About/index.ts | 19 ----- 4 files changed, 187 deletions(-) delete mode 100644 plugins/pagerduty/src/components/About/AboutCard.tsx delete mode 100644 plugins/pagerduty/src/components/About/SubHeader.tsx delete mode 100644 plugins/pagerduty/src/components/About/VerticalIcon.tsx delete mode 100644 plugins/pagerduty/src/components/About/index.ts diff --git a/plugins/pagerduty/src/components/About/AboutCard.tsx b/plugins/pagerduty/src/components/About/AboutCard.tsx deleted file mode 100644 index 7d5419908a..0000000000 --- a/plugins/pagerduty/src/components/About/AboutCard.tsx +++ /dev/null @@ -1,33 +0,0 @@ -/* - * Copyright 2020 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 React from 'react'; -import { Card, CardContent, CardHeader, Divider } from '@material-ui/core'; -import { SubHeader } from './SubHeader'; -import { SubHeaderLink } from '../types'; - -type Props = { - title: string; - links: SubHeaderLink[]; - content: React.ReactNode; -}; - -export const AboutCard = ({ title, links, content }: Props) => ( - - } /> - - {content} - -); diff --git a/plugins/pagerduty/src/components/About/SubHeader.tsx b/plugins/pagerduty/src/components/About/SubHeader.tsx deleted file mode 100644 index 5e4ea96fe0..0000000000 --- a/plugins/pagerduty/src/components/About/SubHeader.tsx +++ /dev/null @@ -1,50 +0,0 @@ -/* - * Copyright 2020 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 React from 'react'; -import { VerticalIcon } from './VerticalIcon'; -import { SubHeaderLink } from '../types'; -import { makeStyles } from '@material-ui/core'; - -const useStyles = makeStyles(theme => ({ - links: { - margin: theme.spacing(2, 0), - display: 'grid', - gridAutoFlow: 'column', - gridAutoColumns: 'min-content', - gridGap: theme.spacing(3), - }, -})); - -type Props = { - links: SubHeaderLink[]; -}; - -export const SubHeader = ({ links }: Props) => { - const classes = useStyles(); - return ( - - ); -}; diff --git a/plugins/pagerduty/src/components/About/VerticalIcon.tsx b/plugins/pagerduty/src/components/About/VerticalIcon.tsx deleted file mode 100644 index 5463372ac0..0000000000 --- a/plugins/pagerduty/src/components/About/VerticalIcon.tsx +++ /dev/null @@ -1,85 +0,0 @@ -/* - * Copyright 2020 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 React from 'react'; -import classnames from 'classnames'; -import { makeStyles, Link } from '@material-ui/core'; -import LinkIcon from '@material-ui/icons/Link'; -import { Link as RouterLink } from 'react-router-dom'; - -export type VerticalIconProps = { - icon?: React.ReactNode; - href?: string; - title?: string; - label: string; - action?: React.ReactNode; -}; - -const useIconStyles = makeStyles(theme => ({ - link: { - display: 'grid', - justifyItems: 'center', - gridGap: 4, - textAlign: 'center', - }, - label: { - fontSize: '0.7rem', - textTransform: 'uppercase', - fontWeight: 600, - letterSpacing: 1.2, - }, - linkStyle: { - color: theme.palette.secondary.main, - }, -})); - -export function VerticalIcon({ - icon = , - href = '#', - action, - ...props -}: VerticalIconProps) { - const classes = useIconStyles(); - - if (action) { - return ( - - {icon} - {action} - - ); - } - - // Absolute links should not be using RouterLink - if (href?.startsWith('//') || href?.includes('://')) { - return ( - - {icon} - {props.label} - - ); - } - - return ( - - {icon} - {props.label} - - ); -} diff --git a/plugins/pagerduty/src/components/About/index.ts b/plugins/pagerduty/src/components/About/index.ts deleted file mode 100644 index 4e495daa54..0000000000 --- a/plugins/pagerduty/src/components/About/index.ts +++ /dev/null @@ -1,19 +0,0 @@ -/* - * Copyright 2020 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. - */ - -export { AboutCard } from './AboutCard'; -// export { SubHeader } from './SubHeader'; -// export { VerticalIcon } from './VerticalIcon'; From 7e6debad673b6e829ad256bc0264c83722267966 Mon Sep 17 00:00:00 2001 From: Samira Mokaram Date: Fri, 11 Dec 2020 17:24:06 +0100 Subject: [PATCH 04/14] add AboutCard to core --- packages/core/src/components/index.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/core/src/components/index.ts b/packages/core/src/components/index.ts index bcc56debea..8664b79c6f 100644 --- a/packages/core/src/components/index.ts +++ b/packages/core/src/components/index.ts @@ -37,3 +37,4 @@ export * from './TrendLine'; export * from './WarningPanel'; export * from './EmptyState'; export * from './MarkdownContent'; +export * from './AboutCard'; From f9f59f9b4b197a7e289666619327c00fa893c46e Mon Sep 17 00:00:00 2001 From: Samira Mokaram Date: Fri, 11 Dec 2020 17:27:53 +0100 Subject: [PATCH 05/14] remove IconLinkVertical from catalog --- plugins/catalog/src/components/AboutCard/index.ts | 1 - plugins/catalog/src/index.ts | 2 +- 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/plugins/catalog/src/components/AboutCard/index.ts b/plugins/catalog/src/components/AboutCard/index.ts index 0491d467f8..93765ff942 100644 --- a/plugins/catalog/src/components/AboutCard/index.ts +++ b/plugins/catalog/src/components/AboutCard/index.ts @@ -15,4 +15,3 @@ */ export { AboutCard } from './AboutCard'; -export { IconLinkVertical } from './IconLinkVertical'; diff --git a/plugins/catalog/src/index.ts b/plugins/catalog/src/index.ts index 5949209128..606ad9028d 100644 --- a/plugins/catalog/src/index.ts +++ b/plugins/catalog/src/index.ts @@ -15,7 +15,7 @@ */ export * from '@backstage/catalog-client'; -export { AboutCard, IconLinkVertical } from './components/AboutCard'; +export { AboutCard } from './components/AboutCard'; export { EntityPageLayout } from './components/EntityPageLayout'; export { Router } from './components/Router'; export { useEntityCompoundName } from './components/useEntityCompoundName'; From f59f7c2fe77bade185540273a3a687451ee5e659 Mon Sep 17 00:00:00 2001 From: Samira Mokaram Date: Fri, 11 Dec 2020 17:29:52 +0100 Subject: [PATCH 06/14] refactor code: add AboutContent and AboutField to catalog --- .../src/components/AboutCard/AboutContent.tsx | 83 +++++++++++++++++++ .../src/components/AboutCard/AboutField.tsx | 64 ++++++++++++++ 2 files changed, 147 insertions(+) create mode 100644 plugins/catalog/src/components/AboutCard/AboutContent.tsx create mode 100644 plugins/catalog/src/components/AboutCard/AboutField.tsx diff --git a/plugins/catalog/src/components/AboutCard/AboutContent.tsx b/plugins/catalog/src/components/AboutCard/AboutContent.tsx new file mode 100644 index 0000000000..b8d5d84316 --- /dev/null +++ b/plugins/catalog/src/components/AboutCard/AboutContent.tsx @@ -0,0 +1,83 @@ +/* + * Copyright 2020 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 React from 'react'; +import { Grid, Typography, Chip, makeStyles } from '@material-ui/core'; +import { AboutField } from './AboutField'; +import { + Entity, + ENTITY_DEFAULT_NAMESPACE, + RELATION_OWNED_BY, + serializeEntityRef, +} from '@backstage/catalog-model'; + +const useStyles = makeStyles({ + description: { + wordBreak: 'break-word', + }, +}); + +type Props = { + entity: Entity; +}; + +export const AboutContent = ({ entity }: Props) => { + const classes = useStyles(); + return ( + + + + {entity?.metadata?.description || 'No description'} + + + r.type === RELATION_OWNED_BY) + .map(({ target: { kind, name, namespace } }) => + // TODO(Rugvip): we want to provide some utils for this + serializeEntityRef({ + kind, + name, + namespace: + namespace === ENTITY_DEFAULT_NAMESPACE ? undefined : namespace, + }), + ) + .join(', ')} + gridSizes={{ xs: 12, sm: 6, lg: 4 }} + /> + + + + {(entity?.metadata?.tags || []).map(t => ( + + ))} + + + ); +}; diff --git a/plugins/catalog/src/components/AboutCard/AboutField.tsx b/plugins/catalog/src/components/AboutCard/AboutField.tsx new file mode 100644 index 0000000000..fdcb3ace1b --- /dev/null +++ b/plugins/catalog/src/components/AboutCard/AboutField.tsx @@ -0,0 +1,64 @@ +/* + * Copyright 2020 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 React from 'react'; +import { makeStyles, Typography, Grid } from '@material-ui/core'; + +const useStyles = makeStyles(theme => ({ + value: { + fontWeight: 'bold', + overflow: 'hidden', + lineHeight: '24px', + wordBreak: 'break-word', + }, + label: { + color: theme.palette.text.secondary, + textTransform: 'uppercase', + fontSize: '10px', + fontWeight: 'bold', + letterSpacing: 0.5, + overflow: 'hidden', + whiteSpace: 'nowrap', + }, +})); + +type Props = { + label: string; + value?: string; + gridSizes?: Record; + children?: React.ReactNode; +}; + +export const AboutField = ({ label, value, gridSizes, children }: Props) => { + const classes = useStyles(); + + // Content is either children or a string prop `value` + const content = React.Children.count(children) ? ( + children + ) : ( + + {value || `unknown`} + + ); + return ( + + + {label} + + {content} + + ); +}; From 5cd9ac16ae9fd66c7b185eedc70687395884d4d0 Mon Sep 17 00:00:00 2001 From: Samira Mokaram Date: Fri, 11 Dec 2020 17:32:42 +0100 Subject: [PATCH 07/14] use AboutCard in pagerduty and catalog --- .../src/components/AboutCard/AboutCard.tsx | 218 ++++-------------- .../src/components/PagerDutyCard.tsx | 7 +- 2 files changed, 42 insertions(+), 183 deletions(-) diff --git a/plugins/catalog/src/components/AboutCard/AboutCard.tsx b/plugins/catalog/src/components/AboutCard/AboutCard.tsx index 49653fe981..cf85cee66a 100644 --- a/plugins/catalog/src/components/AboutCard/AboutCard.tsx +++ b/plugins/catalog/src/components/AboutCard/AboutCard.tsx @@ -17,66 +17,18 @@ import { Entity, ENTITY_DEFAULT_NAMESPACE, - RELATION_OWNED_BY, RELATION_PROVIDES_API, - serializeEntityRef, } from '@backstage/catalog-model'; -import { - Card, - CardContent, - CardHeader, - Chip, - Divider, - Grid, - IconButton, - makeStyles, - Typography, -} from '@material-ui/core'; +import { IconButton } from '@material-ui/core'; import ExtensionIcon from '@material-ui/icons/Extension'; import DocsIcon from '@material-ui/icons/Description'; import EditIcon from '@material-ui/icons/Edit'; import GitHubIcon from '@material-ui/icons/GitHub'; import React from 'react'; -import { IconLinkVertical } from './IconLinkVertical'; import { findLocationForEntityMeta } from '../../data/utils'; import { createEditLink, determineUrlType } from '../createEditLink'; - -const useStyles = makeStyles(theme => ({ - links: { - margin: theme.spacing(2, 0), - display: 'grid', - gridAutoFlow: 'column', - gridAutoColumns: 'min-content', - gridGap: theme.spacing(3), - }, - label: { - color: theme.palette.text.secondary, - textTransform: 'uppercase', - fontSize: '10px', - fontWeight: 'bold', - letterSpacing: 0.5, - overflow: 'hidden', - whiteSpace: 'nowrap', - }, - value: { - fontWeight: 'bold', - overflow: 'hidden', - lineHeight: '24px', - wordBreak: 'break-word', - }, - description: { - wordBreak: 'break-word', - }, - gridItemCard: { - display: 'flex', - flexDirection: 'column', - height: 'calc(100% - 10px)', // for pages without content header - marginBottom: '10px', - }, - gridItemCardContent: { - flex: 1, - }, -})); +import { AboutCard as CoreAboutCard } from '@backstage/core'; +import { AboutContent } from './AboutContent'; const iconMap: Record = { github: , @@ -110,138 +62,46 @@ type AboutCardProps = { }; export function AboutCard({ entity, variant }: AboutCardProps) { - const classes = useStyles(); const codeLink = getCodeLinkInfo(entity); // TODO: Also support RELATION_CONSUMES_API here const hasApis = entity.relations?.some(r => r.type === RELATION_PROVIDES_API); + const viewInSource = { + label: 'View Source', + ...codeLink, + }; + const viewInTechDocs = { + label: 'View TechDocs', + disabled: !entity.metadata.annotations?.['backstage.io/techdocs-ref'], + icon: , + href: `/docs/${entity.metadata.namespace || ENTITY_DEFAULT_NAMESPACE}/${ + entity.kind + }/${entity.metadata.name}`, + }; + const viewApi = { + title: hasApis ? '' : 'No APIs available', + label: 'View API', + disabled: !hasApis, + icon: , + href: 'api', + }; return ( - - { - window.open(codeLink.edithref || '#', '_blank'); - }} - > - - - } - subheader={ - - } - /> - - - - - - {entity?.metadata?.description || 'No description'} - - - r.type === RELATION_OWNED_BY) - .map(({ target: { kind, name, namespace } }) => - // TODO(Rugvip): we want to provide some utils for this - serializeEntityRef({ - kind, - name, - namespace: - namespace === ENTITY_DEFAULT_NAMESPACE - ? undefined - : namespace, - }), - ) - .join(', ')} - gridSizes={{ xs: 12, sm: 6, lg: 4 }} - /> - - - - {(entity?.metadata?.tags || []).map(t => ( - - ))} - - - - - ); -} - -function AboutField({ - label, - value, - gridSizes, - children, -}: { - label: string; - value?: string; - gridSizes?: Record; - children?: React.ReactNode; -}) { - const classes = useStyles(); - - // Content is either children or a string prop `value` - const content = React.Children.count(children) ? ( - children - ) : ( - - {value || `unknown`} - - ); - return ( - - - {label} - - {content} - + { + window.open(codeLink.edithref || '#', '_blank'); + }} + > + + + } + links={[viewInSource, viewInTechDocs, viewApi]} + content={} + /> ); } diff --git a/plugins/pagerduty/src/components/PagerDutyCard.tsx b/plugins/pagerduty/src/components/PagerDutyCard.tsx index 8fd20f37e8..10081f8939 100644 --- a/plugins/pagerduty/src/components/PagerDutyCard.tsx +++ b/plugins/pagerduty/src/components/PagerDutyCard.tsx @@ -14,7 +14,7 @@ * limitations under the License. */ import React, { useState, useCallback } from 'react'; -import { useApi, Progress } from '@backstage/core'; +import { useApi, Progress, AboutCard } from '@backstage/core'; import { Entity } from '@backstage/catalog-model'; import { Button, makeStyles } from '@material-ui/core'; import { Incidents } from './Incident'; @@ -26,7 +26,6 @@ import AlarmAddIcon from '@material-ui/icons/AlarmAdd'; import { TriggerDialog } from './TriggerDialog'; import { MissingTokenError } from './Errors/MissingTokenError'; import WebIcon from '@material-ui/icons/Web'; -import { AboutCard } from './About/AboutCard'; const useStyles = makeStyles({ triggerAlarm: { @@ -98,13 +97,13 @@ export const PagerDutyCard = ({ entity }: Props) => { } const serviceLink = { - title: 'Service Directory', + label: 'Service Directory', href: service!.url, icon: , }; const triggerLink = { - title: 'Create Incident', + label: 'Create Incident', action: (