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

…ve to collection and display them the UI. usebruno#2420
pietrygamat · Jun 12, 2024 · bddc572 · bddc572
1 parent 9b382fa
commit bddc572
Show file tree

Hide file tree

Showing 2 changed files with 13 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
@@ -7,8 +7,10 @@ import { IconEye, IconEyeOff } from '@tabler/icons';
 import { useState } from 'react';
 
 import StyledWrapper from './StyledWrapper';
+import path from 'path';
+import { isWindowsOS } from 'utils/common/platform';
 
-const ClientCertSettings = ({ clientCertConfig, onUpdate, onRemove }) => {
+const ClientCertSettings = ({ root, clientCertConfig, onUpdate, onRemove }) => {
   const formik = useFormik({
     initialValues: {
       domain: '',
@@ -28,7 +30,13 @@ const ClientCertSettings = ({ clientCertConfig, onUpdate, onRemove }) => {
   });
 
   const getFile = (e) => {
-    formik.values[e.name] = e.files[0].path;
+    let relativePath;
+    if (isWindowsOS()) {
+      relativePath = path.win32.relative(root, e.files[0].path).split(path.win32.sep).join(path.posix.sep);
+    } else {
+      relativePath = path.posix.relative(root, e.files[0].path);
+    }
+    formik.values[e.name] = relativePath;
   };
 
   const [passwordVisible, setPasswordVisible] = useState(false);
@@ -44,10 +52,11 @@ 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.certFilePath}</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}