Merge pull request #4080 from RedisInsight/bugfix/feature/RI-6268

#RI-6309 - 6313 - defect fixing

Author: rsergeenko

redisinsight/ui/src/pages/home/HomePage.tsx

@@ -48,7 +48,7 @@ enum OpenDialogName {
 
 const HomePage = () => {
   const [openDialog, setOpenDialog] = useState<Nullable<OpenDialogName>>(null)
-  const initialDbTypeRef = useRef<AddDbType>(AddDbType.manual)
+  const initialDbTypeRef = useRef<AddDbType>(AddDbType.cloud)
 
   const dispatch = useDispatch()
 

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

@@ -172,7 +172,7 @@ const CloudConnectionForm = (props: Props) => {
     return null
   }
 
-  const CloudApiForm = () => (
+  const CloudApiForm = (
     <div className={styles.cloudApi} data-testid="add-db_cloud-api">
       <MessageCloudApiKeys />
       <EuiSpacer />
@@ -237,7 +237,7 @@ const CloudConnectionForm = (props: Props) => {
         <EuiSpacer />
       </FeatureFlagComponent>
       {type === CloudConnectionOptions.Account && (<OAuthAutodiscovery source={OAuthSocialSource.DiscoveryForm} />)}
-      {type === CloudConnectionOptions.ApiKeys && (<CloudApiForm />)}
+      {type === CloudConnectionOptions.ApiKeys && CloudApiForm}
     </div>
   )
 }

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

@@ -11,6 +11,14 @@ describe('DatabasePanelDialog', () => {
     expect(render(<DatabasePanelDialog {...instance(mockedProps)} />)).toBeTruthy()
   })
 
+  it('should change tab to manual and render proper form', () => {
+    render(<DatabasePanelDialog {...instance(mockedProps)} isOpen onClose={jest.fn()} />)
+
+    fireEvent.click(screen.getByTestId('add-database_tab_manual'))
+
+    expect(screen.getByTestId('add-db_manual')).toBeInTheDocument()
+  })
+
   it('should change tab to cloud and render proper form', () => {
     render(<DatabasePanelDialog {...instance(mockedProps)} isOpen onClose={jest.fn()} />)
 

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

@@ -50,7 +50,7 @@ const DatabasePanelDialog = (props: Props) => {
     isOpen,
     editMode,
     onClose,
-    initConnectionType = AddDbType.manual
+    initConnectionType = AddDbType.cloud
   } = props
 
   const [typeSelected, setTypeSelected] = useState<InstanceType>(

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

@@ -96,13 +96,16 @@
     .euiFormRow, .euiFormControlLayout {
       max-width: none;
 
+      .euiFormControlLayout:not(.euiFormControlLayout--compressed) {
+        height: 42px !important;
+      }
+
       .euiSuperSelectControl:not(.euiSuperSelectControl--compressed),
       .euiSelect:not(.euiSelect--compressed),
-      .euiFormControlLayout:not(.euiFormControlLayout--compressed),
       .euiFieldText:not(.euiFieldText--compressed),
       .euiFieldNumber:not(.euiFieldNumber--compressed),
       .euiFieldPassword {
-        height: 43px !important;
+        height: 40px !important;
       }
     }
 

redisinsight/ui/src/pages/home/components/form/Messages.tsx

@@ -2,6 +2,7 @@ import React from 'react'
 import { EuiLink, EuiText } from '@elastic/eui'
 import { APPLICATION_NAME } from 'uiSrc/constants'
 
+import { getUtmExternalLink } from 'uiSrc/utils/links'
 import styles from '../styles.module.scss'
 
 const MessageCloudApiKeys = () => (
@@ -27,7 +28,7 @@ const MessageStandalone = () => (
     .  
     <EuiLink
       color="text"
-      href="https://docs.redis.com/latest/ri/using-redisinsight/add-instance/"
+      href={getUtmExternalLink('https://redis.io/docs/latest/develop/connect/insight#connection-management', { campaign: 'redisinsight' })}
       className={styles.link}
       external={false}
       target="_blank"
@@ -46,7 +47,7 @@ const MessageSentinel = () => (
     . &nbsp;
     <EuiLink
       color="text"
-      href="https://redis.io/docs/management/sentinel/"
+      href={getUtmExternalLink('https://redis.io/docs/latest/operate/oss_and_stack/management/sentinel/', { campaign: 'redisinsight' })}
       className={styles.link}
       external={false}
       target="_blank"
@@ -65,7 +66,7 @@ const MessageEnterpriceSoftware = () => (
     . &nbsp;
     <EuiLink
       color="text"
-      href="https://redis.io/redis-enterprise-software/overview/?utm_source=redis&utm_medium=app&utm_campaign=redisinsight"
+      href={getUtmExternalLink('https://redis.io/redis-enterprise-software/overview/', { campaign: 'redisinsight' })}
       className={styles.link}
       external={false}
       target="_blank"

redisinsight/ui/src/pages/home/components/import-database/ImportDatabase.spec.tsx

@@ -3,7 +3,7 @@ import { cloneDeep } from 'lodash'
 import { act, cleanup, fireEvent, mockedStore, render, screen } from 'uiSrc/utils/test-utils'
 
 import { sendEventTelemetry, TelemetryEvent } from 'uiSrc/telemetry'
-import { importInstancesFromFile, importInstancesSelector } from 'uiSrc/slices/instances/instances'
+import { importInstancesFromFile, importInstancesSelector, resetImportInstances } from 'uiSrc/slices/instances/instances'
 import ImportDatabase from './ImportDatabase'
 
 jest.mock('uiSrc/slices/instances/instances', () => ({
@@ -49,7 +49,7 @@ describe('ImportDatabase', () => {
       type: 'application/JSON',
     })
 
-    await act(() => {
+    await act(async () => {
       fireEvent.change(
         screen.getByTestId('import-file-modal-filepicker'),
         {
@@ -71,6 +71,26 @@ describe('ImportDatabase', () => {
     (sendEventTelemetry as jest.Mock).mockRestore()
   })
 
+  it('should call proper actions on retry', async () => {
+    (importInstancesSelector as jest.Mock).mockImplementation(() => ({
+      loading: false,
+      data: null,
+      error: 'Error message'
+    }))
+
+    render(
+      <div>
+        <ImportDatabase onClose={jest.fn()} />
+        <div id="footerDatabaseForm" />
+      </div>
+    )
+
+    fireEvent.click(screen.getByTestId('btn-retry'))
+
+    const expectedActions = [resetImportInstances()]
+    expect(store.getActions()).toEqual(expectedActions)
+  })
+
   it('should render error message when 0 success databases added', () => {
     (importInstancesSelector as jest.Mock).mockImplementation(() => ({
       loading: false,

redisinsight/ui/src/pages/home/components/import-database/ImportDatabase.tsx

@@ -44,6 +44,10 @@ const ImportDatabase = (props: Props) => {
 
   useEffect(() => {
     setDomReady(true)
+
+    return () => {
+      dispatch(resetImportInstances())
+    }
   }, [])
 
   const onFileChange = (files: FileList | null) => {
@@ -66,6 +70,11 @@ const ImportDatabase = (props: Props) => {
     }
   }
 
+  const onClickRetry = () => {
+    dispatch(resetImportInstances())
+    onFileChange(null)
+  }
+
   const onSubmit = () => {
     if (files) {
       const formData = new FormData()
@@ -83,6 +92,23 @@ const ImportDatabase = (props: Props) => {
     const footerEl = document.getElementById('footerDatabaseForm')
     if (!domReady || !footerEl) return null
 
+    if (error) {
+      return ReactDOM.createPortal(
+        <div className="footerAddDatabase">
+          <EuiButton
+            fill
+            size="s"
+            color="secondary"
+            onClick={onClickRetry}
+            data-testid="btn-retry"
+          >
+            Retry
+          </EuiButton>
+        </div>,
+        footerEl
+      )
+    }
+
     if (data) {
       return ReactDOM.createPortal(
         <div className="footerAddDatabase">

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

@@ -32,3 +32,8 @@
     }
   }
 }
+
+.result {
+  text-align: center;
+  margin-top: 32px;
+}

redisinsight/ui/src/pages/home/components/manual-connection/manual-connection-form/ManualConnectionForm.tsx

@@ -223,7 +223,7 @@ const ManualConnectionForm = (props: Props) => {
   }
 
   return (
-    <div className="relative">
+    <div className="relative" data-testid="add-db_manual">
       {isEditMode && !isCloneMode && server?.buildType !== BuildType.RedisStack && (
         <CloneConnection id={id} setIsCloneMode={setIsCloneMode} />
       )}