#RI-6451 - update add database form

Author: rsergeenko

redisinsight/ui/src/pages/home/components/connection-url/ConnectionUrl.spec.tsx renamed to redisinsight/ui/src/pages/home/components/add-database-screen/AddDatabaseScreen.spec.tsx

@@ -5,7 +5,7 @@ import { render, screen, fireEvent, mockedStore, cleanup, act } from 'uiSrc/util
 
 import { defaultInstanceChanging } from 'uiSrc/slices/instances/instances'
 import { AddDbType } from 'uiSrc/pages/home/constants'
-import ConnectionUrl, { Props } from './ConnectionUrl'
+import AddDatabaseScreen, { Props } from './AddDatabaseScreen'
 
 const mockedProps = mock<Props>()
 
@@ -16,13 +16,13 @@ beforeEach(() => {
   store.clearActions()
 })
 
-describe('ConnectionUrl', () => {
+describe('AddDatabaseScreen', () => {
   it('should render', () => {
-    expect(render(<ConnectionUrl {...mockedProps} />)).toBeTruthy()
+    expect(render(<AddDatabaseScreen {...mockedProps} />)).toBeTruthy()
   })
 
   it('should call proper actions with empty connection url', async () => {
-    render(<ConnectionUrl {...mockedProps} />)
+    render(<AddDatabaseScreen {...mockedProps} />)
 
     await act(async () => {
       fireEvent.click(screen.getByTestId('btn-submit'))
@@ -32,7 +32,7 @@ describe('ConnectionUrl', () => {
   })
 
   it('should disable test connection and submit buttons when connection url is invalid', async () => {
-    render(<ConnectionUrl {...mockedProps} />)
+    render(<AddDatabaseScreen {...mockedProps} />)
 
     await act(async () => {
       fireEvent.change(
@@ -46,7 +46,7 @@ describe('ConnectionUrl', () => {
   })
 
   it('should not disable buttons with proper connection url', async () => {
-    render(<ConnectionUrl {...mockedProps} />)
+    render(<AddDatabaseScreen {...mockedProps} />)
 
     await act(async () => {
       fireEvent.change(
@@ -61,7 +61,7 @@ describe('ConnectionUrl', () => {
 
   it('should call proper actions after click manual settings', async () => {
     const onSelectOptionMock = jest.fn()
-    render(<ConnectionUrl {...mockedProps} onSelectOption={onSelectOptionMock} />)
+    render(<AddDatabaseScreen {...mockedProps} onSelectOption={onSelectOptionMock} />)
 
     await act(async () => {
       fireEvent.change(
@@ -90,7 +90,7 @@ describe('ConnectionUrl', () => {
 
   it('should call proper actions after click connectivity option', async () => {
     const onSelectOptionMock = jest.fn()
-    render(<ConnectionUrl {...mockedProps} onSelectOption={onSelectOptionMock} />)
+    render(<AddDatabaseScreen {...mockedProps} onSelectOption={onSelectOptionMock} />)
 
     await act(async () => {
       fireEvent.click(screen.getByTestId('option-btn-sentinel'))

redisinsight/ui/src/pages/home/components/connection-url/ConnectionUrl.tsx renamed to redisinsight/ui/src/pages/home/components/add-database-screen/AddDatabaseScreen.tsx

@@ -5,10 +5,7 @@ import {
   EuiFlexGroup,
   EuiFlexItem,
   EuiForm,
-  EuiFormRow,
-  EuiIcon,
   EuiSpacer,
-  EuiTextArea,
   EuiToolTip
 } from '@elastic/eui'
 import { useFormik } from 'formik'
@@ -25,6 +22,7 @@ import {
 } from 'uiSrc/slices/instances/instances'
 import { Pages } from 'uiSrc/constants'
 import ConnectivityOptions from './components/connectivity-options'
+import ConnectionUrl from './components/connection-url'
 
 import styles from './styles.module.scss'
 
@@ -57,7 +55,7 @@ const ConnectionUrlError = (
   </>
 )
 
-const ConnectionUrl = (props: Props) => {
+const AddDatabaseScreen = (props: Props) => {
   const { onSelectOption, onClose } = props
   const [isInvalid, setIsInvalid] = useState<Boolean>(false)
   const { loadingChanging: isLoading } = useSelector(instancesSelector)
@@ -108,38 +106,7 @@ const ConnectionUrl = (props: Props) => {
       >
         <EuiFlexGroup>
           <EuiFlexItem>
-            <EuiFormRow label={(
-              <div className={styles.connectionUrlInfo}>
-                <div>Connection URL</div>
-                <EuiToolTip
-                  title="The following connection URLs are supported:"
-                  className="homePage_tooltip"
-                  position="right"
-                  content={(
-                    <ul className="homePage_toolTipUl">
-                      <li><span className="dot" />redis://[[username]:[password]]@host:port</li>
-                      <li><span className="dot" />rediss://[[username]:[password]]@host:port</li>
-                      <li><span className="dot" />host:port</li>
-                    </ul>
-                  )}
-                >
-                  <EuiIcon type="iInCircle" style={{ cursor: 'pointer' }} />
-                </EuiToolTip>
-              </div>
-            )}
-            >
-              <EuiTextArea
-                name="connectionURL"
-                id="connectionURL"
-                value={formik.values.connectionURL}
-                onChange={formik.handleChange}
-                fullWidth
-                placeholder="redis://[email protected]:6379"
-                resize="none"
-                style={{ height: 88 }}
-                data-testid="connection-url"
-              />
-            </EuiFormRow>
+            <ConnectionUrl value={formik.values.connectionURL} onChange={formik.handleChange} />
           </EuiFlexItem>
         </EuiFlexGroup>
 
@@ -210,4 +177,4 @@ const ConnectionUrl = (props: Props) => {
   )
 }
 
-export default ConnectionUrl
+export default AddDatabaseScreen

redisinsight/ui/src/pages/home/components/add-database-screen/components/connection-url/ConnectionUrl.spec.tsx

@@ -0,0 +1,21 @@
+import React from 'react'
+import { render, screen, fireEvent } from 'uiSrc/utils/test-utils'
+
+import ConnectionUrl from './ConnectionUrl'
+
+describe('ConnectionUrl', () => {
+  it('should render', () => {
+    expect(render(<ConnectionUrl value="" onChange={() => {}} />)).toBeTruthy()
+  })
+
+  it('should change connection url', () => {
+    const onChangeMock = jest.fn()
+    render(<ConnectionUrl value="val" onChange={onChangeMock} />)
+
+    expect(screen.getByTestId('connection-url')).toHaveValue('val')
+
+    fireEvent.change(screen.getByTestId('connection-url'), { target: { value: 'val1' } })
+
+    expect(onChangeMock).toBeCalled()
+  })
+})

redisinsight/ui/src/pages/home/components/add-database-screen/components/connection-url/ConnectionUrl.tsx

@@ -0,0 +1,50 @@
+import React from 'react'
+import { EuiFormRow, EuiIcon, EuiTextArea, EuiToolTip } from '@elastic/eui'
+
+import styles from './styles.module.scss'
+
+export interface Props {
+  value: string
+  onChange: (e: React.ChangeEvent<any>) => void
+}
+
+const ConnectionUrl = (props: Props) => {
+  const { value, onChange } = props
+
+  return (
+    <EuiFormRow label={(
+      <div className={styles.connectionUrlInfo}>
+        <div>Connection URL</div>
+        <EuiToolTip
+          title="The following connection URLs are supported:"
+          className="homePage_tooltip"
+          position="right"
+          content={(
+            <ul className="homePage_toolTipUl">
+              <li><span className="dot" />redis://[[username]:[password]]@host:port</li>
+              <li><span className="dot" />rediss://[[username]:[password]]@host:port</li>
+              <li><span className="dot" />host:port</li>
+            </ul>
+          )}
+        >
+          <EuiIcon type="iInCircle" style={{ cursor: 'pointer' }} />
+        </EuiToolTip>
+      </div>
+    )}
+    >
+      <EuiTextArea
+        name="connectionURL"
+        id="connectionURL"
+        value={value}
+        onChange={onChange}
+        fullWidth
+        placeholder="redis://[email protected]:6379"
+        resize="none"
+        style={{ height: 88 }}
+        data-testid="connection-url"
+      />
+    </EuiFormRow>
+  )
+}
+
+export default ConnectionUrl

redisinsight/ui/src/pages/home/components/connection-url/index.ts renamed to redisinsight/ui/src/pages/home/components/add-database-screen/components/connection-url/index.ts

@@ -0,0 +1,8 @@
+.connectionUrlInfo {
+  display: flex;
+  align-items: center;
+
+  > :global(.euiToolTipAnchor) {
+    margin-left: 4px;
+  }
+}