diff --git a/redisinsight/ui/src/pages/home/components/AddInstanceForm/InstanceForm/InstanceForm.spec.tsx b/redisinsight/ui/src/pages/home/components/AddInstanceForm/InstanceForm/InstanceForm.spec.tsx index 9784bec168..fea9ceacba 100644 --- a/redisinsight/ui/src/pages/home/components/AddInstanceForm/InstanceForm/InstanceForm.spec.tsx +++ b/redisinsight/ui/src/pages/home/components/AddInstanceForm/InstanceForm/InstanceForm.spec.tsx @@ -232,6 +232,74 @@ describe('InstanceForm', () => { ) }) + it('should change "Use SNI" with prepopulated with host', async () => { + const handleSubmit = jest.fn() + render( +
+ +
+ ) + fireEvent.click(screen.getByTestId('sni')) + + const submitBtn = screen.getByTestId(BTN_SUBMIT) + await waitFor(() => { + fireEvent.click(submitBtn) + }) + + expect(handleSubmit).toBeCalledWith( + expect.objectContaining({ + sni: true, + servername: formFields.host + }) + ) + }) + + it('should change "Use SNI"', async () => { + const handleSubmit = jest.fn() + render( +
+ +
+ ) + fireEvent.click(screen.getByTestId('sni')) + + await waitFor(() => { + fireEvent.change(screen.getByTestId('sni-servername'), { + target: { value: '12' }, + }) + }) + + const submitBtn = screen.getByTestId(BTN_SUBMIT) + await waitFor(() => { + fireEvent.click(submitBtn) + }) + + expect(handleSubmit).toBeCalledWith( + expect.objectContaining({ + sni: true, + servername: '12' + }) + ) + }) + it('should change "Verify TLS Certificate"', async () => { const handleSubmit = jest.fn() render( diff --git a/redisinsight/ui/src/pages/home/components/AddInstanceForm/InstanceForm/InstanceForm.tsx b/redisinsight/ui/src/pages/home/components/AddInstanceForm/InstanceForm/InstanceForm.tsx index cd697881bb..7a7598e88e 100644 --- a/redisinsight/ui/src/pages/home/components/AddInstanceForm/InstanceForm/InstanceForm.tsx +++ b/redisinsight/ui/src/pages/home/components/AddInstanceForm/InstanceForm/InstanceForm.tsx @@ -78,6 +78,7 @@ export interface DbConnectionInfo extends Instance { newTlsCertPairName?: string; newTlsClientCert?: string; newTlsClientKey?: string; + servername?: string; verifyServerTlsCert?: boolean; caCertificates?: { name: string; id: string }[]; selectedCaCertName: string | typeof ADD_NEW_CA_CERT | typeof NO_CA_CERT; @@ -86,6 +87,7 @@ export interface DbConnectionInfo extends Instance { username?: string; password?: string; showDb?: boolean; + sni?: boolean; sentinelMasterUsername?: string; sentinelMasterPassword?: string; } @@ -129,6 +131,7 @@ const fieldDisplayNames: DbConnectionInfo = { newTlsCertPairName: 'Client Certificate Name', newTlsClientCert: 'Client Certificate', newTlsClientKey: 'Private Key', + servername: 'Server Name', } const getInitFieldsDisplayNames = ({ host, port, name, instanceType }: any) => { @@ -165,7 +168,8 @@ const AddStandaloneForm = (props: Props) => { modules, sentinelMasterPassword, sentinelMasterUsername, - isRediStack + isRediStack, + servername, }, initialValues: initialValuesProp, width, @@ -191,6 +195,7 @@ const AddStandaloneForm = (props: Props) => { db, modules, showDb: !!db, + sni: !!servername, newCaCert: '', newCaCertName: '', selectedCaCertName, @@ -263,6 +268,14 @@ const AddStandaloneForm = (props: Props) => { errs.newCaCert = fieldDisplayNames.newCaCert } + if ( + values.tls + && values.sni + && values.servername === '' + ) { + errs.servername = fieldDisplayNames.servername + } + if ( values.tls && values.tlsClientAuthRequired @@ -593,6 +606,7 @@ const AddStandaloneForm = (props: Props) => { { When the database is added, you can select logical databases only in CLI. - To work with other logical databases in Browser and Workbench, add another database with the same host and port, + To work with other logical databases in Browser and Workbench, + add another database with the same host and port, but a different database index. @@ -786,16 +801,52 @@ const AddStandaloneForm = (props: Props) => { {formik.values.tls && ( - - - + <> + + ) => { + formik.setFieldValue( + 'servername', + formik.values.servername ?? formik.values.host ?? '' + ) + return formik.handleChange(e) + }} + data-testid="sni" + /> + + {formik.values.sni && ( + + ) => + formik.setFieldValue( + e.target.name, + validateField(e.target.value.trim()) + )} + data-testid="sni-servername" + /> + + )} + + + + )} {formik.values.tls && ( diff --git a/redisinsight/ui/src/pages/home/components/AddInstanceForm/InstanceFormWrapper.tsx b/redisinsight/ui/src/pages/home/components/AddInstanceForm/InstanceFormWrapper.tsx index 3ff4ad1d3d..8d84259d95 100644 --- a/redisinsight/ui/src/pages/home/components/AddInstanceForm/InstanceFormWrapper.tsx +++ b/redisinsight/ui/src/pages/home/components/AddInstanceForm/InstanceFormWrapper.tsx @@ -221,6 +221,7 @@ const InstanceFormWrapper = (props: Props) => { const { useTls, + servername, verifyServerCert, caCert, clientAuth, @@ -229,7 +230,7 @@ const InstanceFormWrapper = (props: Props) => { if (useTls) { db.tls = {} - + db.tls.servername = servername db.tls.verifyServerCert = !!verifyServerCert if (typeof caCert?.new !== 'undefined') { @@ -280,6 +281,7 @@ const InstanceFormWrapper = (props: Props) => { const { useTls, + servername, verifyServerCert, caCert, clientAuth, @@ -288,7 +290,7 @@ const InstanceFormWrapper = (props: Props) => { if (useTls) { database.tls = {} - + database.tls.servername = servername database.tls.verifyServerCert = !!verifyServerCert if (typeof caCert?.new !== 'undefined') { database.tls.newCaCert = { @@ -331,6 +333,8 @@ const InstanceFormWrapper = (props: Props) => { const { newCaCert, tls, + sni, + servername, newCaCertName, selectedCaCertName, tlsClientAuthRequired, @@ -343,6 +347,7 @@ const InstanceFormWrapper = (props: Props) => { const tlsSettings = { useTls: tls, + servername: (sni && servername) || undefined, verifyServerCert: verifyServerTlsCert, caCert: !tls || selectedCaCertName === NO_CA_CERT