Avoid errors in Groups section. (#2414)
This commit is contained in:
parent
1d3efdc1b2
commit
fcc514a12f
2 changed files with 96 additions and 74 deletions
|
@ -24,6 +24,7 @@ import { GroupPickerDialog } from "../components/group/GroupPickerDialog";
|
|||
import { useSubGroups } from "./SubGroupsContext";
|
||||
import { useConfirmDialog } from "../components/confirm-dialog/ConfirmDialog";
|
||||
import { toGroups } from "./routes/Groups";
|
||||
import { useAccess } from "../context/access/Access";
|
||||
|
||||
export const GroupTable = () => {
|
||||
const { t } = useTranslation("groups");
|
||||
|
@ -45,6 +46,9 @@ export const GroupTable = () => {
|
|||
const location = useLocation();
|
||||
const id = getLastId(location.pathname);
|
||||
|
||||
const { hasAccess } = useAccess();
|
||||
const isManager = hasAccess("manage-users", "query-clients");
|
||||
|
||||
const loader = async () => {
|
||||
let groupsData = undefined;
|
||||
if (id) {
|
||||
|
@ -85,17 +89,21 @@ export const GroupTable = () => {
|
|||
refresh();
|
||||
};
|
||||
|
||||
const GroupNameCell = (group: GroupRepresentation) => (
|
||||
<Link
|
||||
key={group.id}
|
||||
to={`${location.pathname}/${group.id}`}
|
||||
onClick={() => {
|
||||
setSubGroups([...subGroups, group]);
|
||||
}}
|
||||
>
|
||||
{group.name}
|
||||
</Link>
|
||||
);
|
||||
const GroupNameCell = (group: GroupRepresentation) => {
|
||||
if (!isManager) return <span>{group.name}</span>;
|
||||
|
||||
return (
|
||||
<Link
|
||||
key={group.id}
|
||||
to={`${location.pathname}/${group.id}`}
|
||||
onClick={() => {
|
||||
setSubGroups([...subGroups, group]);
|
||||
}}
|
||||
>
|
||||
{group.name}
|
||||
</Link>
|
||||
);
|
||||
};
|
||||
|
||||
const handleModalToggle = () => {
|
||||
setIsCreateModalOpen(!isCreateModalOpen);
|
||||
|
@ -120,59 +128,65 @@ export const GroupTable = () => {
|
|||
ariaLabelKey="groups:groups"
|
||||
searchPlaceholderKey="groups:searchForGroups"
|
||||
toolbarItem={
|
||||
<>
|
||||
<ToolbarItem>
|
||||
<Button
|
||||
data-testid="openCreateGroupModal"
|
||||
variant="primary"
|
||||
onClick={handleModalToggle}
|
||||
>
|
||||
{t("createGroup")}
|
||||
</Button>
|
||||
</ToolbarItem>
|
||||
<ToolbarItem>
|
||||
<Dropdown
|
||||
toggle={
|
||||
<KebabToggle
|
||||
onToggle={() => setIsKebabOpen(!isKebabOpen)}
|
||||
isDisabled={selectedRows!.length === 0}
|
||||
/>
|
||||
}
|
||||
isOpen={isKebabOpen}
|
||||
isPlain
|
||||
dropdownItems={[
|
||||
<DropdownItem
|
||||
key="action"
|
||||
component="button"
|
||||
onClick={() => {
|
||||
toggleDeleteDialog();
|
||||
setIsKebabOpen(false);
|
||||
}}
|
||||
>
|
||||
{t("common:delete")}
|
||||
</DropdownItem>,
|
||||
]}
|
||||
/>
|
||||
</ToolbarItem>
|
||||
</>
|
||||
isManager && (
|
||||
<>
|
||||
<ToolbarItem>
|
||||
<Button
|
||||
data-testid="openCreateGroupModal"
|
||||
variant="primary"
|
||||
onClick={handleModalToggle}
|
||||
>
|
||||
{t("createGroup")}
|
||||
</Button>
|
||||
</ToolbarItem>
|
||||
<ToolbarItem>
|
||||
<Dropdown
|
||||
toggle={
|
||||
<KebabToggle
|
||||
onToggle={() => setIsKebabOpen(!isKebabOpen)}
|
||||
isDisabled={selectedRows!.length === 0}
|
||||
/>
|
||||
}
|
||||
isOpen={isKebabOpen}
|
||||
isPlain
|
||||
dropdownItems={[
|
||||
<DropdownItem
|
||||
key="action"
|
||||
component="button"
|
||||
onClick={() => {
|
||||
toggleDeleteDialog();
|
||||
setIsKebabOpen(false);
|
||||
}}
|
||||
>
|
||||
{t("common:delete")}
|
||||
</DropdownItem>,
|
||||
]}
|
||||
/>
|
||||
</ToolbarItem>
|
||||
</>
|
||||
)
|
||||
}
|
||||
actions={
|
||||
!isManager
|
||||
? []
|
||||
: [
|
||||
{
|
||||
title: t("moveTo"),
|
||||
onRowClick: async (group) => {
|
||||
setMove(group);
|
||||
return false;
|
||||
},
|
||||
},
|
||||
{
|
||||
title: t("common:delete"),
|
||||
onRowClick: async (group: GroupRepresentation) => {
|
||||
setSelectedRows([group]);
|
||||
toggleDeleteDialog();
|
||||
return true;
|
||||
},
|
||||
},
|
||||
]
|
||||
}
|
||||
actions={[
|
||||
{
|
||||
title: t("moveTo"),
|
||||
onRowClick: async (group) => {
|
||||
setMove(group);
|
||||
return false;
|
||||
},
|
||||
},
|
||||
{
|
||||
title: t("common:delete"),
|
||||
onRowClick: async (group: GroupRepresentation) => {
|
||||
setSelectedRows([group]);
|
||||
toggleDeleteDialog();
|
||||
return true;
|
||||
},
|
||||
},
|
||||
]}
|
||||
columns={[
|
||||
{
|
||||
name: "name",
|
||||
|
|
|
@ -24,6 +24,7 @@ import { ListEmptyState } from "../components/list-empty-state/ListEmptyState";
|
|||
import { GroupPath } from "../components/group/GroupPath";
|
||||
import { useSubGroups } from "./SubGroupsContext";
|
||||
import { ViewHeader } from "../components/view-header/ViewHeader";
|
||||
import { useAccess } from "../context/access/Access";
|
||||
|
||||
type SearchGroup = GroupRepresentation & {
|
||||
link?: string;
|
||||
|
@ -40,6 +41,9 @@ export default function SearchGroups() {
|
|||
const [key, setKey] = useState(0);
|
||||
const refresh = () => setKey(new Date().getTime());
|
||||
|
||||
const { hasAccess } = useAccess();
|
||||
const isManager = hasAccess("manage-users", "query-clients");
|
||||
|
||||
const { setSubGroups } = useSubGroups();
|
||||
useEffect(
|
||||
() => setSubGroups([{ name: t("searchGroups"), id: "search" }]),
|
||||
|
@ -61,17 +65,21 @@ export default function SearchGroups() {
|
|||
}
|
||||
};
|
||||
|
||||
const GroupNameCell = (group: SearchGroup) => (
|
||||
<Link
|
||||
key={group.id}
|
||||
to={`/${realm}/groups/search/${group.link}`}
|
||||
onClick={() =>
|
||||
setSubGroups([{ name: t("searchGroups"), id: "search" }, group])
|
||||
}
|
||||
>
|
||||
{group.name}
|
||||
</Link>
|
||||
);
|
||||
const GroupNameCell = (group: SearchGroup) => {
|
||||
if (!isManager) return <span>{group.name}</span>;
|
||||
|
||||
return (
|
||||
<Link
|
||||
key={group.id}
|
||||
to={`/${realm}/groups/search/${group.link}`}
|
||||
onClick={() =>
|
||||
setSubGroups([{ name: t("searchGroups"), id: "search" }, group])
|
||||
}
|
||||
>
|
||||
{group.name}
|
||||
</Link>
|
||||
);
|
||||
};
|
||||
|
||||
const flatten = (
|
||||
groups: GroupRepresentation[],
|
||||
|
|
Loading…
Reference in a new issue