diff --git a/.changeset/beige-glasses-dream.md b/.changeset/beige-glasses-dream.md new file mode 100644 index 0000000000..c1a9ad1857 --- /dev/null +++ b/.changeset/beige-glasses-dream.md @@ -0,0 +1,5 @@ +--- +'@backstage/plugin-scaffolder': patch +--- + +Allow to pass custom TemplateCard to ScaffolderPage diff --git a/plugins/scaffolder/api-report.md b/plugins/scaffolder/api-report.md index b005610f04..8887810a02 100644 --- a/plugins/scaffolder/api-report.md +++ b/plugins/scaffolder/api-report.md @@ -8,12 +8,16 @@ import { ApiHolder } from '@backstage/core-plugin-api'; import { ApiRef } from '@backstage/core-plugin-api'; import { BackstagePlugin } from '@backstage/core-plugin-api'; +import { ComponentProps } from 'react'; +import { ComponentType } from 'react'; import { DiscoveryApi } from '@backstage/core-plugin-api'; +import { Entity } from '@backstage/catalog-model'; import { EntityName } from '@backstage/catalog-model'; import { Extension } from '@backstage/core-plugin-api'; import { ExternalRouteRef } from '@backstage/core-plugin-api'; import { FieldProps } from '@rjsf/core'; import { FieldValidation } from '@rjsf/core'; +import { IconButton } from '@material-ui/core'; import { IdentityApi } from '@backstage/core-plugin-api'; import { JsonObject } from '@backstage/config'; import { JSONSchema } from '@backstage/catalog-model'; @@ -22,6 +26,7 @@ import { Observable } from '@backstage/core-plugin-api'; import { default as React_2 } from 'react'; import { RouteRef } from '@backstage/core-plugin-api'; import { ScmIntegrationRegistry } from '@backstage/integration'; +import { TemplateEntityV1beta2 } from '@backstage/catalog-model'; // Warning: (ae-missing-release-tag) "createScaffolderFieldExtension" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal) // @@ -74,6 +79,13 @@ export const EntityPicker: ({ // @public (undocumented) export const EntityPickerFieldExtension: () => null; +// Warning: (tsdoc-param-tag-missing-hyphen) The @param block should be followed by a parameter name and then a hyphen +// Warning: (ae-forgotten-export) The symbol "Props" needs to be exported by the entry point index.d.ts +// Warning: (ae-missing-release-tag) "FavouriteTemplate" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal) +// +// @public +export const FavouriteTemplate: (props: Props) => JSX.Element; + // Warning: (ae-missing-release-tag) "FieldExtensionOptions" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal) // // @public (undocumented) @@ -204,7 +216,15 @@ export const ScaffolderFieldExtensions: React_2.ComponentType; // Warning: (ae-missing-release-tag) "ScaffolderPage" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal) // // @public (undocumented) -export const ScaffolderPage: () => JSX.Element; +export const ScaffolderPage: ({ + TemplateCardComponent, +}: { + TemplateCardComponent?: + | ComponentType<{ + template: TemplateEntityV1beta2; + }> + | undefined; +}) => JSX.Element; // Warning: (ae-missing-release-tag) "scaffolderPlugin" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal) // diff --git a/plugins/scaffolder/src/components/FavouriteTemplate/index.ts b/plugins/scaffolder/src/components/FavouriteTemplate/index.ts new file mode 100644 index 0000000000..5955e88c01 --- /dev/null +++ b/plugins/scaffolder/src/components/FavouriteTemplate/index.ts @@ -0,0 +1,17 @@ +/* + * 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. + */ + +export * from './FavouriteTemplate'; diff --git a/plugins/scaffolder/src/components/Router.tsx b/plugins/scaffolder/src/components/Router.tsx index 3d7bbcaf5f..9e4736ab9f 100644 --- a/plugins/scaffolder/src/components/Router.tsx +++ b/plugins/scaffolder/src/components/Router.tsx @@ -14,8 +14,9 @@ * limitations under the License. */ -import React from 'react'; +import React, { ComponentType } from 'react'; import { Routes, Route, useOutlet } from 'react-router'; +import { TemplateEntityV1beta2 } from '@backstage/catalog-model'; import { ScaffolderPage } from './ScaffolderPage'; import { TemplatePage } from './TemplatePage'; import { TaskPage } from './TaskPage'; @@ -29,7 +30,13 @@ import { } from '../extensions'; import { useElementFilter } from '@backstage/core-plugin-api'; -export const Router = () => { +type RouterProps = { + TemplateCardComponent?: + | ComponentType<{ template: TemplateEntityV1beta2 }> + | undefined; +}; + +export const Router = ({ TemplateCardComponent }: RouterProps) => { const outlet = useOutlet(); const customFieldExtensions = useElementFilter(outlet, elements => @@ -54,7 +61,12 @@ export const Router = () => { return ( - } /> + + } + /> } diff --git a/plugins/scaffolder/src/components/ScaffolderPage/ScaffolderPage.tsx b/plugins/scaffolder/src/components/ScaffolderPage/ScaffolderPage.tsx index 859e5bba93..ec7bd6f468 100644 --- a/plugins/scaffolder/src/components/ScaffolderPage/ScaffolderPage.tsx +++ b/plugins/scaffolder/src/components/ScaffolderPage/ScaffolderPage.tsx @@ -23,6 +23,7 @@ import { Page, SupportButton, } from '@backstage/core-components'; +import { TemplateEntityV1beta2 } from '@backstage/catalog-model'; import { useRouteRef } from '@backstage/core-plugin-api'; import { EntityKindPicker, @@ -32,7 +33,7 @@ import { UserListPicker, } from '@backstage/plugin-catalog-react'; import { makeStyles } from '@material-ui/core'; -import React from 'react'; +import React, { ComponentType } from 'react'; import { registerComponentRouteRef } from '../../routes'; import { TemplateList } from '../TemplateList'; import { TemplateTypePicker } from '../TemplateTypePicker'; @@ -46,7 +47,15 @@ const useStyles = makeStyles(theme => ({ }, })); -export const ScaffolderPageContents = () => { +export type ScaffolderPageProps = { + TemplateCardComponent?: + | ComponentType<{ template: TemplateEntityV1beta2 }> + | undefined; +}; + +export const ScaffolderPageContents = ({ + TemplateCardComponent, +}: ScaffolderPageProps) => { const styles = useStyles(); const registerComponentLink = useRouteRef(registerComponentRouteRef); @@ -87,7 +96,7 @@ export const ScaffolderPageContents = () => {
- +
@@ -95,8 +104,10 @@ export const ScaffolderPageContents = () => { ); }; -export const ScaffolderPage = () => ( +export const ScaffolderPage = ({ + TemplateCardComponent, +}: ScaffolderPageProps) => ( - + ); diff --git a/plugins/scaffolder/src/components/TemplateList/TemplateList.tsx b/plugins/scaffolder/src/components/TemplateList/TemplateList.tsx index 009342c379..dcf708db10 100644 --- a/plugins/scaffolder/src/components/TemplateList/TemplateList.tsx +++ b/plugins/scaffolder/src/components/TemplateList/TemplateList.tsx @@ -14,8 +14,11 @@ * limitations under the License. */ -import React from 'react'; -import { TemplateEntityV1beta2 } from '@backstage/catalog-model'; +import React, { ComponentType } from 'react'; +import { + stringifyEntityRef, + TemplateEntityV1beta2, +} from '@backstage/catalog-model'; import { ItemCardGrid, Progress, @@ -25,8 +28,15 @@ import { useEntityListProvider } from '@backstage/plugin-catalog-react'; import { Link, Typography } from '@material-ui/core'; import { TemplateCard } from '../TemplateCard'; -export const TemplateList = () => { +export type TemplateListProps = { + TemplateCardComponent?: + | ComponentType<{ template: TemplateEntityV1beta2 }> + | undefined; +}; + +export const TemplateList = ({ TemplateCardComponent }: TemplateListProps) => { const { loading, error, entities } = useEntityListProvider(); + const Card = TemplateCardComponent || TemplateCard; return ( <> {loading && } @@ -50,9 +60,9 @@ export const TemplateList = () => { {entities && entities?.length > 0 && - entities.map((template, i) => ( - ( + ))} diff --git a/plugins/scaffolder/src/index.ts b/plugins/scaffolder/src/index.ts index 989b3b53ce..c0e652b44c 100644 --- a/plugins/scaffolder/src/index.ts +++ b/plugins/scaffolder/src/index.ts @@ -37,3 +37,4 @@ export { RepoUrlPicker, TextValuePicker, } from './components/fields'; +export { FavouriteTemplate } from './components/FavouriteTemplate';