chore: move template groups to react instead
Signed-off-by: blam <ben@blam.sh>
This commit is contained in:
blam
@@ -0,0 +1,222 @@
|
||||
/*
|
||||
* 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('@backstage/plugin-catalog-react', () => ({
|
||||
useEntityList: jest.fn(),
|
||||
}));
|
||||
|
||||
jest.mock('@backstage/plugin-scaffolder-react/alpha', () => ({
|
||||
TemplateGroup: jest.fn(() => null),
|
||||
}));
|
||||
|
||||
import React from 'react';
|
||||
import { useEntityList } from '@backstage/plugin-catalog-react';
|
||||
import { TemplateGroups } from './TemplateGroups';
|
||||
import { renderInTestApp, TestApiProvider } from '@backstage/test-utils';
|
||||
import { errorApiRef } from '@backstage/core-plugin-api';
|
||||
import { TemplateGroup } from '@backstage/plugin-scaffolder-react/alpha';
|
||||
|
||||
describe('TemplateGroups', () => {
|
||||
beforeEach(() => jest.clearAllMocks());
|
||||
|
||||
it('should return progress if the hook is loading', async () => {
|
||||
(useEntityList as jest.Mock).mockReturnValue({ loading: true });
|
||||
|
||||
const { findByTestId } = await renderInTestApp(
|
||||
<TestApiProvider apis={[[errorApiRef, {}]]}>
|
||||
<TemplateGroups groups={[]} />
|
||||
</TestApiProvider>,
|
||||
);
|
||||
|
||||
expect(await findByTestId('progress')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should use the error api if there is an error with the retrieval of entitylist', async () => {
|
||||
const mockError = new Error('tings went poop');
|
||||
(useEntityList as jest.Mock).mockReturnValue({
|
||||
error: mockError,
|
||||
});
|
||||
const errorApi = {
|
||||
post: jest.fn(),
|
||||
};
|
||||
await renderInTestApp(
|
||||
<TestApiProvider apis={[[errorApiRef, errorApi]]}>
|
||||
<TemplateGroups groups={[]} />
|
||||
</TestApiProvider>,
|
||||
);
|
||||
|
||||
expect(errorApi.post).toHaveBeenCalledWith(mockError);
|
||||
});
|
||||
|
||||
it('should return a no templates message if entities is unset', async () => {
|
||||
(useEntityList as jest.Mock).mockReturnValue({
|
||||
entities: null,
|
||||
loading: false,
|
||||
error: null,
|
||||
});
|
||||
|
||||
const { findByText } = await renderInTestApp(
|
||||
<TestApiProvider apis={[[errorApiRef, {}]]}>
|
||||
<TemplateGroups groups={[]} />
|
||||
</TestApiProvider>,
|
||||
);
|
||||
|
||||
expect(await findByText(/No templates found/)).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should return a no templates message if entities has no values in it', async () => {
|
||||
(useEntityList as jest.Mock).mockReturnValue({
|
||||
entities: [],
|
||||
loading: false,
|
||||
error: null,
|
||||
});
|
||||
|
||||
const { findByText } = await renderInTestApp(
|
||||
<TestApiProvider apis={[[errorApiRef, {}]]}>
|
||||
<TemplateGroups groups={[]} />
|
||||
</TestApiProvider>,
|
||||
);
|
||||
|
||||
expect(await findByText(/No templates found/)).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should call the template group with the components', async () => {
|
||||
const mockEntities = [
|
||||
{
|
||||
apiVersion: 'scaffolder.backstage.io/v1beta3',
|
||||
kind: 'Template',
|
||||
metadata: {
|
||||
name: 't1',
|
||||
},
|
||||
spec: {},
|
||||
},
|
||||
{
|
||||
apiVersion: 'scaffolder.backstage.io/v1beta3',
|
||||
kind: 'Template',
|
||||
metadata: {
|
||||
name: 't2',
|
||||
},
|
||||
spec: {},
|
||||
},
|
||||
];
|
||||
|
||||
(useEntityList as jest.Mock).mockReturnValue({
|
||||
entities: mockEntities,
|
||||
loading: false,
|
||||
error: null,
|
||||
});
|
||||
|
||||
await renderInTestApp(
|
||||
<TestApiProvider apis={[[errorApiRef, {}]]}>
|
||||
<TemplateGroups groups={[{ title: 'all', filter: () => true }]} />
|
||||
</TestApiProvider>,
|
||||
);
|
||||
|
||||
expect(TemplateGroup).toHaveBeenCalledWith(
|
||||
expect.objectContaining({
|
||||
templates: mockEntities.map(template =>
|
||||
expect.objectContaining({ template }),
|
||||
),
|
||||
}),
|
||||
{},
|
||||
);
|
||||
});
|
||||
|
||||
it('should apply the filter for each group', async () => {
|
||||
const mockEntities = [
|
||||
{
|
||||
apiVersion: 'scaffolder.backstage.io/v1beta3',
|
||||
kind: 'Template',
|
||||
metadata: {
|
||||
name: 't1',
|
||||
},
|
||||
spec: {},
|
||||
},
|
||||
{
|
||||
apiVersion: 'scaffolder.backstage.io/v1beta3',
|
||||
kind: 'Template',
|
||||
metadata: {
|
||||
name: 't2',
|
||||
},
|
||||
spec: {},
|
||||
},
|
||||
];
|
||||
|
||||
(useEntityList as jest.Mock).mockReturnValue({
|
||||
entities: mockEntities,
|
||||
loading: false,
|
||||
error: null,
|
||||
});
|
||||
|
||||
await renderInTestApp(
|
||||
<TestApiProvider apis={[[errorApiRef, {}]]}>
|
||||
<TemplateGroups
|
||||
groups={[{ title: 'all', filter: e => e.metadata.name === 't1' }]}
|
||||
/>
|
||||
</TestApiProvider>,
|
||||
);
|
||||
|
||||
expect(TemplateGroup).toHaveBeenCalledWith(
|
||||
expect.objectContaining({
|
||||
templates: [expect.objectContaining({ template: mockEntities[0] })],
|
||||
}),
|
||||
{},
|
||||
);
|
||||
});
|
||||
|
||||
it('should filter out templates based on filter condition', async () => {
|
||||
const mockEntities = [
|
||||
{
|
||||
apiVersion: 'scaffolder.backstage.io/v1beta3',
|
||||
kind: 'Template',
|
||||
metadata: {
|
||||
name: 't1',
|
||||
},
|
||||
spec: {},
|
||||
},
|
||||
{
|
||||
apiVersion: 'scaffolder.backstage.io/v1beta3',
|
||||
kind: 'Template',
|
||||
metadata: {
|
||||
name: 't2',
|
||||
},
|
||||
spec: {},
|
||||
},
|
||||
];
|
||||
|
||||
(useEntityList as jest.Mock).mockReturnValue({
|
||||
entities: mockEntities,
|
||||
loading: false,
|
||||
error: null,
|
||||
});
|
||||
|
||||
await renderInTestApp(
|
||||
<TestApiProvider apis={[[errorApiRef, {}]]}>
|
||||
<TemplateGroups
|
||||
groups={[{ title: 'all', filter: _ => true }]}
|
||||
templateFilter={e => e.metadata.name === 't1'}
|
||||
/>
|
||||
</TestApiProvider>,
|
||||
);
|
||||
|
||||
expect(TemplateGroup).toHaveBeenCalledWith(
|
||||
expect.objectContaining({
|
||||
templates: [expect.objectContaining({ template: mockEntities[1] })],
|
||||
}),
|
||||
{},
|
||||
);
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,131 @@
|
||||
/*
|
||||
* 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 React, { useCallback } from 'react';
|
||||
|
||||
import { parseEntityRef, stringifyEntityRef } from '@backstage/catalog-model';
|
||||
import { useEntityList } from '@backstage/plugin-catalog-react';
|
||||
import {
|
||||
isTemplateEntityV1beta3,
|
||||
TemplateEntityV1beta3,
|
||||
} from '@backstage/plugin-scaffolder-common';
|
||||
import { Progress, Link, DocsIcon } from '@backstage/core-components';
|
||||
import { Typography } from '@material-ui/core';
|
||||
import {
|
||||
errorApiRef,
|
||||
IconComponent,
|
||||
useApi,
|
||||
useApp,
|
||||
useRouteRef,
|
||||
} from '@backstage/core-plugin-api';
|
||||
import { TemplateGroup } from '@backstage/plugin-scaffolder-react/alpha';
|
||||
import { viewTechDocRouteRef } from '../../routes';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
|
||||
/**
|
||||
* @alpha
|
||||
*/
|
||||
export type TemplateGroupFilter = {
|
||||
title?: React.ReactNode;
|
||||
filter: (entity: TemplateEntityV1beta3) => boolean;
|
||||
};
|
||||
|
||||
/**
|
||||
* @alpha
|
||||
*/
|
||||
export interface TemplateGroupsProps {
|
||||
groups: TemplateGroupFilter[];
|
||||
templateFilter?: (entity: TemplateEntityV1beta3) => boolean;
|
||||
TemplateCardComponent?: React.ComponentType<{
|
||||
template: TemplateEntityV1beta3;
|
||||
}>;
|
||||
onTemplateSelected?: (template: {
|
||||
namespace: string;
|
||||
templateName: string;
|
||||
}) => void;
|
||||
additionalLinksForEntity?: (template: TemplateEntityV1beta3) => {
|
||||
icon: IconComponent;
|
||||
text: string;
|
||||
url: string;
|
||||
}[];
|
||||
}
|
||||
|
||||
/**
|
||||
* @alpha
|
||||
*/
|
||||
export const TemplateGroups = (props: TemplateGroupsProps) => {
|
||||
const { loading, error, entities } = useEntityList();
|
||||
const { groups, templateFilter, TemplateCardComponent, onTemplateSelected } =
|
||||
props;
|
||||
const errorApi = useApi(errorApiRef);
|
||||
const onSelected = useCallback(
|
||||
(template: TemplateEntityV1beta3) => {
|
||||
const { namespace, name } = parseEntityRef(stringifyEntityRef(template));
|
||||
onTemplateSelected?.({ namespace, templateName: name });
|
||||
},
|
||||
[onTemplateSelected],
|
||||
);
|
||||
|
||||
if (loading) {
|
||||
return <Progress />;
|
||||
}
|
||||
|
||||
if (error) {
|
||||
errorApi.post(error);
|
||||
return null;
|
||||
}
|
||||
|
||||
if (!entities || !entities.length) {
|
||||
return (
|
||||
<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>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
{groups.map(({ title, filter }, index) => {
|
||||
const templates = entities
|
||||
.filter(isTemplateEntityV1beta3)
|
||||
.filter(e => (templateFilter ? !templateFilter(e) : true))
|
||||
.filter(filter)
|
||||
.map(template => {
|
||||
const additionalLinks =
|
||||
props.additionalLinksForEntity?.(template) ?? [];
|
||||
|
||||
return {
|
||||
template,
|
||||
additionalLinks,
|
||||
};
|
||||
});
|
||||
|
||||
return (
|
||||
<TemplateGroup
|
||||
key={index}
|
||||
templates={templates}
|
||||
title={title}
|
||||
components={{ CardComponent: TemplateCardComponent }}
|
||||
onSelected={onSelected}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,16 @@
|
||||
/*
|
||||
* Copyright 2023 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 './TemplateGroups';
|
||||
Reference in New Issue
Block a user