fix: pulled develop and resolved conflicts

cypress/e2e/boilerplate-e2e/boilerplate.cy.js

@@ -19,9 +19,9 @@ describe("Create a new boilerplate", () => {
     cy.intercept("POST", "/api/organizations/**").as("createFirstBoilerplate");
     cy.get("tr").then(() => {
       cy.get("a:contains('Add New Boilerplate')").click();
-      cy.get('[data-testid="boilerplate-dropdown"]').click();
       cy.get("form").within(() => {
-        cy.get('[data-testid="General Purpose"]').first().click();
+        cy.get("[data-testid='boilerplate-dropdown']").click();
+        cy.get(".mantine-Select-item").first().click();
         cy.get('[data-testid="Title"]').type("New Unique Boilerplate");
         cy.get(".ql-editor").type(`This is some new boilerplate text!`);
         cy.get("button[type=submit]").click();
@@ -46,17 +46,17 @@ describe("Create a new boilerplate", () => {
       // Edit boilerplate
       cy.get("button:contains('Edit')").click();
       cy.get("form").within(() => {
-        cy.get("input:first").should(
+        cy.get('[data-testid="Title"]').should(
           "have.attr",
           "value",
           "New Unique Boilerplate"
         );
       });
       cy.get("form").within(() => {
-        cy.get(".dropdown").within(() => {
-          cy.get("button:contains('General Purpose')").first().click();
-          cy.get("button:contains('Gender Equality')").first().click();
-        });
+        cy.get("[data-testid='boilerplate-dropdown']").click();
+        cy.get(".mantine-Select-item:contains('Gender Equality')")
+          .first()
+          .click();
         cy.get('[data-testid="Title"]').clear();
         cy.get('[data-testid="Title"]').type(
           "Test Updated New Unique Boilerplate"

package.json

@@ -9,7 +9,7 @@
   "dependencies": {
     "@dnd-kit/core": "^6.0.8",
     "@dnd-kit/modifiers": "^6.0.0",
-    "@dnd-kit/sortable": "^7.0.1",
+    "@dnd-kit/sortable": "^7.0.2",
     "@emotion/react": "^11.11.1",
     "@mantine/core": "^6.0.11",
     "@mantine/hooks": "^6.0.11",

src/Components/Boilerplates/BoilerplateForm.jsx

@@ -1,15 +1,13 @@
 import React, { useRef, useState, useMemo } from "react";
-import { useQuery } from "react-query";
-import { Button } from "@mantine/core";
+import { useQuery, useMutation } from "react-query";
+import { Button, Select } from "@mantine/core";
 import TextBox from "../design/TextBox/TextBox";
 import RichTextEditor from "../design/RichTextEditor/RichTextEditor";
 import Label from "../design/Label/Label";
-import Dropdown from "../design/Dropdown/Dropdown";
-import "./BoilerplateForm.css";
 import countWords from "../../Helpers/countWords";
 import * as CategoriesService from "../../Services/Organizations/CategoriesService";
 import { useCurrentOrganization } from "../../Contexts/currentOrganizationContext";
-import CategoryNew from "../Categories/CategoryNew";
+import "./BoilerplateForm.css";
 
 export default function BoilerplateForm(props) {
   const { onDelete } = props;
@@ -19,13 +17,24 @@ export default function BoilerplateForm(props) {
     title: props.boilerplate?.title || "",
     text: props.boilerplate?.text || "",
     html: props.boilerplate?.text || "",
-    categoryId: props.boilerplate?.categoryId || "",
+    categoryName: props.boilerplate?.categoryName || null,
+    boilerplateFields: null,
   });
+
   const quillEl = useRef(null);
-  const { data: categories } = useQuery("getCategories", () =>
-    CategoriesService.getAllCategories(organizationClient)
+  const { data: categories, refetch: refetchCategories } = useQuery(
+    "getCategories",
+    () => CategoriesService.getAllCategories(organizationClient)
+  );
+  const { mutate: createCategory } = useMutation(
+    (categoryFields) =>
+      CategoriesService.createCategory(organizationClient, categoryFields),
+    {
+      onSuccess: () => {
+        refetchCategories();
+      },
+    }
   );
-  const [showingCategoriesNew, setShowingCategoriesNew] = useState(false);
 
   const wordCount = useMemo(() => {
     return countWords(boilerplateFields.text);
@@ -36,89 +45,84 @@ export default function BoilerplateForm(props) {
 
     props.onSubmit({
       ...boilerplateFields,
+      categoryId: categories.find(
+        (category) => category.name === boilerplateFields.categoryName
+      ).id,
     });
   };
 
-  const handleCloseCategoryNew = (createdCategory) => {
-    setShowingCategoriesNew(false);
-
-    if (createdCategory) {
-      setBoilerplateFields({
-        ...boilerplateFields,
-        categoryId: createdCategory.id,
-      });
-    }
-  };
-
   return (
-    <>
-      <form className="BoilerplateForm" onSubmit={handleSubmit}>
-        <Dropdown
-          altLabel="Add Category"
-          onClickAltLabel={() => setShowingCategoriesNew(true)}
-          labelText="Category"
-          placeholder="Select a Category"
-          value={boilerplateFields.categoryId}
-          options={categories.map((category) => ({
-            value: category.id,
-            label: category.name,
-          }))}
-          onChange={(option) =>
-            setBoilerplateFields({
-              ...boilerplateFields,
-              categoryId: option.value,
-            })
-          }
-          testId="boilerplate-dropdown"
-        />
-        <TextBox
-          labelText="Title"
-          value={boilerplateFields.title}
-          onChange={(event) =>
-            setBoilerplateFields({
-              ...boilerplateFields,
-              title: event.target.value,
-            })
-          }
-          required
-        />
-        <div className="BoilerplateForm__ContentEditor">
-          <div className="BoilerplateForm__ContentEditorHeader">
-            <Label htmlFor="text-editor">Text</Label>
-            <b>WORD COUNT: {wordCount}</b>
-          </div>
-          <RichTextEditor
-            id="text-editor"
-            className="BoilerplateForm__ContentEditorInput"
-            ref={quillEl}
-            value={boilerplateFields.html}
-            onChange={(html) => {
-              setBoilerplateFields((previousBoilerplateFields) => ({
-                ...previousBoilerplateFields,
-                text: quillEl.current.getEditor().getText(),
-                html,
-              }));
-            }}
-          />
+    <form className="BoilerplateForm" onSubmit={handleSubmit}>
+      <Select
+        label="Category"
+        placeholder="Select a Category"
+        data-testid="boilerplate-dropdown"
+        value={boilerplateFields.categoryName}
+        data={categories.map((category) => category.name)}
+        onChange={(categoryName) => {
+          console.log({ categoryName });
+          setBoilerplateFields({
+            ...boilerplateFields,
+            categoryName,
+          });
+        }}
+        searchable
+        nothingFound="No category found"
+        clearable
+        creatable
+        getCreateLabel={(query) => `+ Create ${query}`}
+        onCreate={(query) => {
+          createCategory({ name: query });
+          setBoilerplateFields({
+            ...boilerplateFields,
+            categoryName: query,
+          });
+          return query;
+        }}
+      />
+      <TextBox
+        labelText="Title"
+        value={boilerplateFields.title}
+        onChange={(event) =>
+          setBoilerplateFields({
+            ...boilerplateFields,
+            title: event.target.value,
+          })
+        }
+        required
+      />
+      <div className="BoilerplateForm__ContentEditor">
+        <div className="BoilerplateForm__ContentEditorHeader">
+          <Label htmlFor="text-editor">Text</Label>
+          <b>WORD COUNT: {wordCount}</b>
         </div>
-        <div className="BoilerplateForm__Actions">
-          {onDelete && (
-            <Button color="red" onClick={() => onDelete(props.boilerplate)}>
-              Delete
-            </Button>
-          )}
-          <div className="BoilerplateForm__FormControls">
-            <Button variant="subtle" onClick={() => props.onCancel(false)}>
-              Cancel
-            </Button>
-            <Button type="submit">Save</Button>
-          </div>
+        <RichTextEditor
+          id="text-editor"
+          className="BoilerplateForm__ContentEditorInput"
+          ref={quillEl}
+          value={boilerplateFields.html}
+          onChange={(html) => {
+            setBoilerplateFields((previousBoilerplateFields) => ({
+              ...previousBoilerplateFields,
+              text: quillEl.current.getEditor().getText(),
+              html,
+            }));
+          }}
+        />
+      </div>
+      <div className="BoilerplateForm__Actions">
+        {onDelete && (
+          <Button color="red" onClick={() => onDelete(props.boilerplate)}>
+            Delete
+          </Button>
+        )}
+        <div className="BoilerplateForm__FormControls">
+          <Button variant="subtle" onClick={() => props.onCancel(false)}>
+            Cancel
+          </Button>
+          <Button type="submit">Save</Button>
         </div>
-      </form>
-      <CategoryNew
-        show={showingCategoriesNew}
-        onClose={handleCloseCategoryNew}
-      />
-    </>
+      </div>
+    </form>
   );
 }