✨ Archetype form for Create and Edit (#1343)

Add the Archetype form along with Create and Edit actions from the
archetype table.

MSW stubs for the hub archetype api are enabled by default for now.

Resolves #1265

## Screenshots
Create new (empty):
![Screenshot from 2023-09-11
19-48-12](https://github.com/konveyor/tackle2-ui/assets/3985964/01ea2f22-827f-4446-b8f8-6b6a07da5358)

Tag selection field open with typeahead active:
![Screenshot from 2023-09-11
19-49-19](https://github.com/konveyor/tackle2-ui/assets/3985964/e65ce42c-0138-433f-9140-443ad9555ca1)

Create fully filled in:
![Screenshot from 2023-09-11
19-49-35](https://github.com/konveyor/tackle2-ui/assets/3985964/630cb76e-6e04-4402-9d19-87c18f675c89)

Create in error with an archetype name that already exists:
![Screenshot from 2023-09-11
19-49-51](https://github.com/konveyor/tackle2-ui/assets/3985964/f983af19-d0d2-4e6f-a83a-a0a121789b65)

Edit existing:
![Screenshot from 2023-09-11
19-52-39](https://github.com/konveyor/tackle2-ui/assets/3985964/541b9126-70d8-4e77-9453-ef8cd20fa27f)

---------

Signed-off-by: Scott J Dickerson <[email protected]>

client/public/locales/en/translation.json

@@ -128,6 +128,7 @@
       "newTag": "New Tag",
       "newTagCategory": "New tag category",
       "update": "Update {{what}}",
+      "updateArchetype": "Update archetype",
       "updateApplication": "Update application",
       "updateBusinessService": "Update business service",
       "updateJobFunction": "Update job function",

client/src/app/components/Autocomplete.tsx

@@ -15,6 +15,7 @@ import {
 
 export interface IAutocompleteProps {
   onChange: (selections: string[]) => void;
+  id?: string;
   allowUserOptions?: boolean;
   options?: string[];
   placeholderText?: string;
@@ -27,6 +28,7 @@ export interface IAutocompleteProps {
 }
 
 export const Autocomplete: React.FC<IAutocompleteProps> = ({
+  id = "",
   onChange,
   options = [],
   allowUserOptions = false,
@@ -258,6 +260,7 @@ export const Autocomplete: React.FC<IAutocompleteProps> = ({
   const inputGroup = (
     <div ref={searchInputRef}>
       <SearchInput
+        id={id}
         value={inputValue}
         hint={hint}
         onChange={handleInputChange}
@@ -285,7 +288,7 @@ export const Autocomplete: React.FC<IAutocompleteProps> = ({
 
   return (
     <Flex direction={{ default: "column" }}>
-      <FlexItem>
+      <FlexItem key="input">
         <Popper
           trigger={inputGroup}
           triggerRef={searchInputRef}
@@ -296,7 +299,7 @@ export const Autocomplete: React.FC<IAutocompleteProps> = ({
           onDocumentClick={handleClick}
         />
       </FlexItem>
-      <FlexItem>
+      <FlexItem key="chips">
         <Flex spaceItems={{ default: "spaceItemsXs" }}>
           {Array.from(currentChips).map((currentChip) => (
             <FlexItem key={currentChip}>

client/src/app/pages/archetypes/archetypes-page.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { useHistory } from "react-router-dom";
 import {
@@ -9,6 +9,7 @@ import {
   EmptyStateFooter,
   EmptyStateHeader,
   EmptyStateIcon,
+  Modal,
   PageSection,
   PageSectionVariants,
   Text,
@@ -46,6 +47,7 @@ import {
 
 import ArchetypeApplicationsColumn from "./components/archetype-applications-column";
 import ArchetypeDescriptionColumn from "./components/archetype-description-column";
+import ArchetypeForm from "./components/archetype-form";
 import ArchetypeMaintainersColumn from "./components/archetype-maintainers-column";
 import ArchetypeTagsColumn from "./components/archetype-tags-column";
 import { Archetype } from "@app/api/models";
@@ -58,6 +60,13 @@ const Archetypes: React.FC = () => {
   const history = useHistory();
   const { pushNotification } = React.useContext(NotificationsContext);
 
+  const [openCreateArchetype, setOpenCreateArchetype] =
+    useState<boolean>(false);
+
+  const [archetypeToEdit, setArchetypeToEdit] = useState<Archetype | null>(
+    null
+  );
+
   const { archetypes, isFetching, error: fetchError } = useFetchArchetypes();
 
   const onError = (error: AxiosError) => {
@@ -143,7 +152,7 @@ const Archetypes: React.FC = () => {
       id="create-new-archetype"
       aria-label="Create new archetype"
       variant={ButtonVariant.primary}
-      onClick={() => {}} // TODO: Add create archetype modal
+      onClick={() => setOpenCreateArchetype(true)}
     >
       {t("dialog.title.newArchetype")}
     </Button>
@@ -247,7 +256,7 @@ const Archetypes: React.FC = () => {
                               },
                               {
                                 title: t("actions.edit"),
-                                onClick: () => alert("TODO"),
+                                onClick: () => setArchetypeToEdit(archetype),
                               },
                               { isSeparator: true },
                               {
@@ -270,8 +279,33 @@ const Archetypes: React.FC = () => {
         </ConditionalRender>
       </PageSection>
 
-      {/* TODO: Add create/edit modal */}
+      {/* Create modal */}
+      <Modal
+        title={t("dialog.title.newArchetype")}
+        variant="medium"
+        isOpen={openCreateArchetype}
+        onClose={() => setOpenCreateArchetype(false)}
+      >
+        <ArchetypeForm onClose={() => setOpenCreateArchetype(false)} />
+      </Modal>
+
+      {/* Edit modal */}
+      <Modal
+        title={t("dialog.title.updateArchetype")}
+        variant="medium"
+        isOpen={!!archetypeToEdit}
+        onClose={() => setArchetypeToEdit(null)}
+      >
+        <ArchetypeForm
+          key={archetypeToEdit?.id ?? -1}
+          toEdit={archetypeToEdit}
+          onClose={() => setArchetypeToEdit(null)}
+        />
+      </Modal>
+
       {/* TODO: Add duplicate confirm modal */}
+
+      {/* Delete confirm modal */}
       <ConfirmDialog
         title={t("dialog.title.deleteWithName", {
           what: t("terms.archetype").toLowerCase(),