added instruction text property in file picker widget to add custom i…

…nstructions (ToolJet#2731)

* added instruction text property  in file pciker to make user unable to provide custom instructions

* Added default instruction text

* made the changes to make sure existing app do not crashes because of instructionText prop

* Solve issue -  existing file pickers wont display anything if we don't default to the default instruction text

* changes in operation.json file

* migration script for adding instructionText prop

* removed unwanted operations.json file

Co-authored-by: Kavin Venkatachalam <kavin.saratha@gmail.com>

frontend/src/Editor/Components/FilePicker.jsx

@@ -14,6 +14,8 @@ export const FilePicker = ({
   styles,
 }) => {
   //* properties definitions
+  const instructionText =
+    component.definition.properties.instructionText?.value ?? 'Drag and Drop some files here, or click to select files';
   const enableDropzone = component.definition.properties.enableDropzone.value ?? true;
   const enablePicker = component.definition.properties?.enablePicker?.value ?? true;
   const maxFileCount = component.definition.properties.maxFileCount?.value ?? 2;
@@ -316,7 +318,7 @@ export const FilePicker = ({
         ) : (
           <FilePicker.Signifiers
             signifier={!isDragAccept && !accepted & !isDragReject}
-            feedback={'Drag & drop some files here, or click to select files'}
+            feedback={instructionText}
             cls={`${darkMode ? 'text-secondary' : 'text-dark'} mt-3`}
           />
         )}

frontend/src/Editor/Components/PDF.jsx

@@ -1,4 +1,5 @@
 import React, { useState, useCallback, useRef, useEffect } from 'react';
+// eslint-disable-next-line import/no-unresolved
 import { Document, Page } from 'react-pdf/dist/esm/entry.webpack';
 
 export const PDF = React.memo(({ styles, properties, width, height }) => {

frontend/src/Editor/WidgetManager/widgetConfig.js

@@ -1307,6 +1307,7 @@ export const widgets = [
       showOnMobile: { type: 'toggle', displayName: 'Show on mobile' },
     },
     properties: {
+      instructionText: { type: 'code', displayName: 'Instruction Text' },
       enableDropzone: { type: 'code', displayName: 'Use Drop zone' },
       enablePicker: { type: 'code', displayName: 'Use File Picker' },
       enableMultiple: { type: 'code', displayName: 'Pick multiple files' },
@@ -1340,6 +1341,7 @@ export const widgets = [
         showOnMobile: { value: '{{false}}' },
       },
       properties: {
+        instructionText: { value: 'Drag and Drop some files here, or click to select files' },
         enableDropzone: { value: '{{true}}' },
         enablePicker: { value: '{{true}}' },
         maxFileCount: { value: '{{2}}' },

server/migrations/1653472569828-addedInstructionTextPropInFilePickerWidget.ts

@@ -0,0 +1,42 @@
+import { MigrationInterface, QueryRunner } from 'typeorm';
+import { AppVersion } from '../src/entities/app_version.entity';
+
+export class addedInstructionTextPropInFilePickerWidget1653472569828 implements MigrationInterface {
+  public async up(queryRunner: QueryRunner): Promise<void> {
+    const entityManager = queryRunner.manager;
+    const appVersions = await entityManager.find(AppVersion);
+
+    for (const version of appVersions) {
+      const definition = version['definition'];
+
+      if (definition) {
+        const components = definition['components'];
+
+        for (const componentId of Object.keys(components)) {
+          const component = components[componentId];
+          if (component.component.component === 'FilePicker') {
+            component.component.definition.properties.instructionText = {
+              value: 'Drag and Drop some files here, or click to select files',
+            };
+            components[componentId] = {
+              ...component,
+              component: {
+                ...component.component,
+                definition: {
+                  ...component.component.definition,
+                },
+              },
+            };
+          }
+        }
+
+        definition['components'] = components;
+        version.definition = definition;
+
+        await entityManager.update(AppVersion, { id: version.id }, { definition });
+      }
+    }
+  }
+
+  public async down(queryRunner: QueryRunner): Promise<void> {}
+}