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

UI fixes

Browse source
This commit is contained in:
Rudra 2024-07-02 15:50:55 +05:30
parent 9c57ccda8a
commit 4b8b1ffa58
8 changed files with 95 additions and 66 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
frontend/src/ManageGranularAccess/AppResourcePermission.jsx
View file

@ -57,7 +57,7 @@ function AppResourcePermissions({
{'Edit'}
</span>
{/* <span class={`text-muted tj-text-xxsm ${isRoleGroup && 'check-label-disable'}`}>Create apps in this workspace</span> */}
<span class={`text-muted tj-text-xxsm`}>Access to app builder</span>
<span class={`tj-text-xxsm`}>Access to app builder</span>
</label>
<label className="form-check form-check-inline">
<input
@ -76,7 +76,7 @@ function AppResourcePermissions({
<span className="form-check-label" data-cy="app-delete-label">
{'View'}
</span>
<span class={`text-muted tj-text-xxsm`}>Only view released version of app</span>
<span class={`tj-text-xxsm`}>Only view released version of app</span>
</label>
<label className="form-check form-check-inline">
<input
@ -94,7 +94,7 @@ function AppResourcePermissions({
<span className="form-check-label" data-cy="app-delete-label">
{'Hide from dashbaord'}
</span>
<span class={`text-muted tj-text-xxsm`}>App will be accessible by URL only</span>
<span class={`tj-text-xxsm`}>App will be accessible by URL only</span>
</label>
</div>
</div>

111
frontend/src/ManageGranularAccess/index.jsx
View file

@ -4,7 +4,7 @@ import ModalBase from '@/_ui/Modal';
import { AppsSelect } from '@/_ui/Modal/AppsSelect';
import Multiselect from '@/_ui/Multiselect/Multiselect';
import React from 'react';
import { OverlayTrigger } from 'react-bootstrap';
import { OverlayTrigger, Tooltip } from 'react-bootstrap';
import { withTranslation } from 'react-i18next';
import { groupPermissionV2Service } from '@/_services';
import { toast } from 'react-hot-toast';
@ -15,7 +15,6 @@ import AppResourcePermissions from '@/ManageGranularAccess/AppResourcePermission
import AddResourcePermissionsMenu from '@/ManageGranularAccess/AddResourcePermissionsMenu';
import { ConfirmDialog } from '@/_components';
import { ToolTip } from '@/_components/ToolTip';
class ManageGranularAccessComponent extends React.Component {
constructor(props) {
super(props);
@ -485,29 +484,40 @@ class ManageGranularAccessComponent extends React.Component {
<label className="form-label bold-text">Permission</label>
<div className="type-container">
<div className="left-container">
<label className="form-check form-check-inline">
<input
className="form-check-input"
type="radio"
disabled={disableEditUpdate}
checked={initialPermissionState.canEdit}
onClick={() => {
this.setState((prevState) => ({
initialPermissionState: {
...prevState.initialPermissionState,
canEdit: !prevState.initialPermissionState.canEdit,
canView: prevState.initialPermissionState.canEdit,
...(prevState.initialPermissionState.canEdit && { hideFromDashboard: false }),
},
}));
}}
/>
<OverlayTrigger
overlay={
this.props.groupPermission?.name == 'end-user' ? (
<Tooltip id="tooltip-disable-edit-update">End-user cannot have edit permission</Tooltip>
) : (
<span></span>
)
}
placement="left"
>
<label className="form-check form-check-inline">
<input
className="form-check-input"
type="radio"
disabled={disableEditUpdate}
checked={initialPermissionState.canEdit}
onClick={() => {
this.setState((prevState) => ({
initialPermissionState: {
...prevState.initialPermissionState,
canEdit: !prevState.initialPermissionState.canEdit,
canView: prevState.initialPermissionState.canEdit,
...(prevState.initialPermissionState.canEdit && { hideFromDashboard: false }),
},
}));
}}
/>
<div>
<span className="form-check-label text-muted">Edit</span>
<span className="text-muted tj-text-xsm">Access to app builder</span>
</div>
</label>
<div>
<span className="form-check-label ">Edit</span>
<span className="tj-text-xsm">Access to app builder</span>
</div>
</label>
</OverlayTrigger>
</div>
<div className="right-container">
<label className="form-check form-check-inline">
@ -528,8 +538,8 @@ class ManageGranularAccessComponent extends React.Component {
}}
/>
<div>
<span className="form-check-label text-muted">View</span>
<span className="text-muted tj-text-xsm">Only view deployed version of app</span>
<span className="form-check-label ">View</span>
<span className=" tj-text-xsm">Only view deployed version of app</span>
</div>
</label>
<label className="form-check form-check-inline">
@ -549,7 +559,7 @@ class ManageGranularAccessComponent extends React.Component {
/>
<div>
<span className={`form-check-label faded-text`}>Hide from dashboard</span>
<span className="text-muted tj-text-xsm">App will be accessible by URL only</span>
<span className=" tj-text-xsm">App will be accessible by URL only</span>
</div>
</label>
</div>
@ -568,29 +578,38 @@ class ManageGranularAccessComponent extends React.Component {
}}
/>
<div>
<span className="form-check-label text-muted">All apps</span>
<span className="text-muted tj-text-xsm">
<span className="form-check-label ">All apps</span>
<span className=" tj-text-xsm">
This will select all apps in the workspace including any new apps created
</span>
</div>
</label>
<label className="form-check form-check-inline">
<input
className="form-check-input"
type="radio"
disabled={addableApps.length === 0}
checked={isCustom}
onClick={() => {
this.setState((prevState) => ({ isCustom: !prevState.isCustom, isAll: prevState.isCustom }));
}}
/>
<div>
<span className="form-check-label text-muted">Custom</span>
<span className="text-muted tj-text-xsm">
Select specific applications you want to add to the group
</span>
</div>
</label>
<OverlayTrigger
overlay={
this.props.groupPermission?.name == 'end-user' ? (
<Tooltip id="tooltip-disable-edit-update">Use custom groups to select custom resources</Tooltip>
) : (
<span></span>
)
}
placement="left"
>
<label className="form-check form-check-inline">
<input
className="form-check-input"
type="radio"
disabled={addableApps.length === 0}
checked={isCustom}
onClick={() => {
this.setState((prevState) => ({ isCustom: !prevState.isCustom, isAll: prevState.isCustom }));
}}
/>
<div>
<span className="form-check-label ">Custom</span>
<span className=" tj-text-xsm">Select specific applications you want to add to the group</span>
</div>
</label>
</OverlayTrigger>
<AppsSelect
disabled={!isCustom}
allowSelectAll={true}

11
frontend/src/ManageGroupPermissionResourcesV2/grpPermissionResc.theme.scss
View file

@ -132,4 +132,15 @@
.modal-footer {
border-top: 1px solid var(--slate6);;
}
.form-label{
color: var(--slate11);
}
}
.permission-body {
.tj-text-xxsm{
color: var(--slate11)
}
}

19
frontend/src/ManageGroupPermissionResourcesV2/index.jsx
View file

@ -480,7 +480,7 @@ class ManageGroupPermissionResourcesComponent extends React.Component {
<div>{EDIT_ROLE_MESSAGE?.[groupPermission?.name]?.[selectedNewRole](isPaidPlan)}</div>
) : (
<div>
<label className="form-label text-muted">User role</label>
<label className="form-label">User role</label>
<Select
options={this.props.roleOptions.filter((group) => group.value !== groupPermission?.name)}
value={selectedNewRole}
@ -862,9 +862,7 @@ class ManageGroupPermissionResourcesComponent extends React.Component {
{this.props.t('globals.create', 'Create')}
</span>
<span
class={`text-muted tj-text-xxsm ${
disablePermissionUpdate && 'check-label-disable'
}`}
class={`tj-text-xxsm ${disablePermissionUpdate && 'check-label-disable'}`}
>
Create apps in this workspace
</span>
@ -889,9 +887,7 @@ class ManageGroupPermissionResourcesComponent extends React.Component {
{this.props.t('globals.delete', 'Delete')}
</span>
<span
class={`text-muted tj-text-xxsm ${
disablePermissionUpdate && 'check-label-disable'
}`}
class={`tj-text-xxsm ${disablePermissionUpdate && 'check-label-disable'}`}
>
Delete any app in this workspace
</span>
@ -932,9 +928,7 @@ class ManageGroupPermissionResourcesComponent extends React.Component {
)}
</span>
<span
class={`text-muted tj-text-xxsm ${
disablePermissionUpdate && 'check-label-disable'
}`}
class={`tj-text-xxsm ${disablePermissionUpdate && 'check-label-disable'}`}
>
All operations on folders
</span>
@ -971,9 +965,7 @@ class ManageGroupPermissionResourcesComponent extends React.Component {
)}
</span>
<span
class={`text-muted tj-text-xxsm ${
disablePermissionUpdate && 'check-label-disable'
}`}
class={`tj-text-xxsm ${disablePermissionUpdate && 'check-label-disable'}`}
>
All operations on workspace constants
</span>
@ -997,6 +989,7 @@ class ManageGroupPermissionResourcesComponent extends React.Component {
setErrorState={this.setErrorState}
updateParentState={this.changeThisComponentState}
fetchGroup={this.fetchGroupPermission}
darkMode={this.props.darkMode}
/>
</aside>
</div>

2
frontend/src/ManageGroupPermissionsV2/ManageGroupPermissionsV2.jsx
View file

@ -151,7 +151,7 @@ class ManageGroupPermissionsComponent extends React.Component {
</div>
</Popover.Body>
</Popover>
{(groupName == 'all_users' || groupName == 'admin') && (
{(groupName == 'all_users' || groupName == 'admin' || groupName == 'builder' || groupName == 'end-user') && (
<Tooltip
id="tooltip-for-delete"
className="tooltip"

8
frontend/src/ManageGroupPermissionsV2/groupPermissions.theme.scss
View file

@ -254,7 +254,7 @@
margin: 0;
border-radius: 6px;
background-color: var(--slate3);
color: black;
color: var(--slate11);
min-height: 24px;
text-overflow: ellipsis;
overflow: hidden;
@ -401,6 +401,12 @@
.manage-resource-permission{
.tj-text-xxsm{
color: var(--slate11)
}
transition: background-color 0.3s ease;
border-bottom: 1px solid var(--slate5);
display: flex;

2
frontend/src/TooljetDatabase/Forms/styles.scss
View file

@ -177,7 +177,7 @@
input.form-control:disabled {
gap: 16px !important;
background: #f4f6fa !important;
background: var(--base) !important;
border: 1px solid var(--slate7) !important;
border-radius: 6px !important;
margin-bottom: 4px !important;

2
frontend/src/_styles/theme.scss
View file

@ -12753,7 +12753,7 @@ tbody {
margin: 0;
border-radius: 6px;
background-color: var(--slate3);
// color: var(--slate11);
color: var(--slate11);
min-height: 24px;
text-overflow: ellipsis;
overflow: hidden;