Merge pull request #548 from RedisInsight/feature/RI-2727-SNI_UI

#RI-2727 - UI for SNI

Author: egor-zalenski

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(
+      <div id="footerDatabaseForm">
+        <InstanceForm
+          {...instance(mockedProps)}
+          isEditMode
+          formFields={{
+            ...formFields,
+            tls: {},
+            connectionType: ConnectionType.Cluster,
+          }}
+          onSubmit={handleSubmit}
+        />
+      </div>
+    )
+    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(
+      <div id="footerDatabaseForm">
+        <InstanceForm
+          {...instance(mockedProps)}
+          isEditMode
+          formFields={{
+            ...formFields,
+            tls: {},
+            connectionType: ConnectionType.Cluster,
+          }}
+          onSubmit={handleSubmit}
+        />
+      </div>
+    )
+    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(

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) => {
           <EuiFlexItem className={flexItemClassName}>
             <EuiFormRow label="Host*">
               <EuiFieldText
+                autoFocus
                 name="host"
                 id="host"
                 data-testid="host"
@@ -726,7 +740,8 @@ const AddStandaloneForm = (props: Props) => {
             <EuiCallOut>
               <EuiText size="s" data-testid="db-index-message">
                 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.
               </EuiText>
             </EuiCallOut>
@@ -786,16 +801,52 @@ const AddStandaloneForm = (props: Props) => {
         </EuiFlexItem>
 
         {formik.values.tls && (
-          <EuiFlexItem className={flexItemClassName}>
-            <EuiCheckbox
-              id={`${htmlIdGenerator()()} verifyServerTlsCert`}
-              name="verifyServerTlsCert"
-              label="Verify TLS Certificate"
-              checked={!!formik.values.verifyServerTlsCert}
-              onChange={formik.handleChange}
-              data-testid="verify-tls-cert"
-            />
-          </EuiFlexItem>
+          <>
+            <EuiFlexItem className={flexItemClassName}>
+              <EuiCheckbox
+                id={`${htmlIdGenerator()()} sni`}
+                name="sni"
+                label="Use SNI"
+                checked={!!formik.values.sni}
+                onChange={(e: ChangeEvent<HTMLInputElement>) => {
+                  formik.setFieldValue(
+                    'servername',
+                    formik.values.servername ?? formik.values.host ?? ''
+                  )
+                  return formik.handleChange(e)
+                }}
+                data-testid="sni"
+              />
+            </EuiFlexItem>
+            {formik.values.sni && (
+              <EuiFlexItem className={flexItemClassName}>
+                <EuiFieldText
+                  name="servername"
+                  id="servername"
+                  fullWidth
+                  maxLength={200}
+                  placeholder="Enter Server Name"
+                  value={formik.values.servername ?? ''}
+                  onChange={(e: ChangeEvent<HTMLInputElement>) =>
+                    formik.setFieldValue(
+                      e.target.name,
+                      validateField(e.target.value.trim())
+                    )}
+                  data-testid="sni-servername"
+                />
+              </EuiFlexItem>
+            )}
+            <EuiFlexItem className={flexItemClassName}>
+              <EuiCheckbox
+                id={`${htmlIdGenerator()()} verifyServerTlsCert`}
+                name="verifyServerTlsCert"
+                label="Verify TLS Certificate"
+                checked={!!formik.values.verifyServerTlsCert}
+                onChange={formik.handleChange}
+                data-testid="verify-tls-cert"
+              />
+            </EuiFlexItem>
+          </>
         )}
       </EuiFlexGroup>
       {formik.values.tls && (

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