Merge branch 'main' into develop

.version

@@ -1 +1 @@
-0.13.2
+0.13.3

frontend/src/Editor/ActionTypes.js

@@ -54,4 +54,16 @@ export const ActionTypes = [
       { name: 'data', type: 'code', default: '{{[]}}' },
     ],
   },
+  {
+    name: 'Set table page',
+    id: 'set-table-page',
+    options: [
+      {
+        name: 'table',
+        type: 'text',
+        default: '',
+      },
+      { name: 'pageIndex', type: 'text', default: '{{1}}' },
+    ],
+  },
 ];

frontend/src/Editor/Box.jsx

@@ -174,6 +174,7 @@ export const Box = function Box({
               exposedVariables={exposedVariables}
               styles={resolvedStyles}
               setExposedVariable={(variable, value) => onComponentOptionChanged(component, variable, value, extraProps)}
+              registerAction={(actionName, func) => onComponentOptionChanged(component, actionName, func)}
               fireEvent={fireEvent}
               validate={validate}
               parentId={parentId}

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

@@ -8,8 +8,9 @@ export const Pagination = function Pagination({
   autoPageCount,
   autoPageOptions,
   lastActivePageIndex,
+  pageIndex,
+  setPageIndex,
 }) {
-  const [pageIndex, setPageIndex] = useState(lastActivePageIndex ?? 1);
   const [pageCount, setPageCount] = useState(autoPageCount);
 
   useEffect(() => {

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

@@ -39,6 +39,7 @@ export function Table({
   onComponentOptionsChanged,
   darkMode,
   fireEvent,
+  registerAction,
 }) {
   const color = component.definition.styles.textColor.value;
   const actions = component.definition.properties.actions || { value: [] };
@@ -758,6 +759,14 @@ export function Table({
     }
   );
 
+  useEffect(() => {
+    registerAction('setPage', (targetPageIndex) => {
+      setPaginationInternalPageIndex(targetPageIndex);
+      onPageIndexChanged(targetPageIndex);
+      if (!serverSidePagination && clientSidePagination) gotoPage(targetPageIndex - 1);
+    });
+  }, [serverSidePagination, clientSidePagination]);
+
   useEffect(() => {
     const selectedRowsOriginalData = selectedFlatRows.map((row) => row.original);
     onComponentOptionChanged(component, 'selectedRows', selectedRowsOriginalData);
@@ -790,6 +799,8 @@ export function Table({
     }
   }, [state.columnResizing.isResizingColumn]);
 
+  const [paginationInternalPageIndex, setPaginationInternalPageIndex] = useState(pageIndex ?? 1);
+
   useEffect(() => {
     if (pageCount <= pageIndex) gotoPage(pageCount - 1);
   }, [pageCount]);
@@ -936,6 +947,8 @@ export function Table({
                   autoPageCount={pageCount}
                   autoPageOptions={pageOptions}
                   onPageIndexChanged={onPageIndexChanged}
+                  pageIndex={paginationInternalPageIndex}
+                  setPageIndex={setPaginationInternalPageIndex}
                 />
               )}
             </div>

frontend/src/Editor/Components/components.js

@@ -64,7 +64,7 @@ export const componentTypes = [
       selectedRow: {},
       changeSet: {},
       dataUpdates: [],
-      pageIndex: 0,
+      pageIndex: 1,
       searchText: '',
       selectedRows: [],
     },

frontend/src/Editor/Editor.jsx

@@ -55,6 +55,7 @@ class Editor extends React.Component {
         email: currentUser.email,
         firstName: currentUser.first_name,
         lastName: currentUser.last_name,
+        groups: currentUser?.group_permissions.map((group) => group.group),
       };
     }
 

frontend/src/Editor/Inspector/EventManager.jsx

@@ -59,18 +59,17 @@ export const EventManager = ({
       };
     });
 
-  function getModalOptions() {
-    let modalOptions = [];
+  function getComponentOptions(componentType) {
+    let componentOptions = [];
     Object.keys(components || {}).forEach((key) => {
-      if (components[key].component.component === 'Modal') {
-        modalOptions.push({
+      if (components[key].component.component === componentType) {
+        componentOptions.push({
           name: components[key].component.name,
-          value: key,
+          value: { name: components[key].component.name, id: key },
         });
       }
     });
-
-    return modalOptions;
+    return componentOptions;
   }
 
   function getAllApps() {
@@ -207,7 +206,7 @@ export const EventManager = ({
                 <div className="col-3 p-2">Modal</div>
                 <div className="col-9">
                   <SelectSearch
-                    options={getModalOptions()}
+                    options={getComponentOptions('Modal')}
                     value={event.model}
                     search={true}
                     onChange={(value) => {
@@ -225,7 +224,7 @@ export const EventManager = ({
                 <div className="col-3 p-2">Modal</div>
                 <div className="col-9">
                   <SelectSearch
-                    options={getModalOptions()}
+                    options={getComponentOptions('Modal')}
                     value={event.model}
                     search={true}
                     onChange={(value) => {
@@ -340,6 +339,37 @@ export const EventManager = ({
                 </div>
               </>
             )}
+            {event.actionId === 'set-table-page' && (
+              <>
+                <div className="row">
+                  <div className="col-3 p-2">Table</div>
+                  <div className="col-9">
+                    <SelectSearch
+                      options={getComponentOptions('Table')}
+                      value={event.table}
+                      search={true}
+                      onChange={(value) => {
+                        handlerChanged(index, 'table', value);
+                      }}
+                      filterOptions={fuzzySearch}
+                      placeholder="Select.."
+                    />
+                  </div>
+                </div>
+                <div className="row mt-3">
+                  <div className="col-3 p-2">Page index</div>
+                  <div className="col-9">
+                    <CodeHinter
+                      currentState={currentState}
+                      initialValue={event.pageIndex ?? '{{1}}'}
+                      onChange={(value) => handlerChanged(index, 'pageIndex', value)}
+                      enablePreview={true}
+                      usePortalEditor={false}
+                    />
+                  </div>
+                </div>
+              </>
+            )}
           </div>
         </Popover.Content>
       </Popover>

frontend/src/Editor/LeftSidebar/SidebarInspector.jsx

@@ -63,7 +63,7 @@ export const LeftSidebarInspector = ({ darkMode, globals, components, queries })
             collapsed={true}
             displayObjectSize={false}
             quotesOnKeys={false}
-            sortKeys={true}
+            sortKeys={false}
             // indentWidth={1}
           />
         </div>

frontend/src/Editor/Viewer.jsx

@@ -17,6 +17,7 @@ import {
 import queryString from 'query-string';
 import { DarkModeToggle } from '@/_components/DarkModeToggle';
 import LogoIcon from './Icons/logo.svg';
+import { DataSourceTypes } from './DataSourceManager/SourceComponents';
 
 class Viewer extends React.Component {
   constructor(props) {
@@ -72,6 +73,14 @@ class Viewer extends React.Component {
         ).length > 0;
     }
 
+    let queryState = {};
+    data.data_queries.forEach((query) => {
+      queryState[query.name] = {
+        ...DataSourceTypes.find((source) => source.kind === query.kind).exposedVariables,
+        ...this.state.currentState.queries[query.name],
+      };
+    });
+
     this.setState(
       {
         currentSidebarTab: 2,
@@ -84,7 +93,7 @@ class Viewer extends React.Component {
             : '1292px',
         selectedComponent: null,
         currentState: {
-          queries: {},
+          queries: queryState,
           components: {},
           globals: {
             current_user: userVars,

frontend/src/_helpers/appUtils.js

@@ -21,6 +21,17 @@ export function setStateAsync(_ref, state) {
   });
 }
 
+export function setCurrentStateAsync(_ref, changes) {
+  return new Promise((resolve) => {
+    _ref.setState((prevState) => {
+      return {
+        currentState: prevState.currentState,
+        ...changes,
+      };
+    }, resolve);
+  });
+}
+
 export function onComponentOptionsChanged(_ref, component, options) {
   const componentName = component.name;
   const components = _ref.state.currentState.components;
@@ -43,9 +54,7 @@ export function onComponentOptionChanged(_ref, component, option_name, value) {
   componentData = componentData || {};
   componentData[option_name] = value;
 
-  return setStateAsync(_ref, {
-    currentState: { ..._ref.state.currentState, components: { ...components, [componentName]: componentData } },
-  });
+  return setCurrentStateAsync(_ref, { components: { ...components, [componentName]: componentData } });
 }
 
 export function fetchOAuthToken(authUrl, dataSourceId) {
@@ -105,7 +114,8 @@ async function copyToClipboard(text) {
   }
 }
 
-function showModal(_ref, modalId, show) {
+function showModal(_ref, modal, show) {
+  const modalId = modal.id;
   if (_.isEmpty(modalId)) {
     console.log('No modal is associated with this event.');
     return Promise.resolve();
@@ -228,6 +238,10 @@ function executeAction(_ref, event, mode) {
         generateFile(fileName, csv);
         return Promise.resolve();
       }
+
+      case 'set-table-page': {
+        setTablePageIndex(_ref, event.table, event.pageIndex);
+      }
     }
   }
 }
@@ -671,6 +685,18 @@ export function runQuery(_ref, queryId, queryName, confirmed = undefined, mode)
   });
 }
 
+function setTablePageIndex(_ref, table, index) {
+  if (_.isEmpty(table.id)) {
+    console.log('No table is associated with this event.');
+    return Promise.resolve();
+  }
+
+  const tableMeta = _ref.state.currentState.components[table.name];
+  const newPageIndex = resolveReferences(index, _ref.state.currentState);
+  tableMeta.setPage(newPageIndex);
+  return Promise.resolve();
+}
+
 export function renderTooltip({ props, text }) {
   return (
     <Tooltip id="button-tooltip" {...props}>