✨ Add form for questionnaire import

Signed-off-by: ibolton336 <[email protected]>

client/public/locales/en/translation.json

@@ -359,6 +359,7 @@
     "unknown": "Unknown",
     "unsuitableForContainers": "Unsuitable for containers",
     "uploadApplicationFile": "Upload your application file",
+    "uploadYamlFile": "Upload your YAML file",
     "url": "URL",
     "user": "User",
     "version": "Version",

client/src/app/pages/assessment-management/assessment-settings/assessment-settings-page.tsx

@@ -50,6 +50,7 @@ import { getAxiosErrorMessage } from "@app/utils/utils";
 import { Questionnaire } from "@app/api/models";
 import { useHistory } from "react-router-dom";
 import { Paths } from "@app/Paths";
+import { ImportQuestionnaireForm } from "@app/pages/assessment/import-questionnaire-form/import-questionnaire-form";
 
 const AssessmentSettings: React.FC = () => {
   const { t } = useTranslation();
@@ -375,7 +376,7 @@ const AssessmentSettings: React.FC = () => {
         isOpen={isImportModal}
         onClose={() => setIsImportModal(false)}
       >
-        <Text>TODO Import questionnaire component</Text>
+        <ImportQuestionnaireForm onSaved={() => setIsImportModal(false)} />
       </Modal>
       <Modal
         id="download.template.modal"

client/src/app/pages/assessment/import-questionnaire-form/import-questionnaire-form.tsx

@@ -0,0 +1,172 @@
+import React, { useState } from "react";
+import { AxiosResponse } from "axios";
+import { useTranslation } from "react-i18next";
+import * as yup from "yup";
+
+import {
+  ActionGroup,
+  Button,
+  ButtonVariant,
+  FileUpload,
+  Form,
+  FormHelperText,
+  HelperText,
+  HelperTextItem,
+} from "@patternfly/react-core";
+
+import { NotificationsContext } from "@app/components/NotificationsContext";
+import { HookFormPFGroupController } from "@app/components/HookFormPFFields";
+import { useForm } from "react-hook-form";
+import { FileLoadError, IReadFile } from "@app/api/models";
+import { yupResolver } from "@hookform/resolvers/yup";
+import { useCreateFileMutation } from "@app/queries/targets";
+
+export interface ImportQuestionnaireFormProps {
+  onSaved: (response: AxiosResponse) => void;
+}
+export interface ImportQuestionnaireFormValues {
+  yamlFile: IReadFile;
+}
+
+export const yamlFileSchema: yup.SchemaOf<IReadFile> = yup.object({
+  fileName: yup.string().required(),
+  fullFile: yup.mixed<File>(),
+  loadError: yup.mixed<FileLoadError>(),
+  loadPercentage: yup.number(),
+  loadResult: yup.mixed<"danger" | "success" | undefined>(),
+  data: yup.string(),
+  responseID: yup.number(),
+});
+
+export const ImportQuestionnaireForm: React.FC<
+  ImportQuestionnaireFormProps
+> = ({ onSaved }) => {
+  const { t } = useTranslation();
+
+  const [filename, setFilename] = React.useState<string>();
+  const [isFileRejected, setIsFileRejected] = useState(false);
+  const validationSchema: yup.SchemaOf<ImportQuestionnaireFormValues> = yup
+    .object()
+    .shape({
+      yamlFile: yamlFileSchema,
+    });
+  const methods = useForm<ImportQuestionnaireFormValues>({
+    resolver: yupResolver(validationSchema),
+    mode: "onChange",
+  });
+
+  const {
+    handleSubmit,
+    formState: { isSubmitting, isValidating, isValid, isDirty },
+    getValues,
+    setValue,
+    control,
+    watch,
+    setFocus,
+    clearErrors,
+    trigger,
+    reset,
+  } = methods;
+
+  const { mutateAsync: createYamlFileAsync } = useCreateFileMutation();
+
+  const handleFileUpload = async (file: File) => {
+    setFilename(file.name);
+    const formFile = new FormData();
+    formFile.append("file", file);
+
+    const newYamlFile: IReadFile = {
+      fileName: file.name,
+      fullFile: file,
+    };
+
+    return createYamlFileAsync({
+      formData: formFile,
+      file: newYamlFile,
+    });
+  };
+
+  const onSubmit = (values: ImportQuestionnaireFormValues) => {
+    console.log("values", values);
+  };
+  return (
+    <Form onSubmit={handleSubmit(onSubmit)}>
+      <HookFormPFGroupController
+        control={control}
+        name="yamlFile"
+        label={t("terms.uploadYamlFile")}
+        fieldId="yamlFile"
+        helperText="Upload a YAML file"
+        renderInput={({ field: { onChange, name }, fieldState: { error } }) => (
+          <FileUpload
+            id="yamlFile"
+            name={name}
+            value={filename}
+            filename={filename}
+            filenamePlaceholder="Drag and drop a file or upload one"
+            dropzoneProps={{
+              accept: {
+                "text/yaml": [".yml", ".yaml"],
+                // "text/xml": [".xml"],
+              },
+              maxSize: 1000000,
+              onDropRejected: (event) => {
+                const currentFile = event[0];
+                if (currentFile.file.size > 1000000) {
+                  methods.setError("yamlFile", {
+                    type: "custom",
+                    message: "Max file size of 1 MB exceeded.",
+                  });
+                }
+                setIsFileRejected(true);
+              },
+            }}
+            validated={isFileRejected || error ? "error" : "default"}
+            onFileInputChange={async (_, file) => {
+              console.log("uploading file", file);
+              handleFileUpload(file)
+                .then((res) => {
+                  // setValue("yamlFile", res);
+                  setFocus("yamlFile");
+                  clearErrors("yamlFile");
+                  trigger("yamlFile");
+                })
+                .catch((err) => {
+                  // setValue("yamlFile", null);
+                });
+            }}
+            onClearClick={() => {
+              console.log("clearing file");
+              // onChange(0);
+              // setFilename("default.png");
+              // setValue("imageID", null);
+              // setIsImageFileRejected(false);
+            }}
+            browseButtonText="Upload"
+          />
+        )}
+      />
+
+      {isFileRejected && (
+        <FormHelperText>
+          <HelperText>
+            <HelperTextItem variant="error">
+              You should select a YAML file.
+            </HelperTextItem>
+          </HelperText>
+        </FormHelperText>
+      )}
+      <ActionGroup>
+        <Button
+          type="submit"
+          aria-label="submit"
+          id="import-questionnaire-submit-button"
+          variant={ButtonVariant.primary}
+          isDisabled={!isValid || isSubmitting || isValidating || !isDirty}
+        >
+          {t("actions.import")}
+        </Button>
+      </ActionGroup>
+    </Form>
+  );
+};