Skip to content

refactor: Decouple permissions table component from page #36872

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
kodiakhq merged 2 commits into from
Sep 4, 2025
+1,467 −116
Merged

refactor: Decouple permissions table component from page #36872

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
e9c3461
chore: decouple table component from page
dougfabris Sep 4, 2025
cf80e91
Merge branch 'develop' into refactor/permissionsTable
kodiakhq[bot] Sep 4, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions apps/meteor/.storybook/main.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ export default {
getAbsolutePath('@storybook/addon-interactions'),
getAbsolutePath('@storybook/addon-webpack5-compiler-babel'),
getAbsolutePath('@storybook/addon-styling-webpack'),
getAbsolutePath('@storybook/addon-a11y'),
],

typescript: {
Expand Down
97 changes: 97 additions & 0 deletions apps/meteor/client/views/admin/permissions/PermissionsPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,97 @@
import { Margins, Tabs, Button } from '@rocket.chat/fuselage';
import { useEffectEvent } from '@rocket.chat/fuselage-hooks';
import { useRoute, usePermission, useSetModal } from '@rocket.chat/ui-contexts';
import type { ReactElement } from 'react';
import { useState } from 'react';
import { useTranslation } from 'react-i18next';

import CustomRoleUpsellModal from './CustomRoleUpsellModal';
import PermissionsContextBar from './PermissionsContextBar';
import PermissionsTable from './PermissionsTable';
import { usePermissionsAndRoles } from './hooks/usePermissionsAndRoles';
import { usePagination } from '../../../components/GenericTable/hooks/usePagination';
import { Page, PageHeader, PageContent } from '../../../components/Page';

const PermissionsPage = ({ isEnterprise }: { isEnterprise: boolean }): ReactElement => {
const { t } = useTranslation();
const [filter, setFilter] = useState('');
const canViewPermission = usePermission('access-permissions');
const canViewSettingPermission = usePermission('access-setting-permissions');
const defaultType = canViewPermission ? 'permissions' : 'settings';
const [type, setType] = useState(defaultType);
const router = useRoute('admin-permissions');
const setModal = useSetModal();

const paginationProps = usePagination();
const { permissions, total, roleList } = usePermissionsAndRoles(type, filter, paginationProps.itemsPerPage, paginationProps.current);

const handlePermissionsTab = useEffectEvent(() => {
if (type === 'permissions') {
return;
}
setType('permissions');
});

const handleSettingsTab = useEffectEvent(() => {
if (type === 'settings') {
return;
}
setType('settings');
});

const handleAdd = useEffectEvent(() => {
if (!isEnterprise) {
setModal(<CustomRoleUpsellModal onClose={() => setModal(null)} />);
return;
}
router.push({
context: 'new',
});
});

return (
<Page flexDirection='row'>
<Page>
<PageHeader title={t('Permissions')}>
<Button primary onClick={handleAdd} aria-label={t('New')} name={t('New_role')}>
{t('New_role')}
</Button>
</PageHeader>
<Margins blockEnd={16}>
<Tabs>
<Tabs.Item
data-qa='PermissionTable-Permissions'
selected={type === 'permissions'}
onClick={handlePermissionsTab}
disabled={!canViewPermission}
>
{t('Permissions')}
</Tabs.Item>
<Tabs.Item
data-qa='PermissionTable-Settings'
selected={type === 'settings'}
onClick={handleSettingsTab}
disabled={!canViewSettingPermission}
>
{t('Settings')}
</Tabs.Item>
</Tabs>
</Margins>
<PageContent mb='neg-x8'>
<Margins block={8}>
<PermissionsTable
roleList={roleList}
permissions={permissions}
total={total}
setFilter={setFilter}
paginationProps={paginationProps}
/>
</Margins>
</PageContent>
</Page>
<PermissionsContextBar />
</Page>
);
};

export default PermissionsPage;
4 changes: 2 additions & 2 deletions apps/meteor/client/views/admin/permissions/PermissionsRouter.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import { useRouteParameter, usePermission } from '@rocket.chat/ui-contexts';
import type { ReactElement } from 'react';

import PermissionsTable from './PermissionsTable';
import PermissionsPage from './PermissionsPage';
import UsersInRole from './UsersInRole';
import PageSkeleton from '../../../components/PageSkeleton';
import { useIsEnterprise } from '../../../hooks/useIsEnterprise';
Expand All @@ -25,7 +25,7 @@ const PermissionsRouter = (): ReactElement => {
return <UsersInRole />;
}

return <PermissionsTable isEnterprise={!!data?.isEnterprise} />;
return <PermissionsPage isEnterprise={!!data?.isEnterprise} />;
};

export default PermissionsRouter;
22 changes: 22 additions & 0 deletions apps/meteor/client/views/admin/permissions/PermissionsTable/PermissionsTable.spec.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
import { mockAppRoot } from '@rocket.chat/mock-providers';
import { composeStories } from '@storybook/react';
import { render } from '@testing-library/react';
import { axe } from 'jest-axe';

import * as stories from './PermissionsTable.stories';

const testCases = Object.values(composeStories(stories)).map((Story) => [Story.storyName || 'Story', Story]);

test.each(testCases)(`renders %s without crashing`, async (_storyname, Story) => {
const { baseElement } = render(<Story />, { wrapper: mockAppRoot().build() });
expect(baseElement).toMatchSnapshot();
});

test.each(testCases)('%s should have no a11y violations', async (_storyname, Story) => {
const { container } = render(<Story />, { wrapper: mockAppRoot().build() });

// TODO: Needed to skip `label` because fuselage‘s `CheckBox` has a a11y empty label issue
// TODO: Needed to skip `button-name` because fuselage‘s `Pagination` buttons are missing names
const results = await axe(container, { rules: { 'label': { enabled: false }, 'button-name': { enabled: false } } });
expect(results).toHaveNoViolations();
});
136 changes: 136 additions & 0 deletions apps/meteor/client/views/admin/permissions/PermissionsTable/PermissionsTable.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,136 @@
import type { IPermission, IRole } from '@rocket.chat/core-typings';
import { Margins } from '@rocket.chat/fuselage';
import type { Meta, StoryFn } from '@storybook/react';

import PermissionsTable from './PermissionsTable';
import { PageContent } from '../../../../components/Page';

export default {
title: 'views/admin/PermissionsTable',
component: PermissionsTable,
decorators: [
(fn) => (
<PageContent mb='neg-x8'>
<Margins block={8}>{fn()}</Margins>
</PageContent>
),
],
} satisfies Meta<typeof PermissionsTable>;

const roles: IRole[] = [
{
description: 'Owner of the workspace',
name: 'owner',
protected: true,
scope: 'Users',
_id: 'owner',
},
{
description: 'Administrator',
name: 'admin',
protected: true,
scope: 'Users',
_id: 'admin',
},
{
description: 'Leader',
name: 'leader',
protected: false,
scope: 'Subscriptions',
_id: 'leader',
},
{
description: 'Moderator',
name: 'moderator',
protected: false,
scope: 'Subscriptions',
_id: 'moderator',
},
{
description: 'User',
name: 'user',
protected: true,
scope: 'Users',
_id: 'user',
},
{
description: 'Guest',
name: 'guest',
protected: true,
scope: 'Users',
_id: 'guest',
},
{
description: 'Bot',
name: 'bot',
protected: true,
scope: 'Users',
_id: 'bot',
},
{
description: 'App',
name: 'app',
protected: true,
scope: 'Users',
_id: 'app',
},
];

const permissions: IPermission[] = [
{
_id: '0',
_updatedAt: new Date('2023-01-01'),
roles: ['admin'],
group: 'admin',
level: 'settings',
section: 'General',
settingId: 'general_settings',
sorter: 1,
},
{
_id: '1',
_updatedAt: new Date('2023-01-01'),
roles: ['user'],
group: 'admin',
level: 'settings',
section: 'General',
settingId: 'general_settings',
sorter: 2,
},
{
_id: '2',
_updatedAt: new Date('2023-01-01'),
roles: ['user'],
group: 'admin',
level: 'settings',
section: 'General',
settingId: 'general_settings',
sorter: 3,
},
{
_id: '3',
_updatedAt: new Date('2023-01-01'),
roles: ['user'],
group: 'admin',
level: 'settings',
section: 'General',
settingId: 'general_settings',
sorter: 4,
},
];

export const Default: StoryFn<typeof PermissionsTable> = (args) => <PermissionsTable {...args} />;
Default.args = {
total: permissions.length,
permissions,
roleList: roles,
setFilter: () => undefined,
};

export const Empty: StoryFn<typeof PermissionsTable> = (args) => <PermissionsTable {...args} />;
Empty.args = {
total: 0,
permissions: [],
roleList: [],
setFilter: () => undefined,
};
Loading
Loading