Improved code

Signed-off-by: Yi Cai <[email protected]>

Author: ciiay

plugins/bulk-import/src/components/PreviewFile/KeyValueTextField.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+
+import { FormHelperText, TextField } from '@material-ui/core';
+
+interface KeyValueTextFieldProps {
+  label: string;
+  name: string;
+  value: string;
+  onChange: (
+    event: React.FocusEvent<HTMLTextAreaElement | HTMLInputElement>,
+  ) => void;
+}
+
+const KeyValueTextField: React.FC<KeyValueTextFieldProps> = ({
+  label,
+  name,
+  value,
+  onChange,
+}) => {
+  return (
+    <div>
+      <TextField
+        multiline
+        label={label}
+        placeholder="key1: value2; key2: value2"
+        variant="outlined"
+        margin="normal"
+        fullWidth
+        name={name}
+        value={value}
+        onChange={onChange}
+      />
+      <FormHelperText style={{ marginLeft: '1rem' }}>
+        Use semicolon to separate {label.toLowerCase()}
+      </FormHelperText>
+    </div>
+  );
+};
+
+export default KeyValueTextField;

plugins/bulk-import/src/components/PreviewFile/PreviewPullRequest.tsx

@@ -24,6 +24,7 @@ import { useFormikContext } from 'formik';
 
 import { AddRepositoriesFormValues, PullRequestPreviewData } from '../../types';
 import { getYamlKeyValuePairs } from '../../utils/repository-utils';
+import KeyValueTextField from './KeyValueTextField';
 
 const useDrawerContentStyles = makeStyles(theme => ({
   previewCard: {
@@ -209,6 +210,20 @@ export const PreviewPullRequest = ({
     }
   };
 
+  const keyValueTextFields = [
+    {
+      label: 'Annotations',
+      name: 'prAnnotations',
+      value: pullRequest?.[repoName]?.prAnnotations,
+    },
+    {
+      label: 'Labels',
+      name: 'prLabels',
+      value: pullRequest?.[repoName]?.prLabels,
+    },
+    { label: 'Spec', name: 'prSpec', value: pullRequest?.[repoName]?.prSpec },
+  ];
+
   return (
     <>
       <Box marginTop={2}>
@@ -353,42 +368,15 @@ export const PreviewPullRequest = ({
         WARNING: This may fail if no CODEOWNERS file is found at the target
         location.
       </FormHelperText>
-      <TextField
-        multiline
-        label="Annotations"
-        placeholder="key1: value2; key2: value2"
-        variant="outlined"
-        margin="normal"
-        fullWidth
-        name={`repositories.${pullRequest[repoName].componentName}.prAnnotations`}
-        value={pullRequest?.[repoName]?.prAnnotations}
-        onChange={handleChange}
-      />
-      <FormHelperText>Use semicolon to separate annotations</FormHelperText>
-      <TextField
-        multiline
-        label="Labels"
-        placeholder="key1: value2; key2: value2"
-        variant="outlined"
-        margin="normal"
-        fullWidth
-        name={`repositories.${pullRequest[repoName].componentName}.prLabels`}
-        value={pullRequest?.[repoName]?.prLabels}
-        onChange={handleChange}
-      />
-      <FormHelperText>Use semicolon to separate labels</FormHelperText>
-      <TextField
-        multiline
-        label="Spec"
-        placeholder="key1: value2; key2: value2"
-        variant="outlined"
-        margin="normal"
-        fullWidth
-        name={`repositories.${pullRequest[repoName].componentName}.prSpec`}
-        value={pullRequest?.[repoName]?.prSpec}
-        onChange={handleChange}
-      />
-      <FormHelperText>Use semicolon to separate specs</FormHelperText>
+      {keyValueTextFields.map(field => (
+        <KeyValueTextField
+          key={field.name}
+          label={field.label}
+          name={`repositories.${pullRequest[repoName].componentName}.${field.name}`}
+          value={field.value || ''}
+          onChange={handleChange}
+        />
+      ))}
       <Box marginTop={2}>
         <Typography variant="h6">
           Preview {`${approvalTool.toLowerCase()}`}