updated table to show cookies separately and add new details

usebruno · Jan 21, 2025 · d2b6c6d · d2b6c6d
1 parent c094d83
commit d2b6c6d
Show file tree

Hide file tree

Showing 2 changed files with 72 additions and 21 deletions.
diff --git a/packages/bruno-app/src/components/Cookies/StyledWrapper.js b/packages/bruno-app/src/components/Cookies/StyledWrapper.js
@@ -3,13 +3,26 @@ import styled from 'styled-components';
 const Wrapper = styled.div`
   table {
     width: 100%;
+    border-collapse: collapse;
+    font-weight: 300;
     table-layout: fixed;
 
     thead {
       color: ${(props) => props.theme.table.thead.color};
       font-size: 0.8125rem;
       user-select: none;
     }
+    td {
+      padding: 6px 10px;
+
+      &:nth-child(1) {
+        width: 30%;
+      }
+
+      &:nth-child(3) {
+        width: 70px;
+      }
+    }
   }
 `;
 

diff --git a/packages/bruno-app/src/components/Cookies/index.js b/packages/bruno-app/src/components/Cookies/index.js
@@ -2,7 +2,7 @@ import React from 'react';
 import { useSelector, useDispatch } from 'react-redux';
 import Modal from 'components/Modal';
 import { IconTrash } from '@tabler/icons';
-import { deleteCookiesForDomain } from 'providers/ReduxStore/slices/app';
+import { deleteCookie } from 'providers/ReduxStore/slices/app';
 import toast from 'react-hot-toast';
 
 import StyledWrapper from './StyledWrapper';
@@ -11,39 +11,77 @@ const CollectionProperties = ({ onClose }) => {
   const dispatch = useDispatch();
   const cookies = useSelector((state) => state.app.cookies) || [];
 
-  const handleDeleteDomain = (domain) => {
-    dispatch(deleteCookiesForDomain(domain))
+  const handleDeleteCookie = (domain, path, cookieKey) => {
+    dispatch(deleteCookie(domain, path, cookieKey))
       .then(() => {
-        toast.success('Domain deleted successfully');
+        toast.success('Cookie deleted successfully');
       })
-      .catch((err) => console.log(err) && toast.error('Failed to delete domain'));
+      .catch((err) => {
+        console.error(err);
+        toast.error('Failed to delete cookie');
+      });
   };
 
+
+
   return (
-    <Modal size="md" title="Cookies" hideFooter={true} handleCancel={onClose}>
+    <Modal size="lg" title="Cookies" hideFooter={true} handleCancel={onClose}>
       <StyledWrapper>
-        <table className="w-full border-collapse" style={{ marginTop: '-1rem' }}>
+        <table
+          className="w-full border-collapse"
+          style={{ marginTop: '-1rem' }}
+        >
           <thead>
             <tr>
-              <th className="py-2 px-2 text-left">Domain</th>
-              <th className="py-2 px-2 text-left">Cookie</th>
-              <th className="py-2 px-2 text-center" style={{ width: 80 }}>
+              <th className="py-2 px-2 text-left" style={{ width: 120 }}>Domain</th>
+              <th className="py-2 px-2 text-left" style={{ width: 150 }}>Name</th>
+              <th className="py-2 px-2 text-left">Value</th>
+              <th className="py-2 px-2 text-left path-column" style={{ width: 80 }}>Path</th>
+              <th className="py-2 px-2 text-left" style={{ width: 160 }}>Expiration Date</th>
+              <th
+                className="py-2 px-2 text-center"
+                style={{ width: 80 }}
+              >
                 Actions
               </th>
             </tr>
           </thead>
           <tbody>
-            {cookies.map((cookie) => (
-              <tr key={cookie.domain}>
-                <td className="py-2 px-2">{cookie.domain}</td>
-                <td className="py-2 px-2 break-all">{cookie.cookieString}</td>
-                <td className="text-center">
-                  <button tabIndex="-1" onClick={() => handleDeleteDomain(cookie.domain)}>
-                    <IconTrash strokeWidth={1.5} size={20} />
-                  </button>
-                </td>
-              </tr>
-            ))}
+            {cookies.map((domainWithCookies) =>
+              domainWithCookies.cookies.map((singleCookie) => (
+                <tr
+                  key={`${domainWithCookies.domain}_${singleCookie.path}_${singleCookie.key}`}
+                >
+                  <td className="py-2 px-2">{domainWithCookies.domain}</td>
+                  <td className="py-2 px-2 break-all">{singleCookie.key}</td>
+                  <td className="py-2 px-2 break-all w-full">
+                    {singleCookie.value}
+                  </td>
+                  <td className="py-2 px-2 break-all path-column">
+                    {singleCookie.path}
+                  </td>
+                  <td className="py-2 px-2 break-all">
+                    {singleCookie.expires
+                      ? new Date(singleCookie.expires).toLocaleString()
+                      : 'Session'}
+                  </td>
+                  <td className="text-center">
+                    <button
+                      tabIndex="-1"
+                      onClick={() =>
+                        handleDeleteCookie(
+                          domainWithCookies.domain,
+                          singleCookie.path,
+                          singleCookie.key
+                        )
+                      }
+                    >
+                      <IconTrash strokeWidth={1.5} size={20} />
+                    </button>
+                  </td>
+                </tr>
+              ))
+            )}
           </tbody>
         </table>
       </StyledWrapper>