Elgato_dark/ToolJet
1
0
Fork 0
mirror of https://github.com/ToolJet/ToolJet synced 2026-05-24 09:28:31 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

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

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

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

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

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

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

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

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

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

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

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