#RI-6389 - change form rendering to not force initial props

rsergeenko · rsergeenko · commit 108a904c8e8d · 2024-12-10T14:29:38.000+01:00
diff --git a/redisinsight/ui/src/pages/home/HomePage.tsx b/redisinsight/ui/src/pages/home/HomePage.tsx
@@ -3,7 +3,7 @@ import {
   EuiPageBody,
   EuiPanel,
 } from '@elastic/eui'
-import React, { useEffect, useRef, useState } from 'react'
+import React, { useEffect, useState } from 'react'
 import { useDispatch, useSelector } from 'react-redux'
 import { clusterSelector, resetDataRedisCluster, resetInstancesRedisCluster, } from 'uiSrc/slices/instances/cluster'
 import { Nullable, setTitle } from 'uiSrc/utils'
@@ -33,6 +33,7 @@ import { sendEventTelemetry, sendPageViewTelemetry, TelemetryEvent, TelemetryPag
 import { appRedirectionSelector, setUrlHandlingInitialState } from 'uiSrc/slices/app/url-handling'
 import { UrlHandlingActions } from 'uiSrc/slices/interfaces/urlHandling'
 import { AddDbType, CREATE_CLOUD_DB_ID } from 'uiSrc/pages/home/constants'
+import { appFeatureFlagsFeaturesSelector } from 'uiSrc/slices/app/features'
 
 import DatabasesList from './components/database-list-component'
 import DatabaseListHeader from './components/database-list-header'
@@ -41,7 +42,6 @@ import DatabasePanelDialog from './components/database-panel-dialog'
 
 import './styles.scss'
 import styles from './styles.module.scss'
-import { appFeatureFlagsFeaturesSelector } from 'uiSrc/slices/app/features'
 
 enum OpenDialogName {
   AddDatabase = 'add',
@@ -208,23 +208,24 @@ const HomePage = () => {
               key="instance-controls"
               onAddInstance={handleAddInstance}
             />
-            <DatabasePanelDialog
-              isOpen={!!openDialog}
-              editMode={openDialog === OpenDialogName.EditDatabase}
-              urlHandlingAction={action}
-              initialValues={dbConnection ?? null}
-              editedInstance={
-                openDialog === OpenDialogName.EditDatabase
-                  ? editedInstance
-                  : sentinelInstance ?? null
-              }
-              onClose={
-                openDialog === OpenDialogName.EditDatabase
-                  ? closeEditDialog
-                  : handleClose
-              }
-              onDbEdited={onDbEdited}
-            />
+            {!!openDialog && (
+              <DatabasePanelDialog
+                editMode={openDialog === OpenDialogName.EditDatabase}
+                urlHandlingAction={action}
+                initialValues={dbConnection ?? null}
+                editedInstance={
+                  openDialog === OpenDialogName.EditDatabase
+                    ? editedInstance
+                    : sentinelInstance ?? null
+                }
+                onClose={
+                  openDialog === OpenDialogName.EditDatabase
+                    ? closeEditDialog
+                    : handleClose
+                }
+                onDbEdited={onDbEdited}
+              />
+            )}
             <div key="homePage" className="homePage">
               {(!isInstanceExists && !loading && !loadingChanging ? (
                 <EuiPanel className={styles.emptyPanel} borderRadius="none">
diff --git a/redisinsight/ui/src/pages/home/components/connection-url/ConnectionUrl.tsx b/redisinsight/ui/src/pages/home/components/connection-url/ConnectionUrl.tsx
@@ -12,13 +12,17 @@ import {
   EuiToolTip
 } from '@elastic/eui'
 import { useFormik } from 'formik'
-import { useDispatch } from 'react-redux'
+import { useDispatch, useSelector } from 'react-redux'
 import { useHistory } from 'react-router'
 import { Nullable, parseRedisUrl } from 'uiSrc/utils'
 
 import { AddDbType } from 'uiSrc/pages/home/constants'
 import { Instance } from 'uiSrc/slices/interfaces'
-import { createInstanceStandaloneAction, testInstanceStandaloneAction } from 'uiSrc/slices/instances/instances'
+import {
+  createInstanceStandaloneAction,
+  instancesSelector,
+  testInstanceStandaloneAction
+} from 'uiSrc/slices/instances/instances'
 import { Pages } from 'uiSrc/constants'
 import ConnectivityOptions from './components/connectivity-options'
 
@@ -56,6 +60,7 @@ const ConnectionUrlError = (
 const ConnectionUrl = (props: Props) => {
   const { onSelectOption, onClose } = props
   const [isInvalid, setIsInvalid] = useState<Boolean>(false)
+  const { loadingChanging: isLoading } = useSelector(instancesSelector)
 
   const dispatch = useDispatch()
   const history = useHistory()
@@ -153,6 +158,7 @@ const ConnectionUrl = (props: Props) => {
                 isDisabled={!!isInvalid}
                 iconType={isInvalid ? 'iInCircle' : undefined}
                 onClick={handleTestConnection}
+                isLoading={isLoading}
                 data-testid="btn-test-connection"
               >
                 Test Connection
diff --git a/redisinsight/ui/src/pages/home/components/database-panel-dialog/DatabasePanelDialog.spec.tsx b/redisinsight/ui/src/pages/home/components/database-panel-dialog/DatabasePanelDialog.spec.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
 import { instance, mock } from 'ts-mockito'
-import { render, screen, fireEvent, act } from 'uiSrc/utils/test-utils'
+import { render, screen, fireEvent } from 'uiSrc/utils/test-utils'
 
 import DatabasePanelDialog, { Props } from './DatabasePanelDialog'
 
@@ -12,37 +12,37 @@ describe('DatabasePanelDialog', () => {
   })
 
   it('should render proper form by dfeault', () => {
-    render(<DatabasePanelDialog {...instance(mockedProps)} isOpen onClose={jest.fn()} />)
+    render(<DatabasePanelDialog {...instance(mockedProps)} onClose={jest.fn()} />)
 
     expect(screen.getByTestId('connection-url')).toBeInTheDocument()
   })
 
   it('should change screen to cloud and render proper form', () => {
-    render(<DatabasePanelDialog {...instance(mockedProps)} isOpen onClose={jest.fn()} />)
+    render(<DatabasePanelDialog {...instance(mockedProps)} onClose={jest.fn()} />)
 
     fireEvent.click(screen.getByTestId('discover-cloud-btn'))
 
     expect(screen.getByTestId('add-db_cloud-api')).toBeInTheDocument()
   })
 
   it('should change screen to software and render proper form', () => {
-    render(<DatabasePanelDialog {...instance(mockedProps)} isOpen onClose={jest.fn()} />)
+    render(<DatabasePanelDialog {...instance(mockedProps)} onClose={jest.fn()} />)
 
     fireEvent.click(screen.getByTestId('option-btn-software'))
 
     expect(screen.getByTestId('add-db_cluster')).toBeInTheDocument()
   })
 
   it('should change tab to sentinel and render proper form', async () => {
-    render(<DatabasePanelDialog {...instance(mockedProps)} isOpen onClose={jest.fn()} />)
+    render(<DatabasePanelDialog {...instance(mockedProps)} onClose={jest.fn()} />)
 
     fireEvent.click(screen.getByTestId('option-btn-sentinel'))
 
     expect(screen.getByTestId('add-db_sentinel')).toBeInTheDocument()
   })
 
   it('should change screen to import render proper form', async () => {
-    render(<DatabasePanelDialog {...instance(mockedProps)} isOpen onClose={jest.fn()} />)
+    render(<DatabasePanelDialog {...instance(mockedProps)} onClose={jest.fn()} />)
 
     fireEvent.click(screen.getByTestId('option-btn-import'))
 
diff --git a/redisinsight/ui/src/pages/home/components/database-panel-dialog/DatabasePanelDialog.tsx b/redisinsight/ui/src/pages/home/components/database-panel-dialog/DatabasePanelDialog.tsx
@@ -27,7 +27,6 @@ import ClusterConnectionFormWrapper from 'uiSrc/pages/home/components/cluster-co
 import styles from './styles.module.scss'
 
 export interface Props {
-  isOpen: boolean
   editMode: boolean
   urlHandlingAction?: Nullable<UrlHandlingActions>
   initialValues?: Nullable<Record<string, any>>
@@ -39,7 +38,6 @@ export interface Props {
 
 const DatabasePanelDialog = (props: Props) => {
   const {
-    isOpen,
     editMode,
     onClose,
     initialValues: initialValuesProp,
@@ -83,35 +81,31 @@ const DatabasePanelDialog = (props: Props) => {
     }
   }, [editMode])
 
-  useEffect(() => {
-    if (!isOpen) {
-      // clear state after closing dialog
-      setConnectionType(null)
-      if (connectionType === AddDbType.manual) return
-
-      switch (connectionType) {
-        case AddDbType.cloud: {
-          dispatch(resetDataRedisCluster())
-          dispatch(resetDataSentinel())
-          break
-        }
-
-        case AddDbType.sentinel: {
-          dispatch(resetDataRedisCloud())
-          dispatch(resetDataRedisCluster())
-          break
-        }
-
-        case AddDbType.software: {
-          dispatch(resetDataRedisCloud())
-          dispatch(resetDataSentinel())
-          break
-        }
-        default:
-          break
+  useEffect(() => () => {
+    if (connectionType === AddDbType.manual) return
+
+    switch (connectionType) {
+      case AddDbType.cloud: {
+        dispatch(resetDataRedisCluster())
+        dispatch(resetDataSentinel())
+        break
+      }
+
+      case AddDbType.sentinel: {
+        dispatch(resetDataRedisCloud())
+        dispatch(resetDataRedisCluster())
+        break
+      }
+
+      case AddDbType.software: {
+        dispatch(resetDataRedisCloud())
+        dispatch(resetDataSentinel())
+        break
       }
+      default:
+        break
     }
-  }, [isOpen, connectionType])
+  }, [connectionType])
 
   const changeConnectionType = (connectionType: AddDbType, db: any) => {
     dispatch(setUrlHandlingInitialState())
@@ -128,6 +122,7 @@ const DatabasePanelDialog = (props: Props) => {
       {connectionType === null && (
         <ConnectionUrlForm
           onSelectOption={changeConnectionType}
+          onClose={onClose}
         />
       )}
       {connectionType === AddDbType.manual && (
@@ -171,7 +166,7 @@ const DatabasePanelDialog = (props: Props) => {
 
   return (
     <FormDialog
-      isOpen={isOpen}
+      isOpen
       onClose={onClose}
       header={modalHeader ?? (<EuiTitle size="s"><h4>Add Database</h4></EuiTitle>)}
       footer={<div id="footerDatabaseForm" />}
diff --git a/redisinsight/ui/src/pages/home/components/form/DatabaseForm.tsx b/redisinsight/ui/src/pages/home/components/form/DatabaseForm.tsx
@@ -112,60 +112,63 @@ const DatabaseForm = (props: Props) => {
           </EuiFlexItem>
         </EuiFlexGroup>
       )}
-      <EuiFlexGroup responsive={false}>
-        {showFields.host && (
-          <EuiFlexItem grow={4}>
-            <EuiFormRow label="Host*">
-              <EuiFieldText
-                autoFocus={autoFocus}
-                name="ip"
-                id="host"
-                data-testid="host"
-                color="secondary"
-                maxLength={200}
-                placeholder="Enter Hostname / IP address / Connection URL"
-                value={formik.values.host ?? ''}
-                onChange={(e: ChangeEvent<HTMLInputElement>) => {
-                  formik.setFieldValue(
-                    'host',
-                    validateField(e.target.value.trim())
-                  )
-                }}
-                onPaste={(event: React.ClipboardEvent<HTMLInputElement>) => handlePasteHostName(onHostNamePaste, event)}
-                onFocus={selectOnFocus}
-                append={<AppendHostName />}
-                disabled={isFieldDisabled('host')}
-              />
-            </EuiFormRow>
-          </EuiFlexItem>
-        )}
-        {isShowPort && (
-          <EuiFlexItem grow={2}>
-            <EuiFormRow label="Port*" helpText="Should not exceed 65535.">
-              <EuiFieldNumber
-                name="port"
-                id="port"
-                data-testid="port"
-                style={{ width: '100%' }}
-                placeholder="Enter Port"
-                value={formik.values.port ?? ''}
-                maxLength={6}
-                onChange={(e: ChangeEvent<HTMLInputElement>) => {
-                  formik.setFieldValue(
-                    e.target.name,
-                    validatePortNumber(e.target.value.trim())
-                  )
-                }}
-                onFocus={selectOnFocus}
-                type="text"
-                min={0}
-                max={MAX_PORT_NUMBER}
-                disabled={isFieldDisabled('port')}
-              />
-            </EuiFormRow>
-          </EuiFlexItem>
-        )}
-      </EuiFlexGroup>
+
+      {(showFields.host || isShowPort) && (
+        <EuiFlexGroup responsive={false}>
+          {showFields.host && (
+            <EuiFlexItem grow={4}>
+              <EuiFormRow label="Host*">
+                <EuiFieldText
+                  autoFocus={autoFocus}
+                  name="ip"
+                  id="host"
+                  data-testid="host"
+                  color="secondary"
+                  maxLength={200}
+                  placeholder="Enter Hostname / IP address / Connection URL"
+                  value={formik.values.host ?? ''}
+                  onChange={(e: ChangeEvent<HTMLInputElement>) => {
+                    formik.setFieldValue(
+                      'host',
+                      validateField(e.target.value.trim())
+                    )
+                  }}
+                  onPaste={(event: React.ClipboardEvent<HTMLInputElement>) => handlePasteHostName(onHostNamePaste, event)}
+                  onFocus={selectOnFocus}
+                  append={<AppendHostName />}
+                  disabled={isFieldDisabled('host')}
+                />
+              </EuiFormRow>
+            </EuiFlexItem>
+          )}
+          {isShowPort && (
+            <EuiFlexItem grow={2}>
+              <EuiFormRow label="Port*" helpText="Should not exceed 65535.">
+                <EuiFieldNumber
+                  name="port"
+                  id="port"
+                  data-testid="port"
+                  style={{ width: '100%' }}
+                  placeholder="Enter Port"
+                  value={formik.values.port ?? ''}
+                  maxLength={6}
+                  onChange={(e: ChangeEvent<HTMLInputElement>) => {
+                    formik.setFieldValue(
+                      e.target.name,
+                      validatePortNumber(e.target.value.trim())
+                    )
+                  }}
+                  onFocus={selectOnFocus}
+                  type="text"
+                  min={0}
+                  max={MAX_PORT_NUMBER}
+                  disabled={isFieldDisabled('port')}
+                />
+              </EuiFormRow>
+            </EuiFlexItem>
+          )}
+        </EuiFlexGroup>
+      )}
 
       <EuiFlexGroup responsive={false}>
         <EuiFlexItem grow={1}>
diff --git a/redisinsight/ui/src/pages/redis-stack/components/edit-connection/EditConnection.tsx b/redisinsight/ui/src/pages/redis-stack/components/edit-connection/EditConnection.tsx
@@ -120,7 +120,6 @@ const EditConnection = () => {
                     editedInstance={state.data}
                     onDbEdited={onInstanceChanged}
                     onClose={onClose}
-                    isOpen
                   />
                 </div>
               </div>
