feat: Store client certificate paths in collection settings as relati…

…ve to collection and display them the UI. usebruno#2420
pietrygamat · Jun 21, 2024 · c663bf5 · c663bf5
1 parent fc62604
commit c663bf5
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 3 deletions.
diff --git a/packages/bruno-app/src/components/CollectionSettings/ClientCertSettings/index.js b/packages/bruno-app/src/components/CollectionSettings/ClientCertSettings/index.js
@@ -11,7 +11,7 @@ import { useRef } from 'react';
 import path from 'path';
 import slash from 'utils/common/slash';
 
-const ClientCertSettings = ({ clientCertConfig, onUpdate, onRemove }) => {
+const ClientCertSettings = ({ root, clientCertConfig, onUpdate, onRemove }) => {
   const certFilePathInputRef = useRef();
   const keyFilePathInputRef = useRef();
   const pfxFilePathInputRef = useRef();
@@ -67,7 +67,10 @@ const ClientCertSettings = ({ clientCertConfig, onUpdate, onRemove }) => {
   });
 
   const getFile = (e) => {
-    e.files?.[0]?.path && formik.setFieldValue(e.name, e.files?.[0]?.path);
+    if (e.files?.[0]?.path) {
+      const relativePath = slash(path.relative(root, e.files[0].path));
+      formik.setFieldValue(e.name, relativePath);
+    }
   };
 
   const resetFileInputFields = () => {
@@ -102,10 +105,13 @@ const ClientCertSettings = ({ clientCertConfig, onUpdate, onRemove }) => {
           : 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">
-                  <div className="flex items-center">
+                  <div className="flex w-full items-center">
                     <IconWorld className="mr-2" size={18} strokeWidth={1.5} />
                     {clientCert.domain}
                   </div>
+                  <div className="flex w-full items-center">
+                    {clientCert.type === 'cert' ? clientCert.certFilePath : clientCert.pfxFilePath}
+                  </div>
                   <button onClick={() => onRemove(clientCert)} className="remove-certificate ml-2">
                     <IconTrash size={18} strokeWidth={1.5} />
                   </button>

diff --git a/packages/bruno-app/src/components/CollectionSettings/index.js b/packages/bruno-app/src/components/CollectionSettings/index.js
@@ -95,6 +95,7 @@ const CollectionSettings = ({ collection }) => {
       case 'clientCert': {
         return (
           <ClientCertSettings
+            root={collection.pathname}
             clientCertConfig={clientCertConfig}
             onUpdate={onClientCertSettingsUpdate}
             onRemove={onClientCertSettingsRemove}