From 84128052c02fdfcd10ac7b7bd25fb375905294de Mon Sep 17 00:00:00 2001
From: Liz MacLean <18120837+lizziemac@users.noreply.github.com>
Date: Tue, 9 Apr 2024 05:56:56 -0400
Subject: [PATCH] feat: Add descriptions for each panel in CollectionSettings
 (#2031)

* Add descriptions for each panel in CollectionSettings

* Revert index.js

Leftover change from when i was putzing around
---
 .../src/components/CollectionSettings/Auth/index.js    |  6 +++++-
 .../CollectionSettings/ClientCertSettings/index.js     | 10 +++++-----
 .../src/components/CollectionSettings/Headers/index.js |  3 ++-
 .../src/components/CollectionSettings/Info/index.js    |  1 +
 .../src/components/CollectionSettings/Presets/index.js |  9 ++++++---
 .../CollectionSettings/ProxySettings/index.js          |  4 ++--
 .../src/components/CollectionSettings/Script/index.js  |  5 ++++-
 .../src/components/CollectionSettings/Tests/index.js   |  1 +
 .../src/components/CollectionSettings/index.js         |  4 +---
 9 files changed, 27 insertions(+), 16 deletions(-)

diff --git a/packages/bruno-app/src/components/CollectionSettings/Auth/index.js b/packages/bruno-app/src/components/CollectionSettings/Auth/index.js
index c874e2782..aa608ef6e 100644
--- a/packages/bruno-app/src/components/CollectionSettings/Auth/index.js
+++ b/packages/bruno-app/src/components/CollectionSettings/Auth/index.js
@@ -37,7 +37,11 @@ const Auth = ({ collection }) => {
   };
 
   return (
-    <StyledWrapper className="w-full mt-2">
+    <StyledWrapper className="w-full h-full">
+      <div className="text-sm mb-6">
+        Configures authentication for the entire collection. This applies to all requests using the 'Inherit' option in
+        the 'Auth' tab, as well as any new requests added to this collection.
+      </div>
       <div className="flex flex-grow justify-start items-center">
         <AuthMode collection={collection} />
       </div>
diff --git a/packages/bruno-app/src/components/CollectionSettings/ClientCertSettings/index.js b/packages/bruno-app/src/components/CollectionSettings/ClientCertSettings/index.js
index ef751fe6c..084e4acee 100644
--- a/packages/bruno-app/src/components/CollectionSettings/ClientCertSettings/index.js
+++ b/packages/bruno-app/src/components/CollectionSettings/ClientCertSettings/index.js
@@ -30,13 +30,13 @@ const ClientCertSettings = ({ clientCertConfig, onUpdate, onRemove }) => {
   };
 
   return (
-    <StyledWrapper>
-      <div className="flex items-center font-semibold mt-4 mb-2">
-        <IconCertificate className="mr-1 certificate-icon" size={24} strokeWidth={1.5} /> Client Certificates
-      </div>
+    <StyledWrapper className="w-full h-full">
+      <div className="text-sm mb-6">Add client certificates to be used for specific domains.</div>
+
+      <h1 className="font-semibold">Client Certificates</h1>
       <ul className="mt-4">
         {!clientCertConfig.length
-          ? 'None'
+          ? 'No client certificates added'
           : clientCertConfig.map((clientCert) => (
               <li key={uuid()} className="flex items-center available-certificates p-2 rounded-lg mb-2">
                 <div className="flex items-center w-full justify-between">
diff --git a/packages/bruno-app/src/components/CollectionSettings/Headers/index.js b/packages/bruno-app/src/components/CollectionSettings/Headers/index.js
index 9ce78bc1c..91639b392 100644
--- a/packages/bruno-app/src/components/CollectionSettings/Headers/index.js
+++ b/packages/bruno-app/src/components/CollectionSettings/Headers/index.js
@@ -63,7 +63,8 @@ const Headers = ({ collection }) => {
   };
 
   return (
-    <StyledWrapper className="w-full">
+    <StyledWrapper className="h-full w-full">
+      <div className="text-sm mb-6">Add request headers that will be sent with every request in this collection.</div>
       <table>
         <thead>
           <tr>
diff --git a/packages/bruno-app/src/components/CollectionSettings/Info/index.js b/packages/bruno-app/src/components/CollectionSettings/Info/index.js
index ce608920b..d0685ebc0 100644
--- a/packages/bruno-app/src/components/CollectionSettings/Info/index.js
+++ b/packages/bruno-app/src/components/CollectionSettings/Info/index.js
@@ -23,6 +23,7 @@ function countRequests(items) {
 const Info = ({ collection }) => {
   return (
     <StyledWrapper className="w-full flex flex-col h-full">
+      <div className="text-sm mb-6">General information about the collection.</div>
       <table className="w-full border-collapse">
         <tbody>
           <tr className="">
diff --git a/packages/bruno-app/src/components/CollectionSettings/Presets/index.js b/packages/bruno-app/src/components/CollectionSettings/Presets/index.js
index 503090abd..474fdf0b5 100644
--- a/packages/bruno-app/src/components/CollectionSettings/Presets/index.js
+++ b/packages/bruno-app/src/components/CollectionSettings/Presets/index.js
@@ -27,8 +27,10 @@ const PresetsSettings = ({ collection }) => {
   });
 
   return (
-    <StyledWrapper>
-      <h1 className="font-medium mb-3">Collection Presets</h1>
+    <StyledWrapper className="h-full w-full">
+      <div className="text-sm mb-6">
+        These presets will be used as the default values for new requests in this collection.
+      </div>
       <form className="bruno-form" onSubmit={formik.handleSubmit}>
         <div className="mb-3 flex items-center">
           <label className="settings-label flex  items-center" htmlFor="enabled">
@@ -66,7 +68,7 @@ const PresetsSettings = ({ collection }) => {
           <label className="settings-label" htmlFor="requestUrl">
             Base URL
           </label>
-          <div className="flex items-center">
+          <div className="flex items-center w-full">
             <div className="flex items-center flex-grow input-container h-full">
               <input
                 id="request-url"
@@ -79,6 +81,7 @@ const PresetsSettings = ({ collection }) => {
                 spellCheck="false"
                 onChange={formik.handleChange}
                 value={formik.values.requestUrl || ''}
+                style={{ width: '100%' }}
               />
             </div>
           </div>
diff --git a/packages/bruno-app/src/components/CollectionSettings/ProxySettings/index.js b/packages/bruno-app/src/components/CollectionSettings/ProxySettings/index.js
index d0e9450f4..d92268915 100644
--- a/packages/bruno-app/src/components/CollectionSettings/ProxySettings/index.js
+++ b/packages/bruno-app/src/components/CollectionSettings/ProxySettings/index.js
@@ -95,8 +95,8 @@ const ProxySettings = ({ proxyConfig, onUpdate }) => {
   }, [proxyConfig]);
 
   return (
-    <StyledWrapper>
-      <h1 className="font-medium mb-3">Proxy Settings</h1>
+    <StyledWrapper className="h-full w-full">
+      <div className="text-sm mb-6">Configure proxy settings for this collection.</div>
       <form className="bruno-form" onSubmit={formik.handleSubmit}>
         <div className="mb-3 flex items-center">
           <label className="settings-label flex items-center" htmlFor="enabled">
diff --git a/packages/bruno-app/src/components/CollectionSettings/Script/index.js b/packages/bruno-app/src/components/CollectionSettings/Script/index.js
index 2bc0dae60..42c109240 100644
--- a/packages/bruno-app/src/components/CollectionSettings/Script/index.js
+++ b/packages/bruno-app/src/components/CollectionSettings/Script/index.js
@@ -38,7 +38,10 @@ const Script = ({ collection }) => {
   };
 
   return (
-    <StyledWrapper className="w-full flex flex-col">
+    <StyledWrapper className="w-full flex flex-col h-full">
+      <div className="text-sm mb-6">
+        Write pre and post-request scripts that will run before and after any request in this collection is sent.
+      </div>
       <div className="flex-1 mt-2">
         <div className="mb-1 title text-xs">Pre Request</div>
         <CodeEditor
diff --git a/packages/bruno-app/src/components/CollectionSettings/Tests/index.js b/packages/bruno-app/src/components/CollectionSettings/Tests/index.js
index 34edf4810..ec4b405ea 100644
--- a/packages/bruno-app/src/components/CollectionSettings/Tests/index.js
+++ b/packages/bruno-app/src/components/CollectionSettings/Tests/index.js
@@ -27,6 +27,7 @@ const Tests = ({ collection }) => {
 
   return (
     <StyledWrapper className="w-full flex flex-col h-full">
+      <div className="text-sm mb-6">These tests will run any time a request in this collection is sent.</div>
       <CodeEditor
         collection={collection}
         value={tests || ''}
diff --git a/packages/bruno-app/src/components/CollectionSettings/index.js b/packages/bruno-app/src/components/CollectionSettings/index.js
index dbdd8d40d..6cc42a09d 100644
--- a/packages/bruno-app/src/components/CollectionSettings/index.js
+++ b/packages/bruno-app/src/components/CollectionSettings/index.js
@@ -147,9 +147,7 @@ const CollectionSettings = ({ collection }) => {
           Info
         </div>
       </div>
-      <section className={`flex ${['auth', 'script', 'docs', 'clientCert'].includes(tab) ? '' : 'mt-4'}`}>
-        {getTabPanel(tab)}
-      </section>
+      <section className="mt-4 h-full">{getTabPanel(tab)}</section>
     </StyledWrapper>
   );
 };