diff --git a/web/src/pages/settings/SettingsActivityLogStreamingPage/modals/AddDestinationModal/AddLogStreamingModal.tsx b/web/src/pages/settings/SettingsActivityLogStreamingPage/modals/AddDestinationModal/AddLogStreamingModal.tsx
index 8772a86e44..cca2dff9c7 100644
--- a/web/src/pages/settings/SettingsActivityLogStreamingPage/modals/AddDestinationModal/AddLogStreamingModal.tsx
+++ b/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) => {
- {(field) => }
+ {(field) => }
diff --git a/web/src/pages/settings/SettingsActivityLogStreamingPage/modals/EditDestinationModal/EditLogStreamingModal.tsx b/web/src/pages/settings/SettingsActivityLogStreamingPage/modals/EditDestinationModal/EditLogStreamingModal.tsx
index 508d7b08a9..6725204556 100644
--- a/web/src/pages/settings/SettingsActivityLogStreamingPage/modals/EditDestinationModal/EditLogStreamingModal.tsx
+++ b/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) && }
+ {isPresent(modalData) && (
+
+ )}
);
};
@@ -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) => {
- {(field) => }
+ {(field) => }
diff --git a/web/src/shared/api/types.ts b/web/src/shared/api/types.ts
index 942eaea980..c361698e8f 100644
--- a/web/src/shared/api/types.ts
+++ b/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 =
diff --git a/web/src/shared/components/FormUploadField/FormUploadField.tsx b/web/src/shared/components/FormUploadField/FormUploadField.tsx
index 1857f97c85..9d8a362d29 100644
--- a/web/src/shared/components/FormUploadField/FormUploadField.tsx
+++ b/web/src/shared/components/FormUploadField/FormUploadField.tsx
@@ -9,5 +9,12 @@ export const FormUploadField = (
const field = useFieldContext();
const error = useFormFieldError();
- return ;
+ return (
+
+ );
};
diff --git a/web/src/shared/components/UploadField/UploadField.tsx b/web/src/shared/components/UploadField/UploadField.tsx
index 8396cb3381..d13de187b3 100644
--- a/web/src/shared/components/UploadField/UploadField.tsx
+++ b/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 = ({