diff --git a/packages/bruno-app/src/components/Cookies/ModifyCookieModal/index.js b/packages/bruno-app/src/components/Cookies/ModifyCookieModal/index.js index 9e236d736..a5ef2dfe9 100644 --- a/packages/bruno-app/src/components/Cookies/ModifyCookieModal/index.js +++ b/packages/bruno-app/src/components/Cookies/ModifyCookieModal/index.js @@ -69,7 +69,7 @@ const ModifyCookieModal = ({ onClose, domain, cookie }) => { const handleCookieDispatch = (cookie, domain, modValues, onClose) => { if (cookie) { - dispatch(modifyCookie(domain, cookie, cookie.path, cookie.key, modValues)) + dispatch(modifyCookie(domain, cookie, modValues)) .then(() => { toast.success('Cookie modified successfully'); onClose(); @@ -241,6 +241,36 @@ const ModifyCookieModal = ({ onClose, domain, cookie }) => { ) : (
+
+ + + {formik.touched.domain && formik.errors.domain && ( +
{formik.errors.domain}
+ )} +
+
+ + + {formik.touched.path && formik.errors.path && ( +
{formik.errors.path}
+ )} +
-
- - - {formik.touched.domain && formik.errors.domain && ( -
{formik.errors.domain}
- )} -
-
- - - {formik.touched.path && formik.errors.path && ( -
{formik.errors.path}
- )} -
{/* Date Picker */} diff --git a/packages/bruno-app/src/components/Cookies/StyledWrapper.js b/packages/bruno-app/src/components/Cookies/StyledWrapper.js index 62de6791e..4d7f62067 100644 --- a/packages/bruno-app/src/components/Cookies/StyledWrapper.js +++ b/packages/bruno-app/src/components/Cookies/StyledWrapper.js @@ -34,19 +34,31 @@ const Wrapper = styled.div` .scroll-box { max-height: 500px; overflow-y: auto; - -webkit-overflow-scrolling: touch; - overflow-scrolling: touch; background: - /* Shadow Cover TOP */ linear-gradient( - ${(props) => props.theme.modal.body.bg} 20%, - rgba(255, 255, 255, 0) - ) - center top, - /* Shadow Cover BOTTOM */ linear-gradient(rgba(255, 255, 255, 0), ${(props) => props.theme.modal.body.bg} 80%) - center bottom, - /* Shadow TOP */ linear-gradient(rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0) 100%) center top, - /* Shadow BOTTOM */ linear-gradient(rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.1) 100%) center bottom; + /* Shadow Cover TOP */ + linear-gradient( + ${(props) => props.theme.modal.body.bg} 20%, + rgba(255, 255, 255, 0) + ) center top, + + /* Shadow Cover BOTTOM */ + linear-gradient( + rgba(255, 255, 255, 0), + ${(props) => props.theme.modal.body.bg} 80% + ) center bottom, + + /* Shadow TOP */ + linear-gradient( + rgba(0, 0, 0, 0.1) 0%, + rgba(0, 0, 0, 0) 100% + ) center top, + + /* Shadow BOTTOM */ + linear-gradient( + rgba(0, 0, 0, 0) 0%, + rgba(0, 0, 0, 0.1) 100% + ) center bottom; background-repeat: no-repeat; background-size: 100% 30px, 100% 30px, 100% 10px, 100% 10px; diff --git a/packages/bruno-app/src/components/Cookies/index.js b/packages/bruno-app/src/components/Cookies/index.js index b1ae7ef03..bf938024f 100644 --- a/packages/bruno-app/src/components/Cookies/index.js +++ b/packages/bruno-app/src/components/Cookies/index.js @@ -10,20 +10,69 @@ import StyledWrapper from './StyledWrapper'; import moment from 'moment'; import { Tooltip } from 'react-tooltip'; +const ClearDomainCookiesModal = ({ onClose, domain, onClear }) => ( + +
+ +

Hold on..

+
+
+ Are you sure you want to clear all cookies for the domain {domain}? +
+ +
+
+ +
+
+ +
+
+ +); + +const DeleteCookieModal = ({ onClose, cookieName, onDelete }) => ( + +
+ +

Hold on..

+
+
+ Are you sure you want to delete the cookie {cookieName}? +
+ +
+
+ +
+
+ +
+
+ +); + const CollectionProperties = ({ onClose }) => { const dispatch = useDispatch(); const cookies = useSelector((state) => state.app.cookies) || []; const [isModifyCookieModalOpen, setIsModifyCookieModalOpen] = useState(false); - const [currentDomain, setCurrentDomain] = useState(''); + const [currentDomain, setCurrentDomain] = useState(null); const [cookieToEdit, setCookieToEdit] = useState(null); - const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false); - const [deleteModalContent, setDeleteModalContent] = useState(null); - const [deleteModalTitle, setDeleteModalTitle] = useState(''); - const [onDeleteAction, setOnDeleteAction] = useState(() => {}); - const [searchText, setSearchText] = useState(''); + + const [domainToClear, setDomainToClear] = useState(null); + const [cookieToDelete, setCookieToDelete] = useState(null); + const [searchText, setSearchText] = useState(null); const handleAddCookie = (domain) => { - setCurrentDomain(domain); + if(domain) setCurrentDomain(domain); setIsModifyCookieModalOpen(true); }; @@ -33,124 +82,44 @@ const CollectionProperties = ({ onClose }) => { setIsModifyCookieModalOpen(true); }; - const openModal = (title, content, onDelete) => { - setDeleteModalTitle(title); - setDeleteModalContent(content); - setOnDeleteAction(() => onDelete); - setIsDeleteModalOpen(true); + const handleClearDomainCookies = (domain) => { + setDomainToClear(domain); }; - const closeDeleteModal = () => { - setIsDeleteModalOpen(false); - }; - - const handleDeleteDomain = (domain) => { - openModal('Delete Domain', `Are you sure you want to delete the domain ${domain}?`, () => { - dispatch(deleteCookiesForDomain(domain)) - .then(() => { - toast.success('Domain deleted successfully'); - }) - .catch((err) => console.log(err) && toast.error('Failed to delete domain')); - closeDeleteModal(); - }); + const clearDomainCookiesAction = () => { + dispatch(deleteCookiesForDomain(domainToClear)) + .then(() => { + toast.success('Domain cookies cleared successfully'); + }) + .catch((err) => console.log(err) && toast.error('Failed to clear domain cookies')); + setDomainToClear(null); }; const handleDeleteCookie = (domain, path, key) => { - openModal('Delete Cookie', `Are you sure you want to delete the cookie ${key}?`, () => { + setCookieToDelete({ key, domain, path }); + }; + + const deleteCookieAction = () => { + if (cookieToDelete) { + const { domain, path, key } = cookieToDelete; dispatch(deleteCookie(domain, path, key)) .then(() => { toast.success('Cookie deleted successfully'); }) .catch((err) => console.log(err) && toast.error('Failed to delete cookie')); - closeDeleteModal(); - }); + } + setCookieToDelete(null); }; const filteredCookies = useMemo(() => { - return cookies.filter((cookie) => cookie.domain.toLowerCase().includes(searchText.toLowerCase())); + if (!searchText) return cookies; + + return cookies.filter((cookie) => + cookie.domain.toLowerCase().includes(searchText.toLowerCase()) + ); }, [cookies, searchText]); - if (!cookies || !cookies.length) { - return ( - <> - - -
- -

No cookies found

-

Add cookies to get started

- -
- - - {isModifyCookieModalOpen && ( - { - setCookieToEdit(null); - setCurrentDomain(''); - setIsModifyCookieModalOpen(false); - }} - domain={currentDomain} - cookie={cookieToEdit} - /> - )} - - ); - } - - if (cookies.length && !filteredCookies.length) { - return ( - <> - -

Cookies

- { - setSearchText(e.target.value); - }} - className="block textbox non-passphrase-input h-9 ml-auto" - /> - - - } - > - -
- -

No search results

-

Try a different search term

-
- - - - ); - } + const shouldShowHeader = cookies && cookies.length > 0; return ( <> @@ -159,171 +128,203 @@ const CollectionProperties = ({ onClose }) => { title="Cookies" hideFooter={true} handleCancel={onClose} - customHeader={ + customHeader={shouldShowHeader ? (

Cookies

setSearchText(e.target.value)} className="block textbox non-passphrase-input h-9 ml-auto" /> - } + ) : null} > -
- - {filteredCookies.map((domainWithCookies, i) => ( - - -
- {domainWithCookies.domain} - - ({domainWithCookies.cookies.length}{' '} - {domainWithCookies.cookies.length === 1 ? 'cookie' : 'cookies'}) - -
- - + {!cookies || !cookies.length ? ( + // No cookies found +
+ +

No cookies found

+

Add cookies to get started

+ +
+ ) : cookies.length && !filteredCookies.length ? ( + // No search results +
+ +

No search results

+

Try a different search term

+
+ ) : ( + // Show cookies list +
+ + {filteredCookies.map((domainWithCookies, i) => ( + + +
+ {domainWithCookies.domain} + + ({domainWithCookies.cookies.length}{' '} + {domainWithCookies.cookies.length === 1 ? 'cookie' : 'cookies'}) + +
+ + +
-
- - -
- - - - - - - - - - - - - - {domainWithCookies.cookies.map((cookie) => ( - - - - - - - - + + +
+
NameValuePathExpiresSecureHTTP OnlyActions
{cookie.key} - {cookie.value} - - {cookie.path || '/'} - - {cookie.expires && moment(cookie.expires).isValid() - ? new Date(cookie.expires).toLocaleString() - : 'Session Cookie'} - - {cookie.expires && moment(cookie.expires).isValid() && ( - - )} - {cookie.secure ? '✓' : ''}{cookie.httpOnly ? '✓' : ''} -
- - -
-
+ + + + + + + + + - ))} - -
NameValuePathExpiresSecureHTTP OnlyActions
-
- - - ))} - -
+ + + {domainWithCookies.cookies.map((cookie) => ( + + + {cookie.key} + + + + {cookie.value} + + + {cookie.path || '/'} + + + {cookie.expires && moment(cookie.expires).isValid() + ? new Date(cookie.expires).toLocaleString() + : 'Session'} + + {cookie.expires && moment(cookie.expires).isValid() && ( + + )} + + {cookie.secure ? '✓' : ''} + {cookie.httpOnly ? '✓' : ''} + +
+ + +
+ + + ))} + + +
+ + + ))} + +
+ )} - {isDeleteModalOpen && ( - -
- -

Hold on..

-
-
{deleteModalContent}
- -
-
- -
-
- -
-
- - )} {isModifyCookieModalOpen && ( { setCookieToEdit(null); - setCurrentDomain(''); + setCurrentDomain(null); setIsModifyCookieModalOpen(false); }} domain={currentDomain} cookie={cookieToEdit} /> )} + {domainToClear ? ( + setDomainToClear(null)} + domain={domainToClear} + onClear={clearDomainCookiesAction} + /> + ) : null} + {cookieToDelete ? ( + setCookieToDelete(null)} + cookieName={cookieToDelete.key} + onDelete={deleteCookieAction} + /> + ) : null} ); }; diff --git a/packages/bruno-app/src/providers/ReduxStore/slices/app.js b/packages/bruno-app/src/providers/ReduxStore/slices/app.js index 9324b279b..f19c51101 100644 --- a/packages/bruno-app/src/providers/ReduxStore/slices/app.js +++ b/packages/bruno-app/src/providers/ReduxStore/slices/app.js @@ -138,7 +138,7 @@ export const addCookie = (domain, cookie) => (dispatch, getState) => { }); }; -export const modifyCookie = (domain, oldCookie, path, key, cookie) => (dispatch, getState) => { +export const modifyCookie = (domain, oldCookie, cookie) => (dispatch, getState) => { return new Promise((resolve, reject) => { const { ipcRenderer } = window;