Query selector element for inspector

frontend/src/Editor/Inspector/Components/Table.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { renderElement, renderEvent } from '../Utils';
+import { renderElement, renderEvent, renderQuerySelector } from '../Utils';
 import { computeActionName } from '@/_helpers/utils';
 import SortableList, { SortableItem } from 'react-easy-sort';
 import arrayMove from 'array-move';
@@ -384,6 +384,8 @@ class Table extends React.Component {
           {renderEvent(component, eventUpdated, dataQueries, eventOptionUpdated, 'onRowClicked', componentMeta.events.onRowClicked)}
           {renderEvent(component, eventUpdated, dataQueries, eventOptionUpdated, 'onPageChanged', componentMeta.events.onPageChanged)}
 
+          {renderQuerySelector(component, dataQueries, eventOptionUpdated, 'onBulkUpdate', componentMeta.events.onBulkUpdate)}
+
           <div className="field mb-2 mt-2">
             <label className="form-label mt-2">Bulk update query</label>
 

frontend/src/Editor/Inspector/QuerySelector.jsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import SelectSearch, { fuzzySearch } from 'react-select-search';
+
+export const QuerySelector = ({
+  param,
+  definition,
+  eventOptionUpdated,
+  dataQueries,
+  extraData,
+  eventMeta
+}) => {
+  
+  function onChange(value) {
+    const query = dataQueries.find((dataquery) => dataquery.id === value);
+    eventOptionUpdated(param, 'queryId', query.id, extraData);
+    eventOptionUpdated(param, 'queryName', query.name, extraData);
+  }
+
+  if (definition === undefined) {
+    definition = {};
+  }
+
+  if (definition.options === undefined) {
+    definition.options = {};
+  }
+
+  return (
+    <div className="field mb-2 mt-1">
+      <label className="form-label mt-2">{eventMeta.displayName}</label>
+      <SelectSearch
+        options={dataQueries.map((query) => {
+          return { name: query.name, value: query.id };
+        })}
+        value={definition.options.queryId}
+        search={true}
+        onChange={(value) => {
+          onChange(value);
+        }}
+        filterOptions={fuzzySearch}
+        placeholder="Select.."
+      />
+    </div>
+  );
+};

frontend/src/Editor/Inspector/Utils.js

@@ -6,6 +6,7 @@ import { Code } from './Elements/Code';
 import { Toggle } from './Elements/Toggle';
 import { TypeMapping } from './TypeMapping';
 import { EventSelector } from './EventSelector';
+import { QuerySelector } from './QuerySelector';
 
 const AllElements = {
   Color,
@@ -15,6 +16,19 @@ const AllElements = {
   Toggle
 };
 
+export function renderQuerySelector(component, dataQueries, eventOptionUpdated, eventName, eventMeta) {
+  let definition = component.component.definition.events[eventName];
+  definition = definition || { };
+
+  return (<QuerySelector
+    param={{ name: eventName }}
+    definition={definition}
+    eventMeta={eventMeta}
+    dataQueries={dataQueries}
+    eventOptionUpdated={eventOptionUpdated}
+  />)
+}
+
 export function renderElement(component, componentMeta, paramUpdated, dataQueries, param, paramType, currentState, components = {}) {
   const definition = component.component.definition[paramType][param];
   const meta = componentMeta[paramType][param];