Move disabled, visibility, tooltip and box shadow to properties in Checkbox and Button

frontend/src/Editor/WidgetManager.jsx

@@ -27,14 +27,29 @@ export const WidgetManager = function WidgetManager({ componentTypes, zoomLevel,
 
   function filterComponents(value) {
     if (value !== '') {
-      const fuse = new Fuse(componentTypes, { keys: ['displayName'], shouldSort: true, threshold: 0.4 });
+      const fuse = new Fuse(componentTypes, {
+        keys: ['displayName'],
+        shouldSort: true,
+        threshold: 0.4,
+      });
       const results = fuse.search(value);
+
+      // Find the indices of ToggleSwitchLegacy and ToggleSwitch
+      const legacyIndex = componentTypes.findIndex((component) => component?.name === 'ToggleSwitchLegacy');
+      const toggleIndex = componentTypes.findIndex((component) => component?.name === 'ToggleSwitch');
+
+      // Swap the indices (if both are found)
+      if (legacyIndex !== -1 && toggleIndex !== -1) {
+        [componentTypes[legacyIndex], componentTypes[toggleIndex]] = [
+          componentTypes[toggleIndex],
+          componentTypes[legacyIndex],
+        ];
+      }
       setFilteredComponents(results.map((result) => result.item));
     } else {
       setFilteredComponents(componentTypes);
     }
   }
-
   function renderComponentCard(component, index) {
     return <DraggableBox key={index} index={index} component={component} zoomLevel={zoomLevel} />;
   }

server/data-migrations/1715248567720-MoveCheckboxToggleDisabledToProperties.ts

@@ -0,0 +1,118 @@
+import { Component } from 'src/entities/component.entity';
+import { processDataInBatches } from 'src/helpers/utils.helper';
+import { EntityManager, MigrationInterface, QueryRunner } from 'typeorm';
+
+const componentTypes = ['Checkbox', 'Button'];
+const batchSize = 100;
+
+export class MoveCheckboxButtonDisabledToProperties1715248128046 implements MigrationInterface {
+  public async up(queryRunner: QueryRunner): Promise<void> {
+    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, components) {
+    for (const component of components) {
+      const properties = component.properties;
+      const styles = component.styles;
+      const general = component.general;
+      const generalStyles = component.generalStyles;
+
+      if (styles.visibility) {
+        properties.visibility = styles.visibility;
+        delete styles.visibility;
+      }
+
+      if (styles.disabledState) {
+        properties.disabledState = styles.disabledState;
+        delete styles.disabledState;
+      }
+
+      if (general?.tooltip) {
+        properties.tooltip = general?.tooltip;
+        delete general?.tooltip;
+      }
+
+      if (generalStyles?.boxShadow) {
+        styles.boxShadow = generalStyles?.boxShadow;
+        delete generalStyles?.boxShadow;
+      }
+
+      await entityManager.update(Component, component.id, {
+        properties,
+        styles,
+        general,
+        generalStyles,
+      });
+    }
+  }
+
+  private async rollbackUpdates(entityManager, components) {
+    for (const component of components) {
+      const properties = component.properties;
+      const styles = component.styles;
+      const general = component.general;
+      const generalStyles = component.generalStyles;
+
+      if (properties.visibility !== undefined) {
+        styles.visibility = properties.visibility;
+        delete properties.visibility;
+      }
+
+      if (properties.disabledState !== undefined) {
+        styles.disabledState = properties.disabledState;
+        delete properties.disabledState;
+      }
+
+      if (properties.tooltip !== undefined) {
+        general.tooltip = properties.tooltip;
+        delete properties.tooltip;
+      }
+
+      if (styles.boxShadow !== undefined) {
+        generalStyles.boxShadow = styles.boxShadow;
+        delete styles.boxShadow;
+      }
+
+      await entityManager.update(Component, component.id, {
+        properties,
+        styles,
+        general,
+        generalStyles,
+      });
+    }
+  }
+
+  public async down(queryRunner: QueryRunner): Promise<void> {
+    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.rollbackUpdates(entityManager, components);
+        },
+        batchSize
+      );
+    }
+  }
+}

server/src/services/app_import_export.service.ts

@@ -51,7 +51,7 @@ type DefaultDataSourceName =
   | 'tooljetdbdefault'
   | 'workflowsdefault';
 
-type NewRevampedComponent = 'Text' | 'TextInput' | 'PasswordInput' | 'NumberInput' | 'Table';
+type NewRevampedComponent = 'Text' | 'TextInput' | 'PasswordInput' | 'NumberInput' | 'Table' | 'Button' | 'Checkbox';
 
 const DefaultDataSourceNames: DefaultDataSourceName[] = [
   'restapidefault',
@@ -61,7 +61,15 @@ const DefaultDataSourceNames: DefaultDataSourceName[] = [
   'workflowsdefault',
 ];
 const DefaultDataSourceKinds: DefaultDataSourceKind[] = ['restapi', 'runjs', 'runpy', 'tooljetdb', 'workflows'];
-const NewRevampedComponents: NewRevampedComponent[] = ['Text', 'TextInput', 'PasswordInput', 'NumberInput', 'Table'];
+const NewRevampedComponents: NewRevampedComponent[] = [
+  'Text',
+  'TextInput',
+  'PasswordInput',
+  'NumberInput',
+  'Table',
+  'Checkbox',
+  'Button',
+];
 
 @Injectable()
 export class AppImportExportService {