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 = ({