From 0ecfa46cc83113766f39ed77362571706537fc0c Mon Sep 17 00:00:00 2001 From: devanshu052000 Date: Tue, 6 May 2025 21:15:28 +0530 Subject: [PATCH 1/4] Reordered all the actions --- frontend/src/Editor/ActionTypes.js | 154 ++++++++++++++++------------- 1 file changed, 86 insertions(+), 68 deletions(-) diff --git a/frontend/src/Editor/ActionTypes.js b/frontend/src/Editor/ActionTypes.js index 0bad71b3ac..067622ccb0 100644 --- a/frontend/src/Editor/ActionTypes.js +++ b/frontend/src/Editor/ActionTypes.js @@ -1,62 +1,36 @@ export const ActionTypes = [ + { + name: 'Run query', + id: 'run-query', + options: [{ queryId: '' }], + icon: '', + }, { name: 'Show Alert', id: 'show-alert', options: [{ name: 'message', type: 'text', default: 'Message !' }], + icon: '', }, { - 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: '' }, ], + icon: '', }, { - name: 'Show Modal', + name: 'Show modal', id: 'show-modal', options: [{ name: 'modal', type: 'text', default: '' }], + icon: '', }, { - 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: '{{[]}}' }, - ], + icon: '', }, { 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: '' }], + icon: '', }, { name: 'Switch page', id: 'switch-page', options: [{ name: 'page', type: 'text', default: '' }], + icon: '', + }, + { + name: 'Go to app', + id: 'go-to-app', + options: [ + { name: 'app', type: 'text', default: '' }, + { name: 'queryParams', type: 'code', default: '[]' }, + ], + icon: '', + }, + { + name: 'Open webpage', + id: 'open-webpage', + options: [{ name: 'url', type: 'text', default: 'https://example.com' }], + icon: '', }, { 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', + icon: '', }, { name: 'Unset page variable', @@ -111,14 +82,61 @@ export const ActionTypes = [ { name: 'key', type: 'code', default: '' }, { name: 'value', type: 'code', default: '' }, ], + icon: '', }, - { - name: 'Control component', - id: 'control-component', + name: 'Unset all page variables', + id: 'unset-all-page-variables', + icon: '', + }, + { + 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: '' }, ], + icon: '', + }, + { + name: 'Unset variable', + id: 'unset-custom-variable', + options: [{ name: 'key', type: 'code', default: '' }], + icon: '', + }, + { + name: 'Unset all variables', + id: 'unset-all-custom-variables', + icon: '', + }, + { + name: 'Logout', + id: 'logout', + icon: '', + }, + { + name: 'Generate file', + id: 'generate-file', + options: [ + { name: 'fileType', type: 'text', default: '' }, + { name: 'fileName', type: 'text', default: '' }, + { name: 'data', type: 'code', default: '{{[]}}' }, + ], + icon: '', + }, + { + name: 'Set local storage', + id: 'set-localstorage-value', + options: [ + { name: 'key', type: 'code', default: '' }, + { name: 'value', type: 'code', default: '' }, + ], + icon: '', + }, + { + name: 'Copy to clipboard', + id: 'copy-to-clipboard', + options: [{ name: 'copy-to-clipboard', type: 'text', default: '' }], + icon: '', }, ]; From ca218bd4805307c34d80d5810942bd5c40c7d676 Mon Sep 17 00:00:00 2001 From: devanshu052000 Date: Tue, 6 May 2025 22:07:33 +0530 Subject: [PATCH 2/4] Add logic for rendering icons in actions dropdown --- .../RightSideBar/Inspector/EventManager.jsx | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) diff --git a/frontend/src/AppBuilder/RightSideBar/Inspector/EventManager.jsx b/frontend/src/AppBuilder/RightSideBar/Inspector/EventManager.jsx index 6c8398724d..3cb63ca58b 100644 --- a/frontend/src/AppBuilder/RightSideBar/Inspector/EventManager.jsx +++ b/frontend/src/AppBuilder/RightSideBar/Inspector/EventManager.jsx @@ -32,6 +32,7 @@ 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,7 +103,7 @@ export const EventManager = ({ }, [JSON.stringify(currentEvents)]); let actionOptions = ActionTypes.map((action) => { - return { name: action.name, value: action.id }; + return { label: action.name, value: action.id, icon: action.icon }; }); let checkIfClicksAreInsideOf = document.querySelector('.cm-completionListIncompleteBottom'); @@ -394,6 +395,13 @@ export const EventManager = ({ return defaultValue; }; + const renderActionOption = (option) => ( +
+ + {option.label} +
+ ); + function eventPopover(event, index) { return ( From 7113e51445066b145619e289ca6ca4d19196f1cb Mon Sep 17 00:00:00 2001 From: devanshu052000 Date: Fri, 9 May 2025 17:18:43 +0530 Subject: [PATCH 3/4] Removed icon logic and grouped the actions --- .../RightSideBar/Inspector/EventManager.jsx | 46 +++++++++++++++---- frontend/src/Editor/ActionTypes.js | 38 +++++++-------- 2 files changed, 55 insertions(+), 29 deletions(-) diff --git a/frontend/src/AppBuilder/RightSideBar/Inspector/EventManager.jsx b/frontend/src/AppBuilder/RightSideBar/Inspector/EventManager.jsx index 3cb63ca58b..1b59da6844 100644 --- a/frontend/src/AppBuilder/RightSideBar/Inspector/EventManager.jsx +++ b/frontend/src/AppBuilder/RightSideBar/Inspector/EventManager.jsx @@ -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) => ( -
- - {option.label} -
- ); + const formatGroupLabel = (data) => { + if (data.label === 'run-action') return; + return ( +
+ ); + }; function eventPopover(event, index) { return ( @@ -448,7 +474,7 @@ export const EventManager = ({ styles={styles} useMenuPortal={false} useCustomStyles={true} - customOption={renderActionOption} + formatGroupLabel={formatGroupLabel} /> diff --git a/frontend/src/Editor/ActionTypes.js b/frontend/src/Editor/ActionTypes.js index 067622ccb0..e3fb69f95d 100644 --- a/frontend/src/Editor/ActionTypes.js +++ b/frontend/src/Editor/ActionTypes.js @@ -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', }, ]; From f06f7c4847d56ff8829b77df6acfa208a48910f7 Mon Sep 17 00:00:00 2001 From: devanshu052000 Date: Tue, 13 May 2025 16:12:19 +0530 Subject: [PATCH 4/4] Changes after design review --- .../RightSideBar/Inspector/EventManager.jsx | 57 +++++++++++++++++-- 1 file changed, 53 insertions(+), 4 deletions(-) diff --git a/frontend/src/AppBuilder/RightSideBar/Inspector/EventManager.jsx b/frontend/src/AppBuilder/RightSideBar/Inspector/EventManager.jsx index 1b59da6844..1de3e5f9dc 100644 --- a/frontend/src/AppBuilder/RightSideBar/Inspector/EventManager.jsx +++ b/frontend/src/AppBuilder/RightSideBar/Inspector/EventManager.jsx @@ -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, @@ -137,6 +139,37 @@ export const EventManager = ({ menuList: (base) => ({ ...base, }), + }; + + 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, @@ -144,7 +177,7 @@ export const EventManager = ({ groupHeading: (base) => ({ ...base, margin: 0, - padding: '0 10px', + padding: '0', }), }; @@ -422,12 +455,25 @@ export const EventManager = ({ if (data.label === 'run-action') return; return (
); }; + const CustomOption = (props) => { + return ( + +
+
+ {props.isSelected && } +
+ {props.label} +
+ + ); + }; + function eventPopover(event, index) { return ( 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}