feat: move around the secret widget and override the default password one

Signed-off-by: blam <ben@blam.sh>

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

@@ -0,0 +1,53 @@
+/*
+ * Copyright 2024 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 { WidgetProps } from '@rjsf/utils';
+import { useTemplateSecrets } from '@backstage/plugin-scaffolder-react';
+import InputLabel from '@material-ui/core/InputLabel';
+import Input from '@material-ui/core/Input';
+import React from 'react';
+
+/**
+ * Secret Widget for overriding the default password input widget
+ * @alpha
+ */
+export const SecretWidget = (
+  props: Pick<WidgetProps, 'name' | 'onChange' | 'schema'>,
+) => {
+  const { setSecrets, secrets } = useTemplateSecrets();
+  const {
+    name,
+    onChange,
+    schema: { title },
+  } = props;
+
+  return (
+    <>
+      <InputLabel htmlFor={title}>{title}</InputLabel>
+      <Input
+        id={title}
+        aria-describedby={title}
+        onChange={e => {
+          onChange(Array(e.target?.value.length).fill('*').join(''));
+          setSecrets({ [name]: e.target?.value });
+        }}
+        value={secrets[name] ?? ''}
+        type="password"
+        autoComplete="off"
+      />
+    </>
+  );
+};

plugins/scaffolder-react/src/next/components/SecretWidget/index.ts

@@ -0,0 +1,16 @@
+/*
+ * Copyright 2024 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 './SecretWidget';

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

@@ -20,7 +20,6 @@ import MuiStep from '@material-ui/core/Step';
 import MuiStepLabel from '@material-ui/core/StepLabel';
 import Button from '@material-ui/core/Button';
 import LinearProgress from '@material-ui/core/LinearProgress';
-import { makeStyles } from '@material-ui/core/styles';
 import { type IChangeEvent } from '@rjsf/core';
 import { ErrorSchema } from '@rjsf/utils';
 import React, {
@@ -49,6 +48,8 @@ import {
 } from '@backstage/plugin-scaffolder-react';
 import { ReviewStepProps } from '@backstage/plugin-scaffolder-react';
 import { ErrorListTemplate } from './ErrorListTemplate';
+import { makeStyles } from '@material-ui/core/styles';
+import { SecretWidget } from '../SecretWidget';
 
 const useStyles = makeStyles(theme => ({
   backButton: {
@@ -232,6 +233,7 @@ export const Stepper = (stepperProps: StepperProps) => {
             showErrorList="top"
             templates={{ ErrorListTemplate }}
             onChange={handleChange}
+            widgets={{ password: SecretWidget }}
             experimental_defaultFormStateBehavior={{
               allOf: 'populateDefaults',
             }}

plugins/scaffolder-react/src/next/components/index.ts

@@ -26,3 +26,4 @@ export * from './TaskLogStream';
 export * from './TemplateCategoryPicker';
 export * from './ScaffolderPageContextMenu';
 export * from './ScaffolderField';
+export * from './SecretWidget';

plugins/scaffolder/src/components/fields/SecretInput/SecretInput.tsx

@@ -14,18 +14,15 @@
  * limitations under the License.
  */
 import React from 'react';
-import { useTemplateSecrets } from '@backstage/plugin-scaffolder-react';
 import { ScaffolderRJSFFieldProps } from '@backstage/plugin-scaffolder-react';
-import { ScaffolderField } from '@backstage/plugin-scaffolder-react/alpha';
-import Input from '@material-ui/core/Input';
-import InputLabel from '@material-ui/core/InputLabel';
+import {
+  ScaffolderField,
+  SecretWidget,
+} from '@backstage/plugin-scaffolder-react/alpha';
 
 export const SecretInput = (props: ScaffolderRJSFFieldProps) => {
-  const { setSecrets, secrets } = useTemplateSecrets();
   const {
-    name,
-    onChange,
-    schema: { title, description },
+    schema: { description },
     rawErrors,
     disabled,
     errors,
@@ -40,18 +37,7 @@ export const SecretInput = (props: ScaffolderRJSFFieldProps) => {
       errors={errors}
       required={required}
     >
-      <InputLabel htmlFor={title}>{title}</InputLabel>
-      <Input
-        id={title}
-        aria-describedby={title}
-        onChange={e => {
-          onChange(Array(e.target?.value.length).fill('*').join(''));
-          setSecrets({ [name]: e.target?.value });
-        }}
-        value={secrets[name] ?? ''}
-        type="password"
-        autoComplete="off"
-      />
+      <SecretWidget {...props} />
     </ScaffolderField>
   );
 };