Revert: Re-add post response vars (#6307)

* Partial Revert "remove: presets and response var (#6195)"

This reverts commit 786a3414b8 while keeping code related to presets deleted

* revert: remove global environment variables assignment

packages/bruno-app/src/components/CollectionSettings/Vars/index.js

@@ -4,18 +4,23 @@ import VarsTable from './VarsTable';
 import StyledWrapper from './StyledWrapper';
 import { saveCollectionSettings } from 'providers/ReduxStore/slices/collections/actions';
 import { useDispatch } from 'react-redux';
-import DeprecationWarning from 'components/DeprecationWarning';
 
 const Vars = ({ collection }) => {
   const dispatch = useDispatch();
   const requestVars = collection.draft?.root ? get(collection, 'draft.root.request.vars.req', []) : get(collection, 'root.request.vars.req', []);
+  const responseVars = collection.draft?.root ? get(collection, 'draft.root.request.vars.res', []) : get(collection, 'root.request.vars.res', []);
   const handleSave = () => dispatch(saveCollectionSettings(collection.uid));
 
   return (
     <StyledWrapper className="w-full flex flex-col">
       <div className="flex-1 mt-2">
+        <div className="mb-1 title text-xs">Pre Request</div>
         <VarsTable collection={collection} vars={requestVars} varType="request" />
       </div>
+      <div className="flex-1">
+        <div className="mt-1 mb-1 title text-xs">Post Response</div>
+        <VarsTable collection={collection} vars={responseVars} varType="response" />
+      </div>
       <div className="mt-6">
         <button type="submit" className="submit btn btn-sm btn-secondary" onClick={handleSave}>
           Save

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

@@ -32,17 +32,32 @@ const CollectionSettings = ({ collection }) => {
   const hasTests = root?.request?.tests;
   const hasDocs = root?.docs;
 
-  const headers = collection.draft?.root ? get(collection, 'draft.root.request.headers', []) : get(collection, 'root.request.headers', []);
+  const headers = collection.draft?.root
+    ? get(collection, 'draft.root.request.headers', [])
+    : get(collection, 'root.request.headers', []);
   const activeHeadersCount = headers.filter((header) => header.enabled).length;
 
-  const requestVars = collection.draft?.root ? get(collection, 'draft.root.request.vars.req', []) : get(collection, 'root.request.vars.req', []);
-  const activeVarsCount = requestVars.filter((v) => v.enabled).length;
-  const authMode = (collection.draft?.root ? get(collection, 'draft.root.request.auth', {}) : get(collection, 'root.request.auth', {})).mode || 'none';
+  const requestVars = collection.draft?.root
+    ? get(collection, 'draft.root.request.vars.req', [])
+    : get(collection, 'root.request.vars.req', []);
+  const responseVars = collection.draft?.root
+    ? get(collection, 'draft.root.request.vars.res', [])
+    : get(collection, 'root.request.vars.res', []);
+  const activeVarsCount = requestVars.filter((v) => v.enabled).length + responseVars.filter((v) => v.enabled).length;
+  const authMode
+    = (collection.draft?.root ? get(collection, 'draft.root.request.auth', {}) : get(collection, 'root.request.auth', {}))
+      .mode || 'none';
 
-  const proxyConfig = collection.draft?.brunoConfig ? get(collection, 'draft.brunoConfig.proxy', {}) : get(collection, 'brunoConfig.proxy', {});
+  const proxyConfig = collection.draft?.brunoConfig
+    ? get(collection, 'draft.brunoConfig.proxy', {})
+    : get(collection, 'brunoConfig.proxy', {});
   const proxyEnabled = proxyConfig.hostname ? true : false;
-  const clientCertConfig = collection.draft?.brunoConfig ? get(collection, 'draft.brunoConfig.clientCertificates.certs', []) : get(collection, 'brunoConfig.clientCertificates.certs', []);
-  const protobufConfig = collection.draft?.brunoConfig ? get(collection, 'draft.brunoConfig.protobuf', {}) : get(collection, 'brunoConfig.protobuf', {});
+  const clientCertConfig = collection.draft?.brunoConfig
+    ? get(collection, 'draft.brunoConfig.clientCertificates.certs', [])
+    : get(collection, 'brunoConfig.clientCertificates.certs', []);
+  const protobufConfig = collection.draft?.brunoConfig
+    ? get(collection, 'draft.brunoConfig.protobuf', {})
+    : get(collection, 'brunoConfig.protobuf', {});
 
   const getTabPanel = (tab) => {
     switch (tab) {
@@ -68,11 +83,7 @@ const CollectionSettings = ({ collection }) => {
         return <ProxySettings collection={collection} />;
       }
       case 'clientCert': {
-        return (
-          <ClientCertSettings
-            collection={collection}
-          />
-        );
+        return <ClientCertSettings collection={collection} />;
       }
       case 'protobuf': {
         return <Protobuf collection={collection} />;

packages/bruno-app/src/components/FolderSettings/Vars/index.js

@@ -8,13 +8,19 @@ import { useDispatch } from 'react-redux';
 const Vars = ({ collection, folder }) => {
   const dispatch = useDispatch();
   const requestVars = folder.draft ? get(folder, 'draft.request.vars.req', []) : get(folder, 'root.request.vars.req', []);
+  const responseVars = folder.draft ? get(folder, 'draft.request.vars.res', []) : get(folder, 'root.request.vars.res', []);
   const handleSave = () => dispatch(saveFolderRoot(collection.uid, folder.uid));
 
   return (
     <StyledWrapper className="w-full flex flex-col">
       <div className="flex-1 mt-2">
+        <div className="mb-1 title text-xs">Pre Request</div>
         <VarsTable folder={folder} collection={collection} vars={requestVars} varType="request" />
       </div>
+      <div className="flex-1">
+        <div className="mt-1 mb-1 title text-xs">Post Response</div>
+        <VarsTable folder={folder} collection={collection} vars={responseVars} varType="response" />
+      </div>
       <div className="mt-6">
         <button type="submit" className="submit btn btn-sm btn-secondary" onClick={handleSave}>
           Save

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

@@ -28,7 +28,8 @@ const FolderSettings = ({ collection, folder }) => {
   const activeHeadersCount = headers.filter((header) => header.enabled).length;
 
   const requestVars = folderRoot?.request?.vars?.req || [];
-  const activeVarsCount = requestVars.filter((v) => v.enabled).length;
+  const responseVars = folderRoot?.request?.vars?.res || [];
+  const activeVarsCount = requestVars.filter((v) => v.enabled).length + responseVars.filter((v) => v.enabled).length;
 
   const auth = get(folderRoot, 'request.auth.mode');
   const hasAuth = auth && auth !== 'none';

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

@@ -99,13 +99,16 @@ const HttpRequestPane = ({ item, collection }) => {
   const tests = getPropertyFromDraftOrRequest('request.tests');
   const docs = getPropertyFromDraftOrRequest('request.docs');
   const requestVars = getPropertyFromDraftOrRequest('request.vars.req');
+  const responseVars = getPropertyFromDraftOrRequest('request.vars.res');
   const auth = getPropertyFromDraftOrRequest('request.auth');
   const tags = getPropertyFromDraftOrRequest('tags');
 
   const activeParamsLength = params.filter((param) => param.enabled).length;
   const activeHeadersLength = headers.filter((header) => header.enabled).length;
   const activeAssertionsLength = assertions.filter((assertion) => assertion.enabled).length;
-  const activeVarsLength = requestVars.filter((request) => request.enabled).length;
+  const activeVarsLength
+    = requestVars.filter((request) => request.enabled).length
+      + responseVars.filter((response) => response.enabled).length;
 
   useEffect(() => {
     if (activeParamsLength === 0 && body.mode !== 'none') {

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

@@ -2,7 +2,6 @@ import React from 'react';
 import get from 'lodash/get';
 import VarsTable from './VarsTable';
 import StyledWrapper from './StyledWrapper';
-import DeprecationWarning from 'components/DeprecationWarning';
 
 const Vars = ({ item, collection }) => {
   const requestVars = item.draft ? get(item, 'draft.request.vars.req') : get(item, 'request.vars.req');
@@ -11,8 +10,13 @@ const Vars = ({ item, collection }) => {
   return (
     <StyledWrapper className="w-full flex flex-col">
       <div className="mt-2">
+        <div className="mb-1 title text-xs">Pre Request</div>
         <VarsTable item={item} collection={collection} vars={requestVars} varType="request" />
       </div>
+      <div>
+        <div className="mt-1 mb-1 title text-xs">Post Response</div>
+        <VarsTable item={item} collection={collection} vars={responseVars} varType="response" />
+      </div>
     </StyledWrapper>
   );
 };