feat: Store client certificate paths in collection settings as relative to collection and display them the UI. (#2421)

#2420
This commit is contained in:
Mateusz Pietryga 2024-08-27 12:39:19 +02:00 committed by GitHub
parent 82985d1b43
commit a38d09a117
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 17 additions and 3 deletions

View File

@ -10,8 +10,9 @@ import StyledWrapper from './StyledWrapper';
import { useRef } from 'react'; import { useRef } from 'react';
import path from 'path'; import path from 'path';
import slash from 'utils/common/slash'; import slash from 'utils/common/slash';
import { isWindowsOS } from 'utils/common/platform';
const ClientCertSettings = ({ clientCertConfig, onUpdate, onRemove }) => { const ClientCertSettings = ({ root, clientCertConfig, onUpdate, onRemove }) => {
const certFilePathInputRef = useRef(); const certFilePathInputRef = useRef();
const keyFilePathInputRef = useRef(); const keyFilePathInputRef = useRef();
const pfxFilePathInputRef = useRef(); const pfxFilePathInputRef = useRef();
@ -67,7 +68,15 @@ const ClientCertSettings = ({ clientCertConfig, onUpdate, onRemove }) => {
}); });
const getFile = (e) => { const getFile = (e) => {
e.files?.[0]?.path && formik.setFieldValue(e.name, e.files?.[0]?.path); if (e.files?.[0]?.path) {
let relativePath;
if (isWindowsOS()) {
relativePath = slash(path.win32.relative(root, e.files[0].path));
} else {
relativePath = path.posix.relative(root, e.files[0].path);
}
formik.setFieldValue(e.name, relativePath);
}
}; };
const resetFileInputFields = () => { const resetFileInputFields = () => {
@ -102,10 +111,14 @@ const ClientCertSettings = ({ clientCertConfig, onUpdate, onRemove }) => {
: clientCertConfig.map((clientCert) => ( : clientCertConfig.map((clientCert) => (
<li key={uuid()} className="flex items-center available-certificates p-2 rounded-lg mb-2"> <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 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} /> <IconWorld className="mr-2" size={18} strokeWidth={1.5} />
{clientCert.domain} {clientCert.domain}
</div> </div>
<div className="flex w-full items-center">
<IconCertificate className="mr-2 flex-shrink-0" size={18} strokeWidth={1.5} />
{clientCert.type === 'cert' ? clientCert.certFilePath : clientCert.pfxFilePath}
</div>
<button onClick={() => onRemove(clientCert)} className="remove-certificate ml-2"> <button onClick={() => onRemove(clientCert)} className="remove-certificate ml-2">
<IconTrash size={18} strokeWidth={1.5} /> <IconTrash size={18} strokeWidth={1.5} />
</button> </button>

View File

@ -95,6 +95,7 @@ const CollectionSettings = ({ collection }) => {
case 'clientCert': { case 'clientCert': {
return ( return (
<ClientCertSettings <ClientCertSettings
root={collection.pathname}
clientCertConfig={clientCertConfig} clientCertConfig={clientCertConfig}
onUpdate={onClientCertSettingsUpdate} onUpdate={onClientCertSettingsUpdate}
onRemove={onClientCertSettingsRemove} onRemove={onClientCertSettingsRemove}