Merge pull request #21938 from backstage/blam/secret-extension-2

scaffolder: revert to simpler implementation for now for `SecretInput`

.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.

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) => {

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<undefined | FormValidation>();
   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<ValidatorType>(
-    () => ({
-      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 ? (
           <Form
-            validator={customValidator}
+            validator={validator}
             extraErrors={errors as unknown as ErrorSchema}
             formData={formState}
             formContext={{ formData: formState }}

plugins/scaffolder-react/src/next/components/Workflow/Workflow.tsx

@@ -111,13 +111,11 @@ export const Workflow = (workflowProps: WorkflowProps): JSX.Element | null => {
           noPadding
           titleTypographyProps={{ component: 'h2' }}
         >
-          <SecretsContextProvider>
-            <Stepper
-              manifest={sortedManifest}
-              templateName={templateName}
-              {...props}
-            />
-          </SecretsContextProvider>
+          <Stepper
+            manifest={sortedManifest}
+            templateName={templateName}
+            {...props}
+          />
         </InfoCard>
       )}
     </Content>
@@ -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) => (
+  <SecretsContextProvider>
+    <Workflow {...props} />
+  </SecretsContextProvider>
+);

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) => {
       <Input
         id={title}
         aria-describedby={title}
-        onChange={e => 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"