From 46e5e554f38a0b8b5e49094d0c5bcada58b05d2e Mon Sep 17 00:00:00 2001
From: Stephen Glass <stephen@stephen.glass>
Date: Fri, 16 Aug 2024 19:13:32 -0400
Subject: [PATCH] change scaffolder secret widget to use textfield

Signed-off-by: Stephen Glass <stephen@stephen.glass>
---
 .changeset/clever-laws-raise.md               |  5 ++++
 .../components/SecretWidget/SecretWidget.tsx  | 29 +++++++++----------
 2 files changed, 18 insertions(+), 16 deletions(-)
 create mode 100644 .changeset/clever-laws-raise.md

diff --git a/.changeset/clever-laws-raise.md b/.changeset/clever-laws-raise.md
new file mode 100644
index 0000000000..12879621a4
--- /dev/null
+++ b/.changeset/clever-laws-raise.md
@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-scaffolder-react': patch
+---
+
+Change scaffolder secret widget to use `TextField` component for more flexibility in theme overrides.
diff --git a/plugins/scaffolder-react/src/next/components/SecretWidget/SecretWidget.tsx b/plugins/scaffolder-react/src/next/components/SecretWidget/SecretWidget.tsx
index e2d139f98b..0b8ca8da3b 100644
--- a/plugins/scaffolder-react/src/next/components/SecretWidget/SecretWidget.tsx
+++ b/plugins/scaffolder-react/src/next/components/SecretWidget/SecretWidget.tsx
@@ -16,8 +16,7 @@
 
 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 TextField from '@material-ui/core/TextField';
 import React from 'react';
 
 /**
@@ -35,19 +34,17 @@ export const SecretWidget = (
   } = 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"
-      />
-    </>
+    <TextField
+      id={title}
+      label={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"
+    />
   );
 };