Merge pull request #4268 from RedisInsight/fe/feature/RI-6451

#RI-6451 - update add database form

Author: vlad-dargel

redisinsight/ui/src/components/instance-header/components/instances-navigation-popover/styles.module.scss

@@ -86,13 +86,15 @@
   }
 }
 
-.listContainer :global(.euiListGroupItem-isActive), :global(.euiListGroupItem:hover) {
-  background-color: var(--hoverInListColorDarken) !important;
-  color: var(--euiTextSubduedColorHover) !important;
-  border-left-color: var(--externalLinkColor) !important;
-  border-left-width: 3px !important;
-  border-left-style: solid !important;
-  text-decoration: none !important;
+.listContainer {
+  :global(.euiListGroupItem-isActive), :global(.euiListGroupItem:hover) {
+    background-color: var(--hoverInListColorDarken) !important;
+    color: var(--euiTextSubduedColorHover) !important;
+    border-left-color: var(--externalLinkColor) !important;
+    border-left-width: 3px !important;
+    border-left-style: solid !important;
+    text-decoration: none !important;
+  }
 }
 
 .footerContainer {

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)
@@ -100,46 +98,15 @@ const ConnectionUrl = (props: Props) => {
   })
 
   return (
-    <div>
+    <div className="eui-yScroll">
       <EuiForm
         component="form"
         onSubmit={formik.handleSubmit}
         data-testid="form"
       >
         <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,46 @@
+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 = ({ value, onChange }: Props) => (
+  <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;
+  }
+}