mirror of
https://github.com/ToolJet/ToolJet
synced 2026-05-23 00:48:25 +00:00
Merge pull request #12816 from ToolJet/fix/event-actions
Fix: Reorganised event actions and improved UX
This commit is contained in:
Johnson Cherian
GitHub
commit
a704fa3a8a
2 changed files with 174 additions and 72 deletions
|
|
@ -32,6 +32,8 @@ import useStore from '@/AppBuilder/_stores/store';
|
|||
import { useEventActions, useEvents } from '@/AppBuilder/_stores/slices/eventsSlice';
|
||||
import ToggleGroup from '@/ToolJetUI/SwitchGroup/ToggleGroup';
|
||||
import ToggleGroupItem from '@/ToolJetUI/SwitchGroup/ToggleGroupItem';
|
||||
import SolidIcon from '@/_ui/Icon/SolidIcons';
|
||||
import { components as selectComponents } from 'react-select';
|
||||
|
||||
export const EventManager = ({
|
||||
sourceId,
|
||||
|
|
@ -101,8 +103,23 @@ export const EventManager = ({
|
|||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [JSON.stringify(currentEvents)]);
|
||||
|
||||
let actionOptions = ActionTypes.map((action) => {
|
||||
return { name: action.name, value: action.id };
|
||||
let groupedOptions = ActionTypes.reduce((acc, action) => {
|
||||
const groupName = action.group;
|
||||
|
||||
if (!acc[groupName]) {
|
||||
acc[groupName] = [];
|
||||
}
|
||||
|
||||
acc[groupName].push({
|
||||
label: action.name,
|
||||
value: action.id,
|
||||
});
|
||||
|
||||
return acc;
|
||||
}, {});
|
||||
|
||||
let actionOptions = Object.keys(groupedOptions).map((groupName) => {
|
||||
return { label: groupName, options: groupedOptions[groupName] };
|
||||
});
|
||||
|
||||
let checkIfClicksAreInsideOf = document.querySelector('.cm-completionListIncompleteBottom');
|
||||
|
|
@ -124,6 +141,46 @@ export const EventManager = ({
|
|||
}),
|
||||
};
|
||||
|
||||
const actionStyles = {
|
||||
...styles,
|
||||
menuList: (base) => ({
|
||||
...base,
|
||||
padding: '8px 0 8px 8px',
|
||||
'&::-webkit-scrollbar': {
|
||||
width: '10px',
|
||||
},
|
||||
'&::-webkit-scrollbar-track': {
|
||||
background: 'transparent',
|
||||
},
|
||||
'&::-webkit-scrollbar-thumb': {
|
||||
background: '#E4E7EB',
|
||||
border: '1px solid transparent',
|
||||
backgroundClip: 'content-box',
|
||||
},
|
||||
'&::-webkit-scrollbar-thumb:hover': {
|
||||
background: '#E4E7EB !important',
|
||||
border: '1px solid transparent !important',
|
||||
backgroundClip: 'content-box !important',
|
||||
},
|
||||
'&:hover': {
|
||||
'&::-webkit-scrollbar-thumb': {
|
||||
background: '#E4E7EB !important',
|
||||
border: '1px solid transparent !important',
|
||||
backgroundClip: 'content-box !important',
|
||||
},
|
||||
},
|
||||
}),
|
||||
group: (base) => ({
|
||||
...base,
|
||||
padding: 0,
|
||||
}),
|
||||
groupHeading: (base) => ({
|
||||
...base,
|
||||
margin: 0,
|
||||
padding: '0',
|
||||
}),
|
||||
};
|
||||
|
||||
const actionLookup = Object.fromEntries(ActionTypes.map((actionType) => [actionType.id, actionType]));
|
||||
|
||||
let alertTypes = [
|
||||
|
|
@ -394,6 +451,29 @@ export const EventManager = ({
|
|||
return defaultValue;
|
||||
};
|
||||
|
||||
const formatGroupLabel = (data) => {
|
||||
if (data.label === 'run-action') return;
|
||||
return (
|
||||
<div
|
||||
className="tw-border-x-0 tw-border-t-0 tw-border-b-[0.5px] tw-border-solid tw-my-[4px]"
|
||||
style={{ borderColor: 'var(--border-weak)' }}
|
||||
></div>
|
||||
);
|
||||
};
|
||||
|
||||
const CustomOption = (props) => {
|
||||
return (
|
||||
<selectComponents.Option {...props}>
|
||||
<div className="d-flex align-items-center">
|
||||
<div style={{ width: '16px', marginRight: '6px' }}>
|
||||
{props.isSelected && <SolidIcon name="tickv3" width="16px" height="16px" />}
|
||||
</div>
|
||||
<span>{props.label}</span>
|
||||
</div>
|
||||
</selectComponents.Option>
|
||||
);
|
||||
};
|
||||
|
||||
function eventPopover(event, index) {
|
||||
return (
|
||||
<Popover
|
||||
|
|
@ -433,13 +513,17 @@ export const EventManager = ({
|
|||
<Select
|
||||
className={`${darkMode ? 'select-search-dark' : 'select-search'} w-100`}
|
||||
options={actionOptions}
|
||||
value={event.actionId}
|
||||
value={actionOptions
|
||||
.flatMap((group) => group.options)
|
||||
.find((option) => option.value === event.actionId)}
|
||||
components={{ Option: CustomOption }}
|
||||
search={false}
|
||||
onChange={(value) => handlerChanged(index, 'actionId', value)}
|
||||
placeholder={t('globals.select', 'Select') + '...'}
|
||||
styles={styles}
|
||||
styles={actionStyles}
|
||||
useMenuPortal={false}
|
||||
useCustomStyles={true}
|
||||
formatGroupLabel={formatGroupLabel}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,62 +1,36 @@
|
|||
export const ActionTypes = [
|
||||
{
|
||||
name: 'Run query',
|
||||
id: 'run-query',
|
||||
options: [{ queryId: '' }],
|
||||
group: 'run-action',
|
||||
},
|
||||
{
|
||||
name: 'Show Alert',
|
||||
id: 'show-alert',
|
||||
options: [{ name: 'message', type: 'text', default: 'Message !' }],
|
||||
group: 'run-action',
|
||||
},
|
||||
{
|
||||
name: 'Logout',
|
||||
id: 'logout',
|
||||
},
|
||||
{
|
||||
name: 'Run Query',
|
||||
id: 'run-query',
|
||||
options: [{ queryId: '' }],
|
||||
},
|
||||
{
|
||||
name: 'Open Webpage',
|
||||
id: 'open-webpage',
|
||||
options: [{ name: 'url', type: 'text', default: 'https://example.com' }],
|
||||
},
|
||||
{
|
||||
name: 'Go to app',
|
||||
id: 'go-to-app',
|
||||
name: 'Control component',
|
||||
id: 'control-component',
|
||||
options: [
|
||||
{ name: 'app', type: 'text', default: '' },
|
||||
{ name: 'queryParams', type: 'code', default: '[]' },
|
||||
{ name: 'component', type: 'text', default: '' },
|
||||
{ name: 'action', type: 'text', default: '' },
|
||||
],
|
||||
group: 'control-component',
|
||||
},
|
||||
{
|
||||
name: 'Show Modal',
|
||||
name: 'Show modal',
|
||||
id: 'show-modal',
|
||||
options: [{ name: 'modal', type: 'text', default: '' }],
|
||||
group: 'control-component',
|
||||
},
|
||||
{
|
||||
name: 'Close Modal',
|
||||
name: 'Close modal',
|
||||
id: 'close-modal',
|
||||
options: [{ name: 'modal', type: 'text', default: '' }],
|
||||
},
|
||||
{
|
||||
name: 'Copy to clipboard',
|
||||
id: 'copy-to-clipboard',
|
||||
options: [{ name: 'copy-to-clipboard', type: 'text', default: '' }],
|
||||
},
|
||||
{
|
||||
name: 'Set local storage',
|
||||
id: 'set-localstorage-value',
|
||||
options: [
|
||||
{ name: 'key', type: 'code', default: '' },
|
||||
{ name: 'value', type: 'code', default: '' },
|
||||
],
|
||||
},
|
||||
{
|
||||
name: 'Generate file',
|
||||
id: 'generate-file',
|
||||
options: [
|
||||
{ name: 'fileType', type: 'text', default: '' },
|
||||
{ name: 'fileName', type: 'text', default: '' },
|
||||
{ name: 'data', type: 'code', default: '{{[]}}' },
|
||||
],
|
||||
group: 'control-component',
|
||||
},
|
||||
{
|
||||
name: 'Set table page',
|
||||
|
|
@ -69,28 +43,28 @@ export const ActionTypes = [
|
|||
},
|
||||
{ name: 'pageIndex', type: 'text', default: '{{1}}' },
|
||||
],
|
||||
},
|
||||
{
|
||||
name: 'Set variable',
|
||||
id: 'set-custom-variable',
|
||||
options: [
|
||||
{ name: 'key', type: 'code', default: '' },
|
||||
{ name: 'value', type: 'code', default: '' },
|
||||
],
|
||||
},
|
||||
{
|
||||
name: 'Unset all variables',
|
||||
id: 'unset-all-custom-variables',
|
||||
},
|
||||
{
|
||||
name: 'Unset variable',
|
||||
id: 'unset-custom-variable',
|
||||
options: [{ name: 'key', type: 'code', default: '' }],
|
||||
group: 'control-component',
|
||||
},
|
||||
{
|
||||
name: 'Switch page',
|
||||
id: 'switch-page',
|
||||
options: [{ name: 'page', type: 'text', default: '' }],
|
||||
group: 'navigation',
|
||||
},
|
||||
{
|
||||
name: 'Go to app',
|
||||
id: 'go-to-app',
|
||||
options: [
|
||||
{ name: 'app', type: 'text', default: '' },
|
||||
{ name: 'queryParams', type: 'code', default: '[]' },
|
||||
],
|
||||
group: 'navigation',
|
||||
},
|
||||
{
|
||||
name: 'Open webpage',
|
||||
id: 'open-webpage',
|
||||
options: [{ name: 'url', type: 'text', default: 'https://example.com' }],
|
||||
group: 'navigation',
|
||||
},
|
||||
{
|
||||
name: 'Set page variable',
|
||||
|
|
@ -99,10 +73,7 @@ export const ActionTypes = [
|
|||
{ name: 'key', type: 'code', default: '' },
|
||||
{ name: 'value', type: 'code', default: '' },
|
||||
],
|
||||
},
|
||||
{
|
||||
name: 'Unset all page variables',
|
||||
id: 'unset-all-page-variables',
|
||||
group: 'variable',
|
||||
},
|
||||
{
|
||||
name: 'Unset page variable',
|
||||
|
|
@ -111,14 +82,61 @@ export const ActionTypes = [
|
|||
{ name: 'key', type: 'code', default: '' },
|
||||
{ name: 'value', type: 'code', default: '' },
|
||||
],
|
||||
group: 'variable',
|
||||
},
|
||||
|
||||
{
|
||||
name: 'Control component',
|
||||
id: 'control-component',
|
||||
name: 'Unset all page variables',
|
||||
id: 'unset-all-page-variables',
|
||||
group: 'variable',
|
||||
},
|
||||
{
|
||||
name: 'Set variable',
|
||||
id: 'set-custom-variable',
|
||||
options: [
|
||||
{ name: 'component', type: 'text', default: '' },
|
||||
{ name: 'action', type: 'text', default: '' },
|
||||
{ name: 'key', type: 'code', default: '' },
|
||||
{ name: 'value', type: 'code', default: '' },
|
||||
],
|
||||
group: 'variable',
|
||||
},
|
||||
{
|
||||
name: 'Unset variable',
|
||||
id: 'unset-custom-variable',
|
||||
options: [{ name: 'key', type: 'code', default: '' }],
|
||||
group: 'variable',
|
||||
},
|
||||
{
|
||||
name: 'Unset all variables',
|
||||
id: 'unset-all-custom-variables',
|
||||
group: 'variable',
|
||||
},
|
||||
{
|
||||
name: 'Logout',
|
||||
id: 'logout',
|
||||
group: 'other',
|
||||
},
|
||||
{
|
||||
name: 'Generate file',
|
||||
id: 'generate-file',
|
||||
options: [
|
||||
{ name: 'fileType', type: 'text', default: '' },
|
||||
{ name: 'fileName', type: 'text', default: '' },
|
||||
{ name: 'data', type: 'code', default: '{{[]}}' },
|
||||
],
|
||||
group: 'other',
|
||||
},
|
||||
{
|
||||
name: 'Set local storage',
|
||||
id: 'set-localstorage-value',
|
||||
options: [
|
||||
{ name: 'key', type: 'code', default: '' },
|
||||
{ name: 'value', type: 'code', default: '' },
|
||||
],
|
||||
group: 'other',
|
||||
},
|
||||
{
|
||||
name: 'Copy to clipboard',
|
||||
id: 'copy-to-clipboard',
|
||||
options: [{ name: 'copy-to-clipboard', type: 'text', default: '' }],
|
||||
group: 'other',
|
||||
},
|
||||
];
|
||||
|
|
|
|||
Loading…
Reference in a new issue