feat(bulk-import): add fields for annotations, labels and spec input (#1950)

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

Author: ciiay

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

@@ -0,0 +1,100 @@
+import React, { useState } from 'react';
+
+import { FormHelperText, TextField } from '@material-ui/core';
+
+import { PullRequestPreview, PullRequestPreviewData } from '../../types';
+
+interface KeyValueTextFieldProps {
+  repoName: string;
+  label: string;
+  name: string;
+  value: string;
+  onChange: (
+    event: React.FocusEvent<HTMLTextAreaElement | HTMLInputElement>,
+  ) => void;
+  formErrors: PullRequestPreviewData;
+  setFormErrors: (value: React.SetStateAction<PullRequestPreviewData>) => void;
+}
+
+const validateKeyValuePairs = (value: string): string | null => {
+  const keyValuePairs = value.split(';').map(pair => pair.trim());
+  for (const pair of keyValuePairs) {
+    if (pair) {
+      const [key, val] = pair.split(':').map(part => part.trim());
+      if (!key || !val) {
+        return 'Each entry must have a key and a value separated by a colon.';
+      }
+    }
+  }
+  return null;
+};
+
+const KeyValueTextField: React.FC<KeyValueTextFieldProps> = ({
+  repoName,
+  label,
+  name,
+  value,
+  onChange,
+  setFormErrors,
+  formErrors,
+}) => {
+  const [error, setError] = useState<string | null>(null);
+  const fieldName = name.split('.').pop() ?? '';
+
+  const removeError = () => {
+    const err = { ...formErrors };
+    if (err[repoName]) {
+      delete err[repoName][fieldName as keyof PullRequestPreview];
+    }
+    setFormErrors(err);
+  };
+
+  const getUpdatedFormError = (
+    validationError: string,
+  ): PullRequestPreviewData => {
+    return {
+      ...formErrors,
+      [repoName]: {
+        ...formErrors[repoName],
+        [fieldName]: validationError,
+      },
+    };
+  };
+
+  const handleChange = (
+    event: React.FocusEvent<HTMLTextAreaElement | HTMLInputElement, Element>,
+  ) => {
+    const validationError = validateKeyValuePairs(event.target.value);
+    if (validationError) {
+      setError(validationError);
+      setFormErrors(getUpdatedFormError(validationError));
+    } else {
+      setError(null);
+      removeError();
+    }
+    onChange(event);
+  };
+
+  return (
+    <div>
+      <TextField
+        multiline
+        label={label}
+        placeholder="key1: value2; key2: value2"
+        variant="outlined"
+        margin="normal"
+        fullWidth
+        name={name}
+        value={value}
+        onChange={handleChange}
+        error={!!error}
+        helperText={error}
+      />
+      <FormHelperText style={{ marginLeft: '0.8rem' }}>
+        Use semicolon to separate {label.toLowerCase()}
+      </FormHelperText>
+    </div>
+  );
+};
+
+export default KeyValueTextField;

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

@@ -145,14 +145,14 @@ export const PreviewFileSidebar = ({
             {repositoryType === RepositorySelection.Repository ? (
               <>
                 <Typography variant="h5">
-                  {`${data.orgName || data.organizationUrl}/${data.repoName}`}
+                  {`${data.orgName ?? data.organizationUrl}/${data.repoName}`}
                 </Typography>
-                <Link to={data.repoUrl || ''}>{data.repoUrl}</Link>
+                <Link to={data.repoUrl ?? ''}>{data.repoUrl}</Link>
               </>
             ) : (
               <>
                 <Typography variant="h5">{`${data.orgName}`}</Typography>
-                <Link to={data.repoUrl || ''}>{data.organizationUrl}</Link>
+                <Link to={data.repoUrl ?? ''}>{data.organizationUrl}</Link>
               </>
             )}
           </div>
@@ -171,7 +171,7 @@ export const PreviewFileSidebar = ({
           {repositoryType === RepositorySelection.Repository &&
             data.catalogInfoYaml?.prTemplate && (
               <PreviewPullRequest
-                repoName={data.repoName || ''}
+                repoName={data.repoName ?? ''}
                 pullRequest={pullRequest}
                 setPullRequest={setPullRequest}
                 formErrors={formErrors as PullRequestPreviewData}