- {t('editor.inspector.eventManager.message', 'Message')}
-
-
- {t('editor.inspector.eventManager.alertType', 'Alert Type')}
-
-
-
+
+
+ handlerChanged(index, 'alertType', value)}
- placeholder={t('globals.select', 'Select') + '...'}
- styles={styles}
- useMenuPortal={false}
- useCustomStyles={true}
- />
+ onValueChange={(value) => handlerChanged(index, 'alertType', value)}
+ >
+
+
+
+ {alertOptions.map((opt) => (
+
+ {opt.name}
+
+ ))}
+
+
-
+
)}
{event.actionId === 'open-webpage' && (
-
-
{t('editor.inspector.eventManager.url', 'URL')}
-
handlerChanged(index, 'url', value)}
- usePortalEditor={false}
- component={component}
- />
-
- Open in
- handlerChanged(index, 'windowTarget', _value)}
- defaultValue={event?.windowTarget || 'newTab'}
- style={{ width: '74%' }}
+ <>
+
+ handlerChanged(index, 'url', value)}
+ usePortalEditor={false}
+ component={component}
+ />
+
+
+ _value && handlerChanged(index, 'windowTarget', _value)}
+ className="tw-w-full"
>
- New tab
- Current tab
-
-
-
+
+ New tab
+
+
+ Current tab
+
+
+
+
)}
{event.actionId === 'go-to-app' && (
@@ -751,50 +711,67 @@ export const EventManager = ({
)}
{event.actionId === 'show-modal' && (
-
-
{t('editor.inspector.eventManager.modal', 'Modal')}
-
- {
- handlerChanged(index, 'modal', value);
- }}
- placeholder={t('globals.select', 'Select') + '...'}
- styles={styles}
- useMenuPortal={false}
- useCustomStyles={true}
- />
-
-
+
+ {(() => {
+ const modalOptions = [...getComponentOptions('Modal'), ...getComponentOptions('ModalV2')];
+ const selectedId = event.modal?.id ?? event.modal;
+ const selected = modalOptions.find((o) => o.value === selectedId) ?? null;
+ return (
+ item?.name ?? ''}
+ value={selected}
+ onValueChange={(item) => handlerChanged(index, 'modal', item?.value ?? null)}
+ >
+
+
+ {(item) => (
+
+ {item.name}
+
+ )}
+
+ {t('globals.noResultsFound', 'No results found.')}
+
+
+ );
+ })()}
+
)}
{event.actionId === 'close-modal' && (
-
-
{t('editor.inspector.eventManager.modal', 'Modal')}
-
- {
- handlerChanged(index, 'modal', value);
- }}
- placeholder={t('globals.select', 'Select') + '...'}
- styles={styles}
- useMenuPortal={false}
- useCustomStyles={true}
- />
-
-
+
+ {(() => {
+ const modalOptions = [...getComponentOptions('Modal'), ...getComponentOptions('ModalV2')];
+ const selectedId = event.modal?.id ?? event.modal;
+ const selected = modalOptions.find((o) => o.value === selectedId) ?? null;
+ return (
+ item?.name ?? ''}
+ value={selected}
+ onValueChange={(item) => handlerChanged(index, 'modal', item?.value ?? null)}
+ >
+
+
+ {(item) => (
+
+ {item.name}
+
+ )}
+
+ {t('globals.noResultsFound', 'No results found.')}
+
+
+ );
+ })()}
+
)}
{event.actionId === 'copy-to-clipboard' && (
-
- {t('editor.inspector.eventManager.text', 'Text')}
+
+
)}
{['run-query', 'reset-query'].includes(event.actionId) && (
<>
-
-
{t('editor.inspector.eventManager.query', 'Query')}
-
- {
- const query = dataQueries.find((dataquery) => dataquery.id === value);
-
- // If it is a module editor and the query is not found in the data queries, then it is a module input dummy query
- if (isModuleEditor && query === undefined) {
- handleQueryChange(index, {
- queryId: value,
- queryName: moduleInputDummyQueries[value],
- parameters: {},
- });
- } else {
- const parameters = (query?.options?.parameters ?? []).reduce(
- (paramObj, param) => ({
- ...paramObj,
- [param.name]: param.defaultValue,
- }),
- {}
- );
-
- handleQueryChange(index, {
- queryId: query.id,
- queryName: query.name,
- parameters: parameters,
- });
- }
- }}
- placeholder={t('globals.select', 'Select') + '...'}
- styles={styles}
- useMenuPortal={false}
- useCustomStyles={true}
- />
-
-
+
+ {(() => {
+ const queryOptions = constructDataQueryOptions();
+ const selected = queryOptions.find((o) => o.value === event?.queryId) ?? null;
+ return (
+
+ item?.name ?? ''}
+ value={selected}
+ onValueChange={(item) => {
+ const value = item?.value;
+ if (value == null) return;
+ const query = dataQueries.find((dataquery) => dataquery.id === value);
+ if (isModuleEditor && query === undefined) {
+ handleQueryChange(index, {
+ queryId: value,
+ queryName: moduleInputDummyQueries[value],
+ parameters: {},
+ });
+ } else {
+ const parameters = (query?.options?.parameters ?? []).reduce(
+ (paramObj, param) => ({
+ ...paramObj,
+ [param.name]: param.defaultValue,
+ }),
+ {}
+ );
+ handleQueryChange(index, {
+ queryId: query.id,
+ queryName: query.name,
+ parameters: parameters,
+ });
+ }
+ }}
+ >
+
+
+ {(item) => (
+
+ {item.name}
+
+ )}
+
+ {t('globals.noResultsFound', 'No results found.')}
+
+
+
+ );
+ })()}
+
{event.actionId === 'run-query' && (
)}
@@ -856,201 +844,180 @@ export const EventManager = ({
{event.actionId === 'set-localstorage-value' && (
<>
-
-
{t('editor.inspector.eventManager.key', 'Key')}
-
- handlerChanged(index, 'key', value)}
- usePortalEditor={false}
- component={component}
- />
-
-
-
-
{t('editor.inspector.eventManager.value', 'Value')}
-
- handlerChanged(index, 'value', value)}
- usePortalEditor={false}
- component={component}
- />
-
-
+
+ handlerChanged(index, 'key', value)}
+ usePortalEditor={false}
+ component={component}
+ />
+
+
+ handlerChanged(index, 'value', value)}
+ usePortalEditor={false}
+ component={component}
+ />
+
)}
{event.actionId === 'generate-file' && (
<>
-
-
{t('editor.inspector.eventManager.type', 'Type')}
-
- {
- handlerChanged(index, 'fileType', value);
- }}
- placeholder={t('globals.select', 'Select') + '...'}
- styles={styles}
- useMenuPortal={false}
- useCustomStyles={true}
- />
-
-
-
-
{t('editor.inspector.eventManager.fileName', 'File name')}
-
- handlerChanged(index, 'fileName', value)}
- component={component}
- />
-
-
-
-
{t('editor.inspector.eventManager.data', 'Data')}
-
- handlerChanged(index, 'data', value)}
- component={component}
- />
-
-
+
+ {(() => {
+ const typeOptions = [
+ { name: 'CSV', value: 'csv' },
+ { name: 'Text', value: 'plaintext' },
+ { name: 'PDF', value: 'pdf' },
+ ];
+ const selected = typeOptions.find((o) => o.value === (event.fileType ?? 'csv')) ?? null;
+ return (
+ item?.name ?? ''}
+ value={selected}
+ onValueChange={(item) => handlerChanged(index, 'fileType', item?.value ?? null)}
+ >
+
+
+ {(item) => (
+
+ {item.name}
+
+ )}
+
+ {t('globals.noResultsFound', 'No results found.')}
+
+
+ );
+ })()}
+
+
+ handlerChanged(index, 'fileName', value)}
+ component={component}
+ />
+
+
+ handlerChanged(index, 'data', value)}
+ component={component}
+ />
+
)}
{event.actionId === 'set-table-page' && (
<>
-
-
{t('editor.inspector.eventManager.table', 'Table')}
-
- {
- handlerChanged(index, 'table', value);
- }}
- placeholder={t('globals.select', 'Select') + '...'}
- styles={styles}
- useMenuPortal={false}
- useCustomStyles={true}
- />
-
-
-
-
{t('editor.inspector.eventManager.pageIndex', 'Page index')}
-
- handlerChanged(index, 'pageIndex', value)}
- usePortalEditor={false}
- component={component}
- />
-
-
+
+ {(() => {
+ const tableOptions = getComponentOptions('Table');
+ const selected = tableOptions.find((o) => o.value === event.table) ?? null;
+ return (
+ item?.name ?? ''}
+ value={selected}
+ onValueChange={(item) => handlerChanged(index, 'table', item?.value ?? null)}
+ >
+
+
+ {(item) => (
+
+ {item.name}
+
+ )}
+
+ {t('globals.noResultsFound', 'No results found.')}
+
+
+ );
+ })()}
+
+
+ handlerChanged(index, 'pageIndex', value)}
+ usePortalEditor={false}
+ component={component}
+ />
+
)}
{event.actionId === 'set-custom-variable' && (
<>
-
-
{t('editor.inspector.eventManager.key', 'Key')}
-
- handlerChanged(index, 'key', value)}
- enablePreview={true}
- cyLabel={`event-key`}
- component={component}
- />
-
-
-
-
{t('editor.inspector.eventManager.value', 'Value')}
-
- handlerChanged(index, 'value', value)}
- cyLabel={`variable`}
- component={component}
- />
-
-
+
+ handlerChanged(index, 'key', value)}
+ enablePreview={true}
+ cyLabel={`event-key`}
+ component={component}
+ />
+
+
+ handlerChanged(index, 'value', value)}
+ cyLabel={`variable`}
+ component={component}
+ />
+
)}
{event.actionId === 'unset-custom-variable' && (
- <>
-
-
{t('editor.inspector.eventManager.key', 'Key')}
-
- handlerChanged(index, 'key', value)}
- component={component}
- />
-
-
-
+
+ handlerChanged(index, 'key', value)}
+ component={component}
+ />
+
)}
{event.actionId === 'set-page-variable' && (
<>
-
-
{t('editor.inspector.eventManager.key', 'Key')}
-
- handlerChanged(index, 'key', value)}
- cyLabel={`key`}
- component={component}
- />
-
-
-
-
{t('editor.inspector.eventManager.value', 'Value')}
-
- handlerChanged(index, 'value', value)}
- cyLabel={`variable`}
- component={component}
- />
-
-
+
+ handlerChanged(index, 'key', value)}
+ cyLabel={`key`}
+ component={component}
+ />
+
+
+ handlerChanged(index, 'value', value)}
+ cyLabel={`variable`}
+ component={component}
+ />
+
)}
{event.actionId === 'unset-page-variable' && (
- <>
-
-
{t('editor.inspector.eventManager.key', 'Key')}
-
- handlerChanged(index, 'key', value)}
- cyLabel={`key`}
- component={component}
- />
-
-
-
+
+ handlerChanged(index, 'key', value)}
+ cyLabel={`key`}
+ component={component}
+ />
+
)}
{event.actionId === 'switch-page' && (
-
-
{t('editor.inspector.eventManager.component', 'Component')}
-
- {
- handlerChanged(index, 'componentId', value);
- }}
- placeholder={t('globals.select', 'Select') + '...'}
- styles={styles}
- useMenuPortal={false}
- useCustomStyles={true}
- />
-
-
-
Behaviour
-
-
+ {(() => {
+ const componentOptions = getComponentsOptionsWithoutModalChilds();
+ const selected = componentOptions.find((o) => o.value === event.componentId) ?? null;
+ return (
+ item?.name ?? ''}
+ value={selected}
+ onValueChange={(item) => handlerChanged(index, 'componentId', item?.value ?? null)}
+ >
+
+
+ {(item) => (
+
+ {item.name}
+
+ )}
+
+ {t('globals.noResultsFound', 'No results found.')}
+
+
+ );
+ })()}
+
+
+ handlerChanged(index, 'scrollBehavior', value)}
+ >
+
+
+
+ {[
{ name: 'Smooth', value: 'smooth' },
{ name: 'Instant', value: 'instant' },
{ name: 'Auto', value: 'auto' },
- ]}
- value={event.scrollBehavior ?? 'smooth'}
- search={false}
- onChange={(value) => handlerChanged(index, 'scrollBehavior', value)}
- placeholder={t('globals.select', 'Select') + '...'}
- styles={styles}
- useMenuPortal={false}
- useCustomStyles={true}
- />
-
-
-
Block
-
- (
+
+ {opt.name}
+
+ ))}
+
+
+
+
+ handlerChanged(index, 'scrollBlock', value)}
+ >
+
+
+
+ {[
{ name: 'Nearest', value: 'nearest' },
{ name: 'Start', value: 'start' },
{ name: 'Center', value: 'center' },
{ name: 'End', value: 'end' },
- ]}
- value={event.scrollBlock ?? 'nearest'}
- search={false}
- onChange={(value) => handlerChanged(index, 'scrollBlock', value)}
- placeholder={t('globals.select', 'Select') + '...'}
- styles={styles}
- useMenuPortal={false}
- useCustomStyles={true}
- />
-
-
+ {opt.name}
+
+ ))}
+
+
+
)}
{event.actionId === 'control-component' && (
<>
-
-
- {t('editor.inspector.eventManager.component', 'Component')}
-
-
- {
- handlerChanged(index, 'componentId', value);
- }}
- placeholder={t('globals.select', 'Select') + '...'}
- styles={styles}
- useMenuPortal={false}
- useCustomStyles={true}
- />
-
-
-
- {t('editor.inspector.eventManager.action', 'Action')}
-
-
- {
- handlerChanged(index, 'componentSpecificActionHandle', value);
- }}
- placeholder={t('globals.select', 'Select') + '...'}
- styles={styles}
- useMenuPortal={false}
- useCustomStyles={true}
- />
-
-
+ {(() => {
+ const componentOptions = getComponentOptionsOfComponentsWithActions();
+ const selected = componentOptions.find((o) => o.value === event?.componentId) ?? null;
+ return (
+
+ item?.name ?? ''}
+ value={selected}
+ onValueChange={(item) => handlerChanged(index, 'componentId', item?.value ?? null)}
+ >
+
+
+ {(item) => (
+
+ {item.name}
+
+ )}
+
+ {t('globals.noResultsFound', 'No results found.')}
+
+
+
+ );
+ })()}
+
+
+ {(() => {
+ const actionOpts = getComponentActionOptions(event?.componentId);
+ const selected = actionOpts.find((o) => o.value === event?.componentSpecificActionHandle) ?? null;
+ return (
+
+ item?.name ?? ''}
+ value={selected}
+ onValueChange={(item) =>
+ handlerChanged(index, 'componentSpecificActionHandle', item?.value ?? null)
+ }
+ >
+
+
+ {(item) => (
+
+ {item.name}
+
+ )}
+
+ {t('globals.noResultsFound', 'No results found.')}
+
+
+
+ );
+ })()}
+
{event?.componentId &&
event?.componentSpecificActionHandle &&
(getAction(event?.componentId, event?.componentSpecificActionHandle)?.params ?? []).map((param) => {
- let optionsList = param.isDynamicOpiton
+ const optionsList = param.isDynamicOpiton
? get({ ...components[event?.componentId] }, param.optionsGetter, []).map((tab) => ({
name: tab.title,
value: tab.id,
}))
: param.options;
+ const currentValue = valueForComponentSpecificActionHandle(event, param);
+
+ if (param.type === 'select') {
+ const selected = (optionsList ?? []).find((o) => o.value === currentValue) ?? null;
+ return (
+
+
+ item?.name ?? ''}
+ value={selected}
+ onValueChange={(item) =>
+ onChangeHandlerForComponentSpecificActionHandle(
+ item?.value ?? null,
+ index,
+ param,
+ event
+ )
+ }
+ >
+
+
+ {(item) => (
+
+ {item.name}
+
+ )}
+
+ {t('globals.noResultsFound', 'No results found.')}
+
+
+
+
+ );
+ }
return (
-
-
- {param?.displayName}
+
+
+ {
+ onChangeHandlerForComponentSpecificActionHandle(value, index, param, event);
+ }}
+ paramLabel={' '}
+ paramType={param?.type}
+ fieldMeta={{ options: param?.options }}
+ cyLabel={`event-${param.displayName}`}
+ component={component}
+ isEventManagerParam={true}
+ />
-
- {param.type === 'select' ? (
-
- {
- onChangeHandlerForComponentSpecificActionHandle(value, index, param, event);
- }}
- placeholder={t('globals.select', 'Select') + '...'}
- styles={styles}
- useMenuPortal={false}
- useCustomStyles={true}
- />
-
- ) : (
-
- {
- onChangeHandlerForComponentSpecificActionHandle(value, index, param, event);
- }}
- paramLabel={' '}
- paramType={param?.type}
- fieldMeta={{ options: param?.options }}
- cyLabel={`event-${param.displayName}`}
- component={component}
- isEventManagerParam={true}
- />
-
- )}
-
+
);
})}
)}
{event.actionId === 'toggle-app-mode' && (
<>
-
-
{t('editor.inspector.eventManager.appMode', 'App mode')}
-
- {
- handlerChanged(index, 'appMode', value);
- }}
- placeholder={t('globals.select', 'Select') + '...'}
- styles={styles}
- useMenuPortal={false}
- useCustomStyles={true}
- />
-
-
+
+ {(() => {
+ const appModeOptions = [
+ { name: 'Light', value: 'light' },
+ { name: 'Dark', value: 'dark' },
+ ];
+ const selected = appModeOptions.find((o) => o.value === event?.appMode) ?? null;
+ return (
+
+ item?.name ?? ''}
+ value={selected}
+ onValueChange={(item) => handlerChanged(index, 'appMode', item?.value ?? null)}
+ >
+
+
+ {(item) => (
+
+ {item.name}
+
+ )}
+
+ {t('globals.noResultsFound', 'No results found.')}
+
+
+
+ );
+ })()}
+
)}
-
-
{t('editor.inspector.eventManager.debounce', 'Debounce')}
-
- handlerChanged(index, 'debounce', value)}
- usePortalEditor={false}
- component={component}
- cyLabel={'debounce'}
- />
-
-
+
+ handlerChanged(index, 'debounce', value)}
+ usePortalEditor={false}
+ component={component}
+ cyLabel={'debounce'}
+ />
+
@@ -1408,7 +1433,10 @@ export const EventManager = ({
side={popoverPlacement || 'left'}
align="center"
sideOffset={8}
- className="inspector-event-manager-popover tw-z-[1042] tw-w-[300px] tw-max-w-[300px] tw-gap-0 tw-overflow-hidden tw-p-0"
+ className={cn(
+ 'inspector-event-manager-popover tw-z-[1042] tw-w-[300px] tw-max-w-[300px] tw-gap-0 tw-overflow-hidden tw-p-0',
+ darkMode && 'dark-theme'
+ )}
data-cy="popover-card"
onInteractOutside={(e) => {
const autocomplete = document.querySelector('.cm-completionListIncompleteBottom');
@@ -1442,7 +1470,7 @@ export const EventManager = ({
variant="outline"
size="default"
leadingVisual={
}
- className="tw-w-full tw-shadow-elevation-100"
+ className="tw-shadow-elevation-100 tw-mt-1"
data-cy="add-event-handler"
>
{t('editor.inspector.eventManager.addHandler', 'Add new event handler')}
@@ -1451,7 +1479,10 @@ export const EventManager = ({