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 { useSubGroups } from "./SubGroupsContext";
import { useConfirmDialog } from "../components/confirm-dialog/ConfirmDialog"; import { useConfirmDialog } from "../components/confirm-dialog/ConfirmDialog";
import { toGroups } from "./routes/Groups"; import { toGroups } from "./routes/Groups";
import { useAccess } from "../context/access/Access";
export const GroupTable = () => { export const GroupTable = () => {
const { t } = useTranslation("groups"); const { t } = useTranslation("groups");
@ -45,6 +46,9 @@ export const GroupTable = () => {
const location = useLocation(); const location = useLocation();
const id = getLastId(location.pathname); const id = getLastId(location.pathname);
const { hasAccess } = useAccess();
const isManager = hasAccess("manage-users", "query-clients");
const loader = async () => { const loader = async () => {
let groupsData = undefined; let groupsData = undefined;
if (id) { if (id) {
@ -85,17 +89,21 @@ export const GroupTable = () => {
refresh(); refresh();
}; };
const GroupNameCell = (group: GroupRepresentation) => ( const GroupNameCell = (group: GroupRepresentation) => {
<Link if (!isManager) return <span>{group.name}</span>;
key={group.id}
to={`${location.pathname}/${group.id}`} return (
onClick={() => { <Link
setSubGroups([...subGroups, group]); key={group.id}
}} to={`${location.pathname}/${group.id}`}
> onClick={() => {
{group.name} setSubGroups([...subGroups, group]);
</Link> }}
); >
{group.name}
</Link>
);
};
const handleModalToggle = () => { const handleModalToggle = () => {
setIsCreateModalOpen(!isCreateModalOpen); setIsCreateModalOpen(!isCreateModalOpen);
@ -120,59 +128,65 @@ export const GroupTable = () => {
ariaLabelKey="groups:groups" ariaLabelKey="groups:groups"
searchPlaceholderKey="groups:searchForGroups" searchPlaceholderKey="groups:searchForGroups"
toolbarItem={ toolbarItem={
<> isManager && (
<ToolbarItem> <>
<Button <ToolbarItem>
data-testid="openCreateGroupModal" <Button
variant="primary" data-testid="openCreateGroupModal"
onClick={handleModalToggle} variant="primary"
> onClick={handleModalToggle}
{t("createGroup")} >
</Button> {t("createGroup")}
</ToolbarItem> </Button>
<ToolbarItem> </ToolbarItem>
<Dropdown <ToolbarItem>
toggle={ <Dropdown
<KebabToggle toggle={
onToggle={() => setIsKebabOpen(!isKebabOpen)} <KebabToggle
isDisabled={selectedRows!.length === 0} onToggle={() => setIsKebabOpen(!isKebabOpen)}
/> isDisabled={selectedRows!.length === 0}
} />
isOpen={isKebabOpen} }
isPlain isOpen={isKebabOpen}
dropdownItems={[ isPlain
<DropdownItem dropdownItems={[
key="action" <DropdownItem
component="button" key="action"
onClick={() => { component="button"
toggleDeleteDialog(); onClick={() => {
setIsKebabOpen(false); toggleDeleteDialog();
}} setIsKebabOpen(false);
> }}
{t("common:delete")} >
</DropdownItem>, {t("common:delete")}
]} </DropdownItem>,
/> ]}
</ToolbarItem> />
</> </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={[ columns={[
{ {
name: "name", 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 { GroupPath } from "../components/group/GroupPath";
import { useSubGroups } from "./SubGroupsContext"; import { useSubGroups } from "./SubGroupsContext";
import { ViewHeader } from "../components/view-header/ViewHeader"; import { ViewHeader } from "../components/view-header/ViewHeader";
import { useAccess } from "../context/access/Access";
type SearchGroup = GroupRepresentation & { type SearchGroup = GroupRepresentation & {
link?: string; link?: string;
@ -40,6 +41,9 @@ export default function SearchGroups() {
const [key, setKey] = useState(0); const [key, setKey] = useState(0);
const refresh = () => setKey(new Date().getTime()); const refresh = () => setKey(new Date().getTime());
const { hasAccess } = useAccess();
const isManager = hasAccess("manage-users", "query-clients");
const { setSubGroups } = useSubGroups(); const { setSubGroups } = useSubGroups();
useEffect( useEffect(
() => setSubGroups([{ name: t("searchGroups"), id: "search" }]), () => setSubGroups([{ name: t("searchGroups"), id: "search" }]),
@ -61,17 +65,21 @@ export default function SearchGroups() {
} }
}; };
const GroupNameCell = (group: SearchGroup) => ( const GroupNameCell = (group: SearchGroup) => {
<Link if (!isManager) return <span>{group.name}</span>;
key={group.id}
to={`/${realm}/groups/search/${group.link}`} return (
onClick={() => <Link
setSubGroups([{ name: t("searchGroups"), id: "search" }, group]) key={group.id}
} to={`/${realm}/groups/search/${group.link}`}
> onClick={() =>
{group.name} setSubGroups([{ name: t("searchGroups"), id: "search" }, group])
</Link> }
); >
{group.name}
</Link>
);
};
const flatten = ( const flatten = (
groups: GroupRepresentation[], groups: GroupRepresentation[],