mirror of
https://github.com/ToolJet/ToolJet
synced 2026-05-06 06:48:21 +00:00
Add data-cy for manage groups page (#6241)
This commit is contained in:
Ajith KV
GitHub
parent
0de8dc2285
commit
bfec1f30be
6 changed files with 61 additions and 19 deletions
|
|
@ -10,6 +10,7 @@ export const FolderMenu = function FolderMenu({
|
|||
canDeleteFolder,
|
||||
canUpdateFolder,
|
||||
darkMode,
|
||||
dataCy = '',
|
||||
}) {
|
||||
const [open, setOpen] = React.useState(false);
|
||||
const closeMenu = () => {
|
||||
|
|
@ -28,7 +29,9 @@ export const FolderMenu = function FolderMenu({
|
|||
closeMenu();
|
||||
onClick();
|
||||
}}
|
||||
data-cy={`${text.toLowerCase().replace(/\s+/g, '-')}-card-option`}
|
||||
data-cy={`${String(dataCy + '-' + text)
|
||||
.toLowerCase()
|
||||
.replace(/\s+/g, '-')}-option`}
|
||||
>
|
||||
{text}
|
||||
</span>
|
||||
|
|
@ -72,7 +75,7 @@ export const FolderMenu = function FolderMenu({
|
|||
className={cx('folder-menu-icon', {
|
||||
'd-grid': open,
|
||||
})}
|
||||
data-cy="folder-card-menu-icon"
|
||||
data-cy={`${dataCy.toLowerCase().replace(/\s+/g, '-')}-card-menu-icon`}
|
||||
>
|
||||
<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
|
|
|
|||
|
|
@ -277,6 +277,7 @@ export const Folders = function Folders({
|
|||
deleteFolder={() => deleteFolder(folder)}
|
||||
editFolder={() => updateFolder(folder)}
|
||||
darkMode={darkMode}
|
||||
dataCy={folder.name}
|
||||
/>
|
||||
)}
|
||||
</a>
|
||||
|
|
|
|||
|
|
@ -333,7 +333,12 @@ class ManageGroupPermissionResourcesComponent extends React.Component {
|
|||
) : (
|
||||
<div>
|
||||
<div className="justify-content-between d-flex groups-main-header-wrap">
|
||||
<p className="font-weight-500 tj-text-md">{this?.props?.selectedGroup}</p>
|
||||
<p
|
||||
className="font-weight-500 tj-text-md"
|
||||
data-cy={`${this.props.selectedGroup.toLowerCase().replace(/\s+/g, '-')}-title`}
|
||||
>
|
||||
{this.props.selectedGroup}
|
||||
</p>
|
||||
{(groupPermission.group == 'admin' || groupPermission.group == 'all_users') && (
|
||||
<div className="default-group-wrap">
|
||||
<SolidIcon name="information" fill="#46A758" width="13" />
|
||||
|
|
@ -346,7 +351,9 @@ class ManageGroupPermissionResourcesComponent extends React.Component {
|
|||
<div className="user-group-actions">
|
||||
<Link
|
||||
onClick={() => this.props.updateGroupName(groupPermission)}
|
||||
data-cy="update-link"
|
||||
data-cy={`${String(groupPermission.group)
|
||||
.toLowerCase()
|
||||
.replace(/\s+/g, '-')}-group-name-update-link`}
|
||||
className="tj-text-xsm font-weight-500 edit-group"
|
||||
>
|
||||
<SolidIcon fill="#28303F" name="editrectangle" width="14" />
|
||||
|
|
@ -355,7 +362,7 @@ class ManageGroupPermissionResourcesComponent extends React.Component {
|
|||
<Link
|
||||
className="delete-group tj-text-xsm font-weight-500"
|
||||
onClick={() => this.props.deleteGroup(groupPermission.id)}
|
||||
data-cy="delete-link"
|
||||
data-cy={`${String(groupPermission.group).toLowerCase().replace(/\s+/g, '-')}-group-delete-link`}
|
||||
>
|
||||
<SolidIcon fill="#E54D2E" name="trash" width="14" /> Delete group
|
||||
</Link>
|
||||
|
|
@ -455,15 +462,19 @@ class ManageGroupPermissionResourcesComponent extends React.Component {
|
|||
<table>
|
||||
{groupPermission.group == 'admin' && (
|
||||
<div className="manage-group-users-info">
|
||||
<p className="tj-text-xsm">
|
||||
<p className="tj-text-xsm" data-cy="helper-text-admin-app-access">
|
||||
<SolidIcon name="information" fill="#3E63DD" /> Admin has edit access to all apps. These
|
||||
are not editable
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
<div className="groups-app-body-header d-flex">
|
||||
<p className="font-weight-500 tj-text-xsm">App name</p>
|
||||
<p className="font-weight-500 tj-text-xsm">Permissions</p>
|
||||
<p className="font-weight-500 tj-text-xsm" data-cy="name-header">
|
||||
App name
|
||||
</p>
|
||||
<p className="font-weight-500 tj-text-xsm" data-cy="permissions-header">
|
||||
Permissions
|
||||
</p>
|
||||
</div>
|
||||
<tbody className="manage-group-app-table-body">
|
||||
{isLoadingGroup || isLoadingApps ? (
|
||||
|
|
@ -484,8 +495,14 @@ class ManageGroupPermissionResourcesComponent extends React.Component {
|
|||
<>
|
||||
{appsInGroup?.length > 0 ? (
|
||||
appsInGroup.map((app) => (
|
||||
<tr key={app.id} className="apps-table-row">
|
||||
<td className="font-weight-500">{app.name}</td>
|
||||
<tr
|
||||
key={app.id}
|
||||
className="apps-table-row"
|
||||
data-cy={`${app.name.toLowerCase().replace(/\s+/g, '-')}-app-permission-data`}
|
||||
>
|
||||
<td className="font-weight-500" data-cy="selected-app-name">
|
||||
{app.name}
|
||||
</td>
|
||||
<td className="text-secondary d-flex">
|
||||
<div className="apps-view-edit-wrap">
|
||||
<label className="form-check form-check-inline">
|
||||
|
|
@ -497,8 +514,9 @@ class ManageGroupPermissionResourcesComponent extends React.Component {
|
|||
}}
|
||||
disabled={groupPermission.group === 'admin'}
|
||||
checked={this.canAppGroupPermission(app, groupPermission.id, 'view')}
|
||||
data-cy="checkbox-view-app"
|
||||
/>
|
||||
<span className="form-check-label">
|
||||
<span className="form-check-label" data-cy="label-app-view">
|
||||
{this.props.t('globals.view', 'view')}
|
||||
</span>
|
||||
</label>
|
||||
|
|
@ -511,8 +529,9 @@ class ManageGroupPermissionResourcesComponent extends React.Component {
|
|||
}}
|
||||
disabled={groupPermission.group === 'admin'}
|
||||
checked={this.canAppGroupPermission(app, groupPermission.id, 'edit')}
|
||||
data-cy="checkbox-app-edit"
|
||||
/>
|
||||
<span className="form-check-label">
|
||||
<span className="form-check-label" data-cy="label-app-edit">
|
||||
{this.props.t('globals.edit', 'Edit')}
|
||||
</span>
|
||||
</label>
|
||||
|
|
@ -541,12 +560,14 @@ class ManageGroupPermissionResourcesComponent extends React.Component {
|
|||
groupPermission.id,
|
||||
'hideFromDashboard'
|
||||
)}
|
||||
data-cy="checkbox-hide-from-dashboard"
|
||||
/>
|
||||
<span
|
||||
className={`form-check-label ${
|
||||
this.canAppGroupPermission(app, groupPermission.id, 'edit') &&
|
||||
'faded-text'
|
||||
}`}
|
||||
data-cy="label-hide-from-dashboard"
|
||||
>
|
||||
Hide from dashboard
|
||||
</span>
|
||||
|
|
@ -560,7 +581,6 @@ class ManageGroupPermissionResourcesComponent extends React.Component {
|
|||
onClick={() => {
|
||||
this.removeAppFromGroup(groupPermission.id, app.id, app.name);
|
||||
}}
|
||||
data-cy="delete-link"
|
||||
className="delete-link"
|
||||
>
|
||||
<ButtonSolid
|
||||
|
|
@ -569,6 +589,7 @@ class ManageGroupPermissionResourcesComponent extends React.Component {
|
|||
leftIcon="trash"
|
||||
iconWidth="14"
|
||||
fill={'#E54D2E'}
|
||||
data-cy={`${app.name.toLowerCase().replace(/\s+/g, '-')}-remove-button`}
|
||||
>
|
||||
Remove
|
||||
</ButtonSolid>
|
||||
|
|
@ -582,8 +603,13 @@ class ManageGroupPermissionResourcesComponent extends React.Component {
|
|||
<div className="manage-groups-no-apps-icon">
|
||||
<BulkIcon name="apps" fill="#3E63DD" width="28" />
|
||||
</div>
|
||||
<p className="tj-text-md font-weight-500">No apps are added to the group</p>
|
||||
<span className="tj-text-sm text-center">
|
||||
<p className="tj-text-md font-weight-500" data-cy="helper-text-no-apps-added">
|
||||
No apps are added to the group
|
||||
</p>
|
||||
<span
|
||||
className="tj-text-sm text-center"
|
||||
data-cy="helper-text-user-groups-permissions"
|
||||
>
|
||||
Add app to the group to control permissions
|
||||
<br /> for users in this group
|
||||
</span>
|
||||
|
|
@ -637,6 +663,9 @@ class ManageGroupPermissionResourcesComponent extends React.Component {
|
|||
iconWidth="16"
|
||||
className="add-users-button"
|
||||
isLoading={isAddingUsers}
|
||||
data-cy={`${String(groupPermission.group)
|
||||
.toLowerCase()
|
||||
.replace(/\s+/g, '-')}-group-add-button`}
|
||||
>
|
||||
Add users
|
||||
</ButtonSolid>
|
||||
|
|
@ -652,7 +681,7 @@ class ManageGroupPermissionResourcesComponent extends React.Component {
|
|||
<br />
|
||||
<div>
|
||||
{groupPermission.group == 'all_users' && (
|
||||
<div className="manage-group-users-info">
|
||||
<div className="manage-group-users-info" data-cy="helper-text-all-user-included">
|
||||
<p className="tj-text-xsm">
|
||||
<SolidIcon name="information" fill="#3E63DD" /> All users include every users in the app.
|
||||
This list is not editable
|
||||
|
|
@ -725,7 +754,7 @@ class ManageGroupPermissionResourcesComponent extends React.Component {
|
|||
<div>
|
||||
{groupPermission.group == 'admin' && (
|
||||
<div className="manage-group-users-info">
|
||||
<p className="tj-text-xsm">
|
||||
<p className="tj-text-xsm" data-cy="helper-text-admin-permissions">
|
||||
<SolidIcon name="information" fill="#3E63DD" /> Admin has all permissions
|
||||
</p>
|
||||
</div>
|
||||
|
|
@ -843,7 +872,9 @@ class ManageGroupPermissionResourcesComponent extends React.Component {
|
|||
</div>
|
||||
</div>
|
||||
<div className="apps-variable-permission-wrap">
|
||||
<div>{this.props.t('globals.environmentVar', 'Environment variables')}</div>
|
||||
<div data-cy="resource-workspace-variable">
|
||||
{this.props.t('globals.environmentVar', 'Environment variables')}
|
||||
</div>
|
||||
<div className="text-muted">
|
||||
<div>
|
||||
<label className="form-check form-check-inline">
|
||||
|
|
|
|||
|
|
@ -203,7 +203,9 @@ class ManageGroupPermissionsComponent extends React.Component {
|
|||
darkMode={this.props.darkMode}
|
||||
/>
|
||||
<div className="d-flex groups-btn-container">
|
||||
<p className="tj-text">{groups?.length} Groups</p>
|
||||
<p className="tj-text" data-cy="page-title">
|
||||
{groups?.length} Groups
|
||||
</p>
|
||||
{!showNewGroupForm && !showGroupNameUpdateForm && (
|
||||
<ButtonSolid
|
||||
className="btn btn-primary create-new-group-button"
|
||||
|
|
@ -321,6 +323,9 @@ class ManageGroupPermissionsComponent extends React.Component {
|
|||
});
|
||||
}}
|
||||
className="groups-folder-list"
|
||||
dataCy={this.humanizeifDefaultGroupName(permissionGroup.group)
|
||||
.toLowerCase()
|
||||
.replace(/\s+/g, '-')}
|
||||
>
|
||||
<span>{this.humanizeifDefaultGroupName(permissionGroup.group)}</span>
|
||||
</FolderList>
|
||||
|
|
|
|||
|
|
@ -8,6 +8,7 @@ const Trash = ({ fill = '#C1C8CD', width = '25', className = '', viewBox = '0 0
|
|||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
className={className}
|
||||
data-cy="trash-icon"
|
||||
>
|
||||
<g opacity="0.4">
|
||||
<path
|
||||
|
|
|
|||
|
|
@ -8,6 +8,7 @@ const Information = ({ fill = '#C1C8CD', width = '25', className = '', viewBox =
|
|||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
className={className}
|
||||
data-cy="information-icon"
|
||||
>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
|
|
|
|||
Loading…
Reference in a new issue