From db9aeec498d6023c03be1275ca76dba29159dd96 Mon Sep 17 00:00:00 2001 From: Anoop M D Date: Tue, 9 Jan 2024 22:12:40 +0530 Subject: [PATCH] feat: improved handling logic while closing unsaved tabs/requests --- .../bruno-app/src/components/Modal/index.js | 3 +- .../RequestTab/ConfirmRequestClose/index.js | 42 +++++++++++++------ .../RequestTabs/RequestTab/index.js | 4 ++ packages/bruno-app/src/globalStyles.js | 12 ++++++ .../App/ConfirmAppClose/SaveRequestsModal.js | 2 +- .../src/providers/ReduxStore/index.js | 14 ++++++- .../middlewares/debug/middleware.js | 15 +++++++ .../middlewares/tasks/middleware.js | 3 +- packages/bruno-app/src/themes/dark.js | 5 +++ packages/bruno-app/src/themes/light.js | 5 +++ 10 files changed, 87 insertions(+), 18 deletions(-) create mode 100644 packages/bruno-app/src/providers/ReduxStore/middlewares/debug/middleware.js diff --git a/packages/bruno-app/src/components/Modal/index.js b/packages/bruno-app/src/components/Modal/index.js index 7640464e..46cfef28 100644 --- a/packages/bruno-app/src/components/Modal/index.js +++ b/packages/bruno-app/src/components/Modal/index.js @@ -64,6 +64,7 @@ const Modal = ({ hideFooter, disableCloseOnOutsideClick, disableEscapeKey, + onClick, closeModalFadeTimeout = 500 }) => { const [isClosing, setIsClosing] = useState(false); @@ -96,7 +97,7 @@ const Modal = ({ classes += ' modal-footer-none'; } return ( - + onClick(e) : null}>
closeModal({ type: 'icon' })} /> {children} diff --git a/packages/bruno-app/src/components/RequestTabs/RequestTab/ConfirmRequestClose/index.js b/packages/bruno-app/src/components/RequestTabs/RequestTab/ConfirmRequestClose/index.js index 5a6a08c3..cc5374a0 100644 --- a/packages/bruno-app/src/components/RequestTabs/RequestTab/ConfirmRequestClose/index.js +++ b/packages/bruno-app/src/components/RequestTabs/RequestTab/ConfirmRequestClose/index.js @@ -1,30 +1,46 @@ -import Modal from 'components/Modal'; import React from 'react'; +import { IconAlertTriangle } from '@tabler/icons'; +import Modal from 'components/Modal'; const ConfirmRequestClose = ({ item, onCancel, onCloseWithoutSave, onSaveAndClose }) => { - const _handleCancel = ({ type }) => { - if (type === 'button') { - return onCloseWithoutSave(); - } - - return onCancel(); - }; - return ( { + e.stopPropagation(); + e.preventDefault(); + }} + hideFooter={true} > -
+
+ +

Hold on..

+
+
You have unsaved changes in request {item.name}.
+ +
+
+ +
+
+ + +
+
); }; diff --git a/packages/bruno-app/src/components/RequestTabs/RequestTab/index.js b/packages/bruno-app/src/components/RequestTabs/RequestTab/index.js index 63f4beba..b6c8ce69 100644 --- a/packages/bruno-app/src/components/RequestTabs/RequestTab/index.js +++ b/packages/bruno-app/src/components/RequestTabs/RequestTab/index.js @@ -2,6 +2,7 @@ import React, { useState } from 'react'; import get from 'lodash/get'; import { closeTabs } from 'providers/ReduxStore/slices/tabs'; import { saveRequest } from 'providers/ReduxStore/slices/collections/actions'; +import { deleteRequestDraft } from 'providers/ReduxStore/slices/collections'; import { useTheme } from 'providers/Theme'; import { useDispatch } from 'react-redux'; import darkTheme from 'themes/dark'; @@ -135,6 +136,9 @@ const RequestTab = ({ tab, collection }) => { className="flex px-2 close-icon-container" onClick={(e) => { if (!item.draft) return handleCloseClick(e); + + e.stopPropagation(); + e.preventDefault(); setShowConfirmClose(true); }} > diff --git a/packages/bruno-app/src/globalStyles.js b/packages/bruno-app/src/globalStyles.js index 34e5e70a..2cc81767 100644 --- a/packages/bruno-app/src/globalStyles.js +++ b/packages/bruno-app/src/globalStyles.js @@ -57,6 +57,18 @@ const GlobalStyle = createGlobalStyle` } } + .btn-danger { + color: ${(props) => props.theme.button.danger.color}; + background: ${(props) => props.theme.button.danger.bg}; + border: solid 1px ${(props) => props.theme.button.danger.border}; + + &:hover, + &:focus { + outline: none; + box-shadow: none; + } + } + .btn-secondary { color: ${(props) => props.theme.button.secondary.color}; background: ${(props) => props.theme.button.secondary.bg}; diff --git a/packages/bruno-app/src/providers/App/ConfirmAppClose/SaveRequestsModal.js b/packages/bruno-app/src/providers/App/ConfirmAppClose/SaveRequestsModal.js index fb261bad..cb04256b 100644 --- a/packages/bruno-app/src/providers/App/ConfirmAppClose/SaveRequestsModal.js +++ b/packages/bruno-app/src/providers/App/ConfirmAppClose/SaveRequestsModal.js @@ -94,7 +94,7 @@ const SaveRequestsModal = ({ onClose }) => {
-
diff --git a/packages/bruno-app/src/providers/ReduxStore/index.js b/packages/bruno-app/src/providers/ReduxStore/index.js index 269d1a59..525cd1c3 100644 --- a/packages/bruno-app/src/providers/ReduxStore/index.js +++ b/packages/bruno-app/src/providers/ReduxStore/index.js @@ -1,16 +1,28 @@ +import getConfig from 'next/config'; import { configureStore } from '@reduxjs/toolkit'; import tasksMiddleware from './middlewares/tasks/middleware'; +import debugMiddleware from './middlewares/debug/middleware'; import appReducer from './slices/app'; import collectionsReducer from './slices/collections'; import tabsReducer from './slices/tabs'; +const { publicRuntimeConfig } = getConfig(); +const isDevEnv = () => { + return publicRuntimeConfig.ENV === 'dev'; +}; + +let middleware = [tasksMiddleware.middleware]; +if (isDevEnv()) { + middleware = [...middleware, debugMiddleware.middleware]; +} + export const store = configureStore({ reducer: { app: appReducer, collections: collectionsReducer, tabs: tabsReducer }, - middleware: (getDefaultMiddleware) => getDefaultMiddleware().prepend(tasksMiddleware.middleware) + middleware: (getDefaultMiddleware) => getDefaultMiddleware().concat(middleware) }); export default store; diff --git a/packages/bruno-app/src/providers/ReduxStore/middlewares/debug/middleware.js b/packages/bruno-app/src/providers/ReduxStore/middlewares/debug/middleware.js new file mode 100644 index 00000000..22a5fe21 --- /dev/null +++ b/packages/bruno-app/src/providers/ReduxStore/middlewares/debug/middleware.js @@ -0,0 +1,15 @@ +import { createListenerMiddleware } from '@reduxjs/toolkit'; + +const debugMiddleware = createListenerMiddleware(); + +debugMiddleware.startListening({ + predicate: () => true, // it'll track every change + effect: (action, listenerApi) => { + console.debug('---redux action---'); + console.debug('action', action.type); // which action did it + console.debug('action.payload', action.payload); + console.debug(listenerApi.getState()); // the updated store + } +}); + +export default debugMiddleware; diff --git a/packages/bruno-app/src/providers/ReduxStore/middlewares/tasks/middleware.js b/packages/bruno-app/src/providers/ReduxStore/middlewares/tasks/middleware.js index 66fe3862..056136a1 100644 --- a/packages/bruno-app/src/providers/ReduxStore/middlewares/tasks/middleware.js +++ b/packages/bruno-app/src/providers/ReduxStore/middlewares/tasks/middleware.js @@ -1,9 +1,8 @@ import get from 'lodash/get'; import each from 'lodash/each'; import filter from 'lodash/filter'; -import { uuid } from 'utils/common'; import { createListenerMiddleware } from '@reduxjs/toolkit'; -import { completeQuitFlow, removeTaskFromQueue, hideHomePage } from 'providers/ReduxStore/slices/app'; +import { removeTaskFromQueue, hideHomePage } from 'providers/ReduxStore/slices/app'; import { addTab } from 'providers/ReduxStore/slices/tabs'; import { collectionAddFileEvent } from 'providers/ReduxStore/slices/collections'; import { findCollectionByUid, findItemInCollectionByPathname, getDefaultRequestPaneTab } from 'utils/collections/index'; diff --git a/packages/bruno-app/src/themes/dark.js b/packages/bruno-app/src/themes/dark.js index 3dda2505..a363b9fe 100644 --- a/packages/bruno-app/src/themes/dark.js +++ b/packages/bruno-app/src/themes/dark.js @@ -173,6 +173,11 @@ const darkTheme = { color: '#a5a5a5', bg: '#626262', border: '#626262' + }, + danger: { + color: '#fff', + bg: '#dc3545', + border: '#dc3545' } }, diff --git a/packages/bruno-app/src/themes/light.js b/packages/bruno-app/src/themes/light.js index 5b9f1a8b..6fcfcb71 100644 --- a/packages/bruno-app/src/themes/light.js +++ b/packages/bruno-app/src/themes/light.js @@ -177,6 +177,11 @@ const lightTheme = { color: '#9f9f9f', bg: '#efefef', border: 'rgb(234, 234, 234)' + }, + danger: { + color: '#fff', + bg: '#dc3545', + border: '#dc3545' } },