From db19eeac70c7ec2d091a042ec42f50305d65bbe1 Mon Sep 17 00:00:00 2001 From: Kalle Ericson <7943407+kalleericson@users.noreply.github.com> Date: Mon, 18 Nov 2024 13:30:51 +0100 Subject: [PATCH 1/8] Feat: Additional test coverage and component structure for TemplateCard Signed-off-by: Kalle Ericson <7943407+kalleericson@users.noreply.github.com> --- .../next/components/TemplateCard/CardLink.tsx | 2 +- .../components/TemplateCard/TemplateCard.tsx | 176 ++++-------------- .../TemplateCard/TemplateCardActions.tsx | 86 +++++++++ .../TemplateCard/TemplateCardContent.tsx | 59 ++++++ .../TemplateCard/TemplateCardLinks.tsx | 82 ++++++++ .../TemplateCard/TemplateCardTags.tsx | 55 ++++++ .../src/next/components/TemplateCard/index.ts | 24 ++- 7 files changed, 340 insertions(+), 144 deletions(-) create mode 100644 plugins/scaffolder-react/src/next/components/TemplateCard/TemplateCardActions.tsx create mode 100644 plugins/scaffolder-react/src/next/components/TemplateCard/TemplateCardContent.tsx create mode 100644 plugins/scaffolder-react/src/next/components/TemplateCard/TemplateCardLinks.tsx create mode 100644 plugins/scaffolder-react/src/next/components/TemplateCard/TemplateCardTags.tsx diff --git a/plugins/scaffolder-react/src/next/components/TemplateCard/CardLink.tsx b/plugins/scaffolder-react/src/next/components/TemplateCard/CardLink.tsx index 263a1356b7..4aa63e4555 100644 --- a/plugins/scaffolder-react/src/next/components/TemplateCard/CardLink.tsx +++ b/plugins/scaffolder-react/src/next/components/TemplateCard/CardLink.tsx @@ -19,7 +19,7 @@ import { Link } from '@backstage/core-components'; import { makeStyles } from '@material-ui/core/styles'; import React from 'react'; -interface CardLinkProps { +export interface CardLinkProps { icon: IconComponent; text: string; url: string; diff --git a/plugins/scaffolder-react/src/next/components/TemplateCard/TemplateCard.tsx b/plugins/scaffolder-react/src/next/components/TemplateCard/TemplateCard.tsx index 5d2c8aa7fe..73b8e71de9 100644 --- a/plugins/scaffolder-react/src/next/components/TemplateCard/TemplateCard.tsx +++ b/plugins/scaffolder-react/src/next/components/TemplateCard/TemplateCard.tsx @@ -15,81 +15,41 @@ */ import { RELATION_OWNED_BY } from '@backstage/catalog-model'; -import { MarkdownContent, UserIcon } from '@backstage/core-components'; -import { - IconComponent, - useAnalytics, - useApp, -} from '@backstage/core-plugin-api'; -import { - EntityRefLinks, - getEntityRelations, -} from '@backstage/plugin-catalog-react'; +import { IconComponent, useAnalytics } from '@backstage/core-plugin-api'; +import { getEntityRelations } from '@backstage/plugin-catalog-react'; import { TemplateEntityV1beta3 } from '@backstage/plugin-scaffolder-common'; -import Box from '@material-ui/core/Box'; import Card from '@material-ui/core/Card'; import CardActions from '@material-ui/core/CardActions'; import CardContent from '@material-ui/core/CardContent'; -import Chip from '@material-ui/core/Chip'; import Divider from '@material-ui/core/Divider'; -import Button from '@material-ui/core/Button'; import Grid from '@material-ui/core/Grid'; import { makeStyles, Theme } from '@material-ui/core/styles'; -import LanguageIcon from '@material-ui/icons/Language'; import React, { useCallback } from 'react'; import { CardHeader } from './CardHeader'; -import { CardLink } from './CardLink'; import { usePermission } from '@backstage/plugin-permission-react'; import { taskCreatePermission } from '@backstage/plugin-scaffolder-common/alpha'; +import { TemplateCardContent } from './TemplateCardContent'; +import { TemplateCardTags } from './TemplateCardTags'; +import { TemplateCardLinks } from './TemplateCardLinks'; +import { TemplateCardActions } from './TemplateCardActions'; -const useStyles = makeStyles(theme => ({ - box: { - overflow: 'hidden', - textOverflow: 'ellipsis', - display: '-webkit-box', - '-webkit-line-clamp': 10, - '-webkit-box-orient': 'vertical', - }, - markdown: { - /** to make the styles for React Markdown not leak into the description */ - '& :first-child': { - margin: 0, - }, - }, - label: { - color: theme.palette.text.secondary, - textTransform: 'uppercase', - fontWeight: 'bold', - letterSpacing: 0.5, - lineHeight: 1, - fontSize: '0.75rem', - }, - footer: { - display: 'flex', - justifyContent: 'space-between', - flex: 1, - alignItems: 'center', - }, - ownedBy: { - display: 'flex', - alignItems: 'center', - flex: 1, - color: theme.palette.link, - }, +const useStyles = makeStyles(() => ({ + actionContainer: { padding: '16px', flex: 1, alignItems: 'flex-end' }, })); +export interface TemplateCardAdditionalLink { + icon: IconComponent; + text: string; + url: string; +} + /** * The Props for the {@link TemplateCard} component * @alpha */ export interface TemplateCardProps { template: TemplateEntityV1beta3; - additionalLinks?: { - icon: IconComponent; - text: string; - url: string; - }[]; - + additionalLinks?: TemplateCardAdditionalLink[]; onSelected?: (template: TemplateEntityV1beta3) => void; } @@ -98,16 +58,13 @@ export interface TemplateCardProps { * @alpha */ export const TemplateCard = (props: TemplateCardProps) => { - const { onSelected, template } = props; + const { additionalLinks, onSelected, template } = props; const styles = useStyles(); const analytics = useAnalytics(); const ownedByRelations = getEntityRelations(template, RELATION_OWNED_BY); - 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; + !!additionalLinks?.length || !!template.metadata.links?.length; const displayDefaultDivider = !hasTags && !hasLinks; const { allowed: canCreateTask } = usePermission({ @@ -120,98 +77,33 @@ export const TemplateCard = (props: TemplateCardProps) => { return ( - + - - - - - - + + {displayDefaultDivider && ( )} - {hasTags && ( - <> - - - - - - {template.metadata.tags?.map(tag => ( - - - - ))} - - - - )} + {hasTags && } {hasLinks && ( - <> - - - - - - {props.additionalLinks?.map(({ icon, text, url }, index) => ( - - - - ))} - {template.metadata.links?.map( - ({ url, icon, title }, index) => ( - - - - ), - )} - - - + )} - -
-
- {ownedByRelations.length > 0 && ( - <> - - - - )} -
- {canCreateTask ? ( - - ) : null} -
+ + ); diff --git a/plugins/scaffolder-react/src/next/components/TemplateCard/TemplateCardActions.tsx b/plugins/scaffolder-react/src/next/components/TemplateCard/TemplateCardActions.tsx new file mode 100644 index 0000000000..e8a84487df --- /dev/null +++ b/plugins/scaffolder-react/src/next/components/TemplateCard/TemplateCardActions.tsx @@ -0,0 +1,86 @@ +/* + * 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 { UserIcon } from '@backstage/core-components'; +import { EntityRefLinks } from '@backstage/plugin-catalog-react'; +import Button from '@material-ui/core/Button'; +import { makeStyles, Theme } from '@material-ui/core/styles'; +import React from 'react'; + +const useStyles = makeStyles(theme => ({ + footer: { + display: 'flex', + justifyContent: 'space-between', + flex: 1, + alignItems: 'center', + }, + ownedBy: { + display: 'flex', + alignItems: 'center', + flex: 1, + color: theme.palette.link, + }, + actionContainer: { padding: '16px', flex: 1, alignItems: 'flex-end' }, +})); + +/** + * The Props for the {@link TemplateCardActions} component + * @alpha + */ +export interface TemplateCardActionsProps { + ownedByRelations: any; + canCreateTask: boolean; + handleChoose: () => void; +} +export const TemplateCardActions = ({ + canCreateTask, + handleChoose, + ownedByRelations, +}: TemplateCardActionsProps) => { + const styles = useStyles(); + + return ( +
+
+ {ownedByRelations.length > 0 && ( + <> + + + + )} +
+ {canCreateTask ? ( + + ) : null} +
+ ); +}; diff --git a/plugins/scaffolder-react/src/next/components/TemplateCard/TemplateCardContent.tsx b/plugins/scaffolder-react/src/next/components/TemplateCard/TemplateCardContent.tsx new file mode 100644 index 0000000000..fad5c85474 --- /dev/null +++ b/plugins/scaffolder-react/src/next/components/TemplateCard/TemplateCardContent.tsx @@ -0,0 +1,59 @@ +/* + * 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 { MarkdownContent } from '@backstage/core-components'; +import type { TemplateEntityV1beta3 } from '@backstage/plugin-scaffolder-common'; +import { makeStyles } from '@material-ui/core/styles'; +import Box from '@material-ui/core/Box'; +import Grid from '@material-ui/core/Grid'; +import React from 'react'; + +const useStyles = makeStyles(() => ({ + box: { + overflow: 'hidden', + textOverflow: 'ellipsis', + display: '-webkit-box', + '-webkit-line-clamp': 10, + '-webkit-box-orient': 'vertical', + }, + markdown: { + /** to make the styles for React Markdown not leak into the description */ + '& :first-child': { + margin: 0, + }, + }, +})); + +/** + * The Props for the {@link TemplateCardContent} component + * @alpha + */ +export interface TemplateCardContentProps { + template: TemplateEntityV1beta3; +} +export const TemplateCardContent = ({ template }: TemplateCardContentProps) => { + const styles = useStyles(); + return ( + + + + + + ); +}; diff --git a/plugins/scaffolder-react/src/next/components/TemplateCard/TemplateCardLinks.tsx b/plugins/scaffolder-react/src/next/components/TemplateCard/TemplateCardLinks.tsx new file mode 100644 index 0000000000..845c4c1621 --- /dev/null +++ b/plugins/scaffolder-react/src/next/components/TemplateCard/TemplateCardLinks.tsx @@ -0,0 +1,82 @@ +/* + * 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 { IconComponent, useApp } from '@backstage/core-plugin-api'; +import { TemplateEntityV1beta3 } from '@backstage/plugin-scaffolder-common'; +import Divider from '@material-ui/core/Divider'; +import Grid from '@material-ui/core/Grid'; +import { makeStyles, Theme } from '@material-ui/core/styles'; +import LanguageIcon from '@material-ui/icons/Language'; +import React from 'react'; +import { CardLink } from './CardLink'; +import { TemplateCardAdditionalLink } from './TemplateCard'; + +const useStyles = makeStyles({}); + +/** + * The Props for the {@link TemplateCardLinks} component + * @alpha + */ +export interface TemplateCardLinksProps { + template: TemplateEntityV1beta3; + additionalLinks?: TemplateCardAdditionalLink[]; +} +export const TemplateCardLinks = ({ + template, + additionalLinks, +}: TemplateCardLinksProps) => { + const styles = useStyles(); + const app = useApp(); + const iconResolver = (key?: string): IconComponent => + key ? app.getSystemIcon(key) ?? LanguageIcon : LanguageIcon; + return ( + <> + + + + + + {additionalLinks?.map(({ icon, text, url }, index) => ( + + + + ))} + {template.metadata.links?.map(({ url, icon, title }, index) => ( + + + + ))} + + + + ); +}; diff --git a/plugins/scaffolder-react/src/next/components/TemplateCard/TemplateCardTags.tsx b/plugins/scaffolder-react/src/next/components/TemplateCard/TemplateCardTags.tsx new file mode 100644 index 0000000000..88550e2104 --- /dev/null +++ b/plugins/scaffolder-react/src/next/components/TemplateCard/TemplateCardTags.tsx @@ -0,0 +1,55 @@ +/* + * 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 type { TemplateEntityV1beta3 } from '@backstage/plugin-scaffolder-common'; +import Chip from '@material-ui/core/Chip'; +import Divider from '@material-ui/core/Divider'; +import Grid from '@material-ui/core/Grid'; +import React from 'react'; + +/** + * The Props for the {@link TemplateCardTags} component + * @alpha + */ +export interface TemplateCardTagsProps { + template: TemplateEntityV1beta3; +} +export const TemplateCardTags = ({ template }: TemplateCardTagsProps) => ( + <> + + + + + + {template.metadata.tags?.map(tag => ( + + + + ))} + + + +); diff --git a/plugins/scaffolder-react/src/next/components/TemplateCard/index.ts b/plugins/scaffolder-react/src/next/components/TemplateCard/index.ts index 529aa938e4..aa13b79284 100644 --- a/plugins/scaffolder-react/src/next/components/TemplateCard/index.ts +++ b/plugins/scaffolder-react/src/next/components/TemplateCard/index.ts @@ -13,4 +13,26 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -export { TemplateCard, type TemplateCardProps } from './TemplateCard'; +export { + TemplateCard, + type TemplateCardProps, + type TemplateCardAdditionalLink, +} from './TemplateCard'; +export { + TemplateCardContent, + type TemplateCardContentProps, +} from './TemplateCardContent'; +export { + TemplateCardTags, + type TemplateCardTagsProps, +} from './TemplateCardTags'; +export { + TemplateCardLinks, + type TemplateCardLinksProps, +} from './TemplateCardLinks'; +export { + TemplateCardActions, + type TemplateCardActionsProps, +} from './TemplateCardActions'; +export { CardHeader, type CardHeaderProps } from './CardHeader'; +export { CardLink, type CardLinkProps } from './CardLink'; From 28e286f14600d4c6ff9280829d51acdb0c3fba5b Mon Sep 17 00:00:00 2001 From: Kalle Ericson <7943407+kalleericson@users.noreply.github.com> Date: Mon, 18 Nov 2024 13:38:30 +0100 Subject: [PATCH 2/8] Changeset Signed-off-by: Kalle Ericson <7943407+kalleericson@users.noreply.github.com> --- .changeset/kind-jobs-remain.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/kind-jobs-remain.md diff --git a/.changeset/kind-jobs-remain.md b/.changeset/kind-jobs-remain.md new file mode 100644 index 0000000000..ed6ecbc347 --- /dev/null +++ b/.changeset/kind-jobs-remain.md @@ -0,0 +1,5 @@ +--- +'@backstage/plugin-scaffolder-react': patch +--- + +Added test coverage selectors to components, and broke up TemplateCard into exposable components From da10bec2665d068b48144f0b3023f49a17d99ec0 Mon Sep 17 00:00:00 2001 From: Kalle Ericson <7943407+kalleericson@users.noreply.github.com> Date: Mon, 18 Nov 2024 14:20:46 +0100 Subject: [PATCH 3/8] Updating API docs Signed-off-by: Kalle Ericson <7943407+kalleericson@users.noreply.github.com> --- plugins/scaffolder-react/report-alpha.api.md | 95 ++++++++++++++++++- .../components/TemplateCard/CardHeader.tsx | 2 + .../next/components/TemplateCard/CardLink.tsx | 8 ++ .../components/TemplateCard/TemplateCard.tsx | 1 + .../TemplateCard/TemplateCardActions.tsx | 4 + .../TemplateCard/TemplateCardContent.tsx | 4 + .../TemplateCard/TemplateCardLinks.tsx | 4 + .../TemplateCard/TemplateCardTags.tsx | 4 + 8 files changed, 117 insertions(+), 5 deletions(-) diff --git a/plugins/scaffolder-react/report-alpha.api.md b/plugins/scaffolder-react/report-alpha.api.md index 7084625ad4..1d2c4138d0 100644 --- a/plugins/scaffolder-react/report-alpha.api.md +++ b/plugins/scaffolder-react/report-alpha.api.md @@ -54,6 +54,32 @@ export type BackstageTemplateStepperClassKey = | 'footer' | 'formWrapper'; +// @alpha +export const CardHeader: (props: CardHeaderProps) => React_2.JSX.Element; + +// @alpha +export interface CardHeaderProps { + // (undocumented) + template: TemplateEntityV1beta3; +} + +// @alpha +export const CardLink: ({ + icon: Icon, + text, + url, +}: CardLinkProps) => React_2.JSX.Element; + +// @alpha +export interface CardLinkProps { + // (undocumented) + icon: IconComponent; + // (undocumented) + text: string; + // (undocumented) + url: string; +} + // @alpha (undocumented) export const createAsyncValidators: ( rootSchema: JsonObject, @@ -266,20 +292,79 @@ export interface TaskStepsProps { // @alpha export const TemplateCard: (props: TemplateCardProps) => React_2.JSX.Element; +// @alpha +export const TemplateCardActions: ({ + canCreateTask, + handleChoose, + ownedByRelations, +}: TemplateCardActionsProps) => React_2.JSX.Element; + +// @alpha +export interface TemplateCardActionsProps { + // (undocumented) + canCreateTask: boolean; + // (undocumented) + handleChoose: () => void; + // (undocumented) + ownedByRelations: any; +} + +// @alpha (undocumented) +export interface TemplateCardAdditionalLink { + // (undocumented) + icon: IconComponent; + // (undocumented) + text: string; + // (undocumented) + url: string; +} + +// @alpha +export const TemplateCardContent: ({ + template, +}: TemplateCardContentProps) => React_2.JSX.Element; + +// @alpha +export interface TemplateCardContentProps { + // (undocumented) + template: TemplateEntityV1beta3; +} + +// @alpha +export const TemplateCardLinks: ({ + template, + additionalLinks, +}: TemplateCardLinksProps) => React_2.JSX.Element; + +// @alpha +export interface TemplateCardLinksProps { + // (undocumented) + additionalLinks?: TemplateCardAdditionalLink[]; + // (undocumented) + template: TemplateEntityV1beta3; +} + // @alpha export interface TemplateCardProps { // (undocumented) - additionalLinks?: { - icon: IconComponent; - text: string; - url: string; - }[]; + additionalLinks?: TemplateCardAdditionalLink[]; // (undocumented) onSelected?: (template: TemplateEntityV1beta3) => void; // (undocumented) template: TemplateEntityV1beta3; } +// @alpha +export const TemplateCardTags: ({ + template, +}: TemplateCardTagsProps) => React_2.JSX.Element; + +// @alpha +export interface TemplateCardTagsProps { + // (undocumented) + template: TemplateEntityV1beta3; +} + // @alpha export const TemplateCategoryPicker: () => React_2.JSX.Element | null; diff --git a/plugins/scaffolder-react/src/next/components/TemplateCard/CardHeader.tsx b/plugins/scaffolder-react/src/next/components/TemplateCard/CardHeader.tsx index 467d26ce76..5c7bb7f627 100644 --- a/plugins/scaffolder-react/src/next/components/TemplateCard/CardHeader.tsx +++ b/plugins/scaffolder-react/src/next/components/TemplateCard/CardHeader.tsx @@ -39,6 +39,7 @@ const useStyles = makeStyles< /** * Props for the CardHeader component + * @alpha */ export interface CardHeaderProps { template: TemplateEntityV1beta3; @@ -46,6 +47,7 @@ export interface CardHeaderProps { /** * The Card Header with the background for the TemplateCard. + * @alpha */ export const CardHeader = (props: CardHeaderProps) => { const { diff --git a/plugins/scaffolder-react/src/next/components/TemplateCard/CardLink.tsx b/plugins/scaffolder-react/src/next/components/TemplateCard/CardLink.tsx index 4aa63e4555..832c36ef1e 100644 --- a/plugins/scaffolder-react/src/next/components/TemplateCard/CardLink.tsx +++ b/plugins/scaffolder-react/src/next/components/TemplateCard/CardLink.tsx @@ -19,6 +19,10 @@ import { Link } from '@backstage/core-components'; import { makeStyles } from '@material-ui/core/styles'; import React from 'react'; +/** + * Props for the Card Links component + * @alpha + */ export interface CardLinkProps { icon: IconComponent; text: string; @@ -32,6 +36,10 @@ const useStyles = makeStyles(() => ({ }, })); +/** + * The Card Links used for the TemplateCard. + * @alpha + */ export const CardLink = ({ icon: Icon, text, url }: CardLinkProps) => { const styles = useStyles(); diff --git a/plugins/scaffolder-react/src/next/components/TemplateCard/TemplateCard.tsx b/plugins/scaffolder-react/src/next/components/TemplateCard/TemplateCard.tsx index 73b8e71de9..dab69e092d 100644 --- a/plugins/scaffolder-react/src/next/components/TemplateCard/TemplateCard.tsx +++ b/plugins/scaffolder-react/src/next/components/TemplateCard/TemplateCard.tsx @@ -37,6 +37,7 @@ const useStyles = makeStyles(() => ({ actionContainer: { padding: '16px', flex: 1, alignItems: 'flex-end' }, })); +/** @alpha */ export interface TemplateCardAdditionalLink { icon: IconComponent; text: string; diff --git a/plugins/scaffolder-react/src/next/components/TemplateCard/TemplateCardActions.tsx b/plugins/scaffolder-react/src/next/components/TemplateCard/TemplateCardActions.tsx index e8a84487df..182075f78c 100644 --- a/plugins/scaffolder-react/src/next/components/TemplateCard/TemplateCardActions.tsx +++ b/plugins/scaffolder-react/src/next/components/TemplateCard/TemplateCardActions.tsx @@ -45,6 +45,10 @@ export interface TemplateCardActionsProps { canCreateTask: boolean; handleChoose: () => void; } +/** + * The `TemplateCardActions` component that is rendered at the Actions-section of the TemplateCard + * @alpha + */ export const TemplateCardActions = ({ canCreateTask, handleChoose, diff --git a/plugins/scaffolder-react/src/next/components/TemplateCard/TemplateCardContent.tsx b/plugins/scaffolder-react/src/next/components/TemplateCard/TemplateCardContent.tsx index fad5c85474..a335d73616 100644 --- a/plugins/scaffolder-react/src/next/components/TemplateCard/TemplateCardContent.tsx +++ b/plugins/scaffolder-react/src/next/components/TemplateCard/TemplateCardContent.tsx @@ -44,6 +44,10 @@ const useStyles = makeStyles(() => ({ export interface TemplateCardContentProps { template: TemplateEntityV1beta3; } +/** + * The `TemplateCardContent` component that is rendered at the Content-section of the TemplateCard + * @alpha + */ export const TemplateCardContent = ({ template }: TemplateCardContentProps) => { const styles = useStyles(); return ( diff --git a/plugins/scaffolder-react/src/next/components/TemplateCard/TemplateCardLinks.tsx b/plugins/scaffolder-react/src/next/components/TemplateCard/TemplateCardLinks.tsx index 845c4c1621..2fa244a2b7 100644 --- a/plugins/scaffolder-react/src/next/components/TemplateCard/TemplateCardLinks.tsx +++ b/plugins/scaffolder-react/src/next/components/TemplateCard/TemplateCardLinks.tsx @@ -34,6 +34,10 @@ export interface TemplateCardLinksProps { template: TemplateEntityV1beta3; additionalLinks?: TemplateCardAdditionalLink[]; } +/** + * The `TemplateCardLinks` component that is rendered at the Links-section of the TemplateCard + * @alpha + */ export const TemplateCardLinks = ({ template, additionalLinks, diff --git a/plugins/scaffolder-react/src/next/components/TemplateCard/TemplateCardTags.tsx b/plugins/scaffolder-react/src/next/components/TemplateCard/TemplateCardTags.tsx index 88550e2104..c4cb22410a 100644 --- a/plugins/scaffolder-react/src/next/components/TemplateCard/TemplateCardTags.tsx +++ b/plugins/scaffolder-react/src/next/components/TemplateCard/TemplateCardTags.tsx @@ -27,6 +27,10 @@ import React from 'react'; export interface TemplateCardTagsProps { template: TemplateEntityV1beta3; } +/** + * The `TemplateCardTags` component that is rendered at the Tags-section of the TemplateCard + * @alpha + */ export const TemplateCardTags = ({ template }: TemplateCardTagsProps) => ( <> From c6be12e1ef17e51fa94ad99ad0ac4f8dabacb411 Mon Sep 17 00:00:00 2001 From: Kalle Ericson <7943407+kalleericson@users.noreply.github.com> Date: Mon, 9 Dec 2024 13:20:42 +0100 Subject: [PATCH 4/8] Revert "Updating API docs" This reverts commit da10bec2665d068b48144f0b3023f49a17d99ec0. Signed-off-by: Kalle Ericson <7943407+kalleericson@users.noreply.github.com> --- plugins/scaffolder-react/report-alpha.api.md | 95 +------------------ .../components/TemplateCard/CardHeader.tsx | 2 - .../next/components/TemplateCard/CardLink.tsx | 8 -- .../components/TemplateCard/TemplateCard.tsx | 1 - .../TemplateCard/TemplateCardActions.tsx | 4 - .../TemplateCard/TemplateCardContent.tsx | 4 - .../TemplateCard/TemplateCardLinks.tsx | 4 - .../TemplateCard/TemplateCardTags.tsx | 4 - 8 files changed, 5 insertions(+), 117 deletions(-) diff --git a/plugins/scaffolder-react/report-alpha.api.md b/plugins/scaffolder-react/report-alpha.api.md index 1d2c4138d0..7084625ad4 100644 --- a/plugins/scaffolder-react/report-alpha.api.md +++ b/plugins/scaffolder-react/report-alpha.api.md @@ -54,32 +54,6 @@ export type BackstageTemplateStepperClassKey = | 'footer' | 'formWrapper'; -// @alpha -export const CardHeader: (props: CardHeaderProps) => React_2.JSX.Element; - -// @alpha -export interface CardHeaderProps { - // (undocumented) - template: TemplateEntityV1beta3; -} - -// @alpha -export const CardLink: ({ - icon: Icon, - text, - url, -}: CardLinkProps) => React_2.JSX.Element; - -// @alpha -export interface CardLinkProps { - // (undocumented) - icon: IconComponent; - // (undocumented) - text: string; - // (undocumented) - url: string; -} - // @alpha (undocumented) export const createAsyncValidators: ( rootSchema: JsonObject, @@ -292,79 +266,20 @@ export interface TaskStepsProps { // @alpha export const TemplateCard: (props: TemplateCardProps) => React_2.JSX.Element; -// @alpha -export const TemplateCardActions: ({ - canCreateTask, - handleChoose, - ownedByRelations, -}: TemplateCardActionsProps) => React_2.JSX.Element; - -// @alpha -export interface TemplateCardActionsProps { - // (undocumented) - canCreateTask: boolean; - // (undocumented) - handleChoose: () => void; - // (undocumented) - ownedByRelations: any; -} - -// @alpha (undocumented) -export interface TemplateCardAdditionalLink { - // (undocumented) - icon: IconComponent; - // (undocumented) - text: string; - // (undocumented) - url: string; -} - -// @alpha -export const TemplateCardContent: ({ - template, -}: TemplateCardContentProps) => React_2.JSX.Element; - -// @alpha -export interface TemplateCardContentProps { - // (undocumented) - template: TemplateEntityV1beta3; -} - -// @alpha -export const TemplateCardLinks: ({ - template, - additionalLinks, -}: TemplateCardLinksProps) => React_2.JSX.Element; - -// @alpha -export interface TemplateCardLinksProps { - // (undocumented) - additionalLinks?: TemplateCardAdditionalLink[]; - // (undocumented) - template: TemplateEntityV1beta3; -} - // @alpha export interface TemplateCardProps { // (undocumented) - additionalLinks?: TemplateCardAdditionalLink[]; + additionalLinks?: { + icon: IconComponent; + text: string; + url: string; + }[]; // (undocumented) onSelected?: (template: TemplateEntityV1beta3) => void; // (undocumented) template: TemplateEntityV1beta3; } -// @alpha -export const TemplateCardTags: ({ - template, -}: TemplateCardTagsProps) => React_2.JSX.Element; - -// @alpha -export interface TemplateCardTagsProps { - // (undocumented) - template: TemplateEntityV1beta3; -} - // @alpha export const TemplateCategoryPicker: () => React_2.JSX.Element | null; diff --git a/plugins/scaffolder-react/src/next/components/TemplateCard/CardHeader.tsx b/plugins/scaffolder-react/src/next/components/TemplateCard/CardHeader.tsx index 5c7bb7f627..467d26ce76 100644 --- a/plugins/scaffolder-react/src/next/components/TemplateCard/CardHeader.tsx +++ b/plugins/scaffolder-react/src/next/components/TemplateCard/CardHeader.tsx @@ -39,7 +39,6 @@ const useStyles = makeStyles< /** * Props for the CardHeader component - * @alpha */ export interface CardHeaderProps { template: TemplateEntityV1beta3; @@ -47,7 +46,6 @@ export interface CardHeaderProps { /** * The Card Header with the background for the TemplateCard. - * @alpha */ export const CardHeader = (props: CardHeaderProps) => { const { diff --git a/plugins/scaffolder-react/src/next/components/TemplateCard/CardLink.tsx b/plugins/scaffolder-react/src/next/components/TemplateCard/CardLink.tsx index 832c36ef1e..4aa63e4555 100644 --- a/plugins/scaffolder-react/src/next/components/TemplateCard/CardLink.tsx +++ b/plugins/scaffolder-react/src/next/components/TemplateCard/CardLink.tsx @@ -19,10 +19,6 @@ import { Link } from '@backstage/core-components'; import { makeStyles } from '@material-ui/core/styles'; import React from 'react'; -/** - * Props for the Card Links component - * @alpha - */ export interface CardLinkProps { icon: IconComponent; text: string; @@ -36,10 +32,6 @@ const useStyles = makeStyles(() => ({ }, })); -/** - * The Card Links used for the TemplateCard. - * @alpha - */ export const CardLink = ({ icon: Icon, text, url }: CardLinkProps) => { const styles = useStyles(); diff --git a/plugins/scaffolder-react/src/next/components/TemplateCard/TemplateCard.tsx b/plugins/scaffolder-react/src/next/components/TemplateCard/TemplateCard.tsx index dab69e092d..73b8e71de9 100644 --- a/plugins/scaffolder-react/src/next/components/TemplateCard/TemplateCard.tsx +++ b/plugins/scaffolder-react/src/next/components/TemplateCard/TemplateCard.tsx @@ -37,7 +37,6 @@ const useStyles = makeStyles(() => ({ actionContainer: { padding: '16px', flex: 1, alignItems: 'flex-end' }, })); -/** @alpha */ export interface TemplateCardAdditionalLink { icon: IconComponent; text: string; diff --git a/plugins/scaffolder-react/src/next/components/TemplateCard/TemplateCardActions.tsx b/plugins/scaffolder-react/src/next/components/TemplateCard/TemplateCardActions.tsx index 182075f78c..e8a84487df 100644 --- a/plugins/scaffolder-react/src/next/components/TemplateCard/TemplateCardActions.tsx +++ b/plugins/scaffolder-react/src/next/components/TemplateCard/TemplateCardActions.tsx @@ -45,10 +45,6 @@ export interface TemplateCardActionsProps { canCreateTask: boolean; handleChoose: () => void; } -/** - * The `TemplateCardActions` component that is rendered at the Actions-section of the TemplateCard - * @alpha - */ export const TemplateCardActions = ({ canCreateTask, handleChoose, diff --git a/plugins/scaffolder-react/src/next/components/TemplateCard/TemplateCardContent.tsx b/plugins/scaffolder-react/src/next/components/TemplateCard/TemplateCardContent.tsx index a335d73616..fad5c85474 100644 --- a/plugins/scaffolder-react/src/next/components/TemplateCard/TemplateCardContent.tsx +++ b/plugins/scaffolder-react/src/next/components/TemplateCard/TemplateCardContent.tsx @@ -44,10 +44,6 @@ const useStyles = makeStyles(() => ({ export interface TemplateCardContentProps { template: TemplateEntityV1beta3; } -/** - * The `TemplateCardContent` component that is rendered at the Content-section of the TemplateCard - * @alpha - */ export const TemplateCardContent = ({ template }: TemplateCardContentProps) => { const styles = useStyles(); return ( diff --git a/plugins/scaffolder-react/src/next/components/TemplateCard/TemplateCardLinks.tsx b/plugins/scaffolder-react/src/next/components/TemplateCard/TemplateCardLinks.tsx index 2fa244a2b7..845c4c1621 100644 --- a/plugins/scaffolder-react/src/next/components/TemplateCard/TemplateCardLinks.tsx +++ b/plugins/scaffolder-react/src/next/components/TemplateCard/TemplateCardLinks.tsx @@ -34,10 +34,6 @@ export interface TemplateCardLinksProps { template: TemplateEntityV1beta3; additionalLinks?: TemplateCardAdditionalLink[]; } -/** - * The `TemplateCardLinks` component that is rendered at the Links-section of the TemplateCard - * @alpha - */ export const TemplateCardLinks = ({ template, additionalLinks, diff --git a/plugins/scaffolder-react/src/next/components/TemplateCard/TemplateCardTags.tsx b/plugins/scaffolder-react/src/next/components/TemplateCard/TemplateCardTags.tsx index c4cb22410a..88550e2104 100644 --- a/plugins/scaffolder-react/src/next/components/TemplateCard/TemplateCardTags.tsx +++ b/plugins/scaffolder-react/src/next/components/TemplateCard/TemplateCardTags.tsx @@ -27,10 +27,6 @@ import React from 'react'; export interface TemplateCardTagsProps { template: TemplateEntityV1beta3; } -/** - * The `TemplateCardTags` component that is rendered at the Tags-section of the TemplateCard - * @alpha - */ export const TemplateCardTags = ({ template }: TemplateCardTagsProps) => ( <> From 2e9f2677b3edde80b7aa615640efc1b8b923a5e3 Mon Sep 17 00:00:00 2001 From: Kalle Ericson <7943407+kalleericson@users.noreply.github.com> Date: Mon, 9 Dec 2024 13:23:21 +0100 Subject: [PATCH 5/8] Revert exposing of components Signed-off-by: Kalle Ericson <7943407+kalleericson@users.noreply.github.com> --- .../src/next/components/TemplateCard/index.ts | 24 +------------------ 1 file changed, 1 insertion(+), 23 deletions(-) diff --git a/plugins/scaffolder-react/src/next/components/TemplateCard/index.ts b/plugins/scaffolder-react/src/next/components/TemplateCard/index.ts index aa13b79284..529aa938e4 100644 --- a/plugins/scaffolder-react/src/next/components/TemplateCard/index.ts +++ b/plugins/scaffolder-react/src/next/components/TemplateCard/index.ts @@ -13,26 +13,4 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -export { - TemplateCard, - type TemplateCardProps, - type TemplateCardAdditionalLink, -} from './TemplateCard'; -export { - TemplateCardContent, - type TemplateCardContentProps, -} from './TemplateCardContent'; -export { - TemplateCardTags, - type TemplateCardTagsProps, -} from './TemplateCardTags'; -export { - TemplateCardLinks, - type TemplateCardLinksProps, -} from './TemplateCardLinks'; -export { - TemplateCardActions, - type TemplateCardActionsProps, -} from './TemplateCardActions'; -export { CardHeader, type CardHeaderProps } from './CardHeader'; -export { CardLink, type CardLinkProps } from './CardLink'; +export { TemplateCard, type TemplateCardProps } from './TemplateCard'; From 3ae955ba9980fb555eaba4d3f2708b08ee1edac2 Mon Sep 17 00:00:00 2001 From: Kalle Ericson <7943407+kalleericson@users.noreply.github.com> Date: Mon, 9 Dec 2024 13:24:10 +0100 Subject: [PATCH 6/8] Updated changeset Signed-off-by: Kalle Ericson <7943407+kalleericson@users.noreply.github.com> --- .changeset/kind-jobs-remain.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.changeset/kind-jobs-remain.md b/.changeset/kind-jobs-remain.md index ed6ecbc347..f41da42de8 100644 --- a/.changeset/kind-jobs-remain.md +++ b/.changeset/kind-jobs-remain.md @@ -2,4 +2,4 @@ '@backstage/plugin-scaffolder-react': patch --- -Added test coverage selectors to components, and broke up TemplateCard into exposable components +Added test coverage selectors to TemplateCard and its sub-components From 2f50f702c573e92c1ec946031a989f31cfeb9208 Mon Sep 17 00:00:00 2001 From: Kalle Ericson <7943407+kalleericson@users.noreply.github.com> Date: Mon, 9 Dec 2024 13:43:18 +0100 Subject: [PATCH 7/8] Updating report Signed-off-by: Kalle Ericson <7943407+kalleericson@users.noreply.github.com> --- plugins/scaffolder-react/report-alpha.api.md | 16 +++++++++++----- .../components/TemplateCard/TemplateCard.tsx | 1 + .../src/next/components/TemplateCard/index.ts | 6 +++++- 3 files changed, 17 insertions(+), 6 deletions(-) diff --git a/plugins/scaffolder-react/report-alpha.api.md b/plugins/scaffolder-react/report-alpha.api.md index 7084625ad4..1dd44bb00a 100644 --- a/plugins/scaffolder-react/report-alpha.api.md +++ b/plugins/scaffolder-react/report-alpha.api.md @@ -266,14 +266,20 @@ export interface TaskStepsProps { // @alpha export const TemplateCard: (props: TemplateCardProps) => React_2.JSX.Element; +// @alpha (undocumented) +export interface TemplateCardAdditionalLink { + // (undocumented) + icon: IconComponent; + // (undocumented) + text: string; + // (undocumented) + url: string; +} + // @alpha export interface TemplateCardProps { // (undocumented) - additionalLinks?: { - icon: IconComponent; - text: string; - url: string; - }[]; + additionalLinks?: TemplateCardAdditionalLink[]; // (undocumented) onSelected?: (template: TemplateEntityV1beta3) => void; // (undocumented) diff --git a/plugins/scaffolder-react/src/next/components/TemplateCard/TemplateCard.tsx b/plugins/scaffolder-react/src/next/components/TemplateCard/TemplateCard.tsx index 73b8e71de9..dab69e092d 100644 --- a/plugins/scaffolder-react/src/next/components/TemplateCard/TemplateCard.tsx +++ b/plugins/scaffolder-react/src/next/components/TemplateCard/TemplateCard.tsx @@ -37,6 +37,7 @@ const useStyles = makeStyles(() => ({ actionContainer: { padding: '16px', flex: 1, alignItems: 'flex-end' }, })); +/** @alpha */ export interface TemplateCardAdditionalLink { icon: IconComponent; text: string; diff --git a/plugins/scaffolder-react/src/next/components/TemplateCard/index.ts b/plugins/scaffolder-react/src/next/components/TemplateCard/index.ts index 529aa938e4..768e5068dc 100644 --- a/plugins/scaffolder-react/src/next/components/TemplateCard/index.ts +++ b/plugins/scaffolder-react/src/next/components/TemplateCard/index.ts @@ -13,4 +13,8 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -export { TemplateCard, type TemplateCardProps } from './TemplateCard'; +export { + TemplateCard, + type TemplateCardProps, + type TemplateCardAdditionalLink, +} from './TemplateCard'; From 3f8a7d70265b6299aa1ed8b48fcc0b66527eb356 Mon Sep 17 00:00:00 2001 From: Kalle Ericson <7943407+kalleericson@users.noreply.github.com> Date: Wed, 11 Dec 2024 10:58:09 +0100 Subject: [PATCH 8/8] fix: removing additional interface Signed-off-by: Kalle Ericson <7943407+kalleericson@users.noreply.github.com> --- plugins/scaffolder-react/report-alpha.api.md | 16 +++++----------- .../components/TemplateCard/TemplateCard.tsx | 13 +++++-------- .../TemplateCard/TemplateCardLinks.tsx | 7 +++++-- .../src/next/components/TemplateCard/index.ts | 6 +----- 4 files changed, 16 insertions(+), 26 deletions(-) diff --git a/plugins/scaffolder-react/report-alpha.api.md b/plugins/scaffolder-react/report-alpha.api.md index 1dd44bb00a..7084625ad4 100644 --- a/plugins/scaffolder-react/report-alpha.api.md +++ b/plugins/scaffolder-react/report-alpha.api.md @@ -266,20 +266,14 @@ export interface TaskStepsProps { // @alpha export const TemplateCard: (props: TemplateCardProps) => React_2.JSX.Element; -// @alpha (undocumented) -export interface TemplateCardAdditionalLink { - // (undocumented) - icon: IconComponent; - // (undocumented) - text: string; - // (undocumented) - url: string; -} - // @alpha export interface TemplateCardProps { // (undocumented) - additionalLinks?: TemplateCardAdditionalLink[]; + additionalLinks?: { + icon: IconComponent; + text: string; + url: string; + }[]; // (undocumented) onSelected?: (template: TemplateEntityV1beta3) => void; // (undocumented) diff --git a/plugins/scaffolder-react/src/next/components/TemplateCard/TemplateCard.tsx b/plugins/scaffolder-react/src/next/components/TemplateCard/TemplateCard.tsx index dab69e092d..d8057b9867 100644 --- a/plugins/scaffolder-react/src/next/components/TemplateCard/TemplateCard.tsx +++ b/plugins/scaffolder-react/src/next/components/TemplateCard/TemplateCard.tsx @@ -37,20 +37,17 @@ const useStyles = makeStyles(() => ({ actionContainer: { padding: '16px', flex: 1, alignItems: 'flex-end' }, })); -/** @alpha */ -export interface TemplateCardAdditionalLink { - icon: IconComponent; - text: string; - url: string; -} - /** * The Props for the {@link TemplateCard} component * @alpha */ export interface TemplateCardProps { template: TemplateEntityV1beta3; - additionalLinks?: TemplateCardAdditionalLink[]; + additionalLinks?: { + icon: IconComponent; + text: string; + url: string; + }[]; onSelected?: (template: TemplateEntityV1beta3) => void; } diff --git a/plugins/scaffolder-react/src/next/components/TemplateCard/TemplateCardLinks.tsx b/plugins/scaffolder-react/src/next/components/TemplateCard/TemplateCardLinks.tsx index 845c4c1621..f626875818 100644 --- a/plugins/scaffolder-react/src/next/components/TemplateCard/TemplateCardLinks.tsx +++ b/plugins/scaffolder-react/src/next/components/TemplateCard/TemplateCardLinks.tsx @@ -22,7 +22,6 @@ import { makeStyles, Theme } from '@material-ui/core/styles'; import LanguageIcon from '@material-ui/icons/Language'; import React from 'react'; import { CardLink } from './CardLink'; -import { TemplateCardAdditionalLink } from './TemplateCard'; const useStyles = makeStyles({}); @@ -32,7 +31,11 @@ const useStyles = makeStyles({}); */ export interface TemplateCardLinksProps { template: TemplateEntityV1beta3; - additionalLinks?: TemplateCardAdditionalLink[]; + additionalLinks?: { + icon: IconComponent; + text: string; + url: string; + }[]; } export const TemplateCardLinks = ({ template, diff --git a/plugins/scaffolder-react/src/next/components/TemplateCard/index.ts b/plugins/scaffolder-react/src/next/components/TemplateCard/index.ts index 768e5068dc..529aa938e4 100644 --- a/plugins/scaffolder-react/src/next/components/TemplateCard/index.ts +++ b/plugins/scaffolder-react/src/next/components/TemplateCard/index.ts @@ -13,8 +13,4 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -export { - TemplateCard, - type TemplateCardProps, - type TemplateCardAdditionalLink, -} from './TemplateCard'; +export { TemplateCard, type TemplateCardProps } from './TemplateCard';