add create group functionality

This commit is contained in:
Christie Molloy 2020-10-01 14:52:18 -04:00
parent 66e28638db
commit 28b16e9770
4 changed files with 44 additions and 33 deletions

View file

@ -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}
/>

View file

@ -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);
}
}
},
];

View file

@ -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

View file

@ -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"
}
}