From 92cf86a4b5deac2d82a6f0a9ef31d93935344fdc Mon Sep 17 00:00:00 2001 From: Bogdan Nechyporenko Date: Thu, 9 Mar 2023 17:28:31 +0100 Subject: [PATCH] Filter out templates Signed-off-by: Bogdan Nechyporenko --- .changeset/ten-mayflies-beam.md | 5 ++ .../software-templates/configuration.md | 15 ++++ plugins/scaffolder/alpha-api-report.md | 5 ++ plugins/scaffolder/src/components/Router.tsx | 9 +- .../ScaffolderPage/ScaffolderPage.tsx | 6 ++ .../TemplateList/TemplateList.test.tsx | 83 +++++++++++++++++++ .../components/TemplateList/TemplateList.tsx | 8 +- plugins/scaffolder/src/next/Router/Router.tsx | 7 +- .../TemplateListPage/TemplateGroups.test.tsx | 48 +++++++++++ .../next/TemplateListPage/TemplateGroups.tsx | 6 +- .../TemplateListPage/TemplateListPage.tsx | 14 +++- 11 files changed, 198 insertions(+), 8 deletions(-) create mode 100644 .changeset/ten-mayflies-beam.md create mode 100644 plugins/scaffolder/src/components/TemplateList/TemplateList.test.tsx diff --git a/.changeset/ten-mayflies-beam.md b/.changeset/ten-mayflies-beam.md new file mode 100644 index 0000000000..4fbb8416a8 --- /dev/null +++ b/.changeset/ten-mayflies-beam.md @@ -0,0 +1,5 @@ +--- +'@backstage/plugin-scaffolder': minor +--- + +Making it possible to hide software templates via templateFilter diff --git a/docs/features/software-templates/configuration.md b/docs/features/software-templates/configuration.md index ff5191bed2..24b8c530b8 100644 --- a/docs/features/software-templates/configuration.md +++ b/docs/features/software-templates/configuration.md @@ -93,3 +93,18 @@ You can also further customize groups by passing in a `titleComponent` instead of a `title` which will be a component to use as the header instead of just the default `ContentHeader` with the `title` set as it's value. ![Grouped Templates](../../assets/software-templates/grouped-templates.png) + +There is also an option to hide some templates. +You can have several use cases for that: + +- it's still in an experimental phase, so you can combine it with feature flagging for example +- you don't want to make them accessible from template list, but only open it on some action with pre-filled data. +- show different set of templates depends on target environment + +```typescript jsx + + entity?.metadata?.tags?.includes('experimental') ?? false + } +/> +``` diff --git a/plugins/scaffolder/alpha-api-report.md b/plugins/scaffolder/alpha-api-report.md index 1fc77322bd..f842ff35e1 100644 --- a/plugins/scaffolder/alpha-api-report.md +++ b/plugins/scaffolder/alpha-api-report.md @@ -31,6 +31,7 @@ export type NextRouterProps = { }>; }; groups?: TemplateGroupFilter[]; + templateFilter?: TemplatetemplateFilterFilter; FormProps?: FormProps_2; contextMenu?: { editor?: boolean; @@ -50,5 +51,9 @@ export type TemplateGroupFilter = { filter: (entity: Entity) => boolean; }; +// Warnings were encountered during analysis: +// +// src/next/Router/Router.d.ts:22:5 - (ae-forgotten-export) The symbol "TemplatetemplateFilterFilter" needs to be exported by the entry point alpha.d.ts + // (No @packageDocumentation comment for this package) ``` diff --git a/plugins/scaffolder/src/components/Router.tsx b/plugins/scaffolder/src/components/Router.tsx index ccc2bd283b..b84fb664bc 100644 --- a/plugins/scaffolder/src/components/Router.tsx +++ b/plugins/scaffolder/src/components/Router.tsx @@ -58,6 +58,7 @@ export type RouterProps = { title?: React.ReactNode; filter: (entity: Entity) => boolean; }>; + templateFilter?: (entity: Entity) => boolean; defaultPreviewTemplate?: string; headerOptions?: { pageTitleOverride?: string; @@ -81,7 +82,12 @@ export type RouterProps = { * @public */ export const Router = (props: RouterProps) => { - const { groups, components = {}, defaultPreviewTemplate } = props; + const { + groups, + templateFilter, + components = {}, + defaultPreviewTemplate, + } = props; const { ReviewStepComponent, TemplateCardComponent, TaskPageComponent } = components; @@ -126,6 +132,7 @@ export const Router = (props: RouterProps) => { element={ boolean; }>; + templateFilter?: (entity: Entity) => boolean; contextMenu?: { editor?: boolean; actions?: boolean; @@ -64,6 +65,7 @@ export type ScaffolderPageProps = { export const ScaffolderPageContents = ({ TemplateCardComponent, groups, + templateFilter, contextMenu, headerOptions, }: ScaffolderPageProps) => { @@ -123,11 +125,13 @@ export const ScaffolderPageContents = ({ key={index} TemplateCardComponent={TemplateCardComponent} group={group} + templateFilter={templateFilter} /> ))} @@ -140,6 +144,7 @@ export const ScaffolderPageContents = ({ export const ScaffolderPage = ({ TemplateCardComponent, groups, + templateFilter, contextMenu, headerOptions, }: ScaffolderPageProps) => ( @@ -147,6 +152,7 @@ export const ScaffolderPage = ({ diff --git a/plugins/scaffolder/src/components/TemplateList/TemplateList.test.tsx b/plugins/scaffolder/src/components/TemplateList/TemplateList.test.tsx new file mode 100644 index 0000000000..2ea417ad68 --- /dev/null +++ b/plugins/scaffolder/src/components/TemplateList/TemplateList.test.tsx @@ -0,0 +1,83 @@ +/* + * Copyright 2020 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 { screen } from '@testing-library/react'; +import React from 'react'; +import { renderInTestApp, TestApiProvider } from '@backstage/test-utils'; +import { TemplateList } from './TemplateList'; +import { rootRouteRef } from '../../routes'; +import { + ScmIntegrationsApi, + scmIntegrationsApiRef, +} from '@backstage/integration-react'; +import { TemplateEntityV1beta3 } from '@backstage/plugin-scaffolder-common'; + +jest.mock('@backstage/plugin-catalog-react', () => ({ + useEntityList: jest.fn().mockReturnValue({ + loading: false, + entities: [ + { + apiVersion: 'scaffolder.backstage.io/v1beta3', + kind: 'Template', + metadata: { + name: 't1', + }, + spec: {}, + }, + { + apiVersion: 'scaffolder.backstage.io/v1beta3', + kind: 'Template', + metadata: { + name: 't2', + }, + spec: {}, + }, + ], + }), + getEntityRelations: jest.fn().mockImplementation(() => []), + getEntitySourceLocation: jest.fn().mockImplementation(() => ({})), +})); + +describe('TemplateList', () => { + const mockIntegrationsApi: Partial = { + byHost: () => ({ type: 'github' }), + }; + + it('should filter out templates based on provided filter condition', async () => { + const TemplateCardComponent = ({ + template, + }: { + template: TemplateEntityV1beta3; + }) => ( +
{template.metadata.name}
+ ); + + await renderInTestApp( + +
+ e.metadata.name === 't1'} + TemplateCardComponent={TemplateCardComponent} + /> +
+ , + { mountedRoutes: { '/': rootRouteRef } }, + ); + + expect(() => screen.getByTestId('t1')).toThrow(); + expect(screen.getByTestId('t2')).toBeDefined(); + }); +}); diff --git a/plugins/scaffolder/src/components/TemplateList/TemplateList.tsx b/plugins/scaffolder/src/components/TemplateList/TemplateList.tsx index 90d1c8cceb..190c0cd0ac 100644 --- a/plugins/scaffolder/src/components/TemplateList/TemplateList.tsx +++ b/plugins/scaffolder/src/components/TemplateList/TemplateList.tsx @@ -40,6 +40,7 @@ export type TemplateListProps = { title?: React.ReactNode; filter: (entity: Entity) => boolean; }; + templateFilter?: (entity: Entity) => boolean; }; /** @@ -48,12 +49,13 @@ export type TemplateListProps = { export const TemplateList = ({ TemplateCardComponent, group, + templateFilter, }: TemplateListProps) => { const { loading, error, entities } = useEntityList(); const Card = TemplateCardComponent || TemplateCard; - const maybeFilteredEntities = group - ? entities.filter(e => group.filter(e)) - : entities; + const maybeFilteredEntities = ( + group ? entities.filter(e => group.filter(e)) : entities + ).filter(e => (templateFilter ? !templateFilter(e) : true)); const titleComponent: React.ReactNode = (() => { if (group && group.title) { diff --git a/plugins/scaffolder/src/next/Router/Router.tsx b/plugins/scaffolder/src/next/Router/Router.tsx index 5066e96d6c..8784cb7d0d 100644 --- a/plugins/scaffolder/src/next/Router/Router.tsx +++ b/plugins/scaffolder/src/next/Router/Router.tsx @@ -29,7 +29,10 @@ import { } from '@backstage/plugin-scaffolder-react'; import { TemplateEntityV1beta3 } from '@backstage/plugin-scaffolder-common'; -import { TemplateGroupFilter } from '../TemplateListPage/TemplateGroups'; +import { + TemplateGroupFilter, + TemplatetemplateFilterFilter, +} from '../TemplateListPage/TemplateGroups'; import { DEFAULT_SCAFFOLDER_FIELD_EXTENSIONS } from '../../extensions/default'; import { @@ -61,6 +64,7 @@ export type NextRouterProps = { }>; }; groups?: TemplateGroupFilter[]; + templateFilter?: TemplatetemplateFilterFilter; // todo(blam): rename this to formProps FormProps?: FormProps; contextMenu?: { @@ -111,6 +115,7 @@ export const Router = (props: PropsWithChildren) => { TemplateCardComponent={TemplateCardComponent} contextMenu={props.contextMenu} groups={props.groups} + templateFilter={props.templateFilter} /> } /> diff --git a/plugins/scaffolder/src/next/TemplateListPage/TemplateGroups.test.tsx b/plugins/scaffolder/src/next/TemplateListPage/TemplateGroups.test.tsx index 2b66f294fa..291804abbd 100644 --- a/plugins/scaffolder/src/next/TemplateListPage/TemplateGroups.test.tsx +++ b/plugins/scaffolder/src/next/TemplateListPage/TemplateGroups.test.tsx @@ -207,4 +207,52 @@ describe('TemplateGroups', () => { {}, ); }); + + 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( + + true }]} + templateFilter={e => e.metadata.name === 't1'} + /> + , + { + mountedRoutes: { + '/next': nextRouteRef, + }, + }, + ); + + expect(TemplateGroup).toHaveBeenCalledWith( + expect.objectContaining({ + templates: [expect.objectContaining({ template: mockEntities[1] })], + }), + {}, + ); + }); }); diff --git a/plugins/scaffolder/src/next/TemplateListPage/TemplateGroups.tsx b/plugins/scaffolder/src/next/TemplateListPage/TemplateGroups.tsx index 6f32bf38e5..a3e3467d06 100644 --- a/plugins/scaffolder/src/next/TemplateListPage/TemplateGroups.tsx +++ b/plugins/scaffolder/src/next/TemplateListPage/TemplateGroups.tsx @@ -34,6 +34,8 @@ import { TemplateGroup } from '@backstage/plugin-scaffolder-react/alpha'; import { viewTechDocRouteRef, selectedTemplateRouteRef } from '../../routes'; import { useNavigate } from 'react-router-dom'; +export type TemplatetemplateFilterFilter = (entity: Entity) => boolean; + /** * @alpha */ @@ -44,6 +46,7 @@ export type TemplateGroupFilter = { export interface TemplateGroupsProps { groups: TemplateGroupFilter[]; + templateFilter?: TemplatetemplateFilterFilter; TemplateCardComponent?: React.ComponentType<{ template: TemplateEntityV1beta3; }>; @@ -51,7 +54,7 @@ export interface TemplateGroupsProps { export const TemplateGroups = (props: TemplateGroupsProps) => { const { loading, error, entities } = useEntityList(); - const { groups, TemplateCardComponent } = props; + const { groups, templateFilter, TemplateCardComponent } = props; const errorApi = useApi(errorApiRef); const app = useApp(); const viewTechDocsLink = useRouteRef(viewTechDocRouteRef); @@ -90,6 +93,7 @@ export const TemplateGroups = (props: TemplateGroupsProps) => { <> {groups.map(({ title, filter }, index) => { const templates = entities + .filter(e => (templateFilter ? !templateFilter(e) : true)) .filter((e): e is TemplateEntityV1beta3 => filter(e)) .map(template => { const { kind, namespace, name } = parseEntityRef( diff --git a/plugins/scaffolder/src/next/TemplateListPage/TemplateListPage.tsx b/plugins/scaffolder/src/next/TemplateListPage/TemplateListPage.tsx index bddc15a61b..fd90098b96 100644 --- a/plugins/scaffolder/src/next/TemplateListPage/TemplateListPage.tsx +++ b/plugins/scaffolder/src/next/TemplateListPage/TemplateListPage.tsx @@ -35,7 +35,11 @@ import { import { CategoryPicker } from './CategoryPicker'; import { RegisterExistingButton } from './RegisterExistingButton'; import { useRouteRef } from '@backstage/core-plugin-api'; -import { TemplateGroupFilter, TemplateGroups } from './TemplateGroups'; +import { + TemplateGroupFilter, + TemplateGroups, + TemplatetemplateFilterFilter, +} from './TemplateGroups'; import { registerComponentRouteRef } from '../../routes'; import { ContextMenu } from './ContextMenu'; @@ -44,6 +48,7 @@ export type TemplateListPageProps = { template: TemplateEntityV1beta3; }>; groups?: TemplateGroupFilter[]; + templateFilter?: TemplatetemplateFilterFilter; contextMenu?: { editor?: boolean; actions?: boolean; @@ -68,7 +73,11 @@ const createGroupsWithOther = ( export const TemplateListPage = (props: TemplateListPageProps) => { const registerComponentLink = useRouteRef(registerComponentRouteRef); - const { TemplateCardComponent, groups: givenGroups = [] } = props; + const { + TemplateCardComponent, + groups: givenGroups = [], + templateFilter, + } = props; const groups = givenGroups.length ? createGroupsWithOther(givenGroups) @@ -111,6 +120,7 @@ export const TemplateListPage = (props: TemplateListPageProps) => {