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

update apis cards empty state to use external icon on link

Browse Source 
Signed-off-by: Emma Indal <emma.indahl@gmail.com>
This commit is contained in:
Emma Indal
2024-09-11 15:10:12 +02:00
committed by blam
parent 46e01e9d98
commit 5645f9ff14
4 changed files with 72 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
plugins/api-docs/src/components/ApisCards/ConsumedApisCard.test.tsx
+12 -1
View File
@@ -62,7 +62,7 @@ describe('<ConsumedApisCard />', () => {
relations: [],
};
const { getByText } = await renderInTestApp(
const { getByText, getByRole, container } = await renderInTestApp(
<Wrapper>
<EntityProvider entity={entity}>
<ConsumedApisCard />
@@ -77,6 +77,17 @@ describe('<ConsumedApisCard />', () => {
expect(getByText(/Consumed APIs/i)).toBeInTheDocument();
expect(getByText(/does not consume any APIs/i)).toBeInTheDocument();
// Also render external link icon
const externalLink = getByRole('link');
expect(externalLink).toHaveAttribute(
'href',
'https://backstage.io/docs/features/software-catalog/descriptor-format#specconsumesapis-optional',
);
const externalLinkIcon: HTMLElement | null = container.querySelector(
'svg[class*="externalLink"]',
);
expect(externalLink).toContainElement(externalLinkIcon);
});
it('shows consumed APIs', async () => {
plugins/api-docs/src/components/ApisCards/ConsumedApisCard.tsx
+23 -2
View File
@@ -33,6 +33,16 @@ import {
TableOptions,
WarningPanel,
} from '@backstage/core-components';
import OpenInNew from '@material-ui/icons/OpenInNew';
import { useApp } from '@backstage/core-plugin-api';
import { makeStyles, Theme } from '@material-ui/core/styles';
const useStyles = makeStyles((theme: Theme) => ({
externalLink: {
verticalAlign: 'bottom',
marginLeft: theme.spacing(0.5),
},
}));
/**
* @public
@@ -53,6 +63,9 @@ export const ConsumedApisCard = (props: {
const { entities, loading, error } = useRelatedEntities(entity, {
type: RELATION_CONSUMES_API,
});
const app = useApp();
const ExternalLinkIcon = app.getSystemIcon('externalLink') || OpenInNew;
const classes = useStyles();
if (loading) {
return (
@@ -85,8 +98,16 @@ export const ConsumedApisCard = (props: {
APIs.
</Typography>
<Typography variant="body2">
<Link to="https://backstage.io/docs/features/software-catalog/descriptor-format#specconsumesapis-optional">
Learn how to change this.
<Link
to="https://backstage.io/docs/features/software-catalog/descriptor-format#specconsumesapis-optional"
externalLinkIcon={
<ExternalLinkIcon
fontSize="small"
className={classes.externalLink}
/>
}
>
Learn how to change this
</Link>
</Typography>
</div>
plugins/api-docs/src/components/ApisCards/ProvidedApisCard.test.tsx
+13 -1
View File
@@ -62,7 +62,7 @@ describe('<ProvidedApisCard />', () => {
relations: [],
};
const { getByText } = await renderInTestApp(
const { getByText, getByRole, container } = await renderInTestApp(
<Wrapper>
<EntityProvider entity={entity}>
<ProvidedApisCard />
@@ -77,6 +77,18 @@ describe('<ProvidedApisCard />', () => {
expect(getByText(/Provided APIs/i)).toBeInTheDocument();
expect(getByText(/does not provide any APIs/i)).toBeInTheDocument();
expect(getByText(/Learn how to change this/)).toBeInTheDocument();
// Also render external link icon
const externalLink = getByRole('link');
expect(externalLink).toHaveAttribute(
'href',
'https://backstage.io/docs/features/software-catalog/descriptor-format#specprovidesapis-optional',
);
const externalLinkIcon: HTMLElement | null = container.querySelector(
'svg[class*="externalLink"]',
);
expect(externalLink).toContainElement(externalLinkIcon);
});
it('shows consumed APIs', async () => {
plugins/api-docs/src/components/ApisCards/ProvidedApisCard.tsx
+24 -5
View File
@@ -33,6 +33,16 @@ import {
TableOptions,
WarningPanel,
} from '@backstage/core-components';
import { useApp } from '@backstage/core-plugin-api';
import OpenInNew from '@material-ui/icons/OpenInNew';
import { makeStyles, Theme } from '@material-ui/core/styles';
const useStyles = makeStyles((theme: Theme) => ({
externalLink: {
verticalAlign: 'bottom',
marginLeft: theme.spacing(0.5),
},
}));
/**
* @public
@@ -53,6 +63,9 @@ export const ProvidedApisCard = (props: {
const { entities, loading, error } = useRelatedEntities(entity, {
type: RELATION_PROVIDES_API,
});
const app = useApp();
const ExternalLinkIcon = app.getSystemIcon('externalLink') || OpenInNew;
const classes = useStyles();
if (loading) {
return (
@@ -84,11 +97,17 @@ export const ProvidedApisCard = (props: {
This {entity.kind.toLocaleLowerCase('en-US')} does not provide any
APIs.
</Typography>
<Typography variant="body2">
<Link to="https://backstage.io/docs/features/software-catalog/descriptor-format#specprovidesapis-optional">
Learn how to change this.
</Link>
</Typography>
<Link
to="https://backstage.io/docs/features/software-catalog/descriptor-format#specprovidesapis-optional"
externalLinkIcon={
<ExternalLinkIcon
fontSize="small"
className={classes.externalLink}
/>
}
>
Learn how to change this
</Link>
</div>
}
columns={columns}