Activity log streaming certificate file upload

web/src/pages/settings/SettingsActivityLogStreamingPage/modals/AddDestinationModal/AddLogStreamingModal.tsx

@@ -19,6 +19,7 @@ import {
   subscribeOpenModal,
 } from '../../../../../shared/hooks/modalControls/modalsSubjects';
 import { ModalName } from '../../../../../shared/hooks/modalControls/modalTypes';
+import { processCertificateFile } from '../../../../../shared/utils/processCertificateFile';
 
 const modalNameValue = ModalName.AddLogStreaming;
 
@@ -134,9 +135,9 @@ const FormStep = ({ destination, setOpen }: FormStepProps) => {
       z.object({
         name: z.string().trim().min(1, m.form_error_required()),
         url: z.string().trim().min(1, m.form_error_required()),
-        username: z.string().optional(),
-        password: z.string().optional(),
-        certificate: z.string().optional(),
+        username: z.string().nullable(),
+        password: z.string().nullable(),
+        certificate: z.file().nullable(),
       }),
     [],
   );
@@ -149,7 +150,7 @@ const FormStep = ({ destination, setOpen }: FormStepProps) => {
       url: '',
       username: '',
       password: '',
-      certificate: '',
+      certificate: null,
     }),
     [],
   );
@@ -162,6 +163,8 @@ const FormStep = ({ destination, setOpen }: FormStepProps) => {
       onChange: formSchema,
     },
     onSubmit: async ({ value }) => {
+      const certificateContent = await processCertificateFile(value.certificate);
+
       const requestData: CreateActivityLogStreamRequest = {
         name: value.name,
         stream_type:
@@ -170,9 +173,9 @@ const FormStep = ({ destination, setOpen }: FormStepProps) => {
             : ActivityLogStreamType.VectorHttp,
         stream_config: {
           url: value.url,
-          username: value.username || undefined,
-          password: value.password || undefined,
-          cert: value.certificate || undefined,
+          username: value.username,
+          password: value.password,
+          cert: certificateContent,
         },
       };
 
@@ -216,7 +219,7 @@ const FormStep = ({ destination, setOpen }: FormStepProps) => {
           <SizedBox height={ThemeSpacing.Xl} />
 
           <form.AppField name="certificate">
-            {(field) => <field.FormInput label="Certificate" />}
+            {(field) => <field.FormUploadField title="Upload certificate file" />}
           </form.AppField>
         </form.AppForm>
       </form>

web/src/pages/settings/SettingsActivityLogStreamingPage/modals/EditDestinationModal/EditLogStreamingModal.tsx

@@ -20,6 +20,7 @@ import {
   subscribeOpenModal,
 } from '../../../../../shared/hooks/modalControls/modalsSubjects';
 import { ModalName } from '../../../../../shared/hooks/modalControls/modalTypes';
+import { processCertificateFile } from '../../../../../shared/utils/processCertificateFile';
 
 const modalNameValue = ModalName.EditLogStreaming;
 
@@ -40,7 +41,7 @@ export const EditLogStreamingModal = () => {
   }, [modalData]);
 
   useEffect(() => {
-    const openSub = subscribeOpenModal(modalNameValue, (data) => {
+    const openSub = subscribeOpenModal(modalNameValue, (data: ModalData) => {
       setModalData(data);
       setOpen(true);
     });
@@ -58,7 +59,9 @@ export const EditLogStreamingModal = () => {
       onClose={() => setOpen(false)}
       afterClose={() => setModalData(null)}
     >
-      {isPresent(modalData) && <ModalContent modalData={modalData} setOpen={setOpen} />}
+      {isPresent(modalData) && (
+        <ModalContent key={modalData.id} modalData={modalData} setOpen={setOpen} />
+      )}
     </Modal>
   );
 };
@@ -82,9 +85,9 @@ const ModalContent = ({ modalData, setOpen }: ModalContentProps) => {
       z.object({
         name: z.string().trim().min(1, m.form_error_required()),
         url: z.string().trim().min(1, m.form_error_required()),
-        username: z.string().optional(),
-        password: z.string().optional(),
-        certificate: z.string().optional(),
+        username: z.string().nullable(),
+        password: z.string().nullable(),
+        certificate: z.file().nullable(),
       }),
     [],
   );
@@ -95,9 +98,11 @@ const ModalContent = ({ modalData, setOpen }: ModalContentProps) => {
     (): FormFields => ({
       name: modalData.name,
       url: modalData.config.url,
-      username: modalData.config.username || '',
-      password: modalData.config.password || '',
-      certificate: modalData.config.cert || '',
+      username: modalData.config.username,
+      password: modalData.config.password,
+      certificate: modalData.config.cert
+        ? new File([modalData.config.cert], 'certificate.pem')
+        : null,
     }),
     [modalData],
   );
@@ -110,14 +115,16 @@ const ModalContent = ({ modalData, setOpen }: ModalContentProps) => {
       onChange: formSchema,
     },
     onSubmit: async ({ value }) => {
+      const certificateContent = await processCertificateFile(value.certificate);
+
       const requestData: CreateActivityLogStreamRequest = {
         name: value.name,
         stream_type: modalData.stream_type,
         stream_config: {
           url: value.url,
-          username: value.username || undefined,
-          password: value.password || undefined,
-          cert: value.certificate || undefined,
+          username: value.username,
+          password: value.password,
+          cert: certificateContent,
         },
       };
 
@@ -161,7 +168,7 @@ const ModalContent = ({ modalData, setOpen }: ModalContentProps) => {
           <SizedBox height={ThemeSpacing.Xl} />
 
           <form.AppField name="certificate">
-            {(field) => <field.FormInput label="Certificate" />}
+            {(field) => <field.FormUploadField title="Upload certificate file" />}
           </form.AppField>
         </form.AppForm>
       </form>

web/src/shared/api/types.ts

@@ -894,9 +894,9 @@ export interface CreateActivityLogStreamRequest {
 
 export interface ActivityLogStreamConfig {
   url: string;
-  username?: string;
-  password?: string;
-  cert?: string;
+  username: string | null;
+  password: string | null;
+  cert: string | null;
 }
 
 export type ActivityLogSortKey =

web/src/shared/components/FormUploadField/FormUploadField.tsx

@@ -9,5 +9,12 @@ export const FormUploadField = (
   const field = useFieldContext<File | null>();
   const error = useFormFieldError();
 
-  return <UploadField error={error} value={field.state.value} {...props} />;
+  return (
+    <UploadField
+      error={error}
+      value={field.state.value}
+      onChange={field.handleChange}
+      {...props}
+    />
+  );
 };

web/src/shared/components/UploadField/UploadField.tsx

@@ -19,6 +19,7 @@ export const UploadField = ({
   loading,
   disabled,
   testId,
+  title,
   onChange,
 }: UploadFieldProps) => {
   const valuePresent = isPresent(value);
@@ -51,7 +52,7 @@ export const UploadField = ({
           <Button
             iconLeft="upload"
             variant="outlined"
-            text={m.cmp_file_upload_button()}
+            text={title ?? m.cmp_file_upload_button()}
             loading={loading || isPending}
             disabled={disabled}
             onClick={() => {

web/src/shared/components/UploadField/style.scss

@@ -1,7 +1,7 @@
 .upload-field {
   & > .inner-track {
     display: flex;
-    flex-flow: column;
+    flex-flow: row nowrap;
     align-items: flex-start;
     justify-content: flex-start;
     padding: 1px;
@@ -11,6 +11,7 @@
     }
 
     .file-row {
+      flex: 1;
       box-sizing: border-box;
       padding: var(--spacing-sm);
       display: grid;

web/src/shared/components/UploadField/types.ts

@@ -7,5 +7,6 @@ export interface UploadFieldProps {
   disabled?: boolean;
   acceptedExtensions?: string[];
   testId?: string;
+  title?: string;
   onChange?: (value: File | null) => void;
 }

web/src/shared/utils/processCertificateFile.ts

@@ -0,0 +1,14 @@
+import { Snackbar } from '../defguard-ui/providers/snackbar/snackbar';
+export const processCertificateFile = async (
+  file: File | null,
+): Promise<string | null> => {
+  if (!file) return null;
+  try {
+    const content = await file.text();
+    return content.replace(/\r\n/g, '\n').trim();
+  } catch (error) {
+    Snackbar.error('Failed to read certificate file');
+    console.error('Failed to read certificate file:', error);
+    return null;
+  }
+};