diff --git a/packages/bruno-app/src/components/RequestTabs/RequestTab/ConfirmRequestClose/index.js b/packages/bruno-app/src/components/RequestTabs/RequestTab/ConfirmRequestClose/index.js deleted file mode 100644 index d02704636..000000000 --- a/packages/bruno-app/src/components/RequestTabs/RequestTab/ConfirmRequestClose/index.js +++ /dev/null @@ -1,49 +0,0 @@ -import React from 'react'; -import { IconAlertTriangle } from '@tabler/icons'; -import Modal from 'components/Modal'; - -const ConfirmRequestClose = ({ item, onCancel, onCloseWithoutSave, onSaveAndClose }) => { - return ( - { - e.stopPropagation(); - e.preventDefault(); - }} - hideFooter={true} - > -
- -

Hold on..

-
-
- You have unsaved changes in request {item.name}. -
- -
-
- -
-
- - -
-
-
- ); -}; - -export default ConfirmRequestClose; diff --git a/packages/bruno-app/src/components/RequestTabs/RequestTab/index.js b/packages/bruno-app/src/components/RequestTabs/RequestTab/index.js index c17e393b4..c9d904984 100644 --- a/packages/bruno-app/src/components/RequestTabs/RequestTab/index.js +++ b/packages/bruno-app/src/components/RequestTabs/RequestTab/index.js @@ -1,15 +1,13 @@ import React, { useState, useRef, Fragment } from 'react'; import get from 'lodash/get'; import { closeTabs } from 'providers/ReduxStore/slices/tabs'; -import { saveMultipleRequests, saveRequest } from 'providers/ReduxStore/slices/collections/actions'; -import SaveRequestsModal from 'providers/App/ConfirmAppClose/SaveRequestsModal'; +import SaveRequestsModal from 'components/SaveRequestsModal'; import { deleteRequestDraft } from 'providers/ReduxStore/slices/collections'; import { useTheme } from 'providers/Theme'; import { useDispatch, useSelector } from 'react-redux'; import darkTheme from 'themes/dark'; import lightTheme from 'themes/light'; import { findItemInCollection } from 'utils/collections'; -import ConfirmRequestClose from './ConfirmRequestClose'; import RequestTabNotFound from './RequestTabNotFound'; import SpecialTab from './SpecialTab'; import StyledWrapper from './StyledWrapper'; @@ -194,38 +192,23 @@ function SaveModal ({ tabsUidsToClose, collection, onCloseModal }) { onCloseModal(); } - const handleSaveAndClose = async itemsToSave => { - await dispatch(saveMultipleRequests(itemsToSave.map(item => ({ ...item, collectionUid: collection.uid })))); + const handleSaveAndClose = async () => { handleCloseTabs(); onCloseModal(); } if (!tabsUidsToClose.some(tabUid => tabUids.includes(tabUid))) return null; - const tabsAndItemsToShowSaveModal = tabsUidsToClose.reduce((acc, tabUid) => { + const itemsPendingSave = tabsUidsToClose.reduce((acc, tabUid) => { const item = findItemInCollection(collection, tabUid); - if (item && item.draft) acc[tabUid] = item; + if (item && item.draft) acc.push({ ...item, collectionUid: collection.uid }); return acc; - }, {}); + }, []); - const pendingSaveCount = Object.keys(tabsAndItemsToShowSaveModal).length; - if (pendingSaveCount === 0) return null; + if (!itemsPendingSave.length) return null; - if (pendingSaveCount === 1) { - const tabUid = Object.keys(tabsAndItemsToShowSaveModal)[0]; - const item = tabsAndItemsToShowSaveModal[tabUid]; - return ( - handleCloseWithoutSave([item])} - onSaveAndClose={() => handleSaveAndClose([item])} - /> - ); - } - return ( - diff --git a/packages/bruno-app/src/providers/App/ConfirmAppClose/SaveRequestsModal.js b/packages/bruno-app/src/components/SaveRequestsModal/index.js similarity index 62% rename from packages/bruno-app/src/providers/App/ConfirmAppClose/SaveRequestsModal.js rename to packages/bruno-app/src/components/SaveRequestsModal/index.js index 76a5f1a8b..764095730 100644 --- a/packages/bruno-app/src/providers/App/ConfirmAppClose/SaveRequestsModal.js +++ b/packages/bruno-app/src/components/SaveRequestsModal/index.js @@ -1,11 +1,61 @@ import React, { useEffect } from 'react'; +import { useDispatch } from 'react-redux'; import { pluralizeWord } from 'utils/common'; import { IconAlertTriangle } from '@tabler/icons'; import Modal from 'components/Modal'; +import { saveMultipleRequests } from 'providers/ReduxStore/slices/collections/actions'; + +const SingleRequestMessage = ({ item }) => { + return ( +
+ You have unsaved changes in request {item.name}. +
+ ) +} + +const MultipleRequestsMessage = ({ items, maxItems }) => { + return ( + <> +

+ Do you want to save the changes you made to the following{' '} + {items.length} {pluralizeWord('request', items.length)}? +

+ + + + {items.length > maxItems && ( +

+ ...{items.length - maxItems} additional{' '} + {pluralizeWord('request', items.length - maxItems)} not shown +

+ )} + + ) +} const SaveRequestsModal = ({ onSaveAndClose, onCloseWithoutSave, onCancel, items = [] }) => { + + const dispatch = useDispatch(); const MAX_UNSAVED_REQUESTS_TO_SHOW = 5; + const handleSaveAndClose = async () => { + await dispatch(saveMultipleRequests(items)); + onSaveAndClose(items); + } + + const handleCloseWithoutSave = async () => { + onCloseWithoutSave(items); + } + + useEffect(() => { if (items.length === 0) { return onCloseWithoutSave([]); @@ -32,31 +82,13 @@ const SaveRequestsModal = ({ onSaveAndClose, onCloseWithoutSave, onCancel, items

Hold on..

-

- Do you want to save the changes you made to the following{' '} - {items.length} {pluralizeWord('request', items.length)}? -

- -
    - {items.slice(0, MAX_UNSAVED_REQUESTS_TO_SHOW).map((item) => { - return ( -
  • - {item.filename} -
  • - ); - })} -
- - {items.length > MAX_UNSAVED_REQUESTS_TO_SHOW && ( -

- ...{items.length - MAX_UNSAVED_REQUESTS_TO_SHOW} additional{' '} - {pluralizeWord('request', items.length - MAX_UNSAVED_REQUESTS_TO_SHOW)} not shown -

- )} - + {items.length > 1 ? + : + + }
-
@@ -64,7 +96,7 @@ const SaveRequestsModal = ({ onSaveAndClose, onCloseWithoutSave, onCancel, items -
diff --git a/packages/bruno-app/src/providers/App/ConfirmAppClose/index.js b/packages/bruno-app/src/providers/App/ConfirmAppClose/index.js index 8b37feaa6..1b1bd3fa3 100644 --- a/packages/bruno-app/src/providers/App/ConfirmAppClose/index.js +++ b/packages/bruno-app/src/providers/App/ConfirmAppClose/index.js @@ -5,9 +5,8 @@ import { findCollectionByUid, flattenItems, isItemARequest } from 'utils/collect import each from 'lodash/each'; import filter from 'lodash/filter'; import groupBy from 'lodash/groupBy'; -import SaveRequestsModal from './SaveRequestsModal'; +import SaveRequestsModal from 'components/SaveRequestsModal'; import { isElectron } from 'utils/common/platform'; -import { saveMultipleRequests } from 'providers/ReduxStore/slices/collections/actions'; import { completeQuitFlow } from 'providers/ReduxStore/slices/app'; const ConfirmAppClose = () => { @@ -56,15 +55,10 @@ const ConfirmAppClose = () => { const quit = () => dispatch(completeQuitFlow()); - const handleSaveAndClose = async items => { - await dispatch(saveMultipleRequests(items)); - quit(); - } - return setShowConfirmClose(false)} onCloseWithoutSave={quit} - onSaveAndClose={handleSaveAndClose} />; + onSaveAndClose={quit} />; }; export default ConfirmAppClose;