Elgato_dark/ToolJet
1
0
Fork 0
mirror of https://github.com/ToolJet/ToolJet synced 2026-05-23 08:58:26 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 5

fixes: Request confirmation before query run toggle is not visible on viewer mode. (can't run query if confirmation toggle is on)

Browse source
This commit is contained in:
arpitnath 2023-10-04 01:42:51 +05:30
parent feae3c2f2d
commit 3ffbe9d046
1 changed files with 26 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

35
frontend/src/Editor/Viewer.jsx
View file

@ -69,7 +69,6 @@ class ViewerComponent extends React.Component {
isLoading: true,
users: null,
appDefinition: { pages: {} },
queryConfirmationList: [],
isAppLoaded: false,
errorAppId: null,
errorVersionId: null,
@ -418,6 +417,9 @@ class ViewerComponent extends React.Component {
}
};
updateQueryConfirmationList = (queryConfirmationList) =>
useEditorStore.getState().actions.updateQueryConfirmationList(queryConfirmationList);
componentDidMount() {
this.setupViewer();
const isMobileDevice = this.state.deviceWindowWidth < 600;
@ -548,16 +550,15 @@ class ViewerComponent extends React.Component {
};
handleEvent = (eventName, events, options) => {
const { appDefinition, queryConfirmationList, currentPageId } = this.state;
const { appDefinition, currentPageId } = this.state;
const viewerRef = {
appDefinition: appDefinition,
queryConfirmationList: queryConfirmationList,
updateQueryConfirmationList: null,
queryConfirmationList: this.props.queryConfirmationList,
updateQueryConfirmationList: this.updateQueryConfirmationList,
navigate: this.props.navigate,
switchPage: this.switchPage,
currentPageId: currentPageId,
};
onEvent(viewerRef, eventName, events, options, 'view');
};
@ -586,7 +587,6 @@ class ViewerComponent extends React.Component {
deviceWindowWidth,
defaultComponentStateComputed,
dataQueries,
queryConfirmationList,
errorAppId,
errorVersionId,
errorDetails,
@ -597,6 +597,8 @@ class ViewerComponent extends React.Component {
const canvasMaxWidth = this.computeCanvasMaxWidth();
const queryConfirmationList = this.props.queryConfirmationList;
if (this.state.app?.isLoading) {
return (
<div className="tooljet-logo-loader">
@ -654,16 +656,29 @@ class ViewerComponent extends React.Component {
return <Navigate to={`${url}${this.props.params.pageHandle ? '' : window.location.search}`} replace />;
}
const viewerRef = {
appDefinition: appDefinition,
queryConfirmationList: this.props.queryConfirmationList,
updateQueryConfirmationList: this.updateQueryConfirmationList,
navigate: this.props.navigate,
switchPage: this.switchPage,
currentPageId: this.state.currentPageId,
};
return (
<div className="viewer wrapper">
<Confirm
show={queryConfirmationList.length > 0}
message={'Do you want to run this query?'}
onConfirm={(queryConfirmationData) => onQueryConfirmOrCancel(this, queryConfirmationData, true, 'view')}
onCancel={() => onQueryConfirmOrCancel(this, queryConfirmationList[0], false, 'view')}
onConfirm={(queryConfirmationData) =>
onQueryConfirmOrCancel(viewerRef, queryConfirmationData, true, 'view')
}
onCancel={() => onQueryConfirmOrCancel(viewerRef, queryConfirmationList[0], false, 'view')}
queryConfirmationData={queryConfirmationList[0]}
key={queryConfirmationList[0]?.queryName}
darkMode={this.props.darkMode}
/>
<DndProvider backend={HTML5Backend}>
<ViewerNavigation.Header
showHeader={!appDefinition.globalSettings?.hideHeader && isAppLoaded}
@ -755,9 +770,10 @@ class ViewerComponent extends React.Component {
}
const withStore = (Component) => (props) => {
const currentState = useCurrentStateStore();
const { currentLayout } = useEditorStore(
const { currentLayout, queryConfirmationList } = useEditorStore(
(state) => ({
currentLayout: state?.currentLayout,
queryConfirmationList: state?.queryConfirmationList,
}),
shallow
);
@ -771,6 +787,7 @@ const withStore = (Component) => (props) => {
setCurrentState={currentState?.actions?.setCurrentState}
currentLayout={currentLayout}
updateState={updateState}
queryConfirmationList={queryConfirmationList}
/>
);
};