scaffolder: extract reusable TextValuePicker from EntityNamePicker

Signed-off-by: Mike Lewis <mtlewis@users.noreply.github.com>

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

@@ -15,30 +15,11 @@
  */
 import React from 'react';
 import { FieldProps } from '@rjsf/core';
-import InputLabel from '@material-ui/core/InputLabel';
-import Input from '@material-ui/core/Input';
-import FormControl from '@material-ui/core/FormControl';
-import FormHelperText from '@material-ui/core/FormHelperText';
+import { TextValuePicker } from '../TextValuePicker';
 
-// TODO(Mike/Himanshu): Create a simple TextValuePicker so that it could be reused for creating custom field extensions with its own validators.
 export const EntityNamePicker = ({
-  onChange,
-  required,
   schema: { title = 'Name', description = 'Unique name of the component' },
-  rawErrors,
-  formData,
+  ...props
 }: FieldProps<string>) => (
-  <FormControl
-    margin="normal"
-    required={required}
-    error={rawErrors?.length > 0 && !formData}
-  >
-    <InputLabel htmlFor="nameInput">{title}</InputLabel>
-    <Input
-      id="nameInput"
-      onChange={({ target: { value } }) => onChange(value)}
-      value={formData ?? ''}
-    />
-    <FormHelperText>{description}</FormHelperText>
-  </FormControl>
+  <TextValuePicker schema={{ title, description }} {...props} />
 );

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

@@ -0,0 +1,36 @@
+/*
+ * Copyright 2021 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 React from 'react';
+import { FieldProps } from '@rjsf/core';
+import { TextField } from '@material-ui/core';
+
+export const TextValuePicker = ({
+  onChange,
+  required,
+  schema: { title, description },
+  rawErrors,
+  formData,
+}: FieldProps<string>) => (
+  <TextField
+    label={title}
+    helperText={description}
+    required={required}
+    value={formData ?? ''}
+    onChange={({ target: { value } }) => onChange(value)}
+    margin="normal"
+    error={rawErrors?.length > 0 && !formData}
+  />
+);

plugins/scaffolder/src/components/fields/TextValuePicker/index.ts

@@ -0,0 +1,16 @@
+/*
+ * Copyright 2021 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 { TextValuePicker } from './TextValuePicker';

plugins/scaffolder/src/components/fields/index.ts

@@ -17,3 +17,4 @@ export * from './EntityNamePicker';
 export * from './EntityPicker';
 export * from './OwnerPicker';
 export * from './RepoUrlPicker';
+export * from './TextValuePicker';

plugins/scaffolder/src/index.ts

@@ -35,4 +35,5 @@ export {
   EntityPicker,
   OwnerPicker,
   RepoUrlPicker,
+  TextValuePicker,
 } from './components/fields';