feat: assertions implementation in UI

packages/bruno-app/src/components/RequestPane/Assert/StyledWrapper.js

@@ -0,0 +1,56 @@
+import styled from 'styled-components';
+
+const Wrapper = styled.div`
+  table {
+    width: 100%;
+    border-collapse: collapse;
+    font-weight: 600;
+    table-layout: fixed;
+
+    thead,
+    td {
+      border: 1px solid ${(props) => props.theme.table.border};
+    }
+
+    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;
+      }
+    }
+  }
+
+  .btn-add-assertion {
+    font-size: 0.8125rem;
+  }
+
+  input[type='text'] {
+    width: 100%;
+    border: solid 1px transparent;
+    outline: none !important;
+    background-color: inherit;
+
+    &:focus {
+      outline: none !important;
+      border: solid 1px transparent;
+    }
+  }
+
+  input[type='checkbox'] {
+    cursor: pointer;
+    position: relative;
+    top: 1px;
+  }
+`;
+
+export default Wrapper;

packages/bruno-app/src/components/RequestPane/Assert/index.js

@@ -0,0 +1,129 @@
+import React from 'react';
+import get from 'lodash/get';
+import cloneDeep from 'lodash/cloneDeep';
+import { IconTrash } from '@tabler/icons';
+import { useDispatch } from 'react-redux';
+import { useTheme } from 'providers/Theme';
+import { addAssertion, updateAssertion, deleteAssertion } from 'providers/ReduxStore/slices/collections';
+import { sendRequest, saveRequest } from 'providers/ReduxStore/slices/collections/actions';
+import SingleLineEditor from 'components/SingleLineEditor';
+import StyledWrapper from './StyledWrapper';
+
+const Assertions = ({ item, collection }) => {
+  const dispatch = useDispatch();
+  const { storedTheme } = useTheme();
+  const assertions = item.draft ? get(item, 'draft.request.assertions') : get(item, 'request.assertions');
+
+  const handleAddAssertion = () => {
+    dispatch(
+      addAssertion({
+        itemUid: item.uid,
+        collectionUid: collection.uid
+      })
+    );
+  };
+
+  const onSave = () => dispatch(saveRequest(item.uid, collection.uid));
+  const handleRun = () => dispatch(sendRequest(item, collection.uid));
+  const handleAssertionChange = (e, _assertion, type) => {
+    const assertion = cloneDeep(_assertion);
+    switch (type) {
+      case 'name': {
+        assertion.name = e.target.value;
+        break;
+      }
+      case 'value': {
+        assertion.value = e.target.value;
+        break;
+      }
+      case 'enabled': {
+        assertion.enabled = e.target.checked;
+        break;
+      }
+    }
+    dispatch(
+      updateAssertion({
+        assertion: assertion,
+        itemUid: item.uid,
+        collectionUid: collection.uid
+      })
+    );
+  };
+
+  const handleRemoveAssertion = (assertion) => {
+    dispatch(
+      deleteAssertion({
+        assertUid: assertion.uid,
+        itemUid: item.uid,
+        collectionUid: collection.uid
+      })
+    );
+  };
+
+  return (
+    <StyledWrapper className="w-full">
+      <table>
+        <thead>
+          <tr>
+            <td>Expr</td>
+            <td>Value</td>
+            <td></td>
+          </tr>
+        </thead>
+        <tbody>
+          {assertions && assertions.length
+            ? assertions.map((assertion, index) => {
+                return (
+                  <tr key={assertion.uid}>
+                    <td>
+                      <input
+                        type="text"
+                        autoComplete="off"
+                        autoCorrect="off"
+                        autoCapitalize="off"
+                        spellCheck="false"
+                        value={assertion.name}
+                        className="mousetrap"
+                        onChange={(e) => handleAssertionChange(e, assertion, 'name')}
+                      />
+                    </td>
+                    <td>
+                      <SingleLineEditor
+                        value={assertion.value}
+                        theme={storedTheme}
+                        onSave={onSave}
+                        onChange={(newValue) => handleAssertionChange({
+                          target: {
+                            value: newValue
+                          }
+                        }, assertion, 'value')}
+                        onRun={handleRun}
+                        collection={collection}
+                      />
+                    </td>
+                    <td>
+                      <div className="flex items-center">
+                        <input
+                          type="checkbox"
+                          checked={assertion.enabled}
+                          className="mr-3 mousetrap"
+                          onChange={(e) => handleAssertionChange(e, assertion, 'enabled')}
+                        />
+                        <button onClick={() => handleRemoveAssertion(assertion)}>
+                          <IconTrash strokeWidth={1.5} size={20} />
+                        </button>
+                      </div>
+                    </td>
+                  </tr>
+                );
+              })
+            : null}
+        </tbody>
+      </table>
+      <button className="btn-add-assertion text-link pr-2 py-3 mt-2 select-none" onClick={handleAddAssertion}>
+        + Add Assertion
+      </button>
+    </StyledWrapper>
+  );
+};
+export default Assertions;

packages/bruno-app/src/components/RequestPane/HttpRequestPane/index.js

@@ -8,6 +8,7 @@ import RequestHeaders from 'components/RequestPane/RequestHeaders';
 import RequestBody from 'components/RequestPane/RequestBody';
 import RequestBodyMode from 'components/RequestPane/RequestBody/RequestBodyMode';
 import Vars from 'components/RequestPane/Vars';
+import Assert from 'components/RequestPane/Assert';
 import Script from 'components/RequestPane/Script';
 import Tests from 'components/RequestPane/Tests';
 import StyledWrapper from './StyledWrapper';
@@ -40,6 +41,9 @@ const HttpRequestPane = ({ item, collection, leftPaneWidth }) => {
       case 'vars': {
         return <Vars item={item} collection={collection} />;
       }
+      case 'assert': {
+        return <Assert item={item} collection={collection} />;
+      }
       case 'script': {
         return <Script item={item} collection={collection} />;
       }
@@ -71,7 +75,7 @@ const HttpRequestPane = ({ item, collection, leftPaneWidth }) => {
     <StyledWrapper className="flex flex-col h-full relative">
       <div className="flex items-center tabs" role="tablist">
         <div className={getTabClassname('params')} role="tab" onClick={() => selectTab('params')}>
-          Params
+          Query
         </div>
         <div className={getTabClassname('body')} role="tab" onClick={() => selectTab('body')}>
           Body
@@ -85,6 +89,9 @@ const HttpRequestPane = ({ item, collection, leftPaneWidth }) => {
         <div className={getTabClassname('script')} role="tab" onClick={() => selectTab('script')}>
           Script
         </div>
+        <div className={getTabClassname('assert')} role="tab" onClick={() => selectTab('assert')}>
+          Assert
+        </div>
         <div className={getTabClassname('tests')} role="tab" onClick={() => selectTab('tests')}>
           Tests
         </div>

packages/bruno-app/src/components/RequestPane/Vars/VarsTable/index.js

@@ -6,6 +6,7 @@ import { useTheme } from 'providers/Theme';
 import { addVar, updateVar, deleteVar } from 'providers/ReduxStore/slices/collections';
 import { sendRequest, saveRequest } from 'providers/ReduxStore/slices/collections/actions';
 import SingleLineEditor from 'components/SingleLineEditor';
+import Tooltip from 'components/Tooltip';
 import StyledWrapper from './StyledWrapper';
 
 const VarsTable = ({ item, collection, vars, varType }) => {
@@ -67,7 +68,21 @@ const VarsTable = ({ item, collection, vars, varType }) => {
         <thead>
           <tr>
             <td>Name</td>
-            <td>Value</td>
+            { varType === 'request' ? (
+              <td>
+                <div className='flex items-center'>
+                  <span>Value</span>
+                  <Tooltip text="You can write any valid JS Template Literal here" tooltipId="request-var"/>
+                </div>
+              </td>
+            ) :  (
+              <td>
+                <div className='flex items-center'>
+                  <span>Expr</span>
+                  <Tooltip text="You can write any valid JS expression here" tooltipId="response-var"/>
+                </div>
+              </td>
+            )}
             <td></td>
           </tr>
         </thead>

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

@@ -45,6 +45,8 @@ const StyledWrapper = styled.div`
 
     .CodeMirror-line {
       color: ${(props) => props.theme.text};
+      padding-left: 0;
+      padding-right: 0;
     }
   }