Skip to content

Commit 0a75b79

Browse files
heisbrotheisbrot
committed
Add permissions
1 parent 3ffaccd commit 0a75b79

File tree

8 files changed

+175
-135
lines changed

8 files changed

+175
-135
lines changed

‎src/app/(dashboard)/group/page.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -90,13 +90,14 @@ export default function GroupPage() {
9090
const GroupDetailsName = () => {
9191
const { group, isJWTGroup, isAllowedToRename, openGroupRenameModal } =
9292
useGroupContext();
93+
const { permission } = usePermissions();
9394

9495
return (
9596
<div className={"w-full"}>
9697
<h1 className={"flex items-center gap-3 w-full whitespace-nowrap"}>
9798
<GroupBadgeIcon id={group?.id} issued={group?.issued} size={20} />
9899
{group.name}
99-
{group.name !== "All" && (
100+
{group.name !== "All" && permission?.groups?.update && (
100101
<div>
101102
<FullTooltip
102103
content={

‎src/components/ui/AddGroupButton.tsx‎

Lines changed: 66 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ import { ExternalLinkIcon, FolderGit2Icon, PlusCircle } from "lucide-react";
1414
import { useRouter } from "next/navigation";
1515
import { useState } from "react";
1616
import { useSWRConfig } from "swr";
17+
import { usePermissions } from "@/contexts/PermissionsProvider";
1718
import { Group } from "@/interfaces/Group";
1819
import { useApiCall } from "@/utils/api";
1920
import ModalHeader from "../modal/ModalHeader";
@@ -27,6 +28,7 @@ export const AddGroupButton = () => {
2728
const [name, setName] = useState<string>("");
2829
const [open, setOpen] = useState(false);
2930
const router = useRouter();
31+
const { permission } = usePermissions();
3032

3133
const createGroup = () => {
3234
notify({
@@ -43,63 +45,71 @@ export const AddGroupButton = () => {
4345
};
4446

4547
return (
46-
<Modal open={open} onOpenChange={setOpen}>
47-
<ModalTrigger asChild>
48-
<Button variant={"primary"} size={"sm"} className={"ml-auto h-[42px]"}>
49-
<PlusCircle size={16} />
50-
Create Group
51-
</Button>
52-
</ModalTrigger>
53-
<ModalContent maxWidthClass={"max-w-xl"}>
54-
<ModalHeader
55-
icon={<FolderGit2Icon size={18} />}
56-
title="Create Group"
57-
description="Create a group to manage and organize access in your network"
58-
color="netbird"
59-
/>
60-
<Separator />
61-
<div className={"px-8 flex-col flex gap-6 py-6"}>
62-
<div>
63-
<Label>Name</Label>
64-
<HelpText>Set an easily identifiable name for your group</HelpText>
65-
<Input
66-
tabIndex={0}
67-
placeholder={"e.g., Developers"}
68-
value={name}
69-
onChange={(e) => setName(e.target.value)}
70-
/>
48+
permission?.groups?.create && (
49+
<Modal open={open} onOpenChange={setOpen}>
50+
<ModalTrigger asChild>
51+
<Button
52+
variant={"primary"}
53+
size={"sm"}
54+
className={"ml-auto h-[42px]"}
55+
>
56+
<PlusCircle size={16} />
57+
Create Group
58+
</Button>
59+
</ModalTrigger>
60+
<ModalContent maxWidthClass={"max-w-xl"}>
61+
<ModalHeader
62+
icon={<FolderGit2Icon size={18} />}
63+
title="Create Group"
64+
description="Create a group to manage and organize access in your network"
65+
color="netbird"
66+
/>
67+
<Separator />
68+
<div className={"px-8 flex-col flex gap-6 py-6"}>
69+
<div>
70+
<Label>Name</Label>
71+
<HelpText>
72+
Set an easily identifiable name for your group
73+
</HelpText>
74+
<Input
75+
tabIndex={0}
76+
placeholder={"e.g., Developers"}
77+
value={name}
78+
onChange={(e) => setName(e.target.value)}
79+
/>
80+
</div>
7181
</div>
72-
</div>
73-
<ModalFooter className={"items-center"}>
74-
<div className={"w-full"}>
75-
<Paragraph className={"text-sm mt-auto"}>
76-
Learn more about
77-
<InlineLink
78-
href={"https://docs.netbird.io/how-to/manage-network-access"}
79-
target={"_blank"}
80-
>
81-
Groups
82-
<ExternalLinkIcon size={12} />
83-
</InlineLink>
84-
</Paragraph>
85-
</div>
86-
<div className={"flex gap-3 w-full justify-end"}>
87-
<ModalClose asChild={true}>
88-
<Button variant={"secondary"}>Cancel</Button>
89-
</ModalClose>
82+
<ModalFooter className={"items-center"}>
83+
<div className={"w-full"}>
84+
<Paragraph className={"text-sm mt-auto"}>
85+
Learn more about
86+
<InlineLink
87+
href={"https://docs.netbird.io/how-to/manage-network-access"}
88+
target={"_blank"}
89+
>
90+
Groups
91+
<ExternalLinkIcon size={12} />
92+
</InlineLink>
93+
</Paragraph>
94+
</div>
95+
<div className={"flex gap-3 w-full justify-end"}>
96+
<ModalClose asChild={true}>
97+
<Button variant={"secondary"}>Cancel</Button>
98+
</ModalClose>
9099

91-
<Button
92-
variant={"primary"}
93-
data-cy={"submit-route"}
94-
disabled={!name}
95-
onClick={createGroup}
96-
>
97-
<PlusCircle size={16} />
98-
Create Group
99-
</Button>
100-
</div>
101-
</ModalFooter>
102-
</ModalContent>
103-
</Modal>
100+
<Button
101+
variant={"primary"}
102+
data-cy={"submit-route"}
103+
disabled={!name}
104+
onClick={createGroup}
105+
>
106+
<PlusCircle size={16} />
107+
Create Group
108+
</Button>
109+
</div>
110+
</ModalFooter>
111+
</ModalContent>
112+
</Modal>
113+
)
104114
);
105115
};

‎src/modules/groups/details/GroupDetailsRemoveCell.tsx‎

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import { MinusCircle } from "lucide-react";
22
import * as React from "react";
33
import Button from "@/components/Button";
44
import { useGroupContext } from "@/contexts/GroupProvider";
5+
import { usePermissions } from "@/contexts/PermissionsProvider";
56
import { Peer } from "@/interfaces/Peer";
67
import { User } from "@/interfaces/User";
78

@@ -26,14 +27,21 @@ export function GroupDetailsRemoveCell({ onRemove }: Props) {
2627

2728
export const GroupPeersRemoveCell = ({ peer }: { peer: Peer }) => {
2829
const { removePeersFromGroup } = useGroupContext();
30+
const { permission } = usePermissions();
2931
return (
30-
<GroupDetailsRemoveCell onRemove={() => removePeersFromGroup([peer])} />
32+
permission?.peers?.update &&
33+
permission?.groups?.update && (
34+
<GroupDetailsRemoveCell onRemove={() => removePeersFromGroup([peer])} />
35+
)
3136
);
3237
};
3338

3439
export const GroupUsersRemoveCell = ({ user }: { user: User }) => {
3540
const { removeUsersFromGroup } = useGroupContext();
41+
const { permission } = usePermissions();
3642
return (
37-
<GroupDetailsRemoveCell onRemove={() => removeUsersFromGroup([user])} />
43+
permission?.users?.update && (
44+
<GroupDetailsRemoveCell onRemove={() => removeUsersFromGroup([user])} />
45+
)
3846
);
3947
};

‎src/modules/groups/details/GroupPeersSection.tsx‎

Lines changed: 25 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ import * as React from "react";
1111
import { lazy, useState } from "react";
1212
import PeerIcon from "@/assets/icons/PeerIcon";
1313
import { useGroupContext } from "@/contexts/GroupProvider";
14+
import { usePermissions } from "@/contexts/PermissionsProvider";
1415
import { Peer } from "@/interfaces/Peer";
1516
import { AssignPeerToGroupModal } from "@/modules/groups/AssignPeerToGroupModal";
1617
import { GroupPeersRemoveCell } from "@/modules/groups/details/GroupDetailsRemoveCell";
@@ -106,6 +107,7 @@ export const GroupPeersSection = ({ peers }: { peers?: Peer[] }) => {
106107
const { group, addPeersToGroup, removePeersFromGroup } = useGroupContext();
107108
const [selectedRows, setSelectedRows] = useState<RowSelectionState>({});
108109
const [open, setOpen] = useState(false);
110+
const { permission } = usePermissions();
109111

110112
return (
111113
<GroupDetailsTableContainer>
@@ -124,17 +126,19 @@ export const GroupPeersSection = ({ peers }: { peers?: Peer[] }) => {
124126
}
125127
icon={<PeerIcon size={20} className={"fill-nb-gray-300"} />}
126128
>
127-
<div className={"flex items-center justify-center mt-4 gap-4"}>
128-
<InstallNetBirdButton />
129-
<Button
130-
variant={"primary"}
131-
size={"sm"}
132-
onClick={() => setOpen(true)}
133-
>
134-
<PlusCircle size={16} />
135-
Assign Peers
136-
</Button>
137-
</div>
129+
{permission?.peers?.update && permission?.groups?.update && (
130+
<div className={"flex items-center justify-center mt-4 gap-4"}>
131+
<InstallNetBirdButton />
132+
<Button
133+
variant={"primary"}
134+
size={"sm"}
135+
onClick={() => setOpen(true)}
136+
>
137+
<PlusCircle size={16} />
138+
Assign Peers
139+
</Button>
140+
</div>
141+
)}
138142
</NoResults>
139143
}
140144
onRowClick={(row) => row.toggleSelected()}
@@ -189,14 +193,16 @@ export const GroupPeersSection = ({ peers }: { peers?: Peer[] }) => {
189193
<div className={"ml-auto flex items-center"}>
190194
<div className={"flex items-center justify-center gap-4"}>
191195
<InstallNetBirdButton />
192-
<Button
193-
variant={"primary"}
194-
size={"sm"}
195-
onClick={() => setOpen(true)}
196-
>
197-
<PlusCircle size={16} />
198-
Assign Peers
199-
</Button>
196+
{permission?.peers?.update && permission?.groups?.update && (
197+
<Button
198+
variant={"primary"}
199+
size={"sm"}
200+
onClick={() => setOpen(true)}
201+
>
202+
<PlusCircle size={16} />
203+
Assign Peers
204+
</Button>
205+
)}
200206
</div>
201207
</div>
202208
)}

‎src/modules/groups/details/GroupUsersSection.tsx‎

Lines changed: 16 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ import { MinusCircle, PlusCircle } from "lucide-react";
1010
import React, { lazy, useState } from "react";
1111
import TeamIcon from "@/assets/icons/TeamIcon";
1212
import { useGroupContext } from "@/contexts/GroupProvider";
13+
import { usePermissions } from "@/contexts/PermissionsProvider";
1314
import { User } from "@/interfaces/User";
1415
import LastTimeRow from "@/modules/common-table-rows/LastTimeRow";
1516
import { AssignUserToGroupModal } from "@/modules/groups/AssignUserToGroupModal";
@@ -116,6 +117,7 @@ export const GroupUsersSection = ({ users }: { users?: User[] }) => {
116117
const { group, addUsersToGroup, removeUsersFromGroup } = useGroupContext();
117118
const [selectedRows, setSelectedRows] = useState<RowSelectionState>({});
118119
const [open, setOpen] = useState(false);
120+
const { permission } = usePermissions();
119121

120122
return (
121123
<GroupDetailsTableContainer>
@@ -137,17 +139,19 @@ export const GroupUsersSection = ({ users }: { users?: User[] }) => {
137139
}
138140
icon={<TeamIcon size={20} className={"fill-nb-gray-300"} />}
139141
>
140-
<div className={"flex gap-4 items-center justify-center mt-4"}>
141-
<Button
142-
variant={"secondary"}
143-
size={"sm"}
144-
onClick={() => setOpen(true)}
145-
>
146-
<PlusCircle size={16} />
147-
Assign Users
148-
</Button>
149-
<InviteUserButton show={true} groups={[group]} />
150-
</div>
142+
{permission?.users?.update && (
143+
<div className={"flex gap-4 items-center justify-center mt-4"}>
144+
<Button
145+
variant={"secondary"}
146+
size={"sm"}
147+
onClick={() => setOpen(true)}
148+
>
149+
<PlusCircle size={16} />
150+
Assign Users
151+
</Button>
152+
<InviteUserButton show={true} groups={[group]} />
153+
</div>
154+
)}
151155
</NoResults>
152156
}
153157
rightSide={(table) => {
@@ -196,7 +200,7 @@ export const GroupUsersSection = ({ users }: { users?: User[] }) => {
196200
addUsersToGroup(newUsers).then();
197201
}}
198202
/>
199-
{users && users?.length > 0 && (
203+
{users && users?.length > 0 && permission?.users?.update && (
200204
<div
201205
className={"flex gap-4 items-center justify-center ml-auto"}
202206
>

0 commit comments

Comments
 (0)