Add a cookie (UI-only) tab (needs impl)

packages/bruno-app/src/components/CookieEditor/StyledWrapper.js

@@ -0,0 +1,20 @@
+import styled from 'styled-components';
+
+const StyledWrapper = styled.div`
+ table {
+ thead,
+ td {
+ border: 1px solid ${(props) => props.theme.table.border};
+
+ li {
+ background-color: ${(props) => props.theme.bg} !important;
+ }
+ }
+ }
+
+ .muted {
+ color: ${(props) => props.theme.colors.text.muted};
+ }
+`;
+
+export default StyledWrapper;

packages/bruno-app/src/components/CookieEditor/index.js

@@ -0,0 +1,70 @@
+import React from 'react';
+import get from 'lodash/get';
+import filter from 'lodash/filter';
+import { Inspector } from 'react-inspector';
+import { useTheme } from 'providers/Theme';
+import { findEnvironmentInCollection } from 'utils/collections';
+import StyledWrapper from './StyledWrapper';
+
+const KeyValueExplorer = ({ data, theme }) => {
+ data = data || {};
+
+ return (
+ <div>
+ <table className="border-collapse">
+ <tbody>
+ {Object.entries(data).map(([key, value]) => (
+ <tr key={key}>
+ <td className="px-2 py-1">{key}</td>
+ <td className="px-2 py-1">
+ <Inspector data={value} theme={theme} />
+ </td>
+ </tr>
+ ))}
+ </tbody>
+ </table>
+ </div>
+ );
+};
+
+const Cookies = ({ collection, theme }) => {
+ // const collectionVariablesFound = Object.keys(collection.collectionVariables).length > 0;
+ const collectionVariablesFound = true;
+
+ const demo_data = {
+ session_cookie: '1234567890',
+ user_id: '1234',
+ user_name: 'John Doe'
+ };
+
+ return (
+ <>
+ <h1 className="font-semibold mb-2">Current cookies</h1>
+ {collectionVariablesFound ? (
+ // <KeyValueExplorer data={collection.collectionVariables} theme={theme} />
+ <KeyValueExplorer data={demo_data} theme={theme} />
+ ) : (
+ <div className="muted text-xs">No cookies found</div>
+ )}
+ </>
+ );
+};
+
+const CookieEditor = ({ collection }) => {
+ const { storedTheme } = useTheme();
+
+ const reactInspectorTheme = storedTheme === 'light' ? 'chromeLight' : 'chromeDark';
+
+ return (
+ <StyledWrapper className="px-4 py-4">
+ <Cookies collection={collection} theme={reactInspectorTheme} />
+
+ <div className="mt-8 muted text-xs">
+ Note: As of today, cookies are active WIP. <br />
+ It's done when it's done, thx.
+ </div>
+ </StyledWrapper>
+ );
+};
+
+export default CookieEditor;

packages/bruno-app/src/components/RequestTabPanel/index.js

@@ -15,6 +15,7 @@ import NetworkError from 'components/ResponsePane/NetworkError';
 import RunnerResults from 'components/RunnerResults';
 import VariablesEditor from 'components/VariablesEditor';
 import CollectionSettings from 'components/CollectionSettings';
+import CookieEditor from 'components/CookieEditor';
 import { DocExplorer } from '@usebruno/graphql-docs';
 
 import StyledWrapper from './StyledWrapper';
@@ -133,7 +134,7 @@ const RequestTabPanel = () => {
  }
 
  if (focusedTab.type === 'cookies') {
- return <span>Hello world (cookie view)</span>;
+ return <CookieEditor collection={collection} />;
  // TODO @Tanja-4732 implement a cookie tab
  }
 

packages/bruno-app/src/components/RequestTabs/RequestTab/SpecialTab.js

@@ -1,5 +1,7 @@
 import React from 'react';
-import { IconVariable, IconSettings, IconRun } from '@tabler/icons';
+import { IconVariable, IconSettings, IconRun, IconCookie } from '@tabler/icons';
+
+export const specialTabList = ['collection-settings', 'variables', 'collection-runner', 'cookies'];
 
 const SpecialTab = ({ handleCloseClick, type }) => {
  const getTabInfo = (type) => {
@@ -28,6 +30,14 @@ const SpecialTab = ({ handleCloseClick, type }) => {
  </>
  );
  }
+ case 'cookies': {
+ return (
+ <>
+ <IconCookie size={18} strokeWidth={1.5} className="text-yellow-600" />
+ <span className="ml-1">Cookies</span>
+ </>
+ );
+ }
  }
  };
 

packages/bruno-app/src/components/RequestTabs/RequestTab/index.js

@@ -8,7 +8,7 @@ import { findItemInCollection } from 'utils/collections';
 import StyledWrapper from './StyledWrapper';
 import RequestTabNotFound from './RequestTabNotFound';
 import ConfirmRequestClose from './ConfirmRequestClose';
-import SpecialTab from './SpecialTab';
+import SpecialTab, { specialTabList } from './SpecialTab';
 import { useTheme } from 'providers/Theme';
 import darkTheme from 'themes/dark';
 import lightTheme from 'themes/light';
@@ -68,7 +68,8 @@ const RequestTab = ({ tab, collection }) => {
  return color;
  };
 
- if (['collection-settings', 'variables', 'collection-runner'].includes(tab.type)) {
+ // HACK this list of special tabs should be in a config file
+ if (specialTabList.includes(tab.type)) {
  return (
  <StyledWrapper className="flex items-center justify-between tab-container px-1">
  <SpecialTab handleCloseClick={handleCloseClick} type={tab.type} />