add create group functionality

src/groups/GroupsCreateModal.tsx

@@ -1,4 +1,4 @@
-import React, {useState, useContext} from "react";
+import React, {useContext} from "react";
 import {
   AlertVariant,
   Button,
@@ -12,14 +12,24 @@ import { useTranslation } from "react-i18next";
 import { HttpClientContext } from "../http-service/HttpClientContext";
 import { RealmContext } from "../components/realm-context/RealmContext";
 import { useAlerts } from "../components/alert/Alerts";
+import { useForm } from "react-hook-form";
 
-export const GroupsCreateModal = ({isCreateModalOpen, handleModalToggle, setIsCreateModalOpen, createGroupName, setCreateGroupName}) => {
+type GroupsCreateModalProps = {
+  handleModalToggle: () => void;
+  isCreateModalOpen: boolean;
+  setIsCreateModalOpen: (isCreateModalOpen: boolean) => void;
+  createGroupName: string;
+  setCreateGroupName: (createGroupName: string) => void;
+};
+
+export const GroupsCreateModal = ({handleModalToggle, isCreateModalOpen, setIsCreateModalOpen, createGroupName, setCreateGroupName}: GroupsCreateModalProps) => {
   
   const { t } = useTranslation("groups");
   const httpClient = useContext(HttpClientContext)!;
   const { realm } = useContext(RealmContext);
-  const [ nameValue, setNameValue ] = useState("");
   const [add, Alerts] = useAlerts();
+  const form = useForm();
+  const { register, errors } = form;
 
   const valueChange = (createGroupName: string) => {
     setCreateGroupName(createGroupName)
@@ -30,10 +40,9 @@ export const GroupsCreateModal = ({isCreateModalOpen, handleModalToggle, setIsCr
       await httpClient.doPost(`/admin/realms/${realm}/groups`, {name: createGroupName});
       setIsCreateModalOpen(false);
       setCreateGroupName("");
-      add("Client created", AlertVariant.success);
-      // window.location.reload(false);
+      add(t("groupCreated"), AlertVariant.success);
     } catch (error) {
-      add(`Could not create client: '${error}'`, AlertVariant.danger);
+      add(`${t("couldNotCreateGroup")} ': '${error}'`, AlertVariant.danger);
     }
   }
 
@@ -42,21 +51,28 @@ export const GroupsCreateModal = ({isCreateModalOpen, handleModalToggle, setIsCr
       <Alerts />
       <Modal
         variant={ModalVariant.small}
-        title="Create a group"
+        title={t("createAGroup")}
         isOpen={isCreateModalOpen}
         onClose={handleModalToggle}
         actions={[
           <Button key="confirm" variant="primary" onClick={() => submitForm()}>
-            Create
+            {t("create")}
           </Button>
         ]}
       >
         <Form isHorizontal>
-          <FormGroup label={t("name")} fieldId="kc-root-url">
+          <FormGroup
+            label={t("name")}
+            fieldId="group-id"
+            helperTextInvalid={t("common:required")}
+            validated={errors.name ? "error" : "default"}
+            isRequired
+          >
             <TextInput
+              ref={register({ required: true })}
               type="text"
               id="create-group-name"
-              name="Name"
+              name="name"
               value={createGroupName}
               onChange={valueChange}
             />

src/groups/GroupsList.tsx

@@ -7,7 +7,6 @@ import {
 } from "@patternfly/react-table";
 import { 
   Button,
-  Alert,
   AlertVariant
 } from "@patternfly/react-core";
 import { useTranslation } from "react-i18next";
@@ -32,6 +31,7 @@ export const GroupsList = ({ list }: GroupsListProps) => {
     { cells: [<Button key="0">Test</Button>], selected: false },
   ]);
 
+
   const formatData = (data: GroupRepresentation[]) =>
     data.map((group: { [key: string]: any }, index) => {
       const groupName = group[columnGroupName];
@@ -72,16 +72,6 @@ export const GroupsList = ({ list }: GroupsListProps) => {
     }
   }
 
-  // Delete individual rows using the action in the table
-  function onDelete(rowIndex: number) {
-    console.log('does it make it here' + rowIndex);
-    const localFilteredData = [...list!];
-    httpClient.doDelete(
-      `/admin/realms/${realm}/groups/${localFilteredData[rowIndex].id}`
-    );
-    // TO DO update the state
-  }
-
   const tableHeader = [{ title: t("groupName") }, { title: t("members") }];
   const actions = [
     {
@@ -90,15 +80,15 @@ export const GroupsList = ({ list }: GroupsListProps) => {
     },
     {
       title: t("common:Delete"),
-      onClick: (_, rowId) => {
-        try {
-          httpClient.doDelete(
+      onClick: (_: React.MouseEvent<Element, MouseEvent>, rowId: number) => {
+        try { httpClient.doDelete(
             `/admin/realms/${realm}/groups/${list![rowId].id}`
           );
           add(t("Group deleted"), AlertVariant.success);
         } catch (error) {
           add(`${t("clientDeleteError")} ${error}`, AlertVariant.danger);
         }
+ 
       }
     },
   ];

src/groups/GroupsSection.tsx

@@ -3,7 +3,6 @@ import { useTranslation } from "react-i18next";
 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 {
   ServerGroupsArrayRepresentation,
@@ -13,18 +12,16 @@ import { TableToolbar } from "../components/table-toolbar/TableToolbar";
 import { ViewHeader } from "../components/view-header/ViewHeader";
 import {
   Button,
-  Divider,
   Dropdown,
   DropdownItem,
   KebabToggle,
   PageSection,
   PageSectionVariants,
-  Title,
-  TitleSizes,
   ToolbarItem,
 } from "@patternfly/react-core";
 import "./GroupsSection.css";
 
+
 export const GroupsSection = () => {
   const { t } = useTranslation("groups");
   const httpClient = useContext(HttpClientContext)!;
@@ -40,9 +37,7 @@ export const GroupsSection = () => {
 
   const [isCreateModalOpen, setIsCreateModalOpen] = useState(false);
 
-  const handleModalToggle = () => {
-    setIsCreateModalOpen(!isCreateModalOpen)
-  };
+
 
   const loader = async () => {
     const groups = await httpClient.doGet<ServerGroupsArrayRepresentation[]>(
@@ -101,6 +96,10 @@ export const GroupsSection = () => {
     setIsKebabOpen(!isKebabOpen);
   };
 
+  const handleModalToggle = () => {
+    setIsCreateModalOpen(!isCreateModalOpen)
+  };
+
   return (
     <React.Fragment>
       <ViewHeader
@@ -145,7 +144,9 @@ export const GroupsSection = () => {
           }
         >
           {rawData && filteredData && (
-            <GroupsList list={filteredData ? filteredData : rawData} />
+            <GroupsList
+              list={filteredData ? filteredData : rawData}
+            />
           )}
         </TableToolbar>
         <GroupsCreateModal

src/groups/messages.json

@@ -11,6 +11,10 @@
     "delete": "Delete",
     "tableOfGroups": "Table of groups",
     "name": "Name",
-    "groupsDescription": "Description goes here"
+    "groupsDescription": "Description goes here",
+    "groupCreated": "Group created",
+    "couldNotCreateGroup": "Could not create group",
+    "createAGroup": "Create a group",
+    "create": "Create"
   }
 }