+ }
ref="editor"
spellCheck={true}
/>
diff --git a/frontend/src/Editor/Components/NumberInput.jsx b/frontend/src/Editor/Components/NumberInput.jsx
index 5a130bf5cc..0092893734 100644
--- a/frontend/src/Editor/Components/NumberInput.jsx
+++ b/frontend/src/Editor/Components/NumberInput.jsx
@@ -72,6 +72,9 @@ export const NumberInput = function NumberInput({
useEffect(() => {
setInputValue(Number(parseFloat(properties.value).toFixed(properties.decimalPlaces)));
+ if (isNaN(Number(parseFloat(properties.value).toFixed(properties.decimalPlaces)))) {
+ setExposedVariable('value', null);
+ }
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [properties.value]);
@@ -144,6 +147,7 @@ export const NumberInput = function NumberInput({
},
clear: async function () {
setInputValue('');
+ setExposedVariable('value', null);
fireEvent('onChange');
},
setLoading: async function (loading) {
@@ -167,7 +171,8 @@ export const NumberInput = function NumberInput({
};
if (!isNaN(value)) {
exposedVariables.value = value;
- }
+ } else exposedVariables.value = null;
+
setExposedVariables(exposedVariables);
isInitialRender.current = false;
diff --git a/frontend/src/Editor/Components/RadioButtonV2/RadioButtonV2.jsx b/frontend/src/Editor/Components/RadioButtonV2/RadioButtonV2.jsx
new file mode 100644
index 0000000000..f1a5d171b4
--- /dev/null
+++ b/frontend/src/Editor/Components/RadioButtonV2/RadioButtonV2.jsx
@@ -0,0 +1,295 @@
+import React, { useEffect, useMemo, useState, useRef } from 'react';
+import Label from '@/_ui/Label';
+import cx from 'classnames';
+import './radioButtonV2.scss';
+import Loader from '@/ToolJetUI/Loader/Loader';
+import { has, isObject } from 'lodash';
+
+export const RadioButtonV2 = ({
+ properties,
+ styles,
+ fireEvent,
+ setExposedVariable,
+ setExposedVariables,
+ darkMode,
+ componentName,
+ validate,
+ validation,
+}) => {
+ const { label, value, options, disabledState, advanced, schema, optionsLoadingState, loadingState } = properties;
+
+ const {
+ activeColor,
+ direction,
+ auto: labelAutoWidth,
+ labelWidth,
+ optionsTextColor,
+ borderColor,
+ switchOffBackgroundColor,
+ handleColor,
+ switchOnBackgroundColor,
+ labelColor,
+ alignment,
+ } = styles;
+
+ const isInitialRender = useRef(true);
+
+ const [checkedValue, setCheckedValue] = useState(advanced ? findDefaultItem(schema) : value);
+ const [visibility, setVisibility] = useState(properties.visibility);
+ const [isLoading, setIsLoading] = useState(loadingState);
+ const [isDisabled, setIsDisabled] = useState(disabledState);
+
+ const isMandatory = validation?.mandatory ?? false;
+ const [validationStatus, setValidationStatus] = useState(validate(checkedValue));
+ const { isValid, validationError } = validationStatus;
+
+ const labelRef = useRef();
+ const radioBtnRef = useRef();
+
+ const selectOptions = useMemo(() => {
+ let _options = advanced ? schema : options;
+ if (Array.isArray(_options)) {
+ let _selectOptions = _options
+ .filter((data) => data?.visible ?? true)
+ .map((data) => ({
+ ...data,
+ label: data?.label,
+ value: data?.value,
+ isDisabled: data?.disable ?? false,
+ }));
+ return _selectOptions;
+ } else {
+ return [];
+ }
+ }, [advanced, schema, options]);
+
+ function findDefaultItem(optionSchema) {
+ if (!Array.isArray(optionSchema)) {
+ return undefined;
+ }
+ const foundItem = optionSchema?.find((item) => item?.default === true && item?.visible === true);
+ return foundItem?.value;
+ }
+
+ function onSelect(value) {
+ const _value = isObject(value) && has(value, 'value') ? value?.value : value;
+ setCheckedValue(_value);
+ setExposedVariable('value', _value);
+ const validationStatus = validate(_value);
+ setValidationStatus(validationStatus);
+ setExposedVariable('isValid', validationStatus?.isValid);
+ }
+
+ useEffect(() => {
+ if (isInitialRender.current) return;
+ if (advanced) {
+ onSelect(findDefaultItem(schema));
+ } else onSelect(value);
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [advanced, JSON.stringify(schema), value]);
+
+ useEffect(() => {
+ if (visibility !== properties.visibility) setVisibility(properties.visibility);
+ if (isLoading !== loadingState) setIsLoading(loadingState);
+ if (isDisabled !== disabledState) setIsDisabled(disabledState);
+
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [properties.visibility, loadingState, disabledState]);
+
+ useEffect(() => {
+ if (isInitialRender.current) return;
+ const _options = selectOptions?.map(({ label, value }) => ({ label, value }));
+ setExposedVariable('options', _options);
+
+ setExposedVariable('selectOption', async function (value) {
+ onSelect(value);
+ fireEvent('onSelectionChange');
+ });
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [JSON.stringify(selectOptions)]);
+
+ useEffect(() => {
+ if (isInitialRender.current) return;
+ setExposedVariable('label', label);
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [label]);
+
+ useEffect(() => {
+ if (isInitialRender.current) return;
+ const validationStatus = validate(checkedValue);
+ setValidationStatus(validationStatus);
+ setExposedVariable('isValid', validationStatus?.isValid);
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [validate]);
+
+ useEffect(() => {
+ if (isInitialRender.current) return;
+ setExposedVariable('isMandatory', isMandatory);
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [isMandatory]);
+
+ useEffect(() => {
+ if (isInitialRender.current) return;
+ setExposedVariable('isLoading', loadingState);
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [loadingState]);
+
+ useEffect(() => {
+ if (isInitialRender.current) return;
+ setExposedVariable('isVisible', properties.visibility);
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [properties.visibility]);
+
+ useEffect(() => {
+ if (isInitialRender.current) return;
+ setExposedVariable('isDisabled', disabledState);
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [disabledState]);
+
+ useEffect(() => {
+ const _options = selectOptions?.map(({ label, value }) => ({ label, value }));
+ const exposedVariables = {
+ value: checkedValue,
+ label: label,
+ options: _options,
+ isValid: isValid,
+ isMandatory: isMandatory,
+ isLoading: loadingState,
+ isVisible: properties.visibility,
+ isDisabled: disabledState,
+ selectOption: async function (value) {
+ onSelect(value);
+ fireEvent('onSelectionChange');
+ },
+ deselectOption: async function () {
+ onSelect(null);
+ fireEvent('onSelectionChange');
+ },
+ setVisibility: async function (value) {
+ setVisibility(value);
+ setExposedVariable('isVisible', value);
+ },
+ setDisable: async function (value) {
+ setIsDisabled(value);
+ setExposedVariable('isDisabled', value);
+ },
+ setLoading: async function (value) {
+ setIsLoading(value);
+ setExposedVariable('isLoading', value);
+ },
+ };
+ setExposedVariables(exposedVariables);
+ isInitialRender.current = false;
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, []);
+
+ const _width = (labelWidth / 100) * 70; // Max width which label can go is 70% for better UX calculate width based on this value
+
+ return (
+ <>
+
+
+
+
+ {isLoading || optionsLoadingState ? (
+
+ ) : (
+
+ {selectOptions.map((option, index) => {
+ const isChecked = checkedValue == option.value;
+ return (
+
+
+ {option.label}
+
+
+ );
+ })}
+
+ )}
+
+
+
+ {!isValid && validationError}
+
+
+ );
+};
diff --git a/frontend/src/Editor/Components/RadioButtonV2/radioButtonV2.scss b/frontend/src/Editor/Components/RadioButtonV2/radioButtonV2.scss
new file mode 100644
index 0000000000..d7552b7bdd
--- /dev/null
+++ b/frontend/src/Editor/Components/RadioButtonV2/radioButtonV2.scss
@@ -0,0 +1,66 @@
+ /* label container */
+ .radio-button-container {
+ position: relative;
+ padding-left: 22px;
+ margin-bottom: 8px;
+ margin-right: 20px;
+ font-size: 14px;
+ line-height: 20px;
+ font-weight: 400;
+ cursor: pointer;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+ }
+
+ // /* Hide the browser's default radio button */
+ .radio-button-container input {
+ position: absolute;
+ opacity: 0;
+ cursor: pointer;
+ }
+
+ /* Create a custom radio button */
+ .checkmark {
+ position: absolute;
+ top: 2px;
+ left: 0;
+ height: 16px;
+ width: 16px;
+ border-radius: 50%;
+ }
+
+ // // /* On mouse-over, add a grey background color */
+ // .radio-button-container:focus input ~ .checkmark {
+ // border-color: red
+ // }
+
+ // /* When the radio button is checked */
+ .radio-button-container input:checked ~ .checkmark {
+ background-color: var(--selected-background-color);
+ border-color: var(--selected-border-color);
+ }
+
+
+ // /* Create the indicator (the dot/circle - hidden when not checked) */
+ .checkmark:after {
+ content: "";
+ position: absolute;
+ display: none;
+ }
+
+ // /* Show the indicator (dot/circle) when checked */
+ .radio-button-container input:checked ~ .checkmark:after {
+ display: block;
+ }
+
+ // /* Style the indicator (dot/circle) */
+ .radio-button-container .checkmark:after {
+ transform: translate(50%, 50%);
+ width: 8px;
+ height: 8px;
+ border-radius: 50%;
+ background: var(--selected-handle-color);
+ }
+
\ No newline at end of file
diff --git a/frontend/src/Editor/Components/RichTextEditor.jsx b/frontend/src/Editor/Components/RichTextEditor.jsx
index 4115d8deb8..2a591afba0 100644
--- a/frontend/src/Editor/Components/RichTextEditor.jsx
+++ b/frontend/src/Editor/Components/RichTextEditor.jsx
@@ -1,4 +1,5 @@
-import React, { useEffect } from 'react';
+/* eslint-disable react-hooks/exhaustive-deps */
+import React, { useEffect, useRef, useState } from 'react';
import 'draft-js/dist/Draft.css';
import { DraftEditor } from './DraftEditor';
@@ -8,17 +9,38 @@ export const RichTextEditor = function RichTextEditor({
properties,
styles,
setExposedVariable,
+ setExposedVariables,
dataCy,
}) {
+ const isInitialRender = useRef(true);
const { visibility, disabledState, boxShadow } = styles;
const placeholder = properties.placeholder;
const defaultValue = properties?.defaultValue ?? '';
- // exposing the default value at first
+ const [isDisabled, setIsDisabled] = useState(disabledState);
+ const [isVisible, setIsVisible] = useState(visibility);
+ const [isLoading, setIsLoading] = useState(properties?.loadingState);
+
useEffect(() => {
- setExposedVariable('value', defaultValue);
- // eslint-disable-next-line react-hooks/exhaustive-deps
- }, []);
+ if (isDisabled !== disabledState) setIsDisabled(disabledState);
+ if (isVisible !== visibility) setIsVisible(visibility);
+ if (isLoading !== properties.loadingState) setIsLoading(properties.loadingState);
+ }, [properties.loadingState, styles.visibility, styles.disabledState]);
+
+ useEffect(() => {
+ if (isInitialRender.current) return;
+ setExposedVariable('isDisabled', disabledState);
+ }, [disabledState]);
+
+ useEffect(() => {
+ if (isInitialRender.current) return;
+ setExposedVariable('isVisible', visibility);
+ }, [visibility]);
+
+ useEffect(() => {
+ if (isInitialRender.current) return;
+ setExposedVariable('isLoading', isLoading);
+ }, [isLoading]);
function handleChange(html) {
setExposedVariable('value', html);
@@ -26,16 +48,25 @@ export const RichTextEditor = function RichTextEditor({
return (
);
diff --git a/frontend/src/Editor/Inspector/Elements/Components/ToolTip.jsx b/frontend/src/Editor/Inspector/Elements/Components/ToolTip.jsx
index 218bbe5e24..57e653ae4c 100644
--- a/frontend/src/Editor/Inspector/Elements/Components/ToolTip.jsx
+++ b/frontend/src/Editor/Inspector/Elements/Components/ToolTip.jsx
@@ -18,8 +18,12 @@ export const ToolTip = ({ label, meta, labelClass, bold = false }) => {
if (meta?.tip) {
return (
-
-
+
+
{label}
diff --git a/frontend/src/Editor/LeftSidebar/SidebarDebugger/Logs.jsx b/frontend/src/Editor/LeftSidebar/SidebarDebugger/Logs.jsx
index 2af66fd6e7..ea7f0e298b 100644
--- a/frontend/src/Editor/LeftSidebar/SidebarDebugger/Logs.jsx
+++ b/frontend/src/Editor/LeftSidebar/SidebarDebugger/Logs.jsx
@@ -8,12 +8,11 @@ import { useEditorActions, useEditorStore } from '@/_stores/editorStore';
function Logs({ logProps, idx }) {
const [open, setOpen] = React.useState(false);
- let titleLogType = logProps?.type;
- // need to change the titleLogType to query for transformations because if transformation fails, it is eventually a query failure
+ let titleLogType = logProps?.type !== 'event' ? logProps?.type : '';
if (titleLogType === 'transformations') {
titleLogType = 'query';
}
- const title = ` [${capitalize(titleLogType)} ${logProps?.key}]`;
+ const title = logProps?.key;
const message =
logProps?.type === 'navToDisablePage'
? logProps?.message
@@ -21,19 +20,21 @@ function Logs({ logProps, idx }) {
? 'Completed'
: logProps?.type === 'component'
? `Invalid property detected: ${logProps?.message}.`
+ : logProps?.type === 'Custom Log'
+ ? logProps?.description
: `${startCase(logProps?.type)} failed: ${
logProps?.description ||
- logProps?.message ||
+ (isString(logProps?.message) && logProps?.message) ||
(isString(logProps?.error?.description) && logProps?.error?.description) || //added string check since description can be an object. eg: runpy
- logProps?.error?.message
+ logProps?.error?.message.trim()
}`;
const defaultStyles = {
- transform: open ? 'rotate(90deg)' : 'rotate(0deg)',
+ transform: open ? 'rotate(0deg)' : 'rotate(-90deg)',
transition: '0.2s all',
display: logProps?.isQuerySuccessLog || logProps.type === 'navToDisablePage' ? 'none' : 'inline-block',
cursor: 'pointer',
- paddingTop: '8px',
+ top: '8px',
pointerEvents: logProps?.isQuerySuccessLog || logProps.type === 'navToDisablePage' ? 'none' : 'default',
};
@@ -85,20 +86,25 @@ function Logs({ logProps, idx }) {
onClick={(e) => {
setOpen((prev) => !prev);
}}
- style={{ pointerEvents: logProps?.isQuerySuccessLog ? 'none' : 'default' }}
+ style={{ pointerEvents: logProps?.isQuerySuccessLog ? 'none' : 'default', position: 'relative' }}
>
-
{logProps.type === 'navToDisablePage' ? (
renderNavToDisabledPageMessage()
) : (
<>
-
- {title}
+
+
{logProps?.errorTarget}
{moment(logProps?.timestamp).fromNow()}
-
+
+
+
+
typeof value === 'string' || value instanceof String;
export default Logs;
+
+const HighlightSecondWord = ({ text }) => {
+ const processedText = text.split(/(\[.*?\])/).map((segment, index) => {
+ if (segment.startsWith('[') && segment.endsWith(']')) {
+ const content = segment.slice(1, -1).split(' ');
+ const firstWord = content[0];
+ const secondWord = content[1];
+
+ return (
+
+ [{firstWord} {secondWord} ]
+
+ );
+ }
+ return segment;
+ });
+
+ return {processedText} ;
+};
diff --git a/frontend/src/Editor/WidgetManager/configs/container.js b/frontend/src/Editor/WidgetManager/configs/container.js
index 32d4158ffc..86e0e9d514 100644
--- a/frontend/src/Editor/WidgetManager/configs/container.js
+++ b/frontend/src/Editor/WidgetManager/configs/container.js
@@ -15,22 +15,86 @@ export const containerConfig = {
loadingState: {
type: 'toggle',
displayName: 'Loading state',
+ section: 'additionalActions',
+ validation: {
+ schema: { type: 'boolean' },
+ defaultValue: false,
+ },
+ },
+ visibility: {
+ type: 'toggle',
+ displayName: 'Visibility',
+ section: 'additionalActions',
+ validation: {
+ schema: { type: 'boolean' },
+ defaultValue: true,
+ },
+ },
+ disabledState: {
+ type: 'toggle',
+ section: 'additionalActions',
+ displayName: 'Disable',
+ validation: {
+ schema: { type: 'boolean' },
+ defaultValue: false,
+ },
+ },
+ showHeader: {
+ type: 'toggle',
+ displayName: 'Show header',
validation: {
schema: { type: 'boolean' },
defaultValue: false,
},
},
},
+ defaultChildren: [
+ {
+ componentName: 'Text',
+ layout: {
+ top: 20,
+ left: 1,
+ height: 40,
+ },
+ displayName: 'ContainerText',
+ properties: ['text'],
+ accessorKey: 'text',
+ styles: ['fontWeight', 'textSize', 'textColor'],
+ defaultValue: {
+ text: 'Container title',
+ fontWeight: 'bold',
+ textSize: 16,
+ textColor: '#000',
+ },
+ },
+ ],
events: {},
styles: {
backgroundColor: {
type: 'color',
- displayName: 'Background color',
+ displayName: 'Background',
validation: {
schema: { type: 'string' },
defaultValue: '#fff',
},
},
+ headerBackgroundColor: {
+ type: 'color',
+ displayName: 'Header',
+ validation: {
+ schema: { type: 'string' },
+ defaultValue: '#fff',
+ },
+ },
+ headerHeight: {
+ type: 'numberInput',
+ displayName: 'Header height',
+ validation: {
+ schema: { type: 'number' },
+ defaultValue: 80,
+ },
+ accordian: 'field',
+ },
borderRadius: {
type: 'code',
displayName: 'Border radius',
@@ -50,40 +114,48 @@ export const containerConfig = {
defaultValue: '#fff',
},
},
- visibility: {
- type: 'toggle',
- displayName: 'Visibility',
- validation: {
- schema: { type: 'boolean' },
- defaultValue: true,
- },
- },
- disabledState: {
- type: 'toggle',
- displayName: 'Disable',
- validation: {
- schema: { type: 'boolean' },
- },
- defaultValue: false,
- },
},
- exposedVariables: {},
+ exposedVariables: {
+ isVisible: true,
+ isDisabled: false,
+ isLoading: false,
+ },
+ actions: [
+ {
+ handle: 'setVisibility',
+ displayName: 'Set visibility',
+ params: [{ handle: 'setVisibility', displayName: 'Value', defaultValue: '{{false}}', type: 'toggle' }],
+ },
+ {
+ handle: 'setLoading',
+ displayName: 'Set disable',
+ params: [{ handle: 'setLoading', displayName: 'Value', defaultValue: '{{false}}', type: 'toggle' }],
+ },
+ {
+ handle: 'setLoading',
+ displayName: 'Set loading',
+ params: [{ handle: 'setLoading', displayName: 'Value', defaultValue: '{{false}}', type: 'toggle' }],
+ },
+ ],
definition: {
others: {
showOnDesktop: { value: '{{true}}' },
showOnMobile: { value: '{{false}}' },
},
properties: {
- visible: { value: '{{true}}' },
loadingState: { value: `{{false}}` },
+ visibility: { value: '{{true}}' },
+ disabledState: { value: '{{false}}' },
},
events: [],
styles: {
backgroundColor: { value: '#fff' },
+ headerBackgroundColor: { value: '#fff' },
borderRadius: { value: '4' },
borderColor: { value: '#fff' },
visibility: { value: '{{true}}' },
disabledState: { value: '{{false}}' },
+ headerHeight: { value: '80' },
},
},
};
diff --git a/frontend/src/Editor/WidgetManager/configs/index.js b/frontend/src/Editor/WidgetManager/configs/index.js
index 1a875d6fa2..d73cd8934f 100644
--- a/frontend/src/Editor/WidgetManager/configs/index.js
+++ b/frontend/src/Editor/WidgetManager/configs/index.js
@@ -9,6 +9,7 @@ import { passinputConfig } from './passwordinput';
import { datepickerConfig } from './datepicker';
import { checkboxConfig } from './checkbox';
import { radiobuttonConfig } from './radiobutton';
+import { radiobuttonV2Config } from './radioButtonV2';
import { toggleswitchConfig } from './toggleswitch';
import { toggleSwitchV2Config } from './toggleswitchv2';
import { textareaConfig } from './textarea';
@@ -65,7 +66,8 @@ export {
passinputConfig,
datepickerConfig,
checkboxConfig,
- radiobuttonConfig,
+ radiobuttonConfig, //!Depreciated
+ radiobuttonV2Config,
toggleswitchConfig, //!Depreciated
toggleSwitchV2Config,
textareaConfig,
diff --git a/frontend/src/Editor/WidgetManager/configs/numberinput.js b/frontend/src/Editor/WidgetManager/configs/numberinput.js
index 148754d5be..f5bc2b1490 100644
--- a/frontend/src/Editor/WidgetManager/configs/numberinput.js
+++ b/frontend/src/Editor/WidgetManager/configs/numberinput.js
@@ -236,7 +236,7 @@ export const numberinputConfig = {
},
],
exposedVariables: {
- value: 99,
+ value: 0,
isMandatory: false,
isVisible: true,
isDisabled: false,
diff --git a/frontend/src/Editor/WidgetManager/configs/radioButtonV2.js b/frontend/src/Editor/WidgetManager/configs/radioButtonV2.js
new file mode 100644
index 0000000000..2ff6ca6c7c
--- /dev/null
+++ b/frontend/src/Editor/WidgetManager/configs/radioButtonV2.js
@@ -0,0 +1,295 @@
+export const radiobuttonV2Config = {
+ name: 'RadioButton',
+ displayName: 'Radio Button',
+ description: 'Select one from multiple choices',
+ component: 'RadioButtonV2',
+ defaultSize: {
+ width: 12,
+ height: 43,
+ },
+ others: {
+ showOnDesktop: { type: 'toggle', displayName: 'Show on desktop' },
+ showOnMobile: { type: 'toggle', displayName: 'Show on mobile' },
+ },
+ validation: {
+ customRule: {
+ type: 'code',
+ displayName: 'Custom validation',
+ placeholder: `{{components.text2.text=='yes'&&'valid'}}`,
+ },
+ mandatory: { type: 'toggle', displayName: 'Make this field mandatory' },
+ },
+ properties: {
+ label: {
+ type: 'code',
+ displayName: 'Label',
+ validation: {
+ schema: { type: 'string' },
+ defaultValue: 'Select',
+ },
+ accordian: 'Data',
+ },
+ advanced: {
+ type: 'toggle',
+ displayName: 'Dynamic options',
+ validation: {
+ schema: { type: 'boolean' },
+ },
+ accordian: 'Options',
+ },
+ schema: {
+ type: 'code',
+ displayName: 'Schema',
+ conditionallyRender: {
+ key: 'advanced',
+ value: true,
+ },
+ accordian: 'Options',
+ },
+ optionsLoadingState: {
+ type: 'toggle',
+ displayName: 'Options loading state',
+ validation: {
+ schema: { type: 'boolean' },
+ },
+ accordian: 'Options',
+ },
+ loadingState: {
+ type: 'toggle',
+ displayName: 'Loading state',
+ validation: { schema: { type: 'boolean' }, defaultValue: true },
+ section: 'additionalActions',
+ },
+ visibility: {
+ type: 'toggle',
+ displayName: 'Visibility',
+ validation: { schema: { type: 'boolean' }, defaultValue: true },
+
+ section: 'additionalActions',
+ },
+ disabledState: {
+ type: 'toggle',
+ displayName: 'Disable',
+ validation: { schema: { type: 'boolean' }, defaultValue: true },
+ section: 'additionalActions',
+ },
+ tooltip: {
+ type: 'code',
+ displayName: 'Tooltip',
+ validation: {
+ schema: { type: 'string' },
+ defaultValue: 'Enter tooltip text',
+ },
+ section: 'additionalActions',
+ placeholder: 'Enter tooltip text',
+ },
+ },
+ events: {
+ onSelectionChange: { displayName: 'On select' },
+ },
+ styles: {
+ labelColor: {
+ type: 'color',
+ displayName: 'Color',
+ validation: { schema: { type: 'string' }, defaultValue: '#1B1F24' },
+ accordian: 'label',
+ },
+ alignment: {
+ type: 'switch',
+ displayName: 'Alignment',
+ validation: { schema: { type: 'string' }, defaultValue: 'side' },
+ options: [
+ { displayName: 'Side', value: 'side' },
+ { displayName: 'Top', value: 'top' },
+ ],
+ accordian: 'label',
+ },
+ direction: {
+ type: 'switch',
+ displayName: 'Direction',
+ validation: { schema: { type: 'string' }, defaultValue: 'left' },
+ showLabel: false,
+ isIcon: true,
+ options: [
+ { displayName: 'alignleftinspector', value: 'left', iconName: 'alignleftinspector' },
+ { displayName: 'alignrightinspector', value: 'right', iconName: 'alignrightinspector' },
+ ],
+ accordian: 'label',
+ },
+ labelWidth: {
+ type: 'slider',
+ displayName: 'Width',
+ accordian: 'label',
+ conditionallyRender: {
+ key: 'alignment',
+ value: 'side',
+ },
+ isFxNotRequired: true,
+ },
+ auto: {
+ type: 'checkbox',
+ displayName: 'auto',
+ showLabel: false,
+ validation: { schema: { type: 'boolean' } },
+ accordian: 'label',
+ conditionallyRender: {
+ key: 'alignment',
+ value: 'side',
+ },
+ isFxNotRequired: true,
+ },
+ borderColor: {
+ type: 'color',
+ displayName: 'Border',
+ validation: {
+ schema: { type: 'string' },
+ },
+ accordian: 'switch',
+ },
+ switchOnBackgroundColor: {
+ type: 'color',
+ displayName: 'Checked background',
+ validation: {
+ schema: { type: 'string' },
+ },
+ accordian: 'switch',
+ tip: 'Checked background',
+ tooltipStyle: {},
+ tooltipPlacement: 'bottom',
+ },
+ switchOffBackgroundColor: {
+ type: 'color',
+ displayName: 'Unchecked background',
+ validation: {
+ schema: { type: 'string' },
+ },
+ accordian: 'switch',
+ tip: 'Unchecked background',
+ tooltipStyle: {},
+ tooltipPlacement: 'bottom',
+ },
+ handleColor: {
+ type: 'color',
+ displayName: 'Handle color',
+ validation: {
+ schema: { type: 'string' },
+ },
+ accordian: 'switch',
+ },
+ optionsTextColor: {
+ type: 'color',
+ displayName: 'Text',
+ validation: {
+ schema: { type: 'string' },
+ },
+ accordian: 'switch',
+ },
+ padding: {
+ type: 'switch',
+ displayName: 'Padding',
+ validation: {
+ schema: { type: 'union', schemas: [{ type: 'string' }, { type: 'number' }] },
+ defaultValue: 'default',
+ },
+ isFxNotRequired: true,
+ options: [
+ { displayName: 'Default', value: 'default' },
+ { displayName: 'None', value: 'none' },
+ ],
+ accordian: 'container',
+ },
+ },
+ actions: [
+ {
+ handle: 'selectOption',
+ displayName: 'Select option',
+ params: [{ handle: 'option', displayName: 'Option' }],
+ },
+ {
+ handle: 'deselectOption',
+ displayName: 'Deselect option',
+ params: [{ handle: 'option', displayName: 'Option' }],
+ },
+ {
+ handle: 'setVisibility',
+ displayName: 'Set visibility',
+ params: [{ handle: 'setVisibility', displayName: 'Value', defaultValue: `{{true}}`, type: 'toggle' }],
+ },
+ {
+ handle: 'setLoading',
+ displayName: 'Set loading',
+ params: [{ handle: 'setLoading', displayName: 'Value', defaultValue: `{{false}}`, type: 'toggle' }],
+ },
+ {
+ handle: 'setDisable',
+ displayName: 'Set disable',
+ params: [{ handle: 'setDisable', displayName: 'Value', defaultValue: `{{false}}`, type: 'toggle' }],
+ },
+ ],
+ exposedVariables: {
+ label: 'Select',
+ },
+ definition: {
+ others: {
+ showOnDesktop: { value: '{{true}}' },
+ showOnMobile: { value: '{{false}}' },
+ },
+ validation: {
+ mandatory: { value: '{{false}}' },
+ },
+ properties: {
+ label: { value: 'Select' },
+ value: { value: '{{"2"}}' },
+ advanced: { value: `{{false}}` },
+ options: {
+ value: [
+ {
+ label: 'option1',
+ value: '1',
+ disable: { value: false },
+ visible: { value: true },
+ default: { value: false },
+ },
+ {
+ label: 'option2',
+ value: '2',
+ disable: { value: false },
+ visible: { value: true },
+ default: { value: true },
+ },
+ {
+ label: 'option3',
+ value: '3',
+ disable: { value: false },
+ visible: { value: true },
+ default: { value: false },
+ },
+ ],
+ },
+ visibility: { value: '{{true}}' },
+ disabledState: { value: '{{false}}' },
+ loadingState: { value: '{{false}}' },
+ optionsLoadingState: { value: '{{false}}' },
+ optionVisibility: { value: '{{[true, true, true]}}' },
+ optionDisable: { value: '{{[false, false, false]}}' },
+ schema: {
+ value:
+ "{{[\t{label: 'option1',value: '1',disable: false,visible: true,default: true},{label: 'option2',value: '2',disable: false,visible: true},{label: 'option3',value: '3',disable: false,visible: true}\t]}}",
+ },
+ },
+ events: [],
+ styles: {
+ labelColor: { value: '#11181C' },
+ direction: { value: 'left' },
+ alignment: { value: 'side' },
+ auto: { value: '{{false}}' },
+ labelWidth: { value: '20' },
+ borderColor: { value: '#FFFFFF' },
+ switchOffBackgroundColor: { value: '#FFFFFF' },
+ switchOnBackgroundColor: { value: '#4368E3' },
+ handleColor: { value: '#FFFFFF' },
+ optionsTextColor: { value: '#11181C' },
+ padding: { value: 'default' },
+ },
+ },
+};
diff --git a/frontend/src/Editor/WidgetManager/configs/radiobutton.js b/frontend/src/Editor/WidgetManager/configs/radiobutton.js
index de1e210894..d6ec057526 100644
--- a/frontend/src/Editor/WidgetManager/configs/radiobutton.js
+++ b/frontend/src/Editor/WidgetManager/configs/radiobutton.js
@@ -1,6 +1,6 @@
export const radiobuttonConfig = {
- name: 'RadioButton',
- displayName: 'Radio Button',
+ name: 'RadioButtonLegacy',
+ displayName: 'Radio Button (Legacy)',
description: 'Select one from multiple choices',
component: 'RadioButton',
defaultSize: {
diff --git a/frontend/src/Editor/WidgetManager/configs/richtextarea.js b/frontend/src/Editor/WidgetManager/configs/richtextarea.js
index eacee66529..c964d53d6b 100644
--- a/frontend/src/Editor/WidgetManager/configs/richtextarea.js
+++ b/frontend/src/Editor/WidgetManager/configs/richtextarea.js
@@ -28,6 +28,15 @@ export const richtextareaConfig = {
defaultValue: 'Default text',
},
},
+ loadingState: {
+ type: 'toggle',
+ displayName: 'Show loading state',
+ validation: {
+ schema: { type: 'boolean' },
+ defaultValue: false,
+ },
+ section: 'additionalActions',
+ },
},
events: {},
styles: {
@@ -55,6 +64,28 @@ export const richtextareaConfig = {
exposedVariables: {
value: '',
},
+ actions: [
+ {
+ handle: 'setValue',
+ displayName: 'Set value',
+ params: [{ handle: 'value', displayName: 'Value', defaultValue: 'New text' }],
+ },
+ {
+ handle: 'setDisable',
+ displayName: 'Set disable',
+ params: [{ handle: 'setDisable', displayName: 'Value', defaultValue: `{{false}}`, type: 'toggle' }],
+ },
+ {
+ handle: 'setVisibility',
+ displayName: 'Set visibility',
+ params: [{ handle: 'setVisibility', displayName: 'Value', defaultValue: `{{true}}`, type: 'toggle' }],
+ },
+ {
+ handle: 'setLoading',
+ displayName: 'Set loading',
+ params: [{ handle: 'setLoading', displayName: 'Value', defaultValue: `{{false}}`, type: 'toggle' }],
+ },
+ ],
definition: {
others: {
showOnDesktop: { value: '{{true}}' },
@@ -63,6 +94,7 @@ export const richtextareaConfig = {
properties: {
placeholder: { value: 'Placeholder text' },
defaultValue: { value: '' },
+ loadingState: { value: `{{false}}` },
},
events: [],
styles: {
diff --git a/frontend/src/Editor/WidgetManager/configs/table.js b/frontend/src/Editor/WidgetManager/configs/table.js
index 554e6f6cc7..df2abc4cbd 100644
--- a/frontend/src/Editor/WidgetManager/configs/table.js
+++ b/frontend/src/Editor/WidgetManager/configs/table.js
@@ -289,6 +289,7 @@ export const tableConfig = {
onCellValueChanged: { displayName: 'Cell value changed' },
onFilterChanged: { displayName: 'Filter changed' },
onNewRowsAdded: { displayName: 'Add new rows' },
+ onTableDataDownload: { displayName: 'Download data' },
},
styles: {
textColor: {
@@ -310,6 +311,16 @@ export const tableConfig = {
{ displayName: 'Wrap', value: 'wrap' },
],
},
+ headerCasing: {
+ type: 'switch',
+ displayName: 'Header casing',
+ validation: { schema: { type: 'string' } },
+ accordian: 'Data',
+ options: [
+ { displayName: 'AA', value: 'uppercase' },
+ { displayName: 'As typed', value: 'none' },
+ ],
+ },
tableType: {
type: 'select',
displayName: 'Row style',
@@ -529,6 +540,7 @@ export const tableConfig = {
value: [
{
name: 'id',
+ key: 'id',
id: 'e3ecbf7fa52c4d7210a93edb8f43776267a489bad52bd108be9588f790126737',
autogenerated: true,
fxActiveFields: [],
@@ -548,6 +560,7 @@ export const tableConfig = {
},
{
name: 'name',
+ key: 'name',
id: '5d2a3744a006388aadd012fcc15cc0dbcb5f9130e0fbb64c558561c97118754a',
autogenerated: true,
fxActiveFields: [],
@@ -556,6 +569,7 @@ export const tableConfig = {
},
{
name: 'email',
+ key: 'email',
id: 'afc9a5091750a1bd4760e38760de3b4be11a43452ae8ae07ce2eebc569fe9a7f',
autogenerated: true,
fxActiveFields: [],
@@ -564,6 +578,7 @@ export const tableConfig = {
},
{
name: 'date',
+ key: 'date',
id: '27b75c8af9d34d1eaa1f9bb7f8f9f7b0abf1823e799748c8bb57e74f53b2c1dc',
autogenerated: true,
fxActiveFields: [],
@@ -576,6 +591,7 @@ export const tableConfig = {
},
{
name: 'mobile_number',
+ key: 'mobile_number',
id: '9c2e3c40572a4aefb8e179ee39a0e1ac9dc2b2e6634be56e1c05be13c3d1de56',
autogenerated: true,
fxActiveFields: [],
@@ -652,6 +668,7 @@ export const tableConfig = {
styles: {
textColor: { value: '#000' },
columnHeaderWrap: { value: 'fixed' },
+ headerCasing: { value: 'uppercase' },
actionButtonRadius: { value: '0' },
cellSize: { value: 'regular' },
borderRadius: { value: '8' },
diff --git a/frontend/src/Editor/WidgetManager/constants.js b/frontend/src/Editor/WidgetManager/constants.js
index 4653d6ff72..35ea9d5252 100644
--- a/frontend/src/Editor/WidgetManager/constants.js
+++ b/frontend/src/Editor/WidgetManager/constants.js
@@ -1 +1 @@
-export const LEGACY_ITEMS = ['ToggleSwitchLegacy', 'DropdownLegacy', 'MultiselectLegacy'];
+export const LEGACY_ITEMS = ['ToggleSwitchLegacy', 'DropdownLegacy', 'MultiselectLegacy', 'RadioButtonLegacy'];
diff --git a/frontend/src/Editor/WidgetManager/widgetConfig.js b/frontend/src/Editor/WidgetManager/widgetConfig.js
index a7b020e451..30bfdfc7f2 100644
--- a/frontend/src/Editor/WidgetManager/widgetConfig.js
+++ b/frontend/src/Editor/WidgetManager/widgetConfig.js
@@ -10,6 +10,7 @@ import {
datepickerConfig,
checkboxConfig,
radiobuttonConfig,
+ radiobuttonV2Config,
toggleswitchConfig,
toggleSwitchV2Config,
textareaConfig,
@@ -68,6 +69,7 @@ export const widgets = [
datepickerConfig,
checkboxConfig,
radiobuttonConfig,
+ radiobuttonV2Config,
toggleswitchConfig,
toggleSwitchV2Config,
textareaConfig,
diff --git a/frontend/src/_styles/left-sidebar.scss b/frontend/src/_styles/left-sidebar.scss
index 0a5b441d66..5a9d022485 100644
--- a/frontend/src/_styles/left-sidebar.scss
+++ b/frontend/src/_styles/left-sidebar.scss
@@ -232,11 +232,24 @@
}
.debugger-content {
+ padding: 0px 16px;
background-color: var(--base);
+ cursor: pointer;
hr {
- margin-top: 0px !important;
- margin-bottom: 16px !important;
+ margin: 0px !important;
+ margin-top: 16px !important;
+ }
+
+ &:hover {
+ background-color: var(--slate3);
+ }
+
+ .error-target {
+ background-color: var(--interactive-overlays-fill-hover) !important;
+ padding: 4px 7px;
+ border-radius: 7px;
+ color: var(--slate10)
}
}
diff --git a/frontend/src/_styles/theme.scss b/frontend/src/_styles/theme.scss
index c2713edf51..2fe54d0af5 100644
--- a/frontend/src/_styles/theme.scss
+++ b/frontend/src/_styles/theme.scss
@@ -14400,7 +14400,6 @@ color: var(--text-default);
.debugger-card-body {
margin-top: 8px;
margin-bottom: 16px;
- padding: 0px 16px;
}
.left-sidebar-header-btn {
@@ -14743,7 +14742,6 @@ color: var(--text-default);
.debugger-card-body {
margin-top: 8px;
margin-bottom: 16px;
- padding: 0px 16px;
}
.left-sidebar-header-btn {
@@ -15103,7 +15101,6 @@ color: var(--text-default);
.debugger-card-body {
margin-top: 8px;
margin-bottom: 16px;
- padding: 0px 16px;
}
.left-sidebar-header-btn {
diff --git a/server/.version b/server/.version
index a35c54823f..c9e290188f 100644
--- a/server/.version
+++ b/server/.version
@@ -1 +1 @@
-3.0.5-ce
+3.1.0-ce
diff --git a/server/package.json b/server/package.json
index 4f66f7de3d..708d9f910d 100644
--- a/server/package.json
+++ b/server/package.json
@@ -7,6 +7,7 @@
"scripts": {
"prebuild": "rimraf dist",
"build": "nest build",
+ "postbuild": "npm run copy-schemas",
"lint": "eslint . '**/*.ts'",
"format": "eslint . --fix '**/*.ts'",
"start": "nest start",
@@ -32,7 +33,8 @@
"db:setup": "npm run db:create && npm run db:migrate",
"db:setup:prod": "npm run db:create:prod && npm run db:migrate:prod",
"db:reset": "npm run db:drop && npm run db:setup",
- "typeorm": "typeorm-ts-node-commonjs"
+ "typeorm": "typeorm-ts-node-commonjs",
+ "copy-schemas": "copyfiles -u 4 src/dto/validators/schemas/**/*.json dist/src/dto/validators/schemas"
},
"dependencies": {
"@casl/ability": "^5.3.1",
@@ -60,6 +62,7 @@
"class-validator": "^0.14.0",
"compression": "^1.7.4",
"cookie-parser": "^1.4.6",
+ "copyfiles": "^2.4.1",
"dotenv": "^10.0.0",
"express-http-proxy": "^1.6.3",
"fast-csv": "^4.3.6",
@@ -76,8 +79,8 @@
"lodash": "^4.17.21",
"module-from-string": "^3.3.0",
"nestjs-pino": "^1.4.0",
- "node-sql-parser": "^5.3.1",
"node-mailer": "^0.1.1",
+ "node-sql-parser": "^5.3.1",
"nodemailer": "^6.6.3",
"passport": "^0.7.0",
"passport-jwt": "^4.0.0",
@@ -152,4 +155,4 @@
"node": "18.18.2",
"npm": "9.8.1"
}
-}
\ No newline at end of file
+}
diff --git a/server/src/helpers/utils.helper.ts b/server/src/helpers/utils.helper.ts
index 41dde11284..db24cae2f2 100644
--- a/server/src/helpers/utils.helper.ts
+++ b/server/src/helpers/utils.helper.ts
@@ -433,4 +433,4 @@ export const getSubpath = () => {
}
}
return subpath;
-};
\ No newline at end of file
+};
diff --git a/server/src/helpers/widget-config/container.js b/server/src/helpers/widget-config/container.js
index 32d4158ffc..ed0ba5537e 100644
--- a/server/src/helpers/widget-config/container.js
+++ b/server/src/helpers/widget-config/container.js
@@ -15,6 +15,33 @@ export const containerConfig = {
loadingState: {
type: 'toggle',
displayName: 'Loading state',
+ section: 'additionalActions',
+ validation: {
+ schema: { type: 'boolean' },
+ defaultValue: false,
+ },
+ },
+ visibility: {
+ type: 'toggle',
+ displayName: 'Visibility',
+ section: 'additionalActions',
+ validation: {
+ schema: { type: 'boolean' },
+ defaultValue: true,
+ },
+ },
+ disabledState: {
+ type: 'toggle',
+ displayName: 'Disable',
+ section: 'additionalActions',
+ validation: {
+ schema: { type: 'boolean' },
+ defaultValue: false,
+ },
+ },
+ showHeader: {
+ type: 'toggle',
+ displayName: 'Show header',
validation: {
schema: { type: 'boolean' },
defaultValue: false,
@@ -25,12 +52,29 @@ export const containerConfig = {
styles: {
backgroundColor: {
type: 'color',
- displayName: 'Background color',
+ displayName: 'Background',
validation: {
schema: { type: 'string' },
defaultValue: '#fff',
},
},
+ headerBackgroundColor: {
+ type: 'color',
+ displayName: 'Header',
+ validation: {
+ schema: { type: 'string' },
+ defaultValue: '#fff',
+ },
+ },
+ headerHeight: {
+ type: 'numberInput',
+ displayName: 'Header height',
+ validation: {
+ schema: { type: 'number' },
+ defaultValue: 80,
+ },
+ accordian: 'field',
+ },
borderRadius: {
type: 'code',
displayName: 'Border radius',
@@ -50,40 +94,67 @@ export const containerConfig = {
defaultValue: '#fff',
},
},
- visibility: {
- type: 'toggle',
- displayName: 'Visibility',
- validation: {
- schema: { type: 'boolean' },
- defaultValue: true,
- },
- },
- disabledState: {
- type: 'toggle',
- displayName: 'Disable',
- validation: {
- schema: { type: 'boolean' },
- },
- defaultValue: false,
- },
},
- exposedVariables: {},
+
+ defaultChildren: [
+ {
+ componentName: 'Text',
+ layout: {
+ top: 20,
+ left: 1,
+ height: 40,
+ },
+ displayName: 'ContainerText',
+ properties: ['text'],
+ accessorKey: 'text',
+ styles: ['fontWeight', 'textSize', 'textColor'],
+ defaultValue: {
+ text: 'Container title',
+ fontWeight: 'bold',
+ textSize: 16,
+ textColor: '#000',
+ },
+ },
+ ],
+ exposedVariables: {
+ isVisible: true,
+ isDisabled: false,
+ isLoading: false,
+ },
+ actions: [
+ {
+ handle: 'setVisibility',
+ displayName: 'Set visibility',
+ params: [{ handle: 'setVisibility', displayName: 'Value', defaultValue: '{{false}}', type: 'toggle' }],
+ },
+ {
+ handle: 'setDisable',
+ displayName: 'Set disable',
+ params: [{ handle: 'setDisable', displayName: 'Value', defaultValue: '{{false}}', type: 'toggle' }],
+ },
+ {
+ handle: 'setLoading',
+ displayName: 'Set loading',
+ params: [{ handle: 'setLoading', displayName: 'Value', defaultValue: '{{false}}', type: 'toggle' }],
+ },
+ ],
definition: {
others: {
showOnDesktop: { value: '{{true}}' },
showOnMobile: { value: '{{false}}' },
},
properties: {
- visible: { value: '{{true}}' },
loadingState: { value: `{{false}}` },
+ visibility: { value: '{{true}}' },
+ disabledState: { value: '{{false}}' },
},
events: [],
styles: {
backgroundColor: { value: '#fff' },
+ headerBackgroundColor: { value: '#fff' },
borderRadius: { value: '4' },
borderColor: { value: '#fff' },
- visibility: { value: '{{true}}' },
- disabledState: { value: '{{false}}' },
+ headerHeight: { value: `80`, },
},
},
};
diff --git a/server/src/helpers/widget-config/index.js b/server/src/helpers/widget-config/index.js
index 54a6964eff..1482001a4b 100644
--- a/server/src/helpers/widget-config/index.js
+++ b/server/src/helpers/widget-config/index.js
@@ -9,6 +9,7 @@ import { passinputConfig } from './passwordinput';
import { datepickerConfig } from './datepicker';
import { checkboxConfig } from './checkbox';
import { radiobuttonConfig } from './radiobutton';
+import { radiobuttonV2Config } from './radioButtonV2';
import { toggleswitchConfig } from './toggleswitch';
import { toggleSwitchV2Config } from './toggleswitchv2';
import { textareaConfig } from './textarea';
@@ -65,7 +66,8 @@ const widgets = {
passinputConfig,
datepickerConfig,
checkboxConfig,
- radiobuttonConfig,
+ radiobuttonConfig, //!Depreciated
+ radiobuttonV2Config,
toggleswitchConfig, //!Depreciated
toggleSwitchV2Config,
textareaConfig,
diff --git a/server/src/helpers/widget-config/numberinput.js b/server/src/helpers/widget-config/numberinput.js
index ba7f2bc227..b0f72e6d81 100644
--- a/server/src/helpers/widget-config/numberinput.js
+++ b/server/src/helpers/widget-config/numberinput.js
@@ -236,7 +236,7 @@ export const numberinputConfig = {
},
],
exposedVariables: {
- value: 99,
+ value: 0,
isMandatory: false,
isVisible: true,
isDisabled: false,
diff --git a/server/src/helpers/widget-config/radioButtonV2.js b/server/src/helpers/widget-config/radioButtonV2.js
new file mode 100644
index 0000000000..2ff6ca6c7c
--- /dev/null
+++ b/server/src/helpers/widget-config/radioButtonV2.js
@@ -0,0 +1,295 @@
+export const radiobuttonV2Config = {
+ name: 'RadioButton',
+ displayName: 'Radio Button',
+ description: 'Select one from multiple choices',
+ component: 'RadioButtonV2',
+ defaultSize: {
+ width: 12,
+ height: 43,
+ },
+ others: {
+ showOnDesktop: { type: 'toggle', displayName: 'Show on desktop' },
+ showOnMobile: { type: 'toggle', displayName: 'Show on mobile' },
+ },
+ validation: {
+ customRule: {
+ type: 'code',
+ displayName: 'Custom validation',
+ placeholder: `{{components.text2.text=='yes'&&'valid'}}`,
+ },
+ mandatory: { type: 'toggle', displayName: 'Make this field mandatory' },
+ },
+ properties: {
+ label: {
+ type: 'code',
+ displayName: 'Label',
+ validation: {
+ schema: { type: 'string' },
+ defaultValue: 'Select',
+ },
+ accordian: 'Data',
+ },
+ advanced: {
+ type: 'toggle',
+ displayName: 'Dynamic options',
+ validation: {
+ schema: { type: 'boolean' },
+ },
+ accordian: 'Options',
+ },
+ schema: {
+ type: 'code',
+ displayName: 'Schema',
+ conditionallyRender: {
+ key: 'advanced',
+ value: true,
+ },
+ accordian: 'Options',
+ },
+ optionsLoadingState: {
+ type: 'toggle',
+ displayName: 'Options loading state',
+ validation: {
+ schema: { type: 'boolean' },
+ },
+ accordian: 'Options',
+ },
+ loadingState: {
+ type: 'toggle',
+ displayName: 'Loading state',
+ validation: { schema: { type: 'boolean' }, defaultValue: true },
+ section: 'additionalActions',
+ },
+ visibility: {
+ type: 'toggle',
+ displayName: 'Visibility',
+ validation: { schema: { type: 'boolean' }, defaultValue: true },
+
+ section: 'additionalActions',
+ },
+ disabledState: {
+ type: 'toggle',
+ displayName: 'Disable',
+ validation: { schema: { type: 'boolean' }, defaultValue: true },
+ section: 'additionalActions',
+ },
+ tooltip: {
+ type: 'code',
+ displayName: 'Tooltip',
+ validation: {
+ schema: { type: 'string' },
+ defaultValue: 'Enter tooltip text',
+ },
+ section: 'additionalActions',
+ placeholder: 'Enter tooltip text',
+ },
+ },
+ events: {
+ onSelectionChange: { displayName: 'On select' },
+ },
+ styles: {
+ labelColor: {
+ type: 'color',
+ displayName: 'Color',
+ validation: { schema: { type: 'string' }, defaultValue: '#1B1F24' },
+ accordian: 'label',
+ },
+ alignment: {
+ type: 'switch',
+ displayName: 'Alignment',
+ validation: { schema: { type: 'string' }, defaultValue: 'side' },
+ options: [
+ { displayName: 'Side', value: 'side' },
+ { displayName: 'Top', value: 'top' },
+ ],
+ accordian: 'label',
+ },
+ direction: {
+ type: 'switch',
+ displayName: 'Direction',
+ validation: { schema: { type: 'string' }, defaultValue: 'left' },
+ showLabel: false,
+ isIcon: true,
+ options: [
+ { displayName: 'alignleftinspector', value: 'left', iconName: 'alignleftinspector' },
+ { displayName: 'alignrightinspector', value: 'right', iconName: 'alignrightinspector' },
+ ],
+ accordian: 'label',
+ },
+ labelWidth: {
+ type: 'slider',
+ displayName: 'Width',
+ accordian: 'label',
+ conditionallyRender: {
+ key: 'alignment',
+ value: 'side',
+ },
+ isFxNotRequired: true,
+ },
+ auto: {
+ type: 'checkbox',
+ displayName: 'auto',
+ showLabel: false,
+ validation: { schema: { type: 'boolean' } },
+ accordian: 'label',
+ conditionallyRender: {
+ key: 'alignment',
+ value: 'side',
+ },
+ isFxNotRequired: true,
+ },
+ borderColor: {
+ type: 'color',
+ displayName: 'Border',
+ validation: {
+ schema: { type: 'string' },
+ },
+ accordian: 'switch',
+ },
+ switchOnBackgroundColor: {
+ type: 'color',
+ displayName: 'Checked background',
+ validation: {
+ schema: { type: 'string' },
+ },
+ accordian: 'switch',
+ tip: 'Checked background',
+ tooltipStyle: {},
+ tooltipPlacement: 'bottom',
+ },
+ switchOffBackgroundColor: {
+ type: 'color',
+ displayName: 'Unchecked background',
+ validation: {
+ schema: { type: 'string' },
+ },
+ accordian: 'switch',
+ tip: 'Unchecked background',
+ tooltipStyle: {},
+ tooltipPlacement: 'bottom',
+ },
+ handleColor: {
+ type: 'color',
+ displayName: 'Handle color',
+ validation: {
+ schema: { type: 'string' },
+ },
+ accordian: 'switch',
+ },
+ optionsTextColor: {
+ type: 'color',
+ displayName: 'Text',
+ validation: {
+ schema: { type: 'string' },
+ },
+ accordian: 'switch',
+ },
+ padding: {
+ type: 'switch',
+ displayName: 'Padding',
+ validation: {
+ schema: { type: 'union', schemas: [{ type: 'string' }, { type: 'number' }] },
+ defaultValue: 'default',
+ },
+ isFxNotRequired: true,
+ options: [
+ { displayName: 'Default', value: 'default' },
+ { displayName: 'None', value: 'none' },
+ ],
+ accordian: 'container',
+ },
+ },
+ actions: [
+ {
+ handle: 'selectOption',
+ displayName: 'Select option',
+ params: [{ handle: 'option', displayName: 'Option' }],
+ },
+ {
+ handle: 'deselectOption',
+ displayName: 'Deselect option',
+ params: [{ handle: 'option', displayName: 'Option' }],
+ },
+ {
+ handle: 'setVisibility',
+ displayName: 'Set visibility',
+ params: [{ handle: 'setVisibility', displayName: 'Value', defaultValue: `{{true}}`, type: 'toggle' }],
+ },
+ {
+ handle: 'setLoading',
+ displayName: 'Set loading',
+ params: [{ handle: 'setLoading', displayName: 'Value', defaultValue: `{{false}}`, type: 'toggle' }],
+ },
+ {
+ handle: 'setDisable',
+ displayName: 'Set disable',
+ params: [{ handle: 'setDisable', displayName: 'Value', defaultValue: `{{false}}`, type: 'toggle' }],
+ },
+ ],
+ exposedVariables: {
+ label: 'Select',
+ },
+ definition: {
+ others: {
+ showOnDesktop: { value: '{{true}}' },
+ showOnMobile: { value: '{{false}}' },
+ },
+ validation: {
+ mandatory: { value: '{{false}}' },
+ },
+ properties: {
+ label: { value: 'Select' },
+ value: { value: '{{"2"}}' },
+ advanced: { value: `{{false}}` },
+ options: {
+ value: [
+ {
+ label: 'option1',
+ value: '1',
+ disable: { value: false },
+ visible: { value: true },
+ default: { value: false },
+ },
+ {
+ label: 'option2',
+ value: '2',
+ disable: { value: false },
+ visible: { value: true },
+ default: { value: true },
+ },
+ {
+ label: 'option3',
+ value: '3',
+ disable: { value: false },
+ visible: { value: true },
+ default: { value: false },
+ },
+ ],
+ },
+ visibility: { value: '{{true}}' },
+ disabledState: { value: '{{false}}' },
+ loadingState: { value: '{{false}}' },
+ optionsLoadingState: { value: '{{false}}' },
+ optionVisibility: { value: '{{[true, true, true]}}' },
+ optionDisable: { value: '{{[false, false, false]}}' },
+ schema: {
+ value:
+ "{{[\t{label: 'option1',value: '1',disable: false,visible: true,default: true},{label: 'option2',value: '2',disable: false,visible: true},{label: 'option3',value: '3',disable: false,visible: true}\t]}}",
+ },
+ },
+ events: [],
+ styles: {
+ labelColor: { value: '#11181C' },
+ direction: { value: 'left' },
+ alignment: { value: 'side' },
+ auto: { value: '{{false}}' },
+ labelWidth: { value: '20' },
+ borderColor: { value: '#FFFFFF' },
+ switchOffBackgroundColor: { value: '#FFFFFF' },
+ switchOnBackgroundColor: { value: '#4368E3' },
+ handleColor: { value: '#FFFFFF' },
+ optionsTextColor: { value: '#11181C' },
+ padding: { value: 'default' },
+ },
+ },
+};
diff --git a/server/src/helpers/widget-config/richtextarea.js b/server/src/helpers/widget-config/richtextarea.js
index eacee66529..c964d53d6b 100644
--- a/server/src/helpers/widget-config/richtextarea.js
+++ b/server/src/helpers/widget-config/richtextarea.js
@@ -28,6 +28,15 @@ export const richtextareaConfig = {
defaultValue: 'Default text',
},
},
+ loadingState: {
+ type: 'toggle',
+ displayName: 'Show loading state',
+ validation: {
+ schema: { type: 'boolean' },
+ defaultValue: false,
+ },
+ section: 'additionalActions',
+ },
},
events: {},
styles: {
@@ -55,6 +64,28 @@ export const richtextareaConfig = {
exposedVariables: {
value: '',
},
+ actions: [
+ {
+ handle: 'setValue',
+ displayName: 'Set value',
+ params: [{ handle: 'value', displayName: 'Value', defaultValue: 'New text' }],
+ },
+ {
+ handle: 'setDisable',
+ displayName: 'Set disable',
+ params: [{ handle: 'setDisable', displayName: 'Value', defaultValue: `{{false}}`, type: 'toggle' }],
+ },
+ {
+ handle: 'setVisibility',
+ displayName: 'Set visibility',
+ params: [{ handle: 'setVisibility', displayName: 'Value', defaultValue: `{{true}}`, type: 'toggle' }],
+ },
+ {
+ handle: 'setLoading',
+ displayName: 'Set loading',
+ params: [{ handle: 'setLoading', displayName: 'Value', defaultValue: `{{false}}`, type: 'toggle' }],
+ },
+ ],
definition: {
others: {
showOnDesktop: { value: '{{true}}' },
@@ -63,6 +94,7 @@ export const richtextareaConfig = {
properties: {
placeholder: { value: 'Placeholder text' },
defaultValue: { value: '' },
+ loadingState: { value: `{{false}}` },
},
events: [],
styles: {
diff --git a/server/src/helpers/widget-config/table.js b/server/src/helpers/widget-config/table.js
index eb08ac88c8..735feccbc7 100644
--- a/server/src/helpers/widget-config/table.js
+++ b/server/src/helpers/widget-config/table.js
@@ -289,6 +289,7 @@ export const tableConfig = {
onCellValueChanged: { displayName: 'Cell value changed' },
onFilterChanged: { displayName: 'Filter changed' },
onNewRowsAdded: { displayName: 'Add new rows' },
+ onTableDataDownload: { displayName: 'Download data' },
},
styles: {
textColor: {
@@ -310,6 +311,16 @@ export const tableConfig = {
{ displayName: 'Wrap', value: 'wrap' },
],
},
+ headerCasing: {
+ type: 'switch',
+ displayName: 'Header casing',
+ validation: { schema: { type: 'string' } },
+ accordian: 'Data',
+ options: [
+ { displayName: 'AA', value: 'uppercase' },
+ { displayName: 'As typed', value: 'none' },
+ ],
+ },
tableType: {
type: 'select',
displayName: 'Row style',
@@ -530,6 +541,7 @@ export const tableConfig = {
value: [
{
name: 'id',
+ key: 'id',
id: 'e3ecbf7fa52c4d7210a93edb8f43776267a489bad52bd108be9588f790126737',
autogenerated: true,
fxActiveFields: [],
@@ -549,6 +561,7 @@ export const tableConfig = {
},
{
name: 'name',
+ key: 'name',
id: '5d2a3744a006388aadd012fcc15cc0dbcb5f9130e0fbb64c558561c97118754a',
autogenerated: true,
fxActiveFields: [],
@@ -557,6 +570,7 @@ export const tableConfig = {
},
{
name: 'email',
+ key: 'email',
id: 'afc9a5091750a1bd4760e38760de3b4be11a43452ae8ae07ce2eebc569fe9a7f',
autogenerated: true,
fxActiveFields: [],
@@ -565,6 +579,7 @@ export const tableConfig = {
},
{
name: 'date',
+ key: 'date',
id: '27b75c8af9d34d1eaa1f9bb7f8f9f7b0abf1823e799748c8bb57e74f53b2c1dc',
autogenerated: true,
fxActiveFields: [],
@@ -577,6 +592,7 @@ export const tableConfig = {
},
{
name: 'phone',
+ key: 'phone',
id: '9c2e3c40572a4aefb8e179ee39a0e1ac9dc2b2e6634be56e1c05be13c3d1de56',
autogenerated: true,
fxActiveFields: [],
@@ -653,6 +669,7 @@ export const tableConfig = {
styles: {
textColor: { value: '#000' },
columnHeaderWrap: { value: 'fixed' },
+ headerCasing: { value: 'uppercase' },
actionButtonRadius: { value: '0' },
cellSize: { value: 'regular' },
borderRadius: { value: '8' },
diff --git a/server/tsconfig.json b/server/tsconfig.json
index 3a77c5a9b0..f8d3eef313 100644
--- a/server/tsconfig.json
+++ b/server/tsconfig.json
@@ -1,5 +1,6 @@
{
"compilerOptions": {
+ "resolveJsonModule": true,
"module": "commonjs",
"declaration": true,
"removeComments": true,