Merge pull request #12494 from ToolJet/fix/container-migrate-header

fix: Migrates showHeader property to false for exiting containers

frontend/src/AppBuilder/RightSideBar/Inspector/Components/Form.jsx

@@ -124,24 +124,6 @@ export const baseComponentProperties = (
     });
   }
 
-  items.push({
-    title: 'Additional actions',
-    isOpen: true,
-    children: additionalActions?.map((property) =>
-      renderElement(
-        component,
-        componentMeta,
-        paramUpdated,
-        dataQueries,
-        property,
-        'properties',
-        currentState,
-        allComponents,
-        darkMode
-      )
-    ),
-  });
-
   if (events.length > 0) {
     items.push({
       title: `${i18next.t('widget.common.events', 'Events')}`,
@@ -163,6 +145,24 @@ export const baseComponentProperties = (
     });
   }
 
+  items.push({
+    title: 'Additional actions',
+    isOpen: true,
+    children: additionalActions?.map((property) =>
+      renderElement(
+        component,
+        componentMeta,
+        paramUpdated,
+        dataQueries,
+        property,
+        'properties',
+        currentState,
+        allComponents,
+        darkMode
+      )
+    ),
+  });
+
   if (validations.length > 0) {
     items.push({
       title: `${i18next.t('widget.common.validation', 'Validation')}`,

frontend/src/AppBuilder/WidgetManager/widgets/container.js

@@ -44,7 +44,7 @@ export const containerConfig = {
       displayName: 'Show header',
       validation: {
         schema: { type: 'boolean' },
-        defaultValue: false,
+        defaultValue: true,
       },
     },
   },
@@ -154,7 +154,7 @@ export const containerConfig = {
       showOnMobile: { value: '{{false}}' },
     },
     properties: {
-      showHeader: { value: `{{false}}` },
+      showHeader: { value: `{{true}}` },
       loadingState: { value: `{{false}}` },
       visibility: { value: '{{true}}' },
       disabledState: { value: '{{false}}' },

frontend/src/Editor/WidgetManager/configs/container.js

@@ -44,7 +44,7 @@ export const containerConfig = {
       displayName: 'Show header',
       validation: {
         schema: { type: 'boolean' },
-        defaultValue: false,
+        defaultValue: true,
       },
     },
   },
@@ -154,7 +154,7 @@ export const containerConfig = {
       showOnMobile: { value: '{{false}}' },
     },
     properties: {
-      showHeader: { value: `{{false}}` },
+      showHeader: { value: `{{true}}` },
       loadingState: { value: `{{false}}` },
       visibility: { value: '{{true}}' },
       disabledState: { value: '{{false}}' },

server/migrations/1744097765065-UpdateContainerHeaderProperty.ts

@@ -0,0 +1,50 @@
+import { Component } from 'src/entities/component.entity';
+
+import { processDataInBatches } from '@helpers/migration.helper';
+import { EntityManager, MigrationInterface, QueryRunner } from 'typeorm';
+
+export class UpdateContainerHeaderProperty1744097765065 implements MigrationInterface {
+  public async up(queryRunner: QueryRunner): Promise<void> {
+    const componentTypes = ['Container'];
+    const batchSize = 100;
+    const entityManager = queryRunner.manager;
+
+    for (const componentType of componentTypes) {
+      await processDataInBatches(
+        entityManager,
+        async (entityManager: EntityManager) => {
+          return await entityManager.find(Component, {
+            where: { type: componentType },
+            order: { createdAt: 'ASC' },
+          });
+        },
+        async (entityManager: EntityManager, components: Component[]) => {
+          await this.processUpdates(entityManager, components);
+        },
+        batchSize
+      );
+    }
+  }
+
+  private async processUpdates(entityManager: EntityManager, components: Component[]) {
+    for (const component of components) {
+      const properties = component.properties;
+      const styles = component.styles;
+      const general = component.general;
+
+      // Update showHeader property to false for old instances
+      if (!properties.showHeader) {
+        properties.showHeader = { value: '{{false}}' };
+      }
+
+      // Update the modal component with the modified properties
+      await entityManager.update(Component, component.id, {
+        properties,
+        styles,
+        general,
+      });
+    }
+  }
+
+  public async down(queryRunner: QueryRunner): Promise<void> {}
+}

server/src/modules/apps/services/widget-config/container.js

@@ -44,7 +44,7 @@ export const containerConfig = {
       displayName: 'Show header',
       validation: {
         schema: { type: 'boolean' },
-        defaultValue: false,
+        defaultValue: true,
       },
     },
   },
@@ -154,7 +154,7 @@ export const containerConfig = {
       showOnMobile: { value: '{{false}}' },
     },
     properties: {
-      showHeader: { value: `{{false}}` },
+      showHeader: { value: `{{true}}` },
       loadingState: { value: `{{false}}` },
       visibility: { value: '{{true}}' },
       disabledState: { value: '{{false}}' },