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

fixes: adapts to new event manager ui

Browse source
This commit is contained in:
arpitnath 2023-09-15 19:53:42 +05:30
parent 70816587e7
commit 526212010c
1 changed files with 24 additions and 99 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

123
frontend/src/Editor/Inspector/EventManager.jsx
View file

@ -21,6 +21,9 @@ import RunjsParameters from './ActionConfigurationPanels/RunjsParamters';
import { useAppDataActions, useAppInfo } from '@/_stores/appDataStore';
import { isQueryRunnable } from '@/_helpers/utils';
import { shallow } from 'zustand/shallow';
import AddNewButton from '@/ToolJetUI/Buttons/AddNewButton/AddNewButton';
import NoListItem from './Components/Table/NoListItem';
import ManageEventButton from './ManageEventButton';
// eslint-disable-next-line import/no-unresolved
export const EventManager = ({
@ -818,7 +821,7 @@ export const EventManager = ({
</Popover>
);
}
//!Need to fix
const reorderEvents = (startIndex, endIndex) => {
const result = _.cloneDeep(events);
const [removed] = result.splice(startIndex, 1);
@ -889,92 +892,14 @@ export const EventManager = ({
if (typeof popOverCallback === 'function') popOverCallback(showing);
}}
>
<div
ref={provided.innerRef}
{...provided.draggableProps}
{...provided.dragHandleProps}
className="mb-1"
>
<div className="card column-sort-row border-0 bg-slate2">
<div className={rowClassName} data-cy="event-handler-card">
<div className="row p-2" role="button">
<div className="col-auto" style={{ cursor: 'grab' }}>
<svg
width="8"
height="14"
viewBox="0 0 8 14"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M0.666667 1.66667C0.666667 2.03486 0.965143 2.33333 1.33333 2.33333C1.70152 2.33333 2 2.03486 2 1.66667C2 1.29848 1.70152 1 1.33333 1C0.965143 1 0.666667 1.29848 0.666667 1.66667Z"
stroke="#8092AC"
strokeWidth="1.33333"
/>
<path
d="M5.99992 1.66667C5.99992 2.03486 6.2984 2.33333 6.66659 2.33333C7.03478 2.33333 7.33325 2.03486 7.33325 1.66667C7.33325 1.29848 7.03478 1 6.66659 1C6.2984 1 5.99992 1.29848 5.99992 1.66667Z"
stroke="#8092AC"
strokeWidth="1.33333"
/>
<path
d="M0.666667 7.00001C0.666667 7.3682 0.965143 7.66668 1.33333 7.66668C1.70152 7.66668 2 7.3682 2 7.00001C2 6.63182 1.70152 6.33334 1.33333 6.33334C0.965143 6.33334 0.666667 6.63182 0.666667 7.00001Z"
stroke="#8092AC"
strokeWidth="1.33333"
/>
<path
d="M5.99992 7.00001C5.99992 7.3682 6.2984 7.66668 6.66659 7.66668C7.03478 7.66668 7.33325 7.3682 7.33325 7.00001C7.33325 6.63182 7.03478 6.33334 6.66659 6.33334C6.2984 6.33334 5.99992 6.63182 5.99992 7.00001Z"
stroke="#8092AC"
strokeWidth="1.33333"
/>
<path
d="M0.666667 12.3333C0.666667 12.7015 0.965143 13 1.33333 13C1.70152 13 2 12.7015 2 12.3333C2 11.9651 1.70152 11.6667 1.33333 11.6667C0.965143 11.6667 0.666667 11.9651 0.666667 12.3333Z"
stroke="#8092AC"
strokeWidth="1.33333"
/>
<path
d="M5.99992 12.3333C5.99992 12.7015 6.2984 13 6.66659 13C7.03478 13 7.33325 12.7015 7.33325 12.3333C7.33325 11.9651 7.03478 11.6667 6.66659 11.6667C6.2984 11.6667 5.99992 11.9651 5.99992 12.3333Z"
stroke="#8092AC"
strokeWidth="1.33333"
/>
</svg>
</div>
<div className="col text-truncate" data-cy="event-handler">
{eventMetaDefinition?.events[event.event.eventId]?.displayName}
</div>
<div className="col text-truncate color-slate11" data-cy="event-name">
<small className="event-action font-weight-light text-truncate">
{actionMeta.name}
</small>
</div>
<div className="col-auto">
<span
className="text-danger"
onClick={(e) => {
e.stopPropagation();
removeHandler(index);
}}
data-cy="delete-button"
data-tooltip-id="event-delete-btn-icon"
data-tooltip-content="Delete"
>
<svg
width="10"
height="16"
viewBox="0 0 10 16"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M0 13.8333C0 14.75 0.75 15.5 1.66667 15.5H8.33333C9.25 15.5 10 14.75 10 13.8333V3.83333H0V13.8333ZM1.66667 5.5H8.33333V13.8333H1.66667V5.5ZM7.91667 1.33333L7.08333 0.5H2.91667L2.08333 1.33333H0V3H10V1.33333H7.91667Z"
fill="var(--slate8)"
/>
</svg>
</span>
<Tooltip id="event-delete-btn-icon" className="tooltip" />
</div>
</div>
</div>
</div>
<div>
<ManageEventButton
eventDisplayName={eventMetaDefinition?.events[event.event.eventId]?.displayName}
actionName={actionMeta.name}
removeHandler={removeHandler}
index={index}
darkMode={darkMode}
/>
</div>
</OverlayTrigger>
);
@ -992,21 +917,21 @@ export const EventManager = ({
const renderAddHandlerBtn = () => {
return (
<div className={`mb-3 ${events.length === 0 ? '' : 'mt-2'}`}>
<ButtonSolid
variant="ghostBlue"
size="sm"
onClick={addHandler}
data-cy={events.length === 0 ? 'add-event-handler' : 'add-more-event-handler'}
>
<AddRectangle width="15" fill="#3E63DD" opacity="1" secondaryFill="#ffffff" />
&nbsp;&nbsp;
{t('editor.inspector.eventManager.addHandler', 'Add handler')}
</ButtonSolid>
</div>
<AddNewButton onClick={addHandler} dataCy="add-event-handler" className="mt-0">
{t('editor.inspector.eventManager.addHandler', 'New event handler')}
</AddNewButton>
);
};
if (events.length === 0) {
return (
<>
{!hideEmptyEventsAlert && <NoListItem text={'No event handlers'} />}
{renderAddHandlerBtn()}
</>
);
}
const componentName = eventMetaDefinition?.name ? eventMetaDefinition.name : 'query';
if (events.length === 0) {