-
- setShowDeleteConfirmation(false)}
+ onCancel={() => deleteDataQuery(null)}
darkMode={darkMode}
/>
diff --git a/frontend/src/AppBuilder/QueryPanel/QueryCardMenu.jsx b/frontend/src/AppBuilder/QueryPanel/QueryCardMenu.jsx
new file mode 100644
index 0000000000..a9e3030b51
--- /dev/null
+++ b/frontend/src/AppBuilder/QueryPanel/QueryCardMenu.jsx
@@ -0,0 +1,174 @@
+import React, { useCallback } from 'react';
+import { Overlay, Popover } from 'react-bootstrap';
+import useStore from '@/AppBuilder/_stores/store';
+import classNames from 'classnames';
+import Edit from '@/_ui/Icon/bulkIcons/Edit';
+import Trash from '@/_ui/Icon/solidIcons/Trash';
+import Copy from '@/_ui/Icon/solidIcons/Copy';
+import SolidIcon from '@/_ui/Icon/SolidIcons';
+import { shallow } from 'zustand/shallow';
+import { ToolTip } from '@/_components/ToolTip';
+import { debounce } from 'lodash';
+import usePopoverObserver from '@/AppBuilder/_hooks/usePopoverObserver';
+import { useModuleContext } from '@/AppBuilder/_contexts/ModuleContext';
+
+const QueryCardMenu = ({ darkMode }) => {
+ const { moduleId } = useModuleContext();
+ const appId = useStore((state) => state.appStore.modules[moduleId].app.appId);
+ const selectedQuery = useStore((state) => state.queryPanel.selectedQuery);
+ const toggleQueryPermissionModal = useStore((state) => state.queryPanel.toggleQueryPermissionModal);
+ const featureAccess = useStore((state) => state?.license?.featureAccess, shallow);
+ const licenseValid = !featureAccess?.licenseStatus?.isExpired && featureAccess?.licenseStatus?.isLicenseValid;
+ const targetBtnForMenu = useStore((state) => state.queryPanel.targetBtnForMenu);
+ const targetElement = document.getElementById(targetBtnForMenu);
+ const showQueryHandlerMenu = useStore((state) => state.queryPanel.showQueryHandlerMenu);
+ const toggleQueryHandlerMenu = useStore((state) => state.queryPanel.toggleQueryHandlerMenu);
+ const duplicateQuery = useStore((state) => state.dataQuery.duplicateQuery);
+ const setPreviewData = useStore((state) => state.queryPanel.setPreviewData);
+ const setRenamingQuery = useStore((state) => state.queryPanel.setRenamingQuery);
+ const deleteDataQuery = useStore((state) => state.queryPanel.deleteDataQuery);
+
+ const QUERY_MENU_OPTIONS = [
+ {
+ label: 'Rename',
+ value: 'rename',
+ icon: 
+ ),
+ trailingIcon: toggleQueryHandlerMenu(false)}
+ popperConfig={{
+ modifiers: [
+ {
+ name: 'flip',
+ options: {
+ fallbackPlacements: ['top-start'],
+ flipVariations: true,
+ allowedAutoPlacements: ['top', 'bottom'],
+ boundary: 'viewport',
+ },
+ },
+ {
+ name: 'offset',
+ options: {
+ offset: [0, 3],
+ },
+ },
+ ],
+ }}
+ >
+ {(props) => (
+
+
+ {QUERY_MENU_OPTIONS.map((option) => {
+ const optionBody = (
+
+ {optionBody}
+
+ ) : (
+ optionBody
+ );
+ })}
+
+
+ )}
+
+ );
+};
+
+export default QueryCardMenu;
diff --git a/frontend/src/AppBuilder/QueryPanel/QueryDataPane.jsx b/frontend/src/AppBuilder/QueryPanel/QueryDataPane.jsx
index 9ac052ae51..97b4daa68f 100644
--- a/frontend/src/AppBuilder/QueryPanel/QueryDataPane.jsx
+++ b/frontend/src/AppBuilder/QueryPanel/QueryDataPane.jsx
@@ -16,6 +16,10 @@ import DataSourceSelect from '../QueryManager/Components/DataSourceSelect';
import { OverlayTrigger, Popover } from 'react-bootstrap';
import FolderEmpty from '@/_ui/Icon/solidIcons/FolderEmpty';
import useStore from '@/AppBuilder/_stores/store';
+import AppPermissionsModal from '@/modules/Appbuilder/components/AppPermissionsModal';
+import { shallow } from 'zustand/shallow';
+import { appPermissionService } from '@/_services';
+import QueryCardMenu from './QueryCardMenu';
export const QueryDataPane = ({ darkMode }) => {
const { t } = useTranslation();
@@ -34,6 +38,12 @@ export const QueryDataPane = ({ darkMode }) => {
function isDataSourceLocal(dataQuery) {
return dataSources.some((dataSource) => dataSource.id === dataQuery.data_source_id);
}
+ const featureAccess = useStore((state) => state?.license?.featureAccess, shallow);
+ const licenseValid = !featureAccess?.licenseStatus?.isExpired && featureAccess?.licenseStatus?.isLicenseValid;
+ const selectedQuery = useStore((state) => state.queryPanel.selectedQuery);
+ const showQueryPermissionModal = useStore((state) => state.queryPanel.showQueryPermissionModal);
+ const toggleQueryPermissionModal = useStore((state) => state.queryPanel.toggleQueryPermissionModal);
+ const setQueries = useStore((state) => state.dataQuery.setQueries);
useEffect(() => {
setQueryPanelSearchTerm(searchTermForFilters);
@@ -171,6 +181,33 @@ export const QueryDataPane = ({ darkMode }) => {
{filteredQueries.map((query) => (
appPermissionService.getQueryPermission(appId, id)}
+ createPermission={(id, appId, body) => appPermissionService.createQueryPermission(appId, id, body)}
+ updatePermission={(id, appId, body) => appPermissionService.updateQueryPermission(appId, id, body)}
+ deletePermission={(id, appId) => appPermissionService.deleteQueryPermission(appId, id)}
+ onSuccess={(data) => {
+ const updatedDataQueries = dataQueries.map((query) => {
+ if (query.id === selectedQuery.id) {
+ return {
+ ...query,
+ permissions: data.length === 0 || data.length === undefined ? [] : [data[0]],
+ };
+ }
+ return query;
+ });
+ setQueries(updatedDataQueries);
+ }}
+ />
+ )}
+
+ const renderedLabel = () => {
+ return (
+ <>
{paramLabel !== ' ' && !HIDDEN_CODE_HINTER_LABELS.includes(paramLabel) && (
{
+ setForceCodeBox(true);
+ onFxPress(true);
+ }}
+ meta={fieldMeta}
+ cyLabel={cyLabel}
+ styleDefinition={styleDefinition}
+ component={component}
+ onVisibilityChange={onVisibilityChange}
+ />
+ );
+ };
+
+ return (
+
- {gitSyncEnabled && (
+ {orgGit?.org_git?.is_enabled && (
+
diff --git a/frontend/src/AppBuilder/CodeEditor/styles.scss b/frontend/src/AppBuilder/CodeEditor/styles.scss
index d0a328bae0..9b1e6c7023 100644
--- a/frontend/src/AppBuilder/CodeEditor/styles.scss
+++ b/frontend/src/AppBuilder/CodeEditor/styles.scss
@@ -660,6 +660,13 @@
}
}
+
+.code-editor-component {
+ .cm-editor {
+ min-height: 0 !important;
+ }
+}
+
.cm-searchMatch.cm-searchMatch-selected {
background-color: #F28F2D !important;
}
@@ -673,4 +680,4 @@
.cm-theme{
height: 100% ;
}
-}
\ No newline at end of file
+}
diff --git a/frontend/src/AppBuilder/CodeEditor/utils.js b/frontend/src/AppBuilder/CodeEditor/utils.js
index 1b5fe0aafb..227a4a74e5 100644
--- a/frontend/src/AppBuilder/CodeEditor/utils.js
+++ b/frontend/src/AppBuilder/CodeEditor/utils.js
@@ -367,6 +367,7 @@ export const FxParamTypeMapping = Object.freeze({
visibility: 'Visibility',
numberInput: 'NumberInput',
tableRowHeightInput: 'TableRowHeightInput',
+ dropdownMenu: 'DropdownMenu',
query: 'Query',
});
diff --git a/frontend/src/AppBuilder/Header/CreateVersionModal.jsx b/frontend/src/AppBuilder/Header/CreateVersionModal.jsx
index 64208e5d27..66e62fcd8b 100644
--- a/frontend/src/AppBuilder/Header/CreateVersionModal.jsx
+++ b/frontend/src/AppBuilder/Header/CreateVersionModal.jsx
@@ -16,15 +16,11 @@ const CreateVersionModal = ({
canCommit,
orgGit,
fetchingOrgGit,
- handleCommitOnVersionCreation = () => {},
+ handleCommitOnVersionCreation = () => { },
}) => {
const { moduleId } = useModuleContext();
const [isCreatingVersion, setIsCreatingVersion] = useState(false);
const [versionName, setVersionName] = useState('');
- const gitSyncEnabled =
- orgGit?.org_git?.git_https?.is_enabled ||
- orgGit?.org_git?.git_ssh?.is_enabled ||
- orgGit?.org_git?.git_lab?.is_enabled;
const {
createNewVersionAction,
@@ -33,6 +29,7 @@ const CreateVersionModal = ({
appId,
setCurrentVersionId,
selectedVersion,
+ currentMode,
} = useStore(
(state) => ({
createNewVersionAction: state.createNewVersionAction,
@@ -45,6 +42,7 @@ const CreateVersionModal = ({
currentVersionId: state.currentVersionId,
setCurrentVersionId: state.setCurrentVersionId,
selectedVersion: state.selectedVersion,
+ currentMode: state.currentMode,
}),
shallow
);
@@ -94,7 +92,7 @@ const CreateVersionModal = ({
setIsCreatingVersion(false);
setShowCreateAppVersion(false);
appVersionService
- .getAppVersionData(appId, newVersion.id)
+ .getAppVersionData(appId, newVersion.id, currentMode)
.then((data) => {
setCurrentVersionId(newVersion.id);
handleCommitOnVersionCreation(data);
@@ -104,8 +102,8 @@ const CreateVersionModal = ({
});
},
(error) => {
- if (error?.data?.code === '23505') {
- toast.error('Version name already exists.');
+ if (error?.data?.code === "23505") {
+ toast.error("Version name already exists.");
} else {
toast.error(error?.error);
}
@@ -174,7 +172,7 @@ const CreateVersionModal = ({
+ {renderedLabel()}
- {!codeShow && (
- {
- setForceCodeBox(true);
- onFxPress(true);
- }}
- meta={fieldMeta}
- cyLabel={cyLabel}
- styleDefinition={styleDefinition}
- component={component}
- onVisibilityChange={onVisibilityChange}
- />
- )}
+ {!newLine && renderDynamicFx()}
+ {newLine && renderDynamicFx()}
{codeShow && (
{renderFx()}
-
{
const { moduleId } = useModuleContext();
@@ -117,77 +119,64 @@ const CanvasSettings = ({ darkMode }) => {
+ handleSelectedSidebarItem('page')}
- darkMode={darkMode}
- icon="page"
- className={`left-sidebar-item left-sidebar-layout left-sidebar-page-selector`}
- tip="Pages"
- ref={setSideBarBtnRefs('page')}
- />
{renderCommonItems()}
{
marginTop: level === 1 ? 4 : 0,
marginBottom: level === 1 ? 4 : 0,
// borderLeft: level > 1 ? '1px solid var(--slate6, #D7DBDF)' : 'none',
+ cursor: level === 1 ? 'pointer' : 'default',
}}
+ {...(level === 1 && { onClick: () => onExpand(props) })}
>
{/* {!['queries', 'globals', 'variables'].includes(type) && ( */}
{t('leftSidebar.Settings.backgroundColorOfCanvas', 'Canvas bavkground')}
@@ -44,7 +45,7 @@ const GlobalSettings = ({ darkMode }) => {
-
+
);
};
diff --git a/frontend/src/AppBuilder/LeftSidebar/LeftSidebar.jsx b/frontend/src/AppBuilder/LeftSidebar/LeftSidebar.jsx
index e2b5947206..bcd90bee33 100644
--- a/frontend/src/AppBuilder/LeftSidebar/LeftSidebar.jsx
+++ b/frontend/src/AppBuilder/LeftSidebar/LeftSidebar.jsx
@@ -5,13 +5,14 @@ import cx from 'classnames';
import { shallow } from 'zustand/shallow';
import { DarkModeToggle } from '@/_components';
import Popover from '@/_ui/Popover';
-import { PageMenu } from './PageMenu';
+// import { PageMenu } from './PageMenu';
import LeftSidebarInspector from './LeftSidebarInspector/LeftSidebarInspector';
import GlobalSettings from './GlobalSettings';
import '../../_styles/left-sidebar.scss';
import Debugger from './Debugger/Debugger';
import { useModuleContext } from '@/AppBuilder/_contexts/ModuleContext';
import { withEditionSpecificComponent } from '@/modules/common/helpers/withEditionSpecificComponent';
+import { PageMenu } from '../RightSideBar/PageSettingsTab/PageMenu';
// TODO: remove passing refs to LeftSidebarItem and use state
// TODO: need to add datasources to the sidebar.
@@ -58,7 +59,6 @@ export const BaseLeftSidebar = ({
const sideBarBtnRefs = useRef({});
const handleSelectedSidebarItem = (item) => {
- pinned && localStorage.setItem('selectedSidebarItem', item);
if (item === 'debugger') resetUnreadErrorCount();
setSelectedSidebarItem(item);
if (item === selectedSidebarItem && !pinned) {
@@ -211,15 +211,6 @@ export const BaseLeftSidebar = ({
tip: 'Build with AI',
ref: setSideBarBtnRefs('tooljetai'),
})}
-
- {showPicker && (
-
diff --git a/frontend/src/AppBuilder/LeftSidebar/GlobalSettings/index.jsx b/frontend/src/AppBuilder/LeftSidebar/GlobalSettings/index.jsx
index d85917c797..9f8379f85c 100644
--- a/frontend/src/AppBuilder/LeftSidebar/GlobalSettings/index.jsx
+++ b/frontend/src/AppBuilder/LeftSidebar/GlobalSettings/index.jsx
@@ -10,12 +10,13 @@ import AppModeToggle from './AppModeToggle';
import { ThemeSelect } from '@/modules/Appbuilder/components';
import MaintenanceMode from './MaintenanceMode';
import HideHeaderToggle from './HideHeaderToggle';
+import { ModuleProvider } from '@/AppBuilder/_contexts/ModuleContext';
const GlobalSettings = ({ darkMode }) => {
const shouldFreeze = useStore((state) => state.getShouldFreeze());
return (
- <>
+
- {
+ const options = {
+ canvasBackgroundColor: resolveReferences(color),
+ backgroundFxQuery: color,
+ };
+ globalSettingsChanged(options);
+ resolveOthers('canvas', true, { canvasBackgroundColor: color });
+ }}
+ />
)}
setShowPicker(false)} />
- setShowPicker(true)}
- color={canvasBackgroundColor}
- onChangeComplete={(color) => {
+
{forceCodeBox && (
-
+ {
+ if (typeof canvasBackgroundColor === 'string' && canvasBackgroundColor?.includes('var(')) {
+ const value = getCssVarValue(document.documentElement, canvasBackgroundColor);
const options = {
- canvasBackgroundColor: [color.hex, color.rgb],
- backgroundFxQuery: '',
+ canvasBackgroundColor: value,
+ backgroundFxQuery: value,
};
- globalSettingsChanged(options);
- resolveOthers('canvas', true, { canvasBackgroundColor: [color.hex, color.rgb] });
- }}
- />
-
- )}
+ await Promise.resolve(globalSettingsChanged(options));
+ await Promise.resolve(resolveOthers('canvas', true, { canvasBackgroundColor: value }));
+ }
+ setForceCodeBox(!forceCodeBox);
+ }}
+ />
+ setShowPicker(true)} style={outerStyles}>
-
-
+
- {canvasBackgroundColor}
-
-
{!forceCodeBox && (
- {
- const options = {
- canvasBackgroundColor: resolveReferences(color),
- backgroundFxQuery: color,
- };
- globalSettingsChanged(options);
- resolveOthers('canvas', true, { canvasBackgroundColor: color });
- }}
- />
+
+ {
+ const options = {
+ canvasBackgroundColor: resolveReferences(color),
+ backgroundFxQuery: color,
+ };
+ globalSettingsChanged(options);
+ resolveOthers('canvas', true, { canvasBackgroundColor: color });
+ }}
+ />
+
)}
-
- {
- setForceCodeBox(!forceCodeBox);
- }}
- />
-
diff --git a/frontend/src/AppBuilder/LeftSidebar/PageMenu/PageMenuItem.jsx b/frontend/src/AppBuilder/LeftSidebar/PageMenu/PageMenuItem.jsx
deleted file mode 100644
index 3f8b3c09d3..0000000000
--- a/frontend/src/AppBuilder/LeftSidebar/PageMenu/PageMenuItem.jsx
+++ /dev/null
@@ -1,317 +0,0 @@
-import React, { memo, useRef, useState, useCallback } from 'react';
-import cx from 'classnames';
-// import { RenameInput } from './RenameInput';
-// import { PagehandlerMenu } from './PagehandlerMenu';
-// import { EditModal } from './EditModal';
-// import { SettingsModal } from './SettingsModal';
-import { useAppVersionStore } from '@/_stores/appVersionStore';
-import SolidIcon from '@/_ui/Icon/SolidIcons';
-import EyeDisable from '@/_ui/Icon/solidIcons/EyeDisable';
-import FileRemove from '@/_ui/Icon/solidIcons/FIleRemove';
-import Home from '@/_ui/Icon/solidIcons/Home';
-import useStore from '@/AppBuilder/_stores/store';
-import _ from 'lodash';
-import { toast } from 'react-hot-toast';
-import { RenameInput } from './RenameInput';
-import IconSelector from './IconSelector';
-import { withRouter } from '@/_hoc/withRouter';
-import OverflowTooltip from '@/_components/OverflowTooltip';
-import { useModuleContext } from '@/AppBuilder/_contexts/ModuleContext';
-import { shallow } from 'zustand/shallow';
-import { ToolTip } from '@/_components/ToolTip';
-
-export const PageMenuItem = withRouter(
- memo(({ darkMode, page, navigate }) => {
- const { moduleId } = useModuleContext();
- const homePageId = useStore((state) => state.appStore.modules[moduleId].app.homePageId);
- const isHomePage = page.id === homePageId;
- const currentPageId = useStore((state) => state.modules[moduleId].currentPageId);
- const isSelected = page.id === currentPageId;
- const isHidden = page?.hidden ?? false;
- const isDisabled = page?.disabled ?? false;
- const [isHovered, setIsHovered] = useState(false);
- const shouldFreeze = useStore((state) => state.getShouldFreeze());
- const featureAccess = useStore((state) => state?.license?.featureAccess, shallow);
- const licenseValid = !featureAccess?.licenseStatus?.isExpired && featureAccess?.licenseStatus?.isLicenseValid;
- const showEditingPopover = useStore((state) => state.showEditingPopover);
- const restricted = page?.permissions && page?.permissions?.length > 0;
- const {
- definition: { styles, properties },
- } = useStore((state) => state.pageSettings);
- const setCurrentPageHandle = useStore((state) => state.setCurrentPageHandle);
- // only update when the page is being edited
- const editingPage = useStore(
- (state) => state.editingPage,
- (prev, next) => {
- if (next?.id === page?.id) return false;
- if (prev?.id === page?.id) return false;
- return true;
- }
- );
- const editingPageName = useStore((state) => state.showEditPageNameInput);
- const popoverRef = useRef(null);
-
- const openPageEditPopover = useStore((state) => state.openPageEditPopover);
- const toggleEditPageNameInput = useStore((state) => state.toggleEditPageNameInput);
-
- 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)}
- style={{
- width: '100%',
- }}
- >
- <>
-
- );
- })
-);
-
-export const AddingPageHandler = ({ darkMode }) => {
- const toggleShowAddNewPageInput = useStore((state) => state.toggleShowAddNewPageInput);
- const addNewPage = useStore((state) => state.addNewPage);
- const isPageGroup = useStore((state) => state.isPageGroup);
- const handleAddingNewPage = (pageName) => {
- if (pageName.trim().length === 0) {
- toast(`${isPageGroup ? 'Page group' : 'Page'} name should have at least 1 character`, {
- icon: '⚠️',
- });
- } else if (pageName.trim().length > 32) {
- toast(`${isPageGroup ? 'Page group' : 'Page'} name cannot exceed 32 characters`, {
- icon: '⚠️',
- });
- } else {
- addNewPage(pageName, _.kebabCase(pageName.toLowerCase()), isPageGroup);
- }
- toggleShowAddNewPageInput(false);
- };
-
- return (
-
- {editingPageName && editingPage?.id === page?.id ? (
- <>
- {' '}
- {
- toggleEditPageNameInput(false);
- }}
- />
-
- ) : (
- <>
- {' '}
-
-
- {icon()}
-
- {icon()}
-
- {page.name}
-
-
- {isHomePage && 'Home'}
- {isDisabled && 'Disabled'}
- {isHidden && !isDisabled && 'Hidden'}
-
-
-
- {licenseValid && restricted && (
-
-
- )}
-
-
-
-
- {!shouldFreeze && (
-
- )}
-
-
- )}
-
-
- );
-};
diff --git a/frontend/src/AppBuilder/QueryManager/QueryEditors/TooljetDatabase/AggregateUI/index.jsx b/frontend/src/AppBuilder/QueryManager/QueryEditors/TooljetDatabase/AggregateUI/index.jsx
index a2cf74da10..d9a670f200 100644
--- a/frontend/src/AppBuilder/QueryManager/QueryEditors/TooljetDatabase/AggregateUI/index.jsx
+++ b/frontend/src/AppBuilder/QueryManager/QueryEditors/TooljetDatabase/AggregateUI/index.jsx
@@ -277,7 +277,11 @@ export const AggregateFilter = ({ darkMode, operation = '' }) => {
};
const aggFxOptions = [
- { label: 'Sum', value: 'sum', description: 'Sum of all values in this column' },
+ {
+ label: 'Sum',
+ value: 'sum',
+ description: 'Sum of all values in this column',
+ },
{
label: 'Count',
value: 'count',
@@ -402,7 +406,11 @@ export const AggregateFilter = ({ darkMode, operation = '' }) => {
/>
- {
- const name = event.target.value;
- handleAddingNewPage(name);
- event.stopPropagation();
- }}
- onKeyDown={(event) => {
- if (event.key === 'Enter') {
- const name = event.target.value;
- handleAddingNewPage(name);
- event.stopPropagation();
- }
- }}
- />
-
- handleDeleteAggregate(aggregateKey)}
>
diff --git a/frontend/src/AppBuilder/QueryPanel/QueryCard.jsx b/frontend/src/AppBuilder/QueryPanel/QueryCard.jsx
index 7328b7dfc6..91c14257ef 100644
--- a/frontend/src/AppBuilder/QueryPanel/QueryCard.jsx
+++ b/frontend/src/AppBuilder/QueryPanel/QueryCard.jsx
@@ -1,10 +1,10 @@
-import React, { useState, useCallback } from 'react';
+import React, { useState } from 'react';
import { Tooltip } from 'react-tooltip';
+import { ToolTip } from '@/_components/ToolTip';
import { updateQuerySuggestions } from '@/_helpers/appUtils';
// import { Confirm } from '../Viewer/Confirm';
import { toast } from 'react-hot-toast';
import { shallow } from 'zustand/shallow';
-import Copy from '@/_ui/Icon/solidIcons/Copy';
import DataSourceIcon from '../QueryManager/Components/DataSourceIcon';
import { isQueryRunnable, decodeEntities } from '@/_helpers/utils';
import { canDeleteDataSource, canReadDataSource, canUpdateDataSource } from '@/_helpers';
@@ -12,13 +12,10 @@ import useStore from '@/AppBuilder/_stores/store';
//TODO: Remove this
import { Confirm } from '@/Editor/Viewer/Confirm';
// TODO: enable delete query confirmation popup
-import { debounce } from 'lodash';
-import { useModuleContext } from '@/AppBuilder/_contexts/ModuleContext';
+import { Button as ButtonComponent } from '@/components/ui/Button/Button.jsx';
+import SolidIcon from '@/_ui/Icon/SolidIcons';
export const QueryCard = ({ dataQuery, darkMode = false, localDs }) => {
- const { moduleId } = useModuleContext();
- const appId = useStore((state) => state.appStore.modules[moduleId].app.appId);
-
const isQuerySelected = useStore((state) => state.queryPanel.isQuerySelected(dataQuery.id), shallow);
const setSelectedQuery = useStore((state) => state.queryPanel.setSelectedQuery);
const checkExistingQueryName = useStore((state) => state.dataQuery.checkExistingQueryName);
@@ -26,9 +23,16 @@ export const QueryCard = ({ dataQuery, darkMode = false, localDs }) => {
const isDeletingQueryInProcess = useStore((state) => state.dataQuery.isDeletingQueryInProcess);
const renameQuery = useStore((state) => state.dataQuery.renameQuery);
const deleteDataQueries = useStore((state) => state.dataQuery.deleteDataQueries);
- const duplicateQuery = useStore((state) => state.dataQuery.duplicateQuery);
const setPreviewData = useStore((state) => state.queryPanel.setPreviewData);
- const [showDeleteConfirmation, setShowDeleteConfirmation] = useState(false);
+ const shouldFreeze = useStore((state) => state.getShouldFreeze());
+
+ const renamingQueryId = useStore((state) => state.queryPanel.renamingQueryId);
+ const deletingQueryId = useStore((state) => state.queryPanel.deletingQueryId);
+ const setRenamingQuery = useStore((state) => state.queryPanel.setRenamingQuery);
+ const deleteDataQuery = useStore((state) => state.queryPanel.deleteDataQuery);
+ const isRenaming = renamingQueryId === dataQuery.id;
+ const isDeleting = deletingQueryId === dataQuery.id;
+
const hasPermissions =
selectedDataSourceScope === 'global'
? canUpdateDataSource(dataQuery?.data_source_id) ||
@@ -36,57 +40,77 @@ export const QueryCard = ({ dataQuery, darkMode = false, localDs }) => {
canDeleteDataSource()
: true;
- const shouldFreeze = useStore((state) => state.getShouldFreeze());
-
- const [renamingQuery, setRenamingQuery] = useState(false);
-
- const deleteDataQuery = (e) => {
- e.stopPropagation();
- setShowDeleteConfirmation(true);
- };
+ const toggleQueryHandlerMenu = useStore((state) => state.queryPanel.toggleQueryHandlerMenu);
+ const featureAccess = useStore((state) => state?.license?.featureAccess, shallow);
+ const licenseValid = !featureAccess?.licenseStatus?.isExpired && featureAccess?.licenseStatus?.isLicenseValid;
+ const isRestricted = dataQuery.permissions && dataQuery.permissions.length !== 0;
const updateQueryName = (dataQuery, newName) => {
const { name } = dataQuery;
if (name === newName) {
- return setRenamingQuery(false);
+ return setRenamingQuery(null);
}
const isNewQueryNameAlreadyExists = checkExistingQueryName(newName);
if (newName && !isNewQueryNameAlreadyExists) {
renameQuery(dataQuery?.id, newName);
- setRenamingQuery(false);
+ setRenamingQuery(null);
updateQuerySuggestions(name, newName);
} else {
if (isNewQueryNameAlreadyExists) {
toast.error('Query name already exists');
}
- setRenamingQuery(false);
+ setRenamingQuery(null);
}
};
const executeDataQueryDeletion = () => {
- setShowDeleteConfirmation(false);
+ deleteDataQuery(null);
deleteDataQueries(dataQuery?.id);
setPreviewData(null);
};
- // To prevent user clicking from continuous clicks
- const debouncedDuplicateQuery = useCallback(
- debounce((queryId, appId) => {
- duplicateQuery(queryId, appId);
- setPreviewData(null);
- }, 500),
- [duplicateQuery]
- );
+ const getTooltip = () => {
+ const permission = dataQuery.permissions?.[0];
+ if (!permission) return null;
+
+ const users = permission.groups || permission.users || [];
+ if (users.length === 0) return null;
+
+ const isSingle = permission.type === 'SINGLE';
+ const isGroup = permission.type === 'GROUP';
+
+ if (isSingle) {
+ return users.length === 1
+ ? `Access restricted to ${users[0].user.email}`
+ : `Access restricted to ${users.length} users`;
+ }
+
+ if (isGroup) {
+ return users.length === 1
+ ? `Access restricted to ${users[0].permission_group?.name || users[0].permissionGroup?.name} group`
+ : `Access restricted to ${users.length} user groups`;
+ }
+
+ return null;
+ };
return (
<>
- {!shouldFreeze && isQuerySelected && (
- {
+ onClick={(e) => {
if (isQuerySelected) return;
- setSelectedQuery(dataQuery?.id);
- setPreviewData(null);
+ const menuBtn = document.getElementById(`query-handler-menu-${dataQuery?.id}`);
+ if (menuBtn.contains(e.target)) {
+ e.stopPropagation();
+ } else {
+ toggleQueryHandlerMenu(false);
+ }
+ setTimeout(() => {
+ setSelectedQuery(dataQuery?.id);
+ setPreviewData(null);
+ }, 0);
}}
role="button"
>
@@ -94,7 +118,7 @@ export const QueryCard = ({ dataQuery, darkMode = false, localDs }) => {
- {renamingQuery ? (
+ {isRenaming ? (
{
data-tooltip-dynamic="true"
>
{decodeEntities(dataQuery.name)}
- {' '}
+
+
+ {' '}
{!isQueryRunnable(dataQuery) && Draft}
{localDs && (
<>
@@ -143,80 +172,24 @@ export const QueryCard = ({ dataQuery, darkMode = false, localDs }) => {
)}
+ {licenseValid && isRestricted &&
+
-
- )}
+ setRenamingQuery(true)}
- >
-
-
-
-
- debouncedDuplicateQuery(dataQuery?.id, appId)}
- >
-
-
-
- {isDeletingQueryInProcess ? (
-
-
-
-
- ) : (
-
-
-
-
-
- )}
-
+ toggleQueryHandlerMenu(true, `query-handler-menu-${dataQuery?.id}`)}
+ size="small"
+ variant="outline"
+ className=""
+ id={`query-handler-menu-${dataQuery?.id}`}
+ />
+
+ ),
+ trailingIcon: {
+ e.stopPropagation();
+ handleQueryMenuActions(option.value);
+ }}
+ >
+
+ );
+
+ return option.value === 'permission' ? (
+ {option.icon}
+
+ {option?.label}
+
+ {option.value === 'permission' && !licenseValid && option.trailingIcon && option.trailingIcon}
+
+
+ Component properties
+ toggleRightSidebarPin()}>
+
+
+
+
+ );
}
return (
No component selected
+
+ Click a component on the canvas to view and edit its properties.
+
+
- {header}
handleSearchQueryChange(e)}
+ callBack={(e) => handleSearchQueryChange(e.target.value)}
onClearCallback={() => {
setSearchQuery('');
if (activeTab === 1) {
diff --git a/frontend/src/AppBuilder/RightSideBar/ComponentManagerTab/DragLayer.jsx b/frontend/src/AppBuilder/RightSideBar/ComponentManagerTab/DragLayer.jsx
index 0c6f7327af..1b765e160d 100644
--- a/frontend/src/AppBuilder/RightSideBar/ComponentManagerTab/DragLayer.jsx
+++ b/frontend/src/AppBuilder/RightSideBar/ComponentManagerTab/DragLayer.jsx
@@ -11,6 +11,11 @@ import { useModuleContext } from '@/AppBuilder/_contexts/ModuleContext';
import { noop } from 'lodash';
export const DragLayer = ({ index, component, isModuleTab = false }) => {
+ const [isRightSidebarOpen, toggleRightSidebar] = useStore(
+ (state) => [state.isRightSidebarOpen, state.toggleRightSidebar],
+ shallow
+ );
+ const isRightSidebarPinned = useStore((state) => state.isRightSidebarPinned);
const { isModuleEditor } = useModuleContext();
const setShowModuleBorder = useStore((state) => state.setShowModuleBorder, shallow) || noop;
const [{ isDragging }, drag, preview] = useDrag(
@@ -28,11 +33,14 @@ export const DragLayer = ({ index, component, isModuleTab = false }) => {
useEffect(() => {
if (isDragging && !isModuleEditor) {
+ if (!isRightSidebarPinned) {
+ toggleRightSidebar(!isRightSidebarOpen);
+ }
setShowModuleBorder(true);
} else {
setShowModuleBorder(false);
}
- }, [isDragging, setShowModuleBorder, isModuleEditor]);
+ }, [isDragging, setShowModuleBorder, isModuleEditor, toggleRightSidebar]);
// const size = isModuleTab
// ? component.module_container.layouts[currentLayout]
@@ -55,36 +63,43 @@ const CustomDragLayer = ({ size }) => {
currentOffset: monitor.getSourceClientOffset(),
item: monitor.getItem(),
}));
-
+ console.log(currentOffset, 'currentOffset');
if (!currentOffset) return null;
const canvasWidth = item?.canvasWidth;
const canvasBounds = item?.canvasRef?.getBoundingClientRect();
const height = size.height;
- const mainCanvasWidth = document.getElementById('real-canvas')?.offsetWidth || 0;
+ const appCanvasWidth = document.getElementById('real-canvas')?.offsetWidth || 0;
+
+ // Calculate width based on the app canvas's grid
+ let width = (appCanvasWidth * size.width) / NO_OF_GRIDS;
- let width = (mainCanvasWidth * size.width) / NO_OF_GRIDS;
// Calculate position relative to the current canvas (parent or child)
const left = currentOffset.x - (canvasBounds?.left || 0);
const top = currentOffset.y - (canvasBounds?.top || 0);
- // Adjust position and width if exceeding grid bounds
- if (width >= canvasWidth) {
+ // Ensure width doesn't exceed the current container's width
+ if (width > canvasWidth) {
width = canvasWidth;
}
+ // Snap width to grid (round to nearest grid unit)
+ const gridUnitWidth = canvasWidth / NO_OF_GRIDS;
+ const gridUnits = Math.round(width / gridUnitWidth);
+ width = gridUnits * gridUnitWidth;
+
const [x, y] = snapToGrid(canvasWidth, left, top);
return (
-
+
{activeTab === 'propertiesTab' ? (
{
+ const ColumnIcon = getColumnIcon(props.data.value);
+ const isDeprecated = checkIfTableColumnDeprecated(props.data.value);
+
+ return (
+
+
+
+
+ );
+};
+
+const CustomValueContainer = ({ data, ...props }) => {
+ const Icon = getColumnIcon(data.value);
+ return (
+
@@ -162,7 +163,7 @@ export const StylesTabElements = ({
property="cellBackgroundColor"
props={column}
component={component}
- paramMeta={{ type: 'color', displayName: 'Cell color' }}
+ paramMeta={{ type: 'colorSwatches', displayName: 'Cell color' }}
paramType="properties"
/>
{items.map((component, i) => renderComponentCard(component, i))}
@@ -105,6 +106,7 @@ export const ComponentsManagerTab = ({ darkMode, isModuleEditor }) => {
className=" btn-sm tj-tertiary-btn mt-3"
onClick={() => {
setFilteredComponents([]);
+ handleSearchQueryChange('');
}}
>
{t('widgetManager.clearQuery', 'clear query')}
@@ -113,62 +115,31 @@ export const ComponentsManagerTab = ({ darkMode, isModuleEditor }) => {
);
}
- if (filteredComponents.length != componentList.length) {
- return <>{renderList(undefined, filteredComponents)};
- } else {
- const commonSection = { title: t('widgetManager.commonlyUsed', 'commonly used'), items: [] };
- const layoutsSection = { title: t('widgetManager.layouts', 'layouts'), items: [] };
- const formSection = { title: t('widgetManager.forms', 'forms'), items: [] };
- const integrationSection = { title: t('widgetManager.integrations', 'integrations'), items: [] };
- const otherSection = { title: t('widgetManager.others', 'others'), items: [] };
- const legacySection = { title: 'Legacy', items: [] };
-
- const commonItems = ['Table', 'Button', 'Text', 'TextInput', 'DatetimePickerV2', 'Form'];
- const formItems = [
- 'Form',
- 'TextInput',
- 'NumberInput',
- 'PasswordInput',
- 'TextArea',
- 'EmailInput',
- 'PhoneInput',
- 'CurrencyInput',
- 'ToggleSwitchV2',
- 'DropdownV2',
- 'MultiselectV2',
- 'RichTextEditor',
- 'Checkbox',
- 'RadioButtonV2',
- 'DatetimePickerV2',
- 'DatePickerV2',
- 'TimePicker',
- 'DaterangePicker',
- 'FilePicker',
- 'StarRating',
- ];
- const integrationItems = ['Map'];
- const layoutItems = ['Container', 'Listview', 'Tabs', 'ModalV2'];
-
- filteredComponents.forEach((f) => {
- if (commonItems.includes(f)) commonSection.items.push(f);
- if (formItems.includes(f)) formSection.items.push(f);
- else if (integrationItems.includes(f)) integrationSection.items.push(f);
- else if (LEGACY_ITEMS.includes(f)) legacySection.items.push(f);
- else if (layoutItems.includes(f)) layoutsSection.items.push(f);
- else otherSection.items.push(f);
- });
-
- return (
- <>
- {renderList(commonSection.title, commonSection.items)}
- {renderList(layoutsSection.title, layoutsSection.items)}
- {renderList(formSection.title, formSection.items)}
- {renderList(otherSection.title, otherSection.items)}
- {renderList(integrationSection.title, integrationSection.items)}
- {renderList(legacySection.title, legacySection.items)}
-
- );
+ if (filteredComponents.length !== componentList.length) {
+ return <>{renderList(filteredComponents)};
}
+
+ const sections = Object.entries(sectionConfig).map(([key, config]) => ({
+ title: config.title,
+ items: filteredComponents.filter((component) => config.valueSet.has(component)),
+ }));
+
+ const items = [];
+ sections.forEach((section) => {
+ if (section.items.length > 0) {
+ items.push({
+ title: section.title,
+ isOpen: true,
+ children: renderList(section.items),
+ });
+ }
+ });
+
+ return (
+
+
+ );
}
const handleChangeTab = (tab) => {
@@ -195,7 +166,7 @@ export const ComponentsManagerTab = ({ darkMode, isModuleEditor }) => {
{
+ const [isFxActive, setIsFxActive] = useState(false);
+
+ const handleFxButtonClick = () => {
+ paramUpdated({ name: paramName }, 'fxActive', !isFxActive, 'properties');
+ setIsFxActive(!isFxActive);
+ };
+
+ return (
+ paramUpdated({ name: 'fileType' }, 'value', value, 'validation')}
+ />
+ );
return
+
+ );
+};
+
+export default ColumnMappingComponent;
diff --git a/frontend/src/AppBuilder/RightSideBar/Inspector/Components/Form/_components/DataSection.jsx b/frontend/src/AppBuilder/RightSideBar/Inspector/Components/Form/_components/DataSection.jsx
new file mode 100644
index 0000000000..aca6ee612f
--- /dev/null
+++ b/frontend/src/AppBuilder/RightSideBar/Inspector/Components/Form/_components/DataSection.jsx
@@ -0,0 +1,72 @@
+import React from 'react';
+import { renderElement } from '../../../Utils';
+import { DataSectionWrapper } from './index';
+
+export const DataSection = ({
+ component,
+ componentMeta,
+ paramUpdatedInterceptor,
+ dataQueries,
+ currentState,
+ allComponents,
+ darkMode,
+ resolvedCustomSchema,
+ source,
+ JSONData,
+ setCodeEditorView,
+ currentStatusRef,
+ saveDataSection,
+ openModal,
+ setParentModalState,
+ performColumnMapping,
+ existingResolvedJsonData,
+ savedSourceValue,
+ resolveReferences,
+ isLoading = false,
+}) => {
+ return () => (
+
e.stopPropagation()}
+ >
+
+ );
+};
+
+/** Remove minFileCount and maxFileCount validations if multiple file selection is disabled */
+const getValidations = (componentMeta, component) => {
+ const validations = Object.keys(componentMeta.validation || {});
+ const enableMultipleValue = resolveReferences(component.component.definition.properties.enableMultiple?.value ?? false);
+ const enableMultipleFxActive = component.component.definition.properties.enableMultiple?.fxActive;
+
+ if (!enableMultipleValue && !enableMultipleFxActive) {
+ return validations.filter((validation) => !['minFileCount', 'maxFileCount'].includes(validation));
+ }
+ return validations;
+};
+
+const getPropertiesBySection = (propertiesMeta) => {
+ const properties = [];
+ const additionalActions = [];
+ const dataProperties = [];
+
+ for (const [key, value] of Object.entries(propertiesMeta)) {
+ if (value?.section === 'additionalActions') {
+ additionalActions.push(key);
+ } else if (value?.accordian === 'Data') {
+ dataProperties.push(key);
+ } else {
+ properties.push(key);
+ }
+ }
+ return { properties, additionalActions, dataProperties };
+};
+
+const getConditionalAccordionItems = (component, renderCustomElement) => {
+ const parseContent = resolveReferences(component.component.definition.properties.parseContent?.value ?? false);
+ const options = ['parseContent'];
+ let renderOptions = options.map((option) => renderCustomElement(option));
+
+ const conditionalOptions = [{ name: 'parseFileType', condition: parseContent }];
+ conditionalOptions.forEach(({ name, condition }) => {
+ if (condition) renderOptions.push(renderCustomElement(name));
+ });
+ return renderOptions;
+};
export const FilePicker = ({ componentMeta, darkMode, ...restProps }) => {
const {
@@ -16,38 +122,22 @@ export const FilePicker = ({ componentMeta, darkMode, ...restProps }) => {
allComponents,
} = restProps;
- const renderCustomElement = (param, paramType = 'properties') => {
- return renderElement(component, componentMeta, paramUpdated, dataQueries, param, paramType, currentState);
- };
- const conditionalAccordionItems = (component) => {
- const parseContent = resolveReferences(component.component.definition.properties.parseContent?.value ?? false);
- const accordionItems = [];
- const options = ['parseContent'];
+ const resolvedValidations = useStore((state) => state.getResolvedComponent(component.id)?.validation);
+ const fileTypeValue = resolvedValidations?.fileType;
- let renderOptions = [];
+ const renderCustomElement = (param, paramType = 'properties') =>
+ renderElement(component, componentMeta, paramUpdated, dataQueries, param, paramType, currentState);
- options.map((option) => renderOptions.push(renderCustomElement(option)));
+ // Debug logs
+ // console.log('component.component.definition', component.component.definition);
- const conditionalOptions = [{ name: 'parseFileType', condition: parseContent }];
-
- conditionalOptions.map(({ name, condition }) => {
- if (condition) renderOptions.push(renderCustomElement(name));
- });
-
- accordionItems.push({
- title: 'Options',
- children: renderOptions,
- });
- return accordionItems;
- };
-
- const properties = Object.keys(componentMeta.properties);
const events = Object.keys(componentMeta.events);
- const validations = Object.keys(componentMeta.validation || {});
+ const validations = getValidations(componentMeta, component);
- const filteredProperties = properties.filter(
- (property) => property !== 'parseContent' && property !== 'parseFileType'
- );
+ // console.log('validations', validations, enableMultipleValue, component.component.definition.properties.enableMultiple?.value, enableMultipleFxActive);
+
+ const { additionalActions, dataProperties } = getPropertiesBySection(componentMeta?.properties);
+ const filteredProperties = [...dataProperties];
const accordionItems = baseComponentProperties(
filteredProperties,
@@ -62,10 +152,26 @@ export const FilePicker = ({ componentMeta, darkMode, ...restProps }) => {
apps,
allComponents,
validations,
- darkMode
+ darkMode,
+ [],
+ additionalActions
);
- accordionItems.splice(1, 0, ...conditionalAccordionItems(component));
+ // Insert conditional accordion items
+ accordionItems[0].children.push(...getConditionalAccordionItems(component, renderCustomElement));
+
+ // Insert FxSelect for file type
+ accordionItems[2].children[1] = (
+ e.stopPropagation()}>
+
+
+
+
+ {isFxActive ? (
+
+
+
+
+);
+
+/**
+ * Modal header component
+ */
+const ModalHeader = ({ currentStatus, onClose }) => (
+
+
+);
+
+/**
+ * Modal footer component
+ */
+const ModalFooter = ({ currentStatus, refreshData, handleSubmit, isSaving, allSectionsEmpty }) => (
+
+
+ + {currentStatus !== FORM_STATUS.GENERATE_FIELDS ? 'Manage fields' : 'Map columns'} +
+ +
+ {currentStatus !== FORM_STATUS.GENERATE_FIELDS && (
+
+ )}
+
+
+);
+
+/**
+ * Loader component
+ */
+const LoaderComponent = () => (
+
+
+);
+
+/**
+ * Disable the checkbox if the property is fx controlled and it will not be included while selectAll is called.
+ * This is to prevent users from changing the state of fx controlled properties directly.
+ * Instead, they should use the fx editor to manage these properties.
+ */
+
+const ColumnMappingRow = ({
+ column,
+ onChange,
+ onCheckboxChange,
+ index,
+ darkMode = false,
+ disabled = false,
+ sectionType,
+}) => {
+ if (!column) return null;
+
+ const inputTypeOptions = getInputTypeOptions(darkMode);
+
+ const isMandatoryFxControlled = isPropertyFxControlled(column.mandatory);
+
+ const handleLabelChange = (e) => {
+ onChange?.({
+ ...column,
+ label: e.target.value,
+ });
+ };
+
+ const handleMandatoryChange = (checked) => {
+ if (typeof column.mandatory === 'object') {
+ onChange?.({
+ ...column,
+ mandatory: {
+ ...column.mandatory,
+ value: checked,
+ },
+ });
+ } else {
+ onChange?.({
+ ...column,
+ mandatory: checked,
+ });
+ }
+ };
+
+ const handleInputTypeChange = (value) => {
+ onChange?.({
+ ...column,
+ componentType: value,
+ });
+ };
+
+ const shouldHideCheckbox = sectionType === 'isCustomField';
+
+ return (
+
+ {/* Checkbox */}
+
+ );
+};
+
+const RenderSection = ({
+ mappedColumns = [],
+ setMappedColumns,
+ darkMode,
+ sectionType,
+ sectionDisplayName,
+ disabled = false,
+}) => {
+ const columnsArray = useMemo(() => {
+ return Array.isArray(mappedColumns) ? mappedColumns : [];
+ }, [mappedColumns]);
+
+ const checkboxStates = useCheckboxStates(columnsArray);
+
+ const { isAllSelected, isIntermediateSelected, isAllSelectedMandatory, isIntermediateMandatory } = checkboxStates;
+
+ const handleSelectAll = useCallback(
+ (checked) => {
+ if (columnsArray.length > 0) {
+ const updatedColumns = columnsArray.map((col) => ({
+ ...col,
+ selected: checked,
+ }));
+ setMappedColumns(updatedColumns);
+ }
+ },
+ [columnsArray, setMappedColumns]
+ );
+
+ const handleSelectAllMandatory = useCallback(
+ (checked) => {
+ if (columnsArray.length > 0) {
+ const updatedColumns = columnsArray.map((col) => {
+ if (isPropertyFxControlled(col.mandatory)) {
+ return col;
+ }
+
+ return {
+ ...col,
+ mandatory: {
+ ...col.mandatory,
+ value: checked,
+ },
+ };
+ });
+ setMappedColumns(updatedColumns);
+ }
+ },
+ [columnsArray, setMappedColumns]
+ );
+
+ const handleColumnSelect = useCallback(
+ (columnName, checked) => {
+ if (columnsArray.length > 0) {
+ const updatedColumns = columnsArray.map((col) => {
+ if (col.name !== columnName) {
+ return col;
+ }
+
+ return {
+ ...col,
+ selected: checked,
+ };
+ });
+ setMappedColumns(updatedColumns);
+ }
+ },
+ [columnsArray, setMappedColumns]
+ );
+
+ const handleColumnChange = useCallback(
+ (columnName, changes) => {
+ if (columnsArray.length > 0) {
+ const updatedColumns = columnsArray.map((col) => (col.name === columnName ? { ...col, ...changes } : col));
+ setMappedColumns(updatedColumns);
+ }
+ },
+ [columnsArray, setMappedColumns]
+ );
+
+ const shouldHideSelectAll = sectionType === 'isCustomField';
+
+ const renderHeader = () => {
+ return (
+
+
+
+ {/* Column Name and Type */}
+
+ {column.key ? (
+ <>
+ {column.key}
+ {column.dataType}
+
+ ) : (
+ No mapped columns
+ )}
+
+
+ {/* Mapped To */}
+
+
+
+ {/* Input Type Selector */}
+
+
+
+ {/* Input Label */}
+
+
+
+
+ {/* Mandatory Checkbox */}
+
+
+
+
+ );
+ };
+
+ return (
+
+
+
+ Column name
+
+
+
+
+
+
+
+ Mandatory?
+
+
+
+
+
+ );
+};
+
+const ColumnMappingComponent = ({
+ isOpen,
+ onClose,
+ darkMode = false,
+ onSubmit,
+ currentStatusRef,
+ component,
+ newResolvedJsonData,
+ existingResolvedJsonData,
+ source,
+ isDataLoading,
+}) => {
+ const { resolveReferences, getComponentDefinition, getFormFields } = useStore(
+ (state) => ({
+ resolveReferences: state.resolveReferences,
+ getComponentDefinition: state.getComponentDefinition,
+ getFormFields: state.getFormFields,
+ }),
+ shallow
+ );
+
+ const componentNameIdMapping = useStore((state) => state.modules.canvas.componentNameIdMapping, shallow);
+ const queryNameIdMapping = useStore((state) => state.modules.canvas.queryNameIdMapping, shallow);
+ const runQuery = useStore((state) => state.queryPanel.runQuery, shallow);
+
+ const [isSaving, setIsSaving] = useState(false);
+ const [refreshedColumns, setRefreshedColumns] = useState([]);
+ const [showLoader, setShowLoader] = useState(false);
+ const bodyContainerRef = useRef(null);
+ const lastBodyHeightRef = useRef(60);
+
+ useEffect(() => {
+ setShowLoader(isDataLoading);
+ }, [isDataLoading]);
+
+ // Track body height when content is loaded
+ useEffect(() => {
+ if (!showLoader && bodyContainerRef.current) {
+ // Use setTimeout to ensure DOM is fully rendered
+ setTimeout(() => {
+ if (bodyContainerRef.current) {
+ const height = bodyContainerRef.current.scrollHeight;
+ if (height > 0) {
+ lastBodyHeightRef.current = height;
+ }
+ }
+ }, 0);
+ }
+ }, [showLoader, groupedColumns]);
+
+ const currentStatus = currentStatusRef.current;
+
+ console.log('here--- existingResolvedJsonData--- ', existingResolvedJsonData);
+
+ const columnsToUse = useColumnBuilder(
+ component,
+ currentStatus,
+ newResolvedJsonData,
+ existingResolvedJsonData,
+ refreshedColumns?.length === 0 || Object.keys(refreshedColumns).length === 0
+ ? newResolvedJsonData
+ : refreshedColumns,
+ getFormFields,
+ getComponentDefinition
+ );
+
+ const { groupedColumns, sectionTypes, updateSectionColumns } = useGroupedColumns(columnsToUse, currentStatus);
+
+ const refreshData = useCallback(async () => {
+ setShowLoader(true);
+ currentStatusRef.current = FORM_STATUS.REFRESH_FIELDS;
+ const res = extractAndReplaceReferencesFromString(source.value, componentNameIdMapping, queryNameIdMapping);
+ const { allRefs, valueWithBrackets } = res;
+
+ const queryRefs = allRefs
+ .filter((ref) => ref.entityType === 'queries')
+ .filter((ref, index, self) => index === self.findIndex((r) => r.entityNameOrId === ref.entityNameOrId));
+
+ await Promise.all(
+ queryRefs.map(async (ref) => {
+ const queryId = ref.entityNameOrId;
+ await runQuery(queryId, '', false, 'edit');
+ })
+ );
+
+ const resolvedValue = resolveReferences('canvas', valueWithBrackets);
+ setRefreshedColumns(resolvedValue);
+ setShowLoader(false);
+ }, [source.value, componentNameIdMapping, queryNameIdMapping, runQuery, resolveReferences, currentStatusRef]);
+
+ const handleSubmit = useCallback(() => {
+ setIsSaving(true);
+ const flatColumns = Object.entries(groupedColumns)
+ .flatMap(([, columns]) => columns)
+ .filter((col) => !col.isCustomField);
+ const combinedColumns = flatColumns.map((column) => {
+ if (!column.selected) {
+ return {
+ ...column,
+ isRemoved: true,
+ };
+ } else return column;
+ });
+
+ onSubmit?.(combinedColumns);
+ }, [groupedColumns, onSubmit]);
+
+ // Get display name for section type
+ const getSectionDisplayName = useCallback((sectionType) => {
+ return SECTION_DISPLAY_NAMES[sectionType] || '';
+ }, []);
+
+ const allSectionsEmpty = useMemo(() => {
+ return Object.values(groupedColumns).every((sectionColumns) => {
+ return Array.isArray(sectionColumns) ? sectionColumns.every((col) => !col.selected) : true;
+ });
+ }, [groupedColumns]);
+
+ const modalBody = (
+ <>
+
+ {sectionDisplayName}
+
+
+ {renderHeader()}
+
+
+ {columnsArray.length > 0 ? (
+ columnsArray.map((column, index) => (
+ c.name === column.name)}
+ onCheckboxChange={(checked) => handleColumnSelect(column.name, checked)}
+ onChange={(changes) => handleColumnChange(column.name, changes)}
+ index={index}
+ darkMode={darkMode}
+ disabled={disabled}
+ sectionType={sectionType}
+ />
+ ))
+ ) : (
+
+ No {sectionDisplayName.toLowerCase()} available
+ )}
+
+ {showLoader &&
+
+ {sectionTypes.map((sectionType) => {
+ return (
+ groupedColumns[sectionType]?.length > 0 && (
+ updateSectionColumns(sectionType, updatedColumns)}
+ darkMode={darkMode}
+ sectionType={sectionType}
+ sectionDisplayName={
+ currentStatus !== FORM_STATUS.GENERATE_FIELDS ? getSectionDisplayName(sectionType) : ''
+ }
+ disabled={sectionType === 'isRemoved'}
+ />
+ )
+ );
+ })}
+
+ )}
+
+
+
+ );
+
+ return (
+ {modalBody}
+
+ {componentMeta?.properties &&
+ Object.keys(componentMeta.properties).map((property) => {
+ if (componentMeta?.properties[property]?.section !== 'data') return null;
+
+ // Mutating the component definition properties to set the generateFormFrom source
+ component.component.definition.properties.generateFormFrom = source;
+ component.component.definition.properties.JSONData = JSONData;
+ const focusCodeEditor = property === 'JSONData' ? setCodeEditorView : undefined;
+
+ return renderElement(
+ component,
+ componentMeta,
+ paramUpdatedInterceptor,
+ dataQueries,
+ property,
+ 'properties',
+ currentState,
+ allComponents,
+ darkMode,
+ '',
+ null,
+ focusCodeEditor
+ );
+ })}
+ {source.value !== 'jsonSchema' && (
+
+ );
+};
diff --git a/frontend/src/AppBuilder/RightSideBar/Inspector/Components/Form/_components/DataSectionUI.jsx b/frontend/src/AppBuilder/RightSideBar/Inspector/Components/Form/_components/DataSectionUI.jsx
new file mode 100644
index 0000000000..c557644440
--- /dev/null
+++ b/frontend/src/AppBuilder/RightSideBar/Inspector/Components/Form/_components/DataSectionUI.jsx
@@ -0,0 +1,201 @@
+import React, { useState, useRef, useMemo, useCallback, useEffect } from 'react';
+import { Button } from '@/components/ui/Button/Button';
+import { LabeledDivider, ColumnMappingComponent, FormFieldsList, FieldPopoverContent } from './index';
+import OverlayTrigger from 'react-bootstrap/OverlayTrigger';
+import Popover from 'react-bootstrap/Popover';
+import { useDropdownState } from '../_hooks/useDropdownState';
+import useStore from '@/AppBuilder/_stores/store';
+import { shallow } from 'zustand/shallow';
+import { findNextElementTop, mergeFieldsWithComponentDefinition } from '../utils/utils';
+import { createNewComponentFromMeta } from '../utils/fieldOperations';
+import { FORM_STATUS, COMPONENT_LAYOUT_DETAILS } from '../constants';
+import { checkDiff } from '@/AppBuilder/Widgets/componentUtils';
+
+/* IMPORTANT - mandatory and selected (visibility) properties are objects with value and fxActive
+ This is to support dynamic values and fx expressions in the form fields.
+ When using these properties, ensure to access the value like so: field.mandatory.value
+ or field.selected.value.
+ Rest all the fields are directly accessible as strings or booleans.
+ For example: field.label, field.name, field.value, etc.
+*/
+
+const DataSectionUI = ({
+ component,
+ darkMode = false,
+ currentStatusRef,
+ openModalFromParent = false,
+ setParentModalState,
+ performColumnMapping,
+ newResolvedJsonData,
+ existingResolvedJsonData,
+ source,
+ JSONData,
+ isLoading: isDataLoading,
+ savedSourceValue = '',
+}) => {
+ const { getChildComponents, currentLayout, getComponentDefinition, performBatchComponentOperations, saveFormFields } =
+ useStore(
+ (state) => ({
+ getChildComponents: state.getChildComponents,
+ currentLayout: state.currentLayout,
+ getComponentDefinition: state.getComponentDefinition,
+ performBatchComponentOperations: state.performBatchComponentOperations,
+ saveFormFields: state.saveFormFields,
+ }),
+ shallow
+ );
+
+ const formFields = useStore((state) => state.getFormFields(component.id), checkDiff);
+
+ const formFieldsWithComponentDefinition = useMemo(
+ () => mergeFieldsWithComponentDefinition(formFields, getComponentDefinition),
+ [formFields, getComponentDefinition]
+ );
+
+ const { handleDropdownOpen, handleDropdownClose, shouldPreventPopoverClose } = useDropdownState();
+ const [isModalOpen, setIsModalOpen] = useState(false);
+ const [showAddFieldPopover, setShowAddFieldPopover] = useState(false);
+ const addFieldButtonRef = useRef(null);
+
+ const hideManageFields = formFields.length === 0 || savedSourceValue === 'rawJson';
+
+ useEffect(() => {
+ if (openModalFromParent && openModalFromParent !== isModalOpen) {
+ setIsModalOpen(true);
+ } else if (!openModalFromParent) setIsModalOpen(false);
+ }, [openModalFromParent, isModalOpen]);
+
+ const handleDeleteField = (field) => {
+ const updatedFields = formFields.filter((f) => f.componentId !== field.componentId);
+ let operations = {
+ updated: {},
+ added: {},
+ deleted: [field.componentId],
+ };
+ performBatchComponentOperations(operations);
+ saveFormFields(component.id, updatedFields, 'canvas');
+ };
+
+ const handleAddField = (newField) => {
+ const updatedFields = {
+ componentType: newField.componentType,
+ name: 'custom',
+ mandatory: newField.mandatory,
+ label: newField.label,
+ value: '',
+ placeholder: newField.placeholder,
+ selected: true,
+ isCustomField: true,
+ };
+ const childComponents = getChildComponents(component?.id);
+ // Get the last position of the child components
+ const nextElementsTop = findNextElementTop(childComponents, currentLayout);
+ const { added = {} } = createNewComponentFromMeta(
+ updatedFields,
+ component.id,
+ nextElementsTop + COMPONENT_LAYOUT_DETAILS.spacing
+ );
+ let operations = {
+ updated: {},
+ added: {},
+ deleted: [],
+ };
+ operations.added[added.id] = added;
+
+ performBatchComponentOperations(operations);
+ saveFormFields(component.id, [...formFields, { componentId: added.id, isCustomField: true }], 'canvas');
+ setShowAddFieldPopover(false);
+ };
+
+ const renderManageFieldsIcon = () => {
+ return (
+
+
+
+ {ColumnIcon &&
+
+ {props.isSelected && (
+
+
+
+ {Icon &&
+ );
+};
export const PropertiesTabElements = ({
column,
@@ -54,6 +100,7 @@ export const PropertiesTabElements = ({
{ label: 'Link', value: 'link' },
{ label: 'JSON', value: 'json' },
{ label: 'Markdown', value: 'markdown' },
+ { label: 'HTML', value: 'html' },
// Following column types are deprecated
{ label: 'Default', value: 'default' },
{ label: 'Dropdown', value: 'dropdown' },
@@ -64,7 +111,11 @@ export const PropertiesTabElements = ({
{ label: 'Multiple badges', value: 'badges' },
{ label: 'Tags', value: 'tags' },
]}
- components={{ DropdownIndicator, Option }}
+ components={{
+ DropdownIndicator,
+ Option: CustomOption,
+ SingleValue: CustomValueContainer,
+ }}
onChange={(value) => {
onColumnItemChange(index, 'columnType', value);
}}
diff --git a/frontend/src/AppBuilder/RightSideBar/Inspector/Components/Table/ColumnManager/StylesTabElements.jsx b/frontend/src/AppBuilder/RightSideBar/Inspector/Components/Table/ColumnManager/StylesTabElements.jsx
index 2b91a8dd15..e1d06686d1 100644
--- a/frontend/src/AppBuilder/RightSideBar/Inspector/Components/Table/ColumnManager/StylesTabElements.jsx
+++ b/frontend/src/AppBuilder/RightSideBar/Inspector/Components/Table/ColumnManager/StylesTabElements.jsx
@@ -129,6 +129,7 @@ export const StylesTabElements = ({
'number',
'json',
'markdown',
+ 'html',
'boolean',
'select',
'text',
@@ -147,7 +148,7 @@ export const StylesTabElements = ({
property="textColor"
props={column}
component={component}
- paramMeta={{ type: 'color', displayName: 'Text color' }}
+ paramMeta={{ type: 'colorSwatches', displayName: 'Text color' }}
paramType="properties"
/>