more progress on group modal

src/groups/GroupsCreate.tsx

@@ -1,31 +0,0 @@
-import React from "react";
-import {
-  Button,
-  Modal,
-  ModalVariant,
-} from "@patternfly/react-core";
-import { useTranslation } from "react-i18next";
-
-export const GroupsCreate = () => {
-  const { t } = useTranslation("group");
-
-  return (
-    <Modal
-    variant={ModalVariant.medium}
-    title="Medium modal header"
-    isOpen={isModalOpen}
-    onClose={this.handleModalToggle}
-    actions={
-      <Button key="confirm" variant="primary" onClick={this.handleModalToggle}>
-        Confirm
-      </Button>
-    }
-  >
-    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
-    magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
-    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
-    pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id
-    est laborum.
-  </Modal>
-  );
-};

src/groups/GroupsCreateModal.tsx

@@ -0,0 +1,61 @@
+import React, {useState, useContext} from "react";
+import {
+  AlertVariant,
+  Button,
+  Form,
+  FormGroup,
+  Modal,
+  ModalVariant,
+  TextInput
+} from "@patternfly/react-core";
+import { useTranslation } from "react-i18next";
+import { HttpClientContext } from "../http-service/HttpClientContext";
+import { RealmContext } from "../components/realm-context/RealmContext";
+
+export const GroupsCreateModal = ({isCreateModalOpen, handleModalToggle}) => {
+  
+  const { t } = useTranslation("group");
+  const httpClient = useContext(HttpClientContext)!;
+  const { realm } = useContext(RealmContext);
+  const [ nameValue, setNameValue ] = useState("");
+  const [add, Alerts] = useAlerts();
+
+  const valueChange = (nameValue: string) => {
+    setNameValue(nameValue)
+  }
+
+  const submitForm = async () => {
+    try {
+      await httpClient.doPost(`/admin/realms/${realm}/groups`, nameValue);
+      add("Client created", AlertVariant.success);
+    } catch (error) {
+      add(`Could not create client: '${error}'`, AlertVariant.danger);
+    }
+  }
+
+  return (
+    <Modal
+      variant={ModalVariant.small}
+      title="Create a group"
+      isOpen={isCreateModalOpen}
+      onClose={handleModalToggle}
+      actions={[
+        <Button key="confirm" variant="primary" onClick={() => submitForm()}>
+          Create
+        </Button>
+      ]}
+    >
+      <Form isHorizontal>
+        <FormGroup label={t("rootUrl")} fieldId="kc-root-url">
+          <TextInput
+            type="text"
+            id="create-group-name"
+            name="Name"
+            value={nameValue}
+            onChange={valueChange}
+          />
+        </FormGroup>
+      </Form>
+    </Modal>
+  );
+};

src/groups/GroupsSection.tsx

@@ -5,6 +5,7 @@ import { Button, PageSection } from "@patternfly/react-core";
 
 import { HttpClientContext } from "../http-service/HttpClientContext";
 import { GroupsList } from "./GroupsList";
+import { GroupsCreateModal } from "./GroupsCreateModal";
 import { DataLoader } from "../components/data-loader/DataLoader";
 import { GroupRepresentation } from "./models/groups";
 import { TableToolbar } from "../components/table-toolbar/TableToolbar";
@@ -16,6 +17,12 @@ export const GroupsSection = () => {
   const [max, setMax] = useState(10);
   const [first, setFirst] = useState(0);
 
+  const [isCreateModalOpen, setIsCreateModalOpen] = useState(false);
+
+  const handleModalToggle = () => {
+    setIsCreateModalOpen(!isCreateModalOpen)
+  };
+
   const loader = async () => {
     return await httpClient
       .doGet("/admin/realms/master/groups", { params: { first, max } })
@@ -39,7 +46,7 @@ export const GroupsSection = () => {
               }}
               toolbarItem={
                 <>
-                  <Button onClick={() => history.push("/add-group")}>
+                  <Button onClick={() => handleModalToggle()}>
                     {t("Create group")}
                   </Button>
                 </>
@@ -47,8 +54,10 @@ export const GroupsSection = () => {
             >
               <GroupsList list={groups} />
             </TableToolbar>
+            
           )}
         </DataLoader>
+        <GroupsCreateModal isCreateModalOpen={isCreateModalOpen} handleModalToggle={handleModalToggle}/>
       </PageSection>
     </>
   );