Elgato_dark/ToolJet
1
0
Fork 0
mirror of https://github.com/ToolJet/ToolJet synced 2026-05-23 08:58:26 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 5

fix: page permissions demo bugs

Browse source
This commit is contained in:
Vijaykant Yadav 2025-04-30 03:07:40 +05:30
parent 5128f41aad
commit 5149a136af
11 changed files with 89 additions and 35 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
frontend/src/AppBuilder/LeftSidebar/PageMenu/PageHandlerMenu.jsx
View file

@ -164,7 +164,7 @@ export const PageHandlerMenu = ({ darkMode }) => {
>
<div className="d-flex align-items-center">
<div>Page permission</div>
{!licenseValid && <SolidIcon name="enterprisesmall" />}
{!licenseValid && <SolidIcon name="enterprisecrown" />}
</div>
</ToolTip>
);

39
frontend/src/AppBuilder/LeftSidebar/PageMenu/PageMenuItem.jsx
View file

@ -17,6 +17,7 @@ import IconSelector from './IconSelector';
import { withRouter } from '@/_hoc/withRouter';
import OverflowTooltip from '@/_components/OverflowTooltip';
import { shallow } from 'zustand/shallow';
import { ToolTip } from '@/_components/ToolTip';
export const PageMenuItem = withRouter(
memo(({ darkMode, page, navigate }) => {
@ -151,6 +152,36 @@ export const PageMenuItem = withRouter(
[popoverRef.current, page]
);
function getTooltip() {
const permission = page?.permissions?.length ? page?.permissions[0] : null;
if (!permission) return '';
const users = permission.users || [];
const isSingle = permission.type === 'SINGLE';
const isGroup = permission.type === 'GROUP';
if (users.length === 0) return null;
if (isSingle) {
if (users.length === 1) {
const email = users[0].user.email;
return `Access restricted to ${email}`;
} else {
return `Access restricted to ${users.length} users`;
}
}
if (isGroup) {
if (users.length === 1) {
const groupName = users[0].permissionGroup?.name ?? 'Group';
return `Access restricted to ${groupName} group`;
} else {
return `Access restricted to ${users.length} groups`;
}
}
return '';
}
return (
<div
onMouseEnter={() => setIsHovered(true)}
@ -200,7 +231,13 @@ export const PageMenuItem = withRouter(
</span>
</div>
<div style={{ marginLeft: '8px', marginRight: 'auto' }}>
{licenseValid && restricted && <SolidIcon width="16" name="lock" fill="var(--icon-strong)" />}
{licenseValid && restricted && (
<ToolTip message={getTooltip()}>
<div>
<SolidIcon width="16" name="lock" fill="var(--icon-strong)" />
</div>
</ToolTip>
)}
</div>
<div className={cx('right', { 'handler-menu-open': showEditingPopover })}>
{!shouldFreeze && (

33
frontend/src/AppBuilder/LeftSidebar/PageMenu/PagePermission.jsx
View file

@ -34,7 +34,6 @@ export default function PagePermission({ darkMode }) {
const [showConfirmDelete, setShowConfirmDelete] = useState(false);
const [isLoading, setIsLoading] = useState(false);
const [isPermissionsLoading, setPermissionsLoading] = useState(true);
const [pageToDelete, setPageToDelete] = useState(null);
const [initialSelectedGroups, setInitialSelectedGroups] = useState([]);
const [initialSelectedUsers, setInitialSelectedUsers] = useState([]);
const [initalPagePermissionType, setInitialPagePermissionType] = useState('all');
@ -42,7 +41,7 @@ export default function PagePermission({ darkMode }) {
useEffect(() => {
if (!showPagePermissionModal) return;
const fetchPagePermission = () => {
appPermissionService.getPagePermission(appId, editingPage?.id || pageToDelete).then((data) => {
appPermissionService.getPagePermission(appId, editingPage?.id).then((data) => {
if (data) {
if (data[0] && data[0]?.type === PERMISSION_TYPES.group) {
const groups =
@ -55,7 +54,6 @@ export default function PagePermission({ darkMode }) {
setInitialPagePermissionType(data[0]?.type?.toLowerCase());
setPagePermission(data);
toggleUserGroupSelect(true);
setPageToDelete(null);
setInitialSelectedGroups(groups);
data?.length && setSelectedUserGroups(groups);
} else if (data[0] && data[0]?.type === PERMISSION_TYPES.single) {
@ -74,7 +72,6 @@ export default function PagePermission({ darkMode }) {
setInitialPagePermissionType(data[0]?.type?.toLowerCase());
setPagePermission(data);
toggleUsersSelect(true);
setPageToDelete(null);
setInitialSelectedUsers(users);
data?.length && setSelectedUsers(users);
}
@ -83,7 +80,7 @@ export default function PagePermission({ darkMode }) {
});
};
fetchPagePermission();
}, [showPagePermissionModal, pageToDelete]);
}, [showPagePermissionModal]);
const isSelectionUnchanged = useMemo(() => {
if (pagePermissionType === 'group') {
@ -237,13 +234,12 @@ export default function PagePermission({ darkMode }) {
const deletePagePermission = () => {
setIsLoading(true);
appPermissionService
.deletePagePermission(appId, pageToDelete)
.deletePagePermission(appId, editingPage?.id)
.then((data) => {
toast.success('Permission successfully deleted!', {
className: 'text-nowrap w-auto mw-100',
});
updatePageWithPermissions(pageToDelete, []);
setPageToDelete(null);
updatePageWithPermissions(editingPage?.id, []);
})
.catch(() => {
toast.error('Permission could not be deleted. Please try again!', {
@ -284,25 +280,18 @@ export default function PagePermission({ darkMode }) {
isLoading={isLoading}
handleClose={handlePagePermissionModalClose}
confirmBtnProps={{
title: pagePermission ? 'Update' : pagePermissionType === 'all' ? 'Default permission' : 'Create permission',
title: pagePermission
? 'Save changes'
: pagePermissionType === 'all'
? 'Default permission'
: 'Create permission',
disabled: isPermissionsLoading || isSelectionUnchanged,
tooltipMessage: '',
leftIcon: pagePermission && 'save',
className: 'action-btn-page-permission',
}}
darkMode={darkMode}
className="page-permissions-modal"
headerAction={() =>
pagePermission && (
<span
onClick={(e) => {
setPageToDelete(editingPage?.id);
togglePagePermissionModal(false);
setShowConfirmDelete(true);
}}
>
<SolidIcon fill="var(--tomato10)" width="20" name="trash" />
</span>
)
}
>
<div className="page-permission">
{isPermissionsLoading ? (

4
frontend/src/AppBuilder/LeftSidebar/PageMenu/style.scss
View file

@ -374,4 +374,8 @@
.spinner-center {
min-height: 250px;
}
}
.modal-base .modal-footer .action-btn-page-permission svg path {
fill: var(--indigo1) !important;
}

2
frontend/src/AppBuilder/Viewer/PageGroup.jsx
View file

@ -11,8 +11,6 @@ import cx from 'classnames';
const RenderPage = ({ page, currentPageId, switchPageWrapper, labelStyle, computeStyles, darkMode, homePageId }) => {
const isHomePage = page.id === homePageId;
console.log({ page, homePageId });
console.log({ isHomePage });
const iconName = isHomePage && !page.icon ? 'IconHome2' : page.icon;
const IconElement = Icons?.[iconName] ?? Icons?.['IconFileDescription'];
return (page.hidden || page.disabled) && page?.restricted ? null : (

6
frontend/src/_styles/components.scss
View file

@ -242,10 +242,16 @@ $btn-dark-color: #FFFFFF;
display: flex;
align-items: baseline;
gap: 5px;
cursor: pointer !important;
pointer-events: unset !important;
&.disabled {
opacity: 1 !important;
}
svg {
margin-left: 5px;
}
}
}

19
frontend/src/_ui/Icon/solidIcons/EnterrpiseCrown.jsx Normal file
View file

@ -0,0 +1,19 @@
import React from 'react';
const EnterpriseCrown = ({ fill = '#FCA23F', width = '12', className = '', viewBox = '0 0 16 16' }) => (
<svg
width={width}
height={width}
viewBox="0 0 16 16"
fill={fill}
className={className}
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M14.6474 6.49583L13.2967 12.6705C13.2195 13.1143 12.8143 13.4423 12.3705 13.4423H3.62954C3.16644 13.4423 2.78053 13.1143 2.70334 12.6705L1.35264 6.51512C1.25616 5.99414 1.60349 5.51175 2.12447 5.41527C2.4525 5.35738 2.78053 5.47315 3.01207 5.724L5.01883 7.88512L7.14136 3.08049C7.35361 2.59809 7.93248 2.38584 8.39558 2.61739C8.60783 2.71387 8.7622 2.86823 8.85867 3.08049L10.9812 7.86582L12.988 5.7047C13.3353 5.31879 13.9334 5.2802 14.3387 5.62752C14.5895 5.83977 14.7053 6.1871 14.6474 6.49583Z"
fill={fill}
/>
</svg>
);
export default EnterpriseCrown;

3
frontend/src/_ui/Icon/solidIcons/index.js
View file

@ -234,6 +234,7 @@ import NewTabSmall from './NewTabSmall.jsx';
import Code from './Code.jsx';
import WorkflowV3 from './WorkflowV3.jsx';
import WorkspaceV3 from './WorkspaceV3.jsx';
import EnterpriseCrown from './EnterrpiseCrown.jsx';
const Icon = (props) => {
switch (props.name) {
@ -355,6 +356,8 @@ const Icon = (props) => {
return <EnterpriseNew {...props} />;
case 'enterprisev3':
return <EnterpriseV3 {...props} />;
case 'enterprisecrown':
return <EnterpriseCrown {...props} />;
case 'lockGradient':
return <LockGradient {...props} />;
case 'datasourceGradient':

2
server/ee

@ -1 +1 @@
Subproject commit 84ec48d0f64fd6dc5f7677f71a5119219cc4ada4
Subproject commit bd6745ee0a9344d5fcf42a79a50b8185ec43643a

12
server/src/modules/app-permissions/repositories/page-permissions.repository.ts
View file

@ -19,14 +19,10 @@ export class PagePermissionsRepository extends Repository<PagePermission> {
});
return pagePermissions.map((permission) => {
if (permission.type === PAGE_PERMISSION_TYPE.GROUP) {
return {
...permission,
groups: permission.users,
users: undefined,
};
}
return permission;
return {
...permission,
users: permission.users,
};
});
}, manager || this.manager);
}

2
server/src/modules/versions/module.ts
View file

@ -9,6 +9,7 @@ import { DataSourcesModule } from '@modules/data-sources/module';
import { AppsRepository } from '@modules/apps/repository';
import { FeatureAbilityFactory } from './ability';
import { getImportPath } from '@modules/app/constants';
import { AppPermissionsModule } from '@modules/app-permissions/module';
export class VersionModule {
static async register(configs?: { IS_GET_CONTEXT: boolean }): Promise<DynamicModule> {
@ -33,6 +34,7 @@ export class VersionModule {
await DataSourcesModule.register(configs),
await AppEnvironmentsModule.register(configs),
await ThemesModule.register(configs),
await AppPermissionsModule.register(configs),
],
controllers: [ComponentsController, EventsController, PagesController, VersionController, VersionControllerV2],
providers: [