From 9e7f5abb375cbd37525fd8833ee8ebe58957dc91 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Anton=20O=CC=88dman?= <anton.odman@gmail.com>
Date: Mon, 29 Jan 2024 22:37:03 +0100
Subject: [PATCH] feat: visualize better when a row is disabled

---
 .../CollectionSettings/Headers/index.js       |  25 ++--
 .../EnvironmentVariables/index.js             | 123 +++++++++---------
 .../RequestPane/FormUrlEncodedParams/index.js |  25 ++--
 .../RequestPane/MultipartFormParams/index.js  |  25 ++--
 .../RequestPane/QueryParams/index.js          |  23 ++--
 .../RequestPane/RequestHeaders/index.js       |  23 ++--
 .../RequestPane/Vars/VarsTable/index.js       |  21 +--
 7 files changed, 136 insertions(+), 129 deletions(-)

diff --git a/packages/bruno-app/src/components/CollectionSettings/Headers/index.js b/packages/bruno-app/src/components/CollectionSettings/Headers/index.js
index 9ce78bc1c9..8542e5b449 100644
--- a/packages/bruno-app/src/components/CollectionSettings/Headers/index.js
+++ b/packages/bruno-app/src/components/CollectionSettings/Headers/index.js
@@ -1,18 +1,18 @@
-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 SingleLineEditor from 'components/SingleLineEditor';
+import { headers as StandardHTTPHeaders } from 'know-your-http-well';
+import cloneDeep from 'lodash/cloneDeep';
+import get from 'lodash/get';
 import {
   addCollectionHeader,
-  updateCollectionHeader,
-  deleteCollectionHeader
+  deleteCollectionHeader,
+  updateCollectionHeader
 } from 'providers/ReduxStore/slices/collections';
 import { saveCollectionRoot } from 'providers/ReduxStore/slices/collections/actions';
-import SingleLineEditor from 'components/SingleLineEditor';
+import { useTheme } from 'providers/Theme';
+import React from 'react';
+import { useDispatch } from 'react-redux';
 import StyledWrapper from './StyledWrapper';
-import { headers as StandardHTTPHeaders } from 'know-your-http-well';
 const headerAutoCompleteList = StandardHTTPHeaders.map((e) => e.header);
 
 const Headers = ({ collection }) => {
@@ -75,9 +75,10 @@ const Headers = ({ collection }) => {
         <tbody>
           {headers && headers.length
             ? headers.map((header) => {
+                const enabledClass = header.enabled ? ' bg-inherit' : 'bg-gray-100 opacity-75';
                 return (
                   <tr key={header.uid}>
-                    <td>
+                    <td className={enabledClass}>
                       <SingleLineEditor
                         value={header.name}
                         theme={storedTheme}
@@ -97,7 +98,7 @@ const Headers = ({ collection }) => {
                         collection={collection}
                       />
                     </td>
-                    <td>
+                    <td className={enabledClass}>
                       <SingleLineEditor
                         value={header.value}
                         theme={storedTheme}
@@ -116,7 +117,7 @@ const Headers = ({ collection }) => {
                         collection={collection}
                       />
                     </td>
-                    <td>
+                    <td className={enabledClass}>
                       <div className="flex items-center">
                         <input
                           type="checkbox"
diff --git a/packages/bruno-app/src/components/Environments/EnvironmentSettings/EnvironmentList/EnvironmentDetails/EnvironmentVariables/index.js b/packages/bruno-app/src/components/Environments/EnvironmentSettings/EnvironmentList/EnvironmentDetails/EnvironmentVariables/index.js
index b9793e4790..e5fe360457 100644
--- a/packages/bruno-app/src/components/Environments/EnvironmentSettings/EnvironmentList/EnvironmentDetails/EnvironmentVariables/index.js
+++ b/packages/bruno-app/src/components/Environments/EnvironmentSettings/EnvironmentList/EnvironmentDetails/EnvironmentVariables/index.js
@@ -1,16 +1,16 @@
-import React from 'react';
-import toast from 'react-hot-toast';
-import cloneDeep from 'lodash/cloneDeep';
 import { IconTrash } from '@tabler/icons';
-import { useTheme } from 'providers/Theme';
-import { useDispatch } from 'react-redux';
-import { saveEnvironment } from 'providers/ReduxStore/slices/collections/actions';
 import SingleLineEditor from 'components/SingleLineEditor';
-import StyledWrapper from './StyledWrapper';
 import { useFormik } from 'formik';
-import * as Yup from 'yup';
+import cloneDeep from 'lodash/cloneDeep';
+import { saveEnvironment } from 'providers/ReduxStore/slices/collections/actions';
+import { useTheme } from 'providers/Theme';
+import React from 'react';
+import toast from 'react-hot-toast';
+import { useDispatch } from 'react-redux';
 import { uuid } from 'utils/common';
 import { variableNameRegex } from 'utils/common/regex';
+import * as Yup from 'yup';
+import StyledWrapper from './StyledWrapper';
 
 const EnvironmentVariables = ({ environment, collection }) => {
   const dispatch = useDispatch();
@@ -92,66 +92,67 @@ const EnvironmentVariables = ({ environment, collection }) => {
           </tr>
         </thead>
         <tbody>
-          {formik.values.map((variable, index) => (
-            <tr key={variable.uid}>
-              <td className="text-center">
-                <input
-                  type="checkbox"
-                  className="mr-3 mousetrap"
-                  name={`${index}.enabled`}
-                  checked={variable.enabled}
-                  onChange={formik.handleChange}
-                />
-              </td>
-              <td>
-                <input
-                  type="text"
-                  autoComplete="off"
-                  autoCorrect="off"
-                  autoCapitalize="off"
-                  spellCheck="false"
-                  className="mousetrap"
-                  id={`${index}.name`}
-                  name={`${index}.name`}
-                  value={variable.name}
-                  onChange={formik.handleChange}
-                />
-                <ErrorMessage name={`${index}.name`} />
-              </td>
-              <td>
-                <SingleLineEditor
-                  theme={storedTheme}
-                  collection={collection}
-                  name={`${index}.value`}
-                  value={variable.value}
-                  onChange={(newValue) => formik.setFieldValue(`${index}.value`, newValue, true)}
-                />
-              </td>
-              <td>
-                <input
-                  type="checkbox"
-                  className="mr-3 mousetrap"
-                  name={`${index}.secret`}
-                  checked={variable.secret}
-                  onChange={formik.handleChange}
-                />
-              </td>
-              <td>
-                <button onClick={() => handleRemoveVar(variable.uid)}>
-                  <IconTrash strokeWidth={1.5} size={20} />
-                </button>
-              </td>
-            </tr>
-          ))}
+          {formik.values.map((variable, index) => {
+            const enabledClass = variable.enabled ? ' bg-inherit' : 'bg-gray-100 opacity-75';
+            return (
+              <tr key={variable.uid}>
+                <td className={`${enabledClass} text-center`}>
+                  <input
+                    type="checkbox"
+                    className="mr-3 mousetrap"
+                    name={`${index}.enabled`}
+                    checked={variable.enabled}
+                    onChange={formik.handleChange}
+                  />
+                </td>
+                <td className={enabledClass}>
+                  <input
+                    type="text"
+                    autoComplete="off"
+                    autoCorrect="off"
+                    autoCapitalize="off"
+                    spellCheck="false"
+                    className="mousetrap"
+                    id={`${index}.name`}
+                    name={`${index}.name`}
+                    value={variable.name}
+                    onChange={formik.handleChange}
+                  />
+                  <ErrorMessage name={`${index}.name`} />
+                </td>
+                <td className={enabledClass}>
+                  <SingleLineEditor
+                    theme={storedTheme}
+                    collection={collection}
+                    name={`${index}.value`}
+                    value={variable.value}
+                    onChange={(newValue) => formik.setFieldValue(`${index}.value`, newValue, true)}
+                  />
+                </td>
+                <td className={enabledClass}>
+                  <input
+                    type="checkbox"
+                    className="mr-3 mousetrap"
+                    name={`${index}.secret`}
+                    checked={variable.secret}
+                    onChange={formik.handleChange}
+                  />
+                </td>
+                <td className={enabledClass}>
+                  <button onClick={() => handleRemoveVar(variable.uid)}>
+                    <IconTrash strokeWidth={1.5} size={20} />
+                  </button>
+                </td>
+              </tr>
+            );
+          })}
         </tbody>
       </table>
-
       <div>
         <button className="btn-add-param text-link pr-2 py-3 mt-2 select-none" onClick={addVariable}>
           + Add Variable
         </button>
       </div>
-
       <div>
         <button type="submit" className="submit btn btn-md btn-secondary mt-2" onClick={formik.handleSubmit}>
           Save
diff --git a/packages/bruno-app/src/components/RequestPane/FormUrlEncodedParams/index.js b/packages/bruno-app/src/components/RequestPane/FormUrlEncodedParams/index.js
index 6d1d5be254..4d030a26b5 100644
--- a/packages/bruno-app/src/components/RequestPane/FormUrlEncodedParams/index.js
+++ b/packages/bruno-app/src/components/RequestPane/FormUrlEncodedParams/index.js
@@ -1,16 +1,16 @@
-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 SingleLineEditor from 'components/SingleLineEditor';
+import cloneDeep from 'lodash/cloneDeep';
+import get from 'lodash/get';
 import {
   addFormUrlEncodedParam,
-  updateFormUrlEncodedParam,
-  deleteFormUrlEncodedParam
+  deleteFormUrlEncodedParam,
+  updateFormUrlEncodedParam
 } from 'providers/ReduxStore/slices/collections';
-import SingleLineEditor from 'components/SingleLineEditor';
-import { sendRequest, saveRequest } from 'providers/ReduxStore/slices/collections/actions';
+import { saveRequest, sendRequest } from 'providers/ReduxStore/slices/collections/actions';
+import { useTheme } from 'providers/Theme';
+import React from 'react';
+import { useDispatch } from 'react-redux';
 import StyledWrapper from './StyledWrapper';
 
 const FormUrlEncodedParams = ({ item, collection }) => {
@@ -77,9 +77,10 @@ const FormUrlEncodedParams = ({ item, collection }) => {
         <tbody>
           {params && params.length
             ? params.map((param, index) => {
+                const enabledClass = param.enabled ? ' bg-inherit' : 'bg-gray-100 opacity-50';
                 return (
                   <tr key={param.uid}>
-                    <td>
+                    <td className={enabledClass}>
                       <input
                         type="text"
                         autoComplete="off"
@@ -91,7 +92,7 @@ const FormUrlEncodedParams = ({ item, collection }) => {
                         onChange={(e) => handleParamChange(e, param, 'name')}
                       />
                     </td>
-                    <td>
+                    <td className={enabledClass}>
                       <SingleLineEditor
                         value={param.value}
                         theme={storedTheme}
@@ -112,7 +113,7 @@ const FormUrlEncodedParams = ({ item, collection }) => {
                         collection={collection}
                       />
                     </td>
-                    <td>
+                    <td className={enabledClass}>
                       <div className="flex items-center">
                         <input
                           type="checkbox"
diff --git a/packages/bruno-app/src/components/RequestPane/MultipartFormParams/index.js b/packages/bruno-app/src/components/RequestPane/MultipartFormParams/index.js
index f8bd7ebbde..9797e099ce 100644
--- a/packages/bruno-app/src/components/RequestPane/MultipartFormParams/index.js
+++ b/packages/bruno-app/src/components/RequestPane/MultipartFormParams/index.js
@@ -1,16 +1,16 @@
-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 SingleLineEditor from 'components/SingleLineEditor';
+import cloneDeep from 'lodash/cloneDeep';
+import get from 'lodash/get';
 import {
   addMultipartFormParam,
-  updateMultipartFormParam,
-  deleteMultipartFormParam
+  deleteMultipartFormParam,
+  updateMultipartFormParam
 } from 'providers/ReduxStore/slices/collections';
-import SingleLineEditor from 'components/SingleLineEditor';
-import { sendRequest, saveRequest } from 'providers/ReduxStore/slices/collections/actions';
+import { saveRequest, sendRequest } from 'providers/ReduxStore/slices/collections/actions';
+import { useTheme } from 'providers/Theme';
+import React from 'react';
+import { useDispatch } from 'react-redux';
 import StyledWrapper from './StyledWrapper';
 
 const MultipartFormParams = ({ item, collection }) => {
@@ -77,9 +77,10 @@ const MultipartFormParams = ({ item, collection }) => {
         <tbody>
           {params && params.length
             ? params.map((param, index) => {
+                const enabledClass = param.enabled ? ' bg-inherit' : 'bg-gray-100 opacity-50';
                 return (
                   <tr key={param.uid}>
-                    <td>
+                    <td className={enabledClass}>
                       <input
                         type="text"
                         autoComplete="off"
@@ -91,7 +92,7 @@ const MultipartFormParams = ({ item, collection }) => {
                         onChange={(e) => handleParamChange(e, param, 'name')}
                       />
                     </td>
-                    <td>
+                    <td className={enabledClass}>
                       <SingleLineEditor
                         onSave={onSave}
                         theme={storedTheme}
@@ -111,7 +112,7 @@ const MultipartFormParams = ({ item, collection }) => {
                         collection={collection}
                       />
                     </td>
-                    <td>
+                    <td className={enabledClass}>
                       <div className="flex items-center">
                         <input
                           type="checkbox"
diff --git a/packages/bruno-app/src/components/RequestPane/QueryParams/index.js b/packages/bruno-app/src/components/RequestPane/QueryParams/index.js
index 54e3ee0b36..040e18f350 100644
--- a/packages/bruno-app/src/components/RequestPane/QueryParams/index.js
+++ b/packages/bruno-app/src/components/RequestPane/QueryParams/index.js
@@ -1,12 +1,12 @@
-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 { addQueryParam, updateQueryParam, deleteQueryParam } from 'providers/ReduxStore/slices/collections';
 import SingleLineEditor from 'components/SingleLineEditor';
-import { sendRequest, saveRequest } from 'providers/ReduxStore/slices/collections/actions';
+import cloneDeep from 'lodash/cloneDeep';
+import get from 'lodash/get';
+import { addQueryParam, deleteQueryParam, updateQueryParam } from 'providers/ReduxStore/slices/collections';
+import { saveRequest, sendRequest } from 'providers/ReduxStore/slices/collections/actions';
+import { useTheme } from 'providers/Theme';
+import React from 'react';
+import { useDispatch } from 'react-redux';
 
 import StyledWrapper from './StyledWrapper';
 
@@ -76,9 +76,10 @@ const QueryParams = ({ item, collection }) => {
         <tbody>
           {params && params.length
             ? params.map((param, index) => {
+                const enabledClass = param.enabled ? ' bg-inherit' : 'bg-gray-100 opacity-50';
                 return (
                   <tr key={param.uid}>
-                    <td>
+                    <td className={enabledClass}>
                       <input
                         type="text"
                         autoComplete="off"
@@ -86,11 +87,11 @@ const QueryParams = ({ item, collection }) => {
                         autoCapitalize="off"
                         spellCheck="false"
                         value={param.name}
-                        className="mousetrap"
+                        className={`mousetrap`}
                         onChange={(e) => handleParamChange(e, param, 'name')}
                       />
                     </td>
-                    <td>
+                    <td className={enabledClass}>
                       <SingleLineEditor
                         value={param.value}
                         theme={storedTheme}
@@ -110,7 +111,7 @@ const QueryParams = ({ item, collection }) => {
                         collection={collection}
                       />
                     </td>
-                    <td>
+                    <td className={enabledClass}>
                       <div className="flex items-center">
                         <input
                           type="checkbox"
diff --git a/packages/bruno-app/src/components/RequestPane/RequestHeaders/index.js b/packages/bruno-app/src/components/RequestPane/RequestHeaders/index.js
index db8b20f5fd..07128c4e9e 100644
--- a/packages/bruno-app/src/components/RequestPane/RequestHeaders/index.js
+++ b/packages/bruno-app/src/components/RequestPane/RequestHeaders/index.js
@@ -1,14 +1,14 @@
-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 { addRequestHeader, updateRequestHeader, deleteRequestHeader } from 'providers/ReduxStore/slices/collections';
-import { sendRequest, saveRequest } from 'providers/ReduxStore/slices/collections/actions';
 import SingleLineEditor from 'components/SingleLineEditor';
-import StyledWrapper from './StyledWrapper';
 import { headers as StandardHTTPHeaders } from 'know-your-http-well';
+import cloneDeep from 'lodash/cloneDeep';
+import get from 'lodash/get';
+import { addRequestHeader, deleteRequestHeader, updateRequestHeader } from 'providers/ReduxStore/slices/collections';
+import { saveRequest, sendRequest } from 'providers/ReduxStore/slices/collections/actions';
+import { useTheme } from 'providers/Theme';
+import React from 'react';
+import { useDispatch } from 'react-redux';
+import StyledWrapper from './StyledWrapper';
 const headerAutoCompleteList = StandardHTTPHeaders.map((e) => e.header);
 
 const RequestHeaders = ({ item, collection }) => {
@@ -75,9 +75,10 @@ const RequestHeaders = ({ item, collection }) => {
         <tbody>
           {headers && headers.length
             ? headers.map((header) => {
+                const enabledClass = header.enabled ? ' bg-inherit' : 'bg-gray-100 opacity-75';
                 return (
                   <tr key={header.uid}>
-                    <td>
+                    <td className={enabledClass}>
                       <SingleLineEditor
                         value={header.name}
                         theme={storedTheme}
@@ -98,7 +99,7 @@ const RequestHeaders = ({ item, collection }) => {
                         collection={collection}
                       />
                     </td>
-                    <td>
+                    <td className={enabledClass}>
                       <SingleLineEditor
                         value={header.value}
                         theme={storedTheme}
@@ -118,7 +119,7 @@ const RequestHeaders = ({ item, collection }) => {
                         collection={collection}
                       />
                     </td>
-                    <td>
+                    <td className={enabledClass}>
                       <div className="flex items-center">
                         <input
                           type="checkbox"
diff --git a/packages/bruno-app/src/components/RequestPane/Vars/VarsTable/index.js b/packages/bruno-app/src/components/RequestPane/Vars/VarsTable/index.js
index 01cf0f340c..2189ca894a 100644
--- a/packages/bruno-app/src/components/RequestPane/Vars/VarsTable/index.js
+++ b/packages/bruno-app/src/components/RequestPane/Vars/VarsTable/index.js
@@ -1,15 +1,15 @@
-import React from 'react';
-import cloneDeep from 'lodash/cloneDeep';
 import { IconTrash } from '@tabler/icons';
-import { useDispatch } from 'react-redux';
-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';
+import cloneDeep from 'lodash/cloneDeep';
+import { addVar, deleteVar, updateVar } from 'providers/ReduxStore/slices/collections';
+import { saveRequest, sendRequest } from 'providers/ReduxStore/slices/collections/actions';
+import { useTheme } from 'providers/Theme';
+import React from 'react';
 import toast from 'react-hot-toast';
+import { useDispatch } from 'react-redux';
 import { variableNameRegex } from 'utils/common/regex';
+import StyledWrapper from './StyledWrapper';
 
 const VarsTable = ({ item, collection, vars, varType }) => {
   const dispatch = useDispatch();
@@ -100,9 +100,10 @@ const VarsTable = ({ item, collection, vars, varType }) => {
         <tbody>
           {vars && vars.length
             ? vars.map((_var) => {
+                const enabledClass = _var.enabled ? ' bg-inherit' : 'bg-gray-100 opacity-75';
                 return (
                   <tr key={_var.uid}>
-                    <td>
+                    <td className={enabledClass}>
                       <input
                         type="text"
                         autoComplete="off"
@@ -114,7 +115,7 @@ const VarsTable = ({ item, collection, vars, varType }) => {
                         onChange={(e) => handleVarChange(e, _var, 'name')}
                       />
                     </td>
-                    <td>
+                    <td className={enabledClass}>
                       <SingleLineEditor
                         value={_var.value}
                         theme={storedTheme}
@@ -134,7 +135,7 @@ const VarsTable = ({ item, collection, vars, varType }) => {
                         collection={collection}
                       />
                     </td>
-                    <td>
+                    <td className={enabledClass}>
                       <div className="flex items-center">
                         <input
                           type="checkbox"