{
}}
className={`app-${appId}`}
>
-
{environmentLoadingState !== 'loading' && (
diff --git a/frontend/src/AppBuilder/AppCanvas/AutoComputeMobileLayoutAlert.jsx b/frontend/src/AppBuilder/AppCanvas/AutoComputeMobileLayoutAlert.jsx
index a36209e525..1124c326ad 100644
--- a/frontend/src/AppBuilder/AppCanvas/AutoComputeMobileLayoutAlert.jsx
+++ b/frontend/src/AppBuilder/AppCanvas/AutoComputeMobileLayoutAlert.jsx
@@ -77,6 +77,7 @@ export default function AutoComputeMobileLayoutAlert({ currentLayout, darkMode }
padding: 'var(--7, 16px)',
background: 'var(--base)',
margin: '10px',
+ zIndex: '1',
}}
className="d-flex flex-row"
>
diff --git a/frontend/src/AppBuilder/AppCanvas/Container.jsx b/frontend/src/AppBuilder/AppCanvas/Container.jsx
index 8b6e27f4e6..d2f6625488 100644
--- a/frontend/src/AppBuilder/AppCanvas/Container.jsx
+++ b/frontend/src/AppBuilder/AppCanvas/Container.jsx
@@ -5,7 +5,7 @@ import WidgetWrapper from './WidgetWrapper';
import useStore from '@/AppBuilder/_stores/store';
import { shallow } from 'zustand/shallow';
import { useDrop } from 'react-dnd';
-import { addChildrenWidgetsToParent, addNewWidgetToTheEditor } from './appCanvasUtils';
+import { addChildrenWidgetsToParent, addNewWidgetToTheEditor, computeViewerBackgroundColor } from './appCanvasUtils';
import { CANVAS_WIDTHS, NO_OF_GRIDS, WIDGETS_WITH_DEFAULT_CHILDREN } from './appCanvasConstants';
import { useGridStore } from '@/_stores/gridStore';
import NoComponentCanvasContainer from './NoComponentCanvasContainer';
@@ -40,7 +40,6 @@ export const Container = React.memo(
const components = useStore((state) => state.getContainerChildrenMapping(id), shallow);
const componentType = useStore((state) => state.getComponentTypeFromId(id), shallow);
const addComponentToCurrentPage = useStore((state) => state.addComponentToCurrentPage, shallow);
- const setSelectedComponents = useStore((state) => state.setSelectedComponents, shallow);
const setActiveRightSideBarTab = useStore((state) => state.setActiveRightSideBarTab, shallow);
const canvasBgColor = useStore(
(state) => (id === 'canvas' ? state.getCanvasBackgroundColor('canvas', darkMode) : ''),
@@ -124,7 +123,12 @@ export const Container = React.memo(
height: id === 'canvas' ? `${canvasHeight}` : '100%',
// backgroundSize: '25.3953px 10px',
backgroundSize: `${gridWidth}px 10px`,
- backgroundColor: id === 'canvas' ? canvasBgColor : '#f0f0f0',
+ backgroundColor:
+ currentMode === 'view'
+ ? computeViewerBackgroundColor(darkMode, canvasBgColor)
+ : id === 'canvas'
+ ? canvasBgColor
+ : '#f0f0f0',
width: getCanvasWidth(),
maxWidth: (() => {
// For Main Canvas
diff --git a/frontend/src/AppBuilder/AppCanvas/Grid/Grid.jsx b/frontend/src/AppBuilder/AppCanvas/Grid/Grid.jsx
index 985b62eb89..a8a10caf55 100644
--- a/frontend/src/AppBuilder/AppCanvas/Grid/Grid.jsx
+++ b/frontend/src/AppBuilder/AppCanvas/Grid/Grid.jsx
@@ -44,7 +44,8 @@ export default function Grid({ gridWidth, currentLayout }) {
const isGroupHandleHoverd = useIsGroupHandleHoverd();
const openModalWidgetId = useOpenModalWidgetId();
const moveableRef = useRef(null);
- const [triggerCanvasUpdater, setTriggerCanvasUpdater] = useState(false);
+ const triggerCanvasUpdater = useStore((state) => state.triggerCanvasUpdater, shallow);
+ const toggleCanvasUpdater = useStore((state) => state.toggleCanvasUpdater, shallow);
const groupResizeDataRef = useRef([]);
const isDraggingRef = useRef(false);
const canvasWidth = NO_OF_GRIDS * gridWidth;
@@ -347,7 +348,7 @@ export default function Grid({ gridWidth, currentLayout }) {
return layouts;
}, {});
setComponentLayout(updatedLayouts, newParent, undefined, { updateParent: true });
- setTriggerCanvasUpdater((prev) => !prev);
+ toggleCanvasUpdater();
},
// eslint-disable-next-line react-hooks/exhaustive-deps
[boxList, currentLayout, gridWidth]
@@ -488,7 +489,7 @@ export default function Grid({ gridWidth, currentLayout }) {
console.error('ResizeEnd error ->', error);
}
useGridStore.getState().actions.setDragTarget();
- setTriggerCanvasUpdater((prev) => !prev);
+ toggleCanvasUpdater();
}}
onResizeStart={(e) => {
if (!isComponentVisible(e.target.id)) {
@@ -575,7 +576,7 @@ export default function Grid({ gridWidth, currentLayout }) {
} catch (error) {
console.error('Error resizing group', error);
}
- setTriggerCanvasUpdater((prev) => !prev);
+ toggleCanvasUpdater();
}}
checkInput
onDragStart={(e) => {
@@ -595,7 +596,10 @@ export default function Grid({ gridWidth, currentLayout }) {
isDragOnTableORCalendar = tableElem.contains(e.inputEvent.target);
}
if (box?.component?.component === 'Calendar') {
- const calenderElem = e.target.querySelector('.rbc-month-view');
+ const calenderElem =
+ e.target.querySelector('.rbc-month-view') ||
+ e.target.querySelector('.rbc-time-view') ||
+ e.target.querySelector('.rbc-day-view');
isDragOnTableORCalendar = calenderElem.contains(e.inputEvent.target);
}
@@ -722,7 +726,7 @@ export default function Grid({ gridWidth, currentLayout }) {
element.classList.add('hide-grid');
});
document.getElementById('real-canvas')?.classList.remove('show-grid');
- setTriggerCanvasUpdater((prev) => !prev);
+ toggleCanvasUpdater();
}}
onDrag={(e) => {
// Since onDrag is called multiple times when dragging, hence we are using isDraggingRef to prevent setting state again and again
@@ -857,7 +861,7 @@ export default function Grid({ gridWidth, currentLayout }) {
} catch (error) {
console.error('Error dragging group', error);
}
- setTriggerCanvasUpdater((prev) => !prev);
+ toggleCanvasUpdater();
}}
// throttleDrag={1}
// edgeDraggable={false}
diff --git a/frontend/src/AppBuilder/AppCanvas/RenderWidget.jsx b/frontend/src/AppBuilder/AppCanvas/RenderWidget.jsx
index 0969a99358..de89652d18 100644
--- a/frontend/src/AppBuilder/AppCanvas/RenderWidget.jsx
+++ b/frontend/src/AppBuilder/AppCanvas/RenderWidget.jsx
@@ -80,7 +80,7 @@ const RenderWidget = ({
...{ validationObject: unResolvedValidation },
customResolveObjects: customResolvables,
}),
- [validateWidget, customResolvables, unResolvedValidation]
+ [validateWidget, customResolvables, unResolvedValidation, resolvedValidation]
);
const resetComponent = useCallback(() => {
diff --git a/frontend/src/AppBuilder/AppCanvas/appCanvasUtils.js b/frontend/src/AppBuilder/AppCanvas/appCanvasUtils.js
index fd706e7cb1..6171473174 100644
--- a/frontend/src/AppBuilder/AppCanvas/appCanvasUtils.js
+++ b/frontend/src/AppBuilder/AppCanvas/appCanvasUtils.js
@@ -350,7 +350,14 @@ export function pasteComponents(parentId, copiedComponentObj) {
const currentPageId = useStore.getState().getCurrentPageId();
const { isCut = false, newComponents: pastedComponents = [], pageId, isCloning = false } = copiedComponentObj;
// Prevent pasting if the parent subcontainer was deleted during a cut operation
- if (parentId && !Object.keys(components).find((key) => parentId === key)) {
+ if (
+ parentId &&
+ !Object.keys(components).find(
+ (key) =>
+ parentId === key ||
+ (components?.[key]?.component.component === 'Tabs' && parentId?.split('-')?.slice(0, -1)?.join('-') === key)
+ )
+ ) {
return;
}
if (parentId) {
@@ -444,10 +451,9 @@ export const getCanvasWidth = (currentLayout) => {
}
};
-export const computeCanvasBackgroundColor = (isAppDarkMode, canvasBgColor) => {
- const canvasBackgroundColor = canvasBgColor ? canvasBgColor : '#edeff5';
- if (['#2f3c4c', '#edeff5'].includes(canvasBackgroundColor)) {
- return isAppDarkMode ? '#2f3c4c' : '#edeff5';
+export const computeViewerBackgroundColor = (isAppDarkMode, canvasBgColor) => {
+ if (['#2f3c4c', '#F2F2F5', '#edeff5'].includes(canvasBgColor)) {
+ return isAppDarkMode ? '#2f3c4c' : '#F2F2F5';
}
- return canvasBackgroundColor;
+ return canvasBgColor;
};
diff --git a/frontend/src/AppBuilder/AppCanvas/useSidebarMargin.js b/frontend/src/AppBuilder/AppCanvas/useSidebarMargin.js
index e12e14c8a9..969e60f398 100644
--- a/frontend/src/AppBuilder/AppCanvas/useSidebarMargin.js
+++ b/frontend/src/AppBuilder/AppCanvas/useSidebarMargin.js
@@ -6,11 +6,13 @@ import { LEFT_SIDEBAR_WIDTH } from './appCanvasConstants';
const useSidebarMargin = (canvasContainerRef) => {
const [editorMarginLeft, setEditorMarginLeft] = useState(0);
- const selectedSidebarItem = useStore((state) => state.selectedSidebarItem, shallow);
+ const isSidebarOpen = useStore((state) => state.isSidebarOpen, shallow);
+ const mode = useStore((state) => state.currentMode, shallow);
useEffect(() => {
- setEditorMarginLeft(selectedSidebarItem ? LEFT_SIDEBAR_WIDTH : 0);
- }, [selectedSidebarItem]);
+ if (mode !== 'view') setEditorMarginLeft(isSidebarOpen ? LEFT_SIDEBAR_WIDTH : 0);
+ else setEditorMarginLeft(0);
+ }, [isSidebarOpen, mode]);
useEffect(() => {
if (!isEmpty(canvasContainerRef?.current)) {
diff --git a/frontend/src/AppBuilder/CodeEditor/SingleLineCodeEditor.jsx b/frontend/src/AppBuilder/CodeEditor/SingleLineCodeEditor.jsx
index 09b7d84a43..76dcae3c7a 100644
--- a/frontend/src/AppBuilder/CodeEditor/SingleLineCodeEditor.jsx
+++ b/frontend/src/AppBuilder/CodeEditor/SingleLineCodeEditor.jsx
@@ -30,6 +30,12 @@ const SingleLineCodeEditor = ({ componentName, fieldMeta = {}, componentId, ...r
const [currentValue, setCurrentValue] = useState('');
const [errorStateActive, setErrorStateActive] = useState(false);
const [cursorInsidePreview, setCursorInsidePreview] = useState(false);
+ const componentDefinition = useStore((state) => state.getComponentDefinition(componentId), shallow);
+ const parentId = componentDefinition?.component?.parent;
+ const customResolvables = useStore((state) => state.resolvedStore.modules.canvas?.customResolvables, shallow);
+
+ const customVariables = customResolvables?.[parentId]?.[0] || {};
+
const isPreviewFocused = useRef(false);
const wrapperRef = useRef(null);
@@ -52,8 +58,10 @@ const SingleLineCodeEditor = ({ componentName, fieldMeta = {}, componentId, ...r
// ? resolveReferences(newInitialValue, validation, customVariables)
// : [true, null];
- // Need to add customVariables while resolving the value like above
- const [valid, _error] = !isEmpty(validation) ? resolveReferences(newInitialValue, validation) : [true, null];
+ //!TODO use the updated new resolver
+ const [valid, _error] = !isEmpty(validation)
+ ? resolveReferences(newInitialValue, validation, customVariables)
+ : [true, null];
if (!valid) {
setErrorStateActive(true);
@@ -90,6 +98,7 @@ const SingleLineCodeEditor = ({ componentName, fieldMeta = {}, componentId, ...r
style={{ width: '100%', height: restProps?.lang === 'jsx' && '320px' }}
>
diff --git a/frontend/src/AppBuilder/Header/AppVersionsManager.jsx b/frontend/src/AppBuilder/Header/AppVersionsManager.jsx
index 52752794d5..c4dba6d3da 100644
--- a/frontend/src/AppBuilder/Header/AppVersionsManager.jsx
+++ b/frontend/src/AppBuilder/Header/AppVersionsManager.jsx
@@ -125,10 +125,7 @@ export const AppVersionsManager = function ({ darkMode }) {
deleteVersionAction(
appId,
versionId,
- (newVersionDef) => {
- if (newVersionDef) {
- setCurrentVersionId(newVersionDef.id);
- }
+ () => {
toast.dismiss(deleteingToastId);
toast.success(`Version - ${decodeEntities(versionName)} Deleted`);
resetDeleteModal();
diff --git a/frontend/src/AppBuilder/Header/CreateVersionModal.jsx b/frontend/src/AppBuilder/Header/CreateVersionModal.jsx
index cb3fc653c2..e7284767d1 100644
--- a/frontend/src/AppBuilder/Header/CreateVersionModal.jsx
+++ b/frontend/src/AppBuilder/Header/CreateVersionModal.jsx
@@ -201,8 +201,9 @@ export const CreateVersion = ({ showCreateAppVersion, setShowCreateAppVersion })
width: '100%',
}}
>
+ {/* EE - change to development */}
diff --git a/frontend/src/AppBuilder/Header/EditorHeader.jsx b/frontend/src/AppBuilder/Header/EditorHeader.jsx
index d5ac4b767d..d346ff0826 100644
--- a/frontend/src/AppBuilder/Header/EditorHeader.jsx
+++ b/frontend/src/AppBuilder/Header/EditorHeader.jsx
@@ -18,13 +18,6 @@ export const EditorHeader = ({ darkMode }) => {
isSaving: state.app.isSaving,
saveError: state.app.saveError,
isVersionReleased: state.isVersionReleased,
- user: state.user,
- app: state.app,
- appId: state.app.appId,
- editingVersion: state.editingVersion,
- updateReleasedVersionId: state.updateReleasedVersionId,
- updateEditingVersion: state.updateEditingVersion,
- featureAccess: state.featureAccess,
}),
shallow
);
diff --git a/frontend/src/AppBuilder/LeftSidebar/LeftSidebar.jsx b/frontend/src/AppBuilder/LeftSidebar/LeftSidebar.jsx
index 8c10f89a23..44f34d8446 100644
--- a/frontend/src/AppBuilder/LeftSidebar/LeftSidebar.jsx
+++ b/frontend/src/AppBuilder/LeftSidebar/LeftSidebar.jsx
@@ -62,12 +62,13 @@ export const LeftSidebar = ({ darkMode = false, switchDarkMode }) => {
};
useEffect(() => {
- setPopoverContentHeight(((window.innerHeight - queryPanelHeight - 45) / window.innerHeight) * 100);
- // eslint-disable-next-line react-hooks/exhaustive-deps
+ setPopoverContentHeight(
+ ((window.innerHeight - (queryPanelHeight == 0 ? 40 : queryPanelHeight) - 45) / window.innerHeight) * 100
+ ); // eslint-disable-next-line react-hooks/exhaustive-deps
}, [queryPanelHeight]);
const renderPopoverContent = () => {
- if (selectedSidebarItem === null) return null;
+ if (selectedSidebarItem === null || !isSidebarOpen) return null;
switch (selectedSidebarItem) {
case 'page':
return (
diff --git a/frontend/src/AppBuilder/LeftSidebar/LeftSidebarInspector/LeftSidebarInspector.jsx b/frontend/src/AppBuilder/LeftSidebar/LeftSidebarInspector/LeftSidebarInspector.jsx
index 6b816e0ecf..6bc5bbd974 100644
--- a/frontend/src/AppBuilder/LeftSidebar/LeftSidebarInspector/LeftSidebarInspector.jsx
+++ b/frontend/src/AppBuilder/LeftSidebar/LeftSidebarInspector/LeftSidebarInspector.jsx
@@ -85,7 +85,7 @@ const LeftSidebarInspector = ({ darkMode, pinned, setPinned }) => {
return jsontreeData;
// eslint-disable-next-line react-hooks/exhaustive-deps
- }, [sortedComponents, sortedQueries, sortedVariables, sortedConstants, sortedPageVariables]);
+ }, [sortedComponents, sortedQueries, sortedVariables, sortedConstants, sortedPageVariables, sortedGlobalVariables]);
return (
- The new version will be created in development environment
+ The new version will be created in production environment
{
@@ -57,7 +56,7 @@ export const PageHandlerMenu = ({ darkMode }) => {
return (
{
e.preventDefault();
e.stopPropagation();
- closeMenu();
callback(id);
+ closeMenu();
};
return (
diff --git a/frontend/src/AppBuilder/LeftSidebar/PageMenu/PageMenuItem.jsx b/frontend/src/AppBuilder/LeftSidebar/PageMenu/PageMenuItem.jsx
index 36e022e4dd..528a2262dd 100644
--- a/frontend/src/AppBuilder/LeftSidebar/PageMenu/PageMenuItem.jsx
+++ b/frontend/src/AppBuilder/LeftSidebar/PageMenu/PageMenuItem.jsx
@@ -47,8 +47,9 @@ export const PageMenuItem = withRouter(
const isEditingPage = editingPage?.id === page?.id;
const icon = () => {
+ const iconName = isHomePage && !page.icon ? 'IconHome2' : page.icon;
if (!isDisabled && !isHidden) {
- return
setIsHovered(true)} onMouseLeave={() => setIsHovered(false)}>
+
setIsHovered(true)}
+ onMouseLeave={() => setIsHovered(false)}
+ >
{editingPageName && editingPage?.id === page?.id ? (
<>
);
})
diff --git a/frontend/src/AppBuilder/QueryManager/Components/QueryManagerBody.jsx b/frontend/src/AppBuilder/QueryManager/Components/QueryManagerBody.jsx
index c4c820ff69..c891ba4c95 100644
--- a/frontend/src/AppBuilder/QueryManager/Components/QueryManagerBody.jsx
+++ b/frontend/src/AppBuilder/QueryManager/Components/QueryManagerBody.jsx
@@ -19,6 +19,7 @@ import { DATA_SOURCE_TYPE } from '@/_helpers/constants';
import { canDeleteDataSource, canReadDataSource, canUpdateDataSource } from '@/_helpers';
import useStore from '@/AppBuilder/_stores/store';
import { EventManager } from '@/AppBuilder/RightSideBar/Inspector/EventManager';
+import NotificationBanner from '@/_components/NotificationBanner';
export const QueryManagerBody = ({ darkMode, options, setOptions, activeTab }) => {
const { t } = useTranslation();
@@ -30,6 +31,7 @@ export const QueryManagerBody = ({ darkMode, options, setOptions, activeTab }) =
const selectedDataSource = useStore((state) => state.queryPanel.selectedDataSource);
const changeDataQuery = useStore((state) => state.dataQuery.changeDataQuery);
const updateDataQuery = useStore((state) => state.dataQuery.updateDataQuery);
+ const [showLocalDataSourceDeprecationBanner, setshowLocalDataSourceDeprecationBanner] = useState(false);
const [dataSourceMeta, setDataSourceMeta] = useState(null);
/* - Added the below line to cause re-rendering when the query is switched
@@ -280,7 +282,7 @@ export const QueryManagerBody = ({ darkMode, options, setOptions, activeTab }) =
return (
<>
{icon()}
-
+ {page.name}
+
{
- event.stopPropagation();
- openPageEditPopover(page, popoverRef);
- }}
+ onClick={handlePageMenuSettings}
>
)}
-
- {page.name}
-
+
- {selectedQuery && (
+ {selectedQuery && !showLocalDataSourceDeprecationBanner && (
);
};
+ useEffect(() => {
+ const staticDataSources = ['runjs', 'runpy', 'tooljetdb'];
+ // added specific check for rest api - as it is a part of both : default and global data sources
+ const showDeprecationBanner =
+ selectedDataSource == null &&
+ selectedQuery &&
+ !staticDataSources.includes(selectedDataSource?.kind) &&
+ (selectedDataSource?.kind !== 'restapi' || selectedDataSource?.type !== 'default');
+ if (showDeprecationBanner) {
+ setshowLocalDataSourceDeprecationBanner(true);
+ } else {
+ setshowLocalDataSourceDeprecationBanner(false);
+ }
+ }, [selectedDataSource, selectedQuery]);
+
+ // if (selectedQueryId !== selectedQuery?.id) return;
const hasPermissions =
selectedDataSource?.scope === 'global' && selectedDataSource?.type !== DATA_SOURCE_TYPE.SAMPLE
? canUpdateDataSource(selectedQuery?.data_source_id) ||
canReadDataSource(selectedQuery?.data_source_id) ||
canDeleteDataSource()
: true;
-
return (
{selectedDataSource === null || !selectedQuery ? (
- renderDataSourcesList()
+ showLocalDataSourceDeprecationBanner ? (
+ <>
+ {
const { showDarkModeToggle, isReleasedVersionId } = useStore(
(state) => ({
- isReleasedVersionId: state?.releasedVersionId == state.selectedVersion?.id || state.isVersionReleased,
+ isReleasedVersionId: state?.releasedVersionId == state.currentVersionId || state.isVersionReleased,
showDarkModeToggle: state.globalSettings.appMode === 'auto' || !state.globalSettings.appMode,
}),
shallow
diff --git a/frontend/src/AppBuilder/Viewer/MobileHeader.jsx b/frontend/src/AppBuilder/Viewer/MobileHeader.jsx
index 623e755d2c..61284bb821 100644
--- a/frontend/src/AppBuilder/Viewer/MobileHeader.jsx
+++ b/frontend/src/AppBuilder/Viewer/MobileHeader.jsx
@@ -22,7 +22,12 @@ const MobileHeader = ({
setAppDefinitionFromVersion,
showViewerNavigation,
}) => {
- const isVersionReleased = useStore((state) => state.isVersionReleased);
+ const { isReleasedVersionId } = useStore(
+ (state) => ({
+ isReleasedVersionId: state?.releasedVersionId == state.currentVersionId || state.isVersionReleased,
+ }),
+ shallow
+ );
const editingVersion = useStore((state) => state.editingVersion);
const showDarkModeToggle = useStore((state) => state.globalSettings.appMode === 'auto');
@@ -33,7 +38,7 @@ const MobileHeader = ({
const _renderAppNameAndLogo = () => (
);
- const _renderPreviewSettings = () => (
-
- {!isVersionReleased && !isEmpty(editingVersion) && _renderPreviewSettings()}
+ {!isReleasedVersionId && !isEmpty(editingVersion) && _renderPreviewSettings()}
{!showViewerNavigation && _renderDarkModeBtn({ styles: { top: '2px' } })}
);
diff --git a/frontend/src/AppBuilder/Viewer/Viewer.jsx b/frontend/src/AppBuilder/Viewer/Viewer.jsx
index 18d01867ef..a0135a8ea0 100644
--- a/frontend/src/AppBuilder/Viewer/Viewer.jsx
+++ b/frontend/src/AppBuilder/Viewer/Viewer.jsx
@@ -13,8 +13,6 @@ import DesktopHeader from './DesktopHeader';
import MobileHeader from './MobileHeader';
import ViewerSidebarNavigation from './ViewerSidebarNavigation';
import { shallow } from 'zustand/shallow';
-import { computeCanvasBackgroundColor } from '@/AppBuilder/AppCanvas/appCanvasUtils';
-import { resolveReferences } from '@/_helpers/utils';
import Popups from '../Popups';
import TooljetBanner from './TooljetBanner';
import { ModuleProvider } from '@/AppBuilder/_contexts/ModuleContext';
@@ -41,6 +39,7 @@ export const Viewer = ({ id: appId, darkMode, moduleId = 'canvas', switchDarkMod
homePageId,
isMaintenanceOn,
setIsViewer,
+ toggleCurrentLayout,
} = useStore(
(state) => ({
isEditorLoading: state.isEditorLoading,
@@ -60,14 +59,15 @@ export const Viewer = ({ id: appId, darkMode, moduleId = 'canvas', switchDarkMod
updateCanvasHeight: state.updateCanvasBottomHeight,
isMaintenanceOn: state.app.isMaintenanceOn,
setIsViewer: state.setIsViewer,
+ toggleCurrentLayout: state.toggleCurrentLayout,
}),
shallow
);
- const getCurrentPageComponents = useStore((state) => state.getCurrentPageComponents, shallow);
- const currentPageComponents = useMemo(() => getCurrentPageComponents(), [getCurrentPageComponents]);
- const changeDarkMode = useStore((state) => state.changeDarkMode);
+ const getCurrentPageComponents = useStore((state) => state.getCurrentPageComponents(), shallow);
+ const currentPageComponents = useMemo(() => getCurrentPageComponents, [getCurrentPageComponents]);
const isPagesSidebarHidden = useStore((state) => state.getPagesSidebarVisibility('canvas'), shallow);
const canvasBgColor = useStore((state) => state.getCanvasBackgroundColor('canvas', darkMode), shallow);
+ const deviceWindowWidth = window.screen.width - 5;
const computeCanvasMaxWidth = useCallback(() => {
if (globalSettings?.maxCanvasWidth) {
@@ -92,7 +92,6 @@ export const Viewer = ({ id: appId, darkMode, moduleId = 'canvas', switchDarkMod
const isLoading = false;
const isMobilePreviewMode = selectedVersion?.id && currentLayout === 'mobile';
const isAppLoaded = !!editingVersion;
- const deviceWindowWidth = window.screen.width - 5;
const isMobileDevice = deviceWindowWidth < 600;
const switchPage = useStore((state) => state.switchPage);
@@ -106,6 +105,8 @@ export const Viewer = ({ id: appId, darkMode, moduleId = 'canvas', switchDarkMod
switchDarkMode(newMode);
};
useEffect(() => {
+ const isMobileDevice = deviceWindowWidth < 600;
+ toggleCurrentLayout(isMobileDevice ? 'mobile' : 'desktop');
setIsViewer(true);
return () => {
setIsViewer(false);
@@ -170,7 +171,7 @@ export const Viewer = ({ id: appId, darkMode, moduleId = 'canvas', switchDarkMod
}}
>
);
- const _renderPreviewSettings = () => (
- {_renderAppNameAndLogo()}
{_renderMobileNavigationMenu()}
- {!isPagesSidebarHidden && (
+ {currentLayout !== 'mobile' && !isPagesSidebarHidden && (
{currentLayout === 'mobile' && isMobilePreviewMode && (
diff --git a/frontend/src/AppBuilder/Viewer/ViewerSidebarNavigation.jsx b/frontend/src/AppBuilder/Viewer/ViewerSidebarNavigation.jsx
index fe1bbe4c31..923e30a8ce 100644
--- a/frontend/src/AppBuilder/Viewer/ViewerSidebarNavigation.jsx
+++ b/frontend/src/AppBuilder/Viewer/ViewerSidebarNavigation.jsx
@@ -7,6 +7,7 @@ import FolderList from '@/_ui/FolderList/FolderList';
import { ButtonSolid } from '@/_ui/AppButton/AppButton';
import useStore from '@/AppBuilder/_stores/store';
import { APP_HEADER_HEIGHT } from '../AppCanvas/appCanvasConstants';
+import OverflowTooltip from '@/_components/OverflowTooltip';
export const ViewerSidebarNavigation = ({
isMobileDevice,
@@ -21,6 +22,7 @@ export const ViewerSidebarNavigation = ({
const { definition: { styles = {}, properties = {} } = {} } = useStore((state) => state.pageSettings) || {};
const selectedVersionName = useStore((state) => state.selectedVersion?.name);
const selectedEnvironmentName = useStore((state) => state.selectedEnvironment?.name);
+ const homePageId = useStore((state) => state.app.homePageId);
if (isMobileDevice) {
return null;
@@ -127,8 +129,10 @@ export const ViewerSidebarNavigation = ({
>
- {validationError && visibility && !checked && userInteracted && (
+ {!isValid && visibility && userInteracted && (
{pages.map((page) => {
+ const isHomePage = page.id === homePageId;
+ const iconName = isHomePage && !page.icon ? 'IconHome2' : page.icon;
// eslint-disable-next-line import/namespace
- const IconElement = Icons?.[page.icon] ?? Icons?.['IconHome2'];
+ const IconElement = Icons?.[iconName] ?? Icons?.['IconFileDescription'];
return page.hidden || page.disabled ? null : (
{!labelStyle?.label?.hidden && (
-
- {_.truncate(page?.name, { length: 18 })}
+
+
+ {page.name}
+
)}
diff --git a/frontend/src/AppBuilder/WidgetManager/widgets/buttonGroup.js b/frontend/src/AppBuilder/WidgetManager/widgets/buttonGroup.js
index 65b7e77807..c0fa889dd5 100644
--- a/frontend/src/AppBuilder/WidgetManager/widgets/buttonGroup.js
+++ b/frontend/src/AppBuilder/WidgetManager/widgets/buttonGroup.js
@@ -146,8 +146,8 @@ export const buttonGroupConfig = {
visibility: { value: '{{true}}' },
borderRadius: { value: '{{4}}' },
disabledState: { value: '{{false}}' },
- selectedTextColor: { value: '' },
- selectedBackgroundColor: { value: '' },
+ selectedTextColor: { value: '#FFFFFF' },
+ selectedBackgroundColor: { value: '#4368E3' },
},
},
};
diff --git a/frontend/src/AppBuilder/WidgetManager/widgets/codeEditor.js b/frontend/src/AppBuilder/WidgetManager/widgets/codeEditor.js
index d7ff03d9a8..eb76891af0 100644
--- a/frontend/src/AppBuilder/WidgetManager/widgets/codeEditor.js
+++ b/frontend/src/AppBuilder/WidgetManager/widgets/codeEditor.js
@@ -67,6 +67,13 @@ export const codeEditorConfig = {
exposedVariables: {
value: '',
},
+ actions: [
+ {
+ handle: 'setValue',
+ displayName: 'Set value',
+ params: [{ handle: 'setValue', defaultValue: '' }],
+ },
+ ],
definition: {
others: {
showOnDesktop: { value: '{{true}}' },
diff --git a/frontend/src/AppBuilder/Widgets/Calendar/Calendar.jsx b/frontend/src/AppBuilder/Widgets/Calendar/Calendar.jsx
index 080a51c47c..b7957d9ba0 100644
--- a/frontend/src/AppBuilder/Widgets/Calendar/Calendar.jsx
+++ b/frontend/src/AppBuilder/Widgets/Calendar/Calendar.jsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
import { Calendar as ReactCalendar, momentLocalizer } from 'react-big-calendar';
import moment from 'moment';
import 'react-big-calendar/lib/css/react-big-calendar.css';
@@ -54,7 +54,7 @@ export const Calendar = function ({
const [currentDate, setCurrentDate] = useState(defaultDate);
const [eventPopoverOptions, setEventPopoverOptions] = useState({ show: false });
- const [defaultView, setDefaultValue] = useState(allowedCalendarViews[0]);
+ const isInitialRender = useRef(true);
const eventPropGetter = (event) => {
const backgroundColor = event.color;
@@ -100,10 +100,10 @@ export const Calendar = function ({
const view = allowedCalendarViews.includes(properties.defaultView)
? properties.defaultView
: allowedCalendarViews[0];
- if (currentView !== view) {
- setDefaultValue(view);
+ if (currentView !== view || isInitialRender.current) {
setExposedVariable('currentView', view);
setCurrentView(view);
+ isInitialRender.current = false;
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [properties.defaultView]);
@@ -145,10 +145,9 @@ export const Calendar = function ({
endAccessor="end"
style={style}
views={allowedCalendarViews}
- defaultView={defaultView}
- view={defaultView}
+ defaultView={properties.defaultView || allowedCalendarViews[0]}
+ view={currentView}
onView={(view) => {
- setDefaultValue(view);
setExposedVariable('currentView', view);
setCurrentView(view);
fireEvent('onCalendarViewChange');
diff --git a/frontend/src/AppBuilder/Widgets/Form/Form.jsx b/frontend/src/AppBuilder/Widgets/Form/Form.jsx
index 3eedc24f51..eeec8760fc 100644
--- a/frontend/src/AppBuilder/Widgets/Form/Form.jsx
+++ b/frontend/src/AppBuilder/Widgets/Form/Form.jsx
@@ -19,7 +19,6 @@ export const Form = function Form(props) {
component,
width,
height,
- removeComponent,
styles,
setExposedVariable,
setExposedVariables,
@@ -28,11 +27,6 @@ export const Form = function Form(props) {
properties,
resetComponent = () => {},
dataCy,
- paramUpdated,
- currentLayout,
- mode,
- getContainerProps,
- containerProps,
} = props;
const childComponents = useStore((state) => state.getChildComponents(id), shallow);
const { visibility, disabledState, borderRadius, borderColor, boxShadow } = styles;
@@ -307,12 +301,16 @@ export const Form = function Form(props) {
}
key={index}
>
- {
if (uiComponentsDraft?.length > 0 && uiComponentsDraft[index * 2 + 1]) {
@@ -148,7 +149,7 @@ export function generateUIComponents(JSONSchema, advanced, componentName = '') {
uiComponentsDraft[index * 2 + 1]['definition']['properties']['display_values'] = value?.displayValues;
if (value?.label) uiComponentsDraft[index * 2 + 1]['definition']['properties']['label'] = value?.label;
if (value?.value) uiComponentsDraft[index * 2 + 1]['definition']['properties']['value'] = value?.value;
- if (value?.values) uiComponentsDraft[index * 2 + 1]['definition']['properties']['value'] = value?.values;
+ if (value?.values) uiComponentsDraft[index * 2 + 1]['definition']['properties']['values'] = value?.values;
if (value?.loading)
uiComponentsDraft[index * 2 + 1]['definition']['properties']['loadingState'] = value?.loading;
break;
@@ -362,7 +363,7 @@ export function generateUIComponents(JSONSchema, advanced, componentName = '') {
uiComponentsDraft[index * 2 + 1]['definition']['properties']['display_values'] = value?.displayValues;
if (value?.label) uiComponentsDraft[index * 2 + 1]['definition']['properties']['label'] = value?.label;
if (value?.value) uiComponentsDraft[index * 2 + 1]['definition']['properties']['value'] = value?.value;
- if (value?.values) uiComponentsDraft[index * 2 + 1]['definition']['properties']['value'] = value?.values;
+ if (value?.values) uiComponentsDraft[index * 2 + 1]['definition']['properties']['values'] = value?.values;
if (value?.showAllOption)
uiComponentsDraft[index * 2 + 1]['definition']['properties']['showAllOption'] = value?.showAllOption;
break;
diff --git a/frontend/src/AppBuilder/Widgets/Form/RenderSchema.jsx b/frontend/src/AppBuilder/Widgets/Form/RenderSchema.jsx
index 5fe4eb09ad..b5bfa9e4c3 100644
--- a/frontend/src/AppBuilder/Widgets/Form/RenderSchema.jsx
+++ b/frontend/src/AppBuilder/Widgets/Form/RenderSchema.jsx
@@ -3,7 +3,7 @@ import { getComponentToRender } from '@/AppBuilder/_helpers/editorHelpers';
import useStore from '@/AppBuilder/_stores/store';
import { shallow } from 'zustand/shallow';
-const RenderSchema = ({ component, id, onOptionChange, onOptionsChange }) => {
+const RenderSchema = ({ component, parent, id, onOptionChange, onOptionsChange, darkMode }) => {
const ComponentToRender = useMemo(() => getComponentToRender(component?.component), [component?.component]);
const validateWidget = useStore((state) => state.validateWidget, shallow);
@@ -21,13 +21,21 @@ const RenderSchema = ({ component, id, onOptionChange, onOptionsChange }) => {
[id, onOptionsChange]
);
- const validate = (value) => {
- return validateWidget({
- ...{ widgetValue: value },
- ...{ validationObject: component.definition.validation },
- });
- };
+ const validate = useCallback(
+ (value) => {
+ return validateWidget({
+ ...{ widgetValue: value },
+ ...{ validationObject: component.definition.validation },
+ });
+ },
+ [component.definition.validation]
+ );
+ const fireEvent = useCallback(() => {
+ return Promise.resolve();
+ }, []);
+
+ const formId = `${parent}-${id}`;
return (
{
setExposedVariable={setExposedVariable}
setExposedVariables={setExposedVariables}
validate={validate}
- fireEvent={() => {}}
+ darkMode={darkMode}
+ fireEvent={fireEvent}
+ formId={formId}
+ id={id}
/>
);
};
diff --git a/frontend/src/AppBuilder/Widgets/Modal.jsx b/frontend/src/AppBuilder/Widgets/Modal.jsx
index 7632770d91..a88aff630f 100644
--- a/frontend/src/AppBuilder/Widgets/Modal.jsx
+++ b/frontend/src/AppBuilder/Widgets/Modal.jsx
@@ -72,34 +72,22 @@ export const Modal = function Modal({
setShowModal(true);
},
close: async function () {
- setShowModal(false);
setExposedVariable('show', false);
+ setShowModal(false);
},
};
setExposedVariables(exposedVariables);
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
- useEffect(() => {
- if (isInitialRender.current) {
- isInitialRender.current = false;
- return;
- }
-
- fireEvent(!showModal ? 'onClose' : 'onOpen');
- const inputRef = document?.getElementsByClassName('tj-text-input-widget')?.[0];
- inputRef?.blur();
- // eslint-disable-next-line react-hooks/exhaustive-deps
- }, [showModal]);
-
function hideModal() {
- setShowModal(false);
setExposedVariable('show', false);
+ setShowModal(false);
}
function openModal() {
- setShowModal(true);
setExposedVariable('show', true);
+ setShowModal(true);
}
useEffect(() => {
@@ -149,6 +137,19 @@ export const Modal = function Modal({
};
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [showModal, modalHeight]);
+
+ useEffect(() => {
+ if (isInitialRender.current) {
+ isInitialRender.current = false;
+ return;
+ }
+
+ fireEvent(!showModal ? 'onClose' : 'onOpen');
+ const inputRef = document?.getElementsByClassName('tj-text-input-widget')?.[0];
+ inputRef?.blur();
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [showModal]);
+
const backwardCompatibilityCheck = height == '34' || modalHeight != undefined ? true : false;
const customStyles = {
diff --git a/frontend/src/AppBuilder/Widgets/Table/Components/TableRow.jsx b/frontend/src/AppBuilder/Widgets/Table/Components/TableRow.jsx
index 8db79b1b5d..221e6b4594 100644
--- a/frontend/src/AppBuilder/Widgets/Table/Components/TableRow.jsx
+++ b/frontend/src/AppBuilder/Widgets/Table/Components/TableRow.jsx
@@ -85,16 +85,20 @@ export const TableRow = React.memo(
: ''
}`}
{...rowProps}
- onClickCapture={async () => {
+ onClickCapture={() => {
// toggleRowSelected will triggered useRededcuer function in useTable and in result will get the selectedFlatRows consisting row which are selected
+ const selectedRow = row.original;
+ const selectedRowId = row.id;
+ setExposedVariables({ selectedRow, selectedRowId });
+ fireEvent('onRowClicked');
+ }}
+ onClick={async () => {
if (allowSelection) {
await toggleRowSelected(row.id);
}
const selectedRow = row.original;
const selectedRowId = row.id;
- setExposedVariables({ selectedRow, selectedRowId });
mergeToTableDetails({ selectedRow, selectedRowId });
- fireEvent('onRowClicked');
}}
onMouseOver={() => {
if (hoverAdded) {
diff --git a/frontend/src/AppBuilder/Widgets/Table/Pagination.jsx b/frontend/src/AppBuilder/Widgets/Table/Pagination.jsx
index 3333e540cd..e53096dff6 100644
--- a/frontend/src/AppBuilder/Widgets/Table/Pagination.jsx
+++ b/frontend/src/AppBuilder/Widgets/Table/Pagination.jsx
@@ -67,7 +67,7 @@ export const Pagination = function Pagination({
{!serverSide && tableWidth > 460 && (
460 && (
fireEvent('onCellValueChanged'), 0);
+ return;
}
const copyOfTableDetails = useRef(tableDetails);
@@ -565,12 +567,12 @@ export const Table = React.memo(
useEffect(() => {
if (
- tableData.length != 0 &&
+ properties.data.length != 0 &&
properties.autogenerateColumns &&
(useDynamicColumn || mode === 'edit' || mode === 'view')
) {
const generatedColumnFromData = autogenerateColumns(
- tableData,
+ properties.data,
properties.columns,
properties?.columnDeletionHistory ?? [],
useDynamicColumn,
@@ -579,9 +581,25 @@ export const Table = React.memo(
properties.autogenerateColumns ?? false,
id
);
- useDynamicColumn && setGeneratedColumn(generatedColumnFromData);
+ if (useDynamicColumn) {
+ const dynamicColumnHasId = dynamicColumn && dynamicColumn.every((column) => 'id' in column);
+ if (!dynamicColumnHasId) {
+ // if dynamic columns do not have an id then we need to manually compare the generated columns with the columns in the state because the id that we generate for columns without id is a uuid and it will be different every time
+ const generatedColumnsWithoutIds = generatedColumnFromData.map(({ id, ...rest }) => ({
+ ...rest,
+ }));
+ const columnsFromStateWithoutIds = generatedColumn.map(({ id, ...rest }) => ({
+ ...rest,
+ }));
+ !isEqual(generatedColumnsWithoutIds, columnsFromStateWithoutIds) &&
+ setGeneratedColumn(generatedColumnFromData);
+ return;
+ }
+ setGeneratedColumn(generatedColumnFromData);
+ }
}
- }, [tableData, JSON.stringify(dynamicColumn)]);
+ // }, [tableData, JSON.stringify(dynamicColumn)]);
+ }, [JSON.stringify(properties.data), JSON.stringify(dynamicColumn)]);
const computedStyles = {
// width: `${width}px`,
@@ -865,7 +883,6 @@ export const Table = React.memo(
currentData: data,
selectedRow: [],
selectedRowId: null,
- pageIndex: pageIndex + 1,
});
if (tableDetails.selectedRowId || !isEmpty(tableDetails.selectedRowDetails)) {
toggleAllRowsSelected(false);
diff --git a/frontend/src/AppBuilder/Widgets/Table/columns/autogenerateColumns.js b/frontend/src/AppBuilder/Widgets/Table/columns/autogenerateColumns.js
index 235205dbb3..98faa12da0 100644
--- a/frontend/src/AppBuilder/Widgets/Table/columns/autogenerateColumns.js
+++ b/frontend/src/AppBuilder/Widgets/Table/columns/autogenerateColumns.js
@@ -107,7 +107,14 @@ export default function autogenerateColumns(
finalKeys.includes(column?.key || column?.name)
);
- setTimeout(() => setProperty(id, 'columns', finalColumns, 'properties'), 10);
+ setTimeout(
+ () =>
+ setProperty(id, 'columns', finalColumns, 'properties', 'value', false, 'canvas', {
+ skipUndoRedo: true,
+ saveAfterAction: true,
+ }),
+ 10
+ );
}
const dataTypeToColumnTypeMapping = {
diff --git a/frontend/src/AppBuilder/Widgets/Tabs.jsx b/frontend/src/AppBuilder/Widgets/Tabs.jsx
index 5a78a07809..3a93fa698b 100644
--- a/frontend/src/AppBuilder/Widgets/Tabs.jsx
+++ b/frontend/src/AppBuilder/Widgets/Tabs.jsx
@@ -69,14 +69,14 @@ export const Tabs = function Tabs({
}, [parsedDefaultTab]);
useEffect(() => {
- const currentTabData = parsedTabs.filter((tab) => tab.id === currentTab);
+ const currentTabData = parsedTabs.filter((tab) => tab.id == currentTab);
setBgColor(currentTabData[0]?.backgroundColor ? currentTabData[0]?.backgroundColor : darkMode ? '#324156' : '#fff');
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [currentTab, darkMode]);
function computeTabDisplay(componentId, id) {
let tabVisibility = 'none';
- if (id !== currentTab) {
+ if (id != currentTab) {
return tabVisibility;
}
@@ -87,14 +87,13 @@ export const Tabs = function Tabs({
}
}
- return id === currentTab ? 'block' : 'none';
+ return id == currentTab ? 'block' : 'none';
}
useEffect(() => {
const exposedVariables = {
setTab: async function (id) {
- id = typeof id === 'number' ? String(id) : id;
- if (id && currentTab !== id) {
+ if (currentTab != id) {
setCurrentTab(id);
setExposedVariable('currentTab', id);
fireEvent('onTabSwitch');
@@ -134,7 +133,7 @@ export const Tabs = function Tabs({
function shouldRenderTabContent(tab) {
if (parsedRenderOnlyActiveTab) {
- return tab.id === currentTab;
+ return tab.id == currentTab;
}
return true; // Render by default if no specific conditions are met
}
@@ -162,7 +161,7 @@ export const Tabs = function Tabs({
className="nav-item"
style={{ opacity: tab?.disabled && '0.5', width: tabWidth == 'split' && equalSplitWidth + '%' }}
onClick={() => {
- if (currentTab === tab.id) return;
+ if (currentTab == tab.id) return;
!tab?.disabled && setCurrentTab(tab.id);
!tab?.disabled && setExposedVariable('currentTab', tab.id);
@@ -193,7 +192,7 @@ export const Tabs = function Tabs({
diff --git a/frontend/src/AppBuilder/_hooks/useAppData.js b/frontend/src/AppBuilder/_hooks/useAppData.js
index 21c95a0144..e758835a91 100644
--- a/frontend/src/AppBuilder/_hooks/useAppData.js
+++ b/frontend/src/AppBuilder/_hooks/useAppData.js
@@ -16,7 +16,7 @@ import { usePrevious } from '@dnd-kit/utilities';
import { deepCamelCase } from '@/_helpers/appUtils';
import { useEventActions } from '../_stores/slices/eventsSlice';
import useRouter from '@/_hooks/use-router';
-import { navigate } from '../_utils/misc';
+import { extractEnvironmentConstantsFromConstantsList, navigate } from '../_utils/misc';
import { getWorkspaceId } from '@/_helpers/utils';
import { shallow } from 'zustand/shallow';
import { fetchAndSetWindowTitle, pageTitles, defaultWhiteLabellingSettings } from '@white-label/whiteLabelling';
@@ -93,7 +93,9 @@ const useAppData = (appId, moduleId, mode = 'edit', { environmentId, versionId }
if (pageSwitchInProgress) {
const currentPageEvents = events.filter((event) => event.target === 'page' && event.sourceId === currentPageId);
setPageSwitchInProgress(false);
- handleEvent('onPageLoad', currentPageEvents, {});
+ setTimeout(() => {
+ handleEvent('onPageLoad', currentPageEvents, {});
+ }, 0);
}
}, [pageSwitchInProgress, currentPageId]);
@@ -171,10 +173,25 @@ const useAppData = (appId, moduleId, mode = 'edit', { environmentId, versionId }
};
}
- const constantsResp =
- isPublicAccess && appData.is_public
- ? await orgEnvironmentConstantService.getConstantsFromPublicApp(slug)
- : await orgEnvironmentConstantService.getConstantsFromApp();
+ let constantsResp;
+ if (mode === 'edit') {
+ let defaultEnvId = null;
+ if (editorEnvironment?.id == null) {
+ const envs = await appEnvironmentService.getAllEnvironments(appId);
+ const defaultEnv = envs.environments.find((env) => env?.is_default === true);
+ defaultEnvId = defaultEnv ? defaultEnv.id : null;
+ }
+ constantsResp = await orgEnvironmentConstantService.getConstantsFromEnvironment(
+ editorEnvironment?.id || defaultEnvId
+ );
+ } else {
+ constantsResp =
+ isPublicAccess && appData.is_public
+ ? await orgEnvironmentConstantService.getConstantsFromPublicApp(slug)
+ : await orgEnvironmentConstantService.getConstantsFromApp(slug);
+ }
+
+ constantsResp.constants = extractEnvironmentConstantsFromConstantsList(constantsResp?.constants, 'production');
const pages = appData.pages.map((page) => {
return page;
@@ -189,7 +206,12 @@ const useAppData = (appId, moduleId, mode = 'edit', { environmentId, versionId }
appId: appData.id,
slug: appData.slug,
currentAppEnvironmentId: editorEnvironmentId,
- isMaintenanceOn: result.is_maintenance_on,
+ isMaintenanceOn:
+ 'is_maintenance_on' in result
+ ? result.is_maintenance_on
+ : 'isMaintenanceOn' in result
+ ? result.isMaintenanceOn
+ : false,
organizationId: appData.organizationId || appData.organization_id,
homePageId: homePageId,
isPublic: appData.is_public,
@@ -201,8 +223,7 @@ const useAppData = (appId, moduleId, mode = 'edit', { environmentId, versionId }
);
setPages(pages, moduleId);
- setPageSettings(deepCamelCase(appData?.editing_version?.page_settings));
-
+ setPageSettings(deepCamelCase(appData?.editing_version?.page_settings ?? appData?.page_settings));
// set starting page as homepage initially
let startingPage = appData.pages.find((page) => page.id === homePageId);
@@ -347,7 +368,12 @@ const useAppData = (appId, moduleId, mode = 'edit', { environmentId, versionId }
appId: appData.id,
slug: appData.slug,
creationMode: appData.creationMode,
- isMaintenanceOn: appData.is_maintenance_on,
+ isMaintenanceOn:
+ 'is_maintenance_on' in appData
+ ? appData.is_maintenance_on
+ : 'isMaintenanceOn' in appData
+ ? appData.isMaintenanceOn
+ : false,
organizationId: appData.organizationId || appData.organization_id,
homePageId: appData.editing_version.homePageId,
isPublic: appData.isPublic,
diff --git a/frontend/src/AppBuilder/_stores/ast.js b/frontend/src/AppBuilder/_stores/ast.js
index 8da30d7845..106298588f 100644
--- a/frontend/src/AppBuilder/_stores/ast.js
+++ b/frontend/src/AppBuilder/_stores/ast.js
@@ -1,9 +1,38 @@
const acorn = require('acorn');
const walk = require('acorn-walk');
+function findExpression(input) {
+ const matches = [];
+ let startIdx = -1;
+ let braceCount = 0;
+
+ for (let i = 0; i < input.length; i++) {
+ if (input[i] === '{' && input[i + 1] === '{' && braceCount === 0) {
+ startIdx = i;
+ braceCount = 2;
+ i++; // Skip the second '{'
+ } else if (input[i] === '{' && braceCount > 0) {
+ braceCount++;
+ } else if (input[i] === '}' && braceCount > 0) {
+ braceCount--;
+ if (braceCount === 0 && startIdx !== -1) {
+ matches.push({
+ fullMatch: input.slice(startIdx, i + 1),
+ expression: input.slice(startIdx + 2, i - 1).trim(),
+ index: startIdx,
+ });
+ startIdx = -1;
+ }
+ }
+ }
+
+ return matches;
+}
+
export function extractAndReplaceReferencesFromString(input, componentIdNameMapping = {}, queryIdNameMapping = {}) {
// Quick check for relevant keywords
- const regexForQuickCheck = /\b(components|queries|globals|variables|page|parameters|secrets)(?:\[\S*|\.\S*|\?\.\S*)/;
+ const regexForQuickCheck =
+ /\b(components|queries|globals|variables|page|parameters|secrets|constants)(?:\[\S*|\.\S*|\?\.\S*)/;
if (!regexForQuickCheck.test(input)) {
return {
allRefs: [],
@@ -12,7 +41,7 @@ export function extractAndReplaceReferencesFromString(input, componentIdNameMapp
};
}
- const relevantKeywords = /\b(components|queries|globals|variables|page|parameters|secrets)\b/;
+ const relevantKeywords = /\b(components|queries|globals|variables|page|parameters|secrets|constants)\b/;
const expressionRegex = /{{(.*?)}}/gs;
const results = [];
let lastIndex = 0;
@@ -24,12 +53,94 @@ export function extractAndReplaceReferencesFromString(input, componentIdNameMapp
/\b(components|queries)(\??\.|\??\.?\[['"]?)([0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12})(['"]?\])?/g;
let match;
+ if (input.startsWith('{{{') && input.endsWith('}}}')) {
+ const inputContent = input.slice(3, -3);
+ input = `{{({${inputContent}})}}`;
+ const matches = findExpression(input);
+ for (const match of matches) {
+ const { fullMatch, expression, index } = match;
+
+ // Check if the expression contains relevant keywords
+ if (!relevantKeywords.test(expression)) {
+ replacedString += input.slice(lastIndex, index);
+ bracketNotationString += input.slice(lastIndex, index);
+ replacedString += fullMatch;
+ bracketNotationString += fullMatch;
+ lastIndex = index + fullMatch.length;
+ continue;
+ }
+
+ try {
+ const { processedExpression, uuidMappings } = preprocessExpression(
+ expression,
+ uuidRegex,
+ componentIdNameMapping,
+ queryIdNameMapping
+ );
+ const parsedResult = parseExpression(
+ processedExpression,
+ componentIdNameMapping,
+ queryIdNameMapping,
+ uuidMappings
+ );
+
+ replacedString += input.slice(lastIndex, index);
+ bracketNotationString += input.slice(lastIndex, index);
+
+ const replacedExpression = replaceIdsInExpression(
+ processedExpression,
+ componentIdNameMapping,
+ queryIdNameMapping,
+ false,
+ uuidMappings
+ );
+ const bracketNotationExpression = replaceIdsInExpression(
+ processedExpression,
+ componentIdNameMapping,
+ queryIdNameMapping,
+ true,
+ uuidMappings
+ );
+
+ replacedString += `{{${replacedExpression}}}`;
+ bracketNotationString += `{{${bracketNotationExpression}}}`;
+
+ results.push({
+ allRefs: parsedResult.references,
+ valueWithId: `{{${replacedExpression}}}`,
+ valueWithBrackets: `{{${bracketNotationExpression}}}`,
+ });
+ } catch (error) {
+ replacedString += fullMatch;
+ bracketNotationString += fullMatch;
+ results.push({
+ allRefs: [],
+ valueWithId: fullMatch,
+ valueWithBrackets: fullMatch,
+ });
+ }
+
+ lastIndex = index + fullMatch.length;
+ }
+
+ replacedString += input.slice(lastIndex);
+ bracketNotationString += input.slice(lastIndex);
+ // remove the parentheses that were added
+
+ return {
+ valueWithId: `{{${replacedString.slice(3, -3)}}}`,
+ valueWithBrackets: `{{${bracketNotationString.slice(3, -3)}}}`,
+ allRefs: results.flatMap((r) => r.allRefs),
+ };
+ }
while ((match = expressionRegex.exec(input)) !== null) {
const fullMatch = match[0];
const expression = match[1].trim();
// Check if the expression contains relevant keywords
if (!relevantKeywords.test(expression)) {
+ replacedString += input.slice(lastIndex, match.index);
+ bracketNotationString += input.slice(lastIndex, match.index);
replacedString += fullMatch;
bracketNotationString += fullMatch;
lastIndex = match.index + fullMatch.length;
diff --git a/frontend/src/AppBuilder/_stores/slices/appSlice.js b/frontend/src/AppBuilder/_stores/slices/appSlice.js
index a850b96926..c9b21052e6 100644
--- a/frontend/src/AppBuilder/_stores/slices/appSlice.js
+++ b/frontend/src/AppBuilder/_stores/slices/appSlice.js
@@ -6,6 +6,7 @@ import DependencyGraph from './DependencyClass';
import { getWorkspaceId } from '@/_helpers/utils';
import { navigate } from '@/AppBuilder/_utils/misc';
import queryString from 'query-string';
+import { replaceEntityReferencesWithIds } from '../utils';
const initialState = {
app: {},
@@ -63,15 +64,19 @@ export const createAppSlice = (set, get) => ({
}
});
},
- globalSettingsChanged: async (newOptions) => {
- for (const [key, value] of Object.entries(newOptions)) {
+ globalSettingsChanged: async (options) => {
+ const componentNameIdMapping = get().modules.canvas.componentNameIdMapping;
+ const queryNameIdMapping = get().modules.canvas.queryNameIdMapping;
+ for (const [key, value] of Object.entries(options)) {
if (value?.[1]?.a == undefined) {
- newOptions[key] = value;
+ options[key] = value;
} else {
const hexCode = `${value?.[0]}${decimalToHex(value?.[1]?.a)}`;
- newOptions[key] = hexCode;
+ options[key] = hexCode;
}
}
+ // Replace entity references with ids if present
+ const newOptions = replaceEntityReferencesWithIds(options, componentNameIdMapping, queryNameIdMapping);
const { app, currentVersionId, currentPageId } = get();
try {
const res = await appVersionService.autoSaveApp(
diff --git a/frontend/src/AppBuilder/_stores/slices/componentsSlice.js b/frontend/src/AppBuilder/_stores/slices/componentsSlice.js
index d5b0afa9d4..7fb9650075 100644
--- a/frontend/src/AppBuilder/_stores/slices/componentsSlice.js
+++ b/frontend/src/AppBuilder/_stores/slices/componentsSlice.js
@@ -4,12 +4,12 @@ import {
resolveDynamicValues,
// extractAndReplaceReferencesFromString,
checkSubstringRegex,
+ hasArrayNotation,
+ parsePropertyPath,
} from '@/AppBuilder/_stores/utils';
import { extractAndReplaceReferencesFromString } from '@/AppBuilder/_stores/ast';
-import { componentTypeDefinitionMap } from '@/AppBuilder/WidgetManager';
import { deepClone } from '@/_helpers/utilities/utils.helpers';
-import { v4 as uuidv4 } from 'uuid';
-import _, { cloneDeep, merge } from 'lodash';
+import { cloneDeep, merge, set as lodashSet } from 'lodash';
import { computeComponentName, getAllChildComponents } from '@/AppBuilder/AppCanvas/appCanvasUtils';
import { pageConfig } from '@/AppBuilder/RightSideBar/PageSettingsTab/pageConfig';
import { RIGHT_SIDE_BAR_TAB } from '@/AppBuilder/RightSideBar/rightSidebarConstants';
@@ -243,7 +243,8 @@ export const createComponentsSlice = (set, get) => ({
property,
value,
component,
- componentResolvedValues = {}, // If componentResolvedValues is null, then it is from a setComponentProperty call
+ componentResolvedValues = {},
+ updatePassedValue = true,
moduleId
) => {
const {
@@ -281,7 +282,7 @@ export const createComponentsSlice = (set, get) => ({
allRefs.push(customResolvablePath);
}
}
- if (componentResolvedValues !== null)
+ if (updatePassedValue)
setAllValueToComponent(
componentDetails,
valueWithBrackets,
@@ -294,7 +295,7 @@ export const createComponentsSlice = (set, get) => ({
return { updatedValue: valueWithId, allRefs, unResolvedValue: valueWithBrackets, componentResolvedValues };
} else {
- if (componentResolvedValues !== null)
+ if (updatePassedValue)
setAllValueToComponent(
componentDetails,
value,
@@ -317,7 +318,7 @@ export const createComponentsSlice = (set, get) => ({
componentResolvedValues = {},
moduleId
) => {
- const { getAllExposedValues } = get();
+ const { getAllExposedValues, getComponentTypeFromId } = get();
const { componentId, paramType, property } = componentDetails;
const length = Object.keys(customResolvables).length;
if (length === 0) {
@@ -334,12 +335,31 @@ export const createComponentsSlice = (set, get) => ({
if (!componentResolvedValues[componentId][index][paramType]) {
componentResolvedValues[componentId][index][paramType] = {};
}
- componentResolvedValues[componentId][index][paramType][property] = resolvedValue;
+ if (hasArrayNotation(property)) {
+ const keys = parsePropertyPath(property);
+ lodashSet(
+ componentResolvedValues,
+ [componentId, index, paramType, ...keys],
+ getComponentTypeFromId(componentId) === 'Table' ? value : resolvedValue
+ );
+ } else {
+ componentResolvedValues[componentId][index][paramType][property] = resolvedValue;
+ }
} else {
if (!componentResolvedValues[componentId][paramType]) {
componentResolvedValues[componentId][paramType] = {};
}
- componentResolvedValues[componentId][paramType][property] = resolvedValue;
+
+ if (hasArrayNotation(property)) {
+ const keys = parsePropertyPath(property);
+ lodashSet(
+ componentResolvedValues,
+ [componentId, paramType, ...keys],
+ getComponentTypeFromId(componentId) === 'Table' ? value : resolvedValue
+ );
+ } else {
+ componentResolvedValues[componentId][paramType][property] = resolvedValue;
+ }
}
} else {
// Loop all the index and set the resolved value
@@ -564,6 +584,83 @@ export const createComponentsSlice = (set, get) => ({
};
},
+ // This function checks whether the property value is an array or not and then resolves the value accordingly
+ // Cases like Table column, Dropdown options, etc.
+ checkValueAndResolve: (
+ componentId,
+ paramType,
+ property,
+ value,
+ component,
+ resolvedComponentValues,
+ updatePassedValue = true,
+ moduleId
+ ) => {
+ const { updateResolvedValues, generateDependencyGraphForRefs } = get();
+ const updatedPropertyValue = cloneDeep(value);
+ if (Array.isArray(value)) {
+ value.forEach((val, index) => {
+ //This code assumes that the array always consists of objects the else condition is to handle the case when the value is an array of strings/numbers
+ if (val && typeof val === 'object') {
+ Object.entries(val).forEach(([key, keyValue]) => {
+ const propertyWithArrayValue = `${property}[${index}].${key}`;
+ const keys = [key];
+ if (keyValue?.value) {
+ keys.push('value');
+ }
+ const { allRefs, unResolvedValue, updatedValue } = updateResolvedValues(
+ componentId,
+ paramType,
+ propertyWithArrayValue,
+ keyValue?.value ?? keyValue,
+ component,
+ resolvedComponentValues,
+ updatePassedValue,
+ moduleId
+ );
+ lodashSet(updatedPropertyValue, [index, ...keys], updatedValue);
+ if (allRefs.length) {
+ generateDependencyGraphForRefs(allRefs, componentId, paramType, propertyWithArrayValue, unResolvedValue);
+ }
+ });
+ } else {
+ const propertyWithArrayValue = `${property}[${index}]`;
+ const { allRefs, unResolvedValue, updatedValue } = updateResolvedValues(
+ componentId,
+ paramType,
+ propertyWithArrayValue,
+ val,
+ component,
+ resolvedComponentValues,
+ updatePassedValue,
+ moduleId
+ );
+ updatedPropertyValue[index] = updatedValue;
+ console.log('updatedPropertyValue', updatedPropertyValue);
+ if (allRefs.length) {
+ generateDependencyGraphForRefs(allRefs, componentId, paramType, propertyWithArrayValue, unResolvedValue);
+ }
+ }
+ });
+ return { updatedValue: updatedPropertyValue };
+ } else {
+ const { allRefs, unResolvedValue, updatedValue } = updateResolvedValues(
+ componentId,
+ paramType,
+ property,
+ value,
+ component,
+ resolvedComponentValues,
+ updatePassedValue,
+ moduleId
+ );
+ if (allRefs.length) {
+ generateDependencyGraphForRefs(allRefs, componentId, paramType, property, unResolvedValue);
+ }
+ return { allRefs, unResolvedValue, updatedValue };
+ }
+ },
+
updateDependencyGraphAndResolvedValues: (
moduleId,
componentId,
@@ -572,22 +669,20 @@ export const createComponentsSlice = (set, get) => ({
resolvedComponentValues = {},
paramType
) => {
- const { updateResolvedValues, generateDependencyGraphForRefs, setAllValueToComponent } = get();
+ const { checkValueAndResolve, setAllValueToComponent } = get();
if (component.definition[paramType] === undefined) return;
Object.entries(component.definition[paramType]).forEach(([property, value]) => {
if (!value?.skipResolve) {
- const { allRefs, unResolvedValue } = updateResolvedValues(
+ checkValueAndResolve(
componentId,
paramType,
property,
value?.value,
component,
resolvedComponentValues,
+ true,
moduleId
);
- if (allRefs.length) {
- generateDependencyGraphForRefs(allRefs, componentId, paramType, property, unResolvedValue);
- }
} else {
const componentDetails = { componentId, paramType, property };
setAllValueToComponent(componentDetails, value?.value, false, null, {}, resolvedComponentValues, moduleId);
@@ -925,11 +1020,10 @@ export const createComponentsSlice = (set, get) => ({
saveComponentChanges,
withUndoRedo,
getComponentTypeFromId,
- updateResolvedValues,
- generateDependencyGraphForRefs,
setResolvedComponent,
getComponentDefinition,
currentLayout,
+ checkValueAndResolve,
} = get();
let hasParentChanged = false;
let oldParentId;
@@ -1003,19 +1097,16 @@ export const createComponentsSlice = (set, get) => ({
objectsToUpdate.forEach((paramType) => {
if (component.definition[paramType]) {
Object.entries(component.definition[paramType]).forEach(([property, value]) => {
- const { allRefs, unResolvedValue } = updateResolvedValues(
+ checkValueAndResolve(
componentId,
paramType,
property,
value.value,
component,
resolvedComponentValues,
+ true,
moduleId
);
-
- if (allRefs.length) {
- generateDependencyGraphForRefs(allRefs, componentId, paramType, property, unResolvedValue, true);
- }
});
}
});
@@ -1066,22 +1157,75 @@ export const createComponentsSlice = (set, get) => ({
removeDependency,
getComponentDefinition,
setValueToComponent,
+ checkValueAndResolve,
+ getResolvedComponent,
+ setResolvedComponent,
} = get();
const { component } = getComponentDefinition(componentId, moduleId);
+ const oldValue = component.definition[paramType][property];
+
+ if (Array.isArray(oldValue?.value)) {
+ const resolvedComponent = { [componentId]: deepClone(getResolvedComponent(componentId) ?? {}) };
+ resolvedComponent[componentId][paramType][property] = [];
+
+ const { updatedValue } = checkValueAndResolve(
+ componentId,
+ paramType,
+ property,
+ value,
+ component,
+ resolvedComponent,
+ true,
+ moduleId
+ );
+ setResolvedComponent(componentId, resolvedComponent[componentId], moduleId);
+
+ // If the value is not changed, return
+ if (oldValue?.[attr] === updatedValue || oldValue === updatedValue) return;
+
+ set(
+ withUndoRedo((state) => {
+ const pageComponent = state.modules[moduleId].pages[currentPageIndex].components[componentId].component;
+ lodashSet(pageComponent, ['definition', paramType, property, attr], updatedValue);
+ }, skipUndoRedo),
+ false,
+ 'setComponentProperty'
+ );
+
+ const oldComponent = get().modules[moduleId].pages[currentPageIndex].components[componentId].component;
+ const { events, exposedVariables, ...filteredDefinition } = oldComponent.definition || {};
+
+ const diff = {
+ [componentId]: {
+ component: {
+ ...oldComponent,
+ definition: filteredDefinition,
+ },
+ },
+ };
+
+ if (saveAfterAction) {
+ const currentMode = get().currentMode;
+ if (currentMode !== 'view') saveComponentChanges(diff, 'components', 'update');
+
+ get().multiplayer.broadcastUpdates({ componentId, property, value, paramType, attr }, 'components', 'update');
+ }
+ return;
+ }
+
// Update the value and get new dependencies
const { updatedValue, allRefs, unResolvedValue } =
attr === 'value' && !skipResolve
- ? updateResolvedValues(componentId, paramType, property, value, component, null, moduleId)
+ ? updateResolvedValues(componentId, paramType, property, value, component, null, false, moduleId)
: { updatedValue: value, allRefs: [], unResolvedValue: value };
// If the value is not changed, return
- const oldValue = component.definition[paramType][property];
if (oldValue?.[attr] === updatedValue || oldValue === updatedValue) return;
set(
withUndoRedo((state) => {
const pageComponent = state.modules[moduleId].pages[currentPageIndex].components[componentId].component;
- _.set(pageComponent, ['definition', paramType, property, attr], updatedValue);
+ lodashSet(pageComponent, ['definition', paramType, property, attr], updatedValue);
}, skipUndoRedo),
false,
'setComponentProperty'
@@ -1100,8 +1244,16 @@ export const createComponentsSlice = (set, get) => ({
);
}
+ const oldComponent = get().modules[moduleId].pages[currentPageIndex].components[componentId].component;
+ const { events, exposedVariables, ...filteredDefinition } = oldComponent.definition || {};
+
const diff = {
- [componentId]: { component: get().modules[moduleId].pages[currentPageIndex].components[componentId].component },
+ [componentId]: {
+ component: {
+ ...oldComponent,
+ definition: filteredDefinition,
+ },
+ },
};
if (saveAfterAction) {
@@ -1130,9 +1282,8 @@ export const createComponentsSlice = (set, get) => ({
const {
currentPageIndex,
saveComponentChanges,
- updateResolvedValues,
+ checkValueAndResolve,
getComponentDefinition,
- generateDependencyGraphForRefs,
getComponentTypeFromId,
setResolvedComponent,
withUndoRedo,
@@ -1189,19 +1340,16 @@ export const createComponentsSlice = (set, get) => ({
objectsToUpdate.forEach((paramType) => {
if (component.definition[paramType]) {
Object.entries(component.definition[paramType]).forEach(([property, value]) => {
- const { allRefs, unResolvedValue } = updateResolvedValues(
+ checkValueAndResolve(
componentId,
paramType,
property,
value.value,
component,
resolvedComponentValues,
+ true,
moduleId
);
-
- if (allRefs.length) {
- generateDependencyGraphForRefs(allRefs, componentId, paramType, property, unResolvedValue, true);
- }
});
}
});
@@ -1427,6 +1575,8 @@ export const createComponentsSlice = (set, get) => ({
getNodeData,
getEntityResolvedValueLength,
updateChildComponentResolvedValues,
+ getComponentTypeFromId,
+ getResolvedComponent,
} = get();
const dependecies = getDependencies(path, moduleId);
if (dependecies?.length) {
@@ -1436,7 +1586,8 @@ export const createComponentsSlice = (set, get) => ({
if (itemsLength) {
updateChildComponentResolvedValues(dependency, path, itemsLength, moduleId);
} else {
- const [entityType, entityId, type, key] = dependency.split('.');
+ const [entityType, entityId, type, ...keys] = dependency.split('.');
+ const key = keys.join('.');
const unResolvedValue = getNodeData(dependency);
const resolvedValue = resolveDynamicValues(unResolvedValue, getAllExposedValues(), {}, false, []);
@@ -1455,13 +1606,46 @@ export const createComponentsSlice = (set, get) => ({
? get().debugger.validateProperty(entityId, type, key, resolvedValue)
: resolvedValue;
- set(
- (state) => {
- state.resolvedStore.modules[moduleId][entityType][entityId][type][key] = validatedValue;
- },
- false,
- 'updateDependencyValues'
- );
+ // logic to handle the key like options[0].visible. It will resolve the visible directly and update the resolved store
+ if (hasArrayNotation(key)) {
+ const keys = parsePropertyPath(key);
+ // Triggering a re-render of the table component if any of the dependent component is updated
+ // This is done to calculate the callValues in the table component
+ // Need to find a better way to handle this
+ if (getComponentTypeFromId(entityId, moduleId) === 'Table') {
+ set(
+ (state) => {
+ lodashSet(
+ state.resolvedStore.modules[moduleId][entityType][entityId],
+ ['properties', 'shouldRender'],
+ (getResolvedComponent(entityId)?.['properties']?.['shouldRender'] ?? 0) + 1
+ );
+ },
+ false,
+ 'updateDependencyValues'
+ );
+ } else {
+ set(
+ (state) => {
+ lodashSet(
+ state.resolvedStore.modules[moduleId][entityType][entityId],
+ [type, ...keys],
+ getComponentTypeFromId(entityId, moduleId) === 'Table' ? unResolvedValue + ' ' : validatedValue
+ );
+ },
+ false,
+ 'updateDependencyValues'
+ );
+ }
+ } else {
+ set(
+ (state) => {
+ state.resolvedStore.modules[moduleId][entityType][entityId][type][key] = validatedValue;
+ },
+ false,
+ 'updateDependencyValues'
+ );
+ }
}
}
});
@@ -1588,7 +1772,7 @@ export const createComponentsSlice = (set, get) => ({
};
const regex =
- /(components|queries)(\??\.|\??\.?\[['"]?)([0-9a-fA-F]{8}-[0-9a-fA-F]{4}-[0-9a-fA-F]{4}-[0-9a-fA-F]{4}-[0-9a-fA-F]{12})(['"]?\])?(\??\.?)([^\s|},[\])?]+)?/g;
+ /(components|queries)(\??\.|\??\.?\[['"]?)([0-9a-fA-F]{8}-[0-9a-fA-F]{4}-[0-9a-fA-F]{4}-[0-9a-fA-F]{4}-[0-9a-fA-F]{12})(['"]?\])?(\??\.|\[['"]?)([^\s:?[\]'"+\-&|]+)/g;
return input.replace(regex, (match, category, prefix, id, suffix, optionalChaining, property) => {
if (mappings[category] && mappings[category][id]) {
diff --git a/frontend/src/AppBuilder/_stores/slices/eventsSlice.js b/frontend/src/AppBuilder/_stores/slices/eventsSlice.js
index 02ee8fc29c..6817e6aa39 100644
--- a/frontend/src/AppBuilder/_stores/slices/eventsSlice.js
+++ b/frontend/src/AppBuilder/_stores/slices/eventsSlice.js
@@ -211,7 +211,7 @@ export const createEventsSlice = (set, get) => ({
state.eventsSlice.module[moduleId].events = newEvents;
});
},
- setTablePageIndex: (tableId, index) => {
+ setTablePageIndex: (tableId, index = 1) => {
const { getExposedValueOfComponent } = get();
if (_.isEmpty(tableId)) {
console.log('No table is associated with this event.');
diff --git a/frontend/src/AppBuilder/_stores/slices/gridSlice.js b/frontend/src/AppBuilder/_stores/slices/gridSlice.js
index 3a6e3146d5..69e5560497 100644
--- a/frontend/src/AppBuilder/_stores/slices/gridSlice.js
+++ b/frontend/src/AppBuilder/_stores/slices/gridSlice.js
@@ -1,7 +1,9 @@
import { NO_OF_GRIDS } from '@/AppBuilder/AppCanvas/appCanvasConstants';
+import { debounce } from 'lodash';
const initialState = {
hoveredComponentForGrid: '',
+ triggerCanvasUpdater: false,
};
export const createGridSlice = (set, get) => ({
@@ -9,8 +11,13 @@ export const createGridSlice = (set, get) => ({
setHoveredComponentForGrid: (id) =>
set(() => ({ hoveredComponentForGrid: id }), false, { type: 'setHoveredComponentForGrid', id }),
getHoveredComponentForGrid: () => get().hoveredComponentForGrid,
+ toggleCanvasUpdater: () =>
+ set((state) => ({ triggerCanvasUpdater: !state.triggerCanvasUpdater }), false, { type: 'toggleCanvasUpdater' }),
+ debouncedToggleCanvasUpdater: debounce(() => {
+ get().toggleCanvasUpdater();
+ }, 200),
moveComponentPosition: (direction) => {
- const { setComponentLayout, currentLayout, getSelectedComponentsDefinition } = get();
+ const { setComponentLayout, currentLayout, getSelectedComponentsDefinition, debouncedToggleCanvasUpdater } = get();
let layouts = {};
const selectedComponents = getSelectedComponentsDefinition();
selectedComponents.forEach((selectedComponent) => {
@@ -53,5 +60,6 @@ export const createGridSlice = (set, get) => ({
};
});
setComponentLayout(layouts);
+ debouncedToggleCanvasUpdater();
},
});
diff --git a/frontend/src/AppBuilder/_stores/slices/leftSideBarSlice.js b/frontend/src/AppBuilder/_stores/slices/leftSideBarSlice.js
index 1670efd995..ed6703146f 100644
--- a/frontend/src/AppBuilder/_stores/slices/leftSideBarSlice.js
+++ b/frontend/src/AppBuilder/_stores/slices/leftSideBarSlice.js
@@ -1,21 +1,23 @@
-const selectedItem = localStorage.getItem('selectedSidebarItem');
-const isLeftSideBarPinned = !!selectedItem;
-const selectedSidebarItem = selectedItem;
+const validSidebarItems = ['page', 'inspect', 'debugger', 'settings'];
+const storedIsSidebarPinned = localStorage.getItem('isLeftSideBarPinned') === 'true' ? true : false;
+const storedSelectedSidebarItem = !storedIsSidebarPinned
+ ? null
+ : localStorage.getItem('selectedSidebarItem') &&
+ validSidebarItems.includes(localStorage.getItem('selectedSidebarItem'))
+ ? localStorage.getItem('selectedSidebarItem')
+ : 'page';
const initialState = {
- isSidebarOpen: isLeftSideBarPinned || !!selectedSidebarItem,
- isLeftSideBarPinned,
- selectedSidebarItem,
+ isLeftSideBarPinned: storedIsSidebarPinned,
+ selectedSidebarItem: storedIsSidebarPinned ? storedSelectedSidebarItem : null,
+ isSidebarOpen: storedIsSidebarPinned,
};
-export const createLeftSideBarSlice = (set, get) => ({
+export const createLeftSideBarSlice = (set) => ({
...initialState,
setIsLeftSideBarPinned: (status) => {
- status
- ? localStorage.setItem('selectedSidebarItem', get().selectedSidebarItem)
- : localStorage.removeItem('selectedSidebarItem');
-
- set(() => ({ isLeftSideBarPinned: status }));
+ localStorage.setItem('isLeftSideBarPinned', status === true ? 'true' : 'false');
+ set(() => ({ isLeftSideBarPinned: status }), false, 'setIsLeftSideBarPinned');
},
setSelectedSidebarItem: (selectedSidebarItem) =>
set(() => ({ selectedSidebarItem }), false, 'setSelectedSidebarItem'),
diff --git a/frontend/src/AppBuilder/_stores/slices/pageMenuSlice.js b/frontend/src/AppBuilder/_stores/slices/pageMenuSlice.js
index 89b93741b7..4176985aa6 100644
--- a/frontend/src/AppBuilder/_stores/slices/pageMenuSlice.js
+++ b/frontend/src/AppBuilder/_stores/slices/pageMenuSlice.js
@@ -111,8 +111,8 @@ export const createPageMenuSlice = (set, get) => {
set((state) => {
state.editingPage = page;
if (ref) {
- state.showEditingPopover = true;
state.popoverTargetId = ref?.current?.id;
+ state.showEditingPopover = true;
}
}),
diff --git a/frontend/src/AppBuilder/_stores/slices/queryPanelSlice.js b/frontend/src/AppBuilder/_stores/slices/queryPanelSlice.js
index 27a59740db..c989df9051 100644
--- a/frontend/src/AppBuilder/_stores/slices/queryPanelSlice.js
+++ b/frontend/src/AppBuilder/_stores/slices/queryPanelSlice.js
@@ -26,11 +26,20 @@ const initialState = {
previewPanelExpanded: false,
loadingDataQueries: false,
isPreviewQueryLoading: false,
+ queryPanelSearchTem: '',
};
export const createQueryPanelSlice = (set, get) => ({
queryPanel: {
...initialState,
+ setQueryPanelSearchTerm: (searchTerm) =>
+ set(
+ (state) => {
+ state.queryPanel.queryPanelSearchTem = searchTerm;
+ },
+ false,
+ 'setQueryPanelSearchTerm'
+ ),
setIsDraggingQueryPane: (isDraggingQueryPane) =>
set(
(state) => {
@@ -432,7 +441,9 @@ export const createQueryPanelSlice = (set, get) => ({
isLoading: false,
data: finalData,
rawData,
- metadata: data.metadata,
+ metadata: data?.metadata,
+ request: data?.metadata?.request,
+ response: data?.metadata?.response,
});
resolve({ status: 'ok', data: finalData });
diff --git a/frontend/src/AppBuilder/_stores/slices/resolvedSlice.js b/frontend/src/AppBuilder/_stores/slices/resolvedSlice.js
index c83f8408ce..dc6eb9cecc 100644
--- a/frontend/src/AppBuilder/_stores/slices/resolvedSlice.js
+++ b/frontend/src/AppBuilder/_stores/slices/resolvedSlice.js
@@ -183,7 +183,7 @@ export const createResolvedSlice = (set, get) => ({
);
Object.entries(details).forEach(([key, value]) => {
- if (['isLoading', 'data', 'rawData'].includes(key)) {
+ if (['isLoading', 'data', 'rawData', 'request', 'response', 'responseHeaders', 'metadata'].includes(key)) {
if (typeof value !== 'function') get().updateDependencyValues(`queries.${queryId}.${key}`);
}
});
@@ -394,7 +394,22 @@ export const createResolvedSlice = (set, get) => ({
return get().resolvedStore?.modules?.[moduleId]?.components?.[componentId];
},
getExposedValueOfComponent: (componentId, moduleId = 'canvas') => {
- return get().resolvedStore.modules[moduleId].exposedValues.components[componentId] || {};
+ try {
+ const components = get().getCurrentPageComponents();
+ const {
+ component: { parent: parentId, name: componentName },
+ } = components[componentId];
+ if (parentId) {
+ // if parent is form get exposed values from children
+ const { component: parentComopnent } = components?.[parentId] || {};
+ if (parentComopnent?.component === 'Form') {
+ return get().resolvedStore.modules[moduleId].exposedValues.components[parentId].children[componentName] || {};
+ }
+ }
+ return get().resolvedStore.modules[moduleId].exposedValues.components[componentId] || {};
+ } catch (error) {
+ return {};
+ }
},
getAllExposedValues: (moduleId = 'canvas') => {
return get().resolvedStore.modules[moduleId].exposedValues;
diff --git a/frontend/src/AppBuilder/_stores/slices/undoRedoSlice.js b/frontend/src/AppBuilder/_stores/slices/undoRedoSlice.js
index ec8e9bbf58..901baed1f3 100644
--- a/frontend/src/AppBuilder/_stores/slices/undoRedoSlice.js
+++ b/frontend/src/AppBuilder/_stores/slices/undoRedoSlice.js
@@ -106,6 +106,7 @@ export const createUndoRedoSlice = (set, get) => {
componenetPropertiesToUpdate.paramType,
componenetPropertiesToUpdate.attr,
undefined,
+ undefined,
{ skipUndoRedo: true }
);
}
diff --git a/frontend/src/AppBuilder/_stores/utils.js b/frontend/src/AppBuilder/_stores/utils.js
index 20570b9b36..cc598af3a9 100644
--- a/frontend/src/AppBuilder/_stores/utils.js
+++ b/frontend/src/AppBuilder/_stores/utils.js
@@ -672,3 +672,34 @@ export function convertAllKeysToSnakeCase(o) {
// return { suggestionList, hintsMap, resolvedRefs };
// }
+
+export const hasArrayNotation = (property) => {
+ // Regular expression to match array notation pattern
+ const arrayPattern = /\[\d+\]/;
+ return arrayPattern.test(property);
+};
+
+export const parsePropertyPath = (property) => {
+ // Split the property path into segments
+ const segments = property.split('.');
+ const result = [];
+
+ for (const segment of segments) {
+ // Check if segment contains array notation
+ if (hasArrayNotation(segment)) {
+ // Extract the property name and array index
+ const [name, ...rest] = segment.split('[');
+ if (name) result.push(name);
+
+ // Extract and clean up array indices
+ for (const item of rest) {
+ const index = parseInt(item.replace(']', ''));
+ result.push(index);
+ }
+ } else {
+ result.push(segment);
+ }
+ }
+
+ return result;
+};
diff --git a/frontend/src/AppBuilder/_utils/misc.js b/frontend/src/AppBuilder/_utils/misc.js
index 820e4c5d83..14929007f8 100644
--- a/frontend/src/AppBuilder/_utils/misc.js
+++ b/frontend/src/AppBuilder/_utils/misc.js
@@ -24,6 +24,26 @@ export async function copyToClipboard(text) {
}
}
+export const extractEnvironmentConstantsFromConstantsList = (constantsList = [], environmentName = 'development') => {
+ try {
+ return constantsList.map((constant) => {
+ if (constant.values && Array.isArray(constant.values)) {
+ const { value } = constant.values.find((value) => value.environmentName === environmentName);
+ return {
+ id: constant.id,
+ name: constant.name,
+ value,
+ type: constant.type,
+ };
+ } else {
+ return constant;
+ }
+ });
+ } catch (error) {
+ return [];
+ }
+};
+
export function setTablePageIndex(tableId, index) {
if (_.isEmpty(tableId)) {
console.log('No table is associated with this event.');
diff --git a/frontend/src/Editor/Components/ButtonGroup.jsx b/frontend/src/Editor/Components/ButtonGroup.jsx
index 9711820bc7..7364348271 100644
--- a/frontend/src/Editor/Components/ButtonGroup.jsx
+++ b/frontend/src/Editor/Components/ButtonGroup.jsx
@@ -34,6 +34,12 @@ export const ButtonGroup = function Button({
display: visibility ? '' : 'none',
};
+ const disabledStyles = {
+ opacity: 0.5,
+ pointerEvents: 'none',
+ cursor: 'not-allowed',
+ };
+
const [defaultActive, setDefaultActive] = useState(defaultSelected);
const [data, setData] = useState(values);
@@ -62,7 +68,7 @@ export const ButtonGroup = function Button({
const buttonClick = (index) => {
if (defaultActive?.includes(values[index]) && multiSelection) {
- const copyDefaultActive = defaultActive;
+ const copyDefaultActive = [...defaultActive];
copyDefaultActive?.splice(copyDefaultActive?.indexOf(values[index]), 1);
setDefaultActive(copyDefaultActive);
setExposedVariable('selected', copyDefaultActive.join(','));
@@ -100,6 +106,7 @@ export const ButtonGroup = function Button({
color: defaultActive?.includes(values[index]) ? selectedTextColor : textColor,
transition: 'all .1s ease',
boxShadow,
+ ...(disabledState && disabledStyles),
}}
key={index}
disabled={disabledState}
diff --git a/frontend/src/Editor/Components/Checkbox.jsx b/frontend/src/Editor/Components/Checkbox.jsx
index 5b0021114c..f64986c6a4 100644
--- a/frontend/src/Editor/Components/Checkbox.jsx
+++ b/frontend/src/Editor/Components/Checkbox.jsx
@@ -20,7 +20,6 @@ export const Checkbox = ({
const isMandatory = validation?.mandatory ?? false;
const [defaultValue, setDefaultValue] = useState(defaultValueFromProperties);
const [checked, setChecked] = useState(defaultValueFromProperties);
- const [value, setValue] = React.useState(defaultValueFromProperties);
const [userInteracted, setUserInteracted] = useState(false);
const { label } = properties;
@@ -33,14 +32,12 @@ export const Checkbox = ({
const [loading, setLoading] = useState(properties?.loadingState);
const [disable, setDisable] = useState(disabledState || loadingState);
const [visibility, setVisibility] = useState(properties.visibility);
- const { isValid, validationError } = validate(checked);
+ const [validationStatus, setValidationStatus] = useState(validate(checked));
+ const { isValid, validationError } = validationStatus;
const toggleValue = (e) => {
const isChecked = e.target.checked;
- setChecked(isChecked);
- setValue(isChecked);
-
- setExposedVariable('value', isChecked);
+ setInputValue(isChecked);
if (isChecked) {
fireEvent('onCheck');
} else {
@@ -52,9 +49,8 @@ export const Checkbox = ({
useEffect(() => {
if (isInitialRender.current) return;
setDefaultValue(defaultValueFromProperties);
- setChecked(defaultValueFromProperties);
- setValue(defaultValueFromProperties);
- setExposedVariable('value', defaultValueFromProperties);
+ setInputValue(defaultValueFromProperties);
+
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [defaultValueFromProperties]);
@@ -104,20 +100,29 @@ export const Checkbox = ({
useEffect(() => {
if (isInitialRender.current) return;
- setExposedVariable('isValid', isValid);
+ const validationStatus = validate(checked);
+ setValidationStatus(validationStatus);
+ setExposedVariable('isValid', validationStatus?.isValid);
+ }, [validate]);
+
+ useEffect(() => {
+ if (isInitialRender.current) return;
+ setExposedVariable('toggle', async function () {
+ setInputValue(!checked);
+ fireEvent('onChange');
+ setUserInteracted(true);
+ });
// eslint-disable-next-line react-hooks/exhaustive-deps
- }, [isValid]);
+ }, [checked]);
useEffect(() => {
const setCheckedAndNotify = async (status) => {
- await setExposedVariable('value', status);
+ setInputValue(status);
if (status) {
fireEvent('onCheck');
} else {
fireEvent('onUnCheck');
}
- setChecked(status);
- setValue(status);
};
const exposedVariables = {
@@ -137,14 +142,9 @@ export const Checkbox = ({
setExposedVariable('isDisabled', disable);
},
toggle: () => {
- setExposedVariable('toggle', async function () {
- setExposedVariable('value', !checked);
- fireEvent('onChange');
- setChecked(!checked);
- setValue(!checked);
- setUserInteracted(true);
- });
- // eslint-disable-next-line react-hooks/exhaustive-deps
+ setInputValue(!checked);
+ fireEvent('onChange');
+ setUserInteracted(true);
},
label: label,
isMandatory: isMandatory,
@@ -154,10 +154,6 @@ export const Checkbox = ({
isValid: isValid,
};
- setDefaultValue(defaultValueFromProperties);
- setChecked(defaultValueFromProperties);
- setValue(defaultValueFromProperties);
-
setExposedVariables(exposedVariables);
isInitialRender.current = false;
@@ -167,9 +163,7 @@ export const Checkbox = ({
const handleToggleChange = () => {
const newCheckedState = !checked;
- setChecked(newCheckedState);
- setValue(newCheckedState);
- setExposedVariable('value', newCheckedState);
+ setInputValue(newCheckedState);
fireEvent('onChange');
if (newCheckedState) {
fireEvent('onCheck');
@@ -179,6 +173,14 @@ export const Checkbox = ({
setUserInteracted(true);
};
+ const setInputValue = (value) => {
+ setChecked(value);
+ setExposedVariable('value', value);
+ const validationStatus = validate(value);
+ setValidationStatus(validationStatus);
+ setExposedVariable('isValid', validationStatus?.isValid);
+ };
+
const renderCheckBox = () => (
<>
)}
+
{/* {
- if (currentTab === tab.id) {
+ if (currentTab == tab.id) {
parentRef.current = newCurrent;
}
}}
@@ -202,7 +201,7 @@ export const Tabs = function Tabs({
>
{shouldRenderTabContent(tab) && renderTabContent(id, tab)}
- {/* {tab.id === currentTab &&
))}
{
+ const _setValue = (value) => {
+ if (typeof value === 'string') {
+ codeChanged(value);
+ }
+ };
+ setExposedVariable('setValue', _setValue);
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, []);
+
return (
{
setShowValidationError(true);
- setDate(date);
- const dateString = computeDateString(date);
- setExposedVariable('value', dateString);
+ setInputValue(date);
fireEvent('onSelect');
};
@@ -51,11 +52,9 @@ export const Datepicker = function Datepicker({
if (isInitialRender.current) return;
const dateMomentInstance = defaultValue && moment(defaultValue, selectedDateFormat);
if (dateMomentInstance && dateMomentInstance.isValid()) {
- setDate(dateMomentInstance.toDate());
- setExposedVariable('value', defaultValue);
+ setInputValue(dateMomentInstance.toDate());
} else {
- setDate(null);
- setExposedVariable('value', undefined);
+ setInputValue(null);
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [defaultValue]);
@@ -73,32 +72,28 @@ export const Datepicker = function Datepicker({
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [disabledDates, format]);
- const validationData = validate(computeDateString(date));
- const { isValid, validationError } = validationData;
+ useEffect(() => {
+ if (isInitialRender.current) return;
+ const validationStatus = validate(computeDateString(date));
+ setValidationStatus(validationStatus);
+ setExposedVariable('isValid', validationStatus?.isValid);
+ }, [validate]);
useEffect(() => {
- isInitialRender.current = false;
- setExposedVariable('isValid', isValid);
- // eslint-disable-next-line react-hooks/exhaustive-deps
- }, [isValid]);
-
- useEffect(() => {
- const exposedVariables = {
- isValid,
- };
const dateMomentInstance = defaultValue && moment(defaultValue, selectedDateFormat);
- if (dateMomentInstance && dateMomentInstance.isValid()) {
- setDate(dateMomentInstance.toDate());
- exposedVariables.value = defaultValue;
- } else {
- setDate(null);
- exposedVariables.value = undefined;
- }
- setExposedVariables(exposedVariables);
+ setInputValue(dateMomentInstance && dateMomentInstance.isValid() ? dateMomentInstance.toDate() : null);
isInitialRender.current = false;
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
+ const setInputValue = (value) => {
+ setDate(value);
+ setExposedVariable('value', value ? computeDateString(value) : undefined);
+ const validationStatus = validate(computeDateString(value));
+ setValidationStatus(validationStatus);
+ setExposedVariable('isValid', validationStatus?.isValid);
+ };
+
return (
- (advanced ? findDefaultItem(schema) : value));
const [showValidationError, setShowValidationError] = useState(false);
- const validationData = validate(value);
- const { isValid, validationError } = validationData;
+ const [validationStatus, setValidationStatus] = useState(validate(value));
+ const { isValid, validationError } = validationStatus;
function findDefaultItem(schema) {
const foundItem = schema?.find((item) => item?.default === true);
return !hasVisibleFalse(foundItem?.value) ? foundItem?.value : undefined;
@@ -59,15 +59,11 @@ export const DropDown = function DropDown({
}
const setExposedItem = (value, index, onSelectFired = false) => {
- setCurrentValue(value);
+ const selectedOptionLabel = index === undefined ? undefined : display_values?.[index];
+ setInputValue(value, selectedOptionLabel);
if (onSelectFired) {
fireEvent('onSelect');
}
- const exposedVariables = {
- value,
- selectedOptionLabel: index === undefined ? undefined : display_values?.[index],
- };
- setExposedVariables(exposedVariables);
};
function selectOption(value) {
@@ -80,17 +76,6 @@ export const DropDown = function DropDown({
setExposedItem(undefined, undefined, true);
}
}
- useEffect(() => {
- if (isInitialRender.current) return;
- setExposedVariable('isValid', isValid);
- // eslint-disable-next-line react-hooks/exhaustive-deps
- }, [isValid]);
-
- useEffect(() => {
- if (isInitialRender.current) return;
- setExposedVariable('value', currentValue);
- // eslint-disable-next-line react-hooks/exhaustive-deps
- }, [currentValue]);
useEffect(() => {
if (isInitialRender.current) return;
@@ -105,6 +90,13 @@ export const DropDown = function DropDown({
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [label]);
+ useEffect(() => {
+ if (isInitialRender.current) return;
+ const validationStatus = validate(currentValue);
+ setValidationStatus(validationStatus);
+ setExposedVariable('isValid', validationStatus?.isValid);
+ }, [validate]);
+
useEffect(() => {
if (isInitialRender.current) return;
if (advanced) {
@@ -113,7 +105,7 @@ export const DropDown = function DropDown({
schema?.filter((item) => item?.visible)?.map((item) => item.label)
);
if (hasVisibleFalse(currentValue)) {
- setCurrentValue(findDefaultItem(schema));
+ setInputValue(findDefaultItem(schema));
}
} else setExposedVariable('optionLabels', display_values);
// eslint-disable-next-line react-hooks/exhaustive-deps
@@ -137,14 +129,21 @@ export const DropDown = function DropDown({
};
setExposedVariables(exposedVariables);
- if (hasVisibleFalse(currentValue)) {
- setCurrentValue(findDefaultItem(schema));
- }
isInitialRender.current = false;
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
+ useEffect(() => {
+ const exposedVariables = {
+ selectOption: async function (value) {
+ selectOption(value);
+ },
+ };
+
+ setExposedVariables(exposedVariables);
+ }, [JSON.stringify(properties.values)]);
+
useEffect(() => {
let newValue = undefined;
let index = null;
@@ -184,6 +183,14 @@ export const DropDown = function DropDown({
}
};
+ const setInputValue = (value, label) => {
+ setCurrentValue(value);
+ setExposedVariables({ value, selectedOptionLabel: label });
+ const validationStatus = validate(value);
+ setValidationStatus(validationStatus);
+ setExposedVariable('isValid', validationStatus?.isValid);
+ };
+
const customStyles = {
control: (provided, state) => ({
...provided,
@@ -276,10 +283,8 @@ export const DropDown = function DropDown({
onChange={(selectedOption, actionProps) => {
setShowValidationError(true);
if (actionProps.action === 'select-option') {
- setCurrentValue(selectedOption.value);
- setExposedVariable('value', selectedOption.value);
+ setInputValue(selectedOption.value, selectedOption.label);
fireEvent('onSelect');
- setExposedVariable('selectedOptionLabel', selectedOption.label);
}
}}
options={selectOptions}
diff --git a/frontend/src/Editor/Components/DropdownV2/DropdownV2.jsx b/frontend/src/Editor/Components/DropdownV2/DropdownV2.jsx
index a4b318eadf..a597b5bf57 100644
--- a/frontend/src/Editor/Components/DropdownV2/DropdownV2.jsx
+++ b/frontend/src/Editor/Components/DropdownV2/DropdownV2.jsx
@@ -90,17 +90,19 @@ export const DropdownV2 = ({
} = styles;
const isInitialRender = useRef(true);
const [currentValue, setCurrentValue] = useState(() => (advanced ? findDefaultItem(schema) : value));
- const getResolvedValue = useStore((state) => state.getResolvedValue, shallow);
const isMandatory = validation?.mandatory ?? false;
const options = properties?.options;
- const validationData = validate(currentValue);
- const { isValid, validationError } = validationData;
+ const [validationStatus, setValidationStatus] = useState(validate(currentValue));
+ const { isValid, validationError } = validationStatus;
const ref = React.useRef(null);
+ const dropdownRef = React.useRef(null);
const [visibility, setVisibility] = useState(properties.visibility);
const [isDropdownLoading, setIsDropdownLoading] = useState(dropdownLoadingState);
const [isDropdownDisabled, setIsDropdownDisabled] = useState(disabledState);
- const [isFocused, setIsFocused] = useState(false);
const [searchInputValue, setSearchInputValue] = useState('');
+ const [isDropdownOpen, setIsDropdownOpen] = useState(false);
+ const [userInteracted, setUserInteracted] = useState(false);
+
const _height = padding === 'default' ? `${height}px` : `${height + 4}px`;
const labelRef = useRef();
function findDefaultItem(schema) {
@@ -115,12 +117,12 @@ export const DropdownV2 = ({
let _options = advanced ? schema : options;
if (Array.isArray(_options)) {
let _selectOptions = _options
- .filter((data) => getResolvedValue(advanced ? data?.visible : data?.visible?.value) ?? true)
+ .filter((data) => data?.visible ?? true)
.map((data) => ({
...data,
- label: String(getResolvedValue(data?.label)),
- value: getResolvedValue(data?.value),
- isDisabled: getResolvedValue(advanced ? data?.disable : data?.disable?.value) ?? false,
+ label: data?.label,
+ value: data?.value,
+ isDisabled: data?.disable ?? false,
}));
return _selectOptions;
@@ -132,7 +134,7 @@ export const DropdownV2 = ({
function selectOption(value) {
const val = selectOptions.filter((option) => !option.isDisabled)?.find((option) => option.value === value);
if (val) {
- setCurrentValue(value);
+ setInputValue(value);
fireEvent('onSelect');
}
}
@@ -157,24 +159,48 @@ export const DropdownV2 = ({
const handleOutsideClick = (e) => {
let menu = ref.current.querySelector('.select__menu');
if (!ref.current.contains(e.target) || !menu || !menu.contains(e.target)) {
- setIsFocused(false);
setSearchInputValue('');
}
+ if (dropdownRef.current && !dropdownRef.current?.contains(e.target) && !menu && !menu?.contains(e.target)) {
+ if (isDropdownOpen) {
+ fireEvent('onBlur');
+ }
+ setIsDropdownOpen(false);
+ }
+ };
+
+ const setInputValue = (value) => {
+ setCurrentValue(value);
+ const _selectedOption = selectOptions.find((option) => option.value === value);
+ setExposedVariables({
+ value,
+ selectedOption: pick(_selectedOption, ['label', 'value']),
+ });
+ const validationStatus = validate(value);
+ setValidationStatus(validationStatus);
+ setExposedVariable('isValid', validationStatus?.isValid);
};
useEffect(() => {
if (advanced) {
- setCurrentValue(findDefaultItem(schema));
- } else setCurrentValue(value);
+ setInputValue(findDefaultItem(schema));
+ }
// eslint-disable-next-line react-hooks/exhaustive-deps
- }, [advanced, value, JSON.stringify(schema)]);
+ }, [advanced, JSON.stringify(schema)]);
+
+ useEffect(() => {
+ if (!advanced) {
+ setInputValue(value);
+ }
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [advanced, value]);
useEffect(() => {
document.addEventListener('mousedown', handleOutsideClick);
return () => {
document.removeEventListener('mousedown', handleOutsideClick);
};
- }, []);
+ }, [isDropdownOpen]);
useEffect(() => {
if (visibility !== properties.visibility) setVisibility(properties.visibility);
@@ -186,18 +212,6 @@ export const DropdownV2 = ({
// Exposed variables
- useEffect(() => {
- if (isInitialRender.current) return;
- setExposedVariable('value', currentValue);
- // eslint-disable-next-line react-hooks/exhaustive-deps
- }, [currentValue]);
-
- useEffect(() => {
- const _selectedOption = selectOptions.find((option) => option.value === currentValue);
- setExposedVariable('selectedOption', pick(_selectedOption, ['label', 'value']));
- // eslint-disable-next-line react-hooks/exhaustive-deps
- }, [currentValue, JSON.stringify(selectOptions)]);
-
useEffect(() => {
if (isInitialRender.current) return;
const _options = selectOptions?.map(({ label, value }) => ({ label, value }));
@@ -221,11 +235,6 @@ export const DropdownV2 = ({
setExposedVariable('searchText', searchInputValue);
}, [searchInputValue]);
- useEffect(() => {
- if (isInitialRender.current) return;
- setExposedVariable('isValid', isValid);
- }, [isValid]);
-
useEffect(() => {
if (isInitialRender.current) return;
setExposedVariable('isVisible', properties.visibility);
@@ -246,11 +255,18 @@ export const DropdownV2 = ({
setExposedVariable('isMandatory', isMandatory);
}, [isMandatory]);
+ useEffect(() => {
+ if (isInitialRender.current) return;
+ const validationStatus = validate(currentValue);
+ setValidationStatus(validationStatus);
+ setExposedVariable('isValid', validationStatus?.isValid);
+ }, [validate]);
+
useEffect(() => {
const _options = selectOptions?.map(({ label, value }) => ({ label, value }));
const exposedVariables = {
clear: async function () {
- setCurrentValue(null);
+ setInputValue(null);
},
setVisibility: async function (value) {
setVisibility(value);
@@ -303,6 +319,7 @@ export const DropdownV2 = ({
accentColor,
isLoading: isDropdownLoading,
isDisabled: isDropdownDisabled,
+ userInteracted,
}),
backgroundColor: getInputBackgroundColor({
fieldBackgroundColor,
@@ -406,6 +423,7 @@ export const DropdownV2 = ({
return (
<>
-
diff --git a/frontend/src/Editor/Components/MultiselectV2/MultiselectV2.jsx b/frontend/src/Editor/Components/MultiselectV2/MultiselectV2.jsx
index a3795e8672..6ef45e84d9 100644
--- a/frontend/src/Editor/Components/MultiselectV2/MultiselectV2.jsx
+++ b/frontend/src/Editor/Components/MultiselectV2/MultiselectV2.jsx
@@ -12,8 +12,6 @@ import Label from '@/_ui/Label';
const tinycolor = require('tinycolor2');
import { CustomDropdownIndicator, CustomClearIndicator } from '../DropdownV2/DropdownV2';
import { getInputBackgroundColor, getInputBorderColor, getInputFocusedColor } from '../DropdownV2/utils';
-import useStore from '@/AppBuilder/_stores/store';
-import { shallow } from 'zustand/shallow';
export const MultiselectV2 = ({
id,
@@ -28,7 +26,6 @@ export const MultiselectV2 = ({
validate,
validation,
componentName,
- width,
}) => {
let {
label,
@@ -65,16 +62,18 @@ export const MultiselectV2 = ({
const isMandatory = validation?.mandatory ?? false;
const multiselectRef = React.useRef(null);
const labelRef = React.useRef(null);
- const validationData = validate(selected?.length ? selected?.map((option) => option.value) : null);
- const { isValid, validationError } = validationData;
+ const [validationStatus, setValidationStatus] = useState(
+ validate(selected?.length ? selected?.map((option) => option.value) : null)
+ );
+ const { isValid, validationError } = validationStatus;
const valueContainerRef = React.useRef(null);
const [visibility, setVisibility] = useState(properties.visibility);
const [isMultiSelectLoading, setIsMultiSelectLoading] = useState(multiSelectLoadingState);
- const getResolvedValue = useStore((state) => state.getResolvedValue, shallow);
const [isMultiSelectDisabled, setIsMultiSelectDisabled] = useState(disabledState);
const [isSelectAllSelected, setIsSelectAllSelected] = useState(false);
const [searchInputValue, setSearchInputValue] = useState('');
const _height = padding === 'default' ? `${height}px` : `${height + 4}px`;
+ const [userInteracted, setUserInteracted] = useState(false);
const [isMultiselectOpen, setIsMultiselectOpen] = useState(false);
useEffect(() => {
@@ -89,12 +88,12 @@ export const MultiselectV2 = ({
const _options = advanced ? schema : options;
let _selectOptions = Array.isArray(_options)
? _options
- .filter((data) => getResolvedValue(advanced ? data?.visible : data?.visible?.value) ?? true)
+ .filter((data) => data?.visible ?? true)
.map((data) => ({
...data,
- label: getResolvedValue(data?.label),
- value: getResolvedValue(data?.value),
- isDisabled: getResolvedValue(advanced ? data?.disable : data?.disable?.value) ?? false,
+ label: data?.label,
+ value: data?.value,
+ isDisabled: data?.disable ?? false,
}))
: [];
return _selectOptions;
@@ -126,39 +125,41 @@ export const MultiselectV2 = ({
return false;
}
const onChangeHandler = (items, action) => {
- setSelected(items);
- if (action.action === 'select-option') {
- setExposedVariable(
- 'values',
- items.map((item) => item.value)
- );
- fireEvent('onSelect');
- }
+ setInputValue(items);
+ fireEvent('onSelect');
+ setUserInteracted(true);
};
+
useEffect(() => {
let foundItem = findDefaultItem(values, advanced);
- setSelected(foundItem);
+ setInputValue(foundItem);
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [selectOptions]);
useEffect(() => {
- let foundItem = findDefaultItem(values, advanced, true);
- setSelected(foundItem);
+ if (advanced) {
+ let foundItem = findDefaultItem(values, advanced, true);
+ setInputValue(foundItem);
+ }
// eslint-disable-next-line react-hooks/exhaustive-deps
- }, [advanced, JSON.stringify(schema), JSON.stringify(values)]);
+ }, [advanced, JSON.stringify(values), JSON.stringify(schema)]);
+
+ useEffect(() => {
+ if (!advanced) {
+ let foundItem = findDefaultItem(values, advanced, true);
+ setInputValue(foundItem);
+ }
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [advanced, JSON.stringify(values)]);
useEffect(() => {
if (isInitialRender.current) return;
- setExposedVariable(
- 'selectedOptions',
- Array.isArray(selected) && selected?.map(({ label, value }) => ({ label, value }))
- );
setExposedVariable(
'options',
Array.isArray(selectOptions) && selectOptions?.map(({ label, value }) => ({ label, value }))
);
// eslint-disable-next-line react-hooks/exhaustive-deps
- }, [JSON.stringify(selected), selectOptions]);
+ }, [selectOptions]);
useEffect(() => {
if (isInitialRender.current) return;
@@ -187,13 +188,17 @@ export const MultiselectV2 = ({
useEffect(() => {
if (isInitialRender.current) return;
- setExposedVariable('isValid', isValid);
- }, [isValid]);
+ const validationStatus = validate(selected?.length ? selected?.map((option) => option.value) : null);
+ setValidationStatus(validationStatus);
+ setExposedVariable('isValid', validationStatus?.isValid);
+ }, [validate]);
useEffect(() => {
+ const defaultItems = findDefaultItem(values, advanced, true);
+
const exposedVariables = {
clear: async function () {
- setSelected([]);
+ setInputValue([]);
},
setVisibility: async function (value) {
setVisibility(value);
@@ -210,7 +215,7 @@ export const MultiselectV2 = ({
isDisabled: disabledState,
isMandatory: isMandatory,
isValid: isValid,
- selectedOptions: Array.isArray(selected) && selected?.map(({ label, value }) => ({ label, value })),
+ selectedOptions: Array.isArray(defaultItems) && defaultItems?.map(({ label, value }) => ({ label, value })),
options: Array.isArray(selectOptions) && selectOptions?.map(({ label, value }) => ({ label, value })),
};
setExposedVariables(exposedVariables);
@@ -237,7 +242,7 @@ export const MultiselectV2 = ({
newSelected.push(...optionsToAdd);
}
});
- setSelected(newSelected);
+ setInputValue(newSelected);
}
});
@@ -247,7 +252,7 @@ export const MultiselectV2 = ({
// Check if array provided is a list of objects with value key
const _value = value.map((val) => (isObject(val) && has(val, 'value') ? val.value : val));
const newSelected = selected.filter((option) => !_value.includes(option.value));
- setSelected(newSelected);
+ setInputValue(newSelected);
}
});
// eslint-disable-next-line react-hooks/exhaustive-deps
@@ -276,6 +281,17 @@ export const MultiselectV2 = ({
}
};
+ const setInputValue = (values) => {
+ setSelected(values);
+ setExposedVariables({
+ values: values.map((item) => item.value),
+ selectedOptions: Array.isArray(values) && values?.map(({ label, value }) => ({ label, value })),
+ });
+ const validationStatus = validate(values?.length ? values?.map((option) => option.value) : null);
+ setValidationStatus(validationStatus);
+ setExposedVariable('isValid', validationStatus?.isValid);
+ };
+
useEffect(() => {
document.addEventListener('mousedown', handleClickOutside, { capture: true });
return () => {
@@ -312,6 +328,7 @@ export const MultiselectV2 = ({
accentColor,
isLoading: isMultiSelectLoading,
isDisabled: isMultiSelectDisabled,
+ userInteracted,
}),
backgroundColor: getInputBackgroundColor({
fieldBackgroundColor,
@@ -400,7 +417,6 @@ export const MultiselectV2 = ({
}),
};
const _width = (labelWidth / 100) * 70; // Max width which label can go is 70% for better UX calculate width based on this value
-
return (
<>
+
- {
+ if (!isDropdownDisabled) {
+ fireEvent('onFocus');
+ setIsDropdownOpen((prev) => !prev);
+ }
+ }}
+ ref={ref}
+ >
- {!isValid && validationError}
-
+ {userInteracted && visibility && !isValid && (
+
+ {validationError}
+
+ )}
);
};
diff --git a/frontend/src/Editor/Components/DropdownV2/utils.js b/frontend/src/Editor/Components/DropdownV2/utils.js
index 080463b747..3c8edb9b9b 100644
--- a/frontend/src/Editor/Components/DropdownV2/utils.js
+++ b/frontend/src/Editor/Components/DropdownV2/utils.js
@@ -7,8 +7,16 @@ export const getInputFocusedColor = ({ accentColor }) => {
return 'var(--primary-accent-strong)';
};
-export const getInputBorderColor = ({ isValid, isFocused, fieldBorderColor, accentColor, isLoading, isDisabled }) => {
- if (!isValid) {
+export const getInputBorderColor = ({
+ isValid,
+ isFocused,
+ fieldBorderColor,
+ accentColor,
+ isLoading,
+ isDisabled,
+ userInteracted,
+}) => {
+ if (userInteracted && !isValid) {
return 'var(--status-error-strong)';
}
diff --git a/frontend/src/Editor/Components/Multiselect.jsx b/frontend/src/Editor/Components/Multiselect.jsx
index 591d97f9ea..b31957dfbc 100644
--- a/frontend/src/Editor/Components/Multiselect.jsx
+++ b/frontend/src/Editor/Components/Multiselect.jsx
@@ -35,6 +35,7 @@ export const Multiselect = function Multiselect({
fireEvent,
componentName,
dataCy,
+ formId,
}) {
const { label, value, values, display_values, showAllOption } = properties;
const { borderRadius, visibility, disabledState, boxShadow } = styles;
@@ -210,6 +211,11 @@ export const Multiselect = function Multiselect({
}
});
}
+
+ const formComponent = formId && document.querySelector(`.form-${formId}`);
+ if (formComponent) {
+ formComponent.style.zIndex = isOpen ? 4 : '';
+ }
}}
/>
{
+ setIsSelectAllSelected(value);
+ if (!value) {
+ fireEvent('onSelect');
+ }
+ }}
+ setSelected={setInputValue}
iconColor={iconColor}
optionsLoadingState={optionsLoadingState && advanced}
darkMode={darkMode}
@@ -495,19 +516,20 @@ export const MultiselectV2 = ({
/>
- {!isValid && validationError}
-
+ {userInteracted && visibility && !isValid && (
+
+ {validationError}
+
+ )}
);
};
diff --git a/frontend/src/Editor/Components/NumberInput.jsx b/frontend/src/Editor/Components/NumberInput.jsx
index f5c1e79956..5a130bf5cc 100644
--- a/frontend/src/Editor/Components/NumberInput.jsx
+++ b/frontend/src/Editor/Components/NumberInput.jsx
@@ -49,7 +49,8 @@ export const NumberInput = function NumberInput({
const [loading, setLoading] = useState(loadingState);
const [showValidationError, setShowValidationError] = useState(false);
const [value, setValue] = React.useState(Number(parseFloat(properties.value).toFixed(properties.decimalPlaces)));
- const { isValid, validationError } = validate(value);
+ const [validationStatus, setValidationStatus] = useState(validate(value));
+ const { isValid, validationError } = validationStatus;
const [isFocused, setIsFocused] = useState(false);
const inputRef = useRef(null);
@@ -65,31 +66,22 @@ export const NumberInput = function NumberInput({
}, [label]);
useEffect(() => {
- setValue(Number(parseFloat(value).toFixed(properties.decimalPlaces)));
+ setInputValue(Number(parseFloat(value).toFixed(properties.decimalPlaces)));
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [properties.decimalPlaces]);
useEffect(() => {
- setValue(Number(parseFloat(properties.value).toFixed(properties.decimalPlaces)));
+ setInputValue(Number(parseFloat(properties.value).toFixed(properties.decimalPlaces)));
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [properties.value]);
const handleBlur = (e) => {
- setValue(Number(parseFloat(e.target.value).toFixed(properties.decimalPlaces)));
+ setInputValue(Number(parseFloat(e.target.value).toFixed(properties.decimalPlaces)));
setShowValidationError(true);
e.stopPropagation();
fireEvent('onBlur');
setIsFocused(false);
};
-
- useEffect(() => {
- if (isInitialRender.current) return;
- if (!isNaN(value)) {
- setExposedVariable('value', value);
- }
- // eslint-disable-next-line react-hooks/exhaustive-deps
- }, [value]);
-
useEffect(() => {
if (isInitialRender.current) return;
setExposedVariable('isMandatory', isMandatory);
@@ -114,12 +106,6 @@ export const NumberInput = function NumberInput({
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [disable]);
- useEffect(() => {
- if (isInitialRender.current) return;
- setExposedVariable('isValid', isValid);
- // eslint-disable-next-line react-hooks/exhaustive-deps
- }, [isValid]);
-
useEffect(() => {
disable !== disabledState && setDisable(disabledState);
// eslint-disable-next-line react-hooks/exhaustive-deps
@@ -128,11 +114,19 @@ export const NumberInput = function NumberInput({
visibility !== properties.visibility && setVisibility(properties.visibility);
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [properties.visibility]);
+
useEffect(() => {
loading !== loadingState && setLoading(loadingState);
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [loadingState]);
+ useEffect(() => {
+ if (isInitialRender.current) return;
+ const validationStatus = validate(value);
+ setValidationStatus(validationStatus);
+ setExposedVariable('isValid', validationStatus?.isValid);
+ }, [validate]);
+
useEffect(() => {
const exposedVariables = {
setFocus: async function () {
@@ -144,14 +138,12 @@ export const NumberInput = function NumberInput({
setText: async function (text) {
if (text) {
const newValue = Number(parseFloat(text));
- setValue(newValue);
- setExposedVariable('value', text);
+ setInputValue(newValue);
fireEvent('onChange');
}
},
clear: async function () {
- setValue('');
- setExposedVariable('value', '');
+ setInputValue('');
fireEvent('onChange');
},
setLoading: async function (loading) {
@@ -244,14 +236,13 @@ export const NumberInput = function NumberInput({
// eslint-disable-next-line import/namespace
const handleChange = (e) => {
- setValue(Number(parseFloat(e.target.value)));
if (e.target.value == '') {
- setValue(null);
- setExposedVariable('value', null);
+ setInputValue(null);
fireEvent('onChange');
+ } else {
+ setInputValue(Number(parseFloat(e.target.value)));
}
if (!isNaN(Number(parseFloat(e.target.value)))) {
- setExposedVariable('value', Number(parseFloat(e.target.value)));
fireEvent('onChange');
}
};
@@ -260,22 +251,30 @@ export const NumberInput = function NumberInput({
e.preventDefault(); // Prevent the default button behavior (form submission, page reload)
const newValue = (value || 0) + 1;
- setValue(newValue);
+ setInputValue(newValue);
if (!isNaN(newValue)) {
- setExposedVariable('value', newValue);
fireEvent('onChange');
}
};
const handleDecrement = (e) => {
e.preventDefault();
const newValue = (value || 0) - 1;
- setValue(newValue);
+ setInputValue(newValue);
if (!isNaN(newValue)) {
- setExposedVariable('value', newValue);
fireEvent('onChange');
}
};
+ const setInputValue = (value) => {
+ setValue(value);
+ if (!isNaN(value)) {
+ setExposedVariable('value', value);
+ }
+ const validationStatus = validate(value);
+ setValidationStatus(validationStatus);
+ setExposedVariable('isValid', validationStatus?.isValid);
+ };
+
const loaderStyle = {
right:
direction === 'right' &&
@@ -375,8 +374,7 @@ export const NumberInput = function NumberInput({
autoComplete="off"
onKeyUp={(e) => {
if (e.key === 'Enter') {
- setValue(e.target.value);
- setExposedVariable('value', e.target.value);
+ setInputValue(e.target.value);
fireEvent('onEnterPressed');
}
}}
diff --git a/frontend/src/Editor/Components/PasswordInput.jsx b/frontend/src/Editor/Components/PasswordInput.jsx
index 96d70365ad..a0c721b88a 100644
--- a/frontend/src/Editor/Components/PasswordInput.jsx
+++ b/frontend/src/Editor/Components/PasswordInput.jsx
@@ -48,7 +48,8 @@ export const PasswordInput = function PasswordInput({
const [disable, setDisable] = useState(disabledState || loadingState);
const [passwordValue, setPasswordValue] = useState(properties.value);
const [visibility, setVisibility] = useState(properties.visibility);
- const { isValid, validationError } = validate(passwordValue);
+ const [validationStatus, setValidationStatus] = useState(validate(passwordValue));
+ const { isValid, validationError } = validationStatus;
const [showValidationError, setShowValidationError] = useState(false);
const [labelWidth, setLabelWidth] = useState(0);
const defaultAlignment = alignment === 'side' || alignment === 'top' ? alignment : 'side';
@@ -152,12 +153,6 @@ export const PasswordInput = function PasswordInput({
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [loadingState]);
- useEffect(() => {
- if (isInitialRender.current) return;
- setExposedVariable('isValid', isValid);
- // eslint-disable-next-line react-hooks/exhaustive-deps
- }, [isValid]);
-
useEffect(() => {
if (isInitialRender.current) return;
setExposedVariable('isMandatory', isMandatory);
@@ -184,11 +179,17 @@ export const PasswordInput = function PasswordInput({
useEffect(() => {
if (isInitialRender.current) return;
- setPasswordValue(properties.value);
- setExposedVariable('value', properties?.value ?? '');
+ setInputValue(properties?.value || '');
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [properties.value]);
+ useEffect(() => {
+ if (isInitialRender.current) return;
+ const validationStatus = validate(passwordValue);
+ setValidationStatus(validationStatus);
+ setExposedVariable('isValid', validationStatus?.isValid);
+ }, [validate]);
+
useEffect(() => {
const exposedVariables = {
setFocus: async function () {
@@ -198,13 +199,11 @@ export const PasswordInput = function PasswordInput({
textInputRef.current.blur();
},
setText: async function (text) {
- setPasswordValue(text);
- setExposedVariable('value', text);
+ setInputValue(text);
fireEvent('onChange');
},
clear: async function () {
- setPasswordValue('');
- setExposedVariable('value', '');
+ setInputValue('');
fireEvent('onChange');
},
setLoading: async function (loading) {
@@ -228,7 +227,6 @@ export const PasswordInput = function PasswordInput({
value: properties?.value ?? '',
};
- setPasswordValue(properties.value ?? '');
setExposedVariables(exposedVariables);
isInitialRender.current = false;
@@ -254,6 +252,15 @@ export const PasswordInput = function PasswordInput({
}
return false;
});
+
+ const setInputValue = (value) => {
+ setPasswordValue(value);
+ setExposedVariable('value', value);
+ const validationStatus = validate(value);
+ setValidationStatus(validationStatus);
+ setExposedVariable('isValid', validationStatus?.isValid);
+ };
+
const renderInput = () => (
<>
{
if (e.key === 'Enter') {
- setPasswordValue(e.target.value);
- setExposedVariable('value', e.target.value);
+ setInputValue(e.target.value);
fireEvent('onEnterPressed');
}
}}
onChange={(e) => {
- setPasswordValue(e.target.value);
- setExposedVariable('value', e.target.value);
+ setInputValue(e.target.value);
fireEvent('onChange');
}}
onBlur={(e) => {
diff --git a/frontend/src/Editor/Components/TextInput.jsx b/frontend/src/Editor/Components/TextInput.jsx
index 7edbf89f60..29fbaaa625 100644
--- a/frontend/src/Editor/Components/TextInput.jsx
+++ b/frontend/src/Editor/Components/TextInput.jsx
@@ -47,8 +47,8 @@ export const TextInput = function TextInput({
const [disable, setDisable] = useState(disabledState || loadingState);
const [value, setValue] = useState(properties.value);
const [visibility, setVisibility] = useState(properties.visibility);
- // const isValid = true; // TODO: remove this and uncomment the below line
- const { isValid, validationError } = validate(value);
+ const [validationStatus, setValidationStatus] = useState(validate(value));
+ const { isValid, validationError } = validationStatus;
const [showValidationError, setShowValidationError] = useState(false);
const [labelWidth, setLabelWidth] = useState(0);
@@ -156,18 +156,18 @@ export const TextInput = function TextInput({
}, [loadingState]);
useEffect(() => {
- setExposedVariable('isValid', isValid);
- // eslint-disable-next-line react-hooks/exhaustive-deps
- }, [isValid]);
+ if (isInitialRender.current) return;
+ const validationStatus = validate(value);
+ setValidationStatus(validationStatus);
+ setExposedVariable('isValid', validationStatus?.isValid);
+ }, [validate]);
useEffect(() => {
if (isInitialRender.current) return;
if (properties.value === undefined) {
- setValue('');
- setExposedVariable('value', '');
+ setInputValue('');
} else {
- setValue(properties.value);
- setExposedVariable('value', properties.value);
+ setInputValue(properties.value);
}
// eslint-disable-next-line react-hooks/exhaustive-deps
@@ -200,13 +200,11 @@ export const TextInput = function TextInput({
useEffect(() => {
const exposedVariables = {
setText: async function (text) {
- setValue(text);
- setExposedVariable('value', text);
+ setInputValue(text);
fireEvent('onChange');
},
clear: async function () {
- setValue('');
- setExposedVariable('value', '');
+ setInputValue('');
fireEvent('onChange');
},
setFocus: async function () {
@@ -241,13 +239,20 @@ export const TextInput = function TextInput({
isVisible: visibility,
isDisabled: disable,
};
- setValue(properties.value);
setExposedVariables(exposedVariables);
isInitialRender.current = false;
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
+ const setInputValue = (value) => {
+ setValue(value);
+ setExposedVariable('value', value);
+ const validationStatus = validate(value);
+ setValidationStatus(validationStatus);
+ setExposedVariable('isValid', validationStatus?.isValid);
+ };
+
const iconName = styles.icon; // Replace with the name of the icon you want
// eslint-disable-next-line import/namespace
const IconElement = Icons[iconName] == undefined ? Icons['IconHome2'] : Icons[iconName];
@@ -320,14 +325,12 @@ export const TextInput = function TextInput({
} validation-without-icon`}
onKeyUp={(e) => {
if (e.key === 'Enter') {
- setValue(e.target.value);
- setExposedVariable('value', e.target.value);
+ setInputValue(e.target.value);
fireEvent('onEnterPressed');
}
}}
onChange={(e) => {
- setValue(e.target.value);
- setExposedVariable('value', e.target.value);
+ setInputValue(e.target.value);
fireEvent('onChange');
}}
onBlur={(e) => {
diff --git a/frontend/src/Editor/Components/ToggleV2.jsx b/frontend/src/Editor/Components/ToggleV2.jsx
index 11569828c7..ea7b2170b7 100644
--- a/frontend/src/Editor/Components/ToggleV2.jsx
+++ b/frontend/src/Editor/Components/ToggleV2.jsx
@@ -12,13 +12,11 @@ const Switch = ({
borderColor,
setOn,
styles,
- setExposedVariable,
fireEvent,
setUserInteracted,
}) => {
const handleToggleChange = () => {
setOn(!on);
- setExposedVariable('value', !on);
fireEvent('onChange');
setUserInteracted(true);
};
@@ -105,8 +103,8 @@ export const ToggleSwitchV2 = ({
const [on, setOn] = useState(Boolean(defaultValue));
const label = properties.label;
const isMandatory = validation?.mandatory ?? false;
- const { isValid, validationError } = validate(on);
- const [showValidationError, setShowValidationError] = useState(true);
+ const [validationStatus, setValidationStatus] = useState(validate(on));
+ const { isValid, validationError } = validationStatus;
const [loading, setLoading] = useState(properties?.loadingState);
const [disable, setDisable] = useState(properties.disabledState || properties.loadingState);
const [visibility, setVisibility] = useState(properties.visibility);
@@ -123,17 +121,24 @@ export const ToggleSwitchV2 = ({
};
// Exposing the initially set false value once on load
+ const setInputValue = (value) => {
+ setOn(value);
+ setExposedVariable('value', value);
+ const validationStatus = validate(value);
+ setValidationStatus(validationStatus);
+ setExposedVariable('isValid', validationStatus?.isValid);
+ };
+
useEffect(() => {
if (isInitialRender.current) return;
- setExposedVariable('value', defaultValue);
// eslint-disable-next-line react-hooks/exhaustive-deps
- setOn(defaultValue);
+ setInputValue(defaultValue);
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [defaultValue]);
const toggle = () => {
- setOn(!on);
+ setInputValue(!on);
setUserInteracted(true);
};
@@ -164,6 +169,13 @@ export const ToggleSwitchV2 = ({
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [isMandatory]);
+ useEffect(() => {
+ if (isInitialRender.current) return;
+ const validationStatus = validate(on);
+ setValidationStatus(validationStatus);
+ setExposedVariable('isValid', validationStatus?.isValid);
+ }, [validate]);
+
useEffect(() => {
if (isInitialRender.current) return;
setExposedVariable('isLoading', loading);
@@ -180,17 +192,11 @@ export const ToggleSwitchV2 = ({
setExposedVariable('isDisabled', disable);
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [disable]);
- useEffect(() => {
- if (isInitialRender.current) return;
- setExposedVariable('isValid', isValid);
- // eslint-disable-next-line react-hooks/exhaustive-deps
- }, [isValid]);
useEffect(() => {
const exposedVariables = {
setValue: async function (value) {
- setOn(value);
- setExposedVariable('value', value);
+ setInputValue(value);
setUserInteracted(true);
},
setVisibility: async function (state) {
@@ -214,15 +220,13 @@ export const ToggleSwitchV2 = ({
value: defaultValue,
};
setExposedVariables(exposedVariables);
- setOn(defaultValue);
isInitialRender.current = false;
}, []);
useEffect(() => {
setExposedVariable('toggle', async function () {
- setExposedVariable('value', !on);
+ setInputValue(!on);
fireEvent('onChange');
- setOn(!on);
setUserInteracted(true);
});
// eslint-disable-next-line react-hooks/exhaustive-deps
@@ -270,15 +274,11 @@ export const ToggleSwitchV2 = ({
onChange={toggleValue}
color={toggleSwitchColor}
alignment={alignment}
- validationError={validationError}
isValid={isValid}
- showValidationError={showValidationError}
properties={properties}
- setShowValidationError={setShowValidationError}
borderColor={borderColor}
- setOn={setOn}
+ setOn={setInputValue}
styles={styles}
- setExposedVariable={setExposedVariable}
fireEvent={fireEvent}
setUserInteracted={setUserInteracted}
/>
@@ -294,7 +294,7 @@ export const ToggleSwitchV2 = ({
}}
>
{renderInput()}
- {showValidationError && isMandatory && userInteracted && !on && visibility && (
+ {userInteracted && visibility && !isValid && (
-
+
-
+
{canUpdateDeleteConstant && (
-
+
{
/>
)}
-
-
-
- {capitalize(activeTabEnvironment?.name)} ({globalCount + secretCount})
-
-
- {canCreateVariable() && (
- {
- setMode(() => MODES.CREATE);
- setIsManageVarDrawerOpen(() => true);
- }}
- className="add-new-constant-button"
- customStyles={{ minWidth: '200px', height: '32px' }}
- disabled={isManageVarDrawerOpen}
- >
- + Create new constant
-
- )}
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
-
+
-
+
+ {capitalize(activeTabEnvironment?.name)} ({globalCount + secretCount})
+
+
+ {canCreateVariable() && (
+ {
+ setMode(() => MODES.CREATE);
+ setIsManageVarDrawerOpen(() => true);
+ }}
+ className="add-new-constant-button"
+ customStyles={{ minWidth: '200px', height: '32px' }}
+ disabled={isManageVarDrawerOpen}
+ >
+ + Create new constant
+
+ )}
-
-
-
-
-
-
- {activeTab === Constants.Global ? (
- <>
- To resolve a global workspace constant use{' '}
- {'{{constants.access_token}}'}
-
- ) : (
- <>
- To resolve a secret workspace constant use{' '}
- {'{{secrets.access_token}}'}
-
- )}
-
-
-
-
-
+
+
+
diff --git a/frontend/src/_components/DarkModeToggle.jsx b/frontend/src/_components/DarkModeToggle.jsx
index 2f0ef8474c..c492117dd7 100644
--- a/frontend/src/_components/DarkModeToggle.jsx
+++ b/frontend/src/_components/DarkModeToggle.jsx
@@ -4,6 +4,8 @@ import OverlayTrigger from 'react-bootstrap/OverlayTrigger';
import Tooltip from 'react-bootstrap/Tooltip';
import { useTranslation } from 'react-i18next';
import classnames from 'classnames';
+import useStore from '@/AppBuilder/_stores/store';
+import { shallow } from 'zustand/shallow';
export const DarkModeToggle = function DarkModeToggle({
darkMode = false,
@@ -11,8 +13,14 @@ export const DarkModeToggle = function DarkModeToggle({
tooltipPlacement = 'bottom',
showText = false,
}) {
+ const setResolvedGlobals = useStore((state) => state.setResolvedGlobals, shallow);
+ const appMode = useStore((state) => state.globalSettings.appMode, shallow);
+
const toggleDarkMode = () => {
switchDarkMode(!darkMode);
+ if (appMode === 'auto') {
+ setResolvedGlobals('theme', { name: !darkMode ? 'dark' : 'light' });
+ }
};
const { t } = useTranslation();
diff --git a/frontend/src/_components/NotificationBanner/NotificationBanner.jsx b/frontend/src/_components/NotificationBanner/NotificationBanner.jsx
new file mode 100644
index 0000000000..8b61b37f1d
--- /dev/null
+++ b/frontend/src/_components/NotificationBanner/NotificationBanner.jsx
@@ -0,0 +1,49 @@
+import React from 'react';
+import { Alert } from '@/_ui/Alert/Alert';
+import './resources/styles.scss';
+
+const DEFAULT_CONFIG = {
+ docsLink: ' https://docs.tooljet.com/docs/data-sources/local-data-sources-migration',
+};
+
+const DEFAULT_MESSAGES = {
+ prefix: 'This query is connected to a local data source which has been',
+ highlightedText: 'discontinued',
+ middle: 'Please create a global data source connection to reconnect your query.',
+ suffix: 'to know more.',
+ linkText: 'Read documentation',
+};
+
+const NotificationBanner = ({
+ docsLink,
+ customMessage,
+ darkMode = false,
+ highlightedText = DEFAULT_MESSAGES.highlightedText,
+ highlightedClassName = 'highlighted-text',
+ enhanceDisabledVisibility = false,
+}) => {
+ const currentDocsLink = docsLink || DEFAULT_CONFIG.docsLink;
+
+ const bannerMessage = customMessage || (
+ <>
+ {DEFAULT_MESSAGES.prefix} {highlightedText}.{' '}
+ {DEFAULT_MESSAGES.middle}{' '}
+
+ {DEFAULT_MESSAGES.linkText}
+ {' '}
+ {DEFAULT_MESSAGES.suffix}
+
+ );
+
+ return (
+
+
+
+
+
-
+
+
-
-
-
+
-
+
+
- 0}
- />
-
- ) : (
-
+
+
+
+
+
+
+
+
+ {activeTab === Constants.Global ? (
+ <>
+ To resolve a global workspace constant use{' '}
+
+ {'{{constants.access_token}}'}
+
+
+ ) : (
+ <>
+ To resolve a secret workspace constant use{' '}
+ {'{{secrets.access_token}}'}
+
+ )}
+
+
+
+
+
+
+
+ {(activeTab === Constants.Global && globalCount > 0) ||
+ (activeTab === Constants.Secret && secretCount > 0) ? (
+
+ 0}
+ />
+
+ ) : (
+
+
+
+
+ );
+};
+
+export default NotificationBanner;
+
+// To Do later: Expand this component properly to make it generic notification component
diff --git a/frontend/src/_components/NotificationBanner/index.js b/frontend/src/_components/NotificationBanner/index.js
new file mode 100644
index 0000000000..e762ccced6
--- /dev/null
+++ b/frontend/src/_components/NotificationBanner/index.js
@@ -0,0 +1 @@
+export { default } from './NotificationBanner';
diff --git a/frontend/src/_components/NotificationBanner/resources/styles.scss b/frontend/src/_components/NotificationBanner/resources/styles.scss
new file mode 100644
index 0000000000..7c8d644933
--- /dev/null
+++ b/frontend/src/_components/NotificationBanner/resources/styles.scss
@@ -0,0 +1,55 @@
+.notification-banner {
+ display: flex;
+ padding: var(--3, 6px) var(--6, 12px);
+ flex-direction: column;
+ justify-content: center;
+ align-items: flex-start;
+ gap: 32px;
+ flex: 1 0 0;
+ border-radius: var(--3, 6px);
+ background: var(--background-warning-weak, #FAEFE7);
+ border: none !important;
+ outline: none !important;
+ opacity: 1;
+
+ img {
+ margin-top: -5px !important;
+ }
+}
+
+@media screen and (min-width: 1200px) {
+ .notification-banner {
+ justify-content: center !important;
+ align-items: center !important;
+ }
+
+ &>div {
+ justify-content: center !important;
+ }
+
+}
+
+.notification-content {
+ color: var(--text-default, #1B1F24);
+ font-family: "IBM Plex Sans";
+ font-size: 11px;
+ font-style: normal;
+ font-weight: 400;
+ line-height: 16px;
+
+ &.disabled {
+ font-weight: 700 !important;
+ opacity: 1 !important;
+ }
+}
+
+.highlighted-text {
+ font-weight: 600 !important;
+ font-style: bold;
+}
+
+.documentation-link {
+ font-weight: 400 !important;
+ color: var(--primary, #3E63DD) !important;
+ text-decoration-line: underline !important;
+}
\ No newline at end of file
diff --git a/frontend/src/_components/OrganizationManager/CreateOrganization.jsx b/frontend/src/_components/OrganizationManager/CreateOrganization.jsx
index 82bd046ae1..ef256014dd 100644
--- a/frontend/src/_components/OrganizationManager/CreateOrganization.jsx
+++ b/frontend/src/_components/OrganizationManager/CreateOrganization.jsx
@@ -148,9 +148,9 @@ export const CreateOrganization = ({ showCreateOrg, setShowCreateOrg }) => {
setSlug({ value: defaultValue, error: '' });
const checkWorkspaceUniqueness = async () => {
+ sluginput.current.value = defaultValue;
try {
await organizationService.checkWorkspaceUniqueness(null, defaultValue);
- sluginput.current.value = defaultValue;
} catch (errResponse) {
let error = {
status: false,
diff --git a/frontend/src/_components/SearchBox.jsx b/frontend/src/_components/SearchBox.jsx
index 1e910dd519..f0c09054dc 100644
--- a/frontend/src/_components/SearchBox.jsx
+++ b/frontend/src/_components/SearchBox.jsx
@@ -21,6 +21,7 @@ export const SearchBox = forwardRef(
autoFocus = false,
showClearButton,
initialValue = '',
+ clearTextOnBlur = true,
},
ref
) => {
@@ -39,7 +40,7 @@ export const SearchBox = forwardRef(
};
const handleClickOutside = (event) => {
- if (ref?.current && !ref.current.contains(event.target)) {
+ if (ref?.current && !ref.current.contains(event.target) && clearTextOnBlur) {
clearSearchText();
// Your function to be triggered
}
diff --git a/frontend/src/_components/SortableList/SortableList.jsx b/frontend/src/_components/SortableList/SortableList.jsx
index 7a59e7fda9..4825aabfe1 100644
--- a/frontend/src/_components/SortableList/SortableList.jsx
+++ b/frontend/src/_components/SortableList/SortableList.jsx
@@ -10,10 +10,10 @@ export function SortableList({ items, onChange, renderItem }) {
const sensors = useSensors(
useSensor(PointerSensor, {
activationConstraint: { delay: 150 },
- }),
- useSensor(KeyboardSensor, {
- coordinateGetter: sortableKeyboardCoordinates,
})
+ // useSensor(KeyboardSensor, {
+ // coordinateGetter: sortableKeyboardCoordinates,
+ // })
);
const shouldFreeze = useStore((state) => state.isVersionReleased || state.isEditorFreezed);
diff --git a/frontend/src/_styles/components.scss b/frontend/src/_styles/components.scss
index 9399081d0f..d7c10868ea 100644
--- a/frontend/src/_styles/components.scss
+++ b/frontend/src/_styles/components.scss
@@ -123,7 +123,6 @@ $btn-dark-color: #FFFFFF;
.page-selector-panel-body {
- height: 100%;
padding: 12px 16px;
border-right: 1px solid #DFE3E6;
diff --git a/frontend/src/_styles/pages-sidebar.scss b/frontend/src/_styles/pages-sidebar.scss
index 9c9e0616ed..c1ad5a7111 100644
--- a/frontend/src/_styles/pages-sidebar.scss
+++ b/frontend/src/_styles/pages-sidebar.scss
@@ -12,7 +12,7 @@
}
.page-name {
- font-size: 14px;
+ font-size: 12px;
}
.navigation-area {
diff --git a/frontend/src/_styles/theme.scss b/frontend/src/_styles/theme.scss
index a5987eee1d..07895c1392 100644
--- a/frontend/src/_styles/theme.scss
+++ b/frontend/src/_styles/theme.scss
@@ -766,7 +766,7 @@ button {
right: 300px;
left: 48px;
overflow-y: scroll;
- overflow-x: auto;
+ overflow-x: hidden;
-webkit-box-pack: center;
justify-content: center;
-webkit-box-align: center;
@@ -3875,6 +3875,18 @@ input[type="text"] {
}
}
+.form-ele{
+ .DateRangePicker_picker{
+ top: 40px !important;
+ }
+
+ .daterange-picker-widget{
+ .DateInput_fang {
+ visibility: hidden !important;
+ }
+ }
+}
+
.fw-400 {
font-weight: 400;
}
@@ -7852,7 +7864,7 @@ tbody {
.marketplace-page-sidebar {
height: calc(100vh - 64px);
- max-width: 288px;
+ max-width: 272px;
background-color: var(--page-default);
border-right: 1px solid var(--slate5) !important;
display: grid !important;
@@ -9195,6 +9207,17 @@ tbody {
.spin-loader {
position: fixed;
width: 100%;
+ justify-content: center;
+ align-items: center;
+ height: 100vh;
+
+ &.theme-dark {
+ background-color: #1f2936;
+
+ .load {
+ background-color: #1f2936;
+ }
+ }
.load {
display: flex;
@@ -12701,7 +12724,7 @@ color: var(--text-default);
position: absolute;
display: flex;
justify-content: center;
- top: 55px;
+ top: 65px;
.released-version-popup-cover {
width: 250px;
@@ -12807,6 +12830,11 @@ color: var(--text-default);
padding: 16px;
padding-top: 0px;
padding-bottom: 0px;
+
+ .p-3-constants{
+ padding: 1rem !important;
+ padding-left: 0px !important;
+ }
}
.card-footer {
@@ -15546,9 +15574,10 @@ color: var(--text-default);
background-color: var(--page-default);
height: calc(100vh - 64px);
display: flex;
- align-items: center;
- justify-content: center;
- padding-top: 1.5rem;
+ //Uncomment for EE
+ // align-items: center;
+ // justify-content: center;
+ // padding-top: 1.5rem;
}
.blank-page-wrapper {
diff --git a/frontend/src/_ui/AppButton/AppButton.scss b/frontend/src/_ui/AppButton/AppButton.scss
index 15320ad44e..fd39d9e9c3 100644
--- a/frontend/src/_ui/AppButton/AppButton.scss
+++ b/frontend/src/_ui/AppButton/AppButton.scss
@@ -21,6 +21,16 @@
align-items: center;
}
+ &.table-pagination-btn{
+ &:disabled {
+ svg {
+ path {
+ fill: var(--slate8) !important;
+ }
+ }
+ }
+ }
+
&:disabled {
background: var(--slate6) !important;
color: var(--slate9) !important;
diff --git a/frontend/src/index.ejs b/frontend/src/index.ejs
index ba87ce339c..e38f611797 100644
--- a/frontend/src/index.ejs
+++ b/frontend/src/index.ejs
@@ -25,6 +25,7 @@
justify-content: center;
align-items: center;
height: 100vh;
+ background-color: white;
}
.load.dark-loader {
diff --git a/frontend/src/modules/common/components/GeneralFeatureImage/resources/images/feat-image-dark.svg b/frontend/src/modules/common/components/GeneralFeatureImage/resources/images/feat-image-dark.svg
index 083675fe33..a52bc469dc 100644
--- a/frontend/src/modules/common/components/GeneralFeatureImage/resources/images/feat-image-dark.svg
+++ b/frontend/src/modules/common/components/GeneralFeatureImage/resources/images/feat-image-dark.svg
@@ -1,9 +1,9 @@
-
\ No newline at end of file
diff --git a/frontend/src/modules/common/components/GeneralFeatureImage/resources/images/feat-image.svg b/frontend/src/modules/common/components/GeneralFeatureImage/resources/images/feat-image.svg
index 9acb1cd58d..4e4b16c5ad 100644
--- a/frontend/src/modules/common/components/GeneralFeatureImage/resources/images/feat-image.svg
+++ b/frontend/src/modules/common/components/GeneralFeatureImage/resources/images/feat-image.svg
@@ -1,9 +1,9 @@
-
\ No newline at end of file
diff --git a/frontend/src/modules/common/components/GeneralFeatureImage/resources/images/slogan.svg b/frontend/src/modules/common/components/GeneralFeatureImage/resources/images/slogan.svg
index 580b2629e8..f969d93b1a 100644
--- a/frontend/src/modules/common/components/GeneralFeatureImage/resources/images/slogan.svg
+++ b/frontend/src/modules/common/components/GeneralFeatureImage/resources/images/slogan.svg
@@ -1,7 +1,7 @@
-{bannerMessage}
+