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

Removed icon logic and grouped the actions

Browse source
This commit is contained in:
devanshu052000 2025-05-09 17:18:43 +05:30
parent ca218bd480
commit 7113e51445
2 changed files with 55 additions and 29 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

46
frontend/src/AppBuilder/RightSideBar/Inspector/EventManager.jsx
View file

@ -32,7 +32,6 @@ 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';
export const EventManager = ({
sourceId,
@ -102,8 +101,23 @@ export const EventManager = ({
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [JSON.stringify(currentEvents)]);
let actionOptions = ActionTypes.map((action) => {
return { label: action.name, value: action.id, icon: action.icon };
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');
@ -123,6 +137,15 @@ export const EventManager = ({
menuList: (base) => ({
...base,
}),
group: (base) => ({
...base,
padding: 0,
}),
groupHeading: (base) => ({
...base,
margin: 0,
padding: '0 10px',
}),
};
const actionLookup = Object.fromEntries(ActionTypes.map((actionType) => [actionType.id, actionType]));
@ -395,12 +418,15 @@ export const EventManager = ({
return defaultValue;
};
const renderActionOption = (option) => (
<div className="d-flex align-items-center justify-content-start tw-gap-[8px]">
<SolidIcon name={option.icon} width="16px" height="16px" />
<span>{option.label}</span>
</div>
);
const formatGroupLabel = (data) => {
if (data.label === 'run-action') return;
return (
<div
className="tw-border-x-0 tw-border-t-0 tw-border-b-px tw-border-solid tw-my-[4px]"
style={{ borderColor: 'var(--border-weak)' }}
></div>
);
};
function eventPopover(event, index) {
return (
@ -448,7 +474,7 @@ export const EventManager = ({
styles={styles}
useMenuPortal={false}
useCustomStyles={true}
customOption={renderActionOption}
formatGroupLabel={formatGroupLabel}
/>
</div>
</div>

38
frontend/src/Editor/ActionTypes.js
View file

@ -3,13 +3,13 @@ export const ActionTypes = [
name: 'Run query',
id: 'run-query',
options: [{ queryId: '' }],
icon: '',
group: 'run-action',
},
{
name: 'Show Alert',
id: 'show-alert',
options: [{ name: 'message', type: 'text', default: 'Message !' }],
icon: '',
group: 'run-action',
},
{
name: 'Control component',
@ -18,19 +18,19 @@ export const ActionTypes = [
{ name: 'component', type: 'text', default: '' },
{ name: 'action', type: 'text', default: '' },
],
icon: '',
group: 'control-component',
},
{
name: 'Show modal',
id: 'show-modal',
options: [{ name: 'modal', type: 'text', default: '' }],
icon: '',
group: 'control-component',
},
{
name: 'Close modal',
id: 'close-modal',
options: [{ name: 'modal', type: 'text', default: '' }],
icon: '',
group: 'control-component',
},
{
name: 'Set table page',
@ -43,13 +43,13 @@ export const ActionTypes = [
},
{ name: 'pageIndex', type: 'text', default: '{{1}}' },
],
icon: '',
group: 'control-component',
},
{
name: 'Switch page',
id: 'switch-page',
options: [{ name: 'page', type: 'text', default: '' }],
icon: '',
group: 'navigation',
},
{
name: 'Go to app',
@ -58,13 +58,13 @@ export const ActionTypes = [
{ name: 'app', type: 'text', default: '' },
{ name: 'queryParams', type: 'code', default: '[]' },
],
icon: '',
group: 'navigation',
},
{
name: 'Open webpage',
id: 'open-webpage',
options: [{ name: 'url', type: 'text', default: 'https://example.com' }],
icon: '',
group: 'navigation',
},
{
name: 'Set page variable',
@ -73,7 +73,7 @@ export const ActionTypes = [
{ name: 'key', type: 'code', default: '' },
{ name: 'value', type: 'code', default: '' },
],
icon: '',
group: 'variable',
},
{
name: 'Unset page variable',
@ -82,12 +82,12 @@ export const ActionTypes = [
{ name: 'key', type: 'code', default: '' },
{ name: 'value', type: 'code', default: '' },
],
icon: '',
group: 'variable',
},
{
name: 'Unset all page variables',
id: 'unset-all-page-variables',
icon: '',
group: 'variable',
},
{
name: 'Set variable',
@ -96,23 +96,23 @@ export const ActionTypes = [
{ name: 'key', type: 'code', default: '' },
{ name: 'value', type: 'code', default: '' },
],
icon: '',
group: 'variable',
},
{
name: 'Unset variable',
id: 'unset-custom-variable',
options: [{ name: 'key', type: 'code', default: '' }],
icon: '',
group: 'variable',
},
{
name: 'Unset all variables',
id: 'unset-all-custom-variables',
icon: '',
group: 'variable',
},
{
name: 'Logout',
id: 'logout',
icon: '',
group: 'other',
},
{
name: 'Generate file',
@ -122,7 +122,7 @@ export const ActionTypes = [
{ name: 'fileName', type: 'text', default: '' },
{ name: 'data', type: 'code', default: '{{[]}}' },
],
icon: '',
group: 'other',
},
{
name: 'Set local storage',
@ -131,12 +131,12 @@ export const ActionTypes = [
{ name: 'key', type: 'code', default: '' },
{ name: 'value', type: 'code', default: '' },
],
icon: '',
group: 'other',
},
{
name: 'Copy to clipboard',
id: 'copy-to-clipboard',
options: [{ name: 'copy-to-clipboard', type: 'text', default: '' }],
icon: '',
group: 'other',
},
];