added new control types

removed alert from widget list
added property config values
added input validator

app/client/src/constants/PropertyControlConstants.tsx

@@ -7,4 +7,11 @@ export type ControlType =
   | "DATE_PICKER"
   | "DROP_DOWN"
   | "COLOR_PICKER"
+  | "TIMEZONE_PICKER"
+  | "ACTION_SELECTOR"
+  | "RECORD_ACTION_SELECTOR"
+  | "OPTION_INPUT"
+  | "IMAGE_PICKER"
+  | "SHAPE_PICKER"
+  | "VALIDATION_INPUT"
   | "ZOOM";

app/client/src/constants/WidgetConstants.tsx

@@ -10,8 +10,7 @@ export type WidgetType =
   | "CHECKBOX_WIDGET"
   | "RADIO_GROUP_WIDGET"
   | "INPUT_WIDGET"
-  | "SWITCH_WIDGET"
+  | "SWITCH_WIDGET";
-  | "ALERT_WIDGET";
 
 export const WidgetTypes: { [id: string]: WidgetType } = {
   BUTTON_WIDGET: "BUTTON_WIDGET",
@@ -26,7 +25,6 @@ export const WidgetTypes: { [id: string]: WidgetType } = {
   DROP_DOWN_WIDGET: "DROP_DOWN_WIDGET",
   CHECKBOX_WIDGET: "CHECKBOX_WIDGET",
   RADIO_GROUP_WIDGET: "RADIO_GROUP_WIDGET",
-  ALERT_WIDGET: "ALERT_WIDGET",
 };
 
 export type ContainerOrientation = "HORIZONTAL" | "VERTICAL";

app/client/src/mockResponses/PropertyPaneConfigResponse.tsx

@@ -8,14 +8,14 @@ const PropertyPaneConfigResponse: PropertyPaneConfigState = {
         id: "1",
         children: [
           {
-            id: "1",
+            id: "1.1",
             propertyName: "text",
             label: "Button Text",
             controlType: "INPUT_TEXT",
             placeholderText: "Enter button text here",
           },
           {
-            id: "2",
+            id: "1.2",
             propertyName: "buttonStyle",
             label: "Button Style",
             controlType: "DROP_DOWN",
@@ -24,18 +24,29 @@ const PropertyPaneConfigResponse: PropertyPaneConfigState = {
               { label: "Secondary Button", value: "SECONDARY_BUTTON" },
             ],
           },
+          {
+            id: "1.3",
+            propertyName: "isDisabled",
+            label: "Disabled",
+            controlType: "SWITCH",
+          },
+          {
+            id: "1.4",
+            propertyName: "isVisible",
+            label: "Visibile",
+            controlType: "SWITCH",
+          },
         ],
       },
       {
-        sectionName: "Action",
+        sectionName: "Actions",
         id: "2",
         children: [
           {
-            id: "3",
+            id: "2.1",
-            propertyName: "text",
+            propertyName: "onClick",
-            label: "Button Text",
+            label: "onClick",
-            controlType: "INPUT_TEXT",
+            controlType: "ACTION_SELECTOR",
-            placeholderText: "Enter button text here",
           },
         ],
       },
@@ -44,84 +55,497 @@ const PropertyPaneConfigResponse: PropertyPaneConfigState = {
       {
         sectionName: "General",
         id: "3",
-        children: [],
+        children: [
+          {
+            id: "3.1",
+            propertyName: "text",
+            label: "Text",
+            controlType: "INPUT_TEXT",
+            placeholderText: "Enter your text here",
+          },
+          {
+            id: "3.2",
+            propertyName: "textStyle",
+            label: "Text Style",
+            controlType: "DROP_DOWN",
+            options: [
+              { label: "Heading", value: "HEADING" },
+              { label: "Label", value: "LABEL" },
+              { label: "Body", value: "BODY" },
+              { label: "Sub text", value: "SUB_TEXT" },
+            ],
+          },
+          {
+            id: "3.3",
+            propertyName: "isVisible",
+            label: "Visibile",
+            controlType: "SWITCH",
+          },
+        ],
       },
     ],
     IMAGE_WIDGET: [
       {
         sectionName: "General",
         id: "4",
-        children: [],
+        children: [
+          {
+            id: "4.1",
+            propertyName: "image",
+            label: "Image",
+            controlType: "IMAGE_PICKER",
+          },
+          {
+            id: "4.2",
+            propertyName: "defaultImage",
+            label: "Default Image",
+            controlType: "IMAGE_PICKER",
+          },
+          {
+            id: "4.3",
+            propertyName: "imageShape",
+            label: "Shape",
+            controlType: "SHAPE_PICKER",
+          },
+          {
+            id: "4.4",
+            propertyName: "isVisible",
+            label: "Visibile",
+            controlType: "SWITCH",
+          },
+        ],
       },
     ],
     INPUT_WIDGET: [
       {
         sectionName: "General",
         id: "5",
-        children: [],
+        children: [
+          {
+            id: "5.1",
+            propertyName: "label",
+            label: "Label",
+            controlType: "INPUT_TEXT",
+            inputType: "TEXT",
+            placeholderText: "Label the widget",
+          },
+          {
+            id: "5.2",
+            propertyName: "inputType",
+            label: "Data Type",
+            controlType: "DROP_DOWN",
+            options: [
+              { label: "Text", value: "TEXT" },
+              { label: "Number", value: "NUMBER" },
+              { label: "Integer", value: "INTEGER" },
+              { label: "Phone Number", value: "PHONE_NUMBER" },
+              { label: "Email", value: "EMAIL" },
+              { label: "Passwork", value: "PASSWORD" },
+              { label: "Currency", value: "CURRENCY" },
+              { label: "Search", value: "SEARCH" },
+            ],
+          },
+          {
+            id: "5.3",
+            propertyName: "placeholderText",
+            label: "Placeholder",
+            controlType: "INPUT_TEXT",
+            placeholderText: "Enter your text here",
+          },
+          {
+            id: "5.4",
+            propertyName: "maxChars",
+            label: "Max Chars",
+            controlType: "INPUT_TEXT",
+            inputType: "INTEGER",
+            placeholderText: "Maximum character length",
+          },
+          {
+            id: "5.5",
+            propertyName: "validators",
+            label: "Validators",
+            controlType: "VALIDATION_INPUT",
+          },
+          {
+            id: "5.6",
+            children: [
+              {
+                id: "5.6.1",
+                propertyName: "focusIndexx",
+                label: "Focus Index",
+                controlType: "INPUT_TEXT",
+                inputType: "INTEGER",
+                placeholderText: "Enter the order of tab focus",
+              },
+              {
+                id: "5.6.2",
+                propertyName: "autoFocus",
+                label: "Auto Focus",
+                controlType: "SWITCH",
+              },
+            ],
+          },
+          {
+            id: "5.7",
+            propertyName: "isVisible",
+            label: "Visibile",
+            controlType: "SWITCH",
+          },
+          {
+            id: "5.8",
+            propertyName: "isDisabled",
+            label: "Disabled",
+            controlType: "SWITCH",
+          },
+        ],
       },
     ],
     SWITCH_WIDGET: [
       {
         sectionName: "General",
         id: "6",
-        children: [],
+        children: [
+          {
+            id: "6.1",
+            propertyName: "label",
+            label: "Label",
+            controlType: "INPUT_TEXT",
+            inputType: "TEXT",
+            placeholderText: "Label the widget",
+          },
+          {
+            id: "6.2",
+            propertyName: "isOn",
+            label: "Default State",
+            controlType: "SWITCH",
+          },
+          {
+            id: "6.3",
+            propertyName: "isVisible",
+            label: "Visibile",
+            controlType: "SWITCH",
+          },
+          {
+            id: "6.4",
+            propertyName: "isDisabled",
+            label: "Disabled",
+            controlType: "SWITCH",
+          },
+        ],
       },
     ],
     CONTAINER_WIDGET: [
       {
         sectionName: "General",
         id: "7",
-        children: [],
+        children: [
+          {
+            id: "7.1",
+            propertyName: "backgroundColor",
+            label: "Background Color",
+            controlType: "COLOR_PICKER",
+          },
+          {
+            id: "6.3",
+            propertyName: "isVisible",
+            label: "Visibile",
+            controlType: "SWITCH",
+          },
+        ],
       },
     ],
     SPINNER_WIDGET: [
       {
         sectionName: "General",
         id: "8",
-        children: [],
+        children: [
+          {
+            id: "8.1",
+            propertyName: "isVisible",
+            label: "Visibile",
+            controlType: "SWITCH",
+          },
+        ],
       },
     ],
     DATE_PICKER_WIDGET: [
       {
         sectionName: "General",
         id: "9",
-        children: [],
+        children: [
+          {
+            id: "9.1",
+            propertyName: "datePickerType",
+            label: "Picker Type",
+            controlType: "DROP_DOWN",
+            options: [
+              { label: "Single Date", value: "DATE_PICKER" },
+              { label: "Date Range", value: "DATE_RANGE_PICKER" },
+            ],
+          },
+          {
+            id: "9.4",
+            propertyName: "label",
+            label: "Enter Date Label",
+            controlType: "INPUT_TEXT",
+          },
+          {
+            id: "9.1",
+            propertyName: "defaultDate",
+            label: "Default Date",
+            controlType: "DATE_PICKER",
+          },
+          {
+            id: "9.2",
+            propertyName: "defaultTimezone",
+            label: "Default Timezone",
+            controlType: "TIMEZONE_PICKER",
+          },
+          {
+            id: "9.3",
+            propertyName: "enableTime",
+            label: "Enable Pick Time",
+            controlType: "SWITCH",
+          },
+          {
+            id: "9.5",
+            propertyName: "isVisible",
+            label: "Visibile",
+            controlType: "SWITCH",
+          },
+          {
+            id: "9.6",
+            propertyName: "isDisabled",
+            label: "Disabled",
+            controlType: "SWITCH",
+          },
+        ],
+      },
+      {
+        sectionName: "Actions",
+        id: "10",
+        children: [
+          {
+            id: "10.1",
+            propertyName: "onDateSelected",
+            label: "onDateSelected",
+            controlType: "ACTION_SELECTOR",
+          },
+          {
+            id: "10.2",
+            propertyName: "onDateRangeSelected",
+            label: "onDateRangeSelected",
+            controlType: "ACTION_SELECTOR",
+          },
+        ],
       },
     ],
     TABLE_WIDGET: [
       {
         sectionName: "General",
-        id: "9",
+        id: "11",
-        children: [],
+        children: [
+          {
+            id: "11.1",
+            propertyName: "label",
+            label: "Enter Table Label",
+            controlType: "INPUT_TEXT",
+          },
+          {
+            id: "11.2",
+            propertyName: "tableData",
+            label: "Enter data array",
+            controlType: "INPUT_TEXT",
+          },
+          {
+            id: "11.3",
+            propertyName: "nextPageKey",
+            label: "Next Pagination Key",
+            controlType: "INPUT_TEXT",
+          },
+          {
+            id: "11.4",
+            propertyName: "prevPageKey",
+            label: "Previous Pagination Key",
+            controlType: "INPUT_TEXT",
+          },
+          {
+            id: "11.5",
+            propertyName: "isVisible",
+            label: "Visibile",
+            controlType: "SWITCH",
+          },
+        ],
+      },
+      {
+        sectionName: "Actions",
+        id: "12",
+        children: [
+          {
+            id: "12.1",
+            propertyName: "tableActions",
+            label: "Record action",
+            controlType: "RECORD_ACTION_SELECTOR",
+          },
+          {
+            id: "12.2",
+            propertyName: "onRowSelected",
+            label: "onRowSelected",
+            controlType: "ACTION_SELECTOR",
+          },
+          {
+            id: "12.3",
+            propertyName: "onPageChange",
+            label: "onPageChange",
+            controlType: "ACTION_SELECTOR",
+          },
+        ],
       },
     ],
     DROP_DOWN_WIDGET: [
       {
         sectionName: "General",
-        id: "10",
+        id: "13",
-        children: [],
+        children: [
+          {
+            id: "13.1",
+            propertyName: "type",
+            label: "Selection Type",
+            controlType: "DROP_DOWN",
+            options: [
+              { label: "Single Select", value: "SINGLE_SELECT" },
+              { label: "Multi Select", value: "MULTI_SELECT" },
+            ],
+          },
+          {
+            id: "13.2",
+            propertyName: "label",
+            label: "Label",
+            controlType: "INPUT_TEXT",
+            placeholderText: "Enter the label",
+          },
+          {
+            id: "13.3",
+            propertyName: "placeholderText",
+            label: "Placeholder",
+            controlType: "INPUT_TEXT",
+            placeholderText: "Enter the placeholder",
+          },
+          {
+            id: "13.4",
+            propertyName: "options",
+            label: "Options",
+            controlType: "OPTION_INPUT",
+          },
+          {
+            id: "13.5",
+            propertyName: "isVisible",
+            label: "Visibile",
+            controlType: "SWITCH",
+          },
+        ],
+      },
+      {
+        sectionName: "Actions",
+        id: "14",
+        children: [
+          {
+            id: "14.1",
+            propertyName: "onOptionSelected",
+            label: "onOptionSelected",
+            controlType: "ACTION_SELECTOR",
+          },
+        ],
       },
     ],
     CHECKBOX_WIDGET: [
       {
         sectionName: "General",
-        id: "11",
+        id: "15",
-        children: [],
+        children: [
+          {
+            id: "15.1",
+            propertyName: "label",
+            label: "Label",
+            controlType: "INPUT_TEXT",
+            placeholderText: "Enter the label",
+          },
+          {
+            id: "15.2",
+            propertyName: "defaultCheckedState",
+            label: "Default State",
+            controlType: "SWITCH",
+          },
+          {
+            id: "13.5",
+            propertyName: "isDisabled",
+            label: "Disabled",
+            controlType: "SWITCH",
+          },
+          {
+            id: "13.5",
+            propertyName: "isVisible",
+            label: "Visibile",
+            controlType: "SWITCH",
+          },
+        ],
+      },
+      {
+        sectionName: "Actions",
+        id: "16",
+        children: [
+          {
+            id: "16.1",
+            propertyName: "onCheckChange",
+            label: "onCheckChange",
+            controlType: "ACTION_SELECTOR",
+          },
+        ],
       },
     ],
     RADIO_GROUP_WIDGET: [
       {
         sectionName: "General",
-        id: "12",
+        id: "16",
-        children: [],
+        children: [
+          {
+            id: "16.1",
+            propertyName: "label",
+            label: "Label",
+            controlType: "INPUT_TEXT",
+            placeholderText: "Enter the label",
+          },
+          {
+            id: "16.2",
+            propertyName: "defaultOptionValue",
+            label: "Default Selected Value",
+            controlType: "SWITCH",
+          },
+          {
+            id: "16.3",
+            propertyName: "options",
+            label: "Options",
+            controlType: "OPTION_INPUT",
+          },
+          {
+            id: "13.5",
+            propertyName: "isVisible",
+            label: "Visibile",
+            controlType: "SWITCH",
+          },
+        ],
       },
-    ],
-    ALERT_WIDGET: [
       {
-        sectionName: "General",
+        sectionName: "Actions",
-        id: "13",
+        id: "17",
-        children: [],
+        children: [
+          {
+            id: "17.1",
+            propertyName: "onOptionSelected",
+            label: "onOptionSelected",
+            controlType: "ACTION_SELECTOR",
+          },
+        ],
       },
     ],
   },

app/client/src/pages/Editor/PropertyPane.tsx

@@ -37,11 +37,7 @@ class PropertyPane extends Component<
     }
   }
 
-  renderPropertySection(
+  renderPropertySection(propertySection: PropertySection, key: string) {
-    propertySection: PropertySection,
-    key: string,
-    isHorizontal?: boolean,
-  ) {
     return (
       <div key={key}>
         {!_.isNil(propertySection) ? (
@@ -51,7 +47,7 @@ class PropertyPane extends Component<
         )}
         <div
           style={
-            isHorizontal
+            propertySection.orientation === "HORIZONTAL"
               ? { flexDirection: "row" }
               : { flexDirection: "column" }
           }
@@ -63,7 +59,6 @@ class PropertyPane extends Component<
                 return this.renderPropertySection(
                   propertyControlOrSection,
                   propertyControlOrSection.id,
-                  true,
                 );
               } else {
                 return PropertyControlFactory.createControl(

app/client/src/pages/propertyControls/InputTextControl.tsx

@@ -2,6 +2,7 @@ import React from "react";
 import BaseControl, { ControlProps } from "./BaseControl";
 import { ControlType } from "../../constants/PropertyControlConstants";
 import { InputGroup } from "@blueprintjs/core";
+import { InputType } from "../../widgets/InputWidget";
 
 class InputTextControl extends BaseControl<InputControlProps> {
   render() {
@@ -19,6 +20,8 @@ class InputTextControl extends BaseControl<InputControlProps> {
 
 export interface InputControlProps extends ControlProps {
   placeholderText: string;
+  inputType: InputType;
+  isDisabled?: boolean;
 }
 
 export default InputTextControl;

app/client/src/reducers/entityReducers/propertyPaneConfigReducer.tsx

@@ -6,17 +6,22 @@ import {
 import PropertyPaneConfigResponse from "../../mockResponses/PropertyPaneConfigResponse";
 import { InputControlProps } from "../../pages/propertyControls/InputTextControl";
 import { DropDownControlProps } from "../../pages/propertyControls/DropDownControl";
+import { ControlProps } from "../../pages/propertyControls/BaseControl";
 
 const initialState: PropertyPaneConfigState = PropertyPaneConfigResponse;
 
 export type ControlConfig =
   | InputControlProps
   | DropDownControlProps
-  | InputControlProps;
+  | InputControlProps
+  | ControlProps;
+
+export type SectionOrientation = "HORIZONTAL" | "VERTICAL";
 
 export interface PropertySection {
   id: string;
-  sectionName: string;
+  sectionName?: string;
+  orientation?: SectionOrientation;
   children: (ControlConfig | PropertySection)[];
 }
 
@@ -34,7 +39,6 @@ export interface PropertyPaneConfigState {
     DROP_DOWN_WIDGET: PropertySection[];
     CHECKBOX_WIDGET: PropertySection[];
     RADIO_GROUP_WIDGET: PropertySection[];
-    ALERT_WIDGET: PropertySection[];
   };
   configVersion: number;
 }

app/client/src/widgets/AlertWidget.tsx

@@ -1,16 +1,12 @@
-import React from "react";
+import React, { Component } from "react";
 import BaseWidget, { WidgetProps, WidgetState } from "./BaseWidget";
 import { WidgetType } from "../constants/WidgetConstants";
 import { ActionPayload } from "../constants/ActionConstants";
 
-class AlertWidget extends BaseWidget<AlertWidgetProps, WidgetState> {
+class AlertWidget extends Component {
   getPageView() {
     return <div />;
   }
-
-  getWidgetType(): WidgetType {
-    return "ALERT_WIDGET";
-  }
 }
 
 export type AlertType = "DIALOG" | "NOTIFICATION";

app/client/src/widgets/ButtonWidget.tsx

@@ -38,6 +38,7 @@ export interface ButtonWidgetProps extends WidgetProps {
   text?: string;
   buttonStyle?: ButtonStyle;
   onClick?: ActionPayload[];
+  isDisabled?: boolean;
 }
 
 export default ButtonWidget;

app/client/src/widgets/DatePickerWidget.tsx

@@ -19,7 +19,7 @@ export type DatePickerType = "DATE_PICKER" | "DATE_RANGE_PICKER";
 
 export interface DatePickerWidgetProps extends WidgetProps {
   defaultDate?: Date;
-  timezone?: TimeZone;
+  defaultTimezone?: TimeZone;
   enableTime: boolean;
   label: string;
   datePickerType: DatePickerType;

app/client/src/widgets/DropdownWidget.tsx

@@ -20,7 +20,7 @@ export interface DropdownOption {
 }
 
 export interface DropdownWidgetProps extends WidgetProps {
-  placeholder?: string;
+  placeholderText?: string;
   label?: string;
   type: SelectionType;
   options?: DropdownOption[];

app/client/src/widgets/InputWidget.tsx

@@ -22,13 +22,19 @@ export type InputType =
   | "CURRENCY"
   | "SEARCH";
 
+export interface InputValidator {
+  validationRegex: string;
+  errorMessage: string;
+}
 export interface InputWidgetProps extends WidgetProps {
-  errorMessage?: string;
   inputType: InputType;
   defaultText?: string;
-  placeholder?: string;
+  placeholderText?: string;
+  maxChars?: number;
   label: string;
+  inputValidators: InputValidator[];
   focusIndex?: number;
+  isAutoFocusEnabled?: boolean;
 }
 
 export default InputWidget;

app/client/src/widgets/TableWidget.tsx

@@ -15,13 +15,18 @@ class TableWidget extends BaseWidget<TableWidgetProps, WidgetState> {
 
 export type PaginationType = "PAGES" | "INFINITE_SCROLL";
 
+export interface TableAction extends ActionPayload {
+  actionName: string;
+}
+
 export interface TableWidgetProps extends WidgetProps {
-  pageKey?: string;
+  nextPageKey?: string;
+  prevPageKey?: string;
   label: string;
   tableData?: object[];
+  recordActions?: TableAction[];
   onPageChange?: ActionPayload[];
   onRowSelected?: ActionPayload[];
-  onColumnActionClick?: Record<string, ActionPayload[]>;
 }
 
 export default TableWidget;

app/client/src/widgets/TextWidget.tsx

@@ -11,7 +11,6 @@ class TextWidget extends BaseWidget<TextWidgetProps, WidgetState> {
         widgetId={this.props.widgetId}
         key={this.props.widgetId}
         text={this.props.text}
-        tagName={this.props.tagName}
       />
     );
   }
@@ -26,7 +25,6 @@ export type TextStyle = "BODY" | "HEADING" | "LABEL" | "SUB_TEXT";
 export interface TextWidgetProps extends WidgetProps {
   text?: string;
   textStyle?: TextStyle;
-  tagName?: keyof JSX.IntrinsicElements;
 }
 
 export default TextWidget;