libre.sh/keycloak-scim
3
0
Fork 0
Code Issues 15 Pull requests Releases 1 Packages Activity Actions

Avoid errors in Groups section. (#2414)

Browse source
This commit is contained in:
Stan Silvert 2022-04-11 05:22:43 -04:00 committed by GitHub
parent 1d3efdc1b2
commit fcc514a12f
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 96 additions and 74 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

140
src/groups/GroupTable.tsx
View file

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

30
src/groups/SearchGroups.tsx
View file

@ -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[],