#RI-6451 - update add database form

.github/workflows/tests-e2e-docker.yml

@@ -37,7 +37,7 @@ jobs:
       fail-fast: false
       matrix:
         # Number of threads to run tests
-        parallel: [0, 1, 2, 3, 4, 5]
+        parallel: [0, 1, 2, 3]
 
     steps:
     - uses: actions/checkout@v4
@@ -66,7 +66,7 @@ jobs:
     - name: Generate short list of the test files
       working-directory: ./tests/e2e
       run: |
-        testFiles=$(find tests/web -type f -name '*.e2e.ts' | sort | awk "NR % 6 == ${{ matrix.parallel }}")
+        testFiles=$(find tests/web -type f -name '*.e2e.ts' | sort | awk "NR % 4 == ${{ matrix.parallel }}")
 
         echo $testFiles
 

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 → 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 → 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://default@127.0.0.1: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://default@127.0.0.1:6379"
+      resize="none"
+      style={{ height: 88 }}
+      data-testid="connection-url"
+    />
+  </EuiFormRow>
+)
+
+export default ConnectionUrl

redisinsight/ui/src/pages/home/components/add-database-screen/components/connection-url/styles.module.scss

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

redisinsight/ui/src/pages/home/components/add-database-screen/index.ts

@@ -0,0 +1,3 @@
+import AddDatabaseScreen from './AddDatabaseScreen'
+
+export default AddDatabaseScreen

redisinsight/ui/src/pages/home/components/cloud-connection/cloud-connection-form/CloudConnectionForm.tsx

@@ -220,7 +220,7 @@ const CloudConnectionForm = (props: Props) => {
   )
 
   return (
-    <div className="getStartedForm">
+    <div className="getStartedForm eui-yScroll">
       <FeatureFlagComponent name={FeatureFlags.cloudSso}>
         <EuiFlexGroup direction="column" gutterSize="s">
           <EuiFlexItem><EuiText color="subdued" size="s">Connect with:</EuiText></EuiFlexItem>

redisinsight/ui/src/pages/home/components/cluster-connection/cluster-connection-form/ClusterConnectionForm.tsx

@@ -225,7 +225,7 @@ const ClusterConnectionForm = (props: Props) => {
   }
 
   return (
-    <div className="getStartedForm" data-testid="add-db_cluster">
+    <div className="getStartedForm eui-yScroll" data-testid="add-db_cluster">
       <MessageEnterpriceSoftware />
       <br />
 

redisinsight/ui/src/pages/home/components/database-alias/DatabaseAlias.tsx

@@ -250,7 +250,7 @@ const DatabaseAlias = (props: Props) => {
         </EuiFlexItem>
       </EuiFlexGroup>
       {!isCloneMode && (
-        <EuiFlexGroup responsive={false} gutterSize="m" style={{ marginTop: 6 }}>
+        <EuiFlexGroup responsive={false} gutterSize="m" style={{ marginTop: 6, flexGrow: 0 }}>
           <EuiFlexItem grow={false}>
             <EuiButton
               size="s"

redisinsight/ui/src/pages/home/components/database-panel-dialog/DatabasePanelDialog.tsx

@@ -17,7 +17,7 @@ import { appRedirectionSelector, setUrlHandlingInitialState } from 'uiSrc/slices
 
 import ManualConnectionWrapper from 'uiSrc/pages/home/components/manual-connection'
 import SentinelConnectionWrapper from 'uiSrc/pages/home/components/sentinel-connection'
-import ConnectionUrlForm from 'uiSrc/pages/home/components/connection-url'
+import AddDatabaseScreen from 'uiSrc/pages/home/components/add-database-screen'
 
 import CloudConnectionFormWrapper from 'uiSrc/pages/home/components/cloud-connection'
 import ImportDatabase from 'uiSrc/pages/home/components/import-database'
@@ -119,7 +119,7 @@ const DatabasePanelDialog = (props: Props) => {
   const Form = () => (
     <>
       {connectionType === null && (
-        <ConnectionUrlForm
+        <AddDatabaseScreen
           onSelectOption={changeConnectionType}
           onClose={onClose}
         />

redisinsight/ui/src/pages/home/components/database-panel-dialog/styles.module.scss

@@ -7,10 +7,9 @@
 }
 
 .formWrapper {
-  @include eui.scrollBar;
   flex-grow: 1;
-  overflow-y: auto;
   padding: 16px 24px;
+  height: 100%;
 
   .softwareTypes {
     display: flex;