fix: fixed many bugs (too many to count :) )

packages/bruno-app/src/components/VariablesView/VariablesTable/index.js

@@ -1,10 +1,24 @@
 import React from 'react';
+import forOwn from 'lodash/forOwn';
+import cloneDeep from 'lodash/cloneDeep';
+import { uuid } from 'utils/common';
 import StyledWrapper from './StyledWrapper';
 
-const VariablesTable = ({ variables }) => {
+const VariablesTable = ({ variables, collectionVariables }) => {
+  const collectionVars = [];
+
+  forOwn(cloneDeep(collectionVariables), (value, key) => {
+    collectionVars.push({
+      uid: uuid(),
+      name: key,
+      value: value
+    });
+  });
+
   return (
     <StyledWrapper>
       <div className="flex flex-col w-full">
+        <div className='mb-2 font-medium'>Environment Variables</div>
         {(variables && variables.length) ? variables.map((variable) => {
           return (
             <div key={variable.uid} className="flex">
@@ -13,6 +27,16 @@ const VariablesTable = ({ variables }) => {
             </div>
           );
         }) : null}
+
+        <div className='mt-2 font-medium'>Collection Variables</div>
+        {(collectionVars && collectionVars.length) ? collectionVars.map((variable) => {
+          return (
+            <div key={variable.uid} className="flex">
+              <div className='variable-name text-yellow-600 text-right pr-2'>{variable.name}</div>
+              <div className='variable-value pl-2 whitespace-normal text-left flex-grow'>{variable.value}</div>
+            </div>
+          );
+        }) : null}
       </div>
     </StyledWrapper>
   );