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

Merge pull request #12570 from ToolJet/fix/modal-crash-fix

Browse source 
fix: check if canvas exist before modal component cleanup hook
This commit is contained in:
Johnson Cherian 2025-04-14 17:13:05 +05:30 committed by GitHub
commit e484c320ad
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
4 changed files with 12 additions and 74 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

63
frontend/src/AppBuilder/Header/RightTopHeaderButtons/PromoteVersionButton.jsx
View file

@ -1,63 +0,0 @@
import React, { useState } from 'react';
import { ButtonSolid } from '@/_ui/AppButton/AppButton';
import { shallow } from 'zustand/shallow';
import { ToolTip } from '@/_components/ToolTip';
import PromoteConfirmationModal from './PromoteConfirmationModal';
import useStore from '@/AppBuilder/_stores/store';
const PromoteVersionButton = () => {
const [promoteModalData, setPromoteModalData] = useState(null);
const { isSaving, editingVersion, appVersionEnvironment, environments, selectedEnvironment } = useStore(
(state) => ({
isSaving: state.app.isSaving,
editingVersion: state.currentVersionId,
selectedEnvironment: state.selectedEnvironment,
environments: state.environments,
appVersionEnvironment: state.appVersionEnvironment,
}),
shallow
);
const shouldDisablePromote = isSaving || selectedEnvironment?.priority < appVersionEnvironment?.priority;
const handlePromote = () => {
const curentEnvIndex = environments.findIndex((env) => env.id === appVersionEnvironment.id);
setPromoteModalData({
current: appVersionEnvironment,
target: environments[curentEnvIndex + 1],
});
};
return (
<>
<ButtonSolid
variant="primary"
onClick={handlePromote}
size="md"
disabled={shouldDisablePromote}
data-cy="promote-button"
>
<ToolTip message="Promote this version to the next environment" placement="bottom" show={!shouldDisablePromote}>
<div style={{ fontSize: '14px' }}>Promote </div>
</ToolTip>
<svg width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M0.276332 7.02113C0.103827 7.23676 0.138788 7.55141 0.354419 7.72391C0.57005 7.89642 0.884696 7.86146 1.0572 7.64583L3.72387 4.31249C3.86996 4.12988 3.86996 3.87041 3.72387 3.6878L1.0572 0.354464C0.884696 0.138833 0.57005 0.103872 0.354419 0.276377C0.138788 0.448881 0.103827 0.763528 0.276332 0.979158L2.69312 4.00014L0.276332 7.02113ZM4.27633 7.02113C4.10383 7.23676 4.13879 7.55141 4.35442 7.72391C4.57005 7.89642 4.8847 7.86146 5.0572 7.64583L7.72387 4.31249C7.86996 4.12988 7.86996 3.87041 7.72387 3.6878L5.0572 0.354463C4.8847 0.138832 4.57005 0.103871 4.35442 0.276377C4.13879 0.448881 4.10383 0.763527 4.27633 0.979158L6.69312 4.00014L4.27633 7.02113Z"
fill={shouldDisablePromote ? '#C1C8CD' : '#FDFDFE'}
/>
</svg>
</ButtonSolid>
<PromoteConfirmationModal
data={promoteModalData}
editingVersion={editingVersion}
onClose={() => setPromoteModalData(null)}
fetchEnvironments={() => {}}
/>
</>
);
};
export default PromoteVersionButton;

6
frontend/src/AppBuilder/Widgets/Modal.jsx
View file

@ -90,9 +90,9 @@ export const Modal = function Modal({
const onHideSideEffects = () => {
const canvasElement = document.querySelector('.page-container.canvas-container');
const realCanvasEl = document.getElementsByClassName('real-canvas')[0];
const allModalContainers = realCanvasEl.querySelectorAll('.modal');
const modalContainer = allModalContainers[allModalContainers.length - 1];
const hasManyModalsOpen = allModalContainers.length > 1;
const allModalContainers = realCanvasEl?.querySelectorAll('.modal');
const modalContainer = allModalContainers?.[allModalContainers.length - 1];
const hasManyModalsOpen = allModalContainers?.length > 1;
if (canvasElement && realCanvasEl && modalContainer) {
modalContainer.style.height = ``;

11
frontend/src/modules/common/components/BasePromoteReleaseButton/components/PromoteVersionButton/PromoteVersionButton.jsx
View file

@ -7,24 +7,25 @@ import useStore from '@/AppBuilder/_stores/store';
const PromoteVersionButton = () => {
const [promoteModalData, setPromoteModalData] = useState(null);
const { isSaving, editingVersion, appVersionEnvironment, environments, selectedEnvironment } = useStore(
const { isSaving, editingVersion, appVersionEnvironment, environments, selectedEnvironment, currentEnvIndex } = useStore(
(state) => ({
isSaving: state.app.isSaving,
editingVersion: state.currentVersionId,
selectedEnvironment: state.selectedEnvironment,
environments: state.environments,
appVersionEnvironment: state.appVersionEnvironment,
currentEnvIndex: state.environments?.findIndex((env) => env?.id === state.appVersionEnvironment?.id),
}),
shallow
);
const shouldDisablePromote = isSaving || selectedEnvironment?.priority < appVersionEnvironment?.priority;
// enable only after the environment details are loaded
const shouldDisablePromote = isSaving || selectedEnvironment?.priority < appVersionEnvironment?.priority || !appVersionEnvironment || !environments?.[currentEnvIndex + 1];
const handlePromote = () => {
const curentEnvIndex = environments.findIndex((env) => env.id === appVersionEnvironment.id);
setPromoteModalData({
current: appVersionEnvironment,
target: environments[curentEnvIndex + 1],
target: environments[currentEnvIndex + 1],
});
};
@ -54,7 +55,7 @@ const PromoteVersionButton = () => {
data={promoteModalData}
editingVersion={editingVersion}
onClose={() => setPromoteModalData(null)}
fetchEnvironments={() => {}}
fetchEnvironments={() => { }}
/>
</>
);

6
frontend/src/modules/common/components/BasePromoteReleaseButton/components/PromoteVersionButton/components/PromoteConfirmationModal/PromoteConfirmationModal.jsx
View file

@ -126,7 +126,7 @@ const PromoteConfirmationModal = React.memo(({ data, onClose }) => {
FROM
</div>
<div className="env-name" data-cy="current-env-name">
{capitalize(data?.current.name)}
{capitalize(data?.current?.name)}
</div>
</div>
<div className="arrow-container">
@ -144,11 +144,11 @@ const PromoteConfirmationModal = React.memo(({ data, onClose }) => {
TO
</div>
<div className="env-name" data-cy="target-env-name">
{capitalize(data?.target.name)}
{capitalize(data?.target?.name)}
</div>
</div>
</div>
{data?.current.name === 'development' && (
{data?.current?.name === 'development' && (
<div className="env-change-info" data-cy="env-change-info-text">
You won&apos;t be able to edit this version after promotion. Are you sure you want to continue?
</div>