Skip to content
This repository has been archived by the owner on Jun 9, 2023. It is now read-only.

Commit

Permalink
feat: hide interaction action elements in dashboard (#2121)
Browse files Browse the repository at this point in the history 

Co-authored-by: gikf <60067306+gikf@users.noreply.github.com>
Co-authored-by: Oliver Eyton-Williams <ojeytonwilliams@gmail.com>
  • Loading branch information
@gikf @ojeytonwilliams
3 people committed Jun 8, 2023
1 parent b51905a commit c61cb81
Show file tree
Hide file tree
Showing 5 changed files with 187 additions and 108 deletions.
71 changes: 47 additions & 24 deletions client/src/modules/dashboard/Events/pages/EventsPage.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,11 @@ import { isOnline, isPhysical } from '../../../../util/venueType';
import { useUser } from '../../../auth/user';
import { useDashboardEventsQuery } from '../../../../generated/graphql';
import { NextPageWithLayout } from '../../../../pages/_app';
import {
type ChapterPermission,
Permission,
} from '../../../../../../common/permissions';
import { checkChapterPermission } from '../../../../util/check-permission';

interface FilterEventsProps {
setFilterEvent: React.Dispatch<React.SetStateAction<boolean>>;
Expand Down Expand Up @@ -61,6 +66,18 @@ export const EventsPage: NextPageWithLayout = () => {

const isLoading = loading || !data;
if (isLoading || error) return <DashboardLoading error={error} />;
const checkHasEventPermision = (permission: ChapterPermission) => {
return data.dashboardEvents.some(({ id }) =>
checkChapterPermission(user, permission, {
chapterId: id,
}),
);
};

const hasPermissionToCreateEvent = checkHasEventPermision(
Permission.EventCreate,
);
const hasPermissiontoEditEvent = checkHasEventPermision(Permission.EventEdit);

const filterEnded = (event: { ends_at: string }) =>
!isPast(new Date(event.ends_at));
Expand Down Expand Up @@ -109,7 +126,7 @@ export const EventsPage: NextPageWithLayout = () => {
id={'hide-canceled-events'}
/>
</Flex>
{!!user?.admined_chapters.length && (
{hasPermissionToCreateEvent && (
<LinkButton
data-cy="new-event"
href="/dashboard/events/new"
Expand Down Expand Up @@ -206,16 +223,20 @@ export const EventsPage: NextPageWithLayout = () => {
),
date: (event) => formatDate(event.start_at),
action: (event) => (
<LinkButton
colorScheme="blue"
size="sm"
href={`/dashboard/events/${event.id}/edit`}
>
Edit
<Text srOnly as="span">
{event.name}
</Text>
</LinkButton>
<>
{hasPermissiontoEditEvent && (
<LinkButton
colorScheme="blue"
size="sm"
href={`/dashboard/events/${event.id}/edit`}
>
Edit
<Text srOnly as="span">
{event.name}
</Text>
</LinkButton>
)}
</>
),
}}
/>
Expand Down Expand Up @@ -264,7 +285,7 @@ export const EventsPage: NextPageWithLayout = () => {
<Text>Capacity</Text>
<Text>Streaming url</Text>
<Text>Date</Text>
<Text>Actions</Text>
{hasPermissiontoEditEvent && <Text>Actions</Text>}
</VStack>
),
action: () => (
Expand Down Expand Up @@ -326,18 +347,20 @@ export const EventsPage: NextPageWithLayout = () => {
: 'In-person only'}
</Text>
<Text>{formatDate(start_at)}</Text>
<LinkButton
colorScheme="blue"
fontSize={'sm'}
height={'2em'}
size="sm"
href={`/dashboard/events/${id}/edit`}
>
Edit
<Text srOnly as="span">
{name}
</Text>
</LinkButton>
{hasPermissiontoEditEvent && (
<LinkButton
colorScheme="blue"
fontSize={'sm'}
height={'2em'}
size="sm"
href={`/dashboard/events/${id}/edit`}
>
Edit
<Text srOnly as="span">
{name}
</Text>
</LinkButton>
)}
</VStack>
),
}}
Expand Down
111 changes: 65 additions & 46 deletions client/src/modules/dashboard/Users/pages/UsersPage.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,9 +25,13 @@ import {
RoleChangeModalData,
} from '../../shared/components/RoleChangeModal';
import { NextPageWithLayout } from '../../../../pages/_app';
import { Permission } from '../../../../../../common/permissions';
import { checkInstancePermission } from '../../../../util/check-permission';
import { useUser } from '../../../auth/user';

export const UsersPage: NextPageWithLayout = () => {
const { loading, error, data } = useUsersQuery();
const { user } = useUser();

const { data: instanceRoles } = useInstanceRolesQuery();
const modalProps = useDisclosure();
Expand All @@ -51,22 +55,31 @@ export const UsersPage: NextPageWithLayout = () => {
modalProps.onClose();
};

const hasPermissionToChangeRole = checkInstancePermission(
user,
Permission.ChapterUserRoleChange,
);

const isLoading = loading || !data;
if (isLoading || error) return <DashboardLoading error={error} />;

return (
<>
{instanceRoles && instanceUser && (
<RoleChangeModal
modalProps={modalProps}
data={instanceUser}
roles={instanceRoles.instanceRoles.map(({ id, name }) => ({
id,
name,
}))}
title="Change instance role"
onSubmit={onModalSubmit}
/>
{hasPermissionToChangeRole && (
<>
{instanceRoles && instanceUser && (
<RoleChangeModal
modalProps={modalProps}
data={instanceUser}
roles={instanceRoles.instanceRoles.map(({ id, name }) => ({
id,
name,
}))}
title="Change instance role"
onSubmit={onModalSubmit}
/>
)}
</>
)}
<VStack>
<Flex w="full" justify="space-between">
Expand All @@ -81,23 +94,27 @@ export const UsersPage: NextPageWithLayout = () => {
mapper={{
name: (user) => <UserName user={user} />,
action: ({ id, instance_role, name }) => (
<Button
data-cy="changeRole"
colorScheme="blue"
size="xs"
onClick={() =>
changeRole({
roleName: instance_role.name,
userId: id,
userName: name,
})
}
>
Change role
<Text srOnly as="span">
for {name}
</Text>
</Button>
<>
{hasPermissionToChangeRole && (
<Button
data-cy="changeRole"
colorScheme="blue"
size="xs"
onClick={() =>
changeRole({
roleName: instance_role.name,
userId: id,
userName: name,
})
}
>
Change role
<Text srOnly as="span">
for {name}
</Text>
</Button>
)}
</>
),
role: ({ instance_role: { name } }) => (
<Text data-cy="role">{name}</Text>
Expand All @@ -124,30 +141,32 @@ export const UsersPage: NextPageWithLayout = () => {
>
<Text>Name</Text>
<Text>Role</Text>
<Text>Action</Text>
{hasPermissionToChangeRole && <Text>Action</Text>}
</VStack>
),
action: () => (
<VStack align={'flex-start'} fontSize={['sm', 'md']}>
<UserName user={{ id, name }} />
<Text data-cy="role">{instance_role.name}</Text>
<Button
data-cy="changeRole"
colorScheme="blue"
size="xs"
onClick={() =>
changeRole({
roleName: instance_role.name,
userId: id,
userName: name,
})
}
>
Change role
<Text srOnly as="span">
for {name}
</Text>
</Button>
{hasPermissionToChangeRole && (
<Button
data-cy="changeRole"
colorScheme="blue"
size="xs"
onClick={() =>
changeRole({
roleName: instance_role.name,
userId: id,
userName: name,
})
}
>
Change role
<Text srOnly as="span">
for {name}
</Text>
</Button>
)}
</VStack>
),
}}
Expand Down
78 changes: 53 additions & 25 deletions client/src/modules/dashboard/Venues/pages/VenuesPage.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,21 +9,41 @@ import { DashboardLayout } from '../../shared/components/DashboardLayout';
import getLocationString from '../../../../util/getLocationString';
import { useUser } from '../../../auth/user';
import { NextPageWithLayout } from '../../../../pages/_app';
import {
type ChapterPermission,
Permission,
} from '../../../../../../common/permissions';
import { checkChapterPermission } from '../../../../util/check-permission';

export const VenuesPage: NextPageWithLayout = () => {
const { loading, error, data } = useDashboardVenuesQuery();

const { user } = useUser();
const adminedChapters = user?.admined_chapters ?? [];

const isLoading = loading || !data;
if (isLoading || error) return <DashboardLoading error={error} />;

const checkHasVenuePermision = (permission: ChapterPermission) => {
return data.dashboardVenues.some(({ id }) =>
checkChapterPermission(user, permission, {
chapterId: id,
}),
);
};

const hasPermissionToCreateVenue = checkHasVenuePermision(
Permission.VenueCreate,
);
const hasPermissiontoEditVenue = (currentChapterId: number) =>
checkChapterPermission(user, Permission.VenueEdit, {
chapterId: currentChapterId,
});

return (
<VStack>
<Flex w="full" justify="space-between">
<Heading id="page-heading">Venues</Heading>
{adminedChapters.length > 0 && (
{hasPermissionToCreateVenue && (
<LinkButton
data-cy="new-venue"
href="/dashboard/venues/new"
Expand Down Expand Up @@ -61,17 +81,21 @@ export const VenuesPage: NextPageWithLayout = () => {
</LinkButton>
),
action: (venue) => (
<LinkButton
data-cy="edit-venue-button"
colorScheme="blue"
size="xs"
href={`/dashboard/chapters/${venue.chapter_id}/venues/${venue.id}/edit`}
>
Edit
<Text srOnly as="span">
{venue.name}
</Text>
</LinkButton>
<>
{hasPermissiontoEditVenue(venue.chapter_id) && (
<LinkButton
data-cy="edit-venue-button"
colorScheme="blue"
size="xs"
href={`/dashboard/chapters/${venue.chapter_id}/venues/${venue.id}/edit`}
>
Edit
<Text srOnly as="span">
{venue.name}
</Text>
</LinkButton>
)}
</>
),
}}
/>
Expand Down Expand Up @@ -103,7 +127,9 @@ export const VenuesPage: NextPageWithLayout = () => {
<Text>Venue</Text>
<Text>Chapter</Text>
<Text>Location</Text>
<Text>Action</Text>
{hasPermissiontoEditVenue(chapter_id) && (
<Text>Action</Text>
)}
</VStack>
),
action: () => (
Expand Down Expand Up @@ -131,17 +157,19 @@ export const VenuesPage: NextPageWithLayout = () => {
{' '}
{region}, {country}, {postal_code}
</Text>
<LinkButton
data-cy="edit-venue-button"
colorScheme="blue"
size="xs"
href={`/dashboard/chapters/${chapter_id}/venues/${id}/edit`}
>
Edit
<Text srOnly as="span">
{name}
</Text>
</LinkButton>
{hasPermissiontoEditVenue(chapter_id) && (
<LinkButton
data-cy="edit-venue-button"
colorScheme="blue"
size="xs"
href={`/dashboard/chapters/${chapter_id}/venues/${id}/edit`}
>
Edit
<Text srOnly as="span">
{name}
</Text>
</LinkButton>
)}
</VStack>
),
}}
Expand Down

0 comments on commit c61cb81

Please sign in to comment.