From 319f4b79a2a5f6964dae99ac3630679037f2e464 Mon Sep 17 00:00:00 2001 From: Brian Fletcher Date: Mon, 31 Jan 2022 15:31:52 +0000 Subject: [PATCH 1/5] allow providing holding text for scaffolder loading Signed-off-by: Brian Fletcher --- .changeset/smart-boxes-double.md | 5 +++++ plugins/scaffolder/api-report.md | 2 ++ plugins/scaffolder/src/components/Router.tsx | 12 ++++++++++-- .../scaffolder/src/components/TaskPage/TaskPage.tsx | 10 +++++++--- 4 files changed, 24 insertions(+), 5 deletions(-) create mode 100644 .changeset/smart-boxes-double.md diff --git a/.changeset/smart-boxes-double.md b/.changeset/smart-boxes-double.md new file mode 100644 index 0000000000..64a2fe9656 --- /dev/null +++ b/.changeset/smart-boxes-double.md @@ -0,0 +1,5 @@ +--- +'@backstage/plugin-scaffolder': patch +--- + +The ScaffolderPage can be passed an optional `loadingHoldingText` string. It will replace the Loading text in the scaffolder task page. diff --git a/plugins/scaffolder/api-report.md b/plugins/scaffolder/api-report.md index b77fb5f939..c7a95f177e 100644 --- a/plugins/scaffolder/api-report.md +++ b/plugins/scaffolder/api-report.md @@ -246,7 +246,9 @@ export const ScaffolderFieldExtensions: React_2.ComponentType; export const ScaffolderPage: ({ TemplateCardComponent, groups, + loadingHoldingText, }: { + loadingHoldingText?: string | undefined; TemplateCardComponent?: | ComponentType<{ template: TemplateEntityV1beta2; diff --git a/plugins/scaffolder/src/components/Router.tsx b/plugins/scaffolder/src/components/Router.tsx index e667c676f2..10a78e1071 100644 --- a/plugins/scaffolder/src/components/Router.tsx +++ b/plugins/scaffolder/src/components/Router.tsx @@ -31,6 +31,7 @@ import { import { useElementFilter } from '@backstage/core-plugin-api'; type RouterProps = { + loadingHoldingText?: string; TemplateCardComponent?: | ComponentType<{ template: TemplateEntityV1beta2 }> | undefined; @@ -41,7 +42,11 @@ type RouterProps = { }>; }; -export const Router = ({ TemplateCardComponent, groups }: RouterProps) => { +export const Router = ({ + TemplateCardComponent, + groups, + loadingHoldingText, +}: RouterProps) => { const outlet = useOutlet(); const customFieldExtensions = useElementFilter(outlet, elements => @@ -79,7 +84,10 @@ export const Router = ({ TemplateCardComponent, groups }: RouterProps) => { path="/templates/:templateName" element={} /> - } /> + } + /> } /> ); diff --git a/plugins/scaffolder/src/components/TaskPage/TaskPage.tsx b/plugins/scaffolder/src/components/TaskPage/TaskPage.tsx index 9f5dad2adc..04e303b4f4 100644 --- a/plugins/scaffolder/src/components/TaskPage/TaskPage.tsx +++ b/plugins/scaffolder/src/components/TaskPage/TaskPage.tsx @@ -218,7 +218,11 @@ export const TaskStatusStepper = memo( const hasLinks = ({ entityRef, remoteUrl, links = [] }: TaskOutput): boolean => !!(entityRef || remoteUrl || links.length > 0); -export const TaskPage = () => { +type TaskPageProps = { + loadingHoldingText?: string; +}; + +export const TaskPage = ({ loadingHoldingText }: TaskPageProps) => { const classes = useStyles(); const navigate = useNavigate(); const rootLink = useRouteRef(rootRouteRef); @@ -256,7 +260,7 @@ export const TaskPage = () => { const logAsString = useMemo(() => { if (!currentStepId) { - return 'Loading...'; + return loadingHoldingText ? loadingHoldingText : 'Loading...'; } const log = taskStream.stepLogs[currentStepId]; @@ -264,7 +268,7 @@ export const TaskPage = () => { return 'Waiting for logs...'; } return log.join('\n'); - }, [taskStream.stepLogs, currentStepId]); + }, [taskStream.stepLogs, currentStepId, loadingHoldingText]); const taskNotFound = taskStream.completed === true && From 410ce6ed2a4e38b43c57911284584fd56bbbc59c Mon Sep 17 00:00:00 2001 From: Brian Fletcher Date: Tue, 1 Feb 2022 14:23:43 +0000 Subject: [PATCH 2/5] Allow providing a TaskPageComponent Signed-off-by: Brian Fletcher --- .changeset/smart-boxes-double.md | 2 +- plugins/scaffolder/api-report.md | 14 ++++++++++++-- plugins/scaffolder/src/components/Router.tsx | 10 ++++------ .../src/components/TaskPage/TaskPage.tsx | 8 ++++---- plugins/scaffolder/src/index.ts | 1 + 5 files changed, 22 insertions(+), 13 deletions(-) diff --git a/.changeset/smart-boxes-double.md b/.changeset/smart-boxes-double.md index 64a2fe9656..81d708297e 100644 --- a/.changeset/smart-boxes-double.md +++ b/.changeset/smart-boxes-double.md @@ -2,4 +2,4 @@ '@backstage/plugin-scaffolder': patch --- -The ScaffolderPage can be passed an optional `loadingHoldingText` string. It will replace the Loading text in the scaffolder task page. +The ScaffolderPage can be passed an optional `TaskPageComponent` with a `loadingText` string. It will replace the Loading text in the scaffolder task page. diff --git a/plugins/scaffolder/api-report.md b/plugins/scaffolder/api-report.md index c7a95f177e..befafc766b 100644 --- a/plugins/scaffolder/api-report.md +++ b/plugins/scaffolder/api-report.md @@ -21,8 +21,10 @@ import { FieldValidation } from '@rjsf/core'; import { IconButton } from '@material-ui/core'; import { JsonObject } from '@backstage/types'; import { JSONSchema } from '@backstage/catalog-model'; +import { JSXElementConstructor } from 'react'; import { Observable } from '@backstage/types'; import { default as React_2 } from 'react'; +import { ReactElement } from 'react'; import { ReactNode } from 'react'; import { RouteRef } from '@backstage/core-plugin-api'; import { ScmIntegrationRegistry } from '@backstage/integration'; @@ -245,15 +247,17 @@ export const ScaffolderFieldExtensions: React_2.ComponentType; // @public (undocumented) export const ScaffolderPage: ({ TemplateCardComponent, + TaskPageComponent, groups, - loadingHoldingText, }: { - loadingHoldingText?: string | undefined; TemplateCardComponent?: | ComponentType<{ template: TemplateEntityV1beta2; }> | undefined; + TaskPageComponent?: + | ReactElement> + | undefined; groups?: | { title?: string | undefined; @@ -277,6 +281,12 @@ const scaffolderPlugin: BackstagePlugin< export { scaffolderPlugin as plugin }; export { scaffolderPlugin }; +// Warning: (ae-forgotten-export) The symbol "TaskPageProps" needs to be exported by the entry point index.d.ts +// Warning: (ae-missing-release-tag) "TaskPage" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal) +// +// @public (undocumented) +export const TaskPage: ({ loadingText }: TaskPageProps) => JSX.Element; + // Warning: (ae-missing-release-tag) "TemplateList" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal) // // @public (undocumented) diff --git a/plugins/scaffolder/src/components/Router.tsx b/plugins/scaffolder/src/components/Router.tsx index 10a78e1071..17a1606bc9 100644 --- a/plugins/scaffolder/src/components/Router.tsx +++ b/plugins/scaffolder/src/components/Router.tsx @@ -31,10 +31,10 @@ import { import { useElementFilter } from '@backstage/core-plugin-api'; type RouterProps = { - loadingHoldingText?: string; TemplateCardComponent?: | ComponentType<{ template: TemplateEntityV1beta2 }> | undefined; + TaskPageComponent?: React.ReactElement | undefined; groups?: Array<{ title?: string; titleComponent?: React.ReactNode; @@ -44,10 +44,11 @@ type RouterProps = { export const Router = ({ TemplateCardComponent, + TaskPageComponent, groups, - loadingHoldingText, }: RouterProps) => { const outlet = useOutlet(); + const TaskPageElement = TaskPageComponent || ; const customFieldExtensions = useElementFilter(outlet, elements => elements @@ -84,10 +85,7 @@ export const Router = ({ path="/templates/:templateName" element={} /> - } - /> + } /> ); diff --git a/plugins/scaffolder/src/components/TaskPage/TaskPage.tsx b/plugins/scaffolder/src/components/TaskPage/TaskPage.tsx index 04e303b4f4..065c7b4478 100644 --- a/plugins/scaffolder/src/components/TaskPage/TaskPage.tsx +++ b/plugins/scaffolder/src/components/TaskPage/TaskPage.tsx @@ -219,10 +219,10 @@ const hasLinks = ({ entityRef, remoteUrl, links = [] }: TaskOutput): boolean => !!(entityRef || remoteUrl || links.length > 0); type TaskPageProps = { - loadingHoldingText?: string; + loadingText?: string; }; -export const TaskPage = ({ loadingHoldingText }: TaskPageProps) => { +export const TaskPage = ({ loadingText }: TaskPageProps) => { const classes = useStyles(); const navigate = useNavigate(); const rootLink = useRouteRef(rootRouteRef); @@ -260,7 +260,7 @@ export const TaskPage = ({ loadingHoldingText }: TaskPageProps) => { const logAsString = useMemo(() => { if (!currentStepId) { - return loadingHoldingText ? loadingHoldingText : 'Loading...'; + return loadingText ? loadingText : 'Loading...'; } const log = taskStream.stepLogs[currentStepId]; @@ -268,7 +268,7 @@ export const TaskPage = ({ loadingHoldingText }: TaskPageProps) => { return 'Waiting for logs...'; } return log.join('\n'); - }, [taskStream.stepLogs, currentStepId, loadingHoldingText]); + }, [taskStream.stepLogs, currentStepId, loadingText]); const taskNotFound = taskStream.completed === true && diff --git a/plugins/scaffolder/src/index.ts b/plugins/scaffolder/src/index.ts index 3cf65d7a07..893ab82025 100644 --- a/plugins/scaffolder/src/index.ts +++ b/plugins/scaffolder/src/index.ts @@ -56,3 +56,4 @@ export { FavouriteTemplate } from './components/FavouriteTemplate'; export { TemplateList } from './components/TemplateList'; export type { TemplateListProps } from './components/TemplateList'; export { TemplateTypePicker } from './components/TemplateTypePicker'; +export { TaskPage } from './components/TaskPage'; From 5f32f20a3446eb61df6d313face77f70c1ce2017 Mon Sep 17 00:00:00 2001 From: Brian Fletcher Date: Tue, 1 Feb 2022 22:44:44 +0000 Subject: [PATCH 3/5] fixes the comonent types Signed-off-by: Brian Fletcher --- plugins/scaffolder/api-report.md | 6 +----- plugins/scaffolder/src/components/Router.tsx | 6 +++--- 2 files changed, 4 insertions(+), 8 deletions(-) diff --git a/plugins/scaffolder/api-report.md b/plugins/scaffolder/api-report.md index befafc766b..7f29d11073 100644 --- a/plugins/scaffolder/api-report.md +++ b/plugins/scaffolder/api-report.md @@ -21,10 +21,8 @@ import { FieldValidation } from '@rjsf/core'; import { IconButton } from '@material-ui/core'; import { JsonObject } from '@backstage/types'; import { JSONSchema } from '@backstage/catalog-model'; -import { JSXElementConstructor } from 'react'; import { Observable } from '@backstage/types'; import { default as React_2 } from 'react'; -import { ReactElement } from 'react'; import { ReactNode } from 'react'; import { RouteRef } from '@backstage/core-plugin-api'; import { ScmIntegrationRegistry } from '@backstage/integration'; @@ -255,9 +253,7 @@ export const ScaffolderPage: ({ template: TemplateEntityV1beta2; }> | undefined; - TaskPageComponent?: - | ReactElement> - | undefined; + TaskPageComponent?: ComponentType<{}> | undefined; groups?: | { title?: string | undefined; diff --git a/plugins/scaffolder/src/components/Router.tsx b/plugins/scaffolder/src/components/Router.tsx index 17a1606bc9..f41ee853f8 100644 --- a/plugins/scaffolder/src/components/Router.tsx +++ b/plugins/scaffolder/src/components/Router.tsx @@ -34,7 +34,7 @@ type RouterProps = { TemplateCardComponent?: | ComponentType<{ template: TemplateEntityV1beta2 }> | undefined; - TaskPageComponent?: React.ReactElement | undefined; + TaskPageComponent?: ComponentType<{}> | undefined; groups?: Array<{ title?: string; titleComponent?: React.ReactNode; @@ -48,7 +48,7 @@ export const Router = ({ groups, }: RouterProps) => { const outlet = useOutlet(); - const TaskPageElement = TaskPageComponent || ; + const TaskPageElement = TaskPageComponent || TaskPage; const customFieldExtensions = useElementFilter(outlet, elements => elements @@ -85,7 +85,7 @@ export const Router = ({ path="/templates/:templateName" element={} /> - + } /> } /> ); From d0a3bdb263c8419c412131ddca8307eb1150afee Mon Sep 17 00:00:00 2001 From: Brian Fletcher Date: Tue, 1 Feb 2022 22:59:53 +0000 Subject: [PATCH 4/5] also export task page props and document Signed-off-by: Brian Fletcher --- plugins/scaffolder/api-report.md | 10 ++++++---- .../src/components/TaskPage/TaskPage.tsx | 14 +++++++++++++- .../scaffolder/src/components/TaskPage/index.ts | 1 + plugins/scaffolder/src/index.ts | 1 + 4 files changed, 21 insertions(+), 5 deletions(-) diff --git a/plugins/scaffolder/api-report.md b/plugins/scaffolder/api-report.md index 7f29d11073..12fed2326a 100644 --- a/plugins/scaffolder/api-report.md +++ b/plugins/scaffolder/api-report.md @@ -277,12 +277,14 @@ const scaffolderPlugin: BackstagePlugin< export { scaffolderPlugin as plugin }; export { scaffolderPlugin }; -// Warning: (ae-forgotten-export) The symbol "TaskPageProps" needs to be exported by the entry point index.d.ts -// Warning: (ae-missing-release-tag) "TaskPage" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal) -// -// @public (undocumented) +// @public export const TaskPage: ({ loadingText }: TaskPageProps) => JSX.Element; +// @public +export type TaskPageProps = { + loadingText?: string; +}; + // Warning: (ae-missing-release-tag) "TemplateList" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal) // // @public (undocumented) diff --git a/plugins/scaffolder/src/components/TaskPage/TaskPage.tsx b/plugins/scaffolder/src/components/TaskPage/TaskPage.tsx index 065c7b4478..d6933cd26b 100644 --- a/plugins/scaffolder/src/components/TaskPage/TaskPage.tsx +++ b/plugins/scaffolder/src/components/TaskPage/TaskPage.tsx @@ -218,10 +218,22 @@ export const TaskStatusStepper = memo( const hasLinks = ({ entityRef, remoteUrl, links = [] }: TaskOutput): boolean => !!(entityRef || remoteUrl || links.length > 0); -type TaskPageProps = { +/** + * TaskPageProps for constructing a TaskPage + * @param loadingText - Optional loading text shown before a task begins executing. + * + * @public + */ +export type TaskPageProps = { loadingText?: string; }; +/** + * TaskPage for showing the status of the taskId provided as a param + * @param loadingText - Optional loading text shown before a task begins executing. + * + * @public + */ export const TaskPage = ({ loadingText }: TaskPageProps) => { const classes = useStyles(); const navigate = useNavigate(); diff --git a/plugins/scaffolder/src/components/TaskPage/index.ts b/plugins/scaffolder/src/components/TaskPage/index.ts index 809b45101b..f7876888f9 100644 --- a/plugins/scaffolder/src/components/TaskPage/index.ts +++ b/plugins/scaffolder/src/components/TaskPage/index.ts @@ -14,3 +14,4 @@ * limitations under the License. */ export { TaskPage } from './TaskPage'; +export type { TaskPageProps } from './TaskPage'; diff --git a/plugins/scaffolder/src/index.ts b/plugins/scaffolder/src/index.ts index 893ab82025..8012f14f32 100644 --- a/plugins/scaffolder/src/index.ts +++ b/plugins/scaffolder/src/index.ts @@ -57,3 +57,4 @@ export { TemplateList } from './components/TemplateList'; export type { TemplateListProps } from './components/TemplateList'; export { TemplateTypePicker } from './components/TemplateTypePicker'; export { TaskPage } from './components/TaskPage'; +export type { TaskPageProps } from './components/TaskPage'; From 17182f82aeac47bec96ec2da6a310465efa81bb6 Mon Sep 17 00:00:00 2001 From: Brian Fletcher Date: Wed, 2 Feb 2022 15:49:31 +0000 Subject: [PATCH 5/5] remove undefined option for optional param Signed-off-by: Brian Fletcher --- plugins/scaffolder/src/components/Router.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/plugins/scaffolder/src/components/Router.tsx b/plugins/scaffolder/src/components/Router.tsx index f41ee853f8..e7c93cebbb 100644 --- a/plugins/scaffolder/src/components/Router.tsx +++ b/plugins/scaffolder/src/components/Router.tsx @@ -34,7 +34,7 @@ type RouterProps = { TemplateCardComponent?: | ComponentType<{ template: TemplateEntityV1beta2 }> | undefined; - TaskPageComponent?: ComponentType<{}> | undefined; + TaskPageComponent?: ComponentType<{}>; groups?: Array<{ title?: string; titleComponent?: React.ReactNode;