diff --git a/.changeset/clever-laws-raise.md b/.changeset/clever-laws-raise.md
new file mode 100644
index 0000000000..8733642cc8
--- /dev/null
+++ b/.changeset/clever-laws-raise.md
@@ -0,0 +1,6 @@
+---
+'@backstage/plugin-scaffolder': patch
+'@backstage/plugin-scaffolder-react': patch
+---
+
+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 (
<>
- {title}
- {
onChange(e.target.value);
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 (
- <>
- {title}
- {
- onChange(Array(e.target?.value.length).fill('*').join(''));
- setSecrets({ [name]: e.target?.value });
- }}
- value={secrets[name] ?? ''}
- type="password"
- autoComplete="off"
- />
- >
+ {
+ onChange(Array(e.target.value.length).fill('*').join(''));
+ setSecrets({ [name]: e.target.value });
+ }}
+ value={secrets[name] ?? ''}
+ type="password"
+ autoComplete="off"
+ />
);
};
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}
>
- Branch
- 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}
/>
) : (
- <>
- Organization
- onChange({ organization: e.target.value })}
- value={organization}
- />
- >
+ onChange({ organization: e.target.value })}
+ value={organization}
+ />
)}
The Organization that this repo will belong to
@@ -95,14 +92,12 @@ export const AzureRepoPicker = (
items={projectItems}
/>
) : (
- <>
- Project
- onChange({ project: e.target.value })}
- value={project}
- />
- >
+ onChange({ project: e.target.value })}
+ value={project}
+ />
)}
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 (
<>
0 && !workspace}>
- Owner
- onChange({ owner: e.target.value })}
value={owner}
/>
@@ -39,9 +38,9 @@ export const GerritRepoPicker = (props: BaseRepoUrlPickerProps) => {
required
error={rawErrors?.length > 0 && !workspace}
>
- Parent
- 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 = (
/>
) : (
<>
- Owner
- 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}
/>
) : (
- <>
- Owner
- onChange({ owner: e.target.value })}
- value={owner}
- />
- >
+ onChange({ owner: e.target.value })}
+ value={owner}
+ />
)}
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}
/>
) : (
- <>
- Owner
- onChange({ owner: e.target.value })}
- value={owner}
- />
- >
+ onChange({ owner: e.target.value })}
+ value={owner}
+ />
)}
GitLab namespace where this repository will belong to. It can be the