+
{children}
@@ -51,3 +51,16 @@ export function DragHandle({ show = true }) {
);
}
+
+// hoc for wrapping components that need to be draggable
+export function withDraggable(Component) {
+ return function DraggableComponent(props) {
+ const { attributes, listeners, ref } = useContext(SortableItemContext);
+
+ return (
+
+
+ );
+ };
+}
diff --git a/frontend/src/_components/SortableList/index.js b/frontend/src/_components/SortableList/index.js
index 8146d4c14e..375b7add58 100644
--- a/frontend/src/_components/SortableList/index.js
+++ b/frontend/src/_components/SortableList/index.js
@@ -1,36 +1,41 @@
import React from 'react';
+import useStore from '@/AppBuilder/_stores/store';
+import EmptyIllustration from '@assets/images/no-results.svg';
import { SortableList } from './SortableList';
import { DragHandle } from './components';
+import { shallow } from 'zustand/shallow';
+import _ from 'lodash';
const SortableComponent = ({ data, Element, ...restProps }) => {
- const { onSort } = restProps;
+ const allpages = useStore((state) => _.get(state, 'modules.canvas.pages', []), shallow);
+ const reorderPages = useStore((state) => state.reorderPages);
- const [items, setItems] = React.useState([]);
+ const showSearch = useStore((state) => state.showSearch);
+ const pageSearchResults = useStore((state) => state.pageSearchResults);
- React.useEffect(() => {
- setItems(data);
- // eslint-disable-next-line react-hooks/exhaustive-deps
- }, [JSON.stringify(data)]);
+ const pagesTorender =
+ showSearch && pageSearchResults !== null
+ ? allpages.filter((page) => pageSearchResults.includes(page.id))
+ : allpages;
- //function to check if the item in items array has changed position with respect to the original data
- const didItemChangePosition = (originalArr, sortedArry) => {
- return originalArr.some((item, index) => {
- return item.id !== sortedArry[index].id;
- });
- };
-
- React.useEffect(() => {
- if (items.length > 0 && didItemChangePosition(data, items)) {
- onSort(items);
- }
- // eslint-disable-next-line react-hooks/exhaustive-deps
- }, [items]);
+ if (pagesTorender.length === 0) {
+ return (
+
+ );
+ }
return (
(
@@ -73,10 +84,24 @@ function FolderList({
)}
+ {CustomIcon && (
+
+
+ )}
+
{children}
{RightIcon && {RightIcon &&
}
- {overLayComponent && (isHovered || showGroupOptions) && (
+ {overLayComponent && ((!disableHoverOption && isHovered) || showGroupOptions) && (
<>
+
+);
+
+export default Reset;
diff --git a/frontend/src/_ui/Icon/solidIcons/index.js b/frontend/src/_ui/Icon/solidIcons/index.js
index 7e6874ca09..02ce6bc09a 100644
--- a/frontend/src/_ui/Icon/solidIcons/index.js
+++ b/frontend/src/_ui/Icon/solidIcons/index.js
@@ -173,6 +173,7 @@ import Search01 from './Search01.jsx';
import ShiftButtonIcon from './ShiftButtonIcon.jsx';
import Unpin01 from './Unpin01.jsx';
import WarningUserNotFound from './WarningUserNotFound.jsx';
+import Reset from './Reset.jsx';
const Icon = (props) => {
switch (props.name) {
@@ -394,6 +395,8 @@ const Icon = (props) => {
return |
;
+ case 'reset':
+ return {
+ await queryRunner.startTransaction();
+ try {
+ const pagesWitHiddenTrue = await queryRunner.query(
+ `SELECT id, show_viewer_navigation FROM app_versions WHERE show_viewer_navigation = 'true'`
+ );
+ const pagesWithHiddenFalse = await queryRunner.query(
+ `SELECT id, show_viewer_navigation FROM app_versions WHERE show_viewer_navigation = 'false'`
+ );
+ const idsToUpdate = pagesWitHiddenTrue.map((page) => page.id);
+ const idsToUpdateFalse = pagesWithHiddenFalse.map((page) => page.id);
+
+ if (idsToUpdate.length > 0) {
+ const quotedIds = idsToUpdate.map((id) => `'${id}'`).join(',');
+ await queryRunner.query(
+ `UPDATE app_versions SET page_settings = '{"properties": {"disableMenu": {"value": "{{false}}", "fxActive": false}}}' WHERE id IN (${quotedIds})`
+ );
+ }
+ if (idsToUpdateFalse.length > 0) {
+ const quotedIds = idsToUpdateFalse.map((id) => `'${id}'`).join(',');
+ await queryRunner.query(
+ `UPDATE app_versions SET page_settings = '{"properties": {"disableMenu": {"value": "{{true}}", "fxActive": false}}}' WHERE id IN (${quotedIds})`
+ );
+ }
+
+ await queryRunner.commitTransaction();
+ } catch (error) {
+ await queryRunner.rollbackTransaction();
+ throw error;
+ }
+ }
+ public async down(queryRunner: QueryRunner): Promise {
+ return Promise.resolve();
+ }
+}
diff --git a/server/migrations/1716890766240-AddPageSettingsColumnToAppVersionTable.ts b/server/migrations/1716890766240-AddPageSettingsColumnToAppVersionTable.ts
new file mode 100644
index 0000000000..478cb5ecdb
--- /dev/null
+++ b/server/migrations/1716890766240-AddPageSettingsColumnToAppVersionTable.ts
@@ -0,0 +1,18 @@
+import { MigrationInterface, QueryRunner, TableColumn } from 'typeorm';
+
+export class AddPageSettingsColumnToAppVersionTable1716890766240 implements MigrationInterface {
+ public async up(queryRunner: QueryRunner): Promise {
+ await queryRunner.addColumn(
+ 'app_versions',
+ new TableColumn({
+ name: 'page_settings',
+ type: 'json',
+ isNullable: true,
+ })
+ );
+ }
+
+ public async down(queryRunner: QueryRunner): Promise {
+ await queryRunner.dropColumn('app_versions', 'page_settings');
+ }
+}
diff --git a/server/migrations/1716921638529-AddIconFieldToPagesTable.ts b/server/migrations/1716921638529-AddIconFieldToPagesTable.ts
new file mode 100644
index 0000000000..045f37d45e
--- /dev/null
+++ b/server/migrations/1716921638529-AddIconFieldToPagesTable.ts
@@ -0,0 +1,18 @@
+import { MigrationInterface, QueryRunner, TableColumn } from 'typeorm';
+
+export class AddIconFieldToPagesTable1716921638529 implements MigrationInterface {
+ public async up(queryRunner: QueryRunner): Promise {
+ await queryRunner.addColumn(
+ 'pages',
+ new TableColumn({
+ name: 'icon',
+ type: 'varchar',
+ isNullable: true,
+ })
+ );
+ }
+
+ public async down(queryRunner: QueryRunner): Promise {
+ await queryRunner.dropColumn('pages', 'icon');
+ }
+}
diff --git a/server/src/controllers/apps.controller.v2.ts b/server/src/controllers/apps.controller.v2.ts
index a3fa3a39c9..00ef864b35 100644
--- a/server/src/controllers/apps.controller.v2.ts
+++ b/server/src/controllers/apps.controller.v2.ts
@@ -230,7 +230,7 @@ export class AppsControllerV2 {
@UseGuards(JwtAuthGuard)
@UseInterceptors(ValidAppInterceptor)
- @Put(':id/versions/:versionId/global_settings')
+ @Put([':id/versions/:versionId/global_settings', ':id/versions/:versionId/page_settings'])
async updateGlobalSettings(
@User() user,
@Param('id') id,
@@ -408,6 +408,23 @@ export class AppsControllerV2 {
await this.pageService.updatePage(updatePageDto, versionId);
}
+ @UseGuards(JwtAuthGuard)
+ @UseInterceptors(ValidAppInterceptor)
+ @Put(':id/versions/:versionId/pages/reorder')
+ async reorderPages(@User() user, @Param('id') id, @Param('versionId') versionId, @Body() reorderPagesDto) {
+ const version = await this.appsService.findVersion(versionId);
+ const app = version.app;
+ if (app.id !== id) {
+ throw new BadRequestException();
+ }
+ const ability = await this.appsAbilityFactory.appsActions(user, id);
+ if (!ability.can(APP_RESOURCE_ACTIONS.VERSION_UPDATE, app)) {
+ throw new ForbiddenException('You do not have permissions to perform this action');
+ }
+ console.log(reorderPagesDto, 'payload');
+ await this.pageService.reorderPages(reorderPagesDto, versionId);
+ }
+
@UseGuards(JwtAuthGuard)
@UseInterceptors(ValidAppInterceptor)
@Delete(':id/versions/:versionId/pages')
diff --git a/server/src/dto/app-version-update.dto.ts b/server/src/dto/app-version-update.dto.ts
index 53d79b387a..6c7aadb71c 100644
--- a/server/src/dto/app-version-update.dto.ts
+++ b/server/src/dto/app-version-update.dto.ts
@@ -23,4 +23,7 @@ export class AppVersionUpdateDto {
@IsOptional()
globalSettings: any;
+
+ @IsOptional()
+ pageSettings: any;
}
diff --git a/server/src/dto/pages.dto.ts b/server/src/dto/pages.dto.ts
index 9c84f16ceb..b5d96821fe 100644
--- a/server/src/dto/pages.dto.ts
+++ b/server/src/dto/pages.dto.ts
@@ -23,7 +23,7 @@ export class CreatePageDto {
disabled: boolean;
@IsOptional()
- hidden: boolean;
+ hidden: Record;
@IsOptional()
autoComputeLayout: boolean;
diff --git a/server/src/entities/app_version.entity.ts b/server/src/entities/app_version.entity.ts
index 683d7f7c5d..947dd59a0b 100644
--- a/server/src/entities/app_version.entity.ts
+++ b/server/src/entities/app_version.entity.ts
@@ -31,6 +31,9 @@ export class AppVersion extends BaseEntity {
@Column('simple-json', { name: 'global_settings' })
globalSettings;
+ @Column('simple-json', { name: 'page_settings' })
+ pageSettings;
+
@Column({ name: 'show_viewer_navigation' })
showViewerNavigation: boolean;
diff --git a/server/src/entities/page.entity.ts b/server/src/entities/page.entity.ts
index 52aedf296d..733c269dc9 100644
--- a/server/src/entities/page.entity.ts
+++ b/server/src/entities/page.entity.ts
@@ -28,8 +28,11 @@ export class Page {
@Column()
disabled: boolean;
+ @Column('simple-json', { name: 'hidden' })
+ hidden;
+
@Column()
- hidden: boolean;
+ icon: string;
@CreateDateColumn({ default: () => 'now()', name: 'created_at' })
createdAt: Date;
diff --git a/server/src/helpers/import_export.helpers.ts b/server/src/helpers/import_export.helpers.ts
index 9269743e23..2c98071159 100644
--- a/server/src/helpers/import_export.helpers.ts
+++ b/server/src/helpers/import_export.helpers.ts
@@ -6,14 +6,32 @@ export function updateEntityReferences(node, resourceMapping: Record {
+ // remove curly braces and extract the entity "component.entityName.something"
+ const ref = match.slice(2, -2).trim();
+ const entityName = ref.split('.')[1];
- const entityName = ref.split('.')[1];
+ if (resourceMapping[entityName]) {
+ const newValue = value.replace(entityName, resourceMapping[entityName]);
- if (resourceMapping[entityName]) {
- const newValue = value.replace(entityName, resourceMapping[entityName]);
+ node[key] = newValue;
+ value = newValue;
+ }
+ });
+ } else {
+ // kept this logic for fallback, although it should not be needed
+ const ref = value.replace('{{', '').replace('}}', '');
- node[key] = newValue;
+ const entityName = ref.split('.')[1];
+
+ if (resourceMapping[entityName]) {
+ const newValue = value.replace(entityName, resourceMapping[entityName]);
+
+ node[key] = newValue;
+ }
}
}
} else if (typeof value === 'object') {
@@ -45,11 +63,23 @@ export function findAllEntityReferences(node, allRefs): [] {
const referenceExists = value;
if (referenceExists) {
- const ref = value.replace('{{', '').replace('}}', '');
+ const matches = value.match(/{{(.*?)}}/g);
+ if (matches) {
+ matches.forEach((match) => {
+ const ref = match.slice(2, -2).trim(); // Remove {{ and }}
+ const entityName = ref.split('.')[1];
+ if (entityName && !allRefs.includes(entityName)) {
+ allRefs.push(entityName);
+ }
+ });
+ } else {
+ // kept this logic for fallback, although it should not be needed
+ const ref = value.replace('{{', '').replace('}}', '');
- const entityName = ref.split('.')[1];
+ const entityName = ref.split('.')[1];
- allRefs.push(entityName);
+ allRefs.push(entityName);
+ }
}
} else if (typeof value === 'object') {
findAllEntityReferences(value, allRefs);
diff --git a/server/src/helpers/utils.helper.ts b/server/src/helpers/utils.helper.ts
index fa45d618b8..c23e109d37 100644
--- a/server/src/helpers/utils.helper.ts
+++ b/server/src/helpers/utils.helper.ts
@@ -319,3 +319,35 @@ export const isValidDomain = (email: string, restrictedDomain: string): boolean
export const isHttpsEnabled = () => {
return !!process.env.TOOLJET_HOST?.startsWith('https');
};
+
+export function isObject(obj) {
+ return obj && typeof obj === 'object';
+}
+
+export function mergeDeep(target, source, seen = new WeakMap()) {
+ if (!isObject(target)) {
+ target = {};
+ }
+
+ if (!isObject(source)) {
+ return target;
+ }
+
+ if (seen.has(source)) {
+ return seen.get(source);
+ }
+ seen.set(source, target);
+
+ for (const key in source) {
+ if (isObject(source[key])) {
+ if (!target[key]) {
+ Object.assign(target, { [key]: {} });
+ }
+ mergeDeep(target[key], source[key], seen);
+ } else {
+ Object.assign(target, { [key]: source[key] });
+ }
+ }
+
+ return target;
+}
diff --git a/server/src/services/app_import_export.service.ts b/server/src/services/app_import_export.service.ts
index 699cd12a99..a693db254b 100644
--- a/server/src/services/app_import_export.service.ts
+++ b/server/src/services/app_import_export.service.ts
@@ -794,13 +794,13 @@ export class AppImportExportService {
const isParentTabOrCalendar = isChildOfTabsOrCalendar(component, pageComponents, parentId, true);
if (isParentTabOrCalendar) {
- const childTabId = component.parent.split('-')[component.parent.split('-').length - 1];
- const _parentId = component?.parent?.split('-').slice(0, -1).join('-');
+ const childTabId = component?.parent ? component.parent?.match(/([a-fA-F0-9-]{36})-(.+)/)?.[2] : null;
+ const _parentId = component?.parent ? component.parent?.match(/([a-fA-F0-9-]{36})-(.+)/)?.[1] : null;
const mappedParentId = newComponentIdsMap[_parentId];
parentId = `${mappedParentId}-${childTabId}`;
} else if (isChildOfKanbanModal(component, pageComponents, parentId, true)) {
- const _parentId = component?.parent?.split('-').slice(0, -1).join('-');
+ const _parentId = component?.parent ? component.parent?.match(/([a-fA-F0-9-]{36})-(.+)/)?.[1] : null;
const mappedParentId = newComponentIdsMap[_parentId];
parentId = `${mappedParentId}-modal`;
@@ -1885,13 +1885,13 @@ function transformComponentData(
);
if (isParentTabOrCalendar) {
- const childTabId = component.parent.split('-')[component.parent.split('-').length - 1];
- const _parentId = component?.parent?.split('-').slice(0, -1).join('-');
+ const childTabId = component?.parent ? component.parent?.match(/([a-fA-F0-9-]{36})-(.+)/)?.[2] : null;
+ const _parentId = component?.parent ? component.parent?.match(/([a-fA-F0-9-]{36})-(.+)/)?.[1] : null;
const mappedParentId = componentsMapping[_parentId];
parentId = `${mappedParentId}-${childTabId}`;
} else if (isChildOfKanbanModal(component, allComponents, parentId, true)) {
- const _parentId = component?.parent?.split('-').slice(0, -1).join('-');
+ const _parentId = component?.parent ? component.parent?.match(/([a-fA-F0-9-]{36})-(.+)/)?.[1] : null;
const mappedParentId = componentsMapping[_parentId];
parentId = `${mappedParentId}-modal`;
@@ -1940,7 +1940,7 @@ const isChildOfTabsOrCalendar = (
isNormalizedAppDefinitionSchema: boolean
) => {
if (componentParentId) {
- const parentId = component?.parent?.split('-').slice(0, -1).join('-');
+ const parentId = component?.parent ? component.parent?.match(/([a-fA-F0-9-]{36})-(.+)/)?.[1] : null;
const parentComponent = allComponents.find((comp) => comp.id === parentId);
@@ -1964,7 +1964,7 @@ const isChildOfKanbanModal = (
) => {
if (!componentParentId || !componentParentId.includes('modal')) return false;
- const parentId = component?.parent?.split('-').slice(0, -1).join('-');
+ const parentId = component?.parent ? component.parent?.match(/([a-fA-F0-9-]{36})-(.+)/)?.[1] : null;
const parentComponent = allComponents.find((comp) => comp.id === parentId);
diff --git a/server/src/services/apps.service.ts b/server/src/services/apps.service.ts
index b40f964523..60e5529751 100644
--- a/server/src/services/apps.service.ts
+++ b/server/src/services/apps.service.ts
@@ -10,7 +10,7 @@ import { DataQuery } from 'src/entities/data_query.entity';
import { AppImportExportService } from './app_import_export.service';
import { DataSourcesService } from './data_sources.service';
import { Credential } from 'src/entities/credential.entity';
-import { catchDbException, cleanObject, defaultAppEnvironments } from 'src/helpers/utils.helper';
+import { catchDbException, cleanObject, defaultAppEnvironments, mergeDeep } from 'src/helpers/utils.helper';
import { AppUpdateDto } from '@dto/app-update.dto';
import { viewableAppsQueryUsingPermissions } from 'src/helpers/queries';
import { VersionEditDto } from '@dto/version-edit.dto';
@@ -374,6 +374,7 @@ export class AppsService {
if (versionFrom) {
(appVersion.showViewerNavigation = versionFrom.showViewerNavigation),
(appVersion.globalSettings = versionFrom.globalSettings),
+ (appVersion.pageSettings = versionFrom.pageSettings),
await manager.save(appVersion);
const oldDataQueryToNewMapping = await this.createNewDataSourcesAndQueriesForVersion(
@@ -529,7 +530,7 @@ export class AppsService {
const isChildOfTabsOrCalendar = (component, allComponents = [], componentParentId = undefined) => {
if (componentParentId) {
- const parentId = component?.parent?.split('-').slice(0, -1).join('-');
+ const parentId = component?.parent?.match(/([a-fA-F0-9-]{36})-(.+)/)?.[1];
const parentComponent = allComponents.find((comp) => comp.id === parentId);
@@ -545,7 +546,7 @@ export class AppsService {
if (!componentParentId.includes('modal')) return false;
if (componentParentId) {
- const parentId = componentParentId.split('-').slice(0, -1).join('-');
+ const parentId = componentParentId.match(/([a-fA-F0-9-]{36})-(.+)/)?.[1];
const isParentKandban = allComponents.find((comp) => comp.id === parentId)?.type === 'Kanban';
return isParentKandban;
@@ -597,8 +598,8 @@ export class AppsService {
const isParentTabOrCalendar = isChildOfTabsOrCalendar(component, page.components, parentId);
if (isParentTabOrCalendar) {
- const childTabId = component.parent.split('-')[component.parent.split('-').length - 1];
- const _parentId = component?.parent?.split('-').slice(0, -1).join('-');
+ const childTabId = component?.parent?.match(/([a-fA-F0-9-]{36})-(.+)/)?.[2];
+ const _parentId = component?.parent?.match(/([a-fA-F0-9-]{36})-(.+)/)?.[1];
const mappedParentId = oldComponentToNewComponentMapping[_parentId];
parentId = `${mappedParentId}-${childTabId}`;
@@ -660,12 +661,12 @@ export class AppsService {
if (isParentTabOrCalendar) {
const childTabId = component?.parent?.split('-')[component?.parent?.split('-').length - 1];
- const _parentId = component?.parent?.split('-').slice(0, -1).join('-');
+ const _parentId = component?.parent?.match(/([a-fA-F0-9-]{36})-(.+)/)?.[1];
const mappedParentId = oldComponentToNewComponentMapping[_parentId];
parentId = `${mappedParentId}-${childTabId}`;
} else if (isChildOfKanbanModal(component.parent, page.components)) {
- const _parentId = component?.parent?.split('-').slice(0, -1).join('-');
+ const _parentId = component?.parent?.match(/([a-fA-F0-9-]{36})-(.+)/)?.[1];
const mappedParentId = oldComponentToNewComponentMapping[_parentId];
parentId = `${mappedParentId}-modal`;
@@ -1022,7 +1023,7 @@ export class AppsService {
async updateAppVersion(version: AppVersion, body: AppVersionUpdateDto) {
const editableParams = {};
- const { globalSettings, homePageId } = await this.appVersionsRepository.findOne({
+ const { globalSettings, homePageId, pageSettings } = await this.appVersionsRepository.findOne({
where: { id: version.id },
});
@@ -1037,6 +1038,12 @@ export class AppsService {
};
}
+ if (body?.pageSettings) {
+ editableParams['pageSettings'] = {
+ ...mergeDeep(pageSettings, body.pageSettings),
+ };
+ }
+
if (typeof body?.showViewerNavigation === 'boolean') {
editableParams['showViewerNavigation'] = body.showViewerNavigation;
}