From 0070c2204287c47d724c1dfc8b41ca1cee7b5caa Mon Sep 17 00:00:00 2001 From: Kiran Ashok Date: Tue, 23 Jul 2024 11:09:59 +0530 Subject: [PATCH] fix : Exposed actions become unavailable on reload (#10379) * fix : exposed actions gets removed on reload * fix : table losing exposed vars on reload * fix: destrucute isEditorReady from correct object --------- Co-authored-by: Johnson Cherian --- frontend/src/Editor/BoxUI.jsx | 5 +- frontend/src/Editor/Components/Button.jsx | 50 ++++++++++--------- frontend/src/Editor/Components/Chart.jsx | 6 ++- frontend/src/Editor/Components/Checkbox.jsx | 5 +- .../src/Editor/Components/ColorPicker.jsx | 29 +++++++---- .../Components/DropdownV2/DropdownV2.jsx | 8 ++- frontend/src/Editor/Components/Form/Form.jsx | 12 +++-- frontend/src/Editor/Components/Icon.jsx | 8 +-- .../src/Editor/Components/Kanban/Kanban.jsx | 2 +- .../Editor/Components/Kanban/KanbanBoard.jsx | 39 +++++++++------ frontend/src/Editor/Components/Listview.jsx | 19 +++++-- frontend/src/Editor/Components/Modal.jsx | 8 +-- .../src/Editor/Components/Multiselect.jsx | 8 +-- .../MultiselectV2/MultiselectV2.jsx | 8 +-- .../src/Editor/Components/RadioButton.jsx | 8 +-- .../src/Editor/Components/Table/Table.jsx | 26 ++++++---- frontend/src/Editor/Components/Tabs.jsx | 8 +-- frontend/src/Editor/Components/TextArea.jsx | 9 ++-- frontend/src/Editor/Components/TextInput.jsx | 10 ++-- frontend/src/Editor/Components/TreeSelect.jsx | 13 +++-- .../Editor/ControlledComponentToRender.jsx | 4 +- 21 files changed, 173 insertions(+), 112 deletions(-) diff --git a/frontend/src/Editor/BoxUI.jsx b/frontend/src/Editor/BoxUI.jsx index 9ed762257a..8559cc559f 100644 --- a/frontend/src/Editor/BoxUI.jsx +++ b/frontend/src/Editor/BoxUI.jsx @@ -6,7 +6,7 @@ import OverlayTrigger from 'react-bootstrap/OverlayTrigger'; import '@/_styles/custom.scss'; import { EditorContext } from './Context/EditorContextWrapper'; import { validateWidget } from '@/_helpers/utils'; -import { useCurrentState } from '@/_stores/currentStateStore'; +import { useCurrentState, useCurrentStateStore } from '@/_stores/currentStateStore'; import { useAppDataStore } from '@/_stores/appDataStore'; import _ from 'lodash'; @@ -97,6 +97,8 @@ const BoxUI = (props) => { // eslint-disable-next-line react-hooks/exhaustive-deps }, []); + const isEditorReady = useCurrentStateStore((state) => state.isEditorReady); + return ( { currentPageId={currentPageId} getContainerProps={component.component === 'Form' ? getContainerProps : null} childComponents={childComponents} + isEditorReady={isEditorReady} /> diff --git a/frontend/src/Editor/Components/Button.jsx b/frontend/src/Editor/Components/Button.jsx index ab32b219f3..040b329544 100644 --- a/frontend/src/Editor/Components/Button.jsx +++ b/frontend/src/Editor/Components/Button.jsx @@ -5,7 +5,9 @@ import * as Icons from '@tabler/icons-react'; import Loader from '@/ToolJetUI/Loader/Loader'; export const Button = function Button(props) { - const { height, properties, styles, fireEvent, id, dataCy, setExposedVariable, setExposedVariables } = props; + const { height, properties, styles, fireEvent, id, dataCy, setExposedVariable, setExposedVariables, isEditorReady } = + props; + const { backgroundColor, textColor, @@ -93,31 +95,33 @@ export const Button = function Button(props) { }; useEffect(() => { - const exposedVariables = { - click: async function () { - if (!disable) { - fireEvent('onClick'); - } - }, - setText: async function (text) { - setLabel(text); - setExposedVariable('buttonText', text); - }, - disable: async function (value) { - setDisable(value); - }, - visibility: async function (value) { - setVisibility(value); - }, - loading: async function (value) { - setLoading(value); - }, - }; + if (isEditorReady) { + const exposedVariables = { + click: async function () { + if (!disable) { + fireEvent('onClick'); + } + }, + setText: async function (text) { + setLabel(text); + setExposedVariable('buttonText', text); + }, + disable: async function (value) { + setDisable(value); + }, + visibility: async function (value) { + setVisibility(value); + }, + loading: async function (value) { + setLoading(value); + }, + }; - setExposedVariables(exposedVariables); + setExposedVariables(exposedVariables); + } // eslint-disable-next-line react-hooks/exhaustive-deps - }, [disable]); + }, [disable, isEditorReady]); useEffect(() => { setExposedVariable('setLoading', async function (loading) { diff --git a/frontend/src/Editor/Components/Chart.jsx b/frontend/src/Editor/Components/Chart.jsx index 3b83b0f3e4..e77000cd85 100644 --- a/frontend/src/Editor/Components/Chart.jsx +++ b/frontend/src/Editor/Components/Chart.jsx @@ -18,6 +18,7 @@ export const Chart = function Chart({ setExposedVariable, setExposedVariables, dataCy, + isEditorReady, }) { const [loadingState, setLoadingState] = useState(false); @@ -80,8 +81,9 @@ export const Chart = function Chart({ xAxisTitle: xAxisTitle, yAxisTitle: yAxisTitle, }; - setExposedVariables(exposedVariables); - }, [JSON.stringify(chartLayout, chartTitle)]); + if (isEditorReady) setExposedVariables(exposedVariables); + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [JSON.stringify(chartLayout, chartTitle), isEditorReady]); const layout = { width: width - 4, diff --git a/frontend/src/Editor/Components/Checkbox.jsx b/frontend/src/Editor/Components/Checkbox.jsx index bce29bad1f..9e7842d976 100644 --- a/frontend/src/Editor/Components/Checkbox.jsx +++ b/frontend/src/Editor/Components/Checkbox.jsx @@ -14,6 +14,7 @@ export const Checkbox = ({ component, validate, width, + isEditorReady, }) => { const defaultValueFromProperties = properties.defaultValue ?? false; const [defaultValue, setDefaultValue] = useState(defaultValueFromProperties); @@ -68,10 +69,10 @@ export const Checkbox = ({ setDefaultValue(defaultValueFromProperties); setChecked(defaultValueFromProperties); setValue(defaultValueFromProperties); - setExposedVariables(exposedVariables); + if (isEditorReady) setExposedVariables(exposedVariables); // eslint-disable-next-line react-hooks/exhaustive-deps - }, [defaultValueFromProperties]); + }, [defaultValueFromProperties, isEditorReady]); useEffect(() => { if (disable !== disabledState) setDisable(properties.disabledState); diff --git a/frontend/src/Editor/Components/ColorPicker.jsx b/frontend/src/Editor/Components/ColorPicker.jsx index 6e4c3d682a..eeadc3c339 100644 --- a/frontend/src/Editor/Components/ColorPicker.jsx +++ b/frontend/src/Editor/Components/ColorPicker.jsx @@ -11,6 +11,7 @@ export const ColorPicker = function ({ height, fireEvent, dataCy, + isEditorReady, }) { const { visibility, boxShadow } = styles; const defaultColor = properties.defaultColor; @@ -57,8 +58,9 @@ export const ColorPicker = function ({ selectedColorRGB: hexToRgb(colorCode), selectedColorRGBA: hexToRgba(colorCode), }; - setExposedVariables(exposedVariables); - + if (isEditorReady) { + setExposedVariables(exposedVariables); + } fireEvent('onChange'); } } else { @@ -67,14 +69,15 @@ export const ColorPicker = function ({ selectedColorRGB: undefined, selectedColorRGBA: undefined, }; - setExposedVariables(exposedVariables); - + if (isEditorReady) { + setExposedVariables(exposedVariables); + } fireEvent('onChange'); setColor('Invalid Color'); } }); // eslint-disable-next-line react-hooks/exhaustive-deps - }, [setColor]); + }, [setColor, isEditorReady]); useEffect(() => { let exposedVariables = {}; @@ -85,8 +88,9 @@ export const ColorPicker = function ({ selectedColorRGB: hexToRgb(defaultColor), selectedColorRGBA: hexToRgba(defaultColor), }; - setExposedVariables(exposedVariables); - + if (isEditorReady) { + setExposedVariables(exposedVariables); + } setColor(defaultColor); } } else { @@ -95,12 +99,13 @@ export const ColorPicker = function ({ selectedColorRGB: undefined, selectedColorRGBA: undefined, }; - setExposedVariables(exposedVariables); - + if (isEditorReady) { + setExposedVariables(exposedVariables); + } setColor(`Invalid Color`); } // eslint-disable-next-line react-hooks/exhaustive-deps - }, [defaultColor]); + }, [defaultColor, isEditorReady]); const handleColorChange = (colorCode) => { let exposedVariables = {}; @@ -113,7 +118,9 @@ export const ColorPicker = function ({ selectedColorRGB: `rgb(${r},${g},${b})`, selectedColorRGBA: `rgb(${r},${g},${b},${a})`, }; - setExposedVariables(exposedVariables); + if (isEditorReady) { + setExposedVariables(exposedVariables); + } fireEvent('onChange'); } }; diff --git a/frontend/src/Editor/Components/DropdownV2/DropdownV2.jsx b/frontend/src/Editor/Components/DropdownV2/DropdownV2.jsx index 5cb6394036..d64a9ce698 100644 --- a/frontend/src/Editor/Components/DropdownV2/DropdownV2.jsx +++ b/frontend/src/Editor/Components/DropdownV2/DropdownV2.jsx @@ -58,6 +58,7 @@ export const DropdownV2 = ({ component, exposedVariables, dataCy, + isEditorReady, }) => { const { label, @@ -225,8 +226,11 @@ export const DropdownV2 = ({ setIsDropdownDisabled(value); }, }; - setExposedVariables(exposedVariables); - }, []); + + if (isEditorReady) { + setExposedVariables(exposedVariables); + } + }, [isEditorReady]); const customStyles = { container: (base) => ({ diff --git a/frontend/src/Editor/Components/Form/Form.jsx b/frontend/src/Editor/Components/Form/Form.jsx index 7426dd365d..51babaa340 100644 --- a/frontend/src/Editor/Components/Form/Form.jsx +++ b/frontend/src/Editor/Components/Form/Form.jsx @@ -38,6 +38,7 @@ export const Form = function Form(props) { getContainerProps, containerProps, childComponents, + isEditorReady, } = props; const { events: allAppEvents } = useAppInfo(); @@ -132,7 +133,9 @@ export const Form = function Form(props) { ...(!advanced && { children: formattedChildData }), }; - setExposedVariables(exposedVariables); + if (isEditorReady) { + setExposedVariables(exposedVariables); + } return setValidation(childValidation); } @@ -158,9 +161,10 @@ export const Form = function Form(props) { isValid: childValidation, }; setValidation(childValidation); - setExposedVariables(exposedVariables); - // eslint-disable-next-line react-hooks/exhaustive-deps - }, [childrenData, childComponents, advanced, JSON.stringify(JSONSchema)]); + if (isEditorReady) { + setExposedVariables(exposedVariables); + } // eslint-disable-next-line react-hooks/exhaustive-deps + }, [childrenData, childComponents, advanced, JSON.stringify(JSONSchema), isEditorReady]); useEffect(() => { const childIds = Object.keys(childrenData); diff --git a/frontend/src/Editor/Components/Icon.jsx b/frontend/src/Editor/Components/Icon.jsx index cec0bbb348..6edcf75477 100644 --- a/frontend/src/Editor/Components/Icon.jsx +++ b/frontend/src/Editor/Components/Icon.jsx @@ -9,11 +9,11 @@ export const Icon = ({ fireEvent, width, height, - setExposedVariable, setExposedVariables, darkMode, dataCy, component, + isEditorReady, }) => { const { icon } = properties; const { iconColor, visibility, boxShadow } = styles; @@ -40,9 +40,11 @@ export const Icon = ({ fireEvent('onClick'); }, }; - setExposedVariables(exposedVariables); + if (isEditorReady) { + setExposedVariables(exposedVariables); + } // eslint-disable-next-line react-hooks/exhaustive-deps - }, [setIconVisibility]); + }, [setIconVisibility, isEditorReady]); return (
{ - const { height, width, properties, styles, id, mode } = props; + const { height, width, properties, styles, id, mode, isEditorReady } = props; const { showDeleteButton } = properties; const { visibility, disabledState, boxShadow } = styles; diff --git a/frontend/src/Editor/Components/Kanban/KanbanBoard.jsx b/frontend/src/Editor/Components/Kanban/KanbanBoard.jsx index 433eca7ac3..9f9beb7265 100644 --- a/frontend/src/Editor/Components/Kanban/KanbanBoard.jsx +++ b/frontend/src/Editor/Components/Kanban/KanbanBoard.jsx @@ -38,7 +38,7 @@ const dropAnimation = { const TRASH_ID = 'void'; export function KanbanBoard({ widgetHeight, kanbanProps, parentRef, mode, id }) { - const { properties, fireEvent, setExposedVariable, setExposedVariables, styles } = kanbanProps; + const { properties, fireEvent, setExposedVariable, setExposedVariables, styles, isEditorReady } = kanbanProps; const { columnData, cardData, cardWidth, cardHeight, showDeleteButton, enableAddCard } = properties; const { accentColor } = styles; const [lastSelectedCard, setLastSelectedCard] = useState({}); @@ -112,17 +112,20 @@ export function KanbanBoard({ widgetHeight, kanbanProps, parentRef, mode, id }) cardDataAsObj[cardId] = value; const diffKeys = Object.keys(diff(cardToBeUpdated, value)); if (lastSelectedCard?.id === cardId) { - setExposedVariables({ - lastSelectedCard: cardDataAsObj[cardId], + if (isEditorReady) { + setExposedVariables({ + lastSelectedCard: cardDataAsObj[cardId], + + lastUpdatedCard: cardDataAsObj[cardId], + lastCardUpdate: diffKeys.map((key) => { + return { + [key]: { oldValue: cardToBeUpdated[key], newValue: value[key] }, + }; + }), + updatedCardData: getData(cardDataAsObj), + }); + } - lastUpdatedCard: cardDataAsObj[cardId], - lastCardUpdate: diffKeys.map((key) => { - return { - [key]: { oldValue: cardToBeUpdated[key], newValue: value[key] }, - }; - }), - updatedCardData: getData(cardDataAsObj), - }); fireEvent('onUpdate'); } else { setExposedVariable('updatedCardData', getData(cardDataAsObj)); @@ -130,7 +133,7 @@ export function KanbanBoard({ widgetHeight, kanbanProps, parentRef, mode, id }) } }); // eslint-disable-next-line react-hooks/exhaustive-deps - }, [lastSelectedCard, JSON.stringify(cardDataAsObj)]); + }, [lastSelectedCard, JSON.stringify(cardDataAsObj), isEditorReady]); useEffect(() => { setExposedVariable('moveCard', async function (cardId, columnId) { @@ -169,11 +172,13 @@ export function KanbanBoard({ widgetHeight, kanbanProps, parentRef, mode, id }) ...items, [columnId]: [...items[columnId], cardDetails.id], })); - setExposedVariables({ lastAddedCard: { ...cardDetails }, updatedCardData: getData(cardDataAsObj) }); + if (isEditorReady) { + setExposedVariables({ lastAddedCard: { ...cardDetails }, updatedCardData: getData(cardDataAsObj) }); + } fireEvent('onCardAdded'); }); // eslint-disable-next-line react-hooks/exhaustive-deps - }, [items, JSON.stringify(cardDataAsObj)]); + }, [items, JSON.stringify(cardDataAsObj), isEditorReady]); useEffect(() => { setExposedVariable('deleteCard', async function (cardId) { @@ -186,11 +191,13 @@ export function KanbanBoard({ widgetHeight, kanbanProps, parentRef, mode, id }) ...items, [columnId]: items[columnId].filter((id) => id !== cardId), })); - setExposedVariables({ lastRemovedCard: { ...deletedCard }, updatedCardData: getData(cardDataAsObj) }); + if (isEditorReady) { + setExposedVariables({ lastRemovedCard: { ...deletedCard }, updatedCardData: getData(cardDataAsObj) }); + } fireEvent('onCardRemoved'); }); // eslint-disable-next-line react-hooks/exhaustive-deps - }, [showModal, JSON.stringify(cardDataAsObj)]); + }, [showModal, JSON.stringify(cardDataAsObj), isEditorReady]); const [clonedItems, setClonedItems] = useState(null); const sensors = useSensors( diff --git a/frontend/src/Editor/Components/Listview.jsx b/frontend/src/Editor/Components/Listview.jsx index 99efcf9cca..f7f4673ab3 100644 --- a/frontend/src/Editor/Components/Listview.jsx +++ b/frontend/src/Editor/Components/Listview.jsx @@ -19,6 +19,7 @@ export const Listview = function Listview({ darkMode, dataCy, childComponents, + isEditorReady, }) { const fallbackProperties = { height: 100, showBorder: false, data: [] }; const fallbackStyles = { visibility: true, disabledState: false }; @@ -58,7 +59,9 @@ export const Listview = function Listview({ selectedRecordId: index, selectedRecord: childrenData[index], }; - setExposedVariables(exposedVariables); + if (isEditorReady) { + setExposedVariables(exposedVariables); + } fireEvent('onRecordClicked'); // eslint-disable-next-line react-hooks/exhaustive-deps } @@ -68,7 +71,9 @@ export const Listview = function Listview({ selectedRowId: index, selectedRow: childrenData[index], }; - setExposedVariables(exposedVariables); + if (isEditorReady) { + setExposedVariables(exposedVariables); + } fireEvent('onRowClicked'); // eslint-disable-next-line react-hooks/exhaustive-deps } @@ -85,16 +90,20 @@ export const Listview = function Listview({ data: removeFunctionObjects(childrenDataClone), children: childrenData, }; - setExposedVariables(exposedVariables); + if (isEditorReady) { + setExposedVariables(exposedVariables); + } if (selectedRowIndex != undefined) { const exposedVariables = { selectedRowId: selectedRowIndex, selectedRow: childrenData[selectedRowIndex], }; - setExposedVariables(exposedVariables); + if (isEditorReady) { + setExposedVariables(exposedVariables); + } } // eslint-disable-next-line react-hooks/exhaustive-deps - }, [childrenData, childComponents]); + }, [childrenData, childComponents, isEditorReady]); function filterComponents() { if (!childrenData || childrenData.length === 0) { diff --git a/frontend/src/Editor/Components/Modal.jsx b/frontend/src/Editor/Components/Modal.jsx index e9bddfab21..83eb52a7eb 100644 --- a/frontend/src/Editor/Components/Modal.jsx +++ b/frontend/src/Editor/Components/Modal.jsx @@ -20,6 +20,7 @@ export const Modal = function Modal({ dataCy, height, mode, + isEditorReady, }) { const [showModal, setShowModal] = useState(false); @@ -77,9 +78,10 @@ export const Modal = function Modal({ setExposedVariable('show', false); }, }; - setExposedVariables(exposedVariables); - // eslint-disable-next-line react-hooks/exhaustive-deps - }, [setShowModal]); + if (isEditorReady) { + setExposedVariables(exposedVariables); + } // eslint-disable-next-line react-hooks/exhaustive-deps + }, [setShowModal, isEditorReady]); useEffect(() => { if (isInitialRender.current) { diff --git a/frontend/src/Editor/Components/Multiselect.jsx b/frontend/src/Editor/Components/Multiselect.jsx index 2c57edf8aa..8b2db437ca 100644 --- a/frontend/src/Editor/Components/Multiselect.jsx +++ b/frontend/src/Editor/Components/Multiselect.jsx @@ -22,6 +22,7 @@ export const Multiselect = function Multiselect({ darkMode, fireEvent, dataCy, + isEditorReady, }) { const { label, value, values, display_values, showAllOption } = properties; const { borderRadius, visibility, disabledState, boxShadow } = styles; @@ -124,10 +125,11 @@ export const Multiselect = function Multiselect({ }, }; - setExposedVariables(exposedVariables); - + if (isEditorReady) { + setExposedVariables(exposedVariables); + } // eslint-disable-next-line react-hooks/exhaustive-deps - }, [selected, setSelected]); + }, [selected, setSelected, isEditorReady]); const filterOptions = (options, filter) => { setSearched(filter); diff --git a/frontend/src/Editor/Components/MultiselectV2/MultiselectV2.jsx b/frontend/src/Editor/Components/MultiselectV2/MultiselectV2.jsx index 016f01ec9c..0d506b5ca2 100644 --- a/frontend/src/Editor/Components/MultiselectV2/MultiselectV2.jsx +++ b/frontend/src/Editor/Components/MultiselectV2/MultiselectV2.jsx @@ -27,7 +27,7 @@ export const MultiselectV2 = ({ darkMode, fireEvent, validate, - width, + isEditorReady, }) => { let { label, @@ -177,8 +177,10 @@ export const MultiselectV2 = ({ setIsMultiSelectDisabled(value); }, }; - setExposedVariables(exposedVariables); - }, []); + if (isEditorReady) { + setExposedVariables(exposedVariables); + } + }, [isEditorReady]); useEffect(() => { // Expose selectOption diff --git a/frontend/src/Editor/Components/RadioButton.jsx b/frontend/src/Editor/Components/RadioButton.jsx index 51d19d8cbb..a5f74cde19 100644 --- a/frontend/src/Editor/Components/RadioButton.jsx +++ b/frontend/src/Editor/Components/RadioButton.jsx @@ -11,6 +11,7 @@ export const RadioButton = function RadioButton({ setExposedVariables, darkMode, dataCy, + isEditorReady, }) { const { label, value, values, display_values } = properties; const { visibility, disabledState, activeColor, boxShadow } = styles; @@ -43,9 +44,10 @@ export const RadioButton = function RadioButton({ onSelect(option); }, }; - setExposedVariables(exposedVariables); - // eslint-disable-next-line react-hooks/exhaustive-deps - }, [value, setValue]); + if (isEditorReady) { + setExposedVariables(exposedVariables); + } // eslint-disable-next-line react-hooks/exhaustive-deps + }, [value, setValue, isEditorReady]); return (
{ - setExposedVariables({ - currentData: tableData, - updatedData: tableData, - }); - }, [JSON.stringify(tableData)]); + if (isEditorReady) { + setExposedVariables({ + currentData: tableData, + updatedData: tableData, + }); + } + }, [JSON.stringify(tableData), isEditorReady]); const columnDataForAddNewRows = generateColumnsData({ columnProperties: useDynamicColumn ? generatedColumn : component.definition.properties.columns.value, @@ -775,7 +778,7 @@ export function Table({ fireEvent('onRowClicked'); } }); - }, [JSON.stringify(tableData), JSON.stringify(tableDetails.selectedRow)]); + }, [JSON.stringify(tableData), JSON.stringify(tableDetails.selectedRow), isEditorReady]); useEffect(() => { setExposedVariable('deselectRow', async function () { @@ -787,7 +790,7 @@ export function Table({ } return; }); - }, [JSON.stringify(tableData), JSON.stringify(tableDetails.selectedRow)]); + }, [JSON.stringify(tableData), JSON.stringify(tableDetails.selectedRow), isEditorReady]); useEffect(() => { setExposedVariable('discardChanges', async function () { @@ -799,7 +802,7 @@ export function Table({ mergeToTableDetails({ dataUpdates: {}, changeSet: {} }); } }); - }, [JSON.stringify(tableData), JSON.stringify(tableDetails.changeSet)]); + }, [JSON.stringify(tableData), JSON.stringify(tableDetails.changeSet), isEditorReady]); useEffect(() => { setExposedVariable('discardNewlyAddedRows', async function () { @@ -818,6 +821,7 @@ export function Table({ JSON.stringify(tableDetails.addNewRowsDetails.newRowsChangeSet), tableDetails.addNewRowsDetails.addingNewRows, JSON.stringify(tableDetails.addNewRowsDetails.newRowsDataUpdates), + isEditorReady, ]); useEffect(() => { @@ -841,7 +845,7 @@ export function Table({ setExposedVariables({ selectedRow, selectedRowId }); mergeToTableDetails({ selectedRow, selectedRowId }); } - }, [selectedFlatRows.length, selectedFlatRows]); + }, [selectedFlatRows.length, selectedFlatRows, isEditorReady]); useEffect(() => { setExposedVariable('downloadTableData', async function (format) { @@ -855,7 +859,7 @@ export function Table({ mergeToTableDetails({ selectedRowsDetails: [], selectedRow: {}, selectedRowId: null }); toggleAllRowsSelected(false); } - }, [showBulkSelector, highlightSelectedRow, allowSelection]); + }, [showBulkSelector, highlightSelectedRow, allowSelection, isEditorReady]); React.useEffect(() => { if (enablePagination) { @@ -971,7 +975,7 @@ export function Table({ } //hack : in the initial render, data is undefined since, upon feeding data to the table from some query, query inside current state is {}. Hence we added data in the dependency array, now question is should we add data or rows? - }, [JSON.stringify(defaultSelectedRow), JSON.stringify(data)]); + }, [JSON.stringify(defaultSelectedRow), JSON.stringify(data), isEditorReady]); useEffect(() => { // csa for select all rows in table diff --git a/frontend/src/Editor/Components/Tabs.jsx b/frontend/src/Editor/Components/Tabs.jsx index fd490fd312..cf6770b78b 100644 --- a/frontend/src/Editor/Components/Tabs.jsx +++ b/frontend/src/Editor/Components/Tabs.jsx @@ -17,6 +17,7 @@ export const Tabs = function Tabs({ styles, darkMode, dataCy, + isEditorReady, }) { const { tabWidth, boxShadow } = styles; @@ -103,10 +104,11 @@ export const Tabs = function Tabs({ }, currentTab: currentTab, }; - setExposedVariables(exposedVariables); - + if (isEditorReady) { + setExposedVariables(exposedVariables); + } // eslint-disable-next-line react-hooks/exhaustive-deps - }, [setCurrentTab, currentTab]); + }, [setCurrentTab, currentTab, isEditorReady]); const renderTabContent = (id, tab) => (
{ const exposedVariables = { @@ -189,9 +189,9 @@ export const TextInput = function TextInput({ fireEvent('onChange'); }, }; - setExposedVariables(exposedVariables); + if (isEditorReady) setExposedVariables(exposedVariables); // eslint-disable-next-line react-hooks/exhaustive-deps - }, [setValue]); + }, [setValue, isEditorReady]); 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]; diff --git a/frontend/src/Editor/Components/TreeSelect.jsx b/frontend/src/Editor/Components/TreeSelect.jsx index c66202637b..08f7456bb1 100644 --- a/frontend/src/Editor/Components/TreeSelect.jsx +++ b/frontend/src/Editor/Components/TreeSelect.jsx @@ -14,6 +14,7 @@ export const TreeSelect = ({ fireEvent, darkMode, dataCy, + isEditorReady, }) => { const { label } = properties; const { visibility, disabledState, checkboxColor, boxShadow } = styles; @@ -51,10 +52,11 @@ export const TreeSelect = ({ checkedPathStrings: checkedPathString, checked: checkedArr, }; - setExposedVariables(exposedVariables); - + if (isEditorReady) { + setExposedVariables(exposedVariables); + } // eslint-disable-next-line react-hooks/exhaustive-deps - }, [JSON.stringify(checkedData), JSON.stringify(data)]); + }, [JSON.stringify(checkedData), JSON.stringify(data), isEditorReady]); useEffect(() => { setExposedVariable('expanded', expandedData); @@ -90,8 +92,9 @@ export const TreeSelect = ({ checkedPathStrings: checkedPathString, checked: checked, }; - setExposedVariables(exposedVariables); - + if (isEditorReady) { + setExposedVariables(exposedVariables); + } updatedNode.checked ? fireEvent('onCheck') : fireEvent('onUnCheck'); fireEvent('onChange'); setChecked(checked); diff --git a/frontend/src/Editor/ControlledComponentToRender.jsx b/frontend/src/Editor/ControlledComponentToRender.jsx index 4a9664bf5a..0471bef462 100644 --- a/frontend/src/Editor/ControlledComponentToRender.jsx +++ b/frontend/src/Editor/ControlledComponentToRender.jsx @@ -16,7 +16,6 @@ export const shouldUpdate = (prevProps, nextProps) => { if (componentId) { const componentToRender = listToRender.find((item) => item === componentId); - const parentReRendered = listToRender.find((item) => item === prevProps?.parentId); const grandParentReRendered = listToRender.find((item) => item === prevProps?.grandParentId); @@ -26,7 +25,7 @@ export const shouldUpdate = (prevProps, nextProps) => { } } - // Added to render the defaukt child components + // Added to render the default child components if (prevProps?.childComponents === null && nextProps?.childComponents) return false; return ( @@ -39,6 +38,7 @@ export const shouldUpdate = (prevProps, nextProps) => { prevProps?.height === nextProps?.height && prevProps?.darkMode === nextProps?.darkMode && prevProps?.childComponents === nextProps?.childComponents && + prevProps?.isEditorReady === nextProps?.isEditorReady && !needToRender ); };