Elgato_dark/ToolJet
1
0
Fork 0
mirror of https://github.com/ToolJet/ToolJet synced 2026-05-24 09:28:31 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

fixes: version manager ui for released versions

Browse source
This commit is contained in:
arpitnath 2023-09-17 02:22:36 +05:30
parent fd92cce616
commit c74f075863
4 changed files with 54 additions and 52 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

36
frontend/src/Editor/AppVersionsManager/List.jsx
View file

@ -1,4 +1,4 @@
import React, { useState } from 'react';
import React, { useEffect, useState } from 'react';
import cx from 'classnames';
import { appVersionService } from '@/_services';
import { CustomSelect } from './CustomSelect';
@ -6,34 +6,48 @@ import { toast } from 'react-hot-toast';
import { shallow } from 'zustand/shallow';
import { useAppVersionStore } from '@/_stores/appVersionStore';
export const AppVersionsManager = function ({
appId,
releasedVersionId,
setAppDefinitionFromVersion,
onVersionDelete,
}) {
const [appVersionStatus, setGetAppVersionStatus] = useState('');
const appVersionLoadingStatus = Object.freeze({
loading: 'loading',
loaded: 'loaded',
error: 'error',
});
export const AppVersionsManager = function ({ appId, setAppDefinitionFromVersion, onVersionDelete }) {
const [appVersionStatus, setGetAppVersionStatus] = useState(appVersionLoadingStatus.loading);
const [deleteVersion, setDeleteVersion] = useState({
versionId: '',
versionName: '',
showModal: false,
});
const { editingVersion, appVersions, setAppVersions } = useAppVersionStore(
const { releasedVersionId, editingVersion, appVersions, setAppVersions } = useAppVersionStore(
(state) => ({
editingVersion: state.editingVersion,
appVersions: state.appVersions,
setAppVersions: state.actions?.setAppVersions,
releasedVersionId: state.releasedVersionId,
}),
shallow
);
useEffect(() => {
if (appVersions && appVersions.length > 0) {
setGetAppVersionStatus(appVersionLoadingStatus.loaded);
}
return () => {
setGetAppVersionStatus(appVersionLoadingStatus.loading);
};
}, [appVersions]);
const darkMode = localStorage.getItem('darkMode') === 'true';
const selectVersion = (id) => {
appVersionService
.getOne(appId, id)
.then((data) => {
setAppDefinitionFromVersion(data, true);
const isCurrentVersionReleased = data.currentVersionId ? true : false;
setAppDefinitionFromVersion(data, isCurrentVersionReleased);
})
.catch((error) => {
toast.error(error);
@ -57,6 +71,7 @@ export const AppVersionsManager = function ({
toast.dismiss(deleteingToastId);
toast.success(`Version - ${versionName} Deleted`);
resetDeleteModal();
setGetAppVersionStatus(appVersionLoadingStatus.loading);
appVersionService.getAll(appId).then((data) => {
setAppVersions(data.versions);
});
@ -64,6 +79,7 @@ export const AppVersionsManager = function ({
.catch((error) => {
toast.dismiss(deleteingToastId);
toast.error(error?.error ?? 'Oops, something went wrong');
setGetAppVersionStatus(appVersionLoadingStatus.error);
resetDeleteModal();
});
};

66
frontend/src/Editor/EditorFunc.jsx
View file

@ -52,7 +52,7 @@ import { withRouter } from '@/_hoc/withRouter';
import { ReleasedVersionError } from './AppVersionsManager/ReleasedVersionError';
import { useDataSourcesStore } from '@/_stores/dataSourcesStore';
import { useDataQueries, useDataQueriesStore } from '@/_stores/dataQueriesStore';
import { useAppVersionStore, useAppVersionActions } from '@/_stores/appVersionStore';
import { useAppVersionStore, useAppVersionActions, useAppVersionState } from '@/_stores/appVersionStore';
import { useQueryPanelStore } from '@/_stores/queryPanelStore';
import { useCurrentStateStore, useCurrentState } from '@/_stores/currentStateStore';
import { computeAppDiff, computeComponentPropertyDiff, resetAllStores } from '@/_stores/utils';
@ -82,6 +82,7 @@ const EditorComponent = (props) => {
const { updateEditorState, updateQueryConfirmationList } = useEditorActions();
const { setAppVersions } = useAppVersionActions();
const { isVersionReleased, editingVersion, releasedVersionId } = useAppVersionState();
const {
noOfVersionsSupported,
@ -305,9 +306,9 @@ const EditorComponent = (props) => {
const data = event.data.replace(/^"(.+(?="$))"$/, '$1');
if (data === 'versionReleased') fetchApp();
else if (data === 'dataQueriesChanged') {
fetchDataQueries(props.editingVersion?.id);
fetchDataQueries(editingVersion?.id);
} else if (data === 'dataSourcesChanged') {
fetchDataSources(props.editingVersion?.id);
fetchDataSources(editingVersion?.id);
}
});
};
@ -387,7 +388,7 @@ const EditorComponent = (props) => {
})
);
} else {
fetchDataSources(props.editingVersion?.id);
fetchDataSources(editingVersion?.id);
}
};
@ -404,7 +405,7 @@ const EditorComponent = (props) => {
})
);
} else {
fetchDataQueries(props.editingVersion?.id);
fetchDataQueries(editingVersion?.id);
}
};
@ -550,10 +551,6 @@ const EditorComponent = (props) => {
const onVersionRelease = (versionId) => {
useAppVersionStore.getState().actions.updateReleasedVersionId(versionId);
updateState({
currentVersionId: versionId,
});
socket.send(
JSON.stringify({
event: 'events',
@ -625,9 +622,11 @@ const EditorComponent = (props) => {
};
//!--------
const callBack = async (data, startingPageHandle) => {
const callBack = async (data, startingPageHandle, versionSwitched = false) => {
useAppVersionStore.getState().actions.updateEditingVersion(data.editing_version);
useAppVersionStore.getState().actions.updateReleasedVersionId(data.current_version_id);
if (!releasedVersionId || !versionSwitched) {
useAppVersionStore.getState().actions.updateReleasedVersionId(data.current_version_id);
}
const appVersions = await appEnvironmentService.getVersionsByEnvironment(data?.id);
setAppVersions(appVersions.appVersions);
@ -694,9 +693,9 @@ const EditorComponent = (props) => {
};
// !--------
const setAppDefinitionFromVersion = (appData, shouldWeEditVersion = true) => {
const setAppDefinitionFromVersion = (appData, isCurrentVersionReleased = true) => {
const version = appData?.editing_version?.id;
if (version?.id !== props.editingVersion?.id) {
if (version?.id !== editingVersion?.id) {
// !Need to fix this
// appDefinitionChanged(defaults(version.definition, defaultDefinition(props.darkMode)), {
// skipAutoSave: true,
@ -714,7 +713,7 @@ const EditorComponent = (props) => {
isLoading: true,
});
callBack(appData);
callBack(appData, null, true);
initComponentVersioning();
}
@ -795,7 +794,7 @@ const EditorComponent = (props) => {
if (config.ENABLE_MULTIPLAYER_EDITING && !opts?.skipYmapUpdate && opts?.currentSessionId !== currentSessionId) {
props.ymap?.set('appDef', {
newDefinition: updatedAppDefinition,
editingVersionId: props.editingVersion?.id,
editingVersionId: editingVersion?.id,
currentSessionId,
areOthersOnSameVersionAndPage,
});
@ -803,19 +802,19 @@ const EditorComponent = (props) => {
};
const saveEditingVersion = (isUserSwitchedVersion = false) => {
if (props.isVersionReleased && !isUserSwitchedVersion) {
if (isVersionReleased && !isUserSwitchedVersion) {
updateEditorState({
isUpdatingEditorStateInProcess: false,
});
} else if (!isEmpty(props?.editingVersion)) {
} else if (!isEmpty(editingVersion)) {
// param diff ofr table columns needs the complte column data or else the json structure is not correct computeComponentPropertyDiff function handles this
const paramDiff = computeComponentPropertyDiff(appDefinitionDiff, appDefinition, appDiffOptions);
const updateDiff = computeAppDiff(paramDiff, currentPageId, appDiffOptions);
updateAppVersion(appId, props.editingVersion?.id, currentPageId, updateDiff, isUserSwitchedVersion)
updateAppVersion(appId, editingVersion?.id, currentPageId, updateDiff, isUserSwitchedVersion)
.then(() => {
const _editingVersion = {
...props.editingVersion,
...editingVersion,
...{ definition: appDefinition },
};
useAppVersionStore.getState().actions.updateEditingVersion(_editingVersion);
@ -933,7 +932,7 @@ const EditorComponent = (props) => {
}, [JSON.stringify(undoStack), JSON.stringify(redoStack)]);
const componentDefinitionChanged = (componentDefinition, props) => {
if (props?.isVersionReleased) {
if (isVersionReleased) {
useAppVersionStore.getState().actions.enableReleasedVersionPopupState();
return;
}
@ -959,7 +958,7 @@ const EditorComponent = (props) => {
};
const removeComponent = (componentId) => {
if (!props.isVersionReleased) {
if (!isVersionReleased) {
let newDefinition = cloneDeep(appDefinition);
// Delete child components when parent is deleted
@ -1037,7 +1036,7 @@ const EditorComponent = (props) => {
cloneComponents(selectedComponents, appDefinition, currentPageId, appDefinitionChanged, false);
const cutComponents = () => {
if (props.isVersionReleased) {
if (isVersionReleased) {
useAppVersionStore.getState().actions.enableReleasedVersionPopupState();
return;
@ -1056,7 +1055,7 @@ const EditorComponent = (props) => {
};
const removeComponents = () => {
if (!props.isVersionReleased && selectedComponents?.length >= 1) {
if (!isVersionReleased && selectedComponents?.length >= 1) {
let newDefinition = cloneDeep(appDefinition);
removeSelectedComponent(currentPageId, newDefinition, selectedComponents, appDefinitionChanged);
@ -1072,7 +1071,7 @@ const EditorComponent = (props) => {
}
// appDefinitionChanged(newDefinition);
handleInspectorView();
} else if (props.isVersionReleased) {
} else if (isVersionReleased) {
useAppVersionStore.getState().actions.enableReleasedVersionPopupState();
}
};
@ -1413,7 +1412,7 @@ const EditorComponent = (props) => {
// !-------
const currentState = props?.currentState;
const editingVersion = props?.editingVersion;
const appVersionPreviewLink = editingVersion
? `/applications/${appId}/versions/${editingVersion.id}/${currentState.page.handle}`
: '';
@ -1465,7 +1464,7 @@ const EditorComponent = (props) => {
onCancel={() => cancelDeletePageRequest()}
darkMode={props.darkMode}
/>
{props.isVersionReleased && <ReleasedVersionError />}
{isVersionReleased && <ReleasedVersionError />}
<EditorContextWrapper>
<EditorHeader
darkMode={props.darkMode}
@ -1727,23 +1726,10 @@ const withStore = (Component) => (props) => {
}),
shallow
);
const { isVersionReleased, editingVersion } = useAppVersionStore(
(state) => ({ isVersionReleased: state.isVersionReleased, editingVersion: state.editingVersion }),
shallow
);
const currentState = useCurrentState();
return (
<Component
{...props}
isVersionReleased={isVersionReleased}
editingVersion={editingVersion}
currentState={currentState}
showComments={showComments}
currentLayout={currentLayout}
/>
);
return <Component {...props} currentState={currentState} showComments={showComments} currentLayout={currentLayout} />;
};
export const EditorFunc = withTranslation()(withRouter(withStore(EditorComponent)));

3
frontend/src/Editor/Header/index.js
View file

@ -36,7 +36,7 @@ export default function EditorHeader({
const currentUser = useCurrentUser();
const { updateState } = useAppDataActions();
const { isSaving, appId, appName, app, currentVersionId, isPublic } = useAppInfo();
const { isSaving, appId, appName, app, isPublic } = useAppInfo();
const handleSlugChange = (newSlug) => {
updateState({ slug: newSlug });
@ -133,7 +133,6 @@ export default function EditorHeader({
{editingVersion && (
<AppVersionsManager
appId={appId}
releasedVersionId={currentVersionId}
setAppDefinitionFromVersion={setAppDefinitionFromVersion}
onVersionDelete={onVersionDelete}
isPublic={isPublic ?? false}

1
frontend/src/_stores/appVersionStore.js
View file

@ -30,3 +30,4 @@ export const useAppVersionStore = create(
);
export const useAppVersionActions = () => useAppVersionStore((state) => state.actions);
export const useAppVersionState = () => useAppVersionStore((state) => state);