feat(#275): polish client certificate support

packages/bruno-app/src/components/CollectionSettings/ClientCertSettings/StyledWrapper.js

@@ -2,13 +2,25 @@ import styled from 'styled-components';
 
 const StyledWrapper = styled.div`
   .settings-label {
-    width: 80px;
+    width: 90px;
+  }
+
+  .certificate-icon {
+    color: ${(props) => props.theme.colors.text.yellow};
   }
 
   input {
     width: 300px;
   }
 
+  .available-certificates {
+    background-color: ${(props) => props.theme.requestTabPanel.url.bg};
+
+    button.remove-certificate {
+      color: ${(props) => props.theme.colors.text.danger};
+    }
+  }
+
   .textbox {
     border: 1px solid #ccc;
     padding: 0.15rem 0.45rem;

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

@@ -1,5 +1,7 @@
-import React, { useEffect } from 'react';
+import React from 'react';
+import { IconCertificate, IconTrash, IconWorld } from '@tabler/icons';
 import { useFormik } from 'formik';
+import { uuid } from 'utils/common';
 import * as Yup from 'yup';
 
 import StyledWrapper from './StyledWrapper';
@@ -29,20 +31,28 @@ const ClientCertSettings = ({ clientCertConfig, onUpdate, onRemove }) => {
 
   return (
     <StyledWrapper>
-      <h1 className="font-semibold mt-4 mb-2">Current client certificates</h1>
-      <ul>
+      <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>
+      <ul className="mt-4">
         {!clientCertConfig.length
           ? 'None'
           : clientCertConfig.map((clientCert) => (
-              <li>
-                Domain: {clientCert.domain}
-                <button onClick={() => onRemove(clientCert)} className="submit btn btn-sm btn-secondary ml-2">
-                  Delete
-                </button>
+              <li key={uuid()} className="flex items-center available-certificates p-2 rounded-lg mb-2">
+                <div className="flex items-center w-full justify-between">
+                  <div className="flex items-center">
+                    <IconWorld className="mr-2" size={18} strokeWidth={1.5} />
+                    {clientCert.domain}
+                  </div>
+                  <button onClick={() => onRemove(clientCert)} className="remove-certificate ml-2">
+                    <IconTrash size={18} strokeWidth={1.5} />
+                  </button>
+                </div>
               </li>
             ))}
       </ul>
-      <h1 className="font-semibold mt-4 mb-2">New client certicate</h1>
+
+      <h1 className="font-semibold mt-8 mb-2">Add Client Certicate</h1>
       <form className="bruno-form" onSubmit={formik.handleSubmit}>
         <div className="mb-3 flex items-center">
           <label className="settings-label" htmlFor="domain">

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

@@ -29,7 +29,7 @@ const CollectionSettings = ({ collection }) => {
 
   const proxyConfig = get(collection, 'brunoConfig.proxy', {});
 
-  const clientCertConfig = get(collection, 'brunoConfig.clientCertificates', []);
+  const clientCertConfig = get(collection, 'brunoConfig.clientCertificates.certs', []);
 
   const onProxySettingsUpdate = (config) => {
     const brunoConfig = cloneDeep(collection.brunoConfig);
@@ -43,9 +43,14 @@ const CollectionSettings = ({ collection }) => {
 
   const onClientCertSettingsUpdate = (config) => {
     const brunoConfig = cloneDeep(collection.brunoConfig);
-    brunoConfig.clientCertificates
-      ? brunoConfig.clientCertificates.push(config)
-      : (brunoConfig.clientCertificates = [config]);
+    if (!brunoConfig.clientCertificates) {
+      brunoConfig.clientCertificates = {
+        enabled: true,
+        certs: [config]
+      };
+    } else {
+      brunoConfig.clientCertificates.certs.push(config);
+    }
     dispatch(updateBrunoConfig(brunoConfig, collection.uid))
       .then(() => {
         toast.success('Collection settings updated successfully');
@@ -120,13 +125,15 @@ const CollectionSettings = ({ collection }) => {
           Proxy
         </div>
         <div className={getTabClassname('clientCert')} role="tab" onClick={() => setTab('clientCert')}>
-          Client certificate
+          Client Certificates
         </div>
         <div className={getTabClassname('docs')} role="tab" onClick={() => setTab('docs')}>
           Docs
         </div>
       </div>
-      <section className={`flex ${['auth', 'script', 'docs'].includes(tab) ? '' : 'mt-4'}`}>{getTabPanel(tab)}</section>
+      <section className={`flex ${['auth', 'script', 'docs', 'clientCert'].includes(tab) ? '' : 'mt-4'}`}>
+        {getTabPanel(tab)}
+      </section>
     </StyledWrapper>
   );
 };