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

chore: moving smaller components over from the next package

Browse Source 
Signed-off-by: blam <ben@blam.sh>
This commit is contained in:
blam
2022-12-23 11:05:49 +01:00
parent c2f1010f3c
commit 70beaaaa22
8 changed files with 44 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files
plugins/scaffolder-react/src/next/components/TemplateGroup/TemplateGroup.test.tsx
+143
View File
@@ -0,0 +1,143 @@
/*
* 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.
*/
jest.mock('../TemplateCard', () => ({ TemplateCard: jest.fn(() => null) }));
import React from 'react';
import { TemplateGroup } from './TemplateGroup';
import { render } from '@testing-library/react';
import { TemplateCard } from '../TemplateCard';
import { TemplateEntityV1beta3 } from '@backstage/plugin-scaffolder-common';
describe('TemplateGroup', () => {
it('should return a message when no templates are passed in', async () => {
const { getByText } = render(<TemplateGroup title="Test" templates={[]} />);
expect(
getByText(/No templates found that match your filter/),
).toBeInTheDocument();
});
it('should render a card for each template with the template being passed as a prop', () => {
const mockTemplates: TemplateEntityV1beta3[] = [
{
apiVersion: 'scaffolder.backstage.io/v1beta3',
kind: 'Template',
metadata: { name: 'test' },
spec: {
parameters: [],
steps: [],
type: 'website',
},
},
{
apiVersion: 'scaffolder.backstage.io/v1beta3',
kind: 'Template',
metadata: { name: 'test2' },
spec: {
parameters: [],
steps: [],
type: 'service',
},
},
];
render(<TemplateGroup title="Test" templates={mockTemplates} />);
expect(TemplateCard).toHaveBeenCalledTimes(2);
for (const template of mockTemplates) {
expect(TemplateCard).toHaveBeenCalledWith(
expect.objectContaining({ template }),
{},
);
}
});
it('should use the passed in TemplateCard prop to render the template card', () => {
const mockTemplateCardComponent = jest.fn(() => null);
const mockTemplates: TemplateEntityV1beta3[] = [
{
apiVersion: 'scaffolder.backstage.io/v1beta3',
kind: 'Template',
metadata: { name: 'test' },
spec: {
parameters: [],
steps: [],
type: 'website',
},
},
{
apiVersion: 'scaffolder.backstage.io/v1beta3',
kind: 'Template',
metadata: { name: 'test2' },
spec: {
parameters: [],
steps: [],
type: 'service',
},
},
];
render(
<TemplateGroup
title="Test"
templates={mockTemplates}
components={{ CardComponent: mockTemplateCardComponent }}
/>,
);
expect(mockTemplateCardComponent).toHaveBeenCalledTimes(2);
for (const template of mockTemplates) {
expect(mockTemplateCardComponent).toHaveBeenCalledWith(
expect.objectContaining({ template }),
{},
);
}
});
it('should render the title when no templates passed', () => {
const { getByText } = render(<TemplateGroup title="Test" templates={[]} />);
expect(getByText('Test')).toBeInTheDocument();
});
it('should render the title when there are templates in the list', () => {
const mockTemplates: TemplateEntityV1beta3[] = [
{
apiVersion: 'scaffolder.backstage.io/v1beta3',
kind: 'Template',
metadata: { name: 'test' },
spec: { parameters: [], steps: [], type: 'website' },
},
];
const { getByText } = render(
<TemplateGroup title="Test" templates={mockTemplates} />,
);
expect(getByText('Test')).toBeInTheDocument();
});
it('should allow for passing through a user given title component', () => {
const TitleComponent = <p>Im a custom header</p>;
const { getByText } = render(
<TemplateGroup templates={[]} title={TitleComponent} />,
);
expect(getByText('Im a custom header')).toBeInTheDocument();
});
});
plugins/scaffolder-react/src/next/components/TemplateGroup/TemplateGroup.tsx
+68
View File
@@ -0,0 +1,68 @@
/*
* 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 { TemplateEntityV1beta3 } from '@backstage/plugin-scaffolder-common';
import React from 'react';
import {
Content,
ContentHeader,
ItemCardGrid,
Link,
} from '@backstage/core-components';
import { Typography } from '@material-ui/core';
import { stringifyEntityRef } from '@backstage/catalog-model';
import { TemplateCardProps, TemplateCard } from '../TemplateCard';
export interface TemplateGroupProps {
templates: TemplateEntityV1beta3[];
title: React.ReactNode;
components?: {
CardComponent?: React.ComponentType<TemplateCardProps>;
};
}
export const TemplateGroup = (props: TemplateGroupProps) => {
const { templates, title, components: { CardComponent } = {} } = props;
const titleComponent =
typeof title === 'string' ? <ContentHeader title={title} /> : title;
if (templates.length === 0) {
return (
<Content>
{titleComponent}
<Typography variant="body2">
No templates found that match your filter. Learn more about{' '}
<Link to="https://backstage.io/docs/features/software-templates/adding-templates">
adding templates
</Link>
.
</Typography>
</Content>
);
}
const Card = CardComponent || TemplateCard;
return (
<Content>
{titleComponent}
<ItemCardGrid>
{templates.map(template => (
<Card key={stringifyEntityRef(template)} template={template} />
))}
</ItemCardGrid>
</Content>
);
};
plugins/scaffolder-react/src/next/components/TemplateGroup/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 { TemplateGroup } from './TemplateGroup';
plugins/scaffolder-react/src/next/components/index.ts
+1
View File
@@ -16,3 +16,4 @@
export * from './Stepper';
export * from './TemplateCard';
export * from './ReviewState';
export * from './TemplateGroup';
plugins/scaffolder-react/src/setupTests.ts
+16
View File
@@ -0,0 +1,16 @@
/*
* 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 '@testing-library/jest-dom';