feat: Add deprecation warnings for Presets and Post Response Vars (#6212)

* feat: add deprecation warnings for presets and post response vars

* refactor: update deprecation warnings for presets and post response vars to include version

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

@@ -4,10 +4,12 @@ import StyledWrapper from './StyledWrapper';
 import { updateCollectionPresets } from 'providers/ReduxStore/slices/collections';
 import { saveCollectionSettings } from 'providers/ReduxStore/slices/collections/actions';
 import { get } from 'lodash';
+import DeprecationWarning from 'components/DeprecationWarning';
 
 const PresetsSettings = ({ collection }) => {
   const dispatch = useDispatch();
   const initialPresets = { requestType: 'http', requestUrl: '' };
+  const deprecationWarningMessage = 'Presets is deprecated and will be removed in v3.0.0';
 
   // Get presets from draft.brunoConfig if it exists, otherwise from brunoConfig
   const currentPresets = collection.draft?.brunoConfig
@@ -35,7 +37,8 @@ const PresetsSettings = ({ collection }) => {
 
   return (
     <StyledWrapper className="h-full w-full">
-      <div className="text-xs mb-4 text-muted">
+      <DeprecationWarning message={deprecationWarningMessage} />
+      <div className="text-xs mb-4 mt-4 text-muted">
         These presets will be used as the default values for new requests in this collection.
       </div>
       <div className="bruno-form">

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

@@ -4,12 +4,15 @@ 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));
+  const deprecationWarningMessage = 'Post response vars is deprecated and will be removed in v3.0.0';
+
   return (
     <StyledWrapper className="w-full flex flex-col">
       <div className="flex-1 mt-2">
@@ -18,6 +21,7 @@ const Vars = ({ collection }) => {
       </div>
       <div className="flex-1">
         <div className="mt-1 mb-1 title text-xs">Post Response</div>
+        <DeprecationWarning message={deprecationWarningMessage} />
         <VarsTable collection={collection} vars={responseVars} varType="response" />
       </div>
       <div className="mt-6">

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

@@ -0,0 +1,33 @@
+import styled from 'styled-components';
+
+const StyledWrapper = styled.div`
+  .deprecation-warning {
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    padding: 8px;
+    gap: 4px;
+    margin-bottom: 8px;
+    background: ${(props) => props.theme.deprecationWarning.bg};
+    border: 1px solid ${(props) => props.theme.deprecationWarning.border};
+    border-radius: 6px;
+
+    .warning-icon {
+      color: ${(props) => props.theme.deprecationWarning.icon};
+      flex-shrink: 0;
+      width: 16px;
+      height: 16px;
+    }
+
+    .warning-text {
+      font-family: 'Inter', sans-serif;
+      font-style: normal;
+      font-size: 14px;
+      line-height: 17px;
+      color: ${(props) => props.theme.deprecationWarning.text};
+    }
+  }
+`;
+
+export default StyledWrapper;

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

@@ -0,0 +1,16 @@
+import React from 'react';
+import IconAlertTriangleFilled from '../Icons/IconAlertTriangleFilled';
+import StyledWrapper from './StyledWrapper';
+
+const DeprecationWarning = ({ message }) => {
+  return (
+    <StyledWrapper>
+      <div className="deprecation-warning">
+        <IconAlertTriangleFilled className="warning-icon" size={16} />
+        <span className="warning-text">{message}</span>
+      </div>
+    </StyledWrapper>
+  );
+};
+
+export default DeprecationWarning;

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

@@ -4,12 +4,15 @@ import VarsTable from './VarsTable';
 import StyledWrapper from './StyledWrapper';
 import { saveFolderRoot } from 'providers/ReduxStore/slices/collections/actions';
 import { useDispatch } from 'react-redux';
+import DeprecationWarning from 'components/DeprecationWarning';
 
 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));
+  const deprecationWarningMessage = 'Post response vars is deprecated and will be removed in v3.0.0';
+
   return (
     <StyledWrapper className="w-full flex flex-col">
       <div className="flex-1 mt-2">
@@ -18,6 +21,7 @@ const Vars = ({ collection, folder }) => {
       </div>
       <div className="flex-1">
         <div className="mt-1 mb-1 title text-xs">Post Response</div>
+        <DeprecationWarning message={deprecationWarningMessage} />
         <VarsTable folder={folder} collection={collection} vars={responseVars} varType="response" />
       </div>
       <div className="mt-6">

packages/bruno-app/src/components/Icons/IconAlertTriangleFilled/index.js

@@ -0,0 +1,14 @@
+import React from 'react';
+
+const IconAlertTriangleFilled = ({ size = 16, ...props }) => {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" width={size} height={size} viewBox="0 0 24 24" fill="none" {...props}>
+      <path
+        d="M12 1.67c.955 0 1.845 .467 2.39 1.247l.105 .16l8.114 13.548a2.914 2.914 0 0 1 -2.307 4.363l-.195 .008h-16.225a2.914 2.914 0 0 1 -2.582 -4.2l.099 -.185l8.11 -13.538a2.914 2.914 0 0 1 2.491 -1.403zm.01 13.33l-.127 .007a1 1 0 0 0 0 1.986l.117 .007l.127 -.007a1 1 0 0 0 0 -1.986l-.117 -.007zm-.01 -7a1 1 0 0 0 -.993 .883l-.007 .117v4l.007 .117a1 1 0 0 0 1.986 0l.007 -.117v-4l-.007 -.117a1 1 0 0 0 -.993 -.883z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};
+
+export default IconAlertTriangleFilled;

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

@@ -2,10 +2,12 @@ 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');
   const responseVars = item.draft ? get(item, 'draft.request.vars.res') : get(item, 'request.vars.res');
+  const deprecationWarningMessage = 'Post response vars is deprecated and will be removed in v3.0.0';
 
   return (
     <StyledWrapper className="w-full flex flex-col">
@@ -15,6 +17,7 @@ const Vars = ({ item, collection }) => {
       </div>
       <div>
         <div className="mt-1 mb-1 title text-xs">Post Response</div>
+        <DeprecationWarning message={deprecationWarningMessage} />
         <VarsTable item={item} collection={collection} vars={responseVars} varType="response" />
       </div>
     </StyledWrapper>

packages/bruno-app/src/themes/dark.js

@@ -473,6 +473,13 @@ const darkTheme = {
       }
     }
   },
+  deprecationWarning: {
+    bg: 'rgba(250, 83, 67, 0.1)',
+    border: 'rgba(250, 83, 67, 0.1)',
+    icon: '#FA5343',
+    text: '#B8B8B8'
+  },
+
   examples: {
     buttonBg: '#F59E0B1A',
     buttonColor: '#F59E0B',

packages/bruno-app/src/themes/light.js

@@ -480,6 +480,13 @@ const lightTheme = {
       }
     }
   },
+  deprecationWarning: {
+    bg: 'rgba(217, 31, 17, 0.1)',
+    border: 'rgba(217, 31, 17, 0.1)',
+    icon: '#D91F11',
+    text: '#343434'
+  },
+
   examples: {
     buttonBg: '#D977061A',
     buttonColor: '#D97706',