From 583c362cd77289707d171ae96027ae5db3422a4e Mon Sep 17 00:00:00 2001 From: blam Date: Tue, 19 Dec 2023 14:12:29 +0100 Subject: [PATCH 1/3] bug: Fix the issue with the secrets not being taken into account properly Signed-off-by: blam --- .../src/next/components/Stepper/Stepper.tsx | 31 ++----------------- .../src/next/components/Workflow/Workflow.tsx | 20 ++++++------ .../fields/SecretInput/SecretInput.tsx | 6 +++- 3 files changed, 17 insertions(+), 40 deletions(-) diff --git a/plugins/scaffolder-react/src/next/components/Stepper/Stepper.tsx b/plugins/scaffolder-react/src/next/components/Stepper/Stepper.tsx index 70071721fa..5b41163ae4 100644 --- a/plugins/scaffolder-react/src/next/components/Stepper/Stepper.tsx +++ b/plugins/scaffolder-react/src/next/components/Stepper/Stepper.tsx @@ -24,7 +24,7 @@ import { LinearProgress, } from '@material-ui/core'; import { type IChangeEvent } from '@rjsf/core'; -import { ErrorSchema, ValidatorType } from '@rjsf/utils'; +import { ErrorSchema } from '@rjsf/utils'; import React, { useCallback, useMemo, @@ -49,7 +49,6 @@ import { LayoutOptions, FieldExtensionOptions, FormProps, - useTemplateSecrets, } from '@backstage/plugin-scaffolder-react'; import { ReviewStepProps } from '@backstage/plugin-scaffolder-react'; @@ -103,7 +102,6 @@ export const Stepper = (stepperProps: StepperProps) => { reviewButtonText = 'Review', } = components; const analytics = useAnalytics(); - const { secrets } = useTemplateSecrets(); const { presentation, steps } = useTemplateSchema(props.manifest); const apiHolder = useApiHolder(); const [activeStep, setActiveStep] = useState(0); @@ -113,31 +111,6 @@ export const Stepper = (stepperProps: StepperProps) => { const [errors, setErrors] = useState(); const styles = useStyles(); - const stringifiedSecrets = JSON.stringify(secrets); - - // Because secrets can be defined in the schema, we need to make sure that they - // are included in the validation process. So we merge the secrets and the formData - // together in validation. - const customValidator = useMemo( - () => ({ - isValid: (schema, formData, rootSchema) => - validator.isValid(schema, { ...formData, ...secrets }, rootSchema), - rawValidation: (schema, formData) => - validator.rawValidation(schema, { ...formData, ...secrets }), - validateFormData: (formData, schema, customFormats, transformErrors) => - validator.validateFormData( - { ...formData, ...secrets }, - schema, - customFormats, - transformErrors, - ), - // @deprecated - toErrorList: validator.toErrorList, - }), - // eslint-disable-next-line react-hooks/exhaustive-deps - [secrets, stringifiedSecrets], - ); - const extensions = useMemo(() => { return Object.fromEntries( props.extensions.map(({ name, component }) => [name, component]), @@ -247,7 +220,7 @@ export const Stepper = (stepperProps: StepperProps) => { {/* eslint-disable-next-line no-nested-ternary */} {activeStep < steps.length ? (
{ noPadding titleTypographyProps={{ component: 'h2' }} > - - - + )} @@ -125,8 +123,10 @@ export const Workflow = (workflowProps: WorkflowProps): JSX.Element | null => { }; /** - * TODO(blam): work out what we want to do with these components in the new API. - * Should we really have EmbeddableWorkflow, Workflow, Stepper and Form, or should we revisit this? * @alpha */ -export const EmbeddableWorkflow = Workflow; +export const EmbeddableWorkflow = (props: WorkflowProps) => ( + + + +); diff --git a/plugins/scaffolder/src/components/fields/SecretInput/SecretInput.tsx b/plugins/scaffolder/src/components/fields/SecretInput/SecretInput.tsx index d68216650b..e6eea9fc72 100644 --- a/plugins/scaffolder/src/components/fields/SecretInput/SecretInput.tsx +++ b/plugins/scaffolder/src/components/fields/SecretInput/SecretInput.tsx @@ -23,6 +23,7 @@ export const SecretInput = (props: ScaffolderRJSFFieldProps) => { const { setSecrets, secrets } = useTemplateSecrets(); const { name, + onChange, schema: { title, description }, rawErrors, disabled, @@ -42,7 +43,10 @@ export const SecretInput = (props: ScaffolderRJSFFieldProps) => { setSecrets({ [name]: e.target?.value })} + onChange={e => { + onChange(Array(e.target?.value.length).fill('*').join('')); + setSecrets({ [name]: e.target?.value }); + }} value={secrets[name] ?? ''} type="password" autoComplete="off" From 554146b8e839b806abeca3f5a8305d3965c54f31 Mon Sep 17 00:00:00 2001 From: blam Date: Tue, 19 Dec 2023 14:21:08 +0100 Subject: [PATCH 2/3] Update changeset Signed-off-by: blam --- .changeset/itchy-otters-switch.md | 2 -- 1 file changed, 2 deletions(-) diff --git a/.changeset/itchy-otters-switch.md b/.changeset/itchy-otters-switch.md index de155a05ea..72869032f2 100644 --- a/.changeset/itchy-otters-switch.md +++ b/.changeset/itchy-otters-switch.md @@ -4,5 +4,3 @@ --- Added support for dealing with user provided secrets using a new field extension `ui:field: Secret` - -The `@alpha` exports of `Stepper` now needs to be wrapped in a `SecretsContextProvider` for access to secrets. From 1321c3e0b6cf046f86ca8c3ba8305da00d0c42dd Mon Sep 17 00:00:00 2001 From: blam Date: Tue, 19 Dec 2023 14:23:26 +0100 Subject: [PATCH 3/3] chore: fixing api-reports Signed-off-by: blam --- plugins/scaffolder-react/api-report-alpha.md | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/plugins/scaffolder-react/api-report-alpha.md b/plugins/scaffolder-react/api-report-alpha.md index dc698e0c51..615b54df84 100644 --- a/plugins/scaffolder-react/api-report-alpha.md +++ b/plugins/scaffolder-react/api-report-alpha.md @@ -64,10 +64,8 @@ export const DefaultTemplateOutputs: (props: { output?: ScaffolderTaskOutput; }) => React_2.JSX.Element | null; -// @alpha -export const EmbeddableWorkflow: ( - workflowProps: WorkflowProps, -) => JSX.Element | null; +// @alpha (undocumented) +export const EmbeddableWorkflow: (props: WorkflowProps) => React_2.JSX.Element; // @alpha export const extractSchemaFromStep: (inputStep: JsonObject) => {