mirror of
https://github.com/ToolJet/ToolJet
synced 2026-05-23 08:58:26 +00:00
new editor and removed all references
This commit is contained in:
arpitnath
parent
a2a47a1862
commit
f1211ef595
18 changed files with 1557 additions and 119 deletions
|
|
@ -54,8 +54,11 @@ export const Container = ({
|
|||
backgroundSize: `${gridWidth}px 10px`,
|
||||
};
|
||||
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
const components = appDefinition.pages[currentPageId]?.components ?? {};
|
||||
const components = useMemo(
|
||||
() => appDefinition.pages[currentPageId]?.components ?? {},
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
[appDefinition.pages[currentPageId]]
|
||||
);
|
||||
const currentState = useCurrentState();
|
||||
const { appVersionsId, enableReleasedVersionPopupState, isVersionReleased } = useAppVersionStore(
|
||||
(state) => ({
|
||||
|
|
@ -87,10 +90,12 @@ export const Container = ({
|
|||
useHotkeys('meta+shift+z, control+shift+z', () => handleRedo());
|
||||
useHotkeys(
|
||||
'meta+v, control+v',
|
||||
() => {
|
||||
async () => {
|
||||
if (isContainerFocused && !isVersionReleased) {
|
||||
navigator.clipboard.readText().then((cliptext) => {
|
||||
// Check if the clipboard API is available
|
||||
if (navigator.clipboard && typeof navigator.clipboard.readText === 'function') {
|
||||
try {
|
||||
const cliptext = await navigator.clipboard.readText();
|
||||
addComponents(
|
||||
currentPageId,
|
||||
appDefinition,
|
||||
|
|
@ -101,7 +106,9 @@ export const Container = ({
|
|||
} catch (err) {
|
||||
console.log(err);
|
||||
}
|
||||
});
|
||||
} else {
|
||||
console.log('Clipboard API is not available in this browser.');
|
||||
}
|
||||
}
|
||||
enableReleasedVersionPopupState();
|
||||
},
|
||||
|
|
|
|||
|
|
@ -46,12 +46,13 @@ import { ReleasedVersionError } from './AppVersionsManager/ReleasedVersionError'
|
|||
import { useDataSourcesStore } from '@/_stores/dataSourcesStore';
|
||||
import { useDataQueriesStore } from '@/_stores/dataQueriesStore';
|
||||
import { useAppVersionStore } from '@/_stores/appVersionStore';
|
||||
import { useEditorStore } from '@/_stores/editorStore';
|
||||
import { useEditorState, useEditorStore } from '@/_stores/editorStore';
|
||||
import { useQueryPanelStore } from '@/_stores/queryPanelStore';
|
||||
import { useCurrentStateStore, useCurrentState } from '@/_stores/currentStateStore';
|
||||
import { resetAllStores } from '@/_stores/utils';
|
||||
import { setCookie } from '@/_helpers/cookie';
|
||||
import { shallow } from 'zustand/shallow';
|
||||
import { useAppDataActions, useAppDataStore } from '@/_stores/appDataStore';
|
||||
|
||||
setAutoFreeze(false);
|
||||
enablePatches();
|
||||
|
|
@ -110,7 +111,7 @@ class EditorComponent extends React.Component {
|
|||
deviceWindowWidth: 450,
|
||||
appDefinition: this.defaultDefinition,
|
||||
apps: [],
|
||||
queryConfirmationList: [],
|
||||
// queryConfirmationList: [],
|
||||
isSourceSelected: false,
|
||||
isSaving: false,
|
||||
isUnsavedQueriesAvailable: false,
|
||||
|
|
@ -124,6 +125,8 @@ class EditorComponent extends React.Component {
|
|||
|
||||
this.autoSave = debounce(this.saveEditingVersion, 3000);
|
||||
this.realtimeSave = debounce(this.appDefinitionChanged, 500);
|
||||
|
||||
this.appActions = useAppDataStore.getState().actions;
|
||||
}
|
||||
|
||||
setWindowTitle(name) {
|
||||
|
|
@ -145,6 +148,9 @@ class EditorComponent extends React.Component {
|
|||
groups: currentSession.group_permissions?.map((group) => group.group),
|
||||
};
|
||||
this.setState({ currentUser });
|
||||
|
||||
this.appActions.updateCurrentUser(userVars);
|
||||
|
||||
useCurrentStateStore.getState().actions.setCurrentState({
|
||||
globals: {
|
||||
...this.props.currentState.globals,
|
||||
|
|
@ -176,7 +182,7 @@ class EditorComponent extends React.Component {
|
|||
this.getCurrentOrganizationDetails();
|
||||
this.autoSave();
|
||||
this.fetchApps(0);
|
||||
this.fetchApp(this.props.params.pageHandle);
|
||||
await this.fetchApp(this.props.params.pageHandle);
|
||||
await this.fetchOrgEnvironmentVariables();
|
||||
this.initComponentVersioning();
|
||||
this.initRealtimeSave();
|
||||
|
|
@ -200,6 +206,7 @@ class EditorComponent extends React.Component {
|
|||
handle: this.props.pageHandle,
|
||||
variables: {},
|
||||
};
|
||||
this.appActions.updateState({ appId: this.props.params.id });
|
||||
useCurrentStateStore.getState().actions.setCurrentState({ globals, page });
|
||||
}
|
||||
|
||||
|
|
@ -241,7 +248,7 @@ class EditorComponent extends React.Component {
|
|||
|
||||
componentDidUpdate(prevProps, prevState) {
|
||||
if (!isEqual(prevState.appDefinition, this.state.appDefinition)) {
|
||||
computeComponentState(this, this.state.appDefinition.pages[this.state.currentPageId]?.components);
|
||||
computeComponentState(this.state.appDefinition.pages[this.state.currentPageId]?.components);
|
||||
}
|
||||
|
||||
if (!isEqual(prevState.editorMarginLeft, this.state.editorMarginLeft)) {
|
||||
|
|
@ -300,11 +307,8 @@ class EditorComponent extends React.Component {
|
|||
|
||||
// eslint-disable-next-line no-unused-vars
|
||||
appService.setMaintenance(this.state.app.id, newState).then((data) => {
|
||||
this.setState({
|
||||
app: {
|
||||
...this.state.app,
|
||||
is_maintenance_on: newState,
|
||||
},
|
||||
this.appActions.updateState({
|
||||
isMaintenanceOn: newState,
|
||||
});
|
||||
|
||||
if (newState) {
|
||||
|
|
@ -316,11 +320,12 @@ class EditorComponent extends React.Component {
|
|||
};
|
||||
|
||||
fetchApps = (page) => {
|
||||
appService.getAll(page).then((data) =>
|
||||
appService.getAll(page).then((data) => {
|
||||
this.appActions.updateState({ apps: data.apps.map((app) => ({ id: app.id, name: app.name, slug: app.slug })) });
|
||||
this.setState({
|
||||
apps: data.apps,
|
||||
})
|
||||
);
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
fetchApp = (startingPageHandle) => {
|
||||
|
|
@ -333,6 +338,15 @@ class EditorComponent extends React.Component {
|
|||
const startingPageId = pages.filter((page) => page.handle === startingPageHandle)[0]?.id;
|
||||
const homePageId = startingPageId ?? dataDefinition.homePageId;
|
||||
|
||||
this.appActions.updateState({
|
||||
slug: data.slug,
|
||||
isMaintenanceOn: data?.is_maintenance_on,
|
||||
organizationId: data?.organization_id,
|
||||
isPublic: data?.is_public,
|
||||
appName: data?.name,
|
||||
userId: data?.user_id,
|
||||
});
|
||||
|
||||
useCurrentStateStore.getState().actions.setCurrentState({
|
||||
page: {
|
||||
handle: dataDefinition.pages[homePageId]?.handle,
|
||||
|
|
@ -343,6 +357,7 @@ class EditorComponent extends React.Component {
|
|||
});
|
||||
useAppVersionStore.getState().actions.updateEditingVersion(data.editing_version);
|
||||
useAppVersionStore.getState().actions.updateReleasedVersionId(data.current_version_id);
|
||||
|
||||
this.setState(
|
||||
{
|
||||
app: data,
|
||||
|
|
@ -353,7 +368,7 @@ class EditorComponent extends React.Component {
|
|||
},
|
||||
|
||||
async () => {
|
||||
computeComponentState(this, this.state.appDefinition.pages[homePageId]?.components ?? {}).then(async () => {
|
||||
computeComponentState(this.state.appDefinition.pages[homePageId]?.components ?? {}).then(async () => {
|
||||
this.setWindowTitle(data.name);
|
||||
|
||||
useEditorStore.getState().actions.setShowComments(!!queryString.parse(this.props.location.search).threadId);
|
||||
|
|
@ -425,7 +440,7 @@ class EditorComponent extends React.Component {
|
|||
this.socket?.send(
|
||||
JSON.stringify({
|
||||
event: 'events',
|
||||
data: { message: 'dataSourcesChanged', appId: this.state.appId },
|
||||
data: { message: 'dataSourcesChanged', appId: this.state.app?.id },
|
||||
})
|
||||
);
|
||||
} else {
|
||||
|
|
@ -445,7 +460,7 @@ class EditorComponent extends React.Component {
|
|||
this.socket?.send(
|
||||
JSON.stringify({
|
||||
event: 'events',
|
||||
data: { message: 'dataQueriesChanged', appId: this.state.appId },
|
||||
data: { message: 'dataQueriesChanged', appId: this.state.app?.id },
|
||||
})
|
||||
);
|
||||
} else {
|
||||
|
|
@ -601,10 +616,6 @@ class EditorComponent extends React.Component {
|
|||
this.switchSidebarTab(2);
|
||||
};
|
||||
|
||||
handleSlugChange = (newSlug) => {
|
||||
this.setState({ slug: newSlug });
|
||||
};
|
||||
|
||||
removeComponents = () => {
|
||||
if (!this.props.isVersionReleased && this.state?.selectedComponents?.length > 1) {
|
||||
let newDefinition = cloneDeep(this.state.appDefinition);
|
||||
|
|
@ -695,7 +706,7 @@ class EditorComponent extends React.Component {
|
|||
this.handleAddPatch
|
||||
);
|
||||
setStateAsync(_self, newDefinition).then(() => {
|
||||
computeComponentState(_self, _self.state.appDefinition.pages[currentPageId].components);
|
||||
computeComponentState(_self.state.appDefinition.pages[currentPageId].components);
|
||||
this.setState({ isSaving: true, appDefinitionLocalVersion: uuid() });
|
||||
this.autoSave();
|
||||
this.props.ymap?.set('appDef', {
|
||||
|
|
@ -753,17 +764,36 @@ class EditorComponent extends React.Component {
|
|||
|
||||
return;
|
||||
}
|
||||
cloneComponents(this, this.appDefinitionChanged, false, true);
|
||||
cloneComponents(
|
||||
this.state.selectedComponents,
|
||||
this.state.appDefinition,
|
||||
this.state.currentPageId,
|
||||
this.appDefinitionChanged,
|
||||
false
|
||||
);
|
||||
};
|
||||
|
||||
copyComponents = () => cloneComponents(this, this.appDefinitionChanged, false);
|
||||
copyComponents = () =>
|
||||
cloneComponents(
|
||||
this.state.selectedComponents,
|
||||
this.state.appDefinition,
|
||||
this.state.currentPageId,
|
||||
this.appDefinitionChanged,
|
||||
false
|
||||
);
|
||||
|
||||
cloneComponents = () => {
|
||||
if (this.props.isVersionReleased) {
|
||||
useAppVersionStore.getState().actions.enableReleasedVersionPopupState();
|
||||
return;
|
||||
}
|
||||
cloneComponents(this, this.appDefinitionChanged, true);
|
||||
cloneComponents(
|
||||
this.state.selectedComponents,
|
||||
this.state.appDefinition,
|
||||
this.state.currentPageId,
|
||||
this.appDefinitionChanged,
|
||||
true
|
||||
);
|
||||
};
|
||||
|
||||
decimalToHex = (alpha) => (alpha === 0 ? '00' : Math.round(255 * alpha).toString(16));
|
||||
|
|
@ -828,7 +858,7 @@ class EditorComponent extends React.Component {
|
|||
this.socket.send(
|
||||
JSON.stringify({
|
||||
event: 'events',
|
||||
data: { message: 'versionReleased', appId: this.state.appId },
|
||||
data: { message: 'versionReleased', appId: this.state.app?.id },
|
||||
})
|
||||
);
|
||||
}
|
||||
|
|
@ -869,7 +899,7 @@ class EditorComponent extends React.Component {
|
|||
} else if (!isEmpty(this.props?.editingVersion)) {
|
||||
appVersionService
|
||||
.save(
|
||||
this.state.appId,
|
||||
this.state.app?.id,
|
||||
this.props.editingVersion?.id,
|
||||
{ definition: this.state.appDefinition },
|
||||
isUserSwitchedVersion
|
||||
|
|
@ -900,7 +930,7 @@ class EditorComponent extends React.Component {
|
|||
};
|
||||
|
||||
handleOnComponentOptionChanged = (component, optionName, value) => {
|
||||
return onComponentOptionChanged(this, component, optionName, value);
|
||||
return onComponentOptionChanged(component, optionName, value);
|
||||
};
|
||||
|
||||
handleOnComponentOptionsChanged = (component, options) => {
|
||||
|
|
@ -923,10 +953,10 @@ class EditorComponent extends React.Component {
|
|||
|
||||
sideBarDebugger = {
|
||||
error: (data) => {
|
||||
debuggerActions.error(this, data);
|
||||
debuggerActions.error(data);
|
||||
},
|
||||
flush: () => {
|
||||
debuggerActions.flush(this);
|
||||
debuggerActions.flush();
|
||||
},
|
||||
generateErrorLogs: (errors) => debuggerActions.generateErrorLogs(errors),
|
||||
};
|
||||
|
|
@ -1359,7 +1389,7 @@ class EditorComponent extends React.Component {
|
|||
|
||||
const queryParamsString = queryParams.map(([key, value]) => `${key}=${value}`).join('&');
|
||||
|
||||
this.props.navigate(`/${getWorkspaceId()}/apps/${this.state.appId}/${handle}?${queryParamsString}`);
|
||||
this.props.navigate(`/${getWorkspaceId()}/apps/${this.state.app?.id}/${handle}?${queryParamsString}`);
|
||||
|
||||
const { globals: existingGlobals } = this.props.currentState;
|
||||
|
||||
|
|
@ -1390,7 +1420,7 @@ class EditorComponent extends React.Component {
|
|||
},
|
||||
() => {
|
||||
// Move this callback to zustand
|
||||
computeComponentState(this, this.state.appDefinition.pages[pageId]?.components ?? {}).then(async () => {
|
||||
computeComponentState(this.state.appDefinition.pages[pageId]?.components ?? {}).then(async () => {
|
||||
for (const event of events ?? []) {
|
||||
await this.handleEvent(event.eventId, event);
|
||||
}
|
||||
|
|
@ -1452,23 +1482,22 @@ class EditorComponent extends React.Component {
|
|||
currentSidebarTab,
|
||||
selectedComponents = [],
|
||||
appDefinition,
|
||||
appId,
|
||||
slug,
|
||||
app,
|
||||
showLeftSidebar,
|
||||
isLoading,
|
||||
zoomLevel,
|
||||
deviceWindowWidth,
|
||||
apps,
|
||||
defaultComponentStateComputed,
|
||||
hoveredComponent,
|
||||
queryConfirmationList,
|
||||
} = this.state;
|
||||
const currentState = this.props?.currentState;
|
||||
const editingVersion = this.props?.editingVersion;
|
||||
const appVersionPreviewLink = editingVersion
|
||||
? `/applications/${app.id}/versions/${editingVersion.id}/${currentState.page.handle}`
|
||||
: '';
|
||||
const appId = app?.id;
|
||||
|
||||
const { queryConfirmationList = [], defaultComponentStateComputed } = this.props;
|
||||
|
||||
return (
|
||||
<div className="editor wrapper">
|
||||
<Confirm
|
||||
|
|
@ -1499,8 +1528,6 @@ class EditorComponent extends React.Component {
|
|||
editingVersion={editingVersion}
|
||||
app={app}
|
||||
appVersionPreviewLink={appVersionPreviewLink}
|
||||
slug={slug}
|
||||
appId={appId}
|
||||
canUndo={this.canUndo}
|
||||
canRedo={this.canRedo}
|
||||
handleUndo={this.handleUndo}
|
||||
|
|
@ -1509,11 +1536,9 @@ class EditorComponent extends React.Component {
|
|||
saveError={this.state.saveError}
|
||||
onNameChanged={this.onNameChanged}
|
||||
setAppDefinitionFromVersion={this.setAppDefinitionFromVersion}
|
||||
handleSlugChange={this.handleSlugChange}
|
||||
onVersionRelease={this.onVersionRelease}
|
||||
saveEditingVersion={this.saveEditingVersion}
|
||||
onVersionDelete={this.onVersionDelete}
|
||||
currentUser={this.state.currentUser}
|
||||
/>
|
||||
<DndProvider backend={HTML5Backend}>
|
||||
<div className="sub-section">
|
||||
|
|
@ -1553,7 +1578,6 @@ class EditorComponent extends React.Component {
|
|||
updateOnPageLoadEvents={this.updateOnPageLoadEvents}
|
||||
showHideViewerNavigationControls={this.showHideViewerNavigation}
|
||||
updateOnSortingPages={this.updateOnSortingPages}
|
||||
apps={apps}
|
||||
setEditorMarginLeft={this.handleEditorMarginLeftChange}
|
||||
/>
|
||||
{!this.props.showComments && (
|
||||
|
|
@ -1691,12 +1715,17 @@ class EditorComponent extends React.Component {
|
|||
dataQueriesChanged={this.dataQueriesChanged}
|
||||
fetchDataQueries={this.fetchDataQueries}
|
||||
darkMode={this.props.darkMode}
|
||||
apps={apps}
|
||||
allComponents={appDefinition.pages[this.state.currentPageId]?.components ?? {}}
|
||||
appId={appId}
|
||||
appDefinition={appDefinition}
|
||||
dataSourceModalHandler={this.dataSourceModalHandler}
|
||||
editorRef={this}
|
||||
editorRef={{
|
||||
appDefinition: this.state.appDefinition,
|
||||
queryConfirmationList,
|
||||
updateQueryConfirmationList: this.props.updateQueryConfirmationList,
|
||||
navigate: this.props.navigate,
|
||||
currentPageId: this.state.currentPageId,
|
||||
}}
|
||||
/>
|
||||
<ReactTooltip id="tooltip-for-add-query" className="tooltip" />
|
||||
</div>
|
||||
|
|
@ -1723,7 +1752,6 @@ class EditorComponent extends React.Component {
|
|||
allComponents={appDefinition.pages[this.state.currentPageId]?.components}
|
||||
key={selectedComponents[0].id}
|
||||
switchSidebarTab={this.switchSidebarTab}
|
||||
apps={apps}
|
||||
darkMode={this.props.darkMode}
|
||||
appDefinitionLocalVersion={this.state.appDefinitionLocalVersion}
|
||||
pages={this.getPagesWithIds()}
|
||||
|
|
@ -1756,13 +1784,17 @@ class EditorComponent extends React.Component {
|
|||
}
|
||||
|
||||
const withStore = (Component) => (props) => {
|
||||
const { showComments, currentLayout } = useEditorStore(
|
||||
const { showComments, currentLayout, queryConfirmationList, defaultComponentStateComputed, actions } = useEditorStore(
|
||||
(state) => ({
|
||||
showComments: state?.showComments,
|
||||
currentLayout: state?.currentLayout,
|
||||
queryConfirmationList: state?.queryConfirmationList,
|
||||
defaultComponentStateComputed: state?.defaultComponentStateComputed,
|
||||
actions: state?.actions,
|
||||
}),
|
||||
shallow
|
||||
);
|
||||
|
||||
const { isVersionReleased, editingVersion } = useAppVersionStore(
|
||||
(state) => ({ isVersionReleased: state.isVersionReleased, editingVersion: state.editingVersion }),
|
||||
shallow
|
||||
|
|
@ -1778,6 +1810,9 @@ const withStore = (Component) => (props) => {
|
|||
currentState={currentState}
|
||||
showComments={showComments}
|
||||
currentLayout={currentLayout}
|
||||
queryConfirmationList={queryConfirmationList}
|
||||
updateQueryConfirmationList={actions.updateQueryConfirmationList}
|
||||
defaultComponentStateComputed={defaultComponentStateComputed}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
1337
frontend/src/Editor/EditorFunc.jsx
Normal file
1337
frontend/src/Editor/EditorFunc.jsx
Normal file
File diff suppressed because it is too large
Load diff
|
|
@ -19,11 +19,10 @@ export const GlobalSettings = ({
|
|||
globalSettingsChanged,
|
||||
darkMode,
|
||||
toggleAppMaintenance,
|
||||
is_maintenance_on,
|
||||
isMaintenanceOn,
|
||||
}) => {
|
||||
const { t } = useTranslation();
|
||||
const { hideHeader, canvasMaxWidth, canvasMaxWidthType, canvasMaxHeight, canvasBackgroundColor, backgroundFxQuery } =
|
||||
globalSettings;
|
||||
const { hideHeader, canvasMaxWidth, canvasMaxWidthType, canvasBackgroundColor, backgroundFxQuery } = globalSettings;
|
||||
const [showPicker, setShowPicker] = React.useState(false);
|
||||
const currentState = useCurrentState();
|
||||
const [forceCodeBox, setForceCodeBox] = React.useState(true);
|
||||
|
|
@ -87,7 +86,7 @@ export const GlobalSettings = ({
|
|||
data-cy={`toggle-maintenance-mode`}
|
||||
className="form-check-input"
|
||||
type="checkbox"
|
||||
checked={is_maintenance_on}
|
||||
checked={isMaintenanceOn}
|
||||
onChange={() => setConfirmationShow(true)}
|
||||
/>
|
||||
</div>
|
||||
|
|
@ -237,7 +236,7 @@ export const GlobalSettings = ({
|
|||
<Confirm
|
||||
show={showConfirmation}
|
||||
message={
|
||||
is_maintenance_on
|
||||
isMaintenanceOn
|
||||
? 'Users will now be able to launch the released version of this app, do you wish to continue?'
|
||||
: 'Users will not be able to launch the app until maintenance mode is turned off, do you wish to continue?'
|
||||
}
|
||||
|
|
|
|||
|
|
@ -14,6 +14,7 @@ import config from 'config';
|
|||
import { useUpdatePresence } from '@y-presence/react';
|
||||
import { useAppVersionStore } from '@/_stores/appVersionStore';
|
||||
import { shallow } from 'zustand/shallow';
|
||||
import { useAppDataActions, useAppInfo, useCurrentUser } from '@/_stores/appDataStore';
|
||||
|
||||
export default function EditorHeader({
|
||||
darkMode,
|
||||
|
|
@ -22,8 +23,6 @@ export default function EditorHeader({
|
|||
toggleAppMaintenance,
|
||||
app,
|
||||
appVersionPreviewLink,
|
||||
slug,
|
||||
appId,
|
||||
canUndo,
|
||||
canRedo,
|
||||
handleUndo,
|
||||
|
|
@ -32,13 +31,20 @@ export default function EditorHeader({
|
|||
saveError,
|
||||
onNameChanged,
|
||||
setAppDefinitionFromVersion,
|
||||
handleSlugChange,
|
||||
onVersionRelease,
|
||||
saveEditingVersion,
|
||||
onVersionDelete,
|
||||
currentUser,
|
||||
}) {
|
||||
const { is_maintenance_on } = app;
|
||||
const currentUser = useCurrentUser();
|
||||
|
||||
const { isMaintenanceOn, appName, appId, slug } = useAppInfo();
|
||||
|
||||
const { updateState } = useAppDataActions();
|
||||
|
||||
const handleSlugChange = (newSlug) => {
|
||||
updateState({ slug: newSlug });
|
||||
};
|
||||
|
||||
const { isVersionReleased, editingVersion } = useAppVersionStore(
|
||||
(state) => ({
|
||||
isVersionReleased: state.isVersionReleased,
|
||||
|
|
@ -87,9 +93,9 @@ export default function EditorHeader({
|
|||
globalSettings={appDefinition.globalSettings}
|
||||
darkMode={darkMode}
|
||||
toggleAppMaintenance={toggleAppMaintenance}
|
||||
is_maintenance_on={is_maintenance_on}
|
||||
isMaintenanceOn={isMaintenanceOn}
|
||||
/>
|
||||
<EditAppName appId={app.id} appName={app.name} onNameChanged={onNameChanged} />
|
||||
<EditAppName appId={appId} appName={appName} onNameChanged={onNameChanged} />
|
||||
</div>
|
||||
|
||||
<div className="col d-flex">
|
||||
|
|
@ -167,14 +173,12 @@ export default function EditorHeader({
|
|||
</Link>
|
||||
</div>
|
||||
<div className="nav-item dropdown">
|
||||
{app.id && (
|
||||
<ReleaseVersionButton
|
||||
appId={app.id}
|
||||
appName={app.name}
|
||||
onVersionRelease={onVersionRelease}
|
||||
saveEditingVersion={saveEditingVersion}
|
||||
/>
|
||||
)}
|
||||
<ReleaseVersionButton
|
||||
appId={appId}
|
||||
appName={appName}
|
||||
onVersionRelease={onVersionRelease}
|
||||
saveEditingVersion={saveEditingVersion}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -15,13 +15,13 @@ import { useTranslation } from 'react-i18next';
|
|||
|
||||
import { useDataQueries } from '@/_stores/dataQueriesStore';
|
||||
import RunjsParameters from './ActionConfigurationPanels/RunjsParamters';
|
||||
import { useAppInfo } from '@/_stores/appDataStore';
|
||||
|
||||
export const EventManager = ({
|
||||
component,
|
||||
componentMeta,
|
||||
components,
|
||||
eventsChanged,
|
||||
apps,
|
||||
excludeEvents,
|
||||
popOverCallback,
|
||||
popoverPlacement,
|
||||
|
|
@ -29,6 +29,8 @@ export const EventManager = ({
|
|||
hideEmptyEventsAlert,
|
||||
}) => {
|
||||
const dataQueries = useDataQueries();
|
||||
const { apps, appId } = useAppInfo();
|
||||
|
||||
const [events, setEvents] = useState(() => component.component.definition.events || []);
|
||||
const [focusedEventIndex, setFocusedEventIndex] = useState(null);
|
||||
const { t } = useTranslation();
|
||||
|
|
@ -170,7 +172,7 @@ export const EventManager = ({
|
|||
function getAllApps() {
|
||||
let appsOptionsList = [];
|
||||
apps
|
||||
.filter((item) => item.slug !== undefined)
|
||||
.filter((item) => item.slug !== undefined && item.id !== appId)
|
||||
.forEach((item) => {
|
||||
appsOptionsList.push({
|
||||
name: item.name,
|
||||
|
|
|
|||
|
|
@ -28,7 +28,6 @@ export const Inspector = ({
|
|||
selectedComponentId,
|
||||
componentDefinitionChanged,
|
||||
allComponents,
|
||||
apps,
|
||||
darkMode,
|
||||
switchSidebarTab,
|
||||
removeComponent,
|
||||
|
|
@ -285,7 +284,6 @@ export const Inspector = ({
|
|||
currentState={currentState}
|
||||
darkMode={darkMode}
|
||||
eventsChanged={eventsChanged}
|
||||
apps={apps}
|
||||
pages={pages}
|
||||
allComponents={allComponents}
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -39,7 +39,6 @@ export const QueryManagerBody = forwardRef(
|
|||
previewLoading,
|
||||
queryPreviewData,
|
||||
allComponents,
|
||||
apps,
|
||||
appDefinition,
|
||||
createDraftQuery,
|
||||
setOptions,
|
||||
|
|
@ -309,7 +308,6 @@ export const QueryManagerBody = forwardRef(
|
|||
componentMeta={queryComponent.componentMeta}
|
||||
dataQueries={dataQueries}
|
||||
components={allComponents}
|
||||
apps={apps}
|
||||
popoverPlacement="top"
|
||||
pages={
|
||||
appDefinition?.pages ? Object.entries(appDefinition?.pages).map(([id, page]) => ({ ...page, id })) : []
|
||||
|
|
|
|||
|
|
@ -22,7 +22,6 @@ const QueryManager = ({
|
|||
dataQueriesChanged,
|
||||
appId,
|
||||
darkMode,
|
||||
apps,
|
||||
allComponents,
|
||||
dataSourceModalHandler,
|
||||
appDefinition,
|
||||
|
|
@ -105,7 +104,6 @@ const QueryManager = ({
|
|||
previewLoading={previewLoading}
|
||||
queryPreviewData={queryPreviewData}
|
||||
allComponents={allComponents}
|
||||
apps={apps}
|
||||
appDefinition={appDefinition}
|
||||
createDraftQuery={createDraftQuery}
|
||||
setOptions={setOptions}
|
||||
|
|
|
|||
|
|
@ -13,7 +13,6 @@ const QueryPanel = ({
|
|||
dataQueriesChanged,
|
||||
fetchDataQueries,
|
||||
darkMode,
|
||||
apps,
|
||||
allComponents,
|
||||
appId,
|
||||
appDefinition,
|
||||
|
|
@ -268,7 +267,6 @@ const QueryPanel = ({
|
|||
dataQueriesChanged={updateDataQueries}
|
||||
appId={appId}
|
||||
darkMode={darkMode}
|
||||
apps={apps}
|
||||
allComponents={allComponents}
|
||||
dataSourceModalHandler={dataSourceModalHandler}
|
||||
appDefinition={appDefinition}
|
||||
|
|
|
|||
|
|
@ -3,7 +3,8 @@ import React from 'react';
|
|||
import config from 'config';
|
||||
import { RoomProvider } from '@y-presence/react';
|
||||
import Spinner from '@/_ui/Spinner';
|
||||
import { Editor } from '@/Editor';
|
||||
import { Editor, EditorFunc } from '@/Editor';
|
||||
|
||||
import useRouter from '@/_hooks/use-router';
|
||||
import { useParams } from 'react-router-dom';
|
||||
const Y = require('yjs');
|
||||
|
|
@ -70,7 +71,7 @@ export const RealtimeEditor = (props) => {
|
|||
|
||||
return (
|
||||
<RoomProvider awareness={provider.awareness} initialPresence={initialPresence}>
|
||||
<Editor provider={provider} ymap={ydoc.getMap('appDef')} {...props} />
|
||||
<EditorFunc provider={provider} ymap={ydoc.getMap('appDef')} {...props} />
|
||||
</RoomProvider>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -168,7 +168,7 @@ class ViewerComponent extends React.Component {
|
|||
homepage: this.state.appDefinition?.pages?.[this.state.appDefinition?.homePageId]?.handle,
|
||||
},
|
||||
() => {
|
||||
computeComponentState(this, data?.definition?.pages[currentPage.id]?.components).then(async () => {
|
||||
computeComponentState(data?.definition?.pages[currentPage.id]?.components).then(async () => {
|
||||
this.setState({ initialComputationOfStateDone: true });
|
||||
console.log('Default component state computed and set');
|
||||
this.runQueries(data.data_queries);
|
||||
|
|
@ -407,15 +407,13 @@ class ViewerComponent extends React.Component {
|
|||
name: targetPage.name,
|
||||
},
|
||||
async () => {
|
||||
computeComponentState(this, this.state.appDefinition?.pages[this.state.currentPageId].components).then(
|
||||
async () => {
|
||||
// eslint-disable-next-line no-unsafe-optional-chaining
|
||||
const { events } = this.state.appDefinition?.pages[this.state.currentPageId];
|
||||
for (const event of events ?? []) {
|
||||
await this.handleEvent(event.eventId, event);
|
||||
}
|
||||
computeComponentState(this.state.appDefinition?.pages[this.state.currentPageId].components).then(async () => {
|
||||
// eslint-disable-next-line no-unsafe-optional-chaining
|
||||
const { events } = this.state.appDefinition?.pages[this.state.currentPageId];
|
||||
for (const event of events ?? []) {
|
||||
await this.handleEvent(event.eventId, event);
|
||||
}
|
||||
);
|
||||
});
|
||||
}
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,3 +2,4 @@
|
|||
export * from './Editor';
|
||||
export * from './Viewer';
|
||||
export * from './DataSourceManager';
|
||||
export * from './EditorFunc';
|
||||
|
|
|
|||
|
|
@ -31,6 +31,7 @@ import { useDataQueriesStore } from '@/_stores/dataQueriesStore';
|
|||
import { useQueryPanelStore } from '@/_stores/queryPanelStore';
|
||||
import { useCurrentStateStore, getCurrentState } from '@/_stores/currentStateStore';
|
||||
import { useAppVersionStore } from '@/_stores/appVersionStore';
|
||||
import { useEditorStore } from '@/_stores/editorStore';
|
||||
|
||||
const ERROR_TYPES = Object.freeze({
|
||||
ReferenceError: 'ReferenceError',
|
||||
|
|
@ -58,7 +59,7 @@ export function setCurrentStateAsync(_ref, changes) {
|
|||
});
|
||||
}
|
||||
|
||||
export function onComponentOptionsChanged(_ref, component, options) {
|
||||
export function onComponentOptionsChanged(component, options) {
|
||||
const componentName = component.name;
|
||||
const components = getCurrentState().components;
|
||||
let componentData = components[componentName];
|
||||
|
|
@ -74,7 +75,7 @@ export function onComponentOptionsChanged(_ref, component, options) {
|
|||
return Promise.resolve();
|
||||
}
|
||||
|
||||
export function onComponentOptionChanged(_ref, component, option_name, value) {
|
||||
export function onComponentOptionChanged(component, option_name, value) {
|
||||
const componentName = component.name;
|
||||
const components = getCurrentState().components;
|
||||
|
||||
|
|
@ -351,7 +352,7 @@ function showModal(_ref, modal, show) {
|
|||
return Promise.resolve();
|
||||
}
|
||||
|
||||
const modalMeta = _ref.state.appDefinition.pages[_ref.state.currentPageId].components[modalId];
|
||||
const modalMeta = _ref.appDefinition.pages[_ref.state.currentPageId].components[modalId]; //! NeedToFix
|
||||
|
||||
const _components = {
|
||||
...getCurrentState().components,
|
||||
|
|
@ -366,7 +367,7 @@ function showModal(_ref, modal, show) {
|
|||
return Promise.resolve();
|
||||
}
|
||||
|
||||
function logoutAction(_ref) {
|
||||
function logoutAction() {
|
||||
localStorage.clear();
|
||||
authenticationService.logout(true);
|
||||
|
||||
|
|
@ -431,7 +432,7 @@ function executeActionWithDebounce(_ref, event, mode, customVariables) {
|
|||
return runQuery(_ref, queryId, name, undefined, mode, resolvedParams);
|
||||
}
|
||||
case 'logout': {
|
||||
return logoutAction(_ref);
|
||||
return logoutAction();
|
||||
}
|
||||
|
||||
case 'open-webpage': {
|
||||
|
|
@ -511,7 +512,7 @@ function executeActionWithDebounce(_ref, event, mode, customVariables) {
|
|||
}
|
||||
|
||||
case 'set-table-page': {
|
||||
setTablePageIndex(_ref, event.table, event.pageIndex);
|
||||
setTablePageIndex(event.table, event.pageIndex);
|
||||
break;
|
||||
}
|
||||
|
||||
|
|
@ -574,7 +575,7 @@ function executeActionWithDebounce(_ref, event, mode, customVariables) {
|
|||
}
|
||||
|
||||
case 'switch-page': {
|
||||
_ref.switchPage(event.pageId, resolveReferences(event.queryParams, getCurrentState(), [], customVariables));
|
||||
_ref.switchPage(event.pageId, resolveReferences(event.queryParams, getCurrentState(), [], customVariables)); // arpit [switchPage]
|
||||
return Promise.resolve();
|
||||
}
|
||||
}
|
||||
|
|
@ -600,7 +601,7 @@ export async function onEvent(_ref, eventName, options, mode = 'edit') {
|
|||
},
|
||||
},
|
||||
});
|
||||
runQuery(_ref, queryId, queryName, true, mode, parameters);
|
||||
runQuery(_ref, queryId, queryName, true, mode, parameters); //arpit [runQuery]
|
||||
}
|
||||
|
||||
if (eventName === 'onCalendarEventSelect') {
|
||||
|
|
@ -737,9 +738,9 @@ export async function onEvent(_ref, eventName, options, mode = 'edit') {
|
|||
}
|
||||
|
||||
if (eventName === 'onBulkUpdate') {
|
||||
onComponentOptionChanged(_self, options.component, 'isSavingChanges', true);
|
||||
onComponentOptionChanged(options.component, 'isSavingChanges', true);
|
||||
await executeActionsForEventId(_self, eventName, options.component, mode, customVariables);
|
||||
onComponentOptionChanged(_self, options.component, 'isSavingChanges', false);
|
||||
onComponentOptionChanged(options.component, 'isSavingChanges', false);
|
||||
}
|
||||
|
||||
if (['onDataQuerySuccess', 'onDataQueryFailure'].includes(eventName)) {
|
||||
|
|
@ -1105,7 +1106,7 @@ export function runQuery(_ref, queryId, queryName, confirmed = undefined, mode =
|
|||
});
|
||||
}
|
||||
|
||||
export function setTablePageIndex(_ref, tableId, index) {
|
||||
export function setTablePageIndex(tableId, index) {
|
||||
if (_.isEmpty(tableId)) {
|
||||
console.log('No table is associated with this event.');
|
||||
return Promise.resolve();
|
||||
|
|
@ -1126,7 +1127,7 @@ export function renderTooltip({ props, text }) {
|
|||
);
|
||||
}
|
||||
|
||||
export function computeComponentState(_ref, components = {}) {
|
||||
export function computeComponentState(components = {}) {
|
||||
let componentState = {};
|
||||
const currentComponents = getCurrentState().components;
|
||||
Object.keys(components).forEach((key) => {
|
||||
|
|
@ -1168,8 +1169,11 @@ export function computeComponentState(_ref, components = {}) {
|
|||
},
|
||||
});
|
||||
|
||||
return setStateAsync(_ref, {
|
||||
defaultComponentStateComputed: true,
|
||||
return new Promise((resolve) => {
|
||||
useEditorStore.getState().actions.updateEditorState({
|
||||
defaultComponentStateComputed: true,
|
||||
});
|
||||
resolve();
|
||||
});
|
||||
}
|
||||
|
||||
|
|
@ -1186,13 +1190,13 @@ export const getSvgIcon = (key, height = 50, width = 50, iconFile = undefined, s
|
|||
};
|
||||
|
||||
export const debuggerActions = {
|
||||
error: (_self, errors) => {
|
||||
error: (errors) => {
|
||||
useCurrentStateStore.getState().actions.setErrors({
|
||||
...errors,
|
||||
});
|
||||
},
|
||||
|
||||
flush: (_self) => {
|
||||
flush: () => {
|
||||
useCurrentStateStore.getState().actions.setCurrentState({
|
||||
errors: {},
|
||||
});
|
||||
|
|
@ -1312,9 +1316,16 @@ const updateNewComponents = (pageId, appDefinition, newComponents, updateAppDefi
|
|||
updateAppDefinition(newAppDefinition);
|
||||
};
|
||||
|
||||
export const cloneComponents = (_ref, updateAppDefinition, isCloning = true, isCut = false) => {
|
||||
const { selectedComponents, appDefinition, currentPageId } = _ref.state;
|
||||
export const cloneComponents = (
|
||||
selectedComponents,
|
||||
appDefinition,
|
||||
currentPageId,
|
||||
updateAppDefinition,
|
||||
isCloning = true,
|
||||
isCut = false
|
||||
) => {
|
||||
if (selectedComponents.length < 1) return getSelectedText();
|
||||
|
||||
const { components: allComponents } = appDefinition.pages[currentPageId];
|
||||
let newDefinition = _.cloneDeep(appDefinition);
|
||||
let newComponents = [],
|
||||
|
|
@ -1351,7 +1362,13 @@ export const cloneComponents = (_ref, updateAppDefinition, isCloning = true, isC
|
|||
navigator.clipboard.writeText(JSON.stringify(newComponentObj));
|
||||
toast.success('Component copied succesfully');
|
||||
}
|
||||
_ref.setState({ currentSidebarTab: 2 });
|
||||
|
||||
return new Promise((resolve) => {
|
||||
useEditorStore.getState().actions.updateEditorState({
|
||||
currentSidebarTab: 2,
|
||||
});
|
||||
resolve();
|
||||
});
|
||||
};
|
||||
|
||||
const getChildComponents = (allComponents, component, parentComponent, addedComponentId) => {
|
||||
|
|
@ -1606,7 +1623,7 @@ export const runQueries = (queries, _ref) => {
|
|||
});
|
||||
};
|
||||
|
||||
export const computeQueryState = (queries, _ref) => {
|
||||
export const computeQueryState = (queries) => {
|
||||
let queryState = {};
|
||||
queries.forEach((query) => {
|
||||
if (query.plugin?.plugin_id) {
|
||||
|
|
|
|||
|
|
@ -544,10 +544,11 @@ export const hightlightMentionedUserInComment = (comment) => {
|
|||
};
|
||||
|
||||
export const generateAppActions = (_ref, queryId, mode, isPreview = false) => {
|
||||
const currentPageId = _ref.state.currentPageId;
|
||||
const currentComponents = _ref.state?.appDefinition?.pages[currentPageId]?.components
|
||||
? Object.entries(_ref.state.appDefinition.pages[currentPageId]?.components)
|
||||
const currentPageId = _ref.currentPageId;
|
||||
const currentComponents = _ref.appDefinition?.pages[currentPageId]?.components
|
||||
? Object.entries(_ref.appDefinition.pages[currentPageId]?.components)
|
||||
: {};
|
||||
|
||||
const runQuery = (queryName = '', parameters) => {
|
||||
const query = useDataQueriesStore.getState().dataQueries.find((query) => query.name === queryName);
|
||||
|
||||
|
|
|
|||
|
|
@ -1,7 +1,23 @@
|
|||
import { shallow } from 'zustand/shallow';
|
||||
import { create, zustandDevTools } from './utils';
|
||||
|
||||
const initialState = {
|
||||
editingVersion: null,
|
||||
currentUser: null,
|
||||
apps: [],
|
||||
appId: null,
|
||||
appName: null,
|
||||
slug: null,
|
||||
isPublic: null,
|
||||
isMaintenanceOn: null,
|
||||
organizationId: null,
|
||||
currentVersionId: null,
|
||||
userId: null,
|
||||
app: {},
|
||||
components: [],
|
||||
pages: [],
|
||||
layouts: [],
|
||||
eventHandlers: [],
|
||||
};
|
||||
|
||||
export const useAppDataStore = create(
|
||||
|
|
@ -10,6 +26,8 @@ export const useAppDataStore = create(
|
|||
...initialState,
|
||||
actions: {
|
||||
updateEditingVersion: (version) => set(() => ({ editingVersion: version })),
|
||||
updateApps: (apps) => set(() => ({ apps: apps })),
|
||||
updateState: (state) => set((prev) => ({ ...prev, ...state })),
|
||||
},
|
||||
}),
|
||||
{ name: 'App Data Store' }
|
||||
|
|
@ -18,3 +36,6 @@ export const useAppDataStore = create(
|
|||
|
||||
export const useEditingVersion = () => useAppDataStore((state) => state.editingVersion);
|
||||
export const useUpdateEditingVersion = () => useAppDataStore((state) => state.actions);
|
||||
export const useCurrentUser = () => useAppDataStore((state) => state.currentUser);
|
||||
export const useAppInfo = () => useAppDataStore((state) => state);
|
||||
export const useAppDataActions = () => useAppDataStore((state) => state.actions);
|
||||
|
|
|
|||
|
|
@ -29,7 +29,7 @@ export const useDataQueriesStore = create(
|
|||
// Runs query on loading application
|
||||
if (runQueriesOnAppLoad) runQueries(data.data_queries, editorRef);
|
||||
// Compute query state to be added in the current state
|
||||
computeQueryState(data.data_queries, editorRef);
|
||||
computeQueryState(data.data_queries);
|
||||
const { actions, selectedQuery } = useQueryPanelStore.getState();
|
||||
if (selectFirstQuery || selectedQuery?.id === 'draftQuery') {
|
||||
actions.setSelectedQuery(data.data_queries[0]?.id, data.data_queries[0]);
|
||||
|
|
@ -40,7 +40,7 @@ export const useDataQueriesStore = create(
|
|||
});
|
||||
},
|
||||
setDataQueries: (dataQueries) => set({ dataQueries }),
|
||||
deleteDataQueries: (queryId, editorRef) => {
|
||||
deleteDataQueries: (queryId) => {
|
||||
set({ isDeletingQueryInProcess: true });
|
||||
dataqueryService
|
||||
.del(queryId)
|
||||
|
|
@ -57,8 +57,7 @@ export const useDataQueriesStore = create(
|
|||
get().actions.fetchDataQueries(
|
||||
useAppVersionStore.getState().editingVersion?.id,
|
||||
selectedQuery?.id === queryId,
|
||||
false,
|
||||
editorRef
|
||||
false
|
||||
);
|
||||
})
|
||||
.catch(({ error }) => {
|
||||
|
|
@ -122,12 +121,12 @@ export const useDataQueriesStore = create(
|
|||
});
|
||||
});
|
||||
},
|
||||
renameQuery: (id, newName, editorRef) => {
|
||||
renameQuery: (id, newName) => {
|
||||
dataqueryService
|
||||
.update(id, newName)
|
||||
.then(() => {
|
||||
toast.success('Query Name Updated');
|
||||
get().actions.fetchDataQueries(useAppVersionStore.getState().editingVersion?.id, false, false, editorRef);
|
||||
get().actions.fetchDataQueries(useAppVersionStore.getState().editingVersion?.id, false, false);
|
||||
})
|
||||
.catch(({ error }) => {
|
||||
toast.error(error);
|
||||
|
|
|
|||
|
|
@ -4,6 +4,25 @@ const initialState = {
|
|||
currentLayout: 'desktop',
|
||||
showComments: false,
|
||||
isEditorActive: false,
|
||||
currentSidebarTab: 2,
|
||||
selectedComponents: [],
|
||||
selectedComponent: null,
|
||||
scrollOptions: {
|
||||
container: null,
|
||||
throttleTime: 0,
|
||||
threshold: 0,
|
||||
},
|
||||
canUndo: false,
|
||||
canRedo: false,
|
||||
currentVersion: {},
|
||||
noOfVersionsSupported: 100,
|
||||
appDefinition: {},
|
||||
isSaving: false,
|
||||
saveError: false,
|
||||
isLoading: true,
|
||||
defaultComponentStateComputed: false,
|
||||
showLeftSidebar: true,
|
||||
queryConfirmationList: [],
|
||||
};
|
||||
|
||||
export const useEditorStore = create(
|
||||
|
|
@ -15,8 +34,13 @@ export const useEditorStore = create(
|
|||
toggleComments: () => set({ showComments: !get().showComments }),
|
||||
toggleCurrentLayout: (currentLayout) => set({ currentLayout }),
|
||||
setIsEditorActive: (isEditorActive) => set(() => ({ isEditorActive })),
|
||||
updateEditorState: (state) => set((prev) => ({ ...prev, ...state })),
|
||||
updateQueryConfirmationList: (queryConfirmationList) => set({ queryConfirmationList }),
|
||||
},
|
||||
}),
|
||||
{ name: 'Editor Store' }
|
||||
)
|
||||
);
|
||||
|
||||
export const useEditorActions = () => useEditorStore((state) => state.actions);
|
||||
export const useEditorState = () => useEditorStore((state) => state);
|
||||
|
|
|
|||
Loading…
Reference in a new issue