feat: add Importers Create/Update actions

client/src/app/Routes.tsx

@@ -27,15 +27,24 @@ const SBOMList = lazy(() => import("./pages/sbom-list"));
 const SBOMUpload = lazy(() => import("./pages/sbom-upload"));
 const SBOMDetails = lazy(() => import("./pages/sbom-details"));
 
+// Importers
+const ImporterList = lazy(() => import("./pages/importer-list"));
+const ImporterCreate = lazy(
+  () => import("./pages/importer-create-update/importer-create"),
+);
+const ImporterEdit = lazy(
+  () => import("./pages/importer-create-update/importer-edit"),
+);
+
 // Others
 const Search = lazy(() => import("./pages/search"));
-const ImporterList = lazy(() => import("./pages/importer-list"));
 
 export enum PathParam {
   ADVISORY_ID = "advisoryId",
   VULNERABILITY_ID = "vulnerabilityId",
   SBOM_ID = "sbomId",
   PACKAGE_ID = "packageId",
+  IMPORTER_ID = "importerId",
 }
 
 export const Paths = {
@@ -51,6 +60,8 @@ export const Paths = {
   packageDetails: `/packages/:${PathParam.PACKAGE_ID}`,
   search: "/search",
   importers: "/importers",
+  importerCreate: "/importers/create",
+  importerEdit: `/importers/:${PathParam.IMPORTER_ID}`,
 } as const;
 
 export const AppRoutes = () => {
@@ -82,6 +93,14 @@ export const AppRoutes = () => {
       path: Paths.importers,
       element: <ImporterList />,
     },
+    {
+      path: Paths.importerCreate,
+      element: <ImporterCreate />,
+    },
+    {
+      path: Paths.importerEdit,
+      element: <ImporterEdit />,
+    },
     { path: Paths.search, element: <Search /> },
   ]);
 

client/src/app/components/EditLabelsForm.tsx

@@ -15,7 +15,7 @@ import {
 } from "@patternfly/react-core";
 
 import type { Label as LabelModel } from "@app/api/models";
-import { getString } from "@app/utils/utils";
+import { getString, validateLabelString } from "@app/utils/utils";
 
 import {
   joinKeyValueAsString,
@@ -134,13 +134,7 @@ export const EditLabelsForm: React.FC<EditLabelsFormProps> = ({
             // - Both key and value parts do not contain backslashes or are empty
             // - The key does not start with whitespace or '='
             // This is used to validate new label options in the form.
-            validateNewOption={(value) =>
-              !!value &&
-              value.trim().length > 0 &&
-              /^(?!.*\\)(?!\s*\\)(?!\s*=)[^=\\\s][^=\\]*\s*=?\s*[^=\\]+$/.test(
-                value,
-              )
-            }
+            validateNewOption={validateLabelString}
             filterBeforeOnChange={(selections, newOption) => {
               const newOptionKeyValue = splitStringAsKeyValue(
                 getString(newOption.name),

client/src/app/components/HookFormPFFields/HookFormPFTextInput.tsx

@@ -1,17 +1,20 @@
-import type { FieldValues, Path, PathValue } from "react-hook-form";
-
 import { getValidatedFromErrors } from "@app/utils/utils";
 import { TextInput, type TextInputProps } from "@patternfly/react-core";
+import type { FieldValues, Path, PathValue } from "react-hook-form";
 import {
-  type BaseHookFormPFGroupControllerProps,
-  HookFormPFGroupController,
   extractGroupControllerProps,
+  HookFormPFGroupController,
+  type BaseHookFormPFGroupControllerProps,
 } from "./HookFormPFGroupController";
 
+interface WithIntegerType extends Omit<TextInputProps, "type"> {
+  type?: TextInputProps["type"] | "integer";
+}
+
 export type HookFormPFTextInputProps<
   TFieldValues extends FieldValues,
   TName extends Path<TFieldValues>,
-> = TextInputProps & BaseHookFormPFGroupControllerProps<TFieldValues, TName>;
+> = WithIntegerType & BaseHookFormPFGroupControllerProps<TFieldValues, TName>;
 
 export const HookFormPFTextInput = <
   TFieldValues extends FieldValues = FieldValues,
@@ -25,7 +28,9 @@ export const HookFormPFTextInput = <
     HookFormPFTextInputProps<TFieldValues, TName>
   >(props);
   const { fieldId, helperText, isRequired, errorsSuppressed } = extractedProps;
-  const { type } = remainingProps;
+  const { type } = props;
+  const inputType = type === "integer" ? "number" : type;
+
   return (
     <HookFormPFGroupController<TFieldValues, TName>
       {...extractedProps}
@@ -42,7 +47,14 @@ export const HookFormPFTextInput = <
           onChange={(_, value) => {
             if (type === "number") {
               onChange(
-                ((value && Number.parseInt(value, 10)) || "") as PathValue<
+                ((value && Number(value)) ?? "") as PathValue<
+                  TFieldValues,
+                  TName
+                >,
+              );
+            } else if (type === "integer") {
+              onChange(
+                ((value && parseInt(value, 10)) ?? "") as PathValue<
                   TFieldValues,
                   TName
                 >,
@@ -59,6 +71,7 @@ export const HookFormPFTextInput = <
               : getValidatedFromErrors(error, isDirty, isTouched)
           }
           {...remainingProps}
+          type={inputType}
         />
       )}
     />

client/src/app/hooks/useAsyncYupValidation.ts

@@ -0,0 +1,21 @@
+import * as React from "react";
+import type * as yup from "yup";
+
+export const useAsyncYupValidation = <TFieldValues>(
+  values: TFieldValues,
+  schema: yup.SchemaOf<TFieldValues>,
+) => {
+  const [isValid, setIsValid] = React.useState(false);
+  React.useEffect(() => {
+    const validate = async () => {
+      try {
+        await schema.validate(values);
+        setIsValid(true);
+      } catch (_e: unknown) {
+        setIsValid(false);
+      }
+    };
+    validate();
+  }, [values, schema]);
+  return isValid;
+};

client/src/app/layout/default-layout.tsx

@@ -3,7 +3,6 @@ import type React from "react";
 import { Page, SkipToContent } from "@patternfly/react-core";
 
 import { Notifications } from "@app/components/Notifications";
-import { PageContentWithDrawerProvider } from "@app/components/PageDrawerContext";
 import { HeaderApp } from "./header";
 import { SidebarApp } from "./sidebar";
 
@@ -25,10 +24,8 @@ export const DefaultLayout: React.FC<DefaultLayoutProps> = ({ children }) => {
       skipToContent={PageSkipToContent}
       mainContainerId={pageId}
     >
-      <PageContentWithDrawerProvider>
-        {children}
-        <Notifications />
-      </PageContentWithDrawerProvider>
+      {children}
+      <Notifications />
     </Page>
   );
 };