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 1/2] 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"
+    />
   );
 };

From d6f0d712a5450e90bf5c6c377049f27e588f23b3 Mon Sep 17 00:00:00 2001
From: Stephen Glass <stephen@stephen.glass>
Date: Mon, 19 Aug 2024 09:40:45 -0400
Subject: [PATCH 2/2] update other scaffolder inputs to textfield

Signed-off-by: Stephen Glass <stephen@stephen.glass>
---
 .changeset/clever-laws-raise.md               |  3 +-
 .../PasswordWidget/PasswordWidget.tsx         |  7 ++---
 .../DefaultRepoBranchPicker.tsx               |  7 ++---
 .../fields/RepoUrlPicker/AzureRepoPicker.tsx  | 31 ++++++++-----------
 .../fields/RepoUrlPicker/GerritRepoPicker.tsx | 11 +++----
 .../fields/RepoUrlPicker/GiteaRepoPicker.tsx  |  7 ++---
 .../fields/RepoUrlPicker/GithubRepoPicker.tsx | 17 +++++-----
 .../fields/RepoUrlPicker/GitlabRepoPicker.tsx | 17 +++++-----
 8 files changed, 43 insertions(+), 57 deletions(-)

diff --git a/.changeset/clever-laws-raise.md b/.changeset/clever-laws-raise.md
index 12879621a4..8733642cc8 100644
--- a/.changeset/clever-laws-raise.md
+++ b/.changeset/clever-laws-raise.md
@@ -1,5 +1,6 @@
 ---
+'@backstage/plugin-scaffolder': patch
 '@backstage/plugin-scaffolder-react': patch
 ---
 
-Change scaffolder secret widget to use `TextField` component for more flexibility in theme overrides.
+Change scaffolder widgets to use `TextField` component for more flexibility in theme overrides.
diff --git a/plugins/scaffolder-react/src/next/components/PasswordWidget/PasswordWidget.tsx b/plugins/scaffolder-react/src/next/components/PasswordWidget/PasswordWidget.tsx
index 6c1c2c176f..1807df8ae2 100644
--- a/plugins/scaffolder-react/src/next/components/PasswordWidget/PasswordWidget.tsx
+++ b/plugins/scaffolder-react/src/next/components/PasswordWidget/PasswordWidget.tsx
@@ -15,8 +15,7 @@
  */
 
 import { WidgetProps } from '@rjsf/utils';
-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';
 import FormHelperText from '@material-ui/core/FormHelperText';
 import { MarkdownContent } from '@backstage/core-components';
@@ -32,9 +31,9 @@ export const PasswordWidget = (
 
   return (
     <>
-      <InputLabel htmlFor={title}>{title}</InputLabel>
-      <Input
+      <TextField
         id={title}
+        label={title}
         aria-describedby={title}
         onChange={e => {
           onChange(e.target.value);
diff --git a/plugins/scaffolder/src/components/fields/RepoBranchPicker/DefaultRepoBranchPicker.tsx b/plugins/scaffolder/src/components/fields/RepoBranchPicker/DefaultRepoBranchPicker.tsx
index 9350e232f8..0fecfb7947 100644
--- a/plugins/scaffolder/src/components/fields/RepoBranchPicker/DefaultRepoBranchPicker.tsx
+++ b/plugins/scaffolder/src/components/fields/RepoBranchPicker/DefaultRepoBranchPicker.tsx
@@ -17,8 +17,7 @@
 import FormControl from '@material-ui/core/FormControl';
 import React from 'react';
 import FormHelperText from '@material-ui/core/FormHelperText';
-import Input from '@material-ui/core/Input';
-import InputLabel from '@material-ui/core/InputLabel';
+import TextField from '@material-ui/core/TextField';
 
 import { BaseRepoBranchPickerProps } from './types';
 
@@ -43,9 +42,9 @@ export const DefaultRepoBranchPicker = ({
       required={required}
       error={rawErrors?.length > 0 && !branch}
     >
-      <InputLabel htmlFor="branchInput">Branch</InputLabel>
-      <Input
+      <TextField
         id="branchInput"
+        label="Branch"
         onChange={e => onChange({ branch: e.target.value })}
         value={branch}
       />
diff --git a/plugins/scaffolder/src/components/fields/RepoUrlPicker/AzureRepoPicker.tsx b/plugins/scaffolder/src/components/fields/RepoUrlPicker/AzureRepoPicker.tsx
index 48fcb4f6af..c7b0f1f887 100644
--- a/plugins/scaffolder/src/components/fields/RepoUrlPicker/AzureRepoPicker.tsx
+++ b/plugins/scaffolder/src/components/fields/RepoUrlPicker/AzureRepoPicker.tsx
@@ -17,8 +17,7 @@
 import React from 'react';
 import FormControl from '@material-ui/core/FormControl';
 import FormHelperText from '@material-ui/core/FormHelperText';
-import Input from '@material-ui/core/Input';
-import InputLabel from '@material-ui/core/InputLabel';
+import TextField from '@material-ui/core/TextField';
 import { BaseRepoUrlPickerProps } from './types';
 import { Select, SelectItem } from '@backstage/core-components';
 
@@ -65,14 +64,12 @@ export const AzureRepoPicker = (
             items={organizationItems}
           />
         ) : (
-          <>
-            <InputLabel htmlFor="orgInput">Organization</InputLabel>
-            <Input
-              id="orgInput"
-              onChange={e => onChange({ organization: e.target.value })}
-              value={organization}
-            />
-          </>
+          <TextField
+            id="orgInput"
+            label="Organization"
+            onChange={e => onChange({ organization: e.target.value })}
+            value={organization}
+          />
         )}
         <FormHelperText>
           The Organization that this repo will belong to
@@ -95,14 +92,12 @@ export const AzureRepoPicker = (
             items={projectItems}
           />
         ) : (
-          <>
-            <InputLabel htmlFor="projectInput">Project</InputLabel>
-            <Input
-              id="projectInput"
-              onChange={e => onChange({ project: e.target.value })}
-              value={project}
-            />
-          </>
+          <TextField
+            id="projectInput"
+            label="Project"
+            onChange={e => onChange({ project: e.target.value })}
+            value={project}
+          />
         )}
         <FormHelperText>
           The Project that this repo will belong to
diff --git a/plugins/scaffolder/src/components/fields/RepoUrlPicker/GerritRepoPicker.tsx b/plugins/scaffolder/src/components/fields/RepoUrlPicker/GerritRepoPicker.tsx
index 1b13c5eb29..48504a0f7c 100644
--- a/plugins/scaffolder/src/components/fields/RepoUrlPicker/GerritRepoPicker.tsx
+++ b/plugins/scaffolder/src/components/fields/RepoUrlPicker/GerritRepoPicker.tsx
@@ -16,8 +16,7 @@
 import React from 'react';
 import FormControl from '@material-ui/core/FormControl';
 import FormHelperText from '@material-ui/core/FormHelperText';
-import Input from '@material-ui/core/Input';
-import InputLabel from '@material-ui/core/InputLabel';
+import TextField from '@material-ui/core/TextField';
 import { BaseRepoUrlPickerProps } from './types';
 
 export const GerritRepoPicker = (props: BaseRepoUrlPickerProps) => {
@@ -26,9 +25,9 @@ export const GerritRepoPicker = (props: BaseRepoUrlPickerProps) => {
   return (
     <>
       <FormControl margin="normal" error={rawErrors?.length > 0 && !workspace}>
-        <InputLabel htmlFor="ownerInput">Owner</InputLabel>
-        <Input
+        <TextField
           id="ownerInput"
+          label="Owner"
           onChange={e => onChange({ owner: e.target.value })}
           value={owner}
         />
@@ -39,9 +38,9 @@ export const GerritRepoPicker = (props: BaseRepoUrlPickerProps) => {
         required
         error={rawErrors?.length > 0 && !workspace}
       >
-        <InputLabel htmlFor="parentInput">Parent</InputLabel>
-        <Input
+        <TextField
           id="parentInput"
+          label="Parent"
           onChange={e => onChange({ workspace: e.target.value })}
           value={workspace}
         />
diff --git a/plugins/scaffolder/src/components/fields/RepoUrlPicker/GiteaRepoPicker.tsx b/plugins/scaffolder/src/components/fields/RepoUrlPicker/GiteaRepoPicker.tsx
index 9fb3af211f..206ace11ef 100644
--- a/plugins/scaffolder/src/components/fields/RepoUrlPicker/GiteaRepoPicker.tsx
+++ b/plugins/scaffolder/src/components/fields/RepoUrlPicker/GiteaRepoPicker.tsx
@@ -16,8 +16,7 @@
 import React from 'react';
 import FormControl from '@material-ui/core/FormControl';
 import FormHelperText from '@material-ui/core/FormHelperText';
-import Input from '@material-ui/core/Input';
-import InputLabel from '@material-ui/core/InputLabel';
+import TextField from '@material-ui/core/TextField';
 import { Select, SelectItem } from '@backstage/core-components';
 import { BaseRepoUrlPickerProps } from './types';
 
@@ -56,9 +55,9 @@ export const GiteaRepoPicker = (
           />
         ) : (
           <>
-            <InputLabel htmlFor="ownerInput">Owner</InputLabel>
-            <Input
+            <TextField
               id="ownerInput"
+              label="Owner"
               onChange={e => onChange({ owner: e.target.value })}
               value={owner}
             />
diff --git a/plugins/scaffolder/src/components/fields/RepoUrlPicker/GithubRepoPicker.tsx b/plugins/scaffolder/src/components/fields/RepoUrlPicker/GithubRepoPicker.tsx
index 5d46dc4333..fc40be6670 100644
--- a/plugins/scaffolder/src/components/fields/RepoUrlPicker/GithubRepoPicker.tsx
+++ b/plugins/scaffolder/src/components/fields/RepoUrlPicker/GithubRepoPicker.tsx
@@ -16,8 +16,7 @@
 import React from 'react';
 import FormControl from '@material-ui/core/FormControl';
 import FormHelperText from '@material-ui/core/FormHelperText';
-import Input from '@material-ui/core/Input';
-import InputLabel from '@material-ui/core/InputLabel';
+import TextField from '@material-ui/core/TextField';
 import { Select, SelectItem } from '@backstage/core-components';
 import { BaseRepoUrlPickerProps } from './types';
 
@@ -52,14 +51,12 @@ export const GithubRepoPicker = (
             items={ownerItems}
           />
         ) : (
-          <>
-            <InputLabel htmlFor="ownerInput">Owner</InputLabel>
-            <Input
-              id="ownerInput"
-              onChange={e => onChange({ owner: e.target.value })}
-              value={owner}
-            />
-          </>
+          <TextField
+            id="ownerInput"
+            label="Owner"
+            onChange={e => onChange({ owner: e.target.value })}
+            value={owner}
+          />
         )}
         <FormHelperText>
           The organization, user or project that this repo will belong to
diff --git a/plugins/scaffolder/src/components/fields/RepoUrlPicker/GitlabRepoPicker.tsx b/plugins/scaffolder/src/components/fields/RepoUrlPicker/GitlabRepoPicker.tsx
index 12ae37bf15..f13d4bbbf3 100644
--- a/plugins/scaffolder/src/components/fields/RepoUrlPicker/GitlabRepoPicker.tsx
+++ b/plugins/scaffolder/src/components/fields/RepoUrlPicker/GitlabRepoPicker.tsx
@@ -16,8 +16,7 @@
 import React from 'react';
 import FormControl from '@material-ui/core/FormControl';
 import FormHelperText from '@material-ui/core/FormHelperText';
-import Input from '@material-ui/core/Input';
-import InputLabel from '@material-ui/core/InputLabel';
+import TextField from '@material-ui/core/TextField';
 import { Select, SelectItem } from '@backstage/core-components';
 import { BaseRepoUrlPickerProps } from './types';
 
@@ -55,14 +54,12 @@ export const GitlabRepoPicker = (
             items={ownerItems}
           />
         ) : (
-          <>
-            <InputLabel htmlFor="ownerInput">Owner</InputLabel>
-            <Input
-              id="ownerInput"
-              onChange={e => onChange({ owner: e.target.value })}
-              value={owner}
-            />
-          </>
+          <TextField
+            id="ownerInput"
+            label="Owner"
+            onChange={e => onChange({ owner: e.target.value })}
+            value={owner}
+          />
         )}
         <FormHelperText>
           GitLab namespace where this repository will belong to. It can be the