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

fix(scaffolder-react): always display a single divider below template description

Browse Source 
Signed-off-by: Alec Jacobs <cajacobs5401@gmail.com>
This commit is contained in:
Alec Jacobs
2024-01-31 08:19:34 -08:00
committed by blam
parent 2985186160
commit d530f574da
2 changed files with 110 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files
plugins/scaffolder-react/src/next/components/TemplateCard/TemplateCard.test.tsx
+96 -6
View File
@@ -70,7 +70,7 @@ describe('TemplateCard', () => {
},
};
const { getByText } = await renderInTestApp(
const { getByText, getByTestId } = await renderInTestApp(
<TestApiProvider
apis={[
[
@@ -87,6 +87,7 @@ describe('TemplateCard', () => {
const description = getByText('hello');
expect(description.querySelector('strong')).toBeInTheDocument();
expect(getByTestId('template-card-separator')).toBeInTheDocument();
});
it('should render no description if none is provided through the template', async () => {
@@ -118,6 +119,41 @@ describe('TemplateCard', () => {
expect(getByText('No description')).toBeInTheDocument();
});
it('should not render extra separators when tags or links are not present', async () => {
const mockTemplate: TemplateEntityV1beta3 = {
apiVersion: 'scaffolder.backstage.io/v1beta3',
kind: 'Template',
metadata: { name: 'bob' },
spec: {
steps: [],
type: 'service',
},
};
const { queryByTestId } = await renderInTestApp(
<TestApiProvider
apis={[
[
starredEntitiesApiRef,
new DefaultStarredEntitiesApi({
storageApi: MockStorageApi.create(),
}),
],
]}
>
<TemplateCard template={mockTemplate} />
</TestApiProvider>,
);
expect(queryByTestId('template-card-separator')).toBeInTheDocument();
expect(
queryByTestId('template-card-separator--tags'),
).not.toBeInTheDocument();
expect(
queryByTestId('template-card-separator--links'),
).not.toBeInTheDocument();
});
it('should render the tags', async () => {
const mockTemplate: TemplateEntityV1beta3 = {
apiVersion: 'scaffolder.backstage.io/v1beta3',
@@ -129,7 +165,7 @@ describe('TemplateCard', () => {
},
};
const { getByText } = await renderInTestApp(
const { getByText, queryByTestId } = await renderInTestApp(
<TestApiProvider
apis={[
[
@@ -147,6 +183,8 @@ describe('TemplateCard', () => {
for (const tag of mockTemplate.metadata.tags!) {
expect(getByText(tag)).toBeInTheDocument();
}
expect(queryByTestId('template-card-separator')).not.toBeInTheDocument();
expect(queryByTestId('template-card-separator--tags')).toBeInTheDocument();
});
it('should not render links section when empty links are defined', async () => {
@@ -166,7 +204,7 @@ describe('TemplateCard', () => {
],
};
const { queryByRole, queryByText } = await renderInTestApp(
const { queryByTestId, queryByText } = await renderInTestApp(
<TestApiProvider
apis={[
[
@@ -186,7 +224,10 @@ describe('TemplateCard', () => {
},
);
expect(queryByRole('separator')).not.toBeInTheDocument();
expect(queryByTestId('template-card-separator')).toBeInTheDocument();
expect(
queryByTestId('template-card-separator--links'),
).not.toBeInTheDocument();
expect(queryByText('0')).not.toBeInTheDocument();
});
@@ -207,7 +248,7 @@ describe('TemplateCard', () => {
],
};
const { queryByRole, queryByText } = await renderInTestApp(
const { queryByTestId, queryByText } = await renderInTestApp(
<TestApiProvider
apis={[
[
@@ -227,10 +268,59 @@ describe('TemplateCard', () => {
},
);
expect(queryByRole('separator')).not.toBeInTheDocument();
expect(queryByTestId('template-card-separator')).toBeInTheDocument();
expect(
queryByTestId('template-card-separator--links'),
).not.toBeInTheDocument();
expect(queryByText('0')).not.toBeInTheDocument();
});
it('should render links section when links are defined', async () => {
const mockTemplate: TemplateEntityV1beta3 = {
apiVersion: 'scaffolder.backstage.io/v1beta3',
kind: 'Template',
metadata: {
name: 'bob',
tags: [],
links: [{ url: '/some/url', title: 'Learn More' }],
},
spec: {
steps: [],
type: 'service',
},
relations: [
{
targetRef: 'group:default/my-test-user',
type: RELATION_OWNED_BY,
},
],
};
const { queryByTestId, getByRole } = await renderInTestApp(
<TestApiProvider
apis={[
[
starredEntitiesApiRef,
new DefaultStarredEntitiesApi({
storageApi: MockStorageApi.create(),
}),
],
]}
>
<TemplateCard template={mockTemplate} additionalLinks={[]} />
</TestApiProvider>,
{
mountedRoutes: {
'/catalog/:kind/:namespace/:name': entityRouteRef,
},
},
);
expect(queryByTestId('template-card-separator')).not.toBeInTheDocument();
expect(queryByTestId('template-card-separator--links')).toBeInTheDocument();
expect(getByRole('link', { name: 'Learn More' })).toBeInTheDocument();
});
it('should render a link to the owner', async () => {
const mockTemplate: TemplateEntityV1beta3 = {
apiVersion: 'scaffolder.backstage.io/v1beta3',
plugins/scaffolder-react/src/next/components/TemplateCard/TemplateCard.tsx
+14 -6
View File
@@ -101,6 +101,10 @@ export const TemplateCard = (props: TemplateCardProps) => {
const app = useApp();
const iconResolver = (key?: string): IconComponent =>
key ? app.getSystemIcon(key) ?? LanguageIcon : LanguageIcon;
const hasTags = !!template.metadata.tags?.length;
const hasLinks =
!!props.additionalLinks?.length || !!template.metadata.links?.length;
const displayDefaultDivider = !hasTags && !hasLinks;
return (
<Card>
@@ -115,15 +119,20 @@ export const TemplateCard = (props: TemplateCardProps) => {
/>
</Box>
</Grid>
{(template.metadata.tags?.length ?? 0) > 0 && (
{displayDefaultDivider && (
<Grid item xs={12}>
<Divider data-testid="template-card-separator" />
</Grid>
)}
{hasTags && (
<>
<Grid item xs={12}>
<Divider />
<Divider data-testid="template-card-separator--tags" />
</Grid>
<Grid item xs={12}>
<Grid container spacing={2}>
{template.metadata.tags?.map(tag => (
<Grid item>
<Grid key={`grid-${tag}`} item>
<Chip
style={{ margin: 0 }}
size="small"
@@ -136,11 +145,10 @@ export const TemplateCard = (props: TemplateCardProps) => {
</Grid>
</>
)}
{(!!props.additionalLinks?.length ||
!!template.metadata.links?.length) && (
{hasLinks && (
<>
<Grid item xs={12}>
<Divider />
<Divider data-testid="template-card-separator--links" />
</Grid>
<Grid item xs={12}>
<Grid container spacing={2}>