Merge branch 'main' into develop

.version

@@ -1 +1 @@
-1.3.0
+1.4.2

frontend/src/Editor/Editor.jsx

@@ -885,7 +885,7 @@ class Editor extends React.Component {
   };
 
   handleOnComponentOptionsChanged = (component, options) => {
-    onComponentOptionsChanged(this, component, options);
+    return onComponentOptionsChanged(this, component, options);
   };
 
   handleComponentClick = (id, component) => {

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

@@ -2,7 +2,7 @@ import React from 'react';
 import Accordion from '@/_ui/Accordion';
 
 import { renderElement } from '../Utils';
-import { computeActionName } from '@/_helpers/utils';
+import { computeActionName, resolveReferences } from '@/_helpers/utils';
 // eslint-disable-next-line import/no-unresolved
 import SortableList, { SortableItem } from 'react-easy-sort';
 import arrayMove from 'array-move';
@@ -600,7 +600,9 @@ class Table extends React.Component {
     if (!component.component.definition.properties.displaySearchBox)
       paramUpdated({ name: 'displaySearchBox' }, 'value', true, 'properties');
     const displaySearchBox = component.component.definition.properties.displaySearchBox.value;
-    const serverSidePagination = component.component.definition.properties.serverSidePagination?.value ?? false;
+    const serverSidePagination = component.component.definition.properties.serverSidePagination?.value
+      ? resolveReferences(component.component.definition.properties.serverSidePagination?.value, currentState)
+      : false;
 
     const renderCustomElement = (param, paramType = 'properties') => {
       return renderElement(component, componentMeta, paramUpdated, dataQueries, param, paramType, currentState);
@@ -744,10 +746,11 @@ class Table extends React.Component {
 
     let renderOptions = [];
 
+    !serverSidePagination && options.splice(1, 0, 'clientSidePagination');
+
     options.map((option) => renderOptions.push(renderCustomElement(option)));
 
     const conditionalOptions = [
-      { name: 'clientSidePagination', condition: !serverSidePagination },
       { name: 'displaySearchBox', condition: displaySearchBox },
       { name: 'loadingState', condition: true },
     ];

frontend/src/Editor/SubContainer.jsx

@@ -36,11 +36,13 @@ export const SubContainer = ({
   onComponentHover,
   hoveredComponent,
 }) => {
-  const [_currentParentRef, setParentRef] = useState(parentRef);
+  const [_containerCanvasWidth, setContainerCanvasWidth] = useState(0);
 
   useEffect(() => {
-    setParentRef(parentRef);
-  }, [parentRef]);
+    const canvasWidth = parentRef?.current ? getContainerCanvasWidth() : 0;
+    setContainerCanvasWidth(canvasWidth);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [parentRef.current]);
 
   zoomLevel = zoomLevel || 1;
 
@@ -416,7 +418,7 @@ export const SubContainer = ({
           deviceWindowWidth={deviceWindowWidth}
           isSelectedComponent={selectedComponent ? selectedComponent.id === key : false}
           removeComponent={customRemoveComponent}
-          canvasWidth={getContainerCanvasWidth()}
+          canvasWidth={_containerCanvasWidth}
           readOnly={readOnly}
           darkMode={darkMode}
           customResolvables={customResolvables}

frontend/src/_helpers/appUtils.js

@@ -42,8 +42,8 @@ export function onComponentOptionsChanged(_ref, component, options) {
     componentData[option[0]] = option[1];
   }
 
-  return setStateAsync(_ref, {
-    currentState: { ..._ref.state.currentState, components: { ...components, [componentName]: componentData } },
+  return setCurrentStateAsync(_ref, {
+    components: { ...components, [componentName]: componentData },
   });
 }
 

plugins/packages/mssql/lib/index.ts

@@ -59,7 +59,10 @@ export default class MssqlQueryService implements QueryService {
         password: sourceOptions.password,
         database: sourceOptions.database,
         port: +sourceOptions.port,
-      },
+        options: {
+          encrypt: sourceOptions.azure ?? false
+        }
+      }
     };
 
     return knex(config);

plugins/packages/mssql/lib/manifest.json

@@ -45,6 +45,9 @@
     },
     "password": {
       "value": ""
+    },
+    "azure": {
+      "value": false
     }
   },
   "properties": {

plugins/packages/mssql/lib/types.ts

@@ -4,6 +4,7 @@ export type SourceOptions = {
   port: string;
   username: string;
   password: string;
+  azure: boolean;
 };
 export type QueryOptions = {
   operation: string;

server/.version

@@ -1 +1 @@
-1.2.1
+1.4.2

server/migrations/1639734070614-AddApplicationIconColumn.ts

@@ -0,0 +1,9 @@
+import { MigrationInterface, QueryRunner } from 'typeorm';
+
+export class AddApplicationIconColumn1639734070614 implements MigrationInterface {
+  public async up(queryRunner: QueryRunner): Promise<void> {
+    await queryRunner.query(`ALTER TABLE "apps" ADD COLUMN IF NOT EXISTS "icon" VARCHAR(255) DEFAULT NULL`);
+  }
+
+  public async down(queryRunner: QueryRunner): Promise<void> {}
+}

server/migrations/1639734070615-BackfillDataSourcesAndQueriesForAppVersions.ts

@@ -8,6 +8,7 @@ import { Organization } from 'src/entities/organization.entity';
 import { EntityManager, MigrationInterface, QueryRunner } from 'typeorm';
 import { AppModule } from 'src/app.module';
 import { Credential } from 'src/entities/credential.entity';
+import { cloneDeep } from 'lodash';
 
 export class BackfillDataSourcesAndQueriesForAppVersions1639734070615 implements MigrationInterface {
   public async up(queryRunner: QueryRunner): Promise<void> {
@@ -88,10 +89,8 @@ export class BackfillDataSourcesAndQueriesForAppVersions1639734070615 implements
   ) {
     if (restAppVersions.length == 0) return;
 
-    const oldDataSourceToNewMapping = {};
-    const newDataQueries = [];
-
     for (const appVersion of restAppVersions) {
+      const oldDataSourceToNewMapping = {};
       for (const dataSource of dataSources) {
         const convertedOptions = this.convertToArrayOfKeyValuePairs(dataSource.options);
         const newOptions = await dataSourcesService.parseOptionsForCreate(convertedOptions, entityManager);
@@ -110,21 +109,29 @@ export class BackfillDataSourcesAndQueriesForAppVersions1639734070615 implements
         oldDataSourceToNewMapping[dataSource.id] = newDataSource.id;
       }
 
+      const newDataQueries = [];
+      const dataQueryMapping = {};
       for (const dataQuery of dataQueries) {
         const dataQueryParams = {
           name: dataQuery.name,
           kind: dataQuery.kind,
-          options: dataQuery.options,
+          options: cloneDeep(dataQuery.options),
           dataSourceId: oldDataSourceToNewMapping[dataQuery.dataSourceId],
           appId: dataQuery.appId,
           appVersionId: appVersion.id,
         };
-        const newDataQuery = await entityManager.save(entityManager.create(DataQuery, dataQueryParams));
+        const newDataQuery = await entityManager.save(entityManager.create(DataQuery, { ...dataQueryParams }));
         newDataQueries.push(newDataQuery);
+        dataQueryMapping[dataQuery.id] = newDataQuery.id;
+      }
+      for (const newQuery of newDataQueries) {
+        const newOptions = this.replaceDataQueryOptionsWithNewDataQueryIds(newQuery.options, dataQueryMapping);
+        newQuery.options = newOptions;
+        await entityManager.save(newQuery);
       }
+      appVersion.definition = this.replaceDataQueryIdWithinDefinitions(appVersion.definition, dataQueryMapping);
+      await entityManager.save(appVersion);
     }
-    console.log(`New data sources created: ${Object.values(oldDataSourceToNewMapping)}`);
-    console.log(`New data queries created: ${newDataQueries.map((q) => q.id)}`);
   }
 
   convertToArrayOfKeyValuePairs(options): Array<object> {
@@ -138,6 +145,68 @@ export class BackfillDataSourcesAndQueriesForAppVersions1639734070615 implements
     });
   }
 
+  replaceDataQueryOptionsWithNewDataQueryIds(options, dataQueryMapping) {
+    if (options && options.events) {
+      const replacedEvents = options.events.map((event) => {
+        if (event.queryId) {
+          event.queryId = dataQueryMapping[event.queryId];
+        }
+        return event;
+      });
+      options.events = replacedEvents;
+    }
+    return options;
+  }
+
+  replaceDataQueryIdWithinDefinitions(definition, dataQueryMapping) {
+    if (definition?.components) {
+      for (const id of Object.keys(definition.components)) {
+        const component = definition.components[id].component;
+
+        if (component?.definition?.events) {
+          const replacedComponentEvents = component.definition.events.map((event) => {
+            if (event.queryId) {
+              event.queryId = dataQueryMapping[event.queryId];
+            }
+            return event;
+          });
+          component.definition.events = replacedComponentEvents;
+        }
+
+        if (component?.definition?.properties?.actions?.value) {
+          for (const value of component.definition.properties.actions.value) {
+            if (value?.events) {
+              const replacedComponentActionEvents = value.events.map((event) => {
+                if (event.queryId) {
+                  event.queryId = dataQueryMapping[event.queryId];
+                }
+                return event;
+              });
+              value.events = replacedComponentActionEvents;
+            }
+          }
+        }
+
+        if (component?.component === 'Table') {
+          for (const column of component?.definition?.properties?.columns?.value ?? []) {
+            if (column?.events) {
+              const replacedComponentActionEvents = column.events.map((event) => {
+                if (event.queryId) {
+                  event.queryId = dataQueryMapping[event.queryId];
+                }
+                return event;
+              });
+              column.events = replacedComponentActionEvents;
+            }
+          }
+        }
+
+        definition.components[id].component = component;
+      }
+    }
+    return definition;
+  }
+
   async setNewCredentialValueFromOldValue(newOptions: any, oldOptions: any, entityManager: EntityManager) {
     const newOptionsWithCredentials = this.convertToArrayOfKeyValuePairs(newOptions).filter((opt) => opt['encrypted']);
 

server/migrations/1641446596775-SetImageBorderTypeToNone.ts

@@ -4,10 +4,7 @@ import { MigrationInterface, QueryRunner } from 'typeorm';
 export class SetImageBorderTypeToNone1641446596775 implements MigrationInterface {
   public async up(queryRunner: QueryRunner): Promise<void> {
     const entityManager = queryRunner.manager;
-    const queryBuilder = queryRunner.connection.createQueryBuilder();
-    const appVersionRepository = entityManager.getRepository(AppVersion);
-
-    const appVersions = await appVersionRepository.find();
+    const appVersions = await entityManager.find(AppVersion);
 
     for (const version of appVersions) {
       const definition = version['definition'];
@@ -35,7 +32,7 @@ export class SetImageBorderTypeToNone1641446596775 implements MigrationInterface
         definition['components'] = components;
         version.definition = definition;
 
-        await queryBuilder.update(AppVersion).set({ definition }).where('id = :id', { id: version.id }).execute();
+        await entityManager.update(AppVersion, { id: version.id }, { definition });
       }
     }
   }

server/migrations/1644229722021-SetFxActiveToTrueForFxFieldsConvertedToUI.ts

@@ -4,12 +4,10 @@ import { AppVersion } from '../src/entities/app_version.entity';
 export class SetFxActiveToTrueForFxFieldsConvertedToUI1644229722021 implements MigrationInterface {
   public async up(queryRunner: QueryRunner): Promise<void> {
     const entityManager = queryRunner.manager;
-    const queryBuilder = queryRunner.connection.createQueryBuilder();
-    const appVersionRepository = entityManager.getRepository(AppVersion);
     const propertiesBeingSetToFxActive = ['loadingState'];
     const stylesBeingSetToFxActive = ['visibility', 'disabledState'];
 
-    const appVersions = await appVersionRepository.find();
+    const appVersions = await entityManager.find(AppVersion);
 
     for (const version of appVersions) {
       const definition = version['definition'];
@@ -53,7 +51,7 @@ export class SetFxActiveToTrueForFxFieldsConvertedToUI1644229722021 implements M
         definition['components'] = components;
         version.definition = definition;
 
-        await queryBuilder.update(AppVersion).set({ definition }).where('id = :id', { id: version.id }).execute();
+        await entityManager.update(AppVersion, { id: version.id }, { definition });
       }
     }
   }

server/src/services/app_import_export.service.ts

@@ -247,6 +247,21 @@ export class AppImportExportService {
             }
           }
         }
+
+        if (component?.component === 'Table') {
+          for (const column of component?.definition?.properties?.columns?.value ?? []) {
+            if (column?.events) {
+              const replacedComponentActionEvents = column.events.map((event) => {
+                if (event.queryId) {
+                  event.queryId = dataQueryMapping[event.queryId];
+                }
+                return event;
+              });
+              column.events = replacedComponentActionEvents;
+            }
+          }
+        }
+
         definition.components[id].component = component;
       }
     }